SI Blog

Compilation of ICT Standards

As per request from a colleague in the accessibility space, I have compiled below ICT standards. If something is missing, please add via comments and will be happy to add them to my list.

  1. WCAG Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of proving a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally. Currently recommendation is WCAG 2.0 and a public working draft of WCAG 2.1 has been published in February 2017. https://www.w3.org/WAI/intro/wcag
  2. ATAG Authoring tools are software and services that “authors” (web developers, designers, writers, etc.) use to produce web content (static web pages, dynamic web applications, etc.). Examples of authoring tools are listed below under “Who ATAG is for“. https://www.w3.org/WAI/intro/atag
  3. UAAG The User Agent Accessibility Guidelines (UAAG) documents explain how to make user agents accessible to people with disabilities. User agents include browsers, browser extensions, media players, readers and other applications that render web content. Some accessibility needs are better met in the browser than in the web content, such as text customization, preferences, and user interface accessibility. A user agent that follows UAAG 2.0 will improve accessibility through its own user interface and its ability to communicate with other technologies, including assistive technologies (software that some people with disabilities use to meet their requirements). All users, not just users with disabilities, will benefit from user agents that follow UAAG 2.0. https://www.w3.org/WAI/intro/uaag
  4. WAI – ARIA WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. Currently certain functionality used in Web sites is not available to some users with disabilities, especially people who rely on screen readers and people who cannot use a mouse. WAI-ARIA addresses these accessibility challenges, for example, by defining new ways for functionality to be provided to assistive technology. With WAI-ARIA, developers can make advanced Web applications accessible and usable to people with disabilities. https://www.w3.org/WAI/intro/aria
  5. IndieUI https://www.w3.org/WAI/intro/indieui
  6. New Section 508 of Rehabilitations Act (US) On January 18, 2017 the Access Board issued a final rule that updates accessibility requirements for information and communication technology (ICT) in the federal sector covered by Section 508 of the Rehabilitation Act. The rule also refreshes guidelines for telecommunications equipment subject to Section 255 of the Communications Act. The rule jointly updates and reorganizes the Section 508 standards and Section 255 guidelines in response to market trends and innovations, such as the convergence of technologies. The refresh also harmonizes these requirements with other guidelines and standards both in the U.S. and abroad, including standards issued by the European Commission and with the Web Content Accessibility Guidelines (WCAG), a globally recognized voluntary consensus standard for web content and ICT. In fact, the rule references Level A and Level AA Success Criteria and Conformance Requirements in WCAG 2.0 (link is external) and applies them not only to websites, but also to electronic documents and software. For more information, the Access Board has published an Overview of the Final Rule. Over the next several months, the US Access Board, in partnership with the General Services Administration, will provide guidance on the standards and on how to implement them within the federal government. This guidance will be published on the Section508.gov website when available. https://section508.gov/content/learn/laws-and-policies
  7. Article 9 of UNCRPD To enable persons with disabilities to live independently and participate fully in all aspects of life, States Parties shall take appropriate measures to ensure to persons with disabilities access, on an equal basis with others, to the physical environment, to transportation, to information and communications, including information and communications technologies and systems, and to other facilities and services open or provided to the public, both in urban and in rural areas. https://www.un.org/development/desa/disabilities/convention-on-the-rights-of-persons-with-disabilities/article-9-accessibility.html
  8. ePub 3 Guidelines: This guide is a complement the EPUB Accessibility specification and techniques. It provides additional explanation of accessible markup practices primarily to help publishers understand the requirements to meet WCAG 2.0 Success Criterion 1.3.1. Other topics, such as scripted interactivity and media overlays are also covered. https://idpf.github.io/a11y-guidelines/
  9. Accessible ICT Procurement Standard, Australia The Australian Public Service is committed to employing people with disability and creating inclusive work environments that reflect the diversity of the Australian community. To do so we need to ensure the ICT goods and services we buy are accessible for all employees.  https://www.finance.gov.au/blog/2016/09/09/Accessibility-ICT-Procurement-Standard/
  10. European ICT Accessibility Procurement Standard http://mandate376.standards.eu/standard
  11. US: Buy Accessible ICT Agencies are responsible for Section 508 compliance when they acquire ICT products and services. This is generally a shared responsibility between the Requiring Authority and the Contracting Office throughout the acquisition process. Appropriate Section 508 compliance depends upon the particular procurement method and acquisition procedures. https://www.section508.gov/content/buy
  12. Accessible Technology – a nice article on PEAT Works https://www.peatworks.org/content/accessible-technology-it-starts-procurement
  13. Mobile Accessibility “Mobile accessibility” refers to making websites and applications more accessible to people with disabilities when they are using mobile phones and other devices. WAI’s work in this area addresses accessibility issues of people using a broad range of devices to interact with the web: phones, tablets, TVs, and more. https://www.w3.org/WAI/mobile/

 

