Skip to Main Content
You are now in the main content area

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.

On this page:

Heading structure

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.

Self-describing page links

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.

Good examples 

Bad examples 

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. 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) 

 Try: Use the tab key to access the "Skip to main content" link on this page!

Screenshot of a Skip to Main Content link.

How to use colour

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.

Contrast

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.

Alternative text for images

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) 

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.

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

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.
Event Name Time Location
Keynote 9:00 AM Auditorium
Lunch 12:00 PM Skyline Room
Closing Dinner 5:00 PM Metropolitan Room

Example code: 

<table><tbody>
<tr>
<th scope="col">Event Name</th>
<th scope="col">Time</th>
<th scope="col">Location</th>
</tr>

<tr>
<td>Keynote</td>
<td>9:00 AM</td>
<td>Auditorium</td>
</tr>

<tr>
<td>Lunch</td>
<td>12:00 PM</td>
<td>Skyline Room</td>
</tr>

<tr>
<td>Closing Dinner</td>
<td>5:00 PM</td>
<td>Metropolitan Room</td>
</tr>
</tbody></table>

 For more guidance on creating accessible tables, visit W3C’s Tables Concepts. (external link) 

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.

Further reading

Share This
Facebook, opens new window Twitter, opens new window LinkedIn, opens new window Pinterest, opens new window Reddit, opens new window Tumblr, opens new window