In the next section, strategies will be outlined for creating accessible content. But first, let's install a simple tool that can double check your work as it is created.
The Tota11y javascript bookmarklet was created by the Kahn Academy to visualize how web content is perceived by screen readers and other assistive technology.
Is your bookmarks bar visible in your browser? If so, try this option. To install, click and hold the Tota11y link in the box below, then drag the link from the box into your bookmarks bar. To activate the tool, simply click the bookmark.
{% hint style="success" %} ****tota11y**** {% endhint %}
This same tool has also been adapted to be a Chrome and Firefox extension. Install the extension and you'll see the eyeglasses icon in your toolbar, which you can click to activate.
- Tota11y Chrome extension
- Opena11y Firefox extension: Using the Tota11y script.
- Go to the page you wish to evaluate
- Click the Tota11y bookmark you just installed (or the Chrome extension icon).
- A black x-ray glasses icon will appear at the bottom left corner of your page (screenshot above).
- Clicking the glasses, you'll see a pop-up menu with choices such as Headers, Contrast, and Image alt-text.
- Clicking one of these options will provide information and screen annotations and track any errors.
- Dismissing the tools
- Clicking the option a second time dismisses the report.
- Similarly clicking the glasses again minimizes the tool.
This video shows this same process in motion.
{% embed url="https://www.youtube.com/embed/78fhYurzlYc" caption="" %}
We will review many of Tota11y's tools in the following pages as we talk about how to create better content.
As you become familiar with accessibility, these additional evaluation tools will become invaluable.
- WAVE Accessibility Evaluation Tools
- ANDI - Accessibility Testing Tool
- bookmarklet with multiple testing tools
- Contrast checkers
- Color blindness visualization tools