The highest part of the sidewalk is an impossible obstacle for a wheelchair but that same part might trip over an absent-minded texter, a senior citizen or a cheerful drunk. The lowered part of the sidewalk is a necessity for special groups but we all benefit from it. The accessibility of websites presents a similar phenomenon.
As a Web Designer, I am used to observing trends and phenomena. They are often quite superficial: primary colors are making a comeback and illustrations are reliving the 90s. However, right now the hot potato is accessibility and its importance is something entirely different.
Accessibility on websites means almost the same as accessibility in a physical environment. Neither is solved with one magical solution – a ramp or a contrast button. Accessibility is a multifaceted issue that should be thoroughly taken apart before building it back up.
Why should websites be accessible?
It is fair
The Internet belongs to everyone. The society is inclusive and the Internet is an integral part of society.
- 5 % – Approximately about three to five percent of people have difficulties in motor skills which hinder the abilities to use the mouse or the keyboard.
- 6 % – At least around six percent of people have difficulties in perceiving and interpreting content.
- 3 % – Out of the world's population, around three percent are severely visually impaired or legally blind. About fifteen percent of the people in the world have some degree of visual impairment.
- 3 % – About three percent have a limited hearing. Subtitles and transcriptions in video and sound material online help especially this group of people.
Altogether around 15-20 % of the population belongs to the group that requires accessible services. This means a large portion of customers, consumers, and stakeholders. As the population ages, it is estimated that this group will get bigger.
Accessibility is profitable and visible
In addition to those who unquestionably need accessible services, anyone can need them in certain situations. Senses, perception, and concentration can be disturbed when one is tired, in bright sunlight or in a crowded vehicle. They are also compromised when one is intoxicated. Online shopping while drunk is a million-dollar business, by the way, and shouldn't be neglected either.
The number of customers that you want to drive off from your site is quite obviously zero. Accessible implementation guarantees that if someone leaves the site, it wasn't because they couldn't work out how to use it.
Google doesn't disclose all the information about search result criteria even to its partners. However, it is certain that accessibility will play a bigger role in search engine visibility as well. Correctly built websites with good content will be at the top of the search results in the future.
The law obliges
WCAG, accessibility directive, EN301549, W3C…
Directive (EU) 2016/2102 of the European Parliament and of the Council about the accessibility of websites and mobile applications came into force in December 2016. This accessibility directive will be applied in all EU member states starting from the 23rd of September 2019 to all the websites published on the 23rd of September 2018 or after. For websites published before the 23rd of September 2018, the accessibility directive needs to be applied starting from the 23rd of September 2020.
In other words, the directive obliges that all public sector websites, mobile applications, and official online documents and files are accessible in September 2020 at the latest. Even though the directive really only applies to the public sector, the European Commission advises its member states to follow the directive on all websites providing general services, such as childcare, healthcare, transportation services, and communications services. In many EU states, laws about providing digital services comply with the accessibility directive.
The accessibility requirements of the directive and member state legislation refer to the standard (EN 301 549) that concerns ICT acquirements. This standard is based on the content of the international WCAG (Web Content Accessibility Guidelines). The founder and current director of the W3C community, that compiled the WCAG, is Tim Berners-Lee – who invented the WWW in the first place. The WCAG is the most important handbook about the standards of accessibility and how it can be achieved.
Accessibility is a good general criterion
"Good" is not really a matter of opinion. Data on how the Internet is being used has been gathered for a while now and communications as a larger entity is a thoroughly studied field. What is good according to an individual, might not be that when a bigger group is taken into consideration. The good news is that the accessibility criteria would seem to go in line nicely with the principles of communications and aesthetics.
Accessible content gets its rhythm from the practical requirements and these same requirements take the aesthetics of the site to a more classic direction. Some of the more eccentric website trends need to be sacrificed for accessibility but most likely the humankind will survive without the flashing buttons that we saw in the early noughties.
What is an accessible website like?
It complies with the accessibility directive
The WCAG accessibility criteria tell everything necessary about the requirements for an accessible website but in a very technical and thorough manner. Here are the most important pointers in a neat package:
A website must be perceptible
- A website's contents must be available without having to see the site fully or the essential parts must be readable with a reading machine.
- A description that tells reading machines what is in the picture is added to images. This works like a charm for search engine visibility too, since the alternative text also shows up in text searches.
- Video and sound material is subtitled
- Color contrasts are at a sufficient level
- The size of the website can be altered
- The content is clearly grouped
A website is manageable
- A site can be navigated with the keyboard or a pointing device
- A user has enough time to react to the content
- A site doesn't contain seizure-inducing blinking
- Navigating with the keyboard or speech has been made easier with shortcuts
A website is understandable
- Text is legible and understandable
- The content is predictable. Navigation and the most important selections stay the same throughout the content.
- The site helps the user to avoid and correct mistakes. Text fields, for example, clearly state whether filling them out is required or not.
A website is stable
- The technical structure and implementation are done well
- The content is compatible with different kinds of devices
It is clear and predictable
WCAG is important and relevant but it doesn't cover all the aspects of accessibility. The Internet is a relatively young phenomenon in the history of the world but certain things have started to become standardized on websites. When accessibility is the goal, website visitors shouldn't be confused with any clever out-of-the-box solution. Language selection and navigation should mainly be found in their usual place.
In addition to the website structure, clarity is also affected by all the different sections of the content. Industry-specific jargon and over-complicated language don't improve accessibility – they also don't boost sales or people's moods. The text doesn't need to be over-simplified either but sentence structure needs to be clear and language used correctly.
Visuality is important on a website and placing fancy images at the top of a website could be just the way to go. Filler images scattered here and there, however, don't really bring anything to the table and might hinder the user experience.
Functionality and the rhythm of information are key in all content.
How do I make my website accessible?
Do a spring cleaning for the content
Check that the text content is easily understandable. Simplify sentences that are too complex. Make sure that texts on buttons describe what happens when one pushes them. Group your content into shorter entities.
Clear off images where text is part of the picture or make sure that the same text is found in the picture's metadata. Take a critical look at your images. Are all necessary content-wise or do they at least bring something special to the site's atmosphere? Or are they just stuffing the site?
Add subtitles or transcription to videos. First and foremost, this serves the hearing-impaired but also anyone who didn't remember their headphones that day and would like to watch a video in an open-plan office, for example.
Use professionals for designing
It is the website designer's job to know the killer recipe for a well-executed and accessible website. How the website user experience is crafted shouldn't be based on a subjective opinion. A design specialist bases their decisions not only on their education and expertise but also on user data, the law, and statistics – and is naturally aware of the trends too.
A designer has many tools for creating accessible websites. Knowledge about accessibility and functionality comes with education and experience but in some cases, a designer can take some time-saving shortcuts. Contrast as an accessibility criterion doesn't rely on a hunch and instead is pure mathematics. The magic number is 4,5:1 and it tells the value contrast between text and its background. There are many tools for checking this, both online and integrated into design tools. There are also design programs that simulate visual impairments and display the designs as a color-blind would see them.
Example image simulated with the more complex type of red-green color blindness. (Copyright Elisa Raittila, as the article's header image)
Are you planning a website renewal to make it more functional? We at Liana make sure that your website gets an accessible form and you get the tools to maintain the content efficiently. Our design team comes up with the visual layout and user experience, according to the criteria of accessibility. In the building stage, the site will be made to react to keyboard commands, in addition to the mouse, and scale text larger without breaking.
