Including Accessibility from the Start in your Projects

Have you ever asked yourself when you should start to think about accessibility in your project?

‍
When planning your project, whether it is widespread or small-scale, consider accessibility from the start.
As you determine your project scope and objectives, think about where accessibility is impacted. It takes more time and effort to fix accessibility issues in existing websites, than creating a fully accessible site right from the start.
When we incorporate accessibility from the beginning, we optimize the result and minimize the resources needed.

‍

We want to share with you some of the steps that you could start to take in order to make your sites more accessible and good principles to follow to focus on web and mobile accessibility, but firstly you wanna know why is this so important?

‍

As a user, all of us will benefit from accessibility

“The power of the web is in its universality. Access by everyone regardless of disability it’s an essential aspect.”

Tim Berners-lee, creator of the world wide web

‍

There is a much wider group of limitations, which can in many cases go unnoticed by most people, but which become accessibility barriers to overcome in everyday life. Microsoft demonstrates in its platform much of the thinking, work and resources it has developed over time in the area of inclusion.

In a toolkit where we can easily see that not only are permanent limitations affect the use and interaction of digital products, such as vision, hearing, motor problems, but also temporary issues or specific situations can affect this use.

Microsoft uses the Persona Spectrum to understand related mismatches and motivations across a spectrum of permanent, temporary, and situational scenarios. It’s a quick tool to help foster empathy and to show how a solution scales to a broader audience.

Source font: Microsoft

‍

Still not convinced? Here you have more advantages of buildings accessible platforms

As designers we have the responsibility to create better experiences for everyone, and the great thing about making our work accessible is that it brings a better and inclusive experience to all users.
Accessibility encourages professionals to create clean coding and usable design, and generates empathy because you are thinking about the user.
Studies show that accessible websites have better search results, they reach a bigger audience, they’re SEO friendly, and have faster download times.
Avoiding lawsuits from other countries, accessibility helps your business with internationalisation, and in many countries like the USA, Norway or Sweden, it’s illegal to have inaccessible websites.
In most of the European countries, like Portugal,  public services websites have to comply with the wcag requirements. You can learn more about this topic here and here.
Responsive web Design now makes accessibility easy with html5, css3, aria.

‍

Know the guidelines to follow to make your site accessible

The Web Content Accessibility Guidelines, often abbreviated as WCAG, are a series of guidelines for improving web accessibility. Produced by the World Wide Web Consortium (W3C), the WCAG are the best means of making your website useful to all of your users.

When thinking about accessibility you should focus on your content, how you are distributing our content for everyone regardless of where they are going to acess.

WCAG 2.0 and WCAG 2.1 are stable, referenceable technical standards. They have guidelines that are organized under 4 principles: perceivable, operable, understandable, and robust. For each guideline, there are testable success criteria, which are at three levels: A, AA, and AAA.

‍

• Perceivable,  anyone can distinguish content regardless of how they perceive it.
• Operable, responsive to user interactions, including assistive technologies.
• Understandable, clear instructions and messaging help users correct and recover from errors.‍
• Robust, flexible and adapts to a variety of mediums and input methods.

Source font: W3

‍

‍

One of the biggest difficulties for people is to understand the wcag guidelines, but at the moment there are many other platforms that help us to understand these guidelines in the form of checklists or toolkits. Here you have some examples to help you with the checklist compliance: 

• The A11Y Project is a community-driven effort to make digital accessibility easier, they use the Web Content Accessibility Guidelines (WCAG) as a reference point for their checklist that you can learn more about  here.
• Another really cool guide to help you is this one. This guide was created by the designer Marcelo Sales, and it’s a quick reference guide to help in interpreting the WCAG criteria and is also in Portuguese.

The WCAG answers the question of how to do it, but we also have to take into account other factors such as why, context of use, the specific disabilities of the users, and the assistive technologies requirements. These WCAG criteria even explain how to adapt for mobile and maintain accessibility, and you can learn more about it here.

This checklist alone doesn’t guarantee that your site will be accessible, although, addressing the issues called out in the WCAG checklist will help improve the experience for everyone who uses your site.

‍

Good principles to follow when designing for web and mobile accessibility

1. Allow using the keyboard to navigate - Blindness gets 80% of accessibility issues ( including low vision, color blindness) because blind users use the keyboard and the screen reader so you can test keyboards with what motor mobility users use to. 

2.Use the 'alt' property in images -  you want to describe not the picture but what is happening in the picture, it’s important to take in consideration the function of the image, it is also critical to SEO.

3. Tag your hamburger menu links - Hamburger menus are usually not accessible - the easy fix, it’s to properly tag the elements with a logic html tag, but normally that doesn’t happen.

4. List results first -  If you want to get found or seen by the assistive technologies, meaning, for example if you have a map with locations for restaurants near you, screen readers go over to the map and they get lost ( they have no idea how many results there are), so they need to have the results listed first.

