#level aa

no. 140

Make sure none of the informative content in the page is provided in images

There is a belief, even to this day, that in order to be accessible, a page needs to avoid images altogether. While this is obviously false as long as these images are properly informed using alt text, there is still some truth to this. Images can be more difficult to perceive than regular text for some users because of the legibility of the font used, how fancy the font is, its compression ratio and how pixelated it gets when a user tries to zoom in at high level to read it properly. No matter how high of a quality an image turns out being, regular HTML text (styled with CSS) will always be more accessible when the content needs to be displayed in a different presentation. To avoid potential problems, it is preferable for informative content in pages to be provided in text, unless it is downright impossible to achieve the exact same results, using HTML and CSS.

To do so, simply make it a rule to avoid images of text whenever possible and rely on a combination of background images and superposed text, to recreate the intent of the image and achieve the expected results using CSS. With todays’ advances in browser support, there is really no reason to keep creating images of text when a similar presentation can be achieved otherwise. There are, of course, exceptions to this, such as company logos, but every image that turns out being interpreted in a similar fashion using just HTML and CSS will offer a lot more flexibility to anyone who requires modifying the default presentation of the page in order to be able to comfortably consume the content.

User Story

As a user who has low vision or has difficulty reading, I want every element of content to be provided in HTML and CSS, so that I can reliably control its presentation to facilitate reading.

Simple Code Example

Not Applicable

Testing Methodology

Using the Web Developer Toolbar for Firefox, select the “Outline Images » Outline All Images” test under “Images” and check that none of the images contain informative or meaningful text.

Specification Details

WCAG 2.0: Level AA

Principle: Perceivable

Guideline: 1.4 Distinguishable

Success Criterion: 1.4.5 Images of Text

Related Technique: G140

no. 130

Make sure section headings are set using the CSS font-face property and not images of text

In what now may seem like the old days of web development, web designers who wanted to rely on nice, unusual or catchy fonts to display custom section headings in their pages had no choice but to use images of text, for which they defined, font face, color and size. These images of text conveyed nothing, except for the text itself and required alternative text to be considered accessible. Not only did it require a lot of work to create all those images by hand, but modifying existing images to change the text, or generating new section headings was also a productivity black hole (not to mention alt text value updates, that were often forgotten). Furthermore, users who had low vision were often faced with a situation where text content would increase, but the headings’ sizes remained unchanged. Screen reader users would receive inaccurate information from their assistive technologies. Today, with the advances in CSS and the ability to embed fonts using the font-face property, it’s become much simpler to load up and use custom fonts. This is why authors need to rely on CSS and not images of text to present section headings.

To do so, simply make sure that all section headings in the page are made of pure HTML text and are styled using CSS, instead of creating images of text. Not only will this make the maintenance of such headings much simpler for the future and nullify the need for alt text, it will allow low vision users to resize the entire content to meet their needs.

User Story

As a user with low vision, I want every text element in the page to be set using HTML and CSS instead of images, so that I can easily control the resizing of section headings in content.

Simple Code Example

@font-face {font-family: 'CustomFont'; src: url('CustomFont.woff') format('woff');} h1, h2, h3 {font-family: 'CustomFont', ‘other font choices’, sans-serif; font-size: 2em;} ... <h1>First-level Section Heading</h1>

Testing Methodology

Using the Web Developer Toolbar for Firefox, select the “Display All Images” test under “Images” and look for any section heading text that disappears.

Specification Details

WCAG 2.0: Level AA

Principle: Perceivable

Guideline: 1.4 Distinguishable

Success Criterion: 1.4.5 Images of Text

Related Technique: C22

no. 128

Make sure PDF documents can be navigated using bookmarks

Not everyone will find it easy or even intuitive to navigate through a document using the conventional visual indicators defined by design or layout, such as document sections, page headings or even links. For some users, relying on a table of contents is a much more logical way of going through a document. Whenever a document is long enough to justify the use of a table of contents, or whenever a document has enough section that the equivalent of a table of contents becomes relevant, authors should integrate bookmarks to their PDF documents.

To do so, simply go to the Bookmarks navigation panel in Adobe Acrobat Pro and generate bookmarks from the existing structure of the PDF document. Start by selecting which structure elements will be used to create the bookmarks based on what makes most sense for the document, and give that bookmark list a name. Bookmarks will then automatically be generated from the document structure and will provide users with an alternative way to navigate throughout the document. While bookmarks may not be relevant when the document only has a page or two, larger documents will become much easier to navigate if such bookmarks are provided and reliably convey the structure of the information.

User Story

As a user with a cognitive disability, I want to rely on a simple table of content in order to navigate throughout the content, so that I can easily find what I’m looking for and jump straight to it in the document.

Simple Code Example

Not Applicable

Testing Methodology

Using Adobe Acrobat Pro, go to the Bookmarks navigation panel and validate that the document offers various bookmarks correctly leading to the different sections or pages of the document.

Specification Details

WCAG 2.0: Level A

Principle: Operable

Guideline: 2.4 Navigable

Success Criterion: 2.4.5 Multiple Ways

Related Technique: PDF2

Make sure users are given the opportunity to review and correct data before submission

Form interactions dealing with legal commitments or financial transactions carry more implications than others. It is therefore important that there be no errors in the data submission, as users will not have the opportunity to fix errors once it has been committed. Whenever users are dealing with forms meant to transfer sensitive data, authors should take extra steps to ensure users have a fair chance of catching errors before it’s too late. In order to avoid input errors that would be otherwise difficult or impossible to fix once data has been transferred over, authors should provide users with ways to ensure input is correct before completing an irreversible transaction.

To do so, simply make sure that whenever sensitive data is involved, users get a chance to review and correct information before activating the submit button. Doing so on a simple, one-page form is easy since users can simply review the form before submitting it. On a form that spans across multiple pages however, where data is collected from users in multiple steps before the transaction is committed, users may not recall all of the data that was entered in previous steps. One way enable them to review the data would be to cache the results of each step and allow users to navigate back and forth to review as a final step. Another way would be to provide a summary of all data collected in all steps, for users to review prior to the final commitment of the transaction.

User Story

As a user using assistive technology, I want to be given the opportunity to double check all data committed to a form, so that I can avoid potential errors that would be difficult to fix once the data is submitted.

Simple Code Example

Not Applicable

Testing Methodology

Before submitting a form, check that users are prompted to review and confirm data. If user data is collected in multiple steps, validate that users are allowed to return to previous steps to review and change data. Determine whether a summary of all data input by users is provided before the transaction is committed and a method is provided to correct errors if necessary.

Specification Details

WCAG 2.0: Level AA

Principle: Understandable

Guideline: 3.3 Input Assistance

Success Criterion: 3.3.4 Error Prevention (Legal, Financial, Data)

Related Technique: G98

no. 042

Make sure active elements are highlighted when they receive keyboard focus

Users who can’t use a mouse for whatever reason will often navigate through a page using their keyboard’s tabulation key, jumping from one active element to another (form controls, links and so on), based on source code order. Focus is generally displayed as a blinking vertical bar at the insertion point in text field, or as a dotted focus highlight rectangle on a link. This focus indicator needs to be easily noticeable, so progression through content can be effortlessly followed.

To do so, simply make sure that active elements receiving focus are highlighted in some way with a visible focus indicator. Most times, nothing needs to be done, as the browser’s default focus indicator proves sufficient. But depending on CSS layout, colors and presentation built on top of the HTML, this focus might be difficult to notice. In such cases, it can be useful to enhance the focus indicator through CSS, so it stands out better against the background of the element that currently has focus. Doing so will ensure users who can’t rely one a mouse will locate where the focus lies, and successfully navigate through the page.

User Story

As a sighted keyboard only user, I want to be able to reliably follow keyboard focus as it moves from one element to another, so that I can easily navigate through the page.

Simple Code Example

Not Applicable

Testing Methodology

Tabbing through the active interface components using the keyboard, check whether the browser consistently highlights the elements in some way. Look for highly visible indicators that help follow the progression through the page.

Specification Details

WCAG 2.0: Level AA

Principle: Operable

Guideline: 2.4 Navigable

Success Criterion: 2.4.7 Focus Visible

Related Technique: G149

no. 038

Make sure a contrast ratio of at least 4.5 to 1 exists between text and background

Color combinations are used to convey information all the time, but how efficient the conveyed information is entirely depends on the end user’s ability to perceive contrast between those colors. Therefore, making sure that end users can perceive the difference between the color of the text and the color of the background behind the text is critical. Hence, the importance of providing a sufficient contrast ratio, whenever color combinations are used.

To do so, simply make sure that any foreground/background color combinations for regular sized text that is less than 18 point (if not bold) and less than 14 point (if bold) meets a ratio of at least 4.5 to 1. Color contrast ratio can be easily measured, using readily available tools on the Web, such as the one referenced in “Testing Methodology” below. Doing so will ensure that people who are colorblind – but also people with low vision or those viewing the content in less-than-optimal lighting settings – will have better chances of adequately perceiving colors.

User Story

As a colorblind user, I want interfaces to rely on color combinations that are distinctive enough, so that I can easily perceive the contrasts and not miss out on any information.

Simple Code Example

Not Applicable

Testing Methodology

Using the Color Contrast Check tool, enter the hexadecimal value of both foreground and background colors to determine the contrast ratio. Any value that is under 4.5 to 1 for text that is less than 18 point (if not bold) or less than 14 point (if bold) results in insufficient contrast.

Specification Details

WCAG 2.0: Level AA

Principle: Perceivable

Guideline: 1.4 Distinguishable

Success Criterion: 1.4.3 Contrast (Minimum)

Related Technique: G18

no. 030

Make sure a search mechanism allows parallel navigation to content

Every site should provide multiple means of orientation, whether this is achieved through site navigation, sitemap, etc. Making sure users can locate content in a manner that meets their need is really important. One reliable way to do this is to provide them with a global search function. Users can then locate content by searching for specific words or phrases, without needing to understand or navigate through the structure of the site. This can be a quicker or easier way to find content, particularly on larger sites.

To do so, simply make sure that the search mechanism features a form control, complete with an explicitly associated text label, as well a submit button for launching the search on the users’ own terms. Provide a semantically structured results page, from which users can follow links to content resulting from the search query. Doing so will allow users to quickly find the information they are looking for, without having to go through a potentially extensive (and complex) site navigation.

User Story

As a visually impaired user using assistive technology, I want to navigate through content using a search feature, so that I can shortcut navigation and find the information I’m looking for much more quickly.

Simple Code Example

Not Applicable

Testing Methodology

Check that the page contains a search form or a link to a search page. Type text into the search form and launch the search. Check that the user is taken to a page that contains results for the searched term and a list of links to pages containing the searched query.

Specification Details

WCAG 2.0: Level AA

Principle: Operable

Guideline: 2.4. Navigable

Success Criterion: 2.4.5 Multiple Ways

Related Technique: G161

no. 008

Make sure headings properly convey the outline of the document

It is one thing to properly mark up headings in content using real HTML heading tags, but it’s another to make sure the content of these heading tags clearly describe the nature of the page’s content. The idea is always to make section headings within web content as descriptive as possible, so users, regardless of the fact they are assistive technology users or not, can understand what the content of the page is about.

To do this, simple review the content that follows each heading and make sure it properly describes that content. Done efficiently, this provides users with an overview of the content and its organization, hereby creating the equivalent of a table of contents for the document. Such a feature becomes very useful for quickly scanning the document and zooming in to the section that feels most interesting to users - it helps them find specific content and orient themselves efficiently within the web page.

User Story

As a user using assistive technology, I want headings in a web page to properly describe the content that follows, so that I can reliably understand how the information is organized.

Simple Code Example

<h1>First-level heading about accessibility</h1> <p>Paragraph about accessibility.</p>

Testing Methodology

Using the Web Developer Toolbar for Firefox, select the “View Document Outline” test under “Information” and make sure each heading properly identifies its section of the content.

Specification Details

WCAG 2.0: Level AA

Principle: Operable

Guideline: 2.4 Navigable

Success Criterion: 2.4.6 Headings and Labels

Related Technique: G130