How To Create Accessible Websites
By: Mwiza Kumwenda
Tags: Angular, Accessibility, JavaScript, Software Development, Programming

How To Create Accessible Websites

Guidelines on how to create applications that carter for people with impairments

The web is used by a wide range of people that have unique physical and or mental abilities.

In this guide, I will walk you through the steps that you can take to make your Angular applications more accessible to a wide range of people regardless of their impairments.

A website is said to be accessible when its content can accommodate all users and can be operated by almost anyone.

When creating websites it is important to realize that not all users have the same access or ability to use a mouse, or touch screen.

Key guidelines

Some of the underlying principles that should form the foundations of an accessible website are outlined in the Web Content Accessibility Guidelines (WCAG).

The guidelines usually go by the acronym POUR and are as follows :

Perceivable - Web content should be perceivable to the users. Make sure you carter for the following senses: sight, hearing, and or touch. Use alternative text with the alt attribute where necessary. Make sure form inputs have associated labels. And elements must be distinguishable.

attribute where necessary. Make sure form inputs have associated labels. And elements must be distinguishable. Operable - Ensure that the website forms, controls and navigation are operable by all, regardless of a person’s abilities. All functionality should be accessible from a keyboard.

Understandable - To be understandable, aim for consistency across the web pages. For example, all elements should be used consistently used across all pages. Help users by providing cues during form completion and submission.

Robust - Web content should play well with assistive technologies and should be able to be consumed by a wide variety of user agents

For further reading regarding accessibility guidelines, take a look at the Web Content Accessibility Guidelines checklist here

Design

Your websites should be designed with accessibility in mind. Accessibility should not be an afterthought!

Some of the things to consider when designing a website are

Orientation of web content should not be restricted to only portrait or landscape unless otherwise.

Do not use low contrast colors for text because it is hard for people with low vision to read.

Associate labels and input fields. When labels and corresponding input fields are placed so far apart, it can be problematic for users to associate and map their relation. Or to use the zoom functionality.

Avoid designing content that can lead to seizures and physical reactions. NO page content should flash more than three times per second!

Elements that are well associated make it easier for people using screen readers to figure out the associations.

The figure below is a good example of an accessible design. A user can easily associate content and the color contrast is good enough.

On the contrary, the website below is not accessibility friendly. The input and labels are difficult to associate as they are placed so far apart. It becomes worse, for users who need to use the page in zoom mode.

Consider the check box and its corresponding label.

In addition, the text color for the subtotals is very low in contrast, making it difficult for low-vision users to read.

Use semantic elements

There are many advantages of using semantic HTML elements, key among them is that it improves accessibility.

Use explicit element tags like nav , footer , article instead of just using div .

, , instead of just using . Use descriptive attributes whenever possible. For example, always use the alt attribute for images.

attribute for images. Add captions for videos and audio media content.

Use the language attribute e.g. <html lang=”en”> to identify the websites main language. If some content is in another language, be explicit about it, e.g. <blockquote lang=”es”>

Use the ARIA attribute

The aria attribute is an accessibility specific attribute.

Use the aria attribute to provide semantic meaning in places where it might be missing or to create widget-type elements that wouldn’t be possible with plain HTML.

For example, you can use the aria attribute to add extra label and description text that is only exposed to assistive technology APIs as follows.

<button aria-label="screen reader only label"></button>

You can also use the aria attribute to inform screen reader of something. For example, that a checkbox is checked by default using the aria-checked or that this control is a checkbox by specifying the role attribute as follows.

<input type="checkbox" tabindex="0" role="checkbox" checked aria-checked="false">

If using a framework such as Angular, they sometimes have framework-specific ways of setting certain tags. For example, in Angular, we use the attr. prefix when binding to aria attribute in Angular as follows.

<button [attr.aria-label]="myActionLabel"> </button>

Final thoughts

Using well established frameworks like Angular is a good place to start because they contains a lot of accessibility features. In addition you can use components from Angular material and material design principles.

Be a part of creating the web for everyone. Include accessibility in your design process.