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.
Web Content Accessibility Guidelines (WCAG) 2.1 has become a proposed recommendation a while ago. This is possibly a last step before a standard becomes W3C recommendation. In short, this process is to confirm if required corrections are made. Here is what it means in the words of W3C.
7.6.4 Call for Review of Proposed Corrections
Document maturity level: A Recommendation, plus a list of proposed corrections. The Working Group should also include a detailed description of how the Working Group plans to change the text of the Recommendation for each proposed correction.
Announcement: The Working Group must announce the Call for Review to other W3C groups, the public, and the Advisory Committee. This is not a formal Advisory Committee review. However, the announcement must clearly indicate that this is a proposal to make normative corrections to the Recommendation and must:
specify the deadline for review comments;
identify known dependencies and solicit review from all dependent Working Groups;
solicit public review.
Purpose: At this step, W3C seeks confirmation of proposed corrections to a Recommendation.
If there are no formal objections to the proposed corrections, W3C considers them normative. The Working Group must report formal objections to the Director, who assesses whether there is sufficient consensus to declare the proposed corrections to be normative.
So this should be final and final chance to have any say and contribute to WCAG 2.1. As I see it, there have been a lot of great efforts and WCAG 2.1 looks awesome. Why not we just start implementing it?
Gratitude to all those who have closely involved in putting these standards together.
To celebrate Global Accessibility Awareness Day, we will posting about common accessibility issues each day from today. Objective of this initiative is to let product owners know about how they are creating barriers to their users and how they can fix them. Let’s see how we could impact the world for this 6th edition of Global Accessibility Awareness Day.
To begin with, we will start with missing alternate text.
OK, what’s the alternate text anyway? Alternate text is information provided for as an alternative to images using <alt> attribute. Read our earlier post on “alt” – what, why, how and when? to learn more about alternate text.
We have tested a few websites from different segments and see how many of them are providing alternate text to images.
Government of India
Government of India Home page has one image without alternate text. Appears to be a subscribe button.
Supreme court of India home page has one image without alternate text. It’s a slider image
Ministry of Electronics & Information Technology also has a subscribe button similar to Government of India home page and this too does not have an alternate text
Ministry of Social Justice & Empowerment has two images without alternate text
Telecom Service Providers
Bharath Sanchar Nigam Limited (BSNL) has 3 images without alternate text
Airtel home page has alternate text for all images
MTNL home page one image without alternate text
Vodafone home page has alternate text for all images
Flipkart home page does not have alternate text for a few images
Amazon.in displays several shapes which does not have alternate text
Tata Cliq has one logo image without alternate text
Olx.in has alternate text for all images
Indian Railway Catering and Ticketing Corporation (IRCTC) has 11 images without alternate text
Abhibus home page has 2 images without alternate text
Yatra.com has 8 images without alternate text
Cleartrip home page has 14 images without alternate text
OK, can we campaign to have these websites (and others) learn and fix issues related to alternate text by 17th May, 2018 which is Global Accessibility Awareness Day?
Back in 2010, we have published a Quick Web Accessibility Checklist that received a good response and we have also received a good feedback. It’s true that users prefer to have a quick checklist along with large documentation to achieve their accessibility mission. So we are bringing you this updated Web Accessibility Checklist reflecting success criterions of Web Content Accessibility Guidelines (WCAG) 2.1. Please note this checklist gets updated once again when WCAG 2.1 becomes a W3C recommendation (expected to be in 2018). Also, note that all external links on this page opens in a new window. We will be publishing this as a series of 4 posts so that it will be easy for users to refer.
This is a new Success Criterion and needs some interpretation to understand. This talks about personalisation of controls. While icons for different purpose may have standard icons, it’s recommended that user should be able personalise it.
Do not use colour as a sole means of information. Example: Normally “green” is shown to indicate success and “red” to indicate failure. While showing the same in color, it is also important to show as “text”.
Ensure that there is minimum contrast ratio of 4.5:1 for regular text between foreground and background. For large text, minimum contrast ratio should be 3:1. Incidental text such as inactive controls and logotypes do not require to have minimum ratio of contrast.
In all platforms, ensure that your alternate text is meaningful.
Add alternate text in HTML Code
After writing image source, add <alt> attribute to include alternate text of the image. Example code:
For informative images: <img src=”place image source here” alt=”This is alternate text for given image”>
For active images: <a href=”link address”><img src=”Place image source here” alt=”This is alternate text for this image link”></a>
For decorative images:<img src=”Place image source here” alt=””> Leaving an empty alt attribute will ask screen readers to ignore that image. But if we do not use alt attribute at all, then screen reader would possibly pick relevant information such as image’s file name as alternate text and expose to the user which doesn’t makes sense.
For CSS rendered background images: If those are just for decorative purpose, no worries but if background images are informative, then bring them to foreground and provide a meaningful alternate text.
Add alternate text to social media
Most of the social platforms such as Facebook, Twitter, WhatsApp, Google+ etc., has an option to add description while uploading an image. Even if we are uploading an image album, there is an option to describe each image. All we need to do is to make sure to use this feature and describe those images we post. That not only helps our connects with disabilities but also someone who have knowledge about the location we are posting about etc.,
Authors note: This is re-published post due to an unavoidable technical issue.
A picture speaks several words. Use of images over the internet is increasing everyday. It’s essential they are make accessible to all users and technologies. Benefits of making images accessible are:
Information conveyed through images is made available to blind and visually impaired users
Information is made available to those users who turns off images in the browser
Information is made available to those users who may not be able to load images due to poor connectivity
Search engines cannot read images; no matter how beautiful those images are
Today images are used on the websites, social media channels such as Facebook, Twitter, Google+, LinkedIn, Instagram, blogs and almost every platform over the internet. These images carry a lot of information; hence it’s important to make these images accessible.
Here is what 1.1.1 Non-text content talks about:
1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
If images do not have alternate text, screen readers often try and read associated text based information such as path of image file or link destination if image is a hyperlinked. A few things to be kept in mind about alternate text:
Alternate text must be meaningful
Alternate text should not be too long. If information needs to be described in length, then one should use <longdesc> attribute must be used
Background images should be used only for decorative purpose; if those images are informative, then those images must be brought to foreground and provide appropriate <alt> attribute
Decorative images must be provided with emplty alt attribute – i.e. <alt=””>
Through this next one month, let’s practice and propagate the following:
If we find images on any website, let’s write to those companies and have them fix it
If you are a web developer / website owner, identify images on your website / app, fix if they do not have alternate text
Let’s avoid posting text embedded on to an image
Whatever we post on social media such as Facebook, LinkedIn, Twitter etc., let’s be sure to add text description
If you have fixed something to this effect or if you are able to convince someone doing it, leave a comment here to acknowledge the effort.
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)
Yes, this is big achievement for a content management software to be WCAG complaint! We love Word Press for several years now and one of the main reasons for that is its ease of use. Now we love it more because now WordPress goes WCAG; thanks to the dedicated efforts by wonderful Accessibility team at Word Press and community that helps.
Here is what Rian Riatveld wrote in the recent announcement:
All new or updated code released into WordPress core and bundled themes must conform with the WCAG 2.0 guidelines at level AA.
There are also many theme authors who are putting in great efforts to code accessible themes and there are several plugin authors who are doing their bit as well.
Proud of Word Press team and we are sure, it would not be possible without support from everyone working on Word Press. Thanks all. Hope authors / vendors of all other content management software would inspire by effort of Word Press and sign-up to build accessible software.
Skip links is something we don’t see in most of the websites. “Skip links” helps users (especially the keyboard users) to jump directly to a block of content or to an unique area of the page. “Skip links” are used for:
Skip to main content
Skip to navigation
Skip to secondary navigation
Skip to Search
These links are nothing but book marks on a web page. “Skip links” are expected to be placed at the top of web page and should be the first available link.
Why is Skip links important?
Now, let’s discuss the rational for having skip links. Let’s visit Cleartrip – a travel website in India. Layout of this portal is:
Cleartrip logo on the top left
There are a few links on the top right such as My trips, sign in etc
Site navigation links such as Flights, Trains, Hotels etc
A form to search international and domestic flights
Aside to the search form, there is a module that shows offers and deals
And there are some footer links
In this page, mostly users will prefer to use the Search flights module. OK keep this in mind for now and let’s understand keyboard and screen reader users.
Keyboard only user will use “Tab” key that moves focus from one element to another and they can use “space” key or “return” key to activate an element. Now, let’s understand how the screen readers on personal computers (PC) such as Non Visual Desktop Access (NVDA) works on a webpage. Usually a screen reader reads content from left to right and top to bottom and there are designated keyboard commands that provides flexibility for users to browse the page by elements such as H for Headings, F for Forms etc. and screen reader users too use “space” or “return” key to activate an element.
Let’s get back to our Cleartrip example! As we agreed above, the most used feature of this page is Search form and a screen reader user can can use hot key F to directly jump to From input field but a keyboard only user have to press Tab key for several times to reach From input field. When a user is much familier with the page layout, he or she wouldn’t bbe interested to see the repeated block of elements each time. In this scenario, having a Skip to main content would be helpful so that keyboard only user or a screen reader user who may not be aware of hot keys can quickly jump to the search form. Another advantage I would think of is that Skip links would be handy when browsing a website on a device that has tiny screen.
It’s pretty simple. Create an hyper link at the top of the page with screen text “Skip to main content” or Wherever you feel the important feature on your page. For our above Cleartrip example, it would be appropriate to create a Skip to main content link. The code will be something like: <a href="#maincontent">Skip to main content</a>
Now, let’s come to the main content area and create an anchor name using: <a name="maincontent"></a>
We can apply the styles as needed using the CSS. Now, the argument would be whether Skip links should be visible or hidden. I believe, these links should be visible because, they cater to the needs of not just screen reader users but also the keyboard only users and mobile users.
To conclude, Skip links are helpful to several users including those who use keyboard only or view web pages on tiny devices. Let’s advocate Skip links and make best use of them!