Aeturnum
Published in

Aeturnum

Accessibility 101

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.

https://www.who.int/disabilities/infographic/en/

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

  1. Increase the positive image of the product
  2. Improve usability and Search engine optimization (SEO)
  3. Cater to market for people with disabilities
  4. Helps the product reach people without disabilities in different situations
  5. High quality and flexible application
  6. Avoid discrimination and legal complications

Following are some of the legal acts by various governments

  1. United States: Americans with Disabilities Act (ADA)- 1990
  2. United Kingdom: Disability Discrimination Act — 1995
  3. Australia: Disability Discrimination Act — 1992
  4. 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

WCAG Principles

https://itss.d.umn.edu/articles/wcag-principles

Following are some of the key areas we need to focus on when we are following WCAG principles

To Make a Website More Perceivable

  1. Add descriptive alternative text to images. (How it reads from Screen readers )

How to add an alt Attribute to image

  1. Give users the ability to resize text, button, links without breaking layout.
  2. 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

  1. Make all functionality easily available from a keyboard.
  2. Avoid quick-moving banners.
  3. 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

  1. Improve the readability of text-based content
  2. Fields should have labels that are always present
  3. Provide success feedback when data is submitted successfully
  4. Help users avoid and correct mistakes by offering input assistance.
  5. Include form validation that clearly explains what users should enter into fields.

To Make a Website More Robust

  1. Following web development standards will help you maximize the site’s compatibility with assistive technologies.
  2. A standards-based website with clean code will offer a more robust experience across a wider array of devices and platforms
  3. This is mainly to verify the website’s working well across platforms, browsers, devices, screen readers … etc.

Web Accessibility

In order to test the web contents accessibility, there are various tools are available such as,

  1. Achecker
  2. The Wave
  3. AXE Accessibility
  4. Google Audit

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,

  1. Contrast Errors
  2. Noscript elements
  3. 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

https://axe.deque.com/record/ba1aaf7a-9935-11ea-9df4-c74fa9a8d7be

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

Mobile Accessibility

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

Android accessibility features can be enabled on Android devices through Settings → Accessibility.

TalkBack

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

SettingsAccessibilityTalkBack 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.

  1. 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.

Basic Gestures

There are other features can be used in Android to increase the accessibility such as,

Switch access

The device is controlled by a configurable key combination along with an external keyboard.

Magnification gestures

After enabling this feature in the mobile device allows zooming in and out by triple tapping the screen.

Grayscale view

This is an incredible feature that helps visually impaired users including color blind make it easier to read the display.

iOS Accessibility

iOS accessibility features can be enabled on iOS devices through

Settings → General → Accessibility

VoiceOver

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)

Basic Gestures

There are other features can be used in iOS to increase the accessibility such as,

Zoom

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.

Invert Colors

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

Grayscale

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store