You are now in the main content area

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.

Content editors

When creating or editing content within web pages using a content management system like WordPress, Drupal, or Adobe Experience Manager, you should learn and apply the accessible design principles.

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.

Read Web Accessibility for Developers 

Web Accessibility for Developers eBook cover.

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) 

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

For developers

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.

Read Professional Web Accessibility Auditing Made Easy 

Professional Web Accessibility Auditing Made Easy eBook cover.