Skip to main content
Tagged as

WCAG

Accessibility Courses and Certifications

Let’s help more people to learn accessibility!

It’s good to see there is increased interest to pursue career in the area of accessibility. There are also growing opportunities. It’s important to have more people with accessibility knowledge so that more products become accessible. Now that many things including education are going virtual, it’s important that supporting technology is accessible. Here is a quick list of accessibility training programs and certifications.

Accessibility Trainings / Courses

There are several organizations that host on-demand accessibility trainings. Some offer in-person and some are virtual. Some of the organizations that offer accessibility training are:

  • Learning at BarrierBreak As of this writing, there are two free courses listed. That are Understanding disability and Creating Accessible Word documents.
  • Deque University – Offers courses on Web Accessibility, Document accessibility and preparation courses for IAAP Certifications. While offerings are commercial, they provide scholarships to people with disabilities.
  • The Paciello Group – TPG offers trainings both on-site and through series of webinars for designers, developers, testers and other stake holders on web and mobile accessibility. TPG also has a few self-paced trainings via their TPG Tutor platform
  • Knowbility – have 17 instructor-led, hands on training programs that they can deliver as is or customize as per needs of an organization. They host variety of online events to promote accessibility. They intend to provide online courses in the near future.
  • Level Access – Offers trainings with various options such as classroom training, small group instruction, side-by-side coding with your developers.
  • WebAIM – with a stratagy of educating and empowering customers about accessibility, WebAIM brings seminars to onsite as well as host a few training events at Utah State University
  • We at ServeOM Inclusion offer training programs to small and medium level organizations. We also offer training to freelance consultants. Reach us on +91 6366 778 991 for more details.

Certifications

W3C offers an introductory course through edX platform. This course is free; however, to get a verified certification, there is a fee. The course is interactive and taught directly by staff of Web Accessibility Initiative Group of W3C.

US Department of Homeland Security (DHS) Trusted Tester is a process that offers in-depth self paced online training on Section 508 standards and provide certification as DHS Trusted Tester with a Trusted Tester number. To qualify to attempt final exam, one must score minimum of 90% in practice exams. Once user registers for practice exam, they must pass witin 30 days. Once enrolled for final exam, user must complete within 10 days and score minimum of 90%.

International Association of Accessibility Professionals (IAAP) offers following certifications:

  • Certified Professional in Accessibility Core Competencies
  • Web Accessibility Specialist
  • Certified Professional in Accessible Built Environment

I personally have felt DHS Trusted Tester Certification Content has in-depth with examples and practice assignments. This is a great place for thorough learning about accessibility. For CPACC exam, I found course material available on Deque University useful.

Let’s help more people to get certified and join family of accessibility professionals.

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!