Web Content Accessibility Guidelines (WCAG) Whitepaper

Table of Contents

Abstract This whitepaper is written to give you an understanding of the various principles and compliances of Web Content Accessibility Guidelines (WCAG) outlined by World Wide Web Consortium (W3C). It covers brief aspects of “What WCAG is” and how web content can be made more accessible for differently abled people.

WCAG 2.0 - What does it cover? WCAG 2.0 guidelines outline 4 principles which web designers and developers need to meet. This degree of compliance is categorized as Level A, AA, & AAA.

How can you make your web content WCAG Compliant? WCAG 2.0 are a series of guidelines for making web content accessible for all users, especially those with disabilities. This includes users who suffer from visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities.

To get a better understanding of the various guiding principles and compliances, let’s read through.

The 4 main guiding principles of accessibility in WCAG 2.0 The goal is to succeed in the 4 principles outlined. If any of them fail, users with disabilities will experience difficulties in using the website.

The success criteria for WCAG 2.0 are not technology-specific thus giving companies and individual content creators more flexibility to create websites that conform to standards.

WCAG Overview

© 2017 Hurix System Pvt Ltd. All rights reserved. WCAG Whitepaper / 01

1.1 TheWCAG2.0guidelinedefines3levelsofcompliance: The WCAG 2.0 guideline defines 3 levels of compliance. Level A is considered the Highest priority and easiest to complete. Level AA is more detailed while Level AAA follows the strictest guidelines and is the most comprehensive in design.

is considered the Highest priority and easiest to complete

is more detailed while

follows the strictest guidelines and is the most comprehensive in design

Level A

Level AA

Level AAA

Perceivable Information and user interface components must be presentable to users in ways they can perceive.

Operable User interface components and navigation must be operable.

Understandable Information and the operation of the user interface must be understandable.

Robust Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

The 4 Guiding Principles of Accessibility in WCAG 2.01

WCAG Whitepaper / 02© 2017 Hurix System Pvt Ltd. All rights reserved.

2.1 Websites

2 WCAG for Web Content

If you want to make your content accessible for the differently abled audience, you’ll need to follow some guidelines for your deliverables. The sections below describe in brief the principles to be followed for following common web content deliverables:

Here is a brief understanding of the 5 requirements that need to be followed to make your website WCAG compliant.

For a website to meet WCAG conformity standards and to cater to the needs of users with mild visual impairments, one of the following levels need to be met in full.

Level A (Must satisfy) Stresses on the use of Color. It states that color cannot be used as the only visual means of conveying information, indicating an action, prompting a response, or highlighting a visual element.

Level AA (Should satisfy) Stresses on the minimum use of Contrast. For a page to meet this level of conformance the visual presentation of text and text based images needs to have a contrast ratio of at least 4:5:1 and resizable up to 200%.

Level AAA (May satisfy) Defines the highest level of accessibility and stresses on enhanced use of Contrast. Visual presentation of text and images of text needs to have a contrast ratio of at least 7:1

Requirement 1

VideosWebsites PDFseLearning

WCAG Whitepaper / 03© 2017 Hurix System Pvt Ltd. All rights reserved.

Full pages: A web page can only be considered conformed if the conformance is for full web pages and not part of it.

For a page to be conformant, the following success criteria need to apply to all content on the page:

Requirement 2

Complete processes: A web page can only meet conformity standards when it is one of a series of web pages and it presents a sequence of steps that need to be completed to accomplish an activity.

Requirement 3

Only accessibility-supported ways of using technologies are relied upon to satisfy the success criteria.

This basically states that technologies that are not accessibility supported can be used, if all the information is also available using technologies that are accessibility supported and does not interfere with non-accessibility material.

Requirement 4

Requirement 5

Audio control

No keyboard trap

Three flashes or below

Pause, stop, hide

WCAG Whitepaper / 04

The following design principles should be implemented when creating WCAG compliant courses:

• Information should not be conveyed using colors or variations in colors • Have fewer variations in slide layouts • Maintain consistency in structure, content, and other course based elements • Provide transcript for course general narration, videos, and animations • Provide alternative text (alt text) for every non-text elements such as images, graphs, interactions • Provide brief descriptions about the links that take learner outside of the course such as internet/intranet • Eliminate the need to have automatic navigations • Allow the learner to access the complete course using short-cut keys with mouse interactions

Apart from considering the special needs of differently abled learners, Instructional Designers must also be equipped with the required expertise to develop an accessibility-compliant eLearning course that meets WCAG standards.

Multiple illustrations & animations developed in realistic 2D & 3D style The animations art & illustrations followed the color contrast ratio of 4:5:1 Created SRT files for closed captions of each videos

The video player had the below features for WCAG compliance:

eLearning

The below image represents an animated learning content on Geology and Astronomy.

The following points cover aspects that went into creating elearning content and conformed with the WCAG process.

4:5:1

Play/pause for video content Activity does not force any time limit Focus order was left-right and top-bottom

