Skip to Content

Category: Web Accessibility

Digital Accessibility – what Non-profit, Corporate and Education sector can do?

December 27, 2016 • Srinivasu Chakravarthula

This is a presentation I have made at a panel discussion held on 19th December, 2016 at Indian Institute of Management, Bangalore.

Slides

Full Text

Thank you for having me here. Good to see many of my old friends!

Firstly, let’s celebrate the passage of The Rights of Persons with Disabilities Bill; although it’s not very perfect bill, I’m hopeful, with all of our collective efforts, India will be better than before; there are plenty of opportunities that we can work with. While I’m not so happy that bill does not talk about equal opportunities for education in private sector school and few such things, I’m happy that this bill has included Accessibility and mostly in line with The UN Convention on Rights of Persons with Disabilities. Let’s hope for good implementation and see India becomes more inclusive.

So for next about 10015 minutes, we will be discussing about how Non-profits, corporates and education sector can do to promote digital accessibility. I limit my topic and discussion to Digital Accessibility because I have some amount of knowledge in this area and I absolutely not fit to talk about infrastructure accessibility etc.,

What Corporate can do?

Mindset Firstly we need to set our mindset; as one of my friends Subramanyan Murali says “Fixing the mindset is important”; by having mindset to build accessible products will ensure us that our products will be almost inclusive. Because, when we have mindset, we start thinking about diverse users and then thinking goes towards understanding standards etc.,

Have Accessibility as part of product road map and plan We do not prioritize things unless it is in our plan / road map. Having it as part of product planning will enable us to allocate required time.Often we hear that people what they did not have time to address accessibility, but do they have in their agenda? I keep repeating this in almost every presentation of mine that (not only me, any accessibility advocate) – the early consider accessibility, the better for you. It will be less expensive, can be achieved with less effort if accessibility is considered right at the planning stage.

Have PM led accessibility Because PM is the one who would have full visibility to timelines, product planning cycle etc., He or she would be able to fit in required amount of time to ensure product is accessible. Usually PMs are powerful and can made decisions; so their intervention is critical. Often we hear from developers that I’m OK to make it accessible, but my PM does not give me enough time; while the truth is why not did he or she written code that is accessible? So if PMs could own accessibility, they will have opportunity to discuss in regular meetings.

Have Strategy One needs to have a strategy how to address accessibility for legacy, current and future products. It’s not easy to make all legacy products accessible; but a plan and strategy could help to some extent. I’ll be doing a full talk on this at CSUN Conference in 2017; but will be happy to discuss with anyone who are interested in this topic.

Enable Developers and QA Ensure right training is provided for developers and QA. It’s important teams have knowledge about accessibility standards and techniques to build accessible products. They should also know that accessibility is not a rocket science and it’s more about writing semantic code and using the right techniques.

Raise Awareness Whether we like it or not, still there is not really enough awareness about accessibility in the industry. If you believe in accessibility, talk about it within your company and outside. Raise awareness, let people know the impact of accessibility, address myths that people have about accessibility.

What Non-profits can do?

Sensitize community: You could be the voice for many people that serve. Put in efforts to sensitize community about the needs of your people; may it be people with disabilities, elderly etc., In fact, Non profits can create a lot more impact than corporate organizations. But do it in right way. Specially when you are talking about accessibility, think of cross users and not only the section of people that you deal with.

Review and reach out: Review websites / apps as per accessibility standards and share feedback with respective product owners and then follow-up with them. Make it as your project. This is what my colleague Rakesh and I do on our websites.

Last step: Legal approach: After all of your social efforts, if nothing works out, work with courts to approach product owners in legal way. But all of the legal steps should be as a last option. Do not ever start with legal approach.

What education sector can do?

Education sector plays a critical role. Often when I see an inaccessible application, I do not blame developer, but blame the institution who tought them how to code. Most of the institutions do not teach concepts of usability, standards and accessibility. So if you are an education institution, include usability, standards and accessibility as part of your curriculum. Build ability to think from cross user prospective.

Thank you all!

Idea to spread awareness about Accessibility to mark International Day of Persons with Disabilities

