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.
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
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/
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/
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/
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 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/
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 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/