This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
Developing Accessible Websites
Guidelines and Standards
The Web Content Accessibility Guidelines (WCAG) 2.2, as published by the World Wide Web Consortium (W3C), have become the standard of web accessibility. The WCAG 2.2 is organized into four main concepts that web content should strive to be:
- Perceivable
- Operable
- Understandable
- Robust
Each concept within the WCAG 2.2 — Perceivability, Operability, Understandability, and Robustness — are further broken down into more specific success criteria. These criteria are then labeled with a level: A, AA, or AAA, with A being the lowest and AAA being the highest. The higher the level, the more critical the issue is. All efforts should be made to reach level A at the minimum, with levels AA and AAA being the goal when possible.
All technological formats (desktop, laptops, mobile devices, etc.) should adhere to the WCAG 2.2 and need to be considered when creating and/or maintaining Web content, even beyond websites. What works well on a laptop, for instance, may not transfer well to a mobile device. The following is a brief overview of some of the main concepts and should not replace the official WCAG 2.2.
Perceivable
Headings
Headings do dual work. They visually break long pages of content into sections so that they are easier to skim through, and they make navigating page content easier for those who rely on screen readers.
Note: The following heading structure can be applied to documents. Microsoft Word has built in h1, h2, h3, etc. styles as well as a Title option. The Title style should only be applied be the main title of the entire document when applicable.
Proper Heading Hierarchy
- Every page should start with a Heading 1 (h1) level heading. The h1 heading should be the main title of that page. For instance, “Developing Accessible Websites” is the h1 header of this page.
- The first level of subheadings within a page should be marked as a Heading 2 (h2) level heading. H2s are typically used to mark the main sections of a website. For instance, “Guidelines and Standards” is an h2 heading, as is “Perceivable”
- Headings should follow a proper nesting format and descend based on the order of importance. For example, “Headings” is an h3 level heading and marks the beginning of this section, which is under the h2 heading “Perceivable.”
- The lowest heading level is h6.
Color Contrast
Ensuring content can be read begins with ensuring that it can be seen. For example, light yellow text against a white background would be hard to see and therefore hard to read. The goal is to have a 4.5:1 ratio between the foreground color (e.g., text, links, etc.) and the background color to ensure readability. Exceptions can be made for logos, decorative elements, or inactive interface components.
Color contrast should be considered for all materials including, but not limited to:
- General web page content
- Digital and print documents
- Emails
- Text within images*
*Text within images should be avoided, when possible, on all digital content for the sake of usability. If a flyer is shared on social media, via email, or posted to a website, it is imperative that all information shown on the image is added to the caption/somewhere near it on the Webpage.
For examples of how to present complex charts, diagrams, and more on the web, please see the WebAIM Screen Reader User Survey Results.
Alternative Text
Alternative text describes the content of visuals such as images, charts, graphs, and clip art. Visuals that convey meaningful information to the user must include alternative text. Screen readers will read aloud alternative text, provided access to users with visual impairments or cognitive disabilities. Alternative text should be short and concise but also convey the same information as the image. Images used solely for decorative purposes do not require alternative text but should be marked as decorative.
Alternative text will also display in a browser if the image fails to load. They also search engine optimization, which helps search engines find your content.
Additional Resources on Alternative Text
Operable
To ensure your website is operable by as many people as possible, please keep the following key ideas in mind:
- Make sure all menus, links, buttons, etc. can be operated and accessed by a keyboard and/or a mouse.
- Label and use links and buttons appropriately. Link names should be informative enough to say where they go or what information they lead to even when read out-of-context. Avoid putting the entire URL as the content text.
- Make long pages of content easier to navigate by using ‘skip to content’ links or bookmarks in a PDF.
- Tables should ONLY be used to present data and should be properly structured using the appropriate table header and table data tags.
Understandable
The key to ensuring users understand how to navigate and use your website is to keep it consistent and predictable.
For instance, if you put the quick links side bar on the right side of a page, all pages with a side bar should have the quick links side bar on the right side. If two different sidebars have the same links within them, ensure all the links are listed in the same order.
Robust
Ensure your website can be interpreted by a variety of tools, technologies, and browsers by validating your HTML code.