CODEWITHSUNDEEP
accessibilityuser-experiencewai-ariawcagwcag2.0
theGreatM
theGreatM

Reputation: 1

Hidden content with assistive technology

I'm a little bit confused of how the hidden content is working with assistive technologies. I'll give you a few examples and would like you to explain me this, please:

  1. If I want to make a small popup, that is previously was display:none;, how would the user with the AT will understand it's something new, except the fact I will provide a focus to this popup automatically?

  2. How should I make accessible image slider? I heard of the role and aria-* attributes and that only the visible image at the time should be display:block; or just visible and all the other images should be display:none;. If it is, wouldn't it be confusing for the user with he AT(part of a first question)?

  3. Is there something more than the desktop computers requires for the mobile devices. For example, if I want to make a hamburger menu for mobile screens, should links of it be hidden with the display:none;? How should I notice the user about the links are now visible?

Upvotes: 0

Views: 171

Answers (1)

aardrian
aardrian

Reputation: 9009

  1. Providing focus is key for a pop-up, and typically to the control that will close it. If, however, your pop-up is not really a pop-up, but just a box of updates perhaps at the top of the page, then you can skip focus and use a live region. In short, it depends what you are doing. Remember that a pop-up is intended to prevent the user from interacting with the rest of the page until a designated action is taken, whereas an updating content block does not carry that restriction.

  2. If you are moving focus, not a big deal. The hidden images won't be in the page content so they will not slow the user. In this case, do not use a live region as that will keep interrupting the user as it cycles.

  3. In this case by moving focus to a previously hidden nav menu. With good accessible names it will work just fine.

I suspect you are not familiar with ARIA live regions, though you are aware of focus management.

Live regions can address some of your needs. There are some live region properties you need to know. If you want a region to be announced as soon as it changes, no matter what the user is doing, then it will be assertive. If you want it to wait until the user finishes an interaction, then it will be polite. There are corresponding live region roles as well, which I show below.

Further, the aria-atomic property will tell the screen reader whether it should announce the entire thing (which is good for an alert message) or just the parts that changed (which might be a better fit for a timer).

Avoid having more than one ARIA live region on a page.

Here is an example of an offline alert. Here is a handy slideshare that goes into more detail. There is a lot more out there now that you know what to search.

Upvotes: 1

Related Questions