Skip to main content

SI Blog

Upcoming Accessibility Events in Bangalore

In next few weeks, there are a series of interesting accessibility events are happening in Bangalore, India. These are some interesting events that not only brings platform to gain/share knowledge but also make a lot of friends. 

Design @ Business

This is a by invitation only event taking place on 21st September, 2018 at Informatica. While discussions are focused on design related topics, there is also one quick talk by me titled “Accessibility practice at Enterprise product companies”.  Visit Design@Business website for details. 

Bangalore Accessibility and Inclusive Design meet-up for September 2018

Image result for bangalore design for accessibility meetup

As part of initiatives to raise awareness about accessibility Prakat Solutions organizes Bangalore Accessibility and Inclusive Design meet-up once in two months.  This month event is hosted in partnership with PayPal India on 27th September, 2018. Agenda for this months event is:

  • Welcome Address by Guru Bhat, General Manager, PayPal India
  • Rights of Persons with Disabilities Act: What’s in for corporate? – Srinivasu Chakravarthula, Lead Accessibility, Informatica
  • HTML 5 API, AI and People with disabilities – Nawaz Khan, Accessibility Evangelist, PayPal
  • Accessibility and Aesthetics ByPrakash Ramamurthy, PayPal

This event is going to happen at PayPal’s new office in Bangalore. Visit Bangalore Design for Accessibility meet-up page to join the conversation.

Inclusive Design 24

Inclusive Design 24

The Paciello Group hosts fabulous accessibility talks for 24 hours on 11th October, 2018. I’ll be speaking about “Building Accessible Websites using WordPress” at 11:30 AM (Indian Standard Time). I will be speaking from Intuit Bangalore office as it falls under same day of Intuit Annual Accessibility Summit. View Schedule of #ID24

Intuit Annual Accessibility Summit

Intuit hosts accessibility summit with exiting series of activities followed by a dinner at their office in Bangalore. This event will happen on 11th October, 2018. Stay tuned for more details. 

New Success Criterion in WCAG 2.1: 2.5.1 Pointer Gestures (Level A)

Success Criterion 2.5.1: 2.5.1 Pointer Gestures (Level A): All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential.

With increase in touch devices, method of pointer gestures have become quite common. It has also become popular when users can use diverse range of gestures. 

Let’s take an example of a news app; by use of pinch, user can zoom in and zoom out the text. However, when user does not have ability to pinch, there should be alternate method of achieving the same functionality. Perhaps by using Zoom-in and Zoom-out buttons or with an option in app settings. 

That said, this success criterion does not to apply to functionality provided for the operating systems – such as swiping down to bring notification menu or functionality provided in assistive technologies; such as talk back (screen reader on Android) has its own gestures for ease of use. 

Another exception is where path based gesture is a mandatory such as drawing a signature. 

How to test?

Identify if a functionality requires use of path based gesture such as swiping, dragging or drawing. One of the examples would be “Place an order” element on Amazon app where user requires to swipe from left to right to complete the order. Another example would be zoom-in or zoom-out on maps. 

App review: 6by6 by BarrierBreak

This is another innovation in the assistive technology space from India. 6by6 By BarrierBreak has 3 amazing features to assist people with low vision and vision impairment. Here is a review of it’s 3 features and how they could help users.

  • Currency Identifier: In the recent past, In India, Reserve Bank of India has released several new currency notes and all of them are inaccessible to people with blindness. Almost all of them has same sizes and difficult to find difference. Currency identification feature comes handy in dealing with money. All that use needs to do is open 6by6 app, Tap on currency detector; this will open an in-app camera, place currency note about 4 – 5 inches away and tap anywhere on the app; this will read aloud currency. Though several lakhs of currency notes are trained to the app, it’s better to scan more than a few times to ensure accuracy. My tests show accuracy of about 85%.
  • Magnifier: Being a person with low-vision,  this is my most favourite feature. I have personally used this feature for reading menu in a restaurant, name of conference rooms at my work, signages at a bus station, labels in a retail store. One of the fabulous feature of this magnifier is that using freeze option, user can freeze a specific area of text and read at user’s comfort level. User can choose his/her desired magnification level using the slider. 
  • Light Detector: Imagine user is a person with vision impairment and checked into a hotel. How would he or she would know if lights in the room are turned-on. Light detector will assist by providing if lights are on, if there is dimmed light or bright light etc.,   

To begin with, these are great set of features and am sure, innovation at BarrierBreak continuous and more tools get added in days to come. Congratulations team and best of luck! 

Get the 6by6 app from Play Store

Prioritising Accessibility issues

I was recently asked by a friend if there are any standard rules to set priority for accessibility issues for a website and that triggered me write-in this piece. 

In general, for an accessibility tester and when we read failure statements, everything sounds important, but it’s essential to prioritize issues since not all of the issues could be addressed one go; It’s fair for product managers to prioritise the effort. 

Why is it important to prioritise?

If we do not prioritise at the time of testing, we will be either asked to do it at a later stage or product team has to work on prioritising. If product team prioritise without consultation of accessibility team, chances are more for misinterpretation of what is important and what’s not from accessibility prospective. Prioritising is important because developers may not be able to address all of the issues at one go. 

How to set priority?

To begin with, leverage of “Levels” defined in Web Content Accessibility Guidelines 2.1 since they are set as Level A (minimum), Level AA (should be achieved) and Level AAA (maximum level of compliance). This could be first consideration. 

Next consideration should be importance of the feature. This needs to be decided in consultation with business owners. Let’s if issues falls under WCAG’s Level AA but feature is very important and/or frequently used, then it should be flagged as high priority. If an issue falls under WCAG’s Level A but doesn’t really bother user’s usability, then it’s priority can be set to moderate. 

Another consideration should be effort needed to fix. Specially when accessibility practice is new in the organisation, it would be worth to have developers fix easy things first; that gives them an opportunity to taste the benefits of writing accessible code and provide them enough time to understand ways to write accessible code. Getting started with easy things will provide developers a sense of encouragement.  

In conclusion, it’s essential to prioritise Accessibility issues and should be in-line with business priorities. 

App review: Eye-D – app built for people with vision impairment but helpful to all

Imagine, if you are in a new town and would like to explore places around you. If you are sure what kind of things you would want to explore, you may just ask someone. But what if you are unsure of what you would like to visit or just want to explore things around you. In such a situation, it’s difficult to ask someone. Even if you ask, they may just tell you about a couple of things around but do not really spend time to list out everything that exist.

There comes Eye-D App handy. What’s Eye-D? Eye-D is an app (available both on Android and iOS) that helps people with vision impairment to explore places around them, take pictures using accessible camera, read text on an image etc., This is available as a Free and Pro versions.

Eye-D Free

Eye-D helps visually impaired be location aware, explore and navigate to nearby places of interest, evaluate surroundings with their smartphone camera and read printed text. Eye-D will serve as the true companion for most of your daily assistance needs.

Eye-D Pro

Read Text Offline, Access to exclusive Eye-D Market, Advanced OCR Reading multiple languages, share, save the recognised text and many more, First of its kind “Accessible Camera”, Travel Mode with sticky notification in notification drawer.

A few cool features

Where am I? This feature will let user know their current location and places around them in the tedious of 500 meters. This has solved my life-time problem since we get a lot of new shops around where we live or whenever we visit a new town, it’s easy to know what is around us.

Around me This is again a very useful feature. If we are in a new town and looking for an ATM, Bank, Hospital, Store, religious place, Cinima, food etc., just hit on Around me and select what are you looking for. It will list down places in your chosen category. Interesting thing you can select a redious that you prefer.

Travel Mode This is a great feature. Once Travel mode is activated, app keep announcing what is around as users moves on the road. User can set a frequency of announcement.

Accessible Camera A beautifully designed camera enable users with blindness to take pictures

Read text on object Imagine a user with print disability is alone at home and need to take medicine; app helps user read the medicine label.

Read Text in image This is a handy feature when there is a text embedded on to an image. This is a common in promotional and marketing content.

Below are a few screenshots of Eye-D.

Eye-D Home Screen
Advanced OCR Screen
Where am I screen
Eye-D Free Home Screen
See object in image

Advanced OcR is another interesting feature and works in multiple languages. Watch this video on how to use it.

Fabulous by this energetic team! Try out the app on Android on Play store and iOS on App Store.

WordPress tips: Inserting widget into a post or page

It’s common practice and rather easy method to add widgets to an area that a theme supports. However, there are ways to add widgets into a post or page. This would be useful for several scenarios. Something like on pages that we do not wish to have a side bar but wish to have a few widgets displayed on the page etc., Here is how we can do this.

 

  1. Download and install AMR Shortcode any widget
  2. Activate the plugin
  3. Now create widgets into side bar in the usual way
  4. Then drag widgets to a area called “Widgets for short code”
  5. Now you will notice a short code at the bottom of every widget that is added to “Widgets for short code” area.
  6. Grab that short code and place it in a page or post etc.,

We are still experimenting if we can further customize this experience by setting a custom background colour to selected widget etc.,

Accessibility inspector is now available in Firefox Developer Tools

Starting version 61, Mozilla Firefox comes with Accessibility Inspector within developer tools. However, Accessibility Inspector is not enabled by default reason being shown that as of now while accessibility inspector is turned on, users are experiencing some performance issues using other developer tools.

It would be a great friend to developers to see what information gets exposed to assistive technologies and what is missing. So that developers would know instantly what they would need to fix. Here is what is said in the announcement on .

The accessibility inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what’s missing or otherwise needs attention.

As mentioned earlier, accessibility inspector is not active by default and here is how to activate the same.

  • Open Tools menu -> Web Developer -> Inspector
  • Choose three dots button on the right side top or using F1 key; this will minimise DevTools and open help menu
  • Choose Settings
  • Under Default Developer Tools section, Check “Accessibility” checkbox.
  • Now user will see “Accessibility” in the inspector tabs with a message saying “Accessibility inspector is not active by default and causes some performance issues. Turn off Accessibility inspector before using other DevTools” with a button “Turn ON Accessibility inspector
  • Activate the button

That’s it; now Accessibility inspector is now available to use.

Features of Accessibility Inspector

Screenshot of Firefox Accessibility Inspector

On the left-hand side, there is a tree diagram representing all the items in the accessibility tree for the current page. Items with nested children have arrows that can be clicked to reveal the children, so you can move deeper into the hierarchy. Each item has two properties listed:

  • Role — the role this item has on the page (e.g., pushbutton, or footer). This can be either a default role provided by the browser, or a role given to it via a WAI-ARIA role attribute.
  • Name — the name this item has on the page. Where this comes from depends on the element; for example, the name of most text elements is simply their textContent, whereas form elements’ names are the contents of their associated <label>.

On the right-hand side, you can see further information about the currently selected item. The listed properties are as follows:

  • name — the item’s name, as described above.
  • role — the item’s role, as described above.
  • actions — a list of the actions that can be performed on the item, for example a pushbutton would have “Press” listed, while a link would have “Jump” listed.
  • value — the value of the item. This can mean different things depending on the type of item; for example, a form input (role: entry) would have a value of whatever is entered in the input, whereas a link’s value would be the URL in the corresponding <a> element’s href.
  • DOMNode — the type of DOM node that the item in the accessibility tree represents. You can click on the “target” icon that comes after it to select the node in the Page Inspector. Hovering over the “target” icon highlights the DOM node in the page content.
    DOMNode property in accessibility inspector with target icon highlighted
  • description — any further description provided on the element, usually by the content of a title attribute.
  • help — this is not implemented in Gecko, so it always returns an empty string. This will be removed from the inspector in Firefox 62 (bug 1467643).
  • keyboardShortcut — any keyboard shortcut that is available to activate the element, as specified in an accessKey attribute. Note that this works correctly as of Firefox 62 (bug 1467381).
  • childCount — the number of child items the current item has in the accessibility tree hierarchy.
  • indexInParent — an index value indicating what number child the item is, inside its parent. If the item is the first item inside its parent, it has a value of 0. If it is the second, it has a value of 1. And so on.
  • states — a list of the different accessibility-relevant states that can apply to the current item. For example, one of the links in one demo has states of focusable, linked, selectable text, opaque, enabled, and sensitive. For a full list of internal states, see Gecko states.
  • attributes — a list of all the accessibility-relevant attributes that are applied to the item. This can include style-related attributes such as margin-left and text-indent, and other useful states for accessibility information, such as draggable and level (e.g., what heading level is it, in the case of headings). For a full list of possible attributes, see Gecko object attributes.

Note: The exposed information is the same across all platforms — the inspector exposes Gecko’s accessibility tree, rather than information from the platform accessibility layer.

The Accessibility tab is fully keyboard-accessible:

  • You can tab between the Turn Off Accessibility Features button and left and right panels.
  • When one of the panels is focused, you can move the focus up and down items using the up and down arrow keys, and use the left and right arrow keys to expand and collapse expandable rows (e.g., different hierarchy levels of the accessibility tree).

In addition, a new context menu option is available to inspect accessibility inspector for an element. Read Mozilla Developer Network blog post for more details.

So dear Developers, now you have one more helping hand to consider accessibility right from the development stage.

Accessibility – a game changer: Presented at IBM

Recently I got an opportunity to present as part of Design Thinking series at IBM. Thanks to my good friend Suresh and his colleague Ajay for having invited me. Below is the deck that was presented.

Participants were pretty enthusiastic and shown a keen interest to start their journey into accessibility. We have discussed importance of accessibility, business case and a few things to care about accessibility. We have also made a few hands-on exercises such as browsing a few websites using keyboard alone, with screen reader and using assistive technologies on mobile devices.

Thanks again IBM team for having me. Good luck to your accessibility journey. Of course, for IBM this is not a beginning. they have been doing a fantastic work for many years.

Twitter for WordPress vs Accessible Twitter for WP plugins

While we are playing to re-build our website, we wanted to be sure we address accessibility to the best possible extent. Well, we are still working on it; there are still some challenges! This post is to illustrate how replacing one plugin has made a huge difference from color contrast prospective.

We always believe in using native products of a company as much as possible. So to display our our Twitter timeline, we have opted to use widget code generated by Twitter Developer Tools and added widget our side bar. When we ran aXe by Deque on our website, we found 49 colour contrast issues and 38 of them are causing from Twitter widget. It was very hard to fix all of those issues.

Then we have opted for WP Accessible Twitter Feed and though it has some less features like we cannot engage our visitors directly from website by letting them use features like Reply, Retweet, Like etc., it has solved the issues of colour contrast. One additional thing we had to do is add authentication keys in settings.

We wish Twitter’s own widgets include accessibility at some point.

Accessibility Review: IRCTC Next Generation Ticketing System portal

IRCTC (Indian Railways Catering and Tourism Corporation) has recently revamped it’s portal and good news is that users do not require to login to check availability of tickets, search trains etc., Here is a quick review from accessibility prospective.

As the site loads, a banner appears talking about 48 months of NDA government but keyboard focus does not get to this banner and remains on IRCTC home page. However, using esc key closes the banner.

Looks like semantics are used as appropriate as possible. Buttons are marked up using correct attributes and have accessible names.

IRCTC Logo, Login, Register and icons to change font size are not operable using the keyboard.

There are several links with “More info” that are not descriptive

Focus indicator is missing for several elements such as Flights, stay, cab etc.,

It’s not recommended to use upper case letters as screen readers may consider them as acronyms.

There are several color contrast issues on the page; several images do not have alternate text. This is just a very quick text to see if accessibility has taken into consideration at all when re-designing the portal. While there was attempt to improve performance, IRCTC did not really considered improving accessibility. It’s time we the accessibility enthusiasts collectively reach out to them and have them address accessibility problems.