Hi everyone! in this article, we are going to discuss on basis of Accessibility Testing on mobile (Android and iOS) and web. Additionally, we will be discussing on WCAG guideline and Tool support for Accessibility.
Well… Here come the questions. What is Accessibility? and Why we need Accessibility?
Let's find out.
What is Accessibility?
Accessibility is when applications, tools, and technologies Are developed and designed to be used by EVERYONE.
This defines a user’s ability to use a product either it may be a mobile application, web application, or any electronic device which uses in day to day life.
While accessibility is different from usability, it has a clear impact on the user experience. Hence we should consider Usability + Graphic Design + Accessibility in order to provide a great user experience.
Why we need Accessibility?
The world population is almost 7.7 billion and 15% of the population, experience some form of disability. Hence, when we are developing and designing software applications we must consider those vivid types of differently-abled people.
So, If I am asking “How many people will affect from lack of Accessibility support?” What will be your answer?
Well, the short answer is, “partially everyone” because,
Exclusion can be Permanent, Temporary and Situational
What will our product gain from accessibility support
- Increase the positive image of the product
- Improve usability and Search engine optimization (SEO)
- Cater to market for people with disabilities
- Helps the product reach people without disabilities in different situations
- High quality and flexible application
- Avoid discrimination and legal complications
Following are some of the legal acts by various governments
- United States: Americans with Disabilities Act (ADA)- 1990
- United Kingdom: Disability Discrimination Act — 1995
- Australia: Disability Discrimination Act — 1992
- Ireland: Disability Act of 2005
WCAG? WHAT & WHY?
The World Wide Web Consortium (W3C) developed guidelines as part of their Web Accessibility Initiative to safeguard the accessibility of a website, called the Web Content Accessibility Guidelines (WCAG)
This is actually a set of guild lines that we should follow when we are implementing accessibility on our software applications.
There are three levels
Following are some of the key areas we need to focus on when we are following WCAG principles
To Make a Website More Perceivable
How to add an alt Attribute to image
- Give users the ability to resize text, button, links without breaking layout.
- Always add captions and transcripts to audio or video content.¹
3. Create high contrast between text and background colors.
4. Keep layouts simple.
To Make a Website More Operable
- Make all functionality easily available from a keyboard.
- Avoid quick-moving banners.
- Provide ways to help users navigate using Descriptive page titles²
4. Include breadcrumbs and other navigation components that help users easily understand where they are.
To Make a Website More Understandable
- Improve the readability of text-based content
- Fields should have labels that are always present
- Provide success feedback when data is submitted successfully
- Help users avoid and correct mistakes by offering input assistance.
- Include form validation that clearly explains what users should enter into fields.
To Make a Website More Robust
- Following web development standards will help you maximize the site’s compatibility with assistive technologies.
- A standards-based website with clean code will offer a more robust experience across a wider array of devices and platforms
- This is mainly to verify the website’s working well across platforms, browsers, devices, screen readers … etc.
In order to test the web contents accessibility, there are various tools are available such as,
Among those “The Wave” and “Axe Accessibility” are available as browser extensions too.
Overview of the Wave browser extension
This will mainly identify the issue like,
- Contrast Errors
- Noscript elements
- Null or empty alternative texts
and provide a detailed description along with the code segment.
Overview of the AXE Accessibility
Axe tool is powered by https://axe.deque.com/ and it provides a dashboard and a browser extension.
Once installed, it will appear in the developer toolbar.
Furthermore, it gives a dashboard to run guided tests
Web Accessibility screen readers
The most popular screen reader for web content accessibility is the NVDA screen reader.
Along with there are inbuild screen readers on operating systems.
EX: Windows — Windows narrator and Apple — Voice Over
At present accessibility has immensely invaded the mobile and computers. As a result, It’s inbuilt along with all smartphones and computers.
In iOS and Android, VoiceOver and TalkBack are inbuilt respectively.
Android accessibility features can be enabled on Android devices through Settings → Accessibility.
This is the pre-installed Android screen reader. When enabled, Android reads everything on the screen. In apps, this includes all buttons, images, form elements, static text, etc. In the mobile browser, this should include all web content (text, alternatives for images, links, form fields, tables, and so on).
TalkBack users include blind and low-vision users, as well as users with some cognitive or learning difficulties.
To enable TalkBack
Settings→ Accessibility →TalkBack then switch the button to On.
Basic Gestures in Android
All TalkBack gestures use one finger.
When we use two or more fingers touch or gesture goes straight to the application rather than to TalkBack.
- Explore by touch
When we enable TalkBack, this is automatically enabled. When we drag our finger over the screen describe the items under our finger.
2. Gesture navigation
We can swipe right with a single finger to move from one item to the next in sequence. Or we can swipe left to go back through this sequence. TalkBack describes items as we move focus around the screen.
Use TalkBack Gestures
TalkBack gestures let you navigate quickly on your Android device.
There are other features can be used in Android to increase the accessibility such as,
The device is controlled by a configurable key combination along with an external keyboard.
After enabling this feature in the mobile device allows zooming in and out by triple tapping the screen.
This is an incredible feature that helps visually impaired users including color blind make it easier to read the display.
iOS accessibility features can be enabled on iOS devices through
Settings → General → Accessibility
This is the pre-installed iOS screen reader. When enabled, VoiceOver reads everything on the screen. In mobile Safari, this includes all web content (text, alternatives for images, links, form fields, tables, and so on). In apps, this includes all buttons, images, form elements, static text, etc.
VoiceOver users include blind and low-vision users, as well as users with some cognitive or learning difficulties.
To enable VoiceOver
Settings → General → Accessibility → VoiceOver (or simply triple tap on the home button)
There are other features can be used in iOS to increase the accessibility such as,
After enabling this feature in the mobile device allows zooming in and out by double tapped with three fingers. Magnification can then be adjusted between 100 and 500 percent.
A high-contrast mode for users with low vision, color blindness, and sensitivity to brightness.
To enable Invert Colors, navigate to
Settings → General → Accessibility → Display Accommodations
This setting removes all color from the display, which can make it easier for
users with vision disabilities, such as color-blindness, to read the display.
To enable Grayscale,
Settings → General → Accessibility → Display Accommodations → Color Filters Accommodations
That concludes our article as well. I hope you got a picture of what we are trying to achieve. Your comments and suggestions are welcome. You may also share your experience with accessibility.
References & further readings
Accessibility Fundamentals Overview
Help improve this page The following resources provide information for getting started with accessibility: Introduction…
Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone
Help improve this page Web accessibility is essential for people with disabilities and useful for all. Learn about the…
Types of disabilities
According to the Americans with Disabilities Act (ADA), a disability is "a physical or mental impairment that…
Adding captions and subtitles to HTML5 video
In other articles we looked at how to build a cross browser video player using the HTMLMediaElement and…