Skip to main content

We write about Digital Accessibility. This includes topics related accessibility news, accessibility events, accessibility techniques, reviews of websites and applications, tips related to accessibility and in simple words all possible things about digital accessibility.

Posted in

November

2017

Updated Web Accessibility Checklist – Perceivable

Back in 2010, we have published a Quick Web Accessibility Checklist that received a good response and we have also received a good feedback. It’s true that users prefer to have a quick checklist along with large documentation to achieve their accessibility mission. So we are bringing you this updated Web Accessibility Checklist reflecting success criterions of Web Content Accessibility Guidelines (WCAG) 2.1.  Please note this checklist gets updated once again when WCAG 2.1 becomes a W3C recommendation (expected to be in 2018). Also, note that all external links on this page opens in a new window. We will be publishing this as a series of 4 posts so that it will be easy for users to refer.

Level WCAG 2.1 Success Criterion What to check for?
A 1.1.1 Non-text content
  •  All active images do have appropriate alternate text
  • All informative images do have appropriate alternate text
  • All decorative images are provided with null <alt> attribute.
  • Ensure that no informative images are used as background images. All informative images need to be in foreground and have appropriate alternate text
A 1.2.1 Audio-only and video-only (prerecorded)
  • For pre-recorded audio-only content, ensure to provide a text transcript
  • For pre-recorded video only content, ensure to provide an audio track
A 1.2.2 Captions (prerecorded) Ensure that captions are provided for all audio based content except where audio description is alternative to visual content
A 1.2.3 Audio description or media alternative (prerecorded) Ensure that audio description is provided for all prerecorded video content except where video itself is alternative to audio content
AA 1.2.4 Captions (Live) Ensure that captions are provided for live video content in synchronised manner
AA 1.2.5 Audio description (prerecorded) Ensure that audio description is provided for all prerecorded video content in synchronised media
A 1.3.1 Info & relationships
  • Has the page marked-up using semantics?
  • Page must have one first level heading using <h1>
  • Is the heading structure on the page appropriate?
  • If any content appears as a list, has it marked up using <list> attribute?
  • Has form labels associated with their input fields?
  • Are radio buttons / checkboxes associated with their group label?
  • For data tables, are data cells associated with their row / column headers?
  • Is CSS used to control the layout than using <table> mark-up?
A 1.3.2 Meaningful sequence Is the reading order meaningful from its presentation?
A 1.3.3 Sensory Characteristics Ensure that no instructions are provided in way that requires use of a specific sense of users such as using shape, color, visual location, size, orientation or sound
AA 1.3.4 Purpose of control This is a new Success Criterion and needs some interpretation to understand. This talks about personalisation of controls. While icons for different purpose may have standard icons, it’s recommended that user should be able personalise it.
A 1.4.1 Use of Colour Do not use colour as a sole means of information. Example: Normally “green” is shown to indicate success and “red” to indicate failure. While showing the same in color, it is also important to show as “text”.
A 1.4.2 Audio-control
  • Check if page any audio that plays automatically for more than 3 seconds
  • If yes, ensure that there is a mechanism to pause / stop or ability to control the volume using system’s volume control
AA 1.4.3 Contrast – Minimum Ensure that there is minimum contrast ratio of 4.5:1 for regular text between foreground and background. For large text, minimum contrast ratio should be 3:1. Incidental text such as inactive controls and logotypes do not require to have minimum ratio of contrast.
AA 1.4.4 Resize Text Ensure that user should be able to zoom in content upto 200% without use of any assistive technologies. This is not applicable for captions and images of text
AA 1.4.5 Images of text Use natural text to provide information unless it’s essential to embed text to an image. Logotype is known as essential

Re-building website on wordpress? Checklist to consider!

As you may have noticed, for a few weeks, there have been frequent changes in the design and features on our website. Yes, we have been working on to give a new look to ServeOM Inclusion’s website; and we want to continue using WordPress as our favorite authoring tool!

We love WordPress because of it’s robust, accessible and simple administrative interface. WordPress at one time was just known as a blogging platform but today, WordPress offers a lot of rich tools to build a powerful website.

