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
Using a screen reader requires training and practice. Before testing your own content with a screen reader, we recommend reading: Testing with Screen Readers - Questions and Answers (WebAim)., external link
- Apple: Use the built-in screen reader utility called VoiceOver., external link
- Windows: Download a free screen reader like NVDA., external link
- Apple, Windows, and Chrome OS: ChromeVox, external link is a light weight Google Chrome extension that is easy to install and learn, making it great for testing purposes. View ChromeVox Keyboard Shortcuts., external link
There are many free tools, plugins, bookmarklets 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.
For content editors
- Sa11y, the accessibility quality assurance assistant, external link - Developed at Toronto Metropolitan University.
- Accessibility Insights, external link by Microsoft.
- axe - Web Accessibility Testing Chrome extension, external link by Deque Systems.
- Lighthouse for Chrome, external link - Lighthouse is an open-source, automated tool built directly into Chrome's developer tools.
- EXPERTE's Accessibility Checker, external link - An accessibility checker that crawls an entire website, not just individual pages. Powered by Lighthouse.
Please note: Toronto Metropolitan University does not endorse specific products or services.
- Introduction to Web Accessibility by WebAIM, external link
- WCAG Checklist by The A11y Project, 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