3

While working on a SPA, it often comes up that we paginate content to reduce UI complexity, even though the other "pages" are already available.

Thinking about this from a keyboard or screen reader user's perspective, it seems like pagination could lead to a more complicated UI, as the user would need to choose "next page", then move their focus to the top of the screen to resume reading again. It seems like a better experience would be to allow screen readers to access all the content immediately, and let the user navigate using Headings

Do screen reader users appreciate UI's that force them to focus on one section at a time, or is it better to allow them to navigate all sections of content on their own?enter image description here

Example:

In the image above, we have a series of 6 questions that the user gets asked. A visual user sees one question at a time. After answering one question, the answered question slides away and the next question slides in to view. The arrows in the bottom right allow the user to skip a question or go back. JS moved the user's focus as answer or skip a question.

The alternative navigation for a screen reader user might allow them to read all 6 questions by skipping to the next Heading, with an aria-hidden on the controls.

  • The eyes of an user are roaming across the whole screen. Forcing the user to follow some predefined path you picked for best is something I don't think that will have a positive impact. Restricting the user is never a good way of doing things. You can however use various techniques (images tend to get the most attention when we look at a page) to steer his attention. – rbaleksandar Jan 10 '17 at 23:25
2

"...the user would need to choose "next page", then move their focus to the top of the screen to resume reading again."

Actually, you should do that for them. As a screen reader user, when I select 'next', I expect the next page to display and the question to be read automatically with my focus being put on the choices.

That also benefits keyboard users (which could be out of necessity or they could be a power user). When I tab to the next button, if the page advances and my keyboard focus is put on the choices, then I can immediately choose an answer and go to the next page very quickly. It's a great interface.

And presenting questions one at a time also helps with cognitive issues, which are often overlooked when designing for accessibility. You don't want other questions distracting from the question at hand. A screen reader user with a cognitive issue (perhaps attention problems or dyslexia) would not want access to all the questions.

You don't want to segregate your customer base. You should have one interface that is accessible to all. It sounds like a big challenge but is very doable.

2

For your question:

Do screen reader users appreciate UI's that force them to focus on one section at a time, or is it better to allow them to navigate all sections of content on their own?

This is important to let the user in Control, but it is as much important to provide Guidance.

This is why this is recommended to set focus on a legitimate element after a navigation action is triggered by the user. (for example, when opening a tab, the focus will automatically move on the content's title)

For your example:

After answering one question, the answered question slides away and the next question slides in to view. The arrows in the bottom right allow the user to skip a question or go back. JS moved the user's focus as answer or skip a question.

So for SR-users, you can mimick the same.

What you need to do is to have an information message (invisible to normal users) focusable with TAB, that is also a heading saying for example: "Information: Answering a question will move you to the next one. You can also go back and forth using Navigation buttons".

Use this header before the question's header ("Sleep" in your example) to avoid repeating the message on every question

You can now set the focus on the new question's header automatically when the user selects a result.

then you can add a "Navigation buttons" invisible header before the set of buttons, and you should be fine.

User tests only can confirm if this is working or not

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.