I was once asked to come up with a short list of common accessibility issues. Here's what I came up with!
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
anchorwhen linking to a different page or jumping to a content section on the same page
- Use a
buttonwhen 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
spanto contain inline content. Do not attach an event to this element as it has no semantic meaning and is not focusable.
- Use a
divto contain block level content. Do not attach an event to this element as it has no semantic meaning and is not focusable.
alt text is applied when appropriate. Things like images and image links must have descriptive
More reading: http://webaim.org/techniques/alttext/
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.
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=-1can be used along with an
tabindex=0adds 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/
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" />
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.
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.