Quite often, I receive emails from non-profit organizations asking if I can help them with accessibility testing for their newly built website. I also see most of them do not get built accessibility in mind though many of them are for organizations who offer services to people with disabilities. This post illustrate a few tips that developers can use while building a website. While we intend to see many developers have knowledge on accessibility, it’s absolutely fine to start with a willingness to build an accessible product. This post illustrates advice in the form of question and answer in reference to Web Content Accessibility Guidelines (WCAG) 2.1. This will be series of four articles to cover Perceivable, Operable, Understandable and Robust.
Question: Do you have images or any other non-text content?
Answer: When you have images, identify if they are informative images decorative images. If informative images, provide an alternate text. For decorative images, provide empty alt text i.e. alt=””; alt attribute must be present in any form of image; if not provided, path of the image gets exposed to assistive technologies such as screen reader, shown on text only browsers (or when images are turned off in the browser), shown to search engines.
Question: Do you have audio-only conent on the website?
Answer: Provide synchronized captions or text transcript
Do you have video only content?
Answer: Provide audio-description
Do you have a live audio / video event happening?
Answer: Ensure there is voice over when only visual actions are happening and captions are provided for audio. This will aid visually impaired users to know what’s visual actions are happening and hearing impaired users to know what the conversation is happening. If there is only music being played, show captions as “Music being played” and if possible what instrument is being played and some illustration.
Question: How my content should be structured and organized?
Answer: Ensure content is structured in a logical order, Headings are marked up appropriately using Hx values e.g. h1, h2 etc., Do not just decorate content as a heading, mark-up list items as ordered or unordered list, ensure all form fields do have associated labels using “for” and “id” attributes, radio buttons and check boxes have associated with their group label.
Question: My user tells me that my content is not read in right sequence, what could be wrong?
Answer: When content is presented in a sequence that is different than usual, it’s essential to ensure sequence of content is meaningful programmatically.
Question: Can I color code the information?
Answer: Yes, color can be used to convey information but color must not be the only form of presenting information. Example, accept is marked as “green” button and decline is marked as “red button”, same labels i.e. accept / decline must be provided as a text in addition to color code.
Question: Can I play audio or music automatically on my web page?
Answer: It’s a not a good practice to play audio automatically on a web page; reason being it would disrupt users with screen readers and people who do not expect an audio on loading of a web page. However, if audio has to played automatically and length is more than 3 seconds, controls must be provided to pause or stop the audio.
Question: How to meet resize text requirement?
Answer: User browser’s default zoom option (mostly CTRL and +) and zoom up to 200%
Question: Can I use images of text?
Answer: Where possible, it’s advisable to use text to convey the information rather than embedding onto an image.
Question: What’s graphics contrast?
Answer: It’s a new Success Criterion – 1.4.12 Graphics Contrast of WCAG 2.1. If information is conveyed only in the form of graphic e.g. charts etc., it must have minimum contrast ratio of 4.5:1.
For more than a year now, Accessibility Guidelines Working Group have been working hard to introduce extended version of WCAG 2.0; as part of this effort, task forces have formed to work on needs of mobile, cognitive and low vision users.
There are 28 new success criterias in WCAG 2.1; in which 3 have been formally approved by the working group; others are in proposed states. Three new success criterias that got accepted are:
For this publication, Accessibility Working Group of W3C seeks feedback on following questions:
Do the new and proposed Success Criteria address current user needs for web content accessibility?
Does conformance to the new and proposed Success Criteria seem achievable and testable?
How well do the new and proposed Success Criteria fit with the existing Success Criteria from WCAG 2.0?
How completely does the set of new and proposed Success Criteria address current user needs, particularly for users of touch- and small-screen mobile devices, users with low vision, or users with cognitive or learning disabilities?
Is the impact of WCAG 2.1 on policies that reference WCAG 2.0 understandable and not disruptive?
So have your say and contribute towards digital more inclusive!
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.
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:
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.
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 firstname.lastname@example.org and we will add them to this post.
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
Jammu and Kashmir
Website of West Bengal state did not get loaded.
Future posts may talk about frequently seen issues across these websites.
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!
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.
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.
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.
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.,
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
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.
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)
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.
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.