We consume the information from the internet where in 2019 we had 4.4 billion active internet users. As designers we design numerous of products but we definitely don’t think of designing with web accessibility in mind which creates inclusive flow of information to all the kind of users.
Here we will learn how we can design digital products which are universally accessible to the users with visual, auditory, motor and cognitive disorder. It is not only about those who can’t see or can’t hear or any other specific category of disability. We can make positive impact on the lives of people by making web accessible to them.
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
- Tim Berners-Lee, W3C Director and inventor of WWW
Accessibility
Digital Accessibility is about designing and developing digital products for all kinds of people, taking into consideration the differences and limitations of various users. To design for accessibility also means to be inclusive to the needs of our users. This may include our target users and users outside our target demographic, user with disabilities and even cross culture. Understanding those need is a key for baking more accessible experiences for them.
Let us be clear about how accessibility is important with an example. A few years ago Nike introduced new color-on-color uniforms to celebrate the 50th anniversary league’s TV game shown in color? Ironically enough, the red-on-green combination used in the Jets versus Bills game was particularly bad for colorblind people, who weren’t able to distinguish between the two teams. As a result, Nike was forced to change uniforms the following season.
With the change of the colors of the players people with visual impairment can easily distinguish the players and enjoy the match.
“Accessibility is solved at the design stage.”
- Daniel Na
But web accessibility focuses on creating application that are more accessible to people with disabilities. It means that application that have applied the accessibility principles can provide more accessible content.
Why Web Accessibility
The internet is a rich source of information. All sort of people of all ages uses the internet from young and old. Digital accessibility is about bringing down barriers. Audio, print, and visual media can be much more accessible and effective with the help of modern technologies and take an important step forward in providing options for those who want to be involved.
Designers should ensure equal access for all users including people with disabilities or temporary/situational limitations. Let’s consider an individual with a disability that makes it difficult to physically go to the store or shopping center. The internet enables them to still make purchases that would otherwise be difficult for users to make.
There is a need for accessible design to be addressed as in todays world we are replacing the telephone interaction with customers, employees and partners fully online through the use of digital platforms.
Principles of Accessibility
The World wide Web Consortium created the Web Accessibility Initiative (WAI), which consist of the Web Content Accessibility Guidelines (WCAG). The Web Content Accessibility Guidelines should be followed to ensure web accessibility for people with disabilities.
The main principles of creating accessible web content are:
- Perceivable: All information and user interface components on any given website must be available in ways all individuals can perceive.
- Operable: All navigation and user interface components on any given website must be operable for all individuals.
- Robust: All content on any given website must be robust enough that user agents, including assistive technologies, can interpret it.
- Understandable: All information and user interface operation must be clearly understandable for all users.
Above are the main four principles which includes a list of guidelines to ensure that principle is accomplished. A list of guidelines can be found in WCAG 2.1 here.
Accessibility Checklist
There are number of checklist we need to address to assure that what we are designing is accessible to the everyone. Some important ones are listed below:
Include text alternatives for visual content:
If there are some visual content in our application we need to add some alternative text alike description to each of our images used. They can be photography, illustration or graphs. Assistive technologies such as screen reading programs to interpret it into spoken form. The alt text is a brief sentence that describes the image clearly, not too differently from the way you’d explain the image over the phone to a friend. If you neglect to add alt text, screen readers will either skip the image altogether, or worse, read out its file name which might not make sense.
Retain text hierarchy:
The visual hierarchy is basic element to design our user interface. The hierarchy we craft should also be easily interpreted by assistive technology. No matter how big, bold or caps your title is, no machine will be able to tell that it’s a title unless you clearly specify it.
Also placing proper markup tags like h1,h2,h3,h4,h5, h6 and paragraph items, allows browsers and screen readers to navigate through your content correctly and present it to disabled users in the right order.
Using live text not flattened:
When we add copy to our design website or portfolio, we need to try to use only live text which enables screen readers to fully understand your content. No matter how beautiful your typographical piece may be. If we want it to be legible to all users, opt for live text, rather than a JPEG, PNG or any other image file. It’s necessary to include flattened text, like a logo, for example, make sure we have the same information repeated as either live text or alt text, to make it fully readable and understandable.
Choose decent colors:
Color is a key factor in any design project, picking a wrong color will ruin the design brand and overall message of your product. Proper use of colors is also a major component in the legibility of our website. Color contrast is one of the most important factors in ensuring that all elements on the page are distinguishable and clearly displayed. The WCAG recommendation is a minimal contrast ratio of 4.5 to 1 between the text color and its background color. For larger type, starting at 18 point (or a bold 14 point type), the ratio is a more lenient 3 to 1. Also we need to pick the colors which can be easily distinguished by visual impaired people.
We still can use the tools like Contrast Checker or Colorable before going with the colors.
Convey information not just color alone:
Colors need to be represented along with the information. If the tabs are active it needs to be compared with other elements not just colors. Many visually impaired users can’t perceive color accurately, or not at all. For that reason, make sure to use more than just color to convey information — from adding text, to icons or patterns — to ensure full readability. Example: For designing buttons we need to add text label so that all types of users can immediately know what they mean.
Use labels or instructions with form fields and inputs:
Most designers use just placeholder text as labels which is a biggest mistake when designing a form. Placeholder text is usually gray and has low contrast, so it’s hard to read them. Users might also forget what are they writing in a point of time. People who use screen readers usually navigate through a form using the Tab key to jump through the form controls. The <label> elements are read for each form control. Any non-label text, as placeholder text, is usually skipped over.
Help people to understand what they are writing in a form. Its best if labels dont go away when filling form also take into consideration to non-lable text. Also refer this to choose a better form not a material floating form as it has poor UX. Refer link here also read designing better forms by Markus Seyfferth here
Add alt text to all of your images:
People with low vision use screen readers and they can hear the web. There are still two ways that we can present alternative text.
- Within the
<alt>attribute of the image element. - Within context or surroundings of the image itself.
These text should reflect what is described in the image that is used, and how it matters to the story, rather than just saying something like “image” or “picture here” it’s better to describe it clearly.
Google is working on an image captioning AI that can describe photos with 94% accuracy. This model is open sourced and still in research — hopefully, we’ll start seeing it used in different products. In the meantime, we should manually provide text that describes the meaning and function of the images in our content.
Enable keyboard navigation:
There can be users who just rely on the keyboard and not a mouse. For those disabled or vision impaired users we need to add and ensure that website functionality are accessible with the keyboard (with keys such as tab, enter and also the arrows). We can easily test this yourself by trying to navigate your website without once using the mouse.
Another important tool in reinforcing keyboard navigation is the use of visual indicators. These are the thin blue outlines that appear around links or other clickable items on the webpage. They signify which page element currently has the keyboard focus, or in other words, where the user is located on the page at a given moment.
These may help users with disabilities to properly use the digital product we have designed.
Conclusion
Despite its importance many companies see accessibility as an extra burden work. But as a designer we want a usable and even desirable to users, but what about accessible? But as a designer we can address those issue to the limited extent in the process of iteration of the product.
There are many benefits to ensuring an accessible website. First and foremost, we are able to avoid legal liability. You’re also able to rest assured knowing we are catering to the large mass of audience — keeping us from missing out on a good portion of the market.
Good accessibility makes a healthy interaction between users and product which gives the ability to meet their needs at their own pace, when it is most convenient to them. The positive return on investment that comes with a strategy that makes a digital product accessible far surpasses the cost of implementing it and ultimately benefits the business itself.
— — — — — — — — — — Happy Hacking! — — — — — — — — —