‘Tab & Space’ used as navigation Alternate Text implemented for non-text content

2.2

WCAG Whitepaper / 05© 2017 Hurix System Pvt Ltd. All rights reserved.

Videos

When creating WCAG compliant videos, the following key points should be taken into consideration:

Addressing the needs of viewers

Video narration

Captions Sign language

Text based

content

Enhanced keyboard controls

• Record all relevant information

• Describe relevant sensory

characteristics and use of color

• Write dialogue your audience will

understand

• Limit flashes to 3 times a second

• Ensure sufficient color contrast

between text and background

• Lower background noise allowing

foreground speech to be heard

• Provide captions for all audio based

content

• Provide a sign language track

• Make your video controls keyboard

friendly with basic navigational controls

2.3

WCAG Whitepaper / 06© 2017 Hurix System Pvt Ltd. All rights reserved.

Videos for Middle Grade

The below image showcases a video with captions created for middle grade students.

When creating compliant videos, the following key points need to be kept in mind.

SRT files were used for closed captions 4:5:1

WCAG Whitepaper / 07

Videos can be a combination of live actors, illustrations, photos, sound effects & music

Each video should have an Audio description at the beginning of the visuals to describe the ongoing scene

Audio descriptions can either be included or created separately over and above the regular voice over script

Animations art & illustrations should follow a color contrast ratio of 4:5:1

© 2017 Hurix System Pvt Ltd. All rights reserved.

The present set of standards by WCAG does not represent a complete set which encompasses all technical requirements for accessibility in PDF documents. This is where PDF/UA (Universal Accessibility) helps. The standards set by PDF/UA states that content in a PDF should be as accessible as possible to users who require assistance to access the content. Primarily for sight-impaired users who use a screen reader to navigate through a document. The points covered by PDF/UA are:

PDFs2.4

WCAG Whitepaper / 08

Content is tagged. The tags used describe what the content is, for example a heading, and the order of that content

within the document – this guides the screen reader and facilitates

navigation through the document

Tables have tags for their

column headings and row headings allowing the user

to understand what the

values represent within the

table

The language of the document is specified

Fonts must be embedded

Graphical elements have

a text description allowing the user

to understand the context of the element

© 2017 Hurix System Pvt Ltd. All rights reserved.

We are internationally recognized W3C and WCAG 2.0 members and focus solely on accessibility. We stay informed about the various compliance laws and best practices.

Our teams are trained to perform in-depth analysis using various automated scanning-tools and manuals to provide a comprehensive report of all non-compliant web-pages. To bring your site into compliance with WCAG 2.0 standards, we perform a page-by-page analysis before programming, designing, and creating content.

We also provide in-depth analysis and remediation of your website to ensure business continuity while staying abreast with the WCAG standards.

We have implemented Level A & AA guidelines on various eLearning Modules, some of them being:

• Animation Videos • eLearning Courses • HTML5 Player • Interactivities

Below are some of the more commonly used features for WCAG compliance which were implemented:

• Keyboard (Tab-based) navigation • Voice over & closed captions • Color contrast • Alternate texts for non-text content

To get an in-depth understanding of the various levels of WCAGs Accessibility Guidelines, click here.

ContentAnalysis

WCAG Checklist

Instructional &Visual

EnhancementProgramming

Hurix Capabilities for WCAG Accessibility3

Source: W3C

WCAG Whitepaper / 09© 2017 Hurix System Pvt Ltd. All rights reserved.

An organization’s ability to keep pace with today’s ever changing technological landscape depends upon its IT agility. We at Hurix, partner with clients across domains as part of our technology service offerings to create the right tools and platforms that help them scale their business at the right pace.

Hurix is the leading digital content solutions provider to global educational publishers and

institutions. Our product and service solutions allow our clients to serve students of all ages and

backgrounds by providing effective, compelling and engaging digital content across traditional

and newer mobile platforms, formats and devices.

Hurix was founded in October 2000, and has built a consistent track record of growth,

profitability and excellence by developing deep, mutually beneficial partnerships with our

core clients. We work with almost all of the leading educational publishers, and aspire to be

their thought partners to tackle and address the rapidly evolving educational marketplace with

innovative and cost-effective solutions.

Our 500+ strong development team in Mumbai, Pune and Chennai, INDIA is supported by

Account and Project Managers in North America, Europe and Asia, in providing excellent

service to our clients.

4 About Hurix Systems

Mumbai:Unit # 102, 1st Floor, Multistoried building, SEEPZ - SEZ, Andheri (East), Mumbai - 400 603. Tel: +91-22-61914888

www.hurix.com

Years in the industry

16+ 10K+ 200+ 20+ 250+Hours of content Development

Team of eLearning Experts

Countries serving in

Client’s across globe

Pune: Unit # 9 & 10, 5th Floor, Central Wing, Sai Trinity, Pashan, Pune - 411 021. Tel: +91-20-30168888