Who is affected?

Some may think that the accessibility topic concerns only a relatively small group of Internet recipients, e.g. the elderly or people with disabilities. Meanwhile, difficulties in accessing content - even if temporary - may affect each of us. Each of us may find ourselves in a situation where using the Internet is difficult - in a place with poor coverage (no broadband Internet access), on a shaking train (difficult to navigate). Anyone can also experience such temporary difficulties as, for example, a twisted wrist that makes it impossible to navigate the site with a mouse, or lost glasses, without which reading a small text is problematic. Solving accessibility problems therefore almost always improves the user experience for everyone.

Nothing-to-lose accessibility approach

Most countries define a group of entities that are required to meet accessibility standards (usually public administrations, police, hospitals, etc.). However, it is worth being interested in the subject of accessibility even if our website or application does not belong to this group. By meeting the accessibility requirements, we lose nothing, and in return - at a low cost - we not only make it easier for people with various limitations to access content on the Internet, but also expand the group of potential customers of our website. Building websites only for people with perfect eyesight, hearing, dexterity, and always in perfect psychophysical condition, is not very realistic. By narrowing down the group of our recipients so much, we act to our own detriment. We do not have to immediately rebuild the entire existing application to meet the accessibility requirements, because the use of even just a few selected techniques already facilitates the use of our website.

Even many newly emerging websites contain barriers that make it difficult (and sometimes completely impossible) for people with limitations to use them. Therefore, the more we can get by adjusting our website to their needs, the greater the chance that they will choose our website, not another. If we want to reach a wide audience, accessibility will be crucial for us. It helps to broaden our audience and improves our brand image as well as overall user experience and satisfaction.

Where to start with web accessibility?

Individual countries usually have their own formalized accessibility standards. In the United States, they are included in the Rehabilitation Act, and in Poland, in the Regulation of the Council of Ministers of April 12, 2012. However, most of them are based on the Web Content Accessibility Guidelines (WCAG), which is the most popular and universal set of rules on accessibility. It also contains a lot of examples and practical tips. Below I present a few of them to illustrate the logic and what we gain as a result.

Structure headings properly

The headings on our website should have the appropriate HTML structure (<h1>, <h2>, <h3>, etc.), and their nesting and content should correspond to the structure of the page content. Why is it important? Such headers allow users of assistive devices to find and navigate through the structure of the content on the website. It is worth remembering that the HTML structure also affects, for example, SEO, so by taking care of the semantics of the code, we also get an additional benefit.

Audio and video subtitles

Another accessibility standard requires us to ensure that the audio content has a text equivalent (e.g. in the form of a transcript or movie subtitles). The benefit for the readers is obvious. But it is not difficult to imagine a situation where such a function is useful for other users, e.g. using applications in the office, working in an open space, or any other noisy place. I have appreciated it more than once, when I did not have headphones with me - without subtitles, the content would be completely useless to me, and I would have to leave the site and look for information elsewhere.

Informing the user about errors

Accessibility also requires us to make the interface understandable. The user should be informed about errors that occur on the website, e.g. errors in the form being completed. Highlighting incorrect form fields in red is not enough information for screen readers, or AI reading assistants - the user of such a device will not know which fields and why have been filled in incorrectly. The changes to the label tag can also be ignored. Therefore, it is best practice to include a separate text alert. We can also include the error in the page's title element.

It is also worth mentioning the general rule that when adjusting the website to assistive devices, we do not have to give up the minimalist visual effect in the browser version if we care about it - additional text can be displayed, for example, only on screen readers. The website does not have to look and behave identically on different devices - it is important that using it is easy and comfortable.

An error message must clearly inform the user about what is happening, what specific errors occurred, why they occurred, and what needs to be done to fix it. So again, by taking care of accessibility, we get additional benefits, and the use of the application becomes generally easier and more enjoyable.

Text description of the images

Images should have an alt attribute. The presence of the alt attribute is often referred to in the context of SEO. But it is also very important for people who use, for example, screen readers, who inform the user about the content of the image precisely on the basis of this attribute. Descriptions should be brief, but at the same time concise and comprehensive. It's hard to find a universal recipe here, because a lot depends on the function of the image on the page. The description of the image in the online store, where the details of the presented product are important, will look different than the description of the photo, which has an expressive function. Then the text will rather refer to the emotions that the image evokes. In any case, however, our point is to convey the same as faithfully as possible, but with words.

If the image has a different function, e.g. it serves to validate a form, then the alt attribute should inform about the function, not the appearance:

<input type="image" name="submit" src="submit-button.gif" alt="Submit" />

In all these examples, thanks to the appropriate description, we can easily understand the conveyed content and function, even though the image is not displayed.

What’s next?

“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

The Internet is a revolutionary creation because in many aspects it includes into society people who were previously separated in various ways due to their disabilities, place of residence, or other barriers. Access to various types of content and media can be made much easier with the help of internet technologies. The internet connects us all, and the less barriers we have to it, the better.

If you are interested in the subject of accessibility, stay with us and follow our blog, we will continue to write more about techniques that will help make your website accessible for all.