Tips for Creating Accessible Websites
Web accessibility is the practice of removing barriers and creating equal access to information and websites for people with disabilities. It is aimed to address barriers relating to visual, motor, auditory, and cognitive disabilities. For example, individuals who are blind use screen reading software that reads content using a synthesized voice. Someone who has a physical disability that affects their use of hands or are unable to use a mouse may rely exclusively on a keyboard. How a website or application is designed can significantly impact a user's experience, therefore how we design or structure a website is important.
HTML headings do not only act as visual cues, but also as an outline as to how a page is structured and how sections relate to one another. Proper heading structure can be especially useful for people who use screen readers, as they can be used as a navigational aids to jump from heading to heading.
- Make sure headings (H1, H2, H3...) are structured in a logical order that conveys hierarchy, ensuring that all headings have a proper parent/child relationship.
- It’s best practice to start each page with a single Heading 1 in the main content area. Heading 1 is the most important heading in terms of rank or hierarchy.
- Different levels of subheadings should be underneath main headings, for example a H3 would be nested under a H2. Skipping heading ranks can be confusing and should be avoided.
Ensure hyperlinks are self-describing. “Click here” or "learn more" does not provide any useful information to someone using a screen reader, and does not make sense out of context. For best practice, hyperlinks should be descriptive, link to nouns that are specific in context, and try to be placed towards the end of a sentence.
Pages with repetitive groups of links such as banners and templates need a way for a user to skip past them directly to the main content of the page. Consider a keyboard-only user’s visit to a website that uses a top navigation bar on all of its pages. Each time the user navigates to a new page within the site, they must tab through all of these navigation links and other ancillary content before getting to the main content area of the page.
For more information on creating skip navigation and code examples, visit WebAIM's "Skip Navigation" Links., external link
Some people perceive colour differently, therefore colour should never be the only way of conveying information. Use a combination of shapes, colours & text.
- Graphs and charts can be difficult to understand, as meaning is often conveyed exclusively through colour. Textures, patterns or shapes along with high-contrast colours can help communicate distinct information.
- Try printing a chart in black and white. Are you able to perceive the information easily?
- Hyperlinks should be underlined in addition to colour, so it can be easily distinguished from surrounding text.
Some people have difficulty perceiving or distinguishing text that has little contrast between the foreground and background. The WCAG 2.0 requires colour combinations to meet the following contrast ratios:
- Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
- Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
- Large text is defined as 19 pixels (1.2 em) and bold or larger, or 24 pixels (2 em) or larger.
There are many tools available to check contrast ratios.
- WebAIM Colour Contrast Checker, external link - Easily check two colour combinations.
- Tanaguru Contrast Finder, external link - Finds and recommends multiple colour combinations.
- Color Safe, external link - Find accessible colour palettes.
- Colour Contrast Analyser, external link - Contrast analyzer with an eyedropper tool available on Windows and Mac.
Alternative (alt) text is used to convey meaning and provide context in place of an image, graph and other media. Blind and low vision users rely on the alt text attribute to understand the equivalent meaning of images, figures or other graphics in textual form. Alt text should provide a concise description conveying essential information about the image.
- Alternative text should be concise and meaningful.
- Usually, around one hundred characters or less.
- Use punctuation, as it can help make information easier to understand.
- Avoid phrases such as "image of…" or "graphic of…"
- Consider the context of the surrounding information when writing.
Example code: <img src="/images/eggy-the-ram.jpg" alt="Eggy the Ram posing for a picture with students" />
For more guidance on alternative text concepts and how to use correctly, please visit W3C's Images Tutorial., external link
Example code: <label for="searchbox">Search Site and People:</label>
<input id="searchbox" name="searchbox" type="text" />
For more guidance on creating accessible forms, visit W3C’s Forms Concepts., external link
Tables should be used to present data in tabular form. Accessible tables should include proper HTML markup.
- Use table headers (<th> element) to markup all column or row headers.
- Define the scope of each header, indicating whether it’s a column or row header. The value of the scope attribute can either be “col” or “row”.
- Avoid merged cells and empty table headers if possible.
|Lunch||12:00 PM||Skyline Room|
|Closing Dinner||5:00 PM||Metropolitan Room|
<th scope="col">Event Name</th>
For more guidance on creating accessible tables, visit W3C’s Tables Concepts., external link
Here are some basic tests you can do evaluate the accessibility of a website.
Try to navigate a website using only a keyboard. Use a combination of the “Tab” and “Enter” keys.
- Are you able to access all links, menus, or interactive components such as accordion panels, pop-up navigation menus or carousels?
- Are you able to pause an image carousel?
- Can you see where your cursor is located on the page?
- Does the cursor follow a logical path from top to bottom, left to right?
Screen reader testing
Trying navigating a website using a screen reader with your monitor turned off. If you are using an Apple Mac, you can try the built-in screen reader utility called VoiceOver,, external link found in the accessibility settings. If you are using Windows, you can download a free screen reader like NVDA., external link
Alternatively, another great tool for content editors and developers is ChromeVox., external link ChromeVox is a light weight Google Chrome extension that's easy to install and learn, making it great for testing purposes. View ChromeVox Keyboard Shorcuts., external link
There are many free tools, plugins, book-marklets and applications available to test the accessibility of a website. Please note that automated tools should never be used to validate conformance with accessibility guidelines - only a human can determine true accessibility. Here are a few tools you can add to your testing toolkit.
- WAVE Web Accessibility Evaluation Tool, external link - Highlights accessibility issues visually on your website.
- Tota11y by Khan Academy, external link - An accessibility visualization book-marklet.
- Accessibility Developer Tools for Google Chrome, external link - A Chrome extension for developers to audit the accessibility of a website within the Developer Tools tab.
- Tenon.io, external link - An accessibility tool for developers.
- Introduction to Web Accessibility by WebAIM, external link
- How to Meet WCAG 2.0 - Quick Reference, external link
- How to make websites accessible by Ontario.ca, external link
- Fundamentals of Web Accessibility for Developers by Google Developers, external link
Read these free eBooks on digital accessibility created by The Chang School of Continuing Education.