Template
Accessibility Guidelines Related to a Web Site's Template
These days, many sites are using content-managed systems that enable the Web site's page content to display within layout templates. This provides a great opportunity for WCAG optimization because optimizing the template allows you to optimize key components of the entire site in one shot.
Here are some recommendations to consider when creating or auditing a web site's template:
Code Validation
Ensure the Web site's code validates.
Validate the code and CSS using a code validation tool (i.e. W3C's Markup Validation Service).
WCAG Guidelines referenced:
- Guideline 4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies.
- Parsing:
4.1.1 In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features. (Level A)
- Parsing:
Colour Contrast
Ensure that text colour has an acceptable colour contrast ratio.
For most colours, 4.5:1 is an acceptable ratio, however for the red/orange colour range, a 7:1 ratio is recommended. There are various colour contrast checking tools available online (i.e. Colour Contrast Check by snook.ca).
WCAG Guidelines referenced:
- Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
- 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
- 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
Colour should not be the only means of conveying information.
For example, do not colour an element red as the only indication of an error.
WCAG Guidelines referenced:
- Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
- 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
- 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
Images (alt attributes)
Provide "alt" attributes for all images.
For example: <img src="logo.jpg" alt="Company Logo" />
WCAG Guidelines referenced:
- Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
- 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)
- Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
- 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)
For content images, make the "alt" attribute a brief description of the content.
For example:
<img src="doctor.jpg" alt="Doctor examining a child patient" />
or
<img src="sale.jpg" alt="20% sale till November 2011" />
WCAG Guidelines referenced:
- Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
- 1.4.5 Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: (Level AA)
Customizable: The image of text can be visually customized to the user's requirements;
Essential: A particular presentation of text is essential to the information being conveyed.
Note: Logotypes (text that is part of a logo or brand name) are considered essential.
- 1.4.5 Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: (Level AA)
For image links, use the "alt" to briefly describe the link destination.
For example: <img src="next.jpg" alt="Next page of the Web Accessibility article" />
WCAG Guidelines referenced:
- Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
- 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)
- Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.
- 2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)
For purely decorative images, it is not necessary to add a descriptive "alt" tag. Use an empty "alt" tag instead.
For example: <img src="line.jpg" alt="" />
WCAG Guidelines referenced:
- Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
- 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)
- Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
- 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)
Language
Identify the language of the page.
For example, use <HTML lang="en"> to indicate that the content of a Web page is in English.
WCAG Guidelines referenced:
- Guideline 3.1 Readable: Make text content readable and understandable.
- 3.1.1 Language of Page: The default human language of each Web page can be programmatically determined. (Level A)
Identify any changes in the page content's language.
Use the Lang attribute to change the language in the page's content.
For example: <p lang="en">This Web page is available in English and <span lang="fr">français</span>.</p>
WCAG Guidelines referenced:
- Guideline 3.1 Readable: Make text content readable and understandable.
- 3.1.2 Language of Parts: The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text. (Level AA)
Logical Order
Ensure a logical tab order.
Navigation and form elements should follow a logical tab order.
WCAG Guidelines referenced:
- Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.
- 2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)
Navigation
Navigation should be operable from the keyboard without using a mouse.
All navigation elements should be accessible via keyboard-only.
WCAG Guidelines referenced:
- Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard.
- 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (Level A)
- 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (Level A)
Navigation should be consistent throughout the Web site.
Navigation elements that are repeated throughout the web site should remain consistent in layout and appearance so as not to confuse the user.
WCAG Guidelines referenced:
- Guideline 3.2 Predictable: Make Web pages appear and operate in predictable ways.
- 3.2.3 Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. (Level AA)
- 3.2.3 Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. (Level AA)
Provide a means to skip repetitive navigation.
Allow site users to skip repetitive navigation in order to directly access the Web page's content by using a "skip to content" link. This allows screen reader technology to skip over repeated content.
WCAG Guidelines referenced:
- Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.
- 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
- 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)