October 24, 2016 • Srinivasu Chakravarthula

As you all know 3rd December is marked as International Day of Persons with Disabilities and a lot of activities around the world. Here are some ideas to raise awareness about disability and accessibility.

Mini Accessibility Showcase

: We can create mini accessibility showcase absolutely at no cost but will have a great impact. Here is the list of activities and set up:

  • Experience a screen reader:
    • Install NVDA Screen reader a free and open source software on Windows and let users browse website by turning off the monitor. Here is an article by WebAIM on how to evaluate a web page using NVDA Screen Reader
    • Mac users can turn on VoiceOver by pressing CMD+F5; when you turn on for the first time, it will display a dialog for training; press “V” key to continue. (Press CMD+F5 again to turn off VoiceOver). Read Chapter 6: Browsing the internet – an Apple guide
    • Use Screen reader on iOS: VoiceOver comes with all iOS devices (iPhone, iPod Touch, iPad) turn on from Settings -> General -> Accessibility -> voiceOver. When VoiceOver is ON, swipe / single tab will announce the app / option focused and double tapping will activate the same. Read VoiceOver guide on Apple website
    • Use Screen reader on Android phone: Android devices comes with a screen reader known as Talk Back. This can be activated from Settings -> Accessibility -> TalkBack. Similar to iOS, talk back announce app name / option by single tap and double tapping with activate. Off late, there is significant improvement in Talkback. Visit Talk Back Help page
  • No Mouse: Ask users to pick one of their favourite website that they usually love browsing (not Google.com please!!), and ask them to use it for a few minutes (may be 15-20 minutes) without touching mouse. It would be fun to visit some airline websites and try to search for flights (force them to use calendar picker!!).
  • No sound: Play a video by turning off audio. Pick a video that has captions. First time, turn off captions and then play sae video with captions; this will help users understand how captions are important for people with hearing impairment.
  • Using on-screen keyboard: From Windows Ease of Access Centre, Enable On-screen keyboard and ask users to type a couple of paragraph only using on-screen keyboard with mouse; this will help users understand how people who cannot use physical keyboard would type
  • Using voice recognition: This is a bit tricky on windows but easy on iOS and Android (now on OS X too!). Most of the users would know about Siri on iOS and OK Google on Android. Ask users to open a messaging app and dictate a message either using Siri or OK Google; this will show them how people who can’t use hands would rely on voice recognition software to dictate to computer.

Visit Ability Cube by Ted Drake for great set of set up ideas.

Test websites for accessibility and report

Pick your favourite website, do a testing for accessibility using automated tools such as aXe by Deque or WAVE by WebAIM. Once you are done with testing, either do a blog post or create a readable report; remember your post / report should consist of good practices that went into the website along with accessibility findings. It’s only when there is a positiveness in the post / report, it gets attention. Please visit our resources section for checklists and other documents.

Host a talk

If you are an accessibility professional or a person with knowledge of accessibility, do host a talk on a topic that would interest your target audience. Be sure to make your talk itself inclusive. It would also be cool to invite an inspiring accessibility professional for your session. If you have such a person nearby, do the event in person or host a virtual event.

If you have any other ideas, feel free to share via comments section or by emailing to reachus@serveominclusion.com and we will add them to this post.

Good luck,

Accessibility status of state government websites in India

July 18, 2016 • Srinivasu Chakravarthula

Today, it’s heartening to see there is so much momentum going on to make India inclusive, I thought, it’s important that websites of all state governments are accessible. As I am a believer that inclusion happens when there is awareness created among the stakeholders. So I have done a quick accessibility test using aXe extension for Mozilla Firefox. This test was run only on Home pages of each state government website and below are the results both in the form of a chart and a table. Data is made available in the form of table as well to make sure that results are available in case chart is not accessible to assistive technologies.

Gujarat Government’s website is found hosted on .com domain instead of .gov.in and reason is unknown.

Results as a Chart

Results as a Table

