September 21, 2022 / 9 min read
As stated by W3 [1], “Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.” It means that everyone should be able to “perceive, understand, navigate, and interact with the Web” as well as “contribute to the Web”.
According to WHO, about 1 billion people are living with some form of disability [2]. It’s 15% of the world’s population. Additionally, many people experience temporary and situational disabilities like broken arms or being blinded by the sun. Improving the accessibility of a website ensures a better user experience in tougher circumstances.
Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C) created web accessibility standards called Web Content Accessibility Guidelines (WCAG). These documents provide technical requirements for making digital products accessible and act as the prime reference for everyone who deals with this topic.
A11y project [3] was created as a community-driven initiative that gathers a variety of resources on building accessible websites. The main objective of this idea is to popularize inclusive web design so that as many people as possible could use websites even though they have some disabilities. Its name A11y stands for “accessibility”. It's an abbreviation where “11” refers to the number of letters between “a” and “y". The term is used widely in web development communities when talking about accessible features.
Several countries including: Denmark, Finland, Germany, France, the United Kingdom, Netherlands, and many more, introduced legislation to protect people with disabilities from being discriminated [4]. Some of the regulations focus mainly on the public sector, but in several countries, for example, Norway or The United States, private businesses are also obliged to abide by them. When it comes to The European Union, in April 2019 The European Accessibility Act (EAA) was passed. It is required to be enforced by UE member states by July 2025.
From a business perspective, accessibility means huge financial savings and, simultaneously, increasing revenues. It’s due to several factors:
The study shows [5] the importance of introducing accessibility improvements. A large proportion of survey participants recognize accessibility features as a substantial factor that encourages them to use the services offered on the webpage.
It may be concluded that many companies lose a lot of money because of the loss of clients with disabilities. Including them instead would be highly beneficial.
This process is not easy at all. It requires viewing designs from different perspectives and needs. There is a chance that we are not able to predict every single scenario, however, most of them can be secured. Jesse Schell in his book The Art of Game Design: A Book of Lenses [6] mentions several aspects which help to ensure that goal.
Since high-intensity animations may cause photosensitive epilepsy and constant motion can be distracting or cause vertigo, designing safer animations is a recommended strategy. It means reducing the size of the motion, the distance covered as well as matching the speed and direction of other objects. Additionally, the user’s preferences should be respected by a no-motion-first approach. It ensures a non-animated alternative to effects if the user has picked the “reduce motion” option in their browser settings.
As a rule of thumb, videos should never autoplay without being muted. Surprising people with unexpected noise cannot be a pleasant experience. Videos autoplaying in backgrounds, despite being a recent trend, can be annoying and distracting, so users should be able to find some controls to pause them. Also, videos should have transcripts or subtitles so the user can choose the way of consuming the content.
People with low vision or color blindness may experience some difficulties in distinguishing between colors. As a result, foreground and background colors should meet a minimum contrast ratio of 4.5:1. However, colors shouldn’t be the only means of conveying the meaning. Other indicators should be also used, for example, underlines for links or icons for alerts.
UI elements that users can interact with such as buttons, checkboxes, or links should be easy to click. It’s important, especially for people with tremors or vision problems. According to WCAG, the recommended size of the target for pointer inputs is 44 by 44 pixels [7]. Another essential aspect is spacing between controls. Microsoft suggests at least 5 pixels between controls for mobiles to prevent tapping unintended targets [8]. Clearly, accessibility issue applies also to touch screens. A fun fact worth mentioning is that the concept of a minimum 44x44px tap target was first introduced in the HUD Widgets app for mobile by Apple [9].
While there is no official minimum font size for websites, it’s recommended to make it large enough so that users can read text easily. ADA proposes 16 pixels for the body, however, 12/14px seems to be also accepted when put under larger headers [10]. Font size should be also responsive depending on the devices used. Additionally, font style can also make a difference. Decorative and cursive styles may be difficult to read, so generally, sans serif fonts would be preferred. Moreover, the text should be resizable at least up to 200%.
Users should be provided with alternative text for images. It’s extremely important, especially for visually impaired people who use screen readers. This text should be descriptive enough to reflect the experience given by viewing the picture. Accessibility icons are also worth mentioning. Their purpose is to present information or functionality in a visual way that can be more understandable than text alone.
According to this survey [11], over 33% of respondents use a keyboard as their primary means of interacting with a web page. There are mainly people using screen readers or people with tremors, however, it’s quite common for everyone to use a keyboard because it’s faster than using a mouse. This shows the significance of designing accessible keyboard navigation. Typically, users navigate to each control using the tab key, so they should appear in a clear order. “Skip to content” links are also helpful as they prevent tabbing through numerous unwanted controls. Focus styles should always be visible so that the user doesn’t get lost. It’s recommended to replace default browser styles with more distinct ones.
The layout of the website should be concise and easy to follow. Users should be able to find the elements they want as quickly as possible. It’s crucial to put elements in their expected places, for example, typically, the navbar is at the top of the page, pagination is below the filtered content, the basket is in the top right corner, etc. Additionally, alternative ways of finding content could be used such as a sitemap showing the structure of the website or an internal search bar.
People base their actions and expectations on their mental models – their prior experiences. They reconstruct similar contexts and objects which helps them understand the current situation and they behave properly [12]. Therefore, following conventions regarding the appearance of UI elements ensures that users know what to expect. Moreover, one element shouldn’t act like another. For example, buttons and links have different behaviors and functions and should be easy to differentiate. In this example, “Previous day” and “Next day” are links that lead to new subpages, while “Choose a day” is a button that opens a date picker in a popup on the same page. As these elements perform different types of action, they should be styled differently.
According to WCAG guidelines, text complexity shouldn’t demand reading ability more advanced than after 9 years of school. In case it is, supplemental resources are required to provide a wider context [13]. Moreover, an optimal line length should be between 45 and 80 characters. Lines that are too long make it difficult to stay focused, while ones that are too short cause fatigue in the eyes.
This survey [14] shows that above 60% of respondents use assistive technology. Half of them use a screen reader as their primary device. Therefore, making websites accessible for such devices is extremely important. How can we do that?
Websites are built of elements (tags) in HTML. Some of them don’t convey any special meaning – just create building blocks, but the others have built-in support for screen readers or keyboard navigation. They help assistive devices read the structure more efficiently. Meaningful tags should be used whenever possible, especially for interactive elements such as buttons, links, or forms. For example, a tag "table" enables one to use/makes it possible to use (select one) arrow keys to navigate through a table and appropriate input types such as “email” or “tel” suggest to the user a relevant data type that should be entered into the form. Additionally, more than 67% of participants of this survey [15] navigate through the headings on the page for finding information. As a result, using the appropriate heading structure (h1 -> h6) without skipping any of them is crucial. Furthermore, specifying the natural language of the content by using the "lang" attribute in "html" tag affects the way a screen reader pronounces words.
If for some reason using semantic tags isn’t possible or, if they don’t have the desired support, ARIA may be helpful. Its formal name is “Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA).” It’s a set of attributes that may be added to HTML elements to make them more accessible.
In this example, we have a sign up for a newsletter form. The button text says only “Sign up”. Whereas people who have no vision problems understand the meaning from the UI context, visually impaired users could be confused. Adding an additional explanation such as “Sign up for the newsletter” to “aria-label” can be a great help.
If you want to improve your website accessibility, you need to test it first. The desired approach would be to divide the process into two steps.
There are some methods you can use right away to do some basic checks:
You can also choose from many automated checkers that may provide a more thorough analysis:
When you find something disturbing or confusing on a website, even though you have no disabilities, you can be sure that the user experience for disabled people will be much worse. On the other hand, interacting with an accessible and optimized website gives more peace and joy to everyone. That’s why focusing on web accessibility can be a highly beneficial factor in business development. Satisfied customers mean higher profits.
If you are wondering whether your website is accessible, feel free to book a free consultation. We always make every effort to ensure that our products are user-friendly to everyone, including people with disabilities.
Front-end Developer
Sabina is a Front-end Developer with a philological background. The areas of her professional interest include mainly frontend technologies such as Vue.js and React.js. She also focuses on user experience and accessibility.
July 26, 2024 / 10 min read
This guide covers how Optimizely Data Platform (ODP) can improve your business with real-time customer insights, personalised campaigns, and simple data integration and will give you...
June 26, 2024 / 3 min read
Not sure how Opal can support your business strategy? This article explains its functionalities and how to use them effectively.