Web accessibility, how to design web pages for everyone

Diona Rodrigues - they/she

Front-end designer

Web accessibility, how to design web pages for everyone

“Accessibility: It’s About People” - W3C

Did you know that 1.3 billion people (16% of the world’s population) are estimated to live with some form of disability nowadays and that they face many issues related not only with stigma and discrimination, but also exclusion from education and employment? Information from the World Health Organization (WHO) report on disability.

What is accessibility when it comes to web

In short, web accessibility, more specifically, is about diversity, equity and inclusion: everyone can perceive, understand, navigate and interact with the web no matter what their ability or circumstances.

Some examples of disabilities that affect access to the web are:

Visual: includes people with blindness, low-level vision, and color blindness. Following WHO reports, 2.2 billion people in the world have a near or distance vision impairment.
Auditory: deaf and hard-of-hearing (DHH) people. The WHO states that 5% of the world's population needs rehabilitation to deal with their disabling hearing loss.
Cognitive: refers to a broad range of disabilities that include intellectual disability, dyslexia, autism, brain injury, stroke, Alzheimer's disease…
Speech: difficulty in a person's ability to produce sounds that create words.
Mobility: difficulty performing movements ranging from walking to manipulating objects with your hands.

It is important to note that some disabilities are permanent, but many of them are also temporary, such as not being able to use your smartphone with your hands while driving, so voice command solutions can be useful here, for example; or cannot hear sound at the moment, then subtitles in videos can help the user to better understand the content.

“Web accessibility is about creating web content, design, and tools that can be used by everyone regardless of ability.” - Monsido

How to improve user experience with web accessibility

Accessibility standards, in addition to WCAG (Web Content Accessibility Guidelines provided by W3C), also involve local/country laws and policies, as well as the type of product and industry, and a combination of all of them will definitely lead to digital design being more accessible for everyone.

In this article, we will focus on some well-known web accessibility principles for improving user experience on web pages and most of them are certainly included in your country's government requirements as well.

Semantic HTML

The most basic principle of web accessibility is also a bit generic, but here it's important for you to know that you should use HTML tags correctly to help screen readers understand and navigate the content, identifying titles, subtitles and paragraphs, for example.

Set the language of the document by using the lang attribute in the opening <html> tag.
Replace <div> tags to semantic HTML elements, such as <main>, <article>, <section>, <header>, <nav> and <footer>.
Be sure to use heading tags to achieve logical levels of content structure, not because you want to only display larger font sizes: <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.
Nest HTML elements correctly, otherwise browsers and assistive technologies may not be able to understand the content as intended.
Use lists whenever you need to display a list of items, like a menu or ingredients on a receipt, for example: <ul> and <ol>.
Use<table> only when you need to display structured tabular data, not for layout or anything else.

Read more about semantic HTML in this MDN article.

Document Title

One of the main HTML tags, <title> (the document title element located in the <head>) is the first piece of information that screen readers say when users navigate between pages. This is also important because it appears in the browser tab, helping the user to know where they are and navigate between the pages open in their browser.

Title should be unique for every page of your site and any other related site;
It should be a descriptive phrase related to the content of the page.
If the title is long, try to put the most important words in the first 55-60 characters, as search engines usually display around that.

Alt Text (Image Alternative Text)

Images, which are part of the content and not just decorative, must have alternative texts to describe them, so that blind people (or those with low vision) and screen readers can understand them. Users who disable images to save bandwidth also take advantage of this feature.

Alt text are included by the "alt" attribute in the <img> HTML tag, see example bellow:

<img src=“logo.png” alt=“Diona Rodrigues logo” />

It’s important to use short, concise and appropriate alternative texts for images:

Alt text must always be associated with the image content.
If the image is just decorative, leave the "alt" attribute blank.
For functional images, such as images used as buttons, they should start with action words like “submit” and “go to”, for example.
If there is text in the image, such as a logo, for example, this text must be in the alternative text.

Keyboard navigation and focus

Although some users, for several reasons, prefer to navigate a web page using only the keyboard, people with low vision or blindness can use the keyboard combined with a screen reader for this purpose and browsers by default have a visual style to be applied to the elements receiving focus.

You can play around with this by going to this MDN project to see how native keyboard accessibility works by pressing the tab key.

Normally the navigation order by pressing the tab key depends on the HTML structure, however you can change it using the HTML attribute called “tabindex”. This attribute receives numbers, where the number 0 (tabindex="0") means that the element follows the natural order as it appears in the DOM; Negative numbers cause elements to be removed from the natural order of focus. Then, the priority focus order will be based on positive numbers, where the smallest has higher priority over the largest (1, 2, 3...).
Skip links are very useful for allowing users to skip the header and navigate to the main content of a page. They are usually visually hidden and can be accessed by pressing "tab" key. It is normally the first element that will receive focus on a page.
Although we can disable styling for focused HTML elements, you should never do this. However, you can create your own style like the example below.

See how to change the style of a focused HTML element by changing the outline CSS property:

:focus {
  outline: 3px solid hsla(220, 100%, 50%, 80%);
}

