Accessibility evaluation for web writers

2 Comments Written on May 2nd, 2013 by
Categories: Accessibility, Articles, Testing content

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

You’ll need:

Screen capture

Figure 1: The Web Accessibility Toolbar

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.

Sensory characteristics

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’.
[Guideline 1.3.3]

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.
[Guideline 3.1.2]

Screen capture showing

Figure 2: Language attributes for a French quotation and German greetings

Unusual words

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.
[Guideline 3.1.3]

[A note on this guideline: I recommend you avoid terms your audience isn’t familiar with, rather than explaining or defining them.]

Abbreviations

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.
[Guideline 3.1.4]

[A note on this guideline: I recommend you avoid abbreviations your audience isn’t familiar with, rather than explaining them.]

Reading level

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.
[Guideline 3.1.5]

[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.]

Screen capture showing

Figure 3: Reading levels provided by www.read-able.com

Pronunciation

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.
[Guideline 3.1.6]

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.

[Guideline 1.3.1]

Screen capture

Figure 4: Table tags displayed by the Web Accessibility Toolbar

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?

[Guideline 2.4.6]

Section headings

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.
[Guideline 2.4.10]

[A note on this guideline: You don’t have to use the proper heading levels to meet this guideline. But it is good practice.]

Screen capture

Figure 5: Heading structure shown by the Web Accessibility Toolbar

3. Check navigation

Keep the page open in Internet Explorer.

Page titled

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.
[Guideline 2.4.2]

Screen capture

Figure 6: The page title displayed by the Web Accessibility Toolbar

Link purpose

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.

Non-text content

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.
[Guideline 1.1.1]

Screen capture

Figure 7: The alt text for an image displayed by the Web Accessibility Toolbar

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.
[Guideline 1.4.1]

Contrast

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]

Screen capture

Figure 8: Colour contrast results shown by the Colour Contrast Analyser

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]

Consistent identification

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.
[Guideline 3.2.4]

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.

2 comments “Accessibility evaluation for web writers”

Sorry, you lost me at the readability score. Counting words, periods, and syllables isn’t meaningful–but it’s what the “readability” indexes use as a proxy for actual readability. To get authentic readability, use the principles of plain language. For Web content, you can’t do any better than to follow Ginny Redish’s Letting Go of the Words: Writing Web Content that Works. Instead of taking the time to do a senseless mathematical exercise, invest it wisely in looking up Ginny’s advice on how you can make authentic improvement to your writing. You’ll be glad you did.

The guidelines have several weaknesses, particularly when it comes to content. Unfortunately my warning towards the end of this article clearly didn’t come soon enough, and needs to be stated more clearly to catch people who aren’t regular readers here. I had written “Bear in mind, there is a difference between meeting the guidelines and making your content as accessible and usable as possible. I recommend you focus on the latter (you’ll see how to do this if you read any of my other articles on accessibility).” I’ll add a more visible note higher up on the page now.