Introduction
Accessibility features like the language attribute for a page or the page title aren’t difficult to find with a code inspection. But the ANDI tool makes it really effortless to find this information. Installing and using ANDI is incredibly simple because it is a JavaScript bookmarklet, so it installs and works in just about any modern browser.
Using the Structures Tool
In the screenshot below, we have invoked the ANDI bookmarklet on the Converge Accessibility home page. The next step is selecting the “structures” tool in the dropdown tool selector
From here, there are a few hidden gems that make quick work of basic accessibility issues.
Find the Page Title and Languages Used on Page
Once you have opened the “structures” tool, open the “more details” tab. This is shown in the following screenshot. Here you can find three really handy tools– page title, page language, and lang attributes.
Each of these tools are pretty easy to understand.
- Page Title will pop open a dialog box that includes the page title (if any) obtained from the page’s <title> tag.
- Page Language will open a dialog box that identifies the page language (if any) from the page’s <HTML> tag.
- Lang Attributes will show you where the lang attribute changes. This is very helpful when a page includes text content in a language that differs from the page’s language– for instance, a poem in French on a German language web page.
Reveal Reading Order
A quick way to see if the reading order on the page makes sense and follows the visual layout is to use another handy feature in ANDI. As shown in the screenshot below, we have invoked the ANDI tool on the Converge Accessibility home page, selected the structures tool and then clicked the “reading order” tool.
The screenshot also shows a portion of the page after selecting the reading order tool. In a nutshell, it creates tiny purple squares that indicate the order in which content will be read by a screen reader.