5

The setup:

We have section A, where a user interacts with form controls and depending on the interaction receives specific messaging with aria-live. 

aria-live="assertive" role=”status”

That messaging drives users to another portion of the page - section B. The copy currently reads:

This product is not available, check availability in stores below

My accessibility concern is that 'below' may be a visual reference.

In situations where there is a need to drive users to another part of a page, how do you address this in accessibility practices?

Improve this question
5
  • 2
    you could say 'listed below' making that a hyperlink to that part of the page. It's still a visual reference, but at least linked.
    – DA01
    Jan 14, 2015 at 18:54
  • @DA01 - that was my first thought, but I don't love that solution
    – Jason
    Jan 14, 2015 at 18:54
  • 1
    Well, this is one of those cases where the UX is already suffering because 'the product is not available'. I have a hunch that's where most people will give up anyways. Not that you shouldn't strive for the best solution you can, but this may not be the more important area to focus on. That said, I think can salvage it with wording. Maybe 'check in-store availability (listed below)' or something?
    – DA01
    Jan 14, 2015 at 18:56
  • @DA01 - unfortunately, I cannot control product stock levels (that would be a higher pay grade ;) )
    – Jason
    Jan 14, 2015 at 19:47
  • 1
    Any possibility of doing something similar to what wikipedia does with citation links and highlight the relevant section as a better than nothing solution? en.wikipedia.org/wiki/User_experience#cite_note-1
    – nightning
    Jan 14, 2015 at 20:15

1 Answer 1

Reset to default
1

Have you tried using focus to direct user attention? Assistive technologies will let them know if an element has been given that focus (the same way they press tab to navigate - and focus on - each link on a page). You need to use javascript to make this work, triggering the .focus() method when the link is clicked on.

It is very similar to how "Skip to Content" works, where focus is given to a non-link element (by giving the element a tabindex attribute with a value of -1, you won't be able to tab to it but can give it focus manually). As examples, visit the NYT or WebAIM the following sites and hit tab a couple times.

In your case, after the initial interaction, you can give focus right to the section of the page that checks availability. Or if you don't want that to be automatic, you can keep the status message and say "This product is not available, click here to check availability in stores," with that click giving focus to the proper section.

This blog post discusses the concept in a bit more detail.

Improve this answer
1

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.