Top 9 tips for making your Website Accessible in 2019

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

- Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Nowadays we have a lot of devices that we use to access the World Wide Web (such as smartphones, tablets, computers and so on). That's why the websites must be accessible to people with diverse conditions. 

There are many internet users that have special needs that can make it hard, or even impossible for them to use certain types of websites.

The most common categories of conditions that affect access to the web are:

• auditory: users can have hearing problems;
• physical: people with motor skills issues;
• visual: the inability to see or having issues distinguishing between colors;
• photosensitive: diseases like epilepsy can cause seizures from flashing lights;

You may be asking yourself why should you make your Front-end pages accessible and what are the benefits of doing this. Is that right?

The answer is quite easy to deduce; making your website accessible will expand your potential audience. Regarding accessibility, all of the website visitors will benefit from it, and your website will differentiate itself from the other websites.

Based on this reasoning, let’s make a list of tips and tricks on how you can make your website more accessible.

First of all, we have to make sure that you can move around through your website by using a keyboard.

The tab key is used to navigate through elements on a webpage such as links, buttons, inputs, etc.

When an element is focused, it can be selected with a keyboard. Moreover, the web browser provides a basic focus indicator, but this can be hidden or highlighted by using “outline” from CSS.

→ Note: By default, users can navigate only through buttons, links and forms elements with a keyboard. We can modify this by using the “tabindex” attribute on any mark-up element. 

In general, accessibility issues with complex internet applications can be characterized as:

• Inability to provide the semantic structure of page areas and functionality (e.g. navigation, main content, search, etc.);
• Inaccessibility of content that is dynamic and may change within the page (e.g. AJAX content updates);
• Inability to change the elements’ focus by using a keyboard (e.g. setting the focus on a form within a page);
• Problems with keyboard and screen reader accessibility (e.g. carousels, sliders, etc.);

→ ARIA landmarks can help us in these cases:

• ARIA roles define what an element is or does;

Most HTML elements have a default role. For example, a button has the default role of a “button”. But you can override the default roles.

For example, you can define a form as a search form:  <form role="search">

• ARIA properties define the meaning of elements;

For example, <input aria-required="true"> tells the screen reader that this input is required (so the field must not be left empty).

• ARIA states define the condition of an element;

An example is <input aria-disabled="true">, which tells the screen reader that this input is disabled.

ARIA roles, states, and properties can be defined in HTML or dynamically set and changed using JavaScript.

Here you can find more information about ARIA.

Alternative text behaves as a substitute for an image if it fails to load. Usually, the alternative text describes an image or provides the context to users and improves the SEO of the webpage.

You can add alternative text by using alt mark-up attribute.
<img src=”source” alt=”alternative image”>

There should be sufficient contrast between the text color and the background color. This includes text on images, icons, and buttons.

1. Who benefits from this?

People with low contrast sensitivity, who are usually older people. The content is easier to read for everyone, including those who do not have any specific visual conditions.

       2. What do you have to do for this to work?

You have to select the text and background colors that provide sufficient contrast. While some people need high contrast, other people are sensitive to brightness and feel the need to change the colors.

But, don't worry! There are tools to help check and select appropriate color combinations. 

→ Note: The selection of the design colors should be done when you start designing the webpage.

It’s important to use headers properly in the content structure of a webpage. Doing this will make your content much easier to understand and you will improve the flow of the page. Also, you have to be very careful with headers because they help screen readers interpret a webpage and help you by improving the SEO.

For example, you should have a single H1 on a page, represented by the title of the webpage. The title can be followed by some subheadings that must be carefully numbered with headers between H2 - H6.

→ Note: You always have to use the headers in the logical order.

Regarding the display of data, tables are useful. But, keep in mind that should only use tables for tabular data and not for layout.

Tables are important for screen reader users to read, navigate, and understand the data in a table.

Most browsers enable users to resize text, which will be used by those with visual issues. However, if you don’t build your webpage using this option, resizing the text could break the design or make it difficult to interact with the page.

To make this work, you should avoid using absolute units (pixels). Instead, you could use relative sizes (such as percentages), which can scale according to the page content and the devices’ screen sizes. 

Trying to turn off media content can be hard by using a screen reader and some users can be scared or confused by some noises. So, you should avoid including these kinds of elements on your page.

Also, you should avoid the automatic carousels and sliders because they can be confusing or frustrating for the user.

Nowadays most websites have at least one form on a webpage. That's why it’s very important to make sure that each form field is clearly labeled.

For an ordinary user the corresponding labels may be obvious, but not for the screen readers.

Here you have a form demo that can be tested using a screen reader such as the NVDA. All you have to do is to navigate through form elements using the keyboard.

You have to make sure that your website is accessible to as many users as possible. That's why this should be a top priority when you design a website.

So, don't forget! You can use these top 9 tips for making your website accessible in 2019 in order to increase your website audience!

If you enjoyed reading this article, you can also check my previous article:
→ https://assist-software.net/blog/introduction-elm