Inclusive Designs for web accessibility — Chapter 2
Now that we know more about the problem of not developing with accessibility, the time has come to discuss a little about draw screens with accessibility.
There is something you need to know about work on the web. There are rules and patterns that we should apply, and all these things are centralized in the W3C (World Wide Web Consortium) page.
Who is W3C and its importance
In their own words:
“The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor and Director Tim Berners-Lee and CEO Jeffrey Jaffe, W3C’s mission is to lead the Web to its full potential”.
What beautiful words: “Lead the web to its full potential”. Basically the companies and schools around the world use the patterns of W3C to develop web softwares and teach how to develop them too. The W3C will be the base material for all we will discuss here, and in the future chapters.
For our goal here specifically we will follow the WAI (Web Accessibility Initiative) page from W3C. That initiative are standards and support materials for developers who want to understand and implement accessibility.
The importance of UX in web accessibility
What is the importance of UX (user experience) in web accessibility? Well, let’s say that only inclusive techniques (programming level) is not enough to become a web application accessible. In the W3C WAI page, there is the following sentence that explains this:
“Combining accessibility standards and usability processes with real people ensures that web design is technically and functionally usable by people with disabilities. This is referred to as usable accessibility or accessible user experience (UX).”
Yes I know what you are thinking, those three words are giving you headaches: “with — real- people”. But how do you actually design prototypes for your customers? Don’t you check with a number of users their pains and problems to be solved? Why this process should be different for people with deficiency, right?
If a deaf person cannot find a way to explain to you that they need more than one phone number to contact you, you may never put an email contact on a web page you are designing. So, I will give you some tips that I am sure will help, but it will never replace a real person giving you feedback.
Practical tips for design an accessible web page
It is not possible to write tips for all types of deficiencies, so I will put in topics the most common deficiencies with their respective tips. The idea is to read the stories and get the insights of persona’s problems.
Before we start the topics, it’s interesting to explain that web accessibility is not always about people with deficiency. Old people that never had some deficiency probably will have low vision along the time. People who unfortunately were involved in an accident, may become a target of web accessibility even if their situation isn’t permanent. So let’s see some tips to design accessible pages for most common deficiencies.
The Luke’s difficulties — blindness
Low vision and blindness are one of the most common disabilities among Brazilians. The database I will use is the last census made by IBGE, in 2010. This survey was carried out with people who have difficulty seeing, hearing, walking or climbing stairs and have some mental/intellectual disability.
According to this census we have in Brazil 18.8% of the population with some difficulty to see. So what are the tips for them? Let’s see what our friend and tester “Luke” needs.
Luke is blind, and he was navigating on our page with a screen reader and didn’t understand the message we wanted to transmit. Basically the problem was that we forget to put legends in the images that give sense to the content. So if our page has some image or picture that has a function to transmit something, it should have a legend.
He mentioned a text from WAI page for us just to remember how import texts are for people with disabilities:
“Other people need to perceive content through multiple senses, such as someone with dyslexia who may need to hear and see the text to understand it better.”
However, Luke keeped testing. We explained to him that this page is about our t-shirt store. He said for the team that the things look in the wrong place. For him it is illogical to have a checkbox in a form where he pressess space and nothing happens. The truthy is that a new option appeared above that checkbox, but the screen reader followed the sequence up to down, so this checkbox didn’t mean anything in Luke’s context. The goal was to filter the items in the screen. Embarrassing… But.
Finally Luke is the section where he is trying to find the ideal t-shirt. He knows that the t-shirt probably has some reference to star-wars, but he has no idea the color and style of that one, because the only description we presented to him was something like: “Star wars t-shirt”. He feels a little uncomfortable buying something that he doesn’t know exactly the details of. Good descriptions are very important in this case.
Well, his mission is to test this store. So he pressed the “buy” button and followed the delivery form. There was an input where no label was presented. He didn’t know what that input did because some placeholders are not readed by the screen reader. The team explained that he needs to type the zipcode there. And now? That was not a send button. Press enter would be enough but the system did not inform it. The screen below appeared in the screen reader:
Luke pressed the tab and the screen reader said: “Frete 1”. He pressed the tab again and now it said: “$ 32.30”. Another time he pressed tab and the information was: “Escolher / Choose”. For the last time he pressed the tab and the screen reader said: “Frete 2”. Well, the choice was about which option? Above or below? If the text was “Choose frete 1” would be nice.
Well, after Luke testing the software we promised him we would change these things for his experience to be improved.
The Jefferson’s difficulties — Low vision and color blindness
It’s time to Jefferson test our virtual store. He has low vision disabilities and he is color blind. Different from Luke, he can use the computer without any screen reader, but zoom is essential for him.
Jefferson started his tests on our page and had problems seeing the font, for him it was too small. He tried the zoom, but the page was completely broken. We probably used pixels for everything, and not looked by units like “em”. Even with the font-size bigger, Jefferson felt the contrast very problematic. He said for us to keep the pattern from WCAG (Web Content Accessibility Guidelines), that belongs to WAI. To help us a little more, he sent this links of free tools to check the contrast:
- https://webaim.org/resources/contrastchecker/
- https://contrastchecker.com/
- https://contrastchecker.online/
Even though he had difficulties reading the texts, he keeped testing the system for us. He started to test in the form of new customers. He completed the form, but when he clicked on the “Register” button nothing happened. We told him: “The invalid fields are involved with a red line! It’s so obvious”. And he remembered us that he was color blind. Yes, it was embarrassing. We should remember that information with only colors are not recommended.
Motor disability — Peter’s case
Motor disability and deafness disabilities are the second place in our list, representing 12.1% of brazilian population. The tips we need to watch here are in writing and controls by keyboard.
Peter only accesses the computer by keyboard or special hardware that helps to improve the experience. But at the moment he only has a keyboard. Unfortunately he has difficulties using the mouse.
He was using the system and reported some difficulties for us, check below the list Peter wrote for us:
1 — When I press on the “esc” the modals don’t close. I tried with the tab to get the “x” in the top right corner. But it was not a button, only an icon. Icons itself has no focus. Finally I used my mouse but my problem turned out to be very difficult, the “x” icon doesn’t have the borders of a button so I needed to really click exactly upon the “x”.
2 — I found some areas that were only accessible using the mouse. When these areas are too small it is complicated to click.
3 — I was checking a table and in a column, the content was incomplete. To see the full information was required to drag the line of column. Well, I can’t do that.
Are you taking the notes of all these?
Deafness — Clara’s difficulties
Representing the women Clara tested our system too. She is not completely literate in portuguese, because her first language is Libras. Unfortunately to feel included she needed to start to learn portuguese.
Texts, pictures, graphs and icons are very important for her. Look what she wrote for us about it and take your conclusions:
“Hi, I thank you for putting a magnifying glass on the side of the search input. Some words in portuguese are confusing for me for a while.”
But she found some difficulties with long texts and sent us this link. It is an interpreter that can read the screen for her. It is not perfect but in moments where the portuguese is very confusing it can help a little. This option is free, but there are other options available.
She said that simple words are better than complex texts. Generally when the web site has long and complex words she doesn’t understand. It’s better when the text goes directly to the point and not use idioms like “cost an arm and a leg”. For Libras there are different idioms so it’s better to forget this kind of language when you are trying to pass a clear message. Including, the same recommendation is valid for dyslexia and autism.
Notes about autism
The mental disabilities and disturbies are many. It is not possible in a simple text to involve all of them. But about the behavioral syndrome of autism I have some tips. You can read and understand more about it in this booklet.
There is a famous video you can find clicking here. It is about a simple walk in a mall of an autist child with his mom. I think it is a good introduction.
We can help people with autism with simple attitudes on our web page. An important thing is not to choose strong colors, it may be uncomfortable for them. Keep the page simple without too much information and colors can help whatever one to keep the focus on what is important. Images and pictures can help. Sure you should attempt to use an acceptable quantity of images.
Patterns are important. If you have links and more than one page being part of your system, watch if these pages have a pattern context. Use the same components to do similar things around the pages.
It does not take away the characteristics of the elements. The links always have an underline and there is a button with a border and so on. In contrast, the buttons always have a similar shape. You can make your interventions to make the system beautiful, but never let the characteristics that define the elements get lost.
I left here a reference of a style guide to help you understand what I mean with the word “Patterns”.
Conclusion
Sure that this is a practical summary about web accessibility, and it is not possible to cover all problems. But I know these tips will help you design a system much more accessible or touch you about problems we don’t think in our routine.
The next step for us is to see deeply. It’s time to learn how to download and install a screen reader to help the tests, look techniques to improve the accessibility and see rules and materials we should follow.
See you soon! =D #everyOneShouldBeAbleToUseOurProducts.
