Skip to content

Instantly share code, notes, and snippets.

@svinkle
Last active November 4, 2017 13:54
Show Gist options
  • Save svinkle/7e075f073dde745241f9 to your computer and use it in GitHub Desktop.
Save svinkle/7e075f073dde745241f9 to your computer and use it in GitHub Desktop.

Common Web Accessibility Issues

I was once asked to come up with a short list of common accessibility issues. Here are some points I came up with. Please comment if anything is incorrect or you feel might be missing.

Color contrast

Test color contrast to make sure text is readable. Use a tool like this Color Contrast Calculator to test: http://leaverou.github.io/contrast-ratio/ Also test in High Contrast mode: https://twitter.com/svinkle/status/563405596699795456

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). Use proper focus management when these actions are fired on the page.
  • Use a Span to house inline content. Do not attach an event to this element as it has no semantic meaning.
  • Use a Div to house block level content. Do not attach an event to this element as it has no semantic meaning.

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

Alt text

Make sure alternative text is available where appropriate. Things like images and image links must have descriptive text.

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

Form labels

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

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

Tab index

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

  • Tab index value -1 can be used along with an anchor link or JavaScript to force focus on to that element. This does not add the element to the natural source order.
  • Tab index value 0 adds an element to the source order as a tabbable element, giving focus when the user reaches this element.

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

Skip links

Skip links should be the first element on the page. These are used to skip common page element such as utility bars or main navigation, things the user already knows about. The target for the skip link should be the main page content area. This main content area should have a tab index value of -1 in order for it to receive focus.

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

Viewport Zoom

It is important to not disable viewport zoom 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.

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: http://a11yproject.com/patterns/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment