Are you a frontender, digital designer or somehow related to the IT industry? And do you think that everyone should have the same access to information? If yes, then you will be interested in the two stories that I will tell you and in the measures that you can take to make information accessible to everyone.
Why Did I Write This Blogpost?
The first time I was confronted by the subject of accessibility was during a masters lecture. I had the privilege to meet Joe (fictitious name), a young man who is vision impaired. He showed us how he navigates the world wide web. I was impressed and I realised that there is a much higher percentage of impaired or partially impaired people than we are aware of.
In this blogpost I will focus only on the disabled people like Joe. They are regularly using the digital products we create, therefore if we ignore their needs we are not only losing a big amount of potential users and clients, we are also depriving them access to information and equal opportunities. However itās important to remember that accessibility doesnāt matter only to disabled people. It matters to us all. Because while accessibility focuses on people with disabilities, many accessibility requirements also improve usability for everyone else.
Why Could This Blogpost Interest You?
This blogpost is aimed at frontenders, digital designers, and people working in the IT industry in general. But also for users that could help to improve digital products by providing regular feedback. It will give you the following inputs:
- Two real stories about how disabled people use technology
- Disabled users statistics that help you āsellā accessibility to your clients
- Frontend and design good practices to improve accessibility
How Disabled People Use Technology
Being vision impaired
Sometimes we tend to forget that there are many Ā«kindsĀ» of blindness. This means we shouldnāt focus only on Joe's case, but also on our grandmotherās vision problem or even on our own. Joe needs a braille keyboard and software that simulates the human voice reading the computer screen. Maybe our grandmothers use a screen magnifier and we have contact lenses which help us to overcome this barrier.
Despite being bright and sensible, Joe is not equally respected within our society. People treat him like a less capable person, by not giving him equal opportunities. He feels left aside and he doesnāt understand why he is not treated equally. He mentioned, angry:
Ā«Everybody has some sort of handicap!Ā»
I agree with him. Just as Joe uses the tap function to browse through the websiteās information, another person may use Google Translate because they don't understand the language used on a specific website.
Being Physically Impaired
Later on in the masters we were assigned to do an interview with a disabled person and to write a report about it. My report was about a teenage girl named Anna (fictitious name) who lost her right arm in an accidental crash when she was four years old. She told me what the major barriers in her daily life are and how technology helps her. For example voice messages are a marvelous communication solution and she uses them all the time. Yet activities like driving a car or like dancing Kolo, the traditional Croatian dance, will only be possible when she gets her artificial arm.
Anna, contrary to Joe, feels well integrated and happy with her life. There are some minor things that bother her but she has been overcoming all these barriers. For example she proudly mentioned:
Ā«I even manage to dress myself faster than my cousin.Ā»
She is aware of the existing boundaries, though she relies on technology and she is looking forward to further possibilities like for example driving an automatic car.
Disabled Users Statistics That Help You āSellā Accessibility to Your Clients
Hereās a vivid example where caring about accessibility would surely augment the profitability of certain enterprises: the ecommerce industry. Think about retired or elderly people who spend their days at home, who have time and money and love browsing the internet to look for their next holiday destination or to order books in Amazon. Or think about a young deaf couple. Or think about Joe and Anna. These people are motivated users, however they need IT experts to help them overcome the digital barriers.
Ecommerce entrepreneurs rely on statistics. In Europe, according to the Labour Force Survey (European Commission-Eurostat, 2002), 10% to 15% of the population has a disability (visual, auditory, physical or cognitive). This corresponds to 50 to 75 million people in EU27. There is a strong correlation between disability and ageing ā numbers increase with demographic change. As stated in the 2005 report from the United States Census Bureau, there were approximately 54 million people with disabilities in the U.S. at that time, constituting 18.7 percent of the total population (Blogpost: Accessibility: How Many Disabled Web Users Are There?).
Do you really want to hinder millions of people from using your product? If e-shops would offer a good user experience to those people they would for sure repeat the experience and establish a long-lasting relationship with the concerned brand. This would certainly increase the conversion rate and improve sales. Not to mention the huge advantage of social integration. By not giving the same opportunities to disabled people we are possibly losing great minds, potential leaders and influencers.
Frontend and Design Good Practices to Improve Accessibility
So here are some easy and practical good practices, which can boost sales and enable more people to use digital products.
Titles
Websites should be marked by comprehensive and meaningful names. The titles should describe the corresponding content in each page. Above all, they shouldn't be the same throughout the website. Besides that, one should avoid useless phrases, like "Welcome to...".
ALT-Attributes
All images must have ALT-Attributes. The text in the ALT-Attribute should describe the image. It will be read, for example, by a screen-reader. Images without meaning must have an empty ALT-Attribute.
CSS
HTML Content shouldn't have formatting instructions. Cascaded Style Sheets (CSS) is a suitable way to define the font style and weight, the colors, the spacings etc. The content should always be readable, even if the style-sheets are deactivated. Modern browsers offer this possibility, which is used by visually impaired or color-blind people.
Relative Units of Measurement
Size specifications for spacings and principally for fonts should be defined in a relative form.
For example: %, em and rem. Absolute specifications like px, pt and cm should definitely be avoided, because in some environments (browsers and devices) when a user zooms in or out the user interface loses its proportions.
Drop-down Menus
It should be possible to command drop-down menus and similar user interface components by using only the keyboard. However, in emergency cases, it is acceptable that all pages are reached by normal links. This shouldn't of course lead to a labyrinth search.
Frames
If possible frames should be avoided, because, among many other reasons, when using screen-readers blind people easily lose their orientation.
Tables
Tables with extensive data are difficult for screen-readers to read. The summary (or longdesc) tag should be used in order to deliver a descriptive summary. Besides that, tables and cells should be labelled accordingly.
Colors
In general, high contrasts improve the readability. However they limit freedom of creativity. Certain color combinations irritate the eye. For example, the red-green combination can create problems to a colorblind person. In order to test the color combination of a design, I recommend using tools like the following:
Font
Generally, serif-fonts like Times Roman are not suitable for screens, especially if the font weight is small.
Multimedia
Video clips and films should always have a textual description. Audio documents should have a transcription. Animations should be carefully implemented and GIFs should definitely be avoided, because of people with ADHD (attention deficit hyperactivity disorder).
Scripts
If javascript is deactivated, websites should still be readable (if applicable the NOSCRIPT tag should be used).
Content Structure
In the web, more than ever, it's important to structure the content by using subtitles and sections, in order to make it more readable. For that the respective HTML Tags (z.B. h1, p etc.) can be used, which help to get screen-readers oriented. In order to test if the headings are correctly used and nested or to check the documents outline I recommend using this tool: HTML 5 Outliner
Forms and Tab Order
The tab order definition in forms should enable that the label always comes before the element that it describes. Only this way can a blind person with a screen-reader recognise the meaning of a form element.
Language
The language should always be stated in the header of a page. For example:
- html lang="de"
- meta http-equiv="content-language" content="de"
Content based on Usility Consulting
Author: Dieter Stokar
5th January 2017
My Message to You
We are constantly shaping the world wide web. Unfortunately, the majority of the time we do it based on our own assumptions or those of our clients, forgetting the receivers of our message and how diverse they can be. Disabled people are no different from people who speak another language than ours, they just are differently different from us. Disabled people are normal.
By consciously or unconsciously excluding disabled peopleās needs from our work, we are partially responsible for the loss of great minds and their contribution to our society.
Our responsibility is higher than writing lines of code or preparing the next trendy design to present our customers. We are responsible for making the world wide web accessible for all.
Many thanks to Ingvi Jonasson for his support .