State Accessibility Failures
Andhra Pradesh 41
Arunachal Pradesh 59
Assam 27
Bihar 2
Chattisgarh 1
Goa 37
Gujarat 23
Haryana 131
Himachal Pradesh 19
Jammu and Kashmir 27
Jharkhand 24
Karnataka 2
Kerala 26
Madhya Pradesh 8
Maharastra 6
Manipur 44
Meghalaya 1
Mizoram 14
Nagaland 43
Odisha 76
Punjab 35
Rajasthan 52
Sikkim 23
Tamil Nadu 7
Telangana 79
Tripura 23
Uttar Pradesh 37
Uttarakhand 12
West Bengal Unavailable

Website of West Bengal state did not get loaded.

Future posts may talk about frequently seen issues across these websites.

Should websites include Accessibility Options? May be and may be not…

June 3, 2016 • Srinivasu Chakravarthula

In 2013, posted about Accessibility options and Browser Accessibility options and still I see concept of including accessibility is still exist in the minds of web authors. So wanted to reiterate as to why we do not recommend accessibility options embed on to the website.

I still agree that having such options like Increase Font size, decrease font size, change contrast icons may be helpful but for only a few users and not to many. Some of the problems occurs by using these options are:

  • Increases development cost: Specially for options like Change contrast, it involves writing additional style sheets and that’s a huge investment. Also one needs to worry about things like what happens to images when contrast is changed, etc.,?
  • Less usage: When user comes to a website, it means he or she already have some assistive tools that meets their requirement. So they can continue to use their own tools and technologies and really do not use options provided in the website

What could be done instead is to add information about Braower’s accessibility support, information about assistive technology, what’s the accessbility care taken in the website such as keyboard functionality, etc., in a help page.

Bottom line is let’s invest efforts on where actually needed and avoid unnecessary efforts!

Categories: Accessibility Tips

Summary of Global Accessibility Awareness Day

May 23, 2016 • Srinivasu Chakravarthula

We have posted a few posts to mark Global Accessibility Awareness Day and we continue to put in efforts to raise awareness about accessibility. Besides, here is a quick Summary of Global Accessibility Awareness Day.

At Informatica
Informatica has hosted an internal awareness event to its employees. Event includes a presentation on accessibility in general and accessibility at Informatica, an activity to show simpulation of people with disabilities, an activity of how keyboard only users can use the technologies.

At Mitra Jyothi
Prakat Solutions, Mitra Jyothi Rotary Club of Koramangala has organized an event consist of a video screening and 2 panel discussions. Below is a note put together post the event.

19th, May, 2016
Mitra Jyothi Auditorium, HSR Layout, Bangalore

Setting the stage:
The GAAD, a collaborative effort of Mitra Jyothi, Prakat Solutions and Rotary Koramangala was a day that saw a culmination of voices, thoughts, approaches and solutions and an increased awareness of challenges faced by people with disabilities (PWD). A video that brought to us the perspectives of various PWD and their challenges was followed by a panel discussion in two parts where eminent panelists from diverse backgrounds spoke about the various approaches, challenges and stories of innovative solutions in the field of Accessibility.

The event opened with the lighting of lamp by Major Singh and Madam Uma of Mitra Jyothi. Following this, the tone of the event was set by Ms. Madhu Singhal, Founder of Mitra Jyothi, by stressing that Accessibility is not something achievable by a few, but each person has to play their part to make it a reality.

Mrs. Anuradha Biswas, Founder of Prakat Solutions, gave us the background behind the GAAD: The idea of a GAAD started with a single blog post written by a Los Angeles-based web developer, Joe Devon. Jennison Asuncion, an Accessibility professional from Toronto discovered Joe’s blog post purely by accident thanks to Twitter. After reading it, he immediately contacted Joe and they joined forces, leveraging their extensive and respective networks to realize the event.
She invited the audience to put on their thinking hats and pitch in with ideas, thoughts and questions.
The diverse audience comprised of several professionals from Intuit, Oracle, Wipro, IBM etc., developers, designers and testers, besides people with disabilities and those from NGOs.

GAAD video presentation:
The session began with an eye-opening video that educated and sensitized us about what accessibility is and why there is such a pressing need for it by bringing to us the perspectives of people who faced several different types of disabilities. They spoke about the challenges they face as they navigate the digital world- something that we take entirely for granted.
The statistics are actually quite shocking- 9 out of 10 websites are not accessible. A large number if services and products online are not available to PWD due to the lack of awareness on the part of corporates, developers, designers etc. We also got a peek into the various types of assistive technologies and the many tools available to compensate for any limitations a user may have.

Panel discussion:
Panel 1

The panel discussion happened in two parts, the first one was moderated by Anu Biswas, Founder & CEO, Prakat Solutions who was joined by Madhu Singhal, Founder & Managing Trustee, Mitra Jyothi, Vishwajit Aklecha, Product Architect behind Intuit’s QuickBooks and Srinivasu Chakravarthula, Lead Accessibility Consultant, Informatica.

Srinivasu, spoke about the two types of enterprises, based on their approach to accessibility- the proactive and the reactive. The proactive take initiative and make their products and services accessible, (perhaps because the leadership is passionate about the cause) while the reactive come to understand the importance of accessibility either through a lawsuit or the threat of one. He gave the example of Apple, which although started out as reactive, pledged to incorporate accessibility into the design of every Apple device thereafter, and indeed, today we see that every Apple device comes with a complete accessibility suite. He stressed that awareness and sensitization could convert the reactive to become proactive.
It is important to focus on accessibility earlier on in the process. This would be much easier and cost effective than the alternative approach of converting existing products phase-wise, to make them accessible.
Another important aspect he highlighted was the fact that awareness about accessibility should also come to developers through education and training.

Vishwajit, answering the question as to what could influence product companies to integrate accessibility into their processes and design, shared the story of Quickbooks, an accounting ecosystem by Intuit. When he heard from visually challenged individuals who were using the software and said that they could not even select the date on the software, that is when he started the initiative to test the accessibility of the product and partnered with the visually challenged in making the tool accessible. This initiative was made possible by convincing stakeholders that it is not always about the numbers. And sure enough, the next release of QuickBooks in 2013, met a lot of appreciation for being accessible and inclusive. He said that this brought a lot of hope and motivation for users.

Madhuji, who has been an inspiration for the founders at Prakat, spoke about how any design should take accessibility into account in the earlier stages. She pointed out that many designs that meant to be accessible are not actually so in practice. She gave the example of a cane for the visually challenged that she had recently come across that was so heavy that it was not at all practical!
She highlighted simple examples from her own life- how when she gets an invite to an event in .jpeg format, she has to wait for a sighted person to show up and read the details to her. If I could only do my own work without depending on others, that would make me so happy, she said. Roads, public transport and the lack of accessible toilets, all pose safety threats and hinder the everyday lives of people with disabilities. She stressed on the importance of persisting and continuing to highlight issues to the Government and to technology professionals who would be able to bring about a change.

Petition to make Karnataka Govt. websites accessible:
Abhik Biswas, President, Rotary Koramangala and Co-founder and Principal, Tech & Dev, Prakat Solutions, gave us a brief introduction to the work done by Rotary and their collaborative effort with the government and other organizations in virtually eradicating polio.
He spoke about Prakat’s initiative, a report on the state of 105 Karnataka Government websites. The report found that only eight of them were accessible. He invited the members of the audience to sign the petition to the Karnataka Government to make their websites accessible and also bring a surveillance mechanism in place to keep the sites honest and accessible to all.

Panel 2:
The second part of the panel discussion was moderated by Abhik and joined by Ms. Shanthi Raghavan, CEO, Enable India, Dr. Nandakumar Ramakrishnan, Ebay and Abhinav Kumar, Managing Consultant, Wipro.

Abhinav shared the story of Wipro’s Accessibility practice, which involved making wipro.com, and all of its internal applications used by 170,000+ employees worldwide, completely accessible. He spoke about their initiative of forming a forum for employees with special needs where they can voice their perspectives. People highlighted all sorts of challenges, for example, one visually challenged person highlighted that the even to view details on something as confidential as their payslips, they would need the help of a sighted colleague.