CAPTCHA on some portals

In the interest of security, CAPTCHA is still commonly used on several portals. Earlier CAPTCHA used to be seen on lengthy forms that collects critical data; but today we see CAPTCHA on login forms too. We have recently asked community to tell us their experience in dealing with CAPTCHA and below is a table that shows portal name, if CAPTCHA has an alternative, if yes, is that usable?

CAPTCHA Survey Results
Name of the portal Is there an alternative to CAPTCHA? User’s experience with alternative
LIC Housing Customer Login No No alternative provided
LIC India No This site has a question based CAPTCHA; it would be difficult for users with cognitive disabilities; hence alternatives should be provided
IRCTC Yes Login screen has option to request a one time password; but CAPTCHA present during ticket booking does not have an alternative
Income Tax India eFiling Yes There is an audio based CAPTCHA as well as a provision to opt an one time password
BSES Delhi No No alternative provided
Vijaya Bank Login No No alternative provided
India Post tracking No No alternative provided
EPFO Login No No alternative provided
Central Record Keeping System of NSDL No No alternative found

Thanks to everyone who has responded to me over social media and through Access India mailing list. Now let’s touch base with each one of the website owners and get best solution for CAPTCHA implemented.

Twitter iOS app is beautiful and inspiring!

Recently updated Twitter app for iOS version 7.1 is beautiful and inspiring to use. This is well designed keeping universal design in mind. Here is what I found impressive:

Clear icons Very pixel perfect, smooth edges and easy to see. Enough color contrast between foreground and background.

Links are underlined – all links including hashtags, twitter handles are underlined. Though I would prefer twitter handles and hashtags not to be underlined as they do already have a symbol attached to it.

Dynamic contrast for back and compose buttons When background color is changed, for instances, when profile page is opened, automatically more contrast background colors are added to back and compose buttons so that they are visible.

Less cluttered buttom navigation now just have home, search, notifications and direct message tabs; many things have been moved to a side menu that can be invoked using left-to-right swipe.

Night mode Even when night mode is turned on, it was pretty easy to use all options and all elements are clearly visible.

Accessibility options Through this section, settings can be activated including increasing font size, enhanced contrast etc.,

Overall, great job Twitter’s Accessibility team! This is something I would urge all app developers to get inspired and build inclusive mobile applications.

Accessibility Update 13th June, 2017

Lot has been happening in the recent past. Here is a quick update:

Accessibility Review: Home page of Ministry of Social Justice and Empowerment

Noticed that Ministry of Social Justice and Empowerment, Government of India has re-designed its website and here are list of quick accessibility findings. Note that this is not a complete assessment report.

  • Slider images do not have appropriate alternate text. They are provided something like “Slider 1, Slider 2 etc.”
  • Page has about 11 color contrast issues
  • Main navigation menus are operable using keyboard; however, menus gets automatically expanded and user is forced to navigate through all menu items.
  • Under important links section, there are several menus but not operable using keyboard
  • Under “What’s new” section, role of “play” and “stop” elements are not defined.
  • Redundent information is provided for links under What’s new section. Information is provided as text as well as alternate text for PDF image and also provided using ti
  • “New” image does not have appropriate alternate text. also, it’s flashing.
  • Links provided at right side e.g. Prime minister’s relief fund, e-Gazette etc., exposes redundent information to screen readers due to use of title attribute.
  • Several images have additional alt text like Digital graphic
  • Logo has marked up as a heading but there are no headings defined on the page
  • Due to use of title attribute for several links with text “link” – redundant information is provided to screen readers