5. Test accessibility with real users -  most of the people think that they can cover everything with a checklist, or just follow the guidelines, but most of the issues like not properly tagging are found on the accessibility tests.

6. Allow zooming in your mobile apps - Low vision users using magnifiers won’t be able to actually do the zooming if you disable it.

7. Think about accessibility early-on -  creating accessible products is much cheaper if the topic is introduced early on (even more so if we take into account the lawsuits that we may face in some countries). 

Take an accessible attitude will have more impact than you think, taking the USA as an example, 19% of the population is affected with non accessible platforms, which 10% of men are colorblind, and from the age of 42 the majority of people already start to have eye problems. Accessibility should be part of your coding but also of your UX design strategy.

8. Be careful about visual bias - you have to consider some layout re-thinking and placement of links, and this is where UX design can be very helpful. In this topic you have to be careful with the visual bias.

9. Check mobile accessibility separately  - here you want to check for responsive issues to.

10. Embrace the access attitude - people are the most important, you should design with the needs of everyone in the audience in mind. How I am distributing my content to everyone regardless of where they are accessing. Take in consideration interoperability, guide users to navigate, make it self explanatory, and use plain language.

Source font: Interaction Design Foundation 

Introducing an accessibility process in your organisation

You can’t look at accessibility like a feature that  you can accommodate in a three day sprint or at the end of the projects, Consider accessibility in every stage of the project.

It takes more time and effort to fix accessibility issues in existing websites, than creating a fully accessible site right from the start. When we incorporate accessibility from the beginning, we optimize the results and minimize the resources needed. 

In the ux phase of the project, build accessibility in from the start - think how users with disabilities will navigate.

Here some steps to help:

1. Start with your content - A good practice would be to set the content first. This is important because if you remove the layout, for example, when you disable the css in the browser, the remaining content should still make sense - google and screen readers listen and read the content without the layout, so this guarantees that you will have a more SEO friendly content.

2. Next, define your information architecture - Make the effort to establish in your content  what are your headings, lists and link forms. With this defined,  it's easier for the next step of the ui phase development and for your colleagues developers to transform this architecture in semantic code which it’s easier to assistive technologies to be read.‍

3. Start defining the layout in your screens with sketches or wireframes - When you start to map the position of the elements on the screen, thinking about the user experience in different contexts, taking into account the needs and difficulties of different user profiles.

4. UI, final layout with all specifications - the specification documentation must be based on interaction design, and they must take into account three pillars - feedback, behavior and content (what they are). In the specifications for accessibility you should have information such as: what are the elements to help screen readers, how are they grouped and what is their reading order.

‍

5. Development through information architecture - apply html using semantic code, taking into account the interaction and accessibility specifications. We have to have an appropriate semantics of the elements, using appropriate tags for each of the elements on the screen.

‍

‍

In the whole process, the important thing is that there is frequent dialogue between the various elements of the team. 

As a UX designer, “I” need to take into account the information architecture to determine the relationship of information between screens and to create a good experience for all users.

“I” as a UX writer I have to take into account the content to maintain the relationship of information architecture and help the user through the content using clear and predictable content .

And finally, "I" as a developer, need to ensure the relationship of the elements on the screens, to develop taking into account good practices and to write semantic code using correct tags for the content purpose.

Source font: Online UX Team 

Notes: The images used to explain the steps are merely explanatory for this article and were created based on the source font video created by Marcelo Sales.

‍

‍

Take aways

Start thinking about accessibility as an essential topic in the beginning of your projects.
The content and the information architecture of your projects should be established before developing, and to tag the information properly.
Designing for people with permanent disabilities actually results in designs that benefit people universally. Constraints are a beautiful thing.
Documents and specifications in every stage of the process to create better and accessible experiences
It is difficult to change the whole world at once and in one day. Embrace the access attitude step by step to create a breather life for everyone, it is the little things in everyday life that create the big changes.

‍

Useful Tools

• Tools to help you with the accessibility checkers: a extension for chrome https://chrome.google.com/webstore/detail/axe-coconut-web-accessibi/iobddmbdndbbbfjopjdgadphaoihpojp?hl=en or this one that creates an accessibility report based on WCAG 2.1 guidelines https://accessmonitor.acessibilidade.gov.pt/

• A tool to help you to set up a good and accessible colour pallet: https://toolness.github.io/accessible-color-matrix/  or other example, a chrome extension to help check the contrast of your site: https://chrome.google.com/webstore/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf 

• Stark a Colorblind Generator, Rapid Contrast Checking available for figma, sketch and adobe xd: https://www.getstark.co/

• A pattern library, with focus on inclusive design to help you create semantic and accessible code: https://inclusive-components.design/