Common Web Accessibility Issues

Most are easy fixes. Some others, not so much.

I was once asked to come up with a short list of common accessibility issues. Here's what I came up with!

Color contrast

Test color contrast to make sure text is readable. Use a tool like this Color Contrast Calculator to test. Also test in High Contrast mode.

Anchor Vs. Button Vs. Span Vs. Div

It is important to know when to use the appropriate element for a page action. The following is a basic overview of when to use/attach an event to which element:

  • Use an anchor when linking to a different page or jumping to a content section on the same page
  • Use a button when a dynamic page interaction is to take place (accordion, open a modal window, etc) or when submitting a form. Use proper focus management when dynamic actions are fired on the page.
  • Use a span to contain inline content. Do not attach an event to this element as it has no semantic meaning and is not focusable.
  • Use a div to contain block level content. Do not attach an event to this element as it has no semantic meaning and is not focusable.

More reading: http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/

Alt text

Make sure alt text is applied when appropriate. Things like images and image links must have descriptive alt text.

More reading: http://webaim.org/techniques/alttext/

Form labels

Make sure all form inputs have a label. These labels are read aloud by screen readers and help to give context on the input control. Input placeholder text is not a replacement for labels.

More reading: http://www.nngroup.com/articles/form-design-placeholders/

Tab index

Do not use tabindex attributes with values greater than 0 (zero). Browsers handle tabindex organically via source order. Using any positive value above 0 will cause a jump to that input when hitting the tab key which can create confusion and frustration for keyboard users.

  • tabindex=-1 can be used along with an anchor or JavaScript event to force focus on to that element. This does not add the element to the browser source order.
  • tabindex=0 adds the element to the source order as a tab-able element, receiving focus when the user reaches the element.

More reading: http://webaim.org/techniques/keyboard/tabindex

Skip links should be the first element on the page. These are used to skip repeated page sections such as utility bars or main navigation, things the user already knows about. The href for the skip link should be the id of the main page content container. The main content container should have a tabindex=-1 in order for it to receive focus.

More reading: http://webaim.org/techniques/skipnav/

Viewport Zoom

It is important to not disable viewport zooming for users who need large text in order to read content. Most boilerplate templates do not disable zoom so this shouldn’t be an issue but is worth mentioning.

Basically, don't do this:

<meta name="viewport" content="user-scalable=no" />

More reading: http://www.iheni.com/mobile-accessibility-tip-dont-suppress-pinch-zoom/

Focus management

Focus management is key for a positive user experience who rely on keyboard navigation. This technique really comes in to play when handling dynamic page elements such as tabs, accordions, modal windows, things of this nature.

Use JavaScript to handle focus management. There are built-in browser functions to help. For example, document.activeElement keeps track of which page element last had focus.

There are lots of examples of dynamic page widgets and focus management on the A11Y Project Patterns page.

Leave a comment