Related reading: Developer resources would be of help to resolve accessibility issues.

Accessibility Testing Tool list

This list is intended for Windows environment but most of these should work on Mac OSX too.

Related reading: Dynomapper’s post on 25 Awesome Accessibility Testing Tools

Global Accessibility Awareness Day (GAAD) – a recap of celebrations in India

Wow, this year’s Global Accessibility Awareness Day (GAAD) was bigger than ever before; so it is difficult for me to write full recap in one post; hence this post focuses on what has happened in India and next post will talk about events around the world.

My day started off with event at PayPal India. It’s great to have spoken at an office that I worked earlier. It’s amazing to see some of the initiatives that I have started at PayPal India like Accessibility session for new hires, Accessibility Showcase are continued. Phani, Director of Payment products welcomed the gathering; he has done a good research on accessibility for his talk. Then I spoke about Accessibility of Digital Payments. Then Nawaz Khan of PayPal spoke about JavaScript and Accessibility of other frameworks. Post that Prakash of PayPal has spoken about design for accessibility. Whole event was amazingly moderated by my good friend Shalini Subramanian of PayPal. It was great to meet a lot of old colleagues. Appreciciate PayPal for taking the momentum forward.

Then we have proceeded to NIMHANS Convention Centre to participate in Global Accessibility Awareness day hosted by Prakat Solutions, CIS and Mitra Jyothi sponsored by Informatica and a few others. Event started off with a developer workshop by Nawaz Khan of PayPal, followed by panel discussion around impact of accessible websites and apps, how organizations can play a role. Event has also seen a few cultural events, stories of people as how accessibility and technology ha played a role, event has concluded with a presentation from Sean Murphy on Accessibility at Cisco.

Other events took place in India were Aubergine Solutions Pvt Ltd of Ahmadabad has hosted a workshop on Basics of Web Accessibility. Deque India has hosted a GAAD event at Hyderabad in partnership with NASSCOM Foundation. Radio Udaan has hosted a panel discussion on accessibility that talked about not only digital things but also other areas. BarrierBreak has released a CSS Accessibility Checker.

Here is my playlist of Global Accessibility Awareness Day. If you know of any videos of GAAD, do bring it to my attention and I’ll add them to my playlist.

Accessibility of Digital Payments

This is a presentation have done on the eve of Global Accessibility Awareness Day at PayPal on 18th May 2017.

Slides

Full Text

Full text is work in progress and will be available soon. Apologies – just in midst of too many happenings, couldn’t write full text on time as I usually do.

Photos

Srinivasu speaking at PayPal about Accessibility of Digital Payments on Global Accessibility Awareness Day

Read Tweets about GAAD event at PayPal

WAI – ARIA Landmark navigation extension

Web Accessibility Initiative (WAI) of W3C, a few years ago, introduced landmark roles (also known as landmarks”) for easy navigation of web page. An introduction to ARIA landmark roles:

The purpose of this technique is to provide programmatic access to sections of a web page. Landmark roles (or “landmarks”) programmatically identify sections of a page. Landmarks help assistive technology (AT) users orient themselves to a page and help them navigate easily to various sections of a page.

