Web writers should know how to check if their content is accessible. It’s not a difficult skill to learn, and a few simple tools will help.
In this article, I discuss evaluating content against the Web Content Accessibility Guidelines 2.0. If you’re a web writer and not familiar with the guidelines, you can read my articles on accessibility for web writers.
The 4-part structure used here follows my accessibility checklist for web writers.
Tools for the evaluation
- Web Accessibility Toolbar – a free download from Vision Australia that runs inside Internet Explorer
- Colour Contrast Analyser – also a free tool that runs within the Web Accessibility Toolbar
- Ms Word (any version) or www.read-able.com
- Printer – black and white.
1. Check written content
For this part of the evaluation, print the page you want to check. Read it through slowly, marking any concerns related to the following guidelines.
Do any instructions refer to sensory characteristics of content or controls, such as shape, size, screen location, orientation, sound or colour? They should be supported by text labels. For example, it’s fine to refer to the ‘References linked on the right’ as long as they are labelled as ‘References’, but avoid just saying ‘Links on the right’.
Language of parts
Are there any foreign language words or phrases in the content? Don’t worry about words we commonly use, like ‘rendezvous’ or ‘bon voyage’.
If you notice any, open up the page in Internet Explorer. Click the Doc Info tab on the Web Accessibility Toolbar and choose Show lang attributes. This will identify whether language tags have been used.
Are jargon, idioms or specialist terms used? If so, are they explained in the text or in a linked explanation? Some jargon or technical terms might be fine if you know the target audience is familiar with them.
[A note on this guideline: I recommend you avoid terms your audience isn't familiar with, rather than explaining or defining them.]
Are all abbreviations or acronyms explained in the text, linked to an explanation, or explained using an <abbr> tag?
To check for the tags, open the page in Internet Explorer. Using the Web Accessibility Toolbar, click the Structure menu and choose Acronyms/Abbreviations. Tags will be highlighted in the text or a dialogue box will pop up saying that none were found.
[A note on this guideline: I recommend you avoid abbreviations your audience isn't familiar with, rather than explaining them.]
Does the content have a reading level no higher than lower secondary (roughly, below grade 10). If it does, is an easier-to-read version or supplementary content (images, animations, video, audio) provided?
To check reading level, copy the content (minus the header, footer, menus and sidebars) from your web page into either:
- Microsoft Word. Run the spell checker and once you’ve worked through the feedback it provides, you will see the Readability Statistics dialogue box. If you don’t, you’ll need to enable this function and then run the spell checker again
- www.read-able.com. Paste your content into the box under the Test by direct input tab and press the Calculate button.
Note the Flesch Kincaid Grade Level score. If you’ve got proper names and titles in your content, you can remove them and rerun the test.
[A note on this guideline: I recommend you learn to write in plain language, rather than rely on readability testing tools. They test only word and sentence length. Readability relies on more than just these two aspects of content.]
Check for any heteronyms—words that have the same spelling but different pronunciations and meanings. If the context doesn’t make it clear which meaning is intended, check if a pronunciation is provided.
In English, the context almost always makes the meaning clear. And if it doesn’t, it is easier to rewrite the text than provide a pronunciation.
2. Check structure and formatting
For this part of the evaluation, open your page in Internet Explorer and use the Web Accessibility Toolbar.
Info and relationships
Are headings, lists, tables, quotations and emphasised text tagged properly? Is any text that is not a heading, list item or quotation inappropriately tagged as one?
Using the toolbar, check:
- Headings – click the Structure tab, then Headings. Check that all headings and sub-headings are enclosed in heading tags (anything from <h1> to <h6>), and no heading tags are applied to content that isn’t a heading.
- Lists – click the Structure tab, then List items. Check that dot points are enclosed in <ul> tags, numbered points in <ol> tags, and items within the list in <li> tags. Nested lists are fine, but a series of single item lists is not a good idea. Watch out for <li> tags used to indent content that isn’t a list. If the list is a set of definitions, it should be enclosed in <dl> tags. The terms being defined should be inside <dt> tags, and their definitions inside <dd> tags.
- Tables – click the Tables tab, then Show data tables. Tables will be enclosed in a <table> tag and should have a <caption> or text tagged as a heading—but you don’t need both. Check that cells in the header row or column are marked with <th> tags. Ideally, these cells should have a ‘scope’ attribute. If the table is more complex, header cells should use an ‘id’ attribute and matching headers on the relevant data cells.
- Quotations – click the Structure tab, then Q / Blockquote. Quotations within a sentence should use the <q> tag, while whole paragraph quotations should use <blockquote>. Check that <blockquote> isn’t being used to indent text that isn’t a quotation.
- Emphasised text – click the Structure tab, then Show other elements. Type em, strong in the box (to check for both tags) and then click OK and OK again. The tags will be shown within bordered boxes, or a ‘No em, strong elements found’ message displayed.
Headings and labels
Read through the content checking that any labels and headings are meaningful. You can get a list of the headings to check, using the Web Accessibility toolbar. Click Structure and then Heading structure. Ignore headings that are part of the web template and focus on those used in the content. Are the headings a good indication of what the content covers?
Now check if headings are used to break up and label all the important parts of the content. Check visually first. Then use the toolbar to do a Heading structure check. The main heading should use an <h1> tag, and each section of content should be tagged as <h2>. Sub-sections should be tagged as <h3> and so on, to reflect the structure of the content.
[A note on this guideline: You don't have to use the proper heading levels to meet this guideline. But it is good practice.]
3. Check navigation
Keep the page open in Internet Explorer.
Click the Doc Info tab on the Web Accessibility Toolbar, then Metadata information. At the top of the next screen you’ll see the web page address. Right below that is the title. Check that it accurately and meaningfully identifies the page.
First, scroll through the page noting the links. If they are underlined, they should be easy to see and assess without going any further.
If you can’t easily see the links, use the toolbar and click the Doc Info tab, then List links. This opens a new window listing all the links on the page—not just those in the content you need to assess. Find where the content links start in the list. The first column shows the link text and the text alternative for any images used as links. The second shows the link address. For level A or AA conformance, links can rely on the nearby context for meaning. But it’s best if they don’t so users don’t need to read the surrounding content to figure out where a link will lead them.
[Guidelines 2.4.4 and 2.4.9]
4. Check images
Images need to be checked for 5 issues. You can use the Web Accessibility Toolbar for most of these, so keep the page open in Internet Explorer.
Check that the images in the content have an appropriate short, long or blank text alternative by clicking the Images tab, then Show images. A red dotted line will appear around your images and nearby you’ll see the text alternative displayed. If the image needs a long text alternative, the short alternative should mention where it is—below the image or on a linked page.
Use of colour
Print the page in black and white (unless you did this earlier in part 1). With the colour missing, you should still be able to understand the information provided by the image.
Click the Colour tab, then Contrast Analyser. Leave it set to use the luminosity algorithm. Use the dropper to select the foreground colour (the text or data in the image) and then the background colour. The tool will tell you if the contrast meets the thresholds set for level-AA or level-AAA conformance.
[Guidelines 1.4.3 and 1.4.6]
Images of text
Click the Images tab, then Show images. A red dotted border will appear around any images used in your content, allowing you to see if any text is presented as an image. Logos and graphs with embedded text are allowed, along with photos that contain incidental text (like a sign on a counter in the background of a staff photo).
[Guidelines 1.4.5 and 1.4.9]
Check across a set of pages to see if icons and their text alternatives are used consistently by writers. Focus on commonly used icons, like those used to identify links to content in PDF or DOC format, or pages that open in new windows.
Completing the evaluation
Edit the content or find new images to meet the accessibility conformance standard you are aiming for.
If you are reviewing the content for another writer, make notes about what you found. Talk these through with the writer so they’ll benefit from your review. If you are a content manager or review other people’s work regularly, it’s a good idea to note the areas where writers might need more guidance or training.
Download print version
I’ve provided two print versions. The first is for checking content to level-AAA conformance with WCAG 2.0; the second to level-AA.