Accessibility: an introduction and a new perspective

We hinted at it in our post about CSS Day 2020 and now it is finally here: accessibility is something we are actively building into the way we work. In the meantime, we took on a major challenge on this front: building the new website of the Minister for Technological Innovation and Digital Transformation.

So we want to share the experience we gained on this project, and on the ones we are working on now, to help spread a culture of accessibility.

Making a digital product accessible means making it easy to use for people who, because of a disability, rely on assistive technologies or special settings.

These potential users include people with visual impairments, limited mobility or motor difficulties, cognitive or learning disabilities, epilepsy, or hearing impairments.

Keep in mind that this also applies to perfectly healthy people in a temporary condition. Broke your foot playing soccer and need crutches or a wheelchair to get around? An elevator or a ramp helps you get where you want to go. The same goes for a digital product.

Accessible digital products present information through multisensory channels, such as hearing or different levels of vision, and allow, for example, navigation with keyboard controls or voice instead of the typical point-and-click interface.

The first answer is ethical. Accessibility is a tool for inclusion, because it acts where starting conditions create difficulty and exclusion. We build accessible products to create a better, more inclusive web.

Seen this way, it is clear why a high level of accessibility is mandatory for public administration digital products: every citizen has the right not to be discriminated against based on their abilities.

A second answer centers on the concept of quality. Cantiere Creativo has always worked to align its products with the best international quality standards: best practices, languages, methodologies, UX. Accessibility is simply a new criterion, one more aspect that follows in the footsteps of the others.

Last but not least, there are the indirect benefits: UX, SEO, touch-friendliness and mobile-friendliness are key aspects of a digital product, and systematic accessibility checks secure them even further.

In three simple steps:

1. Adopting a mindset that lets us take these needs into account.
2. Learning and implementing the technical standards, from product design to development (WCAG).
3. Testing the product with tools that help us find any issues.

It is a cross-functional goal that you reach together with your colleagues and the product team: designers, developers, PO/QA, etc.

The good news is that we already consider many aspects of accessibility and already work with the right mindset: anyone working on a UI asks how to make what we build understandable. We just need to go one step further.

The first way to test, and the easiest to implement, is to use automated tools built into the development workflow, with pa11y. With pa11y, a single command is all we need to test an entire web product and get details on the issues found.

The second way, fully complementary to the first, is to use browser extensions designed for these checks. The advantage is getting immediate visual feedback on the elements to fix. However, this check is done manually page by page, so it is more targeted than the previous one but less effective for products with many views or pages.

The most interesting and powerful extensions we have tried are:

• Siteimprove
• WAVE
• ARC Toolkit
• axe™ DevTools

Finally, there are user tests, the most direct and realistic way to check a product’s accessibility. The previous methods verify that the product complies with the Web Content Accessibility Guidelines (WCAG) 2.1, the international standards that define the goals and how to achieve the various levels of accessibility.

So while the previous methods check a "theory", however practical and pragmatic, user tests are the most hands-on level, with the richest feedback possible, since they involve real people to make sure the product is truly accessible.

As we said earlier, adopting the right mindset is the starting point for accessibility. So let’s put ourselves in the shoes of people with visual impairments, since sight is obviously the sense we normally use with digital products, while remembering that visual impairments are not the only ones we will deal with.

The most common vision problems are nearsightedness, astigmatism and presbyopia. Who among us does not have at least one of them, especially if we spend long hours in front of a screen? We know they often get worse over time. How many people do not have up-to-date glasses, cannot afford them, or simply live with these conditions?

To accommodate these relatively mild conditions, text needs enough contrast against its background to be readable, especially at small sizes.

To measure contrast there are plugins for the most common design tools, as well as browser extensions that help you find the numeric ratio.

With color blindness (daltonismo in Italian) we face a subtler but potentially more problematic difficulty, because at the moment there are no glasses that can correct it.

The most common form of color blindness is confusing green and red: it affects 4-8% of the male population. That is a considerable number if you think of how often green and red are used in visual communication. It explains why traffic lights have lights in three different positions: that way you can tell what they are signaling even without seeing the colors.

For a web product, this means that giving an invalid input a red border does not make the error clear to everyone. You need a text message that explains the error in words, so that a screen reader can read it too.

Besides, a color cue alone assumes the user knows that red means error, but someone with cognitive difficulties may not grasp that so easily.

These people necessarily need assistive technologies or special settings to use a digital product. Screen readers are tools that read a product’s content and elements aloud, effectively creating a voice interface that lets people use it without sight.

According to official sources, geographic Europe has more than 2 million blind people and almost 24 million people with low vision, for a total of 26 million. 

Other very important statistics tell us that the unemployment rate among blind or partially sighted people of working age is 75%. We know that 90% of people with vision problems are over 65, and that women are at greater risk than men of becoming blind or partially sighted.

These numbers are very clear and show how urgent it is to build accessible products for these people. In the next post in this series we will look in detail at how screen readers work and which practices make a product compatible with them.

In the meantime, here is a demo of one in use:

Cover image: Andrei Bortnikau/Shutterstock