Mr. Bean Fan Page

Test your knowledge of web accessibility with the very inaccessible Mr. Bean Fan Page! There are at least 12 accessibility barriers on this page. See how many of them you can identify.

  1. Open the ASU Web Accessibility Audit tool in a separate tab.
  2. Go through the 9 steps of the audit, answering the questions, then create a report.
  3. To check for even more accessibility issues, run the Siteimprove extension.
  4. How did you do? Check your answers against the list of all known issues on this page.

You Call This a Heading?

Find a way to pause animated gifs (see WCAG), or better yet, allow users to choose whether to play them. Get the awesome Giffer library we're using to control this animation.

Mr. Bean with his head stuck inside an uncooked turkey

Something is Wrong

Screen reader users can use a list of all links on a page to quickly get to the one they're looking for..but only if links are clear and unique. For example, This link is more unique than a generic "read more."

Mr. Bean scowling at a yellow rubber ducky

You Must Be Joking

People using voice on their mobile devices also require every link be unique, so they don't confuse Siri, Google Assistant, etc. Bye, bye, redundant read more link.

No-Nonsense Typography

Typography is an area that might not affect your WCAG conformance score, but can make your users' reading experience much more comfortable. To make this page more legible, we re-set the font-size to 1em, which respects the default text size users set in their browser. We increased the line-height (line spacing) to 1.6875em, although anything from 140-170% is usually acceptable. Lastly, we limited the maximum width of lines to 75 characters with a max-width: 75ch. Line widths of between 70-80 characters are the most comfortable for readers.

More Nonsense

We changed this area's heading from an <h4> to an <h2>. Why? This heading is equivalent to the two before it, so it must be the same level as them. Because those headings directly follow an <h1>, they must be <h2>s. Headings should be hierarchical (think of them as an outline), and levels shouldn't be skipped. If you don't like the look of the proper heading, change it in the CSS.

Bonus Points

Can you identify any other accessibility barriers? See "Bonus Points" for a list of advanced accessibility issues.