Insights
Bringing our best ideas and thinking to you.
Blog Post
December 10, 2016
Share this page:
10 Simple Ways to Create a More Accessible Website
By Jackie Armitage
Accessibility regulations are here, and they're here to stay. As of January 1 2014, under the Accessibility for Ontarians with Disabilities Act (AODA), all new or significantly updated websites are required to meet WCAG 2.0 Level A compliance. As of January 1 2021, that compliance will be upgraded to Level AA.
Web accessibility can be an intimidating topic, considering that each Canadian province has their own regulations or is working on their own regulations regarding accessibility, and the concepts can trip up anyone who is not familiar with what they mean. The regulations in Ontario apply to public sector organizations, and any private or non-profit company with 50+ employees. Applying accessibility concepts early in your web design and development process can save time and effort later on in the project. Here are 10 ways to keep accessibility in mind when designing and developing your website.
1. Image text alternative
All images that portray content (which means they are not purely decorative) require a text alternative so that assistive technologies, such as screen readers and refreshable braille displays, can relay the visual importance of the image to a non-visual user. This is done via an 'alt' attribute:
![Young boy playing with a puppy on a sunny lawn.]()
A screen reader will read out the 'alt' text as a description of the image so that a user who cannot see the image is still able to understand its meaning.
Images that do not portray content, such as decorative background images, still require an 'alt' attribute, but the descriptive text should be left empty (alt=””).
2. Programmatically assigned labels for inputs
Labels should be programmatically assigned to their respective inputs so that assistive technologies will properly identify what kind of information is needed from the user. This is done by giving the label a 'for' attribute, and the input an 'id/name' attribute. The 'name' attribute is used for backwards compatibility with older browsers and assistive technologies. The HTML5 standard is to use ‘id’.
This allows assistive technologies, like screen readers, to announce what information is expected from the user as the input field gains focus.
3. Contrast minimum
Text needs to have a minimum amount of colour contrast with its background so that it is easily readable by users. This is especially important for users with low levels of vision or with varying forms of colorblindness. The minimum colour contrast ratio for regular text (1em or 14pt) is 4.5:1. Large scale text (24px or 18pt or 1.5em) has a lower required contrast ration of 3:1. The exception to this rule is text that is part of a logo or brand has no minimum contrast requirement.
There are a few different tools you can use to help you determine if your text passes this requirement: Colour Contrast Analyser, WebAIM Color Contrast Checker, and the Firefox add-on WCAG Contrast Checker.
4. Bypass blocks
Bypass blocks are meant to provide a keyboard user with a way of skipping past repeated content on a website. For example, a "Skip to content" bypass block that is placed at the top of a website's tabbing order will allow a keyboard user to jump to the content of a page without needing to tab through a navigation or search section.
5. Proper heading structure
It is best practice to include headings that are descriptive to the content of the page. Headings act as page landmarks to assistive technologies and allow users to skip through portions of the page to find the content that is relevant to them.
6. A visible focus
For visual users that navigate a website with a keyboard, it is important that they are able to track where they currently are on the website. This is done through a focus state. A focus state simply highlights items that are currently the active element. Most browsers have their own default focus state preset, but it is very easy to set your own in your stylesheet.
input:focus { outline: 2px solid blue; } It is also important to know that not every HTML element will gain focus automatically. If you need one of these elements to gain focus, you will need to add it to the natural focus order.
This div will gain focus.
A tabindex of 0 will add the HTML item to the focus order of the page.
7. Assigning a language of page
Setting the default language of a page helps users that rely on assistive technologies to have text read aloud to them in the correct language, and allows captions in media elements to know which language to use. Setting a language for the page is done in the 'html' tag.
The 'lang' attribute can also be used to indicate individual words or phrases that should be read in a different language. For example, if you have a language select on your website, you can indicate that the link text for the language selector be read in that language.
Visitez notre site français.
A full list of ISO language codes can be found on the w3schools website.
8. Link purpose
Each link on a site should indicate to a user what the purpose of that link is. A link with the descriptor text "Check out our Facebook page to learn more about us" provides more context to someone using assistive technologies, than a link that only says "Facebook". There are times when a shorter link has visual context that an assistive technology might miss. In this case, you can use an 'aria-label' attribute to add the context that would otherwise be missing.
Facebook
In the example above, a screen reader will read out the 'aria-label' text as a description of the link. This not only tells a user where the link is going to take them, but also indicates that it will open in a new tab on their browser.
9. Form error suggestion and identification
Users should be informed if there are errors or issues with input values. This includes indicating if a field is required, if there are certain characters that must be included, or if a certain input format is expected.
The 'required' attribute will allow assistive technologies to recognize the input as mandatory.
Users must also be made aware if an error has occurred with the form submission.
All fields with errors should be listed and identified with an error state by their label so that users can find them easily.
10. Proper page markup
Correct page markup allows for a wide variety of assistive technologies and browsers to correctly interpret your webpage. This includes correctly opening and closing elements, ensuring ids are unique, and ensuring elements do not have duplicate attributes.
There are many other rules and guides surrounding accessibility, but understanding the concept of inclusive design and development when working on your website is the best first step towards making your website more accessible to a wider audience.