When we thought of re-building our website, we have a few requirements in mind that includes:

  • Accessibility
  • Good user experience
  • Decent color combinations with good contrast
  • Professional look and feel
  • Member area pages
  • Video gallaries
  • Social integration

First thing was to choose right theme. Explored many themes but most of them including those are accessibility ready have one common problem that sub menus get expanded automatically on focus to the menu; which we did not want to happen. We have tried hard to re-engineer those menus but found it difficult. Finally Bizwhoop is one theme we found suitable to our requirements. But this free theme has limitation in choosing colors and we don’t feel comfortable with Red. Then we have decided to purchase Bizwhoop Pro. Challenge was they accept payment only via PayPal and PayPal requires to show payments in Indian rupees for customers purchasing from India. However, have received an email from their support team with an option to transfer money to their Indian account. Soon after the payment, they have sent link to download the theme. This theme is great and worth purchasing.

Here are list of things we have customised for better usability.

  • We believe content should not be displayed in uppercase letters; so we have changed <text-transform> to “none” from “uppercase”. Read UX Movement article on all caps hard for users to read
  • We believe focus indicator should be visible to users; so we have changed <outline> from “none” to “dotted”
  • We found content text colour is gray and doesn’t go well with white background; so we have changed that using the additional CSS
  • We have added WP Accessibility plugin to make the theme more accessible. But we have intentionally not chosen to have font resize and display settings
  • We have used Page restrict plugin to make a few pages visible only to registered members. Objective of using this feature is to know our users better so that we can provide better content
  • We have noticed by default theme displays only post title and featured image (if available) and not the excerpt. We had to add a php code directly into the raw file from our cPanel. Unfortunately, we haven’t found an option to change in the theme itself.

We are still exploring options to include better help desk feature for this site. Stay tuned.

Special thanks to Narsing Rao Bongurala for helping us through this journey of re-building this website. He is highly potential graphic and web designer. What we found great about him is his willingness to explore technologies and fix any complex problem. We highly recommend him to anyone who may need such services. Thanks again, Narsing.

More things to come into website in the days to come.

AirAsia provides reasonable accommodation; what can they do better?

Last weekend, we did a quick round trip to Hyderabad from Bangalore on Air Asia; here is our expereince as a family with 2 children and both of us having some disability (Hema has problem with her right hand and I’m a person with low vision).

Check-in counter staff both in Bangalore and Hyderabad are sensitive enough and arranged a personnel to assist us. However, they are not sensitized towards how and why they should be assisting us. That person was just walking ahead of us and once we found it difficult to trace him. AirAsia have announced a priority boarding but that sequence was not maintained after boarding the transit bus.

Stairs to board the aircraft are a bit strange, they are strong but some stairs are too high. It was tough for Hema to climb with an infant. When we have tweeted to Air Asia with this information, received a casual response stating “Hi there, sorry, you may contact the ground staff”; but no mention that they would look into this matter and improve accessibility of boarding. Even personnel who have escorted us to the gate did not inform staff at the boarding gate that we would need assistance. While returning from Hyderabad, check-in counter staff has mentioned, there will be someone at the boarding gate who can asist; but we could found none.

Also, we found no personnel at the ground on arrival. Overall, Air Asia seem to have “assistance” as a checklist item but training of the personnel is due.

Accessibility Collection – week of 6th November, 2017

Chrome Extensions to improve browsing experience

I was looking out for how Google Chrome can be used efficiently and during my search, came across interesting extensions to improve experience of browsing on Google Chrome. These extensions can be found on Chrome Extensions Web Store. Some of the extensions are:

  • High Contrast: Change or revert colour schemes to make the page easy to read
  • Long Description: Right click on any element that may have “longdesc” or “aria-describedat” to access the long description.
  • Caret browsing: Enable user to access the text of web page using arrow keys
  • Colour Enhancer: Applies customised colours to web page for enhance visibility
  • Notebook web clipper: This will remove all clutter and have content saved to notepad.

Kudos to Google Accessibility Team and Zohoo (for last one) for making these available.