Accessible development resources…and one important tip

With this post I am bringing together some resources that I've been using for years, and sharing with my team. All developers will benefit from familiarizing themselves with these techniques.

Accessible screen reader content


Creating accessible screen-reader-only content:

For when you want to hide content from sighted users but share it for screen reader users.

Resources:

Common issue:

  • Using “display: none” for this purpose hides the content from everyone.

Accessible forms


Creating accessible forms:

Resources:

Common issues:

  • Not programmatically associating labels with input fields with the “for” attribute.
  • Allowing error messages to be bypassed by the screen reader.

Accessible tables


Creating accessible data tables:

Resources:

Common issues:

  • Not using the “caption” element, which will be displayed by some screen readers that allow users to navigate by tables
  • Not utilizing “scope” attributes for row and/or column headers
  • Developer doesn’t know how to unit test for data tables with a screen reader
  • Screen reader bugs when parsing data table content and design suggestions to cope with these (Deque University, "Simplify Data Tables to Just Column Headers, if Possible")

And now for the tip


Important tip: “Skip navigation” links are often implemented wrong!

Common issues:

  • The developer tests the implementation by just tabbing to the content, but does not continue tabbing to make sure the next focus item is within the content, not back up to the next link after the skip link.
  • The design keeps the “skip to content” link hidden, even on focus, because the idea is that screen reader users will hear it. It should be available for keyboard-only users also who need to see it.
Wrong:

<a href=“#content”>Skip to content</a>

<a name=“content”>Welcome!</a>

Right:

<a href=“#content”>Skip to content</a>

<a id=“content”>Welcome!</a> <!— Note “id” instead of “name” —>

Or, if you don't want to link to an anchor tag...

<h1 id=“content” tabindex=“-1”>Welcome!</h1> <!— Note use of “tabindex” so that this content will actually receive keyboard focus. —>

If you use a "name" attribute instead of an "id" attribute, the anchor will not receive focus, and when the user clicks tab again, focus will return to the next item after the "skip navigation" link.

This error is often missed because when unit testing, the tester will only test to see if the page jumps to the content, but does not continue tabbing to see if the focus has moved to the content area.

Leave a Reply

Your email address will not be published. Required fields are marked *