This page introduces basic considerations for user interface design and visual design more accessible to people with disabilities. These tips are good practice to help you meet Web Content Accessibility Guidelines (WCAG) requirements. Follow the links to the related WCAG requirements, detailed background in the “Understanding” document, guidance from Tutorials, user stories, and more.
Web accessibility is about giving everyone access to the same information, regardless of the disabilities users may have.
People with reduced vision
People with limitations in their muscular control, sensations, joint disorders or missing limbs
People with hearing loss
People that may have challenges understanding information
Some people are not able to speak
In 2017, the Accessibility Team at the Government Digital Service (GDS) created accessibility personas to highlight common barriers faced by people with particular conditions and provide tips on how to design for them. These accessibility personas are a great tool for people such as designers and developers to create services that are accessible to all.
To simulate the user's condition, they shared the desktop settings of every personas. You can experience the web as that user. Check here for how to use persona profiles. The team suggests to use Chromebook for this, but if you don't have one, you can always change the setting in your system and Chrome.
However, a simulation is never a true representation of an impairment. It’s only a tool trying to make some things roughly as difficult for someone without that impairment. Always do user testing with real users.
The clarity and accessibility of your content, whether on a mobile app, website, or physical product, depends on how well-organized it is. A well-organized structure makes it easier for your target audience to understand and use your content. To achieve this, you can create an information architecture that clearly outlines the content's organization, which will enhance its accessibility.
Landmarks are significant sections of content that define the overall structure of your design. They are designated by ARIA roles and enable users to quickly jump to specific areas of interest. There are 8 landmark roles including navigation, search, main, banner, complementary, contentinfo, region, and form. These landmarks make it easier for users to navigate and understand the content on your website.
The image provided shows the use of landmarks on the Worksafebc.com website:
Headings are important for organizing the content on a page and improving accessibility. Both designers and developers should use headings properly to create an outline of the page, making it easier for users to understand the content structure. Screen reader users especially rely on headings to navigate quickly.
There should be one Heading 1 as the page title, followed by Heading 2, and no heading levels should be skipped. Developers should use the correct h1-h6 tags. Even if headings are hidden on the page for design purposes, they should still be in the code for screen readers to recognize. To understand this better, watch this video about landmarks and headings
The built-in Voiceover on MacOS is an example of a screen reader that presents headings to users, allowing them to understand the outline of the page and quickly navigate to the content they want to read.
[This is not an ideal example: the heading level is not good enough]
Skip links are used by people with assistive technologies, such as keyboard, screen readers, and switch controls, to quickly reach main content or other important sections. The most common skip link is the first interactive element on a page and is used to skip past global elements like the logo, search, and navigation, to reach the main content. It is usually hidden until it receives focus.
An example of a skip link can be found on Government of Canada homepage, where the first focus area when using the keyboard to navigate is "skip to main content" at the top. This can be accessed by pressing the tab key. Check skip link on W3S for more details about skip links.
Consistent layout improves the navigability and understanding of a website by making it predictable. This refers to the repetition of content blocks, such as navigation menus, links, buttons, lists, etc. and common elements like headings and forms. A consistent layout helps create a user-friendly website that is easy to understand, especially for new users or those accessing internal pages through search results.
In WorkSafeBC UX design library, there are pre-created components, templates and guidelines to make sure all the applications use the same layout. Please always follow the design library.
Users with low vision or good vision may zoom in on content to increase its readability. There are three main ways of zooming: screen magnifier, text zoom, and page zoom. Screen magnifier enlarges the entire screen, text zoom increases the size of text only, and page zoom increases the size of all elements on the page. This helps users to perceive and read the content more easily.
Users with limited vision can zoom in on websites to improve readability. Responsive design ensures that users can see a properly formatted webpage no matter how much they zoom in, preventing elements from becoming hidden during resizing and avoiding confusing horizontal scrolling.
This is a screenshot of existing WorkSafeBC Report an Injury when users zooming it in at 300%. This old app was not done with responsive design. When users resize the screen, they need to scroll it horizontally to read the content.
Users should be able to adjust the text size independently of the interface size. This can be done through the settings of the operating system or browser. Using relative units, like percentages or em, instead of absolute units like pixels, allows text to be resized.
The following screenshots show an example of adjusting the font size in Microsoft Edge from medium to extra large. The headings are coded in relative units, allowing them to be resized, while the text coded in pixels cannot be resized.
When users zoom in on a webpage, images in .png format with low resolution can become blurry and unclear. To avoid this, use .svg for icons and, if not available, high-quality .png for other images. This will ensure a clear and crisp display at any zoom level.
Organizing forms in one column helps users with screen magnifiers avoid missing content. When text fields are placed in a line, users may forget to scroll horizontally and miss important information. By laying out the form in one column, you can ensure all content is visible and easily accessible.
To experience the senario, for windows, go to settings > ease of access > magnifier. Use this form example to try it out. Change zoom level to see the difference.
Alternative text is a description of non-text content, like images, for users who cannot view it due to slow connection, error or use of a screen reader. The alt text should accurately describe the content and its purpose.
Screen readers provide audio descriptions of images through text alternatives. This makes the information in images accessible to users who can't view them due to a slow connection, image file error, or screen reader use. Text alternatives should accurately describe the image and its purpose, and can be short or long as needed.
Alt text: Image of a man with PPE fixing a vehicle
Non-text content that acts as a control or accepts user input should have a name attribute that describes its purpose, such as an image used as a submit button or an image map. This helps users understand what the non-text content is used for.
As an example, on some webpages the WorkSafeBC logo in header can be clicked and bring users back to the WorkSafeBC homepage.
Alt text: Back to WorkSafeBC homepage
There are several different situations when audios and videos are used in web applications, but text alternatives at least provide descriptive identification of the non-text content. It can be transcript, caption or just a label. For details, please visit time-based media on W3S
Non-text content that is not essential to a page's functionality or content is considered decorative and can be ignored by screen readers. To make this happen, give the decorative content an empty alt attribute so the screen reader will not read it out to the user.
In this example, the icon can be removed without any impact, so it's decorative. An empty alt attribute should be given to it.
<img src="imagesampleurl alt="">
Hardware or software directional controllers such as keyboards, a D-pad, or trackball allow users to jump from selection to selection in a linear fashion.
Some elements are not able to be interacted with by using keyboard. The UX team is working hard to update the WorkSafeBC design library to aviod this happening, but please do testing when buidling a new website to make sure every component is working well.
When navigating a website or app using only a keyboard, users follow the linear order of the elements as they are coded. If elements are coded in a random order, it can cause confusion for users. To ensure a smooth experience, it's best to code elements in a top-to-bottom, left-to-right order.
In this example, for formatting purpose, the code of the right button is in front of that of the left button. However, this causes the wrong order of tabbing for keyboard users. The numbers in the images show the order of tab steps. Use Chrome Accessibility Insights for web to check the tab steps on different websites.
<button class="btn btn-blue pull-right btn-sm">copy</button>
<button class="btn pull-right btn-blue btn-sm mr-1 show-desc-info">usage rules</button>
tbd, this part will be added after the focus style is decided
When users navigate the website using keyboard or other controllers, they should have control over any event that is triggered. The context of the page should not change automatically just because an element has been focused. The user should be able to explicitly choose to change the context, otherwise it could lead to confusion and result in the user missing important information on the page.
Form is a very significant elements in WorkSafeBC applications to collect users' input. There are several ways to make accessible forms.
It is important to make sure that every input field in a form has a clear and descriptive label that is positioned close to the field. For languages that read from left to right, the label is usually placed to the left or above the field, except for checkboxes and radio buttons, where the label is typically to the right. It is crucial to minimize the space between the label and the field to provide a seamless user experience.
Developers should use the "id" attribute to associate the label with the specific input field, and if there is no label for a text field for design purposes, the "aria-label" attribute should be used so that screen reader users can understand the purpose of the field.
Use screen reader to try out the following examples.
<div class="form-group">
<label for="name">Name</label>
<input id="name" value="" type="text" class="form-control" >
</div>
The autocomplete attribute makes a form easier and more efficient for all users, especially users that are attention deficit, have cognitive impairments, reduced mobility, low vision or blind users.
However, not every input box needs autocomplete attribute. If the form was asking for another email, not "your" email, it would make no sense to add the autocomplete attribute. When the data is probably not saved in the browser, it shouldn’t have attribute. [IS THIS DOABLE?]
Specific feedback at or near the form controls can better help users to use your form. This includes feedback to indicate correctly entered input as well as errors in the input. The feedbacks and errors should be informative and precise, which means that the system needs more error messages for different situations.
To make users understand where the error is easily, it's helpful to move the focus to the first form control that has failed
Users with disabilities may take longer to complete forms and it can be frustrating for them if there is a time limit, as they risk losing their progress and having to start the form over again. It's important to consider this in the design and development of forms, and to provide sufficient time for users to complete them.
Building an accessible website requires not only accessible design but also proper coding by front-end developers. Writing HTML and CSS in a way that is recognizable by assistive technologies is a crucial step in ensuring website accessibility.
<span> and <div> have no built in accessibility features, so you should always check to see if any other elements are better suited. User the proper HTML tags so users can navigate and interact with your site in a good way.
The <button> element should be used for any interaction that performs an action on the current page. The <a> element should be used for any interaction that navigates to another view. Each of them work differently with assistive technologies. The correct use of each component helps users with assistive technologies to interact with the component. This won't affect the design since a button can look like a button but with link function using <a> tag and proper css.
For links, it's not recommended to open the link in a new window because most screen readers won't inform the users about it. This can cause confusions to screen reader users.
In the following examples, this dropdown button is coded with <button> because it's an action on the current page. The "give feedback" button in the survey bar is actuallt a link because it will open a new page.
User interface components need a role, a name and sometimes a value, to ensure that people using assistive technologies are able to use them.
Most HTML tags have role build in them. However, if you have to code using a tag with different build-in role because of framework or design library limitations, you need to add the right role to it.
If your component doesn't have a text name, use attribute aria-label to give the tag an accessible name. The name attribute can't be recognized by assistive technologies. See the search bar input box in 5.1 as an example.
Some components have a value or a state. To make this information accessible, use aria attribute to give the component a value.
The accordion below uses <button> for this custom component. It has a build-in role: button. It uses aria-expand attribute to let the assistive technologies know if the content is open or closed.
It is important to make WorkSafeBC's websites accessible to a broad audience, including people with different backgrounds and abilities. To achieve this, it is crucial to communicate using clear and concise language that can be easily understood by everyone, even when read aloud by text-to-speech technology. The content should be accessible and readable to the widest possible audience.
For accessibility purposes, it's important to use simple language in your writing. Keep sentences short and use common words to ensure that everyone, including those with learning disabilities, can understand your content. Avoid using technical terms unless necessary, and provide definitions for any unusual words, phrases, or abbreviations.
The page title should be unique and informative so users can know which page they are on clearly. For all titles, they should provide full context so that users can easily see if they’ve found what they’re looking for. The titles should be short if possible.
Writing lengthy content can strain the brain and make it harder for the reader to understand. To improve readability and comprehension, it's best to keep content short and concise, with the most important information at the beginning. Use headings and lists to break up the content and make it easier to scan.
The text of links on a website should accurately describe the destination of the link, so that users can understand where they will be taken if they click the link. The link text should be clear and meaningful on its own, without requiring additional context. This makes it easier for users to quickly navigate to the information they are looking for.
This is a good example: Read more about accessibility link text
This is a bad example: To read more about accessibility link text, click here.
When you overlay texts on images, there are several things to consider.
It's important to make sure that text overlaid on images is easily readable for all users. This can be achieved by using good contrast between the text and the background image. To measure the contrast, you need to find the brightest or darkest part of the image and ensure that the text stands out in comparison. A simple solution is to add a color overlay on the text part of the image. An example of this can be seen on the WorkSafeBC homepage:
It's not recommended to add text onto the image as a part of it. In addition to the contrast between text and background, there are more aspects to reduce the accessibility. Mobile users will struggle with the small texts, while low version users will struggle because the text will become blurry when scaling the image up. Also, the screen reader can't read the text on images so you need to provide the alt text, which will lose the formatting.
In WorkSafeBC, a lot of applications require the support of offline service. To improve accessibility, providing accessible offline services is also very important.
It's important to suggest clients to provide various contact method such as calls, messages or even in-person to users for a more accessible service.
Users may prefer different contact method because of their disability. For example, users with hearing loss find it very hard when phone call is the only way to contact the organization.
This checklist is written specifically for WorkSafeBC web applications. Check your product with this checklist for better accessible user experience.