Shanti gave several examples to her point that features designed for the benefit of people with disabilities do in fact end up benefiting everyone. The vibrate mode on phones, subtitles for audiovisuals, etc., initially designed for the hearing impaired have become universally useful today. Most importantly, she gave us two cases of accessibility innovations that helped not just the visually challenged but also the society at large. 1. Car dealerships facing high attrition in their after sales support teams, made their internal applications accessible to leverage over one lakh potential candidates who were visually challenged. Not only did the visually challenged benefit from the employment, but so did the car dealership. 2. After analyzing jobs that could be available for visually challenged in SBI, it was found that they could take on the role of Passbook printing. The only change the bank needed to make was add the account number in barcode format on passbooks, which benefited not just the visually challenged but also ensured error free number entry for other employees.

Dr. Nandakumar spoke about the importance of ‘left-shifting’ our accessibility practice, that is to incorporate accessibility earlier in the lifecycle. A simple observation he made was that we rarely go to banks these days due to the advent of online and mobile banking. But in some decades, when we grow old, we might face one or the other type of age related disability, which might make these modes of banking inaccessible to us. It would not be possible to invest in changing decades’ of code then. He stressed that enabling accessibility adds to cost only when it is an afterthought, not when it is thought of in the initial stages of product design. He also spoke of the need to make innovations in accessibility open source, as they would benefit the entire community.

Inclusive Design 24
The Paciello Group has hosted wonderful series of 24 talks under the banner of “http://www.inclusivedesign24.org/”>Inclusive Design 24 and More about Inclusive Design 24:

Inclusive Design 24 celebrates efforts worldwide to ensure people with disabilities have full and equal access to the web. We invite you to join the celebration and connect with the accessibility community, and learn your role in moving accessibility forward. Together we can take great strides toward making a web for everyone.

To celebrate Global Accessibility Awareness Day, The Paciello Group will be holding 24 completely free one-hour webinars on all things accessibility. The sessions range from beginner-to-advanced and are aimed at everyone from executives to web developers.

Missed the session? Replay from The Paciello Group’s YouTube Channel:

At Apple There were a lot of events happened at Apple to mark Global Accessibility Awareness Day. Visit iMore page for details

NewzHook has run a campaign on Facebook called #IAmForInclusion.

Deque and NASSCOM Foundation teamed up and hosted an event at T-Labs, Hyderabad that includes talks, demos of accessibility testing tools etc.,

There were many more events around the world. Visit In-person events page of GAAD website to learn about other events.

From Twitter #GAAD

Categories: Accessibility News, Web Accessibility Tags:

Colours with Good Contrast – Accessibility Tips

May 19, 2016 • Srinivasu Chakravarthula

Today colours play a big role in design. It’s important to ensure that there is sufficient contrast between foreground and background. For regular text, there should be minimum ratio of 4.5:1. Be especially careful while dealing with light color shades of gray, orange and yellow

WCAG Success Criteria: 1.4.3 Contrast (minimum) Level AA

Exceptions

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Tools to analyze

Choose right and neat colours!

Categories: Accessibility Tips Tags: , ,

Heading Structure – Accessibility Tips

May 18, 2016 • Srinivasu Chakravarthula

Right heading structure improves user experience and provide easy access to content. It’s essential to mark up using real HTML heading mark-up and not just styling as headings. Often times some developers make text bold, increase font size for headings instead using real HTML mark-up.

Why is it essential to use real heading mark-up?

  • When styles are turned off, they still have to look like headings
  • Screen readers such as NVDA, rely on mark-up to expose information to users. If headings are not marked-up using real HTML, they will be treated as plain text
  • When HTML heading attributes are used, screen reader users can skim read the content
  • Search engines look up for headings to retrieve relevant content to users

things to remember while designing headings

  • Ensure that heading levels are not skipped
  • Ensure that page must have at least one <h1>

Related WCAG Success Criteria

  • 1.3.1 Info & Relationships Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
  • 2.4.1 Bypass Blocks A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
  • 2.4.6 Headings and labels Headings and labels describe topic or purpose. (Level AA)
  • 2.4.10 Section headings – Section headings are used to organize the content. (Level AAA)

How to test?

  • Use WAVE by WebAIM and look for structured elements
  • If you are using NVDA screen reader, Press Insert + F7 which brings up elements dialog and look for Headings

