How to create 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.
Web developers
There are dozens of considerations for web developers that create applications, web components, and themes.
- Semantic HTML: Use appropriate HTML elements to structure content, like headings, lists, and paragraphs.
- Avoid using non-semantic elements like <div> and <span> for content that has a specific purpose or meaning. For example, use a <button> for an interactive control instead of a <span>.
- Keyboard accessibility: Ensuring all interactive elements of a website can also be navigated with a keyboard only, not just a mouse.
- Keyboard focus indicators: Ensuring that there is a distinct focus indicator around interactive elements when using a keyboard to navigate.
- Forms and labels: All form fields should have accurate labels that programmatically correspond with each other using the input’s id attribute and label’s for attribute. The keyboard focus order should also match the visual order of the form.
- Skip navigation links: 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.
- Try: Use the tab key to access the "Skip to main content" link on this page!
- Contrast: Ensuring all text and interface elements have sufficient contrast against the background.
- ARIA roles and attributes: When necessary, use ARIA roles and attributes to enhance the accessibility of complex widgets like accordions, modals, and slide show components.
- Responsive design and magnification: The website should be responsive and works well on various screen sizes, devices, and magnification levels. There should be no loss of content or functionality up to at least 200%.
Web Accessibility for Developers eBook
Learn skills that are essential for any web developer who wants to produce quality websites and web applications that are accessible and usable by everyone.
Test the accessibility of a website
Here are some basic tests you can do evaluate the accessibility of a website.
Manual testing
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)
Automated testing
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.
For developers
- 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.
Professional Web Accessibility Auditing Made Easy eBook
Learn the skills and knowledge needed to evaluate websites, web content, and web applications for compliance with international web accessibility requirements.
