Many people have various limitations that make it difficult for them to use digital services. Such limitations include, for example, hearing and visual impairments, as well as various cognitive, physical, and neurological disabilities and conditions such as epilepsy and multiple sclerosis. In Finland alone, there are hundreds of thousands of people affected by one of the conditions mentioned above. When designing digital services, it is important to also take into account these people with such limitations.
To be precise, the legislature also requires that these individuals be taken into account.
The European Union’s Accessibility Directive, which came into effect in 2016, mandates that all public websites must be accessible and meet at least the WCAG 2.1 AArequirements. The relevant legislation came into force in Finland in 2019.
This legislation will be further supplemented by the Accessibility Directive, which is scheduled to be transposed into national law in 2025.
The latter directive mandates that, in addition to public websites, the most important private services—such as bank websites—must be accessible in accordance with WCAG 2.1 Level AA requirements. Although the directives do not require all online services to comply with the WCAG 2.1 AA guidelines, I still believe that the fundamental pillars of accessibility should be present on every website.
The aforementioned WCAG is a standard developed to aid in improving website accessibility (WCAG Web Content Accessibility Guidelines). The WCAG guidelines serve as a resource for website developers and content creators in improving accessibility. Accessibility on websites is therefore not a given; rather, it must be taken into account as early as the website’s design and development phases.
What factors should be considered to ensure a website is accessible?
The following sections outline the most important criteria for Level A and Level AA compliance.
Visual Accessibility and Contrast
Text, headings, and various elements—such as form fields—must stand out clearly against their background. According to WCAG Level AA, the text contrast ratio must be at least 4.5:1, and the contrast ratio for large text and other elements affecting usability must be at least 3:1. The contrast ratio ensures that text and other elements are readable by the vast majority of users.
Link styles must stand out from the rest of the content. Links embedded within the content must be clearly distinguished from the rest of the content, for example, by underlining and color.
The keyboard cursor and mouse pointer must be distinguishable so that the user receives feedback on which part of the page is active. When a user navigates the page using the keyboard, buttons, links, and form fields must appear active when the user hovers over them. Simply using color is not sufficient to indicate an active cursor style.
The text must be sufficiently clear in terms of font size, line spacing, and font type. The text must not break up or spill over the edges of the page, even when the webpage is zoomed in to 200%.
People with epilepsy must also be taken into account: animations must not flash more than three times.
The website must also be responsive. The website must remain intact on all devices and screens of all sizes, ensuring that no horizontal scrolling occurs and that the content does not overflow the page.
Site Structure and Usability
It must be possible to navigate the site using only the keyboard, and all of its functions—such as navigation, buttons, and forms—must also work exclusively with the keyboard. Furthermore, the focus must not get stuck on a pop-up window, for example, preventing the user from closing it using only the keyboard.
Navigation must be clear and unbroken. The site should also include links that allow users to skip content or navigation, thereby speeding up navigation for keyboard users.
The site’s language must be programmatically specified to the browser using the HTML `lang` attribute so that a screen reader can use the correct language on the site.
It is important to use the correct semantic HTML elements on the site. This means that in certain sections of the site, the HTML element specifically intended for that purpose is used. For example, ensure that all clickable elements containing functionality—other than links—are
Images on a website must have text alternatives. This should be done using the HTML `alt` attribute, which serves as a text alternative for the image for people with visual impairments. This description is very often misused; it should describe what is in the image, not necessarily who took it.
Additionally, all videos, audio, and music must be controllable and stoppable using both the mouse and the keyboard.
Forms must be accessible. The form labels
To ensure the site works well with screen readers, it should use WAI-ARIA attributes to improve accessibility. For example: if a page has a button that opens a menu, a visually impaired user won’t know whether the menu is open or closed. WAI-ARIA attributes can be used to tell a screen reader whether the menu is currently open or closed.
Accessible Content
Content structure plays at least as important a role as technology. Often, accessibility fails because of the content itself, even if the technology has been properly implemented.
Fortunately, making content accessible is easy, and the same practices that improve a website’s search engine visibility in other ways also help here. Headings should always use the correct heading levels: H1 → H2 → H3… . Headings should be clear and descriptive of the content, etc.
Link text should also be descriptive. For example, “read more” is not descriptive link text, but “Read more blog posts” is immediately more descriptive. A user who relies on a screen reader cannot know what topic they are reading more about.
Testing Accessibility
Finally: as with all development projects, testing is the be-all and end-all when it comes to accessibility. A website’s accessibility should always be tested on different devices, at least on a phone and a computer. I’ve personally used the NVDA screen reader and Apple’s VoiceOver to test accessibility.
Accessibility isn’t difficult, but it does require extra attention.
