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.
- Open the ASU Web Accessibility Audit tool in a separate tab.
- Go through the 9 steps of the audit, answering the questions, then create a report.
- To check for even more accessibility issues, run the Siteimprove extension.
- How did you do? Check your answers against the list of all known issues on this page.
You Call This a Heading?
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."
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.
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.
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.
Can you identify any other accessibility barriers? See "Bonus Points" for a list of advanced accessibility issues.