They also provide an easy way for users of assistive technology to skip over blocks of content that are repeated on multiple pages and notify them of programmatic structure of a page. For instance, if there is a common navigation menu found on every page, landmark roles (or “landmarks”) can be used to skip over it and navigate from section to section. This will save assistive technology users and keyboard users the trouble and time of tabbing through a large amount of content to find what they are really after, much like a traditional “skip links” mechanism. (Refer to User Agent Notes above for specifics of AT support). A blind user who may be familiar with a news site’s menu, and is only interested in getting to the top story could easily navigate to the “main” landmark, and bypass dozens of menu links. In another circumstance, a user who is blind may want to quickly find a navigation menu, and can do so by jumping to the navigation landmark.

If you are a screen reader user, it’s rather easy to use landmarks using keyboard commands provided by screen reader. But what if you are not a screen reader user? Recent post by Matthew Atkinson of The Paciello Group titled Improving access to landmark navigation has introduced a browser extension that works greatly for non-screen reader users to benefit from landmarks on any web page and browse the page in an easy way. I have installed on Firefox and experience is pretty smooth. All user needs to do is load a web page of choice and click on Landmark navigation extension; displays list of available landmarks as shown in below image.

Screenshot of landmarks showing on ServeOM Inclusion Home page
Screenshot of ServeOM Inclusion home page showing available landmarks using Landmark Navigation extension on Firefox
.

Download and install the landmark navigation extension for Firefox, Chrome and/or Opera to tryout yourself.

Wish to know what are the ARIA landmark roles? Read Landmark roles section on WAI-ARIA spec

Tips for developers: Get your website teted for accessibility – Part 2 – Operable

This is Part 2 of 4 parts on how a developer should get their website or application tested for accessibility. Objective of this series is to provide easy method of accessibility testing to developers so that they can test as they code. This is how we would achive accessibility right at the development and design stage. These tips would not only be helpful to developers but also to interaction designers who decides interaction of elements and those who develop prototypes. This Part 2 is related to Operable section of Web Content Accessibility Guidelines 2.1.

Question: How to test for keyboard accessibility?
Answer: Load the page. Press CTRL + Home (Windows), this will take focus to the top of the page. Then use tab key to move from one element to another. Use enter or space key to activate an element. One should be able to activity every element including menus, modals, buttons etc.,

Question: When I was browsing a page with keyboard, focus does not move from an element, focus just gets stuck; is there a problem with my keyboard?
Answer: Probably not, this is called keyboard trap and needs to be avoided. When a component recieves keyboard focus, there should be mechanism to move away keyboard focus from same component.

Question: What to consider when there is a time limit for a page?
Answer: Check if there is an option to turn-off timing, adjust as per user’s requirement or extend the time limit. There could exceptions such as activity at real-time, esential time limit such as a test and time limit of 20 hours and more.

Question: What to look for elements that moves, blinks or scroll?
Answer: There should be a mechanism to pause, stop or hide. If content is being updated automatically, there should be a mechanism to pause or set how periodical that an update should happen.

Question: What is bypass blocks and how do we test?
Answer: Bypass blocks is a mechanism to enable keyboard users to skip representative set of blocks such as navigation and jump quickly to main content. This can be achieved by providing “Skip to main content” link at the top, using appropriate heading structure and/or using ARIA land marks.

Question: How to test page titles?
Answer: Look at top bar of browser window and see if page title does exist and is appropriate. For example Page title should be page name along with the company / domain name. It should not be just company name only on all the pages.

Question: What all needs to be considered as Focus order issues?
Answer: Ensure that the tab order is logical, if an element opens a modal, focus focus must be set to modal and must not move out until user closes the modal, When modal is closed, focus should be returned to the triggered element.

Question: Testing for link purpose
Answer: Ensure that all links have meaningful and spell out the context to the users. Avoid links like “Read more”, “Click here” etc., Using automated tools would be effective to test this requirement.

Question: What are the multiple ways required for a website?
Answer: A search functionality or a site map. There should be more than one way to reach a specific page on the website.

Question: How to test for focus visible?
Answer: When you tab through the page, every element should receive an indicator and you should be able to see where the keyboard focus is. It can be either custom focus indicator or browser’s default focus indicator.