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:



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.

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:



Images (alt attributes)

Provide "alt" attributes for all images.

For example: <img src="logo.jpg" alt="Company Logo" />

WCAG Guidelines referenced:

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" />


<img src="sale.jpg" alt="20% sale till November 2011" />

WCAG Guidelines referenced:

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:

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:




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:

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:




Navigation should be operable from the keyboard without using a mouse.

All navigation elements should be accessible via keyboard-only.

WCAG Guidelines referenced:

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:

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: