Search code examples
htmlaccessibilitynvda

Make text tab-able for screen reader

I have some text that displays if there is an error

<div>Error message</div>

When the error div is displayed I want the user to be able to tab with their keyboard over this so it can be read by a screen reader so it is accessible for everybody.

Solution

  • While there is a simple way to accomplish this, it is not how screen reader users would expect an error message to be used: Expectation is to have the error when focussing the input element itself.

    Screen reader support is not rendering content accessible to everybody. There are plenty different kinds of disabilities, and only some users benefit from screen readers. For others, other techniques are necessary.

    For example, colour contrasts and a layout that does not break when font size is increased helps users with visual impairments, and keyboard focus needs to be visible for those who can see but navigate by means of keyboard.

    As a start, I recommend the W3C’s Stories of Web Users in How People with Disabilities Use the Web to get an idea. The other articles and videos on that site are very well done, as well.

    The foundation for any accessibility technique is to properly structure HTML, use headlines and landmarks for orientation, and use semantic tags instead of generic <div>.

    How screen reader users navigate

    There are several ways to navigate a document/a page with a screen reader, depending on current use case:

    • Simply read all elements on the page (including text)
    • Read the next/previous block of content
    • Navigate to a heading via a list of headings
    • Navigate to a landmark/form from a list of landmarks
    • Navigate to a link via a list of links
    • Navigate to the next/previous interactive element by means of tab

    Aspects to render an error message helpful to screen readers

    It should never be necessary for a (screen reader) user navigate/explore the site to see whether there was an error. The error should be announced immediately after the intended interaction.

    How to achieve this, depends on how you are running form validation. Inline, server- or client side. Web AIM have a great article on Usable and Accessible Form Validation and Error Recovery.

    For example, if your error message is related to an input field, and you have client-side validation, it is very important to establish the relationship between them, which is often achieved by means of aria-describedby.

    <label>Name
  <input type="text" name="name" autocomplete="name" aria-invalid="true" aria-describedby="name-err">
</label>
<div id="name-err">Please provide a name</div>

    If validation is run on Submit, a best practice is to set focus to the first input in error via JavaScript .focus().

    How to make any element tab-able

    The tabindex attribute will render any element reachable by means of tab. You should not set it to a positive value.

    <div tabindex="0">Error message</div>

    If you want an element to receive focus only programmatically by means of JavaScript (on submit, for example), but not by means of tab, you can use tabindex="-1".