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.

Improve this question
1
  • 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, 2017 at 23:25

2 Answers 2

Reset to default
4

"...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. This will also account for sighted screen reader users, who need consistency between visual and spoken content. It sounds like a big challenge but is very doable.

Improve this answer
2
  • I just did some research, and it seems that setting focus on the changed content is not necessarily best practice, as most of the time the changed content comes right after the trigger. Right? Like in tabs. But with pagination, which often follows the content being changed, this would be very important. I guess mentioning "page 1 of 5" in the heading for the results would be very helpful as well?
    – Andy
    Aug 31, 2021 at 16:34
  • Mentioning "page 1 of 5" somewhere on the page is definitely helpful. Personally, I often skip surveys if I don't know how long they are. Whether that's in the heading or at the bottom of the page as in the OP screenshot is more of a design decision. But moving the focus to the new content is very dependent on the situation. A tab, like you mentioned, should generally not move the focus. Pagination should generally not either, although the term "pagination" used in the OP is not the right term. With SPAs, focus generally should be moved to the new content.
    – slugolicious
    Sep 2, 2021 at 20:53
1

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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