Build structured contnet!

Categories: Web Accessibility Tags: , , ,

W3C’s WAI Calls for Review of Web Accessibility Perspectives videos

May 18, 2016 • Srinivasu Chakravarthula

We all know it’s challenging to raise awareness about accessibility. Some people get inspired and covert but many still resist keeping myths in mind. As it’s is known that injecting myth is far more easier than injecting truth and reality.

Education and Outreach Working Group of World Wide Web Consortium (W3C) has recently put together a few wonderful videos on Web Accessibility Perspectives. Videos are precise, simple to understand, accessible and captioned.

Each resource page has Video, information about the feature, who depends on the feature, additional benefits, what needs to happen for feature to work, related links including accessibility principle, getting started tutorial, easy check, user story, Success Criteria of WCAG 2.0, User story and a tutorial.

This would be perfect resource to use during your event on the occasion of Global Accessibility Awareness Day.

Below are the list of videos available:

Should you wish to help improving this resource may write to publicly archived list at wai-eo-editors[at]w3[dot]org or Create a issue on Github (requires GitHub account

Accessibility Resources for Developers

May 12, 2016 • Srinivasu Chakravarthula

While we add content to our a11y resources page, to mark Global Accessibility Awareness Day, here is a quick list of some cool resources for Developers.

Categories: Web Accessibility Tags: , ,

Accessibility Review: HDFC NetBanking – Adding new Beneficiary

April 29, 2016 • Srinivasu Chakravarthula

Today, let’s look at Add Beneficiary section of HDFC Bank.

Please note that this test has been carried out using Mozilla Firefox and NVDA a Free and Open Source Screen reader

On Home page, combo box that has NetBanking, Prepaid / Forex Card, Verified by Visa, Credit Cards, Forgot password, Register options does not get focused in tab order but available when using up arrow from Login graphic link.

Once “Login” is activated, a new window gets opened which actually handle rest of the transactions. It would be useful to inform user that “Login” link opens in a new window.

Below are list of issues identified through Add beneficiary page:

WCAG Check Point Issue Recommendation
1.3.1 Info and Relationships Label for Edit field to enter Customer ID is not programmatically associated with its visible label Associate input field with its visible using <for> and <id> attributes
1.1.1 Non-text elements (Active images) Retrieve customer ID image link has an empty alt value thus ignored by screen reader Replace empty alt value with appropriate alt text such as “Retrieve Customer ID” etc.,
1.3.1 Info and relationships Table mark up is used to control the layout; this render unnecessary layout information to screen reader users Use CSS to control layout. It’s easy from portal maintenance prospective too
1.3.1 Info and Relationships (forms) Screen that appears after providing customer ID has following form related issues:

  • Labels for “Customer ID”, “IPIN” edit boxes do not have programmatic association
  • Labels for “virtual keyboard” and “confirm Security access icon and message” check boxes do not have programmatic association.
Associate input elements with respective labels using <for> and <id> attributes
1.3.1 Info and relationships When user is logged in, default focus moves to Account summary; while this is acceptable for portal of this kind where user needs to know the account summary, it would be worth to add heading structure to prior navigation items such as main navigation and side bar navigation or marking up with ARIA roles would be helpful Either provide appropriate headings or use ARIA roles
2.4.7 Focus visible There is no visible focus indicator across the portal; thus users especially those with low vision or cognitive would not know where they are navigating through on the page Either provide a visible focus indicator or ensure browser’s default focus indicator is not override
4.1.2 Name, Role and Value Side navigation contents such as Accounts, Transact, Enquire etc., appears and functions like menus but marked up as links Add menu roles and also ensure state of menus viz. expanded / collapsed is exposed to assistive technologies
1.3.1 Info and Relationships (forms) None of the input fields have associated form labels Associated labels with respective input fields using <for> and <id> attributes
3.3.2 Error identification When form is submitted with no data, user has shown usual process information and not error validation result Show usual process information only when all required fields are filled in

This is not a complete review of the flow but should help HDFC as a first step to make their digital experience accessible.

This post is part of series of reviews to mark Global Accessibility Awareness Day