Alternatively, you can replace the outline CSS property with the box-shadow:

:focus {
  outline: none;
  box-shadow: 0 0 0 3px hsla(220, 100%, 50%, 80%);
}

Color and contrast

Following the WCAG Four Accessibility Principles, all users must be able to perceive the content on the page, and therefore color and contrast are vital to achieving this. Color should not be used as the sole visual means of conveying information, indicating an action, or distinguishing a visual element, as color may not be seen by colour-deficient users. And the contrast between the text and the background should be enough for users with moderately low vision to read it.

To measure contrast, WCAG uses a technique called “contrast ratio,” which takes the difference in luminance (or brightness) between the colours of foreground and background content (i.e., usually text) and checks its legibility. I really recommend you read “Contrast and Color Accessibility” by WebAIM to understand more about it.

Check out a list of suggestions to make content more accessible with color and contrast:

WCAG defines some types of text as “incidental,” meaning they have no contrast requirements: inactive elements (such as disabled buttons), decorative elements (such as text in images used only for background decoration purposes), invisible elements (like a skip link) and part of an image that contains other significant visual content (like a license plate in an image showing city traffic, for example).
Make sure the contrast between text (and also images of text) and background has a contrast ratio of at least 4.5:1. Larger text (minimum size of 18pt, or 14 pt bold) should have a ratio of at least 3:1. You can use tools like Contrast Checker to measure it.
Avoid high color contrast scheme for your site as it can make reading difficult for people with dyslexia, as this study shows.
Don’t rely solely on colours to convey information, as some people will not be able to see these colours. So, instead of using red colour to mark required form fields, mark them with an asterisk and in red, for example.

Typography and Text Resizing

Typography plays a big role on web pages and it is essential to choose the correct font family, font size, as well as properties such as letter and line spacing to make texts readable. Additionally, some users with low vision may need to zoom in to read content better, so relative rather than absolute sizes are very important for web accessibility.

Some tips for better typography when it comes to web accessibility:

Studies show that people with disabilities find it easier to read texts using common fonts such as Helvetica, Arial and Times New Roman, for example. Therefore, avoid choosing fonts with cursive designs or artistic shapes.
Avoid using too many different typefaces, as this can make our brain have more effort and spend more time to build a map of their characters and patterns to parse words when reading a text.
Line length should be between 50 and 120 characters to provide comfort when returning to the beginning of the next line.
Font sizes should be based on relative values (%, rem or em) to easily be resized when needed (using browser zoom for example).
Since screen readers cannot read text embedded in images, use markup texts.
Mainly for long texts, use elements such as headings, subheadings, lists and quotes, for example, to break the linearity of the content and make reading more comfortable.
WCAG defines how text spacing should be applied, with some exceptions, and shows that the spacing between letters must be at least 0.12 times the font size; line height/spacing, 1.5 times; spacing between paragraphs, 2 times; and spacing between words, 0.16 times. Be careful because short and large spaces can also affect readability.

More web accessibility improvements

Above you saw many aspects of a web page that you can improve, providing a better experience for all users, especially those with permanent or temporary disabilities. And of course there are other elements that you can also take into consideration, like ARIA, forms, animation, video and audio, for example. So I strongly suggest you take a look at web.dev and MDN documentation to learn more about it.

How to mesure web accessibility

The sooner accessibility is assessed the better, so if you are starting a new project I suggest you plan to apply at least the web accessibility best practices I mentioned in the previous section. Otherwise, it's best to group the improvements you need to apply and find the best way to do so based on the specifics of your existing project.

There are many ways to mesure web accessibility, from checklists to online tools and browser extensions:

Resources for learning about web accessibility

There are many ways to build a successful accessible website, and a good start is to follow the international Web Content Accessibility Guidelines (WCAG) created and maintained by the W3C. Because they are an extensive documentation, you can firstly learn WCAG 2 at a Glance, that combine different grouped guidelines.

Mozilla's MDN is another great resource for learning about web accessibility and is sure to provide all the knowledge you need to improve websites and applications, making them accessible to everyone.

The Google team, through web.dev, also offers an easy-to-understand course on web accessibility, where you will find several examples and practical suggestions on how to apply them.

Utah University also has a great project called WebAIM full of articles to learn about web accessibility.

At least but not least, I found a website called Monsido, which also has good explanations on the subject.

References on web cccessibility

Videos on Youtube

Conclusion

Web accessibility is how to create websites for everyone and should not be an option, on the contrary, it is non-negotiable when it comes to web pages.

“Accessibility is essential for developers and organisations that want to create high-quality websites and web tools, and not exclude people from using their products and services.” - W3C

There are several types of disabilities such as low vision, blindness, depth, autism, dyslexia, difficulty producing sound, and many others, and all of them must be taken into consideration when developing a web page, and certainly the set of strategies for Improving web accessibility will also depend on the type of project, industry and government laws.

By following at least some of the suggestions I left in this article, your web project will certainly provide a much better user experience for everyone in different contexts. Also, I really recommend that you take a look at all the links I've added throughout this article as they provide more information that can guide you through this process.

See you next time! 😁