Skip to main content

Tagged as

WCAG

Accessibility Review: IRCTC Next Generation Ticketing System portal

IRCTC (Indian Railways Catering and Tourism Corporation) has recently revamped it’s portal and good news is that users do not require to login to check availability of tickets, search trains etc., Here is a quick review from accessibility prospective.

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.

WCAG 2.1 is now a proposed recommendation

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:

  1. specify the deadline for review comments;
  2. identify known dependencies and solicit review from all dependent Working Groups;
  3. solicit public review.

Purpose: At this step, W3C seeks confirmation of proposed corrections to a Recommendation.

Entrance criteria: The Working Group calls for review when, with respect to changes to the document, the group has fulfilled the same entrance criteria as for a Call for Review of a Proposed Recommendation.

Duration of the review: The announcement begins a review period that must last at least four weeks.

Ongoing work: Same as for a Proposed Edited 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.

Missing alternate text: GAAD count down!

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

E-commerce portals

  • 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

Travel

  • 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?

Updated Web Accessibility Checklist – Perceivable

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.

Level WCAG 2.1 Success Criterion What to check for?
A 1.1.1 Non-text content
  •  All active images do have appropriate alternate text
  • All informative images do have appropriate alternate text
  • All decorative images are provided with null <alt> attribute.
  • Ensure that no informative images are used as background images. All informative images need to be in foreground and have appropriate alternate text
A 1.2.1 Audio-only and video-only (prerecorded)
  • For pre-recorded audio-only content, ensure to provide a text transcript
  • For pre-recorded video only content, ensure to provide an audio track
A 1.2.2 Captions (prerecorded) Ensure that captions are provided for all audio based content except where audio description is alternative to visual content
A 1.2.3 Audio description or media alternative (prerecorded) Ensure that audio description is provided for all prerecorded video content except where video itself is alternative to audio content
AA 1.2.4 Captions (Live) Ensure that captions are provided for live video content in synchronised manner
AA 1.2.5 Audio description (prerecorded) Ensure that audio description is provided for all prerecorded video content in synchronised media
A 1.3.1 Info & relationships
  • Has the page marked-up using semantics?
  • Page must have one first level heading using <h1>
  • Is the heading structure on the page appropriate?
  • If any content appears as a list, has it marked up using <list> attribute?
  • Has form labels associated with their input fields?
  • Are radio buttons / checkboxes associated with their group label?
  • For data tables, are data cells associated with their row / column headers?
  • Is CSS used to control the layout than using <table> mark-up?
A 1.3.2 Meaningful sequence Is the reading order meaningful from its presentation?
A 1.3.3 Sensory Characteristics Ensure that no instructions are provided in way that requires use of a specific sense of users such as using shape, color, visual location, size, orientation or sound
AA 1.3.4 Purpose of control 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.
A 1.4.1 Use of Colour 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”.
A 1.4.2 Audio-control
  • Check if page any audio that plays automatically for more than 3 seconds
  • If yes, ensure that there is a mechanism to pause / stop or ability to control the volume using system’s volume control
AA 1.4.3 Contrast – Minimum 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.
AA 1.4.4 Resize Text Ensure that user should be able to zoom in content upto 200% without use of any assistive technologies. This is not applicable for captions and images of text
AA 1.4.5 Images of text Use natural text to provide information unless it’s essential to embed text to an image. Logotype is known as essential

How to add alternate text to images?

Authors note: This is a re-published post due to an unavoidable technical issue.

In continuation to our post <alt> Campaign: Let’s make images on the web accessible, here are a few tips on how to add alternate text on different platforms.

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.,

OK… let’s continue to make images accessible!

<alt> Campaign: Let’s make images on the web accessible

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.

Let’s make images accessible!

Colours with Good Contrast – Accessibility Tips

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!

Heading Structure – Accessibility Tips

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!

WordPress goes WCAG – a big achievement

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.

Way to go!

Skip links – What, why and how?

What are Skip links?

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:

Screen shot of Cleartrip.com home page
Screen shot of Cleartrip.com home page

  • 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.

Providing Skip links will also meet the Success Criteria 2.4.1 – Bypass blocks

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)

of Web Content Accessibility Guidelines (WCAG) 2.0

How to implement?

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!

Related reading: