Before getting started with the Scavenger Hunt, explore these resources to learn more about some simple digital accessibility auditing tools. These tools help easily identify accessibility issues in web pages and other documents.
Also, don’t forget to consult the Accessibility Lab Hands On Exercises to learn about different assistive technologies and digital accessibility auditing tools.
WebAIM Color Contrast Checker
- This color contrast checker allows you to manually check contrast between written materials and background color to ensure they are sufficient for those with low vision.
Bookmarklets by Paul J Adams
- Through the hyperlink above, the bookmarklets titled Headings, Images, and Greyscale are especially useful for checking simple accessibility issues.
WAVE by WebAIM.org
- WAVE by WebAIM.org is a web accessibility evaluation which provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page. WAVE facilitates human evaluation and educates about accessibility issues. It can be downloaded as a Chrome web extension.
Tota11y by Khan Academy
- Tota11y is an accessibility audit tool from Khan Academy. Download this accessibility visualization toolkit on GitHub which aims to reduce the friction of accessibility (a11y) testing.
Scavenger Hunt Instructions
Below this section is a list of 10 Digital Access Tips to give you tips on how to build web pages that people using assistive technologies or adaptive strategies can perceive, operate, and understand more easily.
Five of the accessibility issues referenced in the list have been intentionally built into this page so that you can have fun trying to detect them. Use the tools in the “Resources” section above to help you identify them.
Scavenger Hunt Begins Below!
10 Tips to make your Web Pages Accessible
We all often access the web and some of us even create web pages, too. We know that different people access web pages differently. Some people use additional technologies with their computer or phone called assistive technologies. If we want everyone to be able to use the web pages we create, we need to understand the needs of different users and build our pages to meet those needs.
On this page, you will find some useful information to help you build web pages that are accessible to most users.
1. Add alternative text for images
Whenever you add an image to a web page, please make sure to add an alternative text description for it. Most web page authoring tools will allow you (or even force you) to add a text description when you try to add an image. If you think that the image is only decorative and does not add any information, you can choose to indicate it as decorative.
2. Add captions for videos
Whenever you upload a video, make sure that it has captions. Captions are important for users who cannot hear the audio from the video for whatever reason. They could be deaf or hard of hearing; they could be recovering from ear surgery; or they simply could be sitting in a quiet zone like a library while playing the video.
Video clip adapted from W3C website
3. Provide meaningful descriptions for hyperlinks
Think of the description as a brief statement of where the hyperlink will take the user who clicks on it. It must provide meaning even when read out of context. This is especially useful to screen reader users who often view a list of links for navigation. Avoid repeated link descriptions such as ‘Click here’ or ‘Read more’ for the same reason. Label your links with meaningful and descriptive text.
4. Use headings correctly
Not only do headings create a visual hierarchy that makes it easier to visually scan a page, headings help screen reader users quickly navigate a webpage, too. For example, using a Heading level 3 right after a Heading level 2 element denotes a section that is a subsection of the preceding Heading level 2.
Heading tags allow screen reader users to jump to the sections they’re interested in. Heading levels h1 through h6 are used commonly. Heading level numbers should increase sequentially. For example, using h4 after an h2 is not correct because screen reader users could wonder that they missed something.
Without section headings that indicate where the web form begins, screen reader users would have to wade through a lot of content in order to get to what they want to read deeper.
5. Use distinct and meaningful page titles
The first thing a screen reader user will encounter after a web page fully loads is the text in between the title tags. The worst thing you can do, aside from not having the title tag, is having them all the same in all of your web pages. This makes it difficult for users who rely on your HTML markup to determine what page they’re on, or if the link they clicked on is the same web page they were previously on or not. Distinguish your pages by using appropriate titles.
6. Use skip navigation
Screen reader users have to read HTML documents from top to bottom, without the ability to scan the web page for the information they’re interested in. Skip navigation allows screen reader users and persons who can’t use a mouse to skip long lists of links, such as the primary navigation on a website. Read more about skip navigation here.
Skip navigation is simply a link right at the top of your web page that, when clicked, positions you to the content section. You can hide this link from able-bodied users by moving the link outside of the browser viewport using CSS.
7. Ensure adequate contrast between text and background
Users with low vision require better contrast than a person with 20/20 vision. The Web Content Accessibility Guidelines specify 4.5:1 as the required ratio of contrast between color density of text and background. Always make sure to use colors for text and background to provide adequate contrast.
8. Do not use color alone to convey information
Some of your users could be color blind. Color blindness occurs when you are unable to see colors like most of the people do. Color blindness often happens when someone cannot distinguish between certain colors. This usually happens between greens and reds, and occasionally blues.
9. Do not use images of text in place of text
To a person who can see well, reading the image of a text might not be a problem so long as they know how to read that language. However, users who are vision impaired and use a screen reader require text input. To them text presented as image is not accessible unless the same text is also provided as a description of that image.
10. Use simple language
When complex sentence structures are used, it becomes harder to make sense of the meaning. English might not be the first language of some of your users. It is good to keep the writing style simple if you want to reach most of your users.
As stated at the beginning, five of the above 10 accessibility suggestions have been violated within this page. Try to detect them with the tools provided in the Resources section at the top of this page.