ACCESSIBILITY STANDARDS AND REGULATIONS
[paragraph_big]How can small adjustments in our design work allow us to design applications for the greatest number? We already told you about those designed to make your life easier people with disabilities.[/paragraph_big]
In France, 20% of people are disabled
Accessibility is one of the areas of improvement that we would always like to bring to our projects. But is it still necessary to have the knowledge to find the tools to help us in this process and this at any stage of the design. The ideal is of course, to get started from the start.
To do this, I have gathered the tools that are most useful to me to meet RGAA accessibility standards, and how I use them on a daily basis. But before getting to the heart of the matter, here is some practical information:
What is the RGAA?
The introduction to RGAA explains that it is an accessibility standard based on WCAG ( Web Content Accessibility Guidelines ), which are rules for web content accessibility presenting a wide range of recommendations for making web content more accessible. (source: WCAG )
“In accordance with European recommendations which have also recognized WCAG 2.0 as a reference standard, French law has chosen to align the RGAA with these international rules by providing a methodological framework and a technical reference framework to verify compliance with the success criteria of WCAG 2.0.”
There are 3 different levels of compliance
The compliance levels correspond to a level of requirement as to the degree of accessibility of the site. Here are some application examples:
In level A : Color is not the only visual means of conveying information.
In level AA : Small texts have a contrast ratio at least equal to 4.5
In AAA level : Small texts have a contrast ratio at least equal to 7
To briefly summarize, the RGAA is a method of application of the WCAG defined by the W3C within the framework of the application of article 47 of the law of 2005 on disability.
In 2008, 70% of English sites did not meet accessibility standards
Huffington post
Have you ever experienced a disability?
During our previous Meetup UX & Accessibility Episode II, Sylvie Duchateau (accessibility mediator at Access 42), who was born blind, was demonstrating her NVDA screen reader.
To enable you to experience disability in all its forms, Atalan has developed a simulation tool. In Now that you have experienced it, let's get to the heart of the matter!
TOOLS FOR ACCESSIBLE DESIGN
#1 STARK
How it works ?
The first feature is a simulator. The different levels of color vision can be tested during design. On the fly, we can know if this pathology is widespread and have details on it. I find it useful for adapting my design work to a wide audience.
The second feature allows you to measure the contrast level of your project according to the standards WCAG extension, who is she less manageable because you have to select two layers (preferably the background and an element) to measure the contrast.
Without Stark
With Stark – taking color blindness into account
We appreciate
What's interesting is that the contrast is measured against AA, AAA compliance levels and if applicable, notifies failure situations. This tool makes it possible to test during production and to carry out a benchmark targeting one or more specific visual handicap(s).
It saves me time since it combines two features (contrast and misinterpretation of colors), and I can immediately know if my product meets expectations for accessibility. It also allows me to adapt according to the needs of each project. Some choose to only correspond to the AA level, and others to the AAA level.
It also offers to export the result to make a demonstration and raise awareness of accessibility, very practical in customer meetings!
Small bonus : When testing vision, you can move the Stark window to any open file (JPG, Browser tab,…) and test again!
#2 Contrast
How it works ?
Like Stark, this application allows you to test the contrast between two colors. The richness of this application is that the test can be carried out on any software on your Macbook. Just use the pipette for each of the two colors and you're done! You know if your model is AA and AAA compliant. Thanks to the pipette it is also possible to recover the hexadecimal code of the color tested.
We appreciate
Being able to retrieve the hexadecimal codes of all the elements that appear on the screen with the eyedropper: on the desktop, the browser, open software…, this feature is ideal for auditing a website.
We could improve
A price slightly out of step with the features offered. I would appreciate it being enriched with other features like Stark.
#3 NOCOFFEE
How it works ?
It offers an integrated simulator targeting visual impairment. The plus compared to Stark? the extension does not only include colorimetric deficiency but also other visual disabilities such as myopia or the appearance of spots in the center of vision. You can adjust the impact of each visual impairment using the slider, which you can also combine with each other.
I most often try to have a persona with a disability, this extension allows me to diversify the type of visual impairment and adapt it according to the project. For example, a site whose target is between 50-80 years old, more subject to AMD, this extension will be perfect for testing in condition. But the best way remains to appeal to a user experiencing this type of deficiency.
We appreciate
This plugin is useful for raising awareness of the impact of a visual impairment on the user. I use it in conjunction with Stark and Contrast to conduct an expert assessment.
It is during tests in real conditions that we can determine which elements are important and/or essential.
Nocoffee allows me to put myself in the shoes of a user experiencing a visual impairment. Demonstrating concretely the blocking points that users may encounter is always a big plus during an awareness workshop with a client.
A good demonstration is better than a lecture on accessibility.
We could improve
There is a lack of figures on the people affected by the type of disability concerned, contrary to what can be found at Stark. Moreover, it is not made possible to adjust according to the first drafts in design.
#4 Easy'iti
Digital accessibility solution
How does it work ?
FACIL'iti is a tool that allows you to adapt a website for users with disabilities. Even more comprehensive than previous solutions, it supports not only visual impairments but also motor and cognitive disabilities such as Parkinson's disease and dyslexia. It adapts to each individual and allows for a personalized display. FACIL'iti is very easy to use and implement. Simply add a line of code to the page you want to make accessible and add the FACIL'iti logo to allow the user to activate it.
We appreciate
On the user side, the feedback is very positive. Thanks to the creation of a free profile, you can save your preferences from one site to another as well as from one device to another and thus maintain your reading comfort without the need to install an additional tool. User input visualizes how a page is impacted by a disability. But again, it does not provide a turnkey solution. However, it helps to better understand the diversity of disability.
Here, you can see the navigation between an information and e-commerce site, before and after activating FACIL'iti, with parameters that I had predefined: “poor perception of colors and dyslexia”.
Often when we approach the subject of accessibility for the web, visual impairment will be a priority. Yet, many disabilities must also be considered in the design. With FACIL'iti, I found the perfect tool to give visibility to the various disabilities that affect users of our websites.
We could improve
The monthly subscription plan. I'm not sure that sites generating little traffic and whose owners have not been made aware of accessibility issues will feel the desire to commit to what they could mistakenly consider as a lost investment. .
Not designed either to simulate the experimentation of a disability, it remains relevant for raising awareness and teaching.
Conclusion
To design more accessible websites, there are many steps to take when starting from scratch. It can sometimes seem impossible, but by gradually integrating best practices into our design process, we will be able to provide increasingly accessible websites for a wider audience. But above all, to reassure you, remember these words from the WCAG :
It is not recommended to set a site-wide goal of AAA as it is not possible to meet all AAA success criteria for some content
TAKE AWAY
- To raise awareness of accessibility, it is best to experiment with disability
- Always test your prototypes with targeted users
- Experiment with tools until you find the one that works best for you and meets your needs the most.
Laetitia Grosjean (@Laetitia_m_g), UX Designer @UX-Republic
Discover our 10 essential Sketch plugins
Sources
https://forum.alsacreations.com/topic-6-41989-1-Rapport-entre-W3C-WCAG-RGAA-et-AccessiWeb.html
https://access42.net/decouvrir-accessibilite
http://www.accessiweb.org/
http://references.modernisation.gouv.fr/e-accessible
https://github.com/jpboutherin/colors-for-all
