Accessibility Errors on a Very Sad, Inaccessible Webpage

Test the Mr. Bean homepage using the ASU DIY Accessibility Audit tool. Did you catch the following accessibility barriers?

No headings. Although visually there appear to be headings on the Mr. Bean page, the text is merely styled to look like a heading; only one is marked up with actual HTML heading tags (H1, H2, H3, etc.). Headings organize content and make text more approachable. In addition, screen readers can generate browsable lists of headings, providing users who are blind with a mental picture of the structure of a page and helping them find content more quickly. Additionally, automated search and analysis engines use heading information to construct an index of a page's contents. (See more on headings.)
No alternative text on images and misuse of alt tags. Alternative text is very important. Screen readers and other machines (such as search engines) can't read images and rely on text alternatives. Also, users with low vision who need to enlarge the screen depend on alternate text, which often scales better than images. On the Mr. Bean page, few of the images have alt tags. All inline images must have an alt attribute (sometimes referred to as an "alt tag"). (See more on alternative text for images.)
- Informative images: An image that conveys meaning or performs a function is considered informative (also often called "meaningful"). Its alt tag should contain a brief but equivalent text description of the image. On the Mr. Bean page, the informative images are the title image in the header and the three column images of Mr. Bean.
- Decorative images: A decorative image conveys no real meaning and has no real function. It should have an empty (NULL) alt tag. (A NULL alt tag alerts assistive technology to skip over the image.) Examples of decorative images are the gold horizontal bars, the thumbs up image in the form, and the blue badge icon next to the "Nonsense" heading. All of these need an alt tag. In addition, the second gold bar also incorrectly uses the title attribute (title attributes are used to provide supplemental text in a tooltip and should be avoided). Finally, as a decorative image, the thumbs up image should not have descriptive text but should have an empty alt tag.
Video doesn't have captions. Users with impaired hearing or who are deaf rely on captions to access videos. In addition, recent studies show that 71% of students without hearing difficulties use captions at least some of the time. All online ASU videos must have captions. (See more on captions for video.)
Some elements are not accessible by keyboard only. Many people with impaired mobility cannot use a mouse. In addition, most assistive technology (such as screen readers) uses keyboard-like functionality. It is imperative that users can move to all interactive items using the tab, arrow, spacebar and enter/return keys, alone. Interactive items are links, form fields, buttons, and widget controls (e.g., controls on videos, slideshows, etc.). On the Mr. Bean homepage, the dropdown submenu items in the main navigation bar are accessible by mouse but not by keyboard. To fix: make sure your CSS uses :focus as well as :hover. Also, never use onMouseover in Javascript; instead, use onFocus (onClick can be used with form controls and "real" links). (See more on keyboard only access.)
No skip-to-content link. The skip-to-content link should be the first item screen readers read on the page. This provides users with a means to bypass sometimes frustratingly extensive header content repeated on every page. (See more on skip-to-content links.)
Insufficient visual cues. When using only the keyboard to navigate the Mr. Bean homepage, it's very difficult to tell where you are on the page. A clearly visible outline should appear around the element you're currently focused on. This is called the focus indicator, and it's essential for keyboard-only users. Never use CSS to remove this outline. (See more on visible focus indicators.)
Display doesn't follow source code. As you tab through a webpage, you should move to each interactive item in the order it's displayed on the page. On the Mr. Bean page, tabbing out of the navigation menu jumps you to the bottom of the page (to the "Bonus Points" box). The box was moved from the top of the content to the bottom using CSS; instead, it should have been physically moved in the source code.
Redundant and/or uninformative links. Screen readers can generate and read aloud a list of the links found on a page. This is a useful way to navigate, provided the links are descriptive. On the Mr. Bean page, the list of "Read more" links doesn't describe the links' various destinations. Using the destination page's title or subject matter as the link text would be much more informative. (See more on writing informative links.)
Form fields don't have labels. On the "Yes! I want a Mr. Bean Screensaver!" form in the sidebar, the form fields appear to have labels, but actually this is just regular text styled to look like labels. Real HTML labels identify form fields to the browser, screen readers, and other machines, and they associate the label with its input. As a result real labels are treated differently and given unique characteristics. For instance on a form field with a real HTML label, you can click on the label itself to enter the form field, which is a big help to people with mobility issues, such as Parkinson's. Try it!
Name

(See more on forms and labels.)
Instructions don't appear before the field(s) they reference. Instructions and help text should be read before the input to minimize user error, particularly for disabled users who typically make more errors. Move help text, instructions, and requirements higher in the source code, so they are read before the form controls they refer to. Ideally, place them inside the label because some assistive technologies ignore all text in a form that is not inside a form element. (See more on forms and help text.)
Color alone is used to communicate information. The links on the Mr. Bean page are very difficult to find. A secondary cue, such as an underline, is essential for users, particularly those with low vision or who are color blind. Users who are color blind would also have trouble with the form in the sidebar, which refers to required fields by color alone. A secondary text-based cue (such as an asterisk) is essential. (See more on not using color alone to indicate meaning.)
Insufficient color contrast. On the Mr. Bean page, links and text do not have sufficient contrast with their backgrounds. For people with color blindness or other vision problems, high contrast makes text much more legible. The visual color contrast ratio between text and its background should be 4.5:1. Use a tool such as the WebAIM Color Contrast Checker to check text-to-background contrast ratios. (See more on sufficient color contrast.)

Bonus Points

Did you also recognize these additional barriers? If so, you're an amazing accessible coder!

No language defined. The default human language of each page should be identified to aid in translations to other languages, including braille and speech. To fix: Add the language to the html element: <html lang="en">
Missing ARIA landmark roles. Did you click on the "Landmarks" check in Tota11y? Landmarks are an important tool for navigating a page with assistive devices like screen readers. Use Tota11y to take a look at the fixed Mr. Bean page, which has had landmarks added it to it.
Must be able to pause animation. The animation gif of Mr. Bean is more than merely annoying. For users with vestibular or seizure disorders, movement that begins automatically and continues for more that 5 seconds can cause serious illness, including nausea, dizziness, and seizures. Do not automatically start motion on the page. If automatic motion is imperative, you must give users a way to stop or pause the motion. See the fixed Mr. Bean page for our solution, which was to use the Giffer library, so users can choose whether to play animated gifs or not. (See more on animation.)
No fieldset and legend used to describe related form controls. In the form in the sidebar, the size options are coded as related radio buttons. A fieldset should wrap related form controls together with a legend that describes the group. To aid users, screen readers repeat the legend for every input in the fieldset. In this instance, "Size" becomes the legend of the fieldset, and the size options are labels for the radio buttons. (See more on forms and fieldsets.)
Text in images should be made available in alternative text. The image in the header contains the graphic text "Mr. Bean's Fan Page," and it also serves as a link to the homepage, which makes the image both meaningful and functional. When an image contains text, that text should be repeated in the alternative text. In this case, the image is a background image--that is, it is replacing a text element using a CSS image replacement technique. Therefore, the text it is replacing should exactly mirror the text in the image. (See more on alternative text for images with graphic text.)
Using HTML markup incorrectly to achieve a presentational effect. In the "Bonus Points" section, the box around the text is created with a fieldset. Remember from #4 above that a fieldset wraps related form controls together and gives those elements certain abilities and characteristics. HTML markup has meaning (in other words, it is semantic). Don't use markup for how it looks; instead, use it only to identify and add meaning to elements.

Gold horizontal divider

See the Fixes in Action

Want to see an example of the fixes we discussed above? Take a look at the Bean Page Fixed page. Run the ASU DIY Audit or Siteimprove tool on the page. You can also view the source code to see our fixes.