​How to create accessible websites

Accessibility means that websites and mobile applications and their content are designed so that anyone can use them successfully. Accessibility is also an increasingly important success factor in the development of digital services and the related user experience.

The role of the designer and developer in accessible digital services

When designing online services, it is important to be aware that services are made accessible in the code. The members of the development team must understand both each other and the end-user in order to provide the service with, for example, functional color contrasts, responsive text size, and a semantically clear code that allows use with a keyboard or screen reader.

That’s why we, two digital designers, decided to venture out and attend the Frontend Master Web Accessibility course dealing with the basics of accessibility in website implementation. The lecture part of the course lasts about three hours, but we booked a whole training day so that we could also do the course exercises and supplementary studies at the same time. We also got a lot more out of the lecture section as we took time to discuss the topics and the observations and questions that came out of that. At Nitor, learning is valued: everyone has the opportunity to spend five working days a year on training and in addition, we spend about 10 percent of our working time developing our own projects.

The basics of accessibility

The accessibility of a website is based on the fact that even people with a disability can interpret, understand and contribute to things online as well as navigate and interact with the internet. At the beginning of the course, the lecturer provided an example of how people got frustrated with filing taxes. In Finland, digital tax services are significantly more user-friendly but it was easy to identify with the frustration. The example immediately increased our empathy for people who find digital services constantly challenging.

About one in five of us has a disability. In the United States, for example, many people have impaired vision despite using glasses. This leads to problems such as difficulty interpreting words and letters. In addition to visual and aural impairments, digital service providers must also take into account such matters as attention deficit disorders, learning disabilities, and physical impairments that make it difficult or even impossible to use a mouse, for example.

There are many different ways in which users can navigate websites. For example, using a keyboard, a mouse, and an on-screen virtual keyboard or by using a mouse stick or head wand. Websites designed for visually impaired or blind users come to life through a screen reader. For us, the least familiar tool was the so-called single switch, where a single key can be used to command a computer.

In terms of accessibility, it should be noted that the internet was designed to be accessible. Therefore, many services that look older may actually be quite modern from this point of view. It’s worth remembering that once a page is designed to be accessible, it’s better for everyone to use.

What we learned

The structure of the course is based on the lecture filmed in connection with the workshop, in which one topic is discussed and then there’s a practical assignment related to the topic to be done. In addition to the assignments, the WebAim WCAG checklist is used, and below are a few excerpts from the topics we covered.

From a motoric or muscular movement point of view, navigating with a keyboard is simpler

Therefore, an easy way of improving the accessibility of a website is to pay attention to its keyboard navigability. When that’s easy to do, the website is often more understandable to the screen reader as well, or really to just about anyone.

How does keyboard navigation work then? When browsing the internet with a keyboard, the tab key moves you forward and the tab + shift combination takes you back to the previous element. In addition, you can hide some so-called hidden elements, which only appear if the website is accessed using a keyboard alone. The function “Skip to main content” is a typical example of such planning and can be found, for example, on Helsingin Sanomat's website. Some services, such as social media channels, also use keyboard shortcuts in navigation. For example, Twitter displays keyboard shortcuts when you press the question mark. If your website has keyboard shortcuts, you should try to inform users about them as early as possible. When designing keyboard shortcuts, make sure they are not the same as, for example, the keyboard shortcuts for the computer's operating system.

Direct the user's attention to the right place

The elements to which the tab key or screen reader's focus is to be directed are specified in the code. Plain textual content within a div is not enough, so favor elements such as hyperlinks or buttons. The tab-index attribute can be used to change the order of the focus content and make the above-mentioned “Skip to main content” link, for example.

The focus should also be clear to a seeing user. By default, browsers frame the content in focus. Unfortunately, this may be overlooked if the layout of the user interface is designed without paying sufficient attention to accessibility.

A screen reader reveals the functionality of a website

A screen reader reads a website’s content to the user. Users of Mac devices can access the screen reader directly at the operating system level without turning on VoiceOver or by downloading a screen reader to their browser. Windows users can, for example, try the free NVDA screen reader.

The accessibility of a site, or a lack of it, is revealed fairly quickly when using a screen reader. For example, the user might experience problems in using and filling out different forms if the operations do not use semantically correct HTML elements or the elements are incorrectly named.

Website accessibility can be improved with a few simple measures

The internet was designed to be accessible from the outset, and interactive elements such as hyperlinks, buttons, or input content have always been specified in the code. It's worth remembering to use them, that is, to refer to elements such as buttons with the HTML element that belongs to them. Using the right elements also makes the code easier to read.

ARIA attributes can be used to improve, for example, instructions related to site components (aria-describedby) or to instruct a screen reader to actively read aloud what is happening. These can be designed, for example, in connection with the download of content or the submission of a form (aria live regions), in which case the user knows that the operation is in progress or that the selection is made.

Among developer tools, for example, VScode is good in terms of accessibility because it can fill in ARIA attributes automatically, which speeds up and makes it easier to use them in development work.

Tools

There are good tools for improving and developing accessibility, and some of these have already been covered here. In addition to these, the NoCoffee plug-in for Google Chrome, for example, helps to illustrate various visual challenges, making it easy to work on your own page design from this perspective as well. Chrome Vox is another screen reader, available for Google Chrome, that allows you to consume web content even if you can't read it yourself.

There are a lot of tools and information on web design out there that can help you take accessibility issues into account.

Nitor has been providing accessible services for a long time. The most well-known examples of these are Osuuspankki's OP Saavutettava online bank service and Palvelukartta, the Helsinki Metropolitan Area Service Map. The accessibility law, which came into force in 2019 on the basis of the EU Directive, requires the websites and mobile applications of public sector bodies to be WCAG accessible.