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.
Good morning, we in India, always privilege to be ahead of many other countries to start celebrations of Global Accessibility Awareness Day and we can also celebrate longer than just 24 hours!
It’s amazing to see a small (but powerful) idea introduced by Joe Devon and Jennison has become a strong global moment and what could be bigger achievement than seeing 90+ events happening worldwide! Thanks to those of you celebrating either in a small or big way! Oh, you don’t know about GAAD? That’s OK, it’s still not late. you can still celebrate. Just grab one of the ideas mentioned in GAAD website (you can also browse on this website) and go with it. One of the simplest activities is “Go mouse-less”, ask your community / teams to work (or have fun) without using mouse for an hour! then share experiences of each other! That could lead to some wonderful things of your journey towards building accessible world!
Announcing accessibiilty-help Slack channel
To mark this year’s Global Accessibility Awareness Day, I’m announcing accessibility-help slack channel. I am investigating how I could post a link and let people join the channel directly but in the meanwhile, please share your email address by writing to us at email@example.com and I will be sure to add you to the channel.
Purpose of creating this channel to provide support to those who start their journey into accessibility and/or just got stuck with something. I intend to document conversation with resolutions to our Knowledge base.
Once again, happy Global Accessibility Awareness Day to everyone!
It’s that time of the year again when world celebrates the momentum of accessibility by observing Global Accessibility Awareness Day curated by Jennison and Joe back in 2012. It’s encouraging to see a lot of in-person and virtual events have been already planned.
This year, I will be posting a few things that enable people to begin their journey (those who have not started yet) and it may just become reminder to others who are already contributing their wonderful efforts to make digital world a better place!
Here is a list of 5 things that gets you started with accessibility:
Text alternative for non-text content: It’s easy; all that you need to do is provide alternate text for informative images, active images (images that are links). Ensure no informatiion is conveyed using background images (CSS images). If there are images just for decorative purpose, be sure to mark them up using null alt attribute. Read my earlier post to learn more about “alt”.
Labels for form fields: Ensure that all input fields have associated labels, all radio buttons and checkboxes are associated with their group labels.
Colour contrast: Ensure every element including text has minimum colour contrast ratio of 4.5:1 between foreground and background. You don’t have to do any manual math while choosing colours. Just use either Colour Contrast Analyzer (stand alone tool) by The Paciello Group WebAIM’s contrast checker (online tool)
Keyboard: Ensure all elements are operable using keyboard including drop-down menus, dialog, media players etc.,
Validate your code: Often, a cleaner and semantic code makes a product more accessible. Use W3C’s Validator service to verify that code written is valid and compliant with specifications.
Begin your journey with these 5 things and it will be a great beginning.
Ministry of Electronics and Information Technology has published revised Guidelines for Indian Government Websites and Apps. Ministry has published first version in January, 2009 and after 9 years, Ministry has now published second version to align with current technologies. These guidelines are adopted by Department of Administrative Reforms and public grievances, Ministry of Personnel, public grievances and pension, Government of India. Revised guidelines not only has guidelines for websites but also for mobile applications.
Following sections are related to Accessibiility:
1.8 talks about Web Accessibility
11.4 talks about Mobile Accessibility Guidelines
Compliance matrix has specific set of guidelines for accessibility both for websites and mobile applications
It’s great to see that guidelines are developed based on international standards including ISO 23026, Web Content Accessibility Guidelines 2.0, Rights of Persons with Disabilities Act 2016 (India) etc.,
Guidelines are made into three categories; i.e Mandatory, Advisory and Voluntary.
Mandatory: The usage of the term ‘MUST’ signifies requirements which can be objectively assessed and which the Departments are supposed to mandatorily comply with. It is anticipated that there will be no exceptions for a Department not complying with these. In the case of any Department, these guidelines shall apply to all the WebPages/websites under the ownership of that Department. The websites will be checked against these guidelines when audits for compliance are undertaken or for the purpose of quality certification. It is the responsibility of each Department to address and bring into compliance, any non-compliant issues found in any website under their ownership.
Advisory: The usage of the term ‘should’ refers to recommended practices or advisories that are considered highly important and desirable but for their wide scope and a degree of subjectivity these guidelines would have otherwise qualified to be mandatory. Departments are, however, expected to comply with these advisories.
Voluntary: The usage of the term ‘may’ refers to voluntary practice, which can be for Indian Government Apps & Websites
Guidelines for Indian Government Apps and Websites has adopted Web Content Accessibility Guidelines (WCAG) 2.0 and document clearly explains principles of WCAG. 2.0. With having accessibility guidelines in places, GIGAW aims to address the needs of persons with disabilities and ensure that websites and applications are compatible on all major browsers and platforms. One good thing is that accessibility guidelines are embedded into the chapters and not provided as a seperate guidelines. Advantage of doing this is less chances that users do skip these guidelines. Accessibility related guidelines can be found under following sections:
Chapter 2 (Indian Government Identity) – guidelines 2.1.6.
11th October, 2018 was fabulous day for Bangalore. Intuit hosted their 6th Annual Accessibility Summit in their Bangalore office.
Summit has began with energiser by Prarthana, Co-founder of GiftAbled. Then summit was kicked off Ted Drake, Sanket and Somnath (leadership of Intuit) India.
First talk is by Bala from Google (ex-Intuit) talked about Next billion users where he talked how “voice” become more popular as an input method. He has also explained how much important the accessibility for Google’s new billion project.
Soon after a short break, I have delivered by Inclusive Design 24 talk on Building Accessible Websites with WordPress. I have started my talk with a brief introduction to myself, a little about WordPress, reasons as to why I would prefer to use wordpress as a platform, problem statement from accessibility prospective, talked about how one should choose themes from WordPress, my favorite plug-ins and finally some thoughts an author should consider while building websites with WordPress. In case you have missed mine and/or any other Inclusive Design24 talks, head over to Inclusive Design 24’s YouTube Channel and you will be able to listen to all of the talks.
Then we left for lunch break! Food was tasty and awesome conversation with Prarthana… Oh, yes I had desert twice!! (Blame Prarthana, if it’s against rules :-))
After having great lunch, again Prarthana did another energizer to make sure all of the participants are awake and that started first afternoon session with a panel discussion on “Accessible Life Style in Tech environment” moderated by Prateek Kaul, Co-founder of GiftAbled. During this panel, Aleena from Intuit did a demo of and Android keyboard they have created and intend to open source at some point. This keyboard can be used will have a single button interface. Other panelists Hatim from Cisco and Madhumitha from Coco cola shared their experiences in their diversity and inclusion journey. Final panelist Rajarajeswari, Founder of Arteius spoke about technologies they are building in the health care sector.
Then Sunil Jain, Founder Trustee and Chief Enabler of Astha spoke about importance and accessibility in sports. He has discussed about challenges faced while entering in the area of sports. He has rightly pointed out how children of today are not getting opportunity to play sport thus unable to develop power of thinking. He urges irrespective child having disability or not, everyone should be given an opportunity to play.
Next panel is about Accessibility achievements, challenges and opportunities; again moderated by Prateek. In this panel, Basavaraju, Commissioner, Persons with Disabilities, Government of Karnataka spoke about what accessibility means to him and what role his department should play for inclusion. Other panelists are Apoorv Kulkarni, Accessibility Lead at Ola, Siddhant Shah, Founder of Access for All and Krishna Kumar, Programme Manager (Accessibility & Technology) of GiftAbled. Each of them spoke about efforts put in by each of them to ensure inclusion both for their internal employees and customers.
In the final session, Krish Srikant, VP of Customer Strategy, Prakat Solutions spoke about Autism at work: Exploring new opportunities for employment & services. He has talked about work that Prakat is doing in this area in Denver.
Whole summit was anchored by Chandrasekhar, Talent Acquisition team member of Intuit. Fabulous inclusion T-shirts and goodies were distributed. Those goodies are crafted by people with disabilities and promoted by GiftAbled.
Then we all have left for Bangalore Accessibility Awareness Dinner hosted by Intuit. It’s great to see a lot of new people this time. A fantastic networking and of course great food!
All photo credits in this post goes to Prarthana and Ted!
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
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
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.
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.
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
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
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.
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).
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.
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.
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.