Principal 1 Percievable

Information and user interface components must be presentable to users in ways

they can perceive.
 Guideline 1.1 Text Alternatives
Provide text alternatives for any non-text content so that it can be changed into
other forms people need, such as large print, braille, speech, symbols or simpler
language.
SC 1.1.1 Non-text Content Level A
All non-text content that is presented to the user has a text alternative
that serves the equivalent purpose, except for the situations listed
Images
How do blind users see images on web?
<img src=“images/folder_icon.png” height=“150px” width=“150px” />

Add alt attribute –

<img src=“images/folder_icon.png” height=“150px” width=“150px”
alt=“Folder Icon” />
 Types of Images 1 of 4
Informative
Active Images
Images with links
Input type images (buttons)
Background Images
Decorative/ formatting/ Invisible Images
Video Images
Image maps
Grouped Images
Types of Images – Charts & Graphs 2 Of 4
Screen Reader Percent Of
respondents
JAWS 66.0%

• Charts NVDA
& Graphs 64.9
VoiceOver 36.9
Narrator 21.4%

https://webaim.org/projects/screenreadersurvey7/
Images - Summary
Important images - Alt with appropriate text
Non-important images - Alt with empty alt text
Complex Images – Alt + additional information Via
longdesc
Tabular format
aria-describedby if the content is elsewhere.
Testing Images
Check alt attribute – Automation tool
Content Inspection – Manual check
BG Images – Disable stylesheets
<view > Page Styles> No style
Live Examples
Improper Alternate text – Image 1
http://www.business-standard.com/company/hdfc-bank-4987/news

Active Image – logo

http://www.usclub.co.in/noticeboard.aspx

Spacer image –
http://www.usclub.co.in/noticeboard.aspx

CAPTCHA –
http://www.futuregroup.in/get-in-touch/customer-feedback.aspx
 Other examples
Example 1:Background Images with important information
Text on image 10.99% PA
The text after the bg image is as follows.
Where else would you find a better interest rate?
Example 2: An image button has play / pause functionality.
But the alternate text does not change dynamically.

Example 3: Colours on bar charts but the information is not completely conveyed.
• A bar chart of sales data is provided as an image. The chart includes yearly sales figures for four
employees in the Sales Department. The text alternative for the image says, "The following bar
chart displays the yearly sales figures for the Sales Department. Mary sold 3.1 Million; Fred, 2.6
Million; Bob, 2.2 Million; and Andrew, 3.4 Million.
Say there are two colours Red and Green. Sales below 3 M are red as they have not met the annual
target. The same information is not conveyed through this alternate text.
Exceptions
• Decorative/ formatting/ Invisible
• Images to provide some sensory experience
• Online test
• CAPTCHA
 Guideline 1.2 Time-based Media
Provide alternatives for time-based media.
SC 1.2.1 Audio-only and Video-only (Pre
recorded) Level A
For prerecorded audio-only and prerecorded video-only media, the
following are true, except when the audio or video is a media
alternative for text and is clearly labeled as such:
• Prerecorded Audio-only:
An alternative for time-based media is provided that presents
equivalent information for prerecorded audio-only content.
• Prerecorded Video-only:
Either an alternative for time-based media or an audio track is provided
that presents equivalent information for prerecorded video-only
content.
Examples
• Video that has a file name as the alternate text (video_game.jpeg)
• The long description / text transcript does not provide sufficient
information conveyed through the multi-media content.
• Missing audio track / narration for the important visual content of the
multimedia content.
 SC 1.2.2 Captions (prerecorded) Level A
Captions are provided for all prerecorded audio content in
synchronized media, except when the media is a media alternative for
text and is clearly labeled as such.
Types of captions
Captions are sometimes called as subtitles

a. Closed Captions
Users can switch off them,
Rendered separate from the video
Will have more user control, some operating systems allow to change the
fontsize, color, background etc.

2. Open captions
Embeded into the video track.
Cannot be switched off by the user.
Captions must have
• Spoken information in the video
• Important sounds Eg: applause
• Name of the character if the video contain multiple speakers
Example with captions
• Hit the play button if the video does not play automatically.
• Toggle the subtitles / captions button ON.
https://www.youtube.com/watch?v=qbUcv3Bc61g
SC 1.2.3 Audio Description or Media
Alternative (Prerecorded) Level A
An alternative for time-based media or audio description of the
prerecorded video content is provided for synchronized media, except
when the media is a media alternative for text and is clearly labeled as
such.
Audio Description / Media alternative
• Audio description provides the content to blind / visual impaired
users about the visual content such as expressions of the speaker,
actions, characters, seen changes etc
• Alternate media includes all the information displayed including the
dialogs of the characters in the sequence in which they are in the
multimedia content.
• In SC 1.2.3 author has a choice to pick either audio description or
media alternative
SC 1.2.4 Captions (Live) Level AA

Captions are provided for all live audio content in synchronized media.
Live Caption information
• IBM Whatson : https://support.video.ibm.com/hc/en-
us/articles/207851907-Live-Closed-Captions
• Captions for skype calls:
https://support.skype.com/en/faq/FA34877/how-do-i-turn-live-
captions-subtitles-on-during-a-skype-call
SC 1.2.5 Audio Description (Prerecorded)
Level AA
Audio description is provided for all prerecorded video content in
synchronized media.
Guideline 1.3 Adaptable
Create content that can be presented in different ways (for example simpler
layout) without losing information or structure.
SC 1.3.1 Info and Relationships Level A
Information, structure, and relationships conveyed through
presentation can be programmatically determined or are available in
text.
Tables
• Layout Tables
• Simple tables
• Complex tables / nested tables
Tables – Layout Tables
• Avoid using layout tables

Live Example –
http://www.usclub.co.in/noticeboard.aspx
• Find layout tables using Paul Adam Bookmarklet
Tables – Simple Tables
• Tables with data in it.
• Equal number of rows and columns
• Columns or rows or both related with the data cells.
Example:
https://www.maxability.co.in/screen-readers/
Tables – complex tables
• Cells spanned across,
• Data cell having multiple headings.
Example:
https://www.w3.org/WAI/tutorials/tables/irregular/
Tables - Summary
• <th> for header cells.
• Scope attribute i.e. scope=“col” or scope=“row” for simple tables
• Headers and id attributes for complex tables.
• <caption> element xzk zxJ for table headers
• Summary attribute additional information only for screen readers.
Do It yourself – Tables Exercise
• Tables – Do it yourself
https://teachaccess.github.io/tutorial/#/9
Label & Form relationship
• The visually available label should be programmatically related with it’s
form control.
• The label and form relation either can be explisit i.e. using “for” and “id” attributes.
• If the “id” is generated via script and the explisit labelling is not possible , the relation
can be implisit. i.e wrap the input element within the label element.
• The label and form control must be in a close proximity.
• Instructions (if available) should be programmatically related to its
controls.
Example:
Missing association
http://www.continentalhospitals.com/enquiry.php
Grouping similar elements
Gender
Radio button Male
Radio button Female

The group of 2 radio buttons are grouped with a label Gender

Forms – Do It Yourself – Exercise 1 of 2
• Create a form control to fill in First name, last name and Email
address
<label for=“fname”>First Name</label>
<input type=“text” id=“fname” aria-describedby=“inst1” />
<span id=“inst1”>First Name is a sir name or family name</span>
Similarly create a Lat name control, Email address and Date of birth.
Date of birth instruction: Format DD/MM/YYYY
Forms – Do It Yourself – Exercise 2 of 2
What is your highest educational qualification?
Graduation
Post Graduation
Ph.D
Use checkboxes and label them. To group these controls use <fieldset>
and <legend> elements
Testing the form relations
• Screen reader tab and shift + tab .
• Code inspection
• Paul Adam bookmarklets
• Automation tool such as aXe.
Form Controls - Summary
• Provide a relation between form controls and the labels
• Group related form controls together
• Relate instructions with form controls.
Headings
• Headings forms structure to the page.
• Helps in quick navigation for screen reader users.
• Helps in identifying the content of the containers
• Helpful for search Engines
Rules for headings
• Real headings must be marked up with the heading elements (<h1>
to <h6>).
• If it is not a heading do not use heading elements.
• Headings on the page must be hieraarchical.
• Have at least one heading on the page.
• Do not skip levels of heading or make riverse hierarchy.
• Use heading element only for real headings do not fake
• Use heading elements do not rely only on font properties.
Testing headings
• Use Paul Adam bookmarklets to identify the markup of headings.
• Code inspection
• Use screen readers to read the heading elements.
• Use JAWS key + F5 to see the list of headings.
• Use NVDA key + F7 and select headings from the elements list to display the
headings.
Example:
No heading tags
http://www.usclub.co.in/noticeboard.aspx
Headings – Do It Yourself - Exercise
Provide a heading level 1 : Sign Up today before the form you just
created.
Lists
• Ordered list
• Unordered list
• Definition list
Rules for lists
• Use appropriate lists to the page
• Nested lists must be used according to the specifications
• Use <li> only to the content
Testing lists
• Use Paul Adam bookmarklet
• Use screen readers
• Identify beginning and end of list properly announced.
• Check the number of items announced by SR is equal to actual number of
items.
• Appropriate list is used or not.

Example:
Improper use of lists
http://www.usclub.co.in/noticeboard.aspx
Lists – Do It yourself - Exercise
Just after the heading mention the following steps – Decide which list
type appropriate.
Step 1: Yur personal details
Step 2: Education details
Step 3: Employment details
Step 4: Review & Submit
Step 5: Confirmation
Other markup
• Use semantic elements instead of CSS tricks.
Eg: <q>, <blockquote> etc
Use alternates when the semantic elements do not convey the visual
content.
Eg: strike-off content for discounted prices.
Check if <s> etc are supported by SRs.
SC 1.3.2 Meaningful Sequence Level A
When the sequence in which content is presented affects its meaning,
a correct reading sequence can be programmatically determined.
More information on meaningful sequence
• Also called as reading order
• Specifically problematic for SR users
• Majorly due to use of layout tables and white space characters for layout.
• Applies only to the content that required sequence.

In HTML,
Tables, ordered lists etc require sequence but unordered list does not require.
The links in the navigation does not required a sequence.
The sections of the page header, main content region and footer does not require sequence as they are independent.
Aside content within an article does not require sequence

The articles that have multiple paragraph require a sequence.

There might be more than oneway of providing sequence but for WCAG 2.0 providing one sequence is sufficient.
Remember SR reads the content in Source code / DOM order. Do not panic with CSS tricks
Testing Meaningful Sequence
• Use screen readr to read the entire content using arrow keys.
• Alternately linearize the web page and read the content.

If the sequence of reading or content layed out effects this SC is a

failure.
SC 1.3.3 Sensory Characteristics Level A
Instructions provided for understanding and operating content do not
rely solely on sensory characteristics of components such as shape,
color, size, visual location, orientation, or sound.
Testing 1.3.3
• Look at the content and identify the instructions based on sensory
characteristics.
Eg: click the button on the right-hand side of the form for assistance.
(right-hand side is a visual location)
If alternate of identifying the element such as
“Click the help button on the right hand side for assistance” where help
is the label of the button
This is a content specific SC that is supported by programmatic
information.
Sensory Characteristics - Do It Yourself -
Exercise
• Add an instruction before the form “* indicates mandatory fields”.
• Never mention “Help icon is on left right corner through-out the
application”.
Guideline 1.4 Distinguishable
Make it easier for users to see and hear content including separating foreground
from background.
SC 1.4.1 Use Of Color Level A
Color is not used as the only visual means of conveying information,
indicating an action, prompting a response, or distinguishing a visual
element.
Example situations
• In a pi-chart, months with green background met the target while the
red ones are not.
• Disabled elements are grayed out but no specific information for SR
users.
• Progress bar indicating completed steps with change in color and
underline.

Visually identify if the page contains any content that is perceived by

color alone.
Programatic solution
• aria-disabled or HTML 5 disabled attribute in addition to greyed out
info.
• Aria-current attribute or hidden screen information for progressbar.
• Additional instructions for changes in color for pie charts.
SC 1.4.2 Audio Control Level A
If any audio on a Web page plays automatically for more than 3
seconds, either a mechanism is available to pause or stop the audio, or
a mechanism is available to control audio volume independently from
the overall system volume level.
NOTE
Since any content that does not meet this success criterion can
interfere with a user's ability to use the whole page, all content on the
Web page (whether or not it is used to meet other success criteria)
must meet this success criterion. See Conformance Requirement 5:
Non-Interference.
HTML5 autoplay
• A critical bug - Conformance Requirement 5: Non-Interference.
• use of autoplay is a failure for this SC
• Older HTML versions use plugins to play the media
• The audio track overlaps the audio output from the SR.
 SC 1.4.3 Contrast (Minimum) Level AA
The visual presentation of text and images of text has a contrast ratio of
at least 4.5:1.
Testing Color contrast
Testing tool – Color Contrast Analyzer
https://www.paciellogroup.com/resources/contrastanalyser/
How to use?
https://www.youtube.com/watch?v=UCO7EiJvdz0
Designers need to bother for this.
Exceptions for Color Contrast
• Incidental text , logo types & brands
• Inactive / disabled controls
• Large text (3 : 1 is sufficient)
SC 1.4.4 Resize Text Level AA
Except for captions and images of text, text can be resized without
assistive technology up to 200 percent without loss of content or
functionality.
Fonts for accessibility – units – Part 1 of 3
• Using relative sizes is preferred - % or ems instead of px or pt
• Modern browsers resize seemlessly so not very imp
• The idea is to content is not overlapped or trunkated on resizing until
200%
Fonts for accessibility – font styles – Part 2 of
3
• Use common font styles
• Fonts need to be easy to read
• Avoid using cursive or monospacing fonts
• Fonts are generally grouped into families.

Eg: Times New Roman, Georgia, and Book Antiqua. – Serif family
Arial, Tahoma, Trebuchet MS, Verdana – Sans-Serif
Font accessibility – other considerations –
part 3 of 3
• Avoid all capitalization unless necessary.
• use elements that have semantic meaning
Eg: use <strong> instead of <b>
<b> is for fat fonts – use font-weight. So <b> is not a good idea.
<strong> is for emphasizing.
Use <em> instead of <i> to emphasise the content.
If required use font-style=“italic” instead of <i>
Alls styles should come from CSS.
 Separate styles from markup
Sample CSS :
body
{
font-family: Helvetica, Arial, sans-serif;
Font-size: 1.2 em;
}
h1
{
font-family: Georgia, Times, "Times New Roman", serif;
Font-size: 2.4 em;
}
Viewport and scaling for accessibility
In the <meta name="viewport">
• Do not use user-scalable="no"
• maximum- should not be < 2
Testing resize text
• Control + + 6 times
• Check for no loss of content
• Check for no loss of functionality
Note: Control + 0 brings normal size of browser
SC 1.4.5 Images of Text Level AA
If the technologies being used can achieve the visual presentation, text is
used to convey information rather than images of text except for the
following:
• Customizable:
The image of text can be visually customized to the user's requirements;
• Essential:
A particular presentation of text is essential to the information being
conveyed.
NOTE
Logotypes (text that is part of a logo or brand name) are considered
essential.
How to fix
• Avoid text embedded in the images unless absolutely necessary.
• Try using CSS to get the visual effect and markup for the content
• For simple content Alternate text should help.
 Principal 2: Operable
User interface components and navigation must be operable.
Guideline 2.1 Keyboard
Accessible
Make all functionality available from a keyboard.
SC 2.1.1 Keyboard Level A
All functionality of the content is operable through a keyboard interface
without requiring specific timings for individual keystrokes, except where the
underlying function requires input that depends on the path of the user's
movement and not just the endpoints.
NOTE
This exception relates to the underlying function, not the input technique.
For example, if using handwriting to enter text, the input technique
(handwriting) requires path-dependent input but the underlying function
(text input) does not.
NOTE
This does not forbid and should not discourage providing mouse input or
other input methods in addition to keyboard operation.
Live example
• top navigation links eg: solutions, products etc are not keyboard
accessible.
https://www.alarm.com/
 Some solutions
• Option 1: Explisit labeling
<label for="email">Email Id</label>
<input type="text" id="email" placeholder="Type your email address" />
• Option 2: Implisit labeling
<label>Email Id
<input type="text" placeholder="Type your email address" />
</label>
• Option 3: Using ARIA
<span id="email_id">Email Id</span>
• <input type="text" id=”email” aria-labelledby="email_id" placeholder="Type your email
address" />
SC 2.1.2 No Keyboard Trap
If keyboard focus can be moved to a component of the page using a
keyboard interface, then focus can be moved away from that
component using only a keyboard interface, and, if it requires more
than unmodified arrow or tab keys or other standard exit methods, the
user is advised of the method for moving focus away.
NOTE
Since any content that does not meet this success criterion can
interfere with a user's ability to use the whole page, all content on the
Web page (whether it is used to meet other success criteria or not)
must meet this success criterion.
Live Example
• Modal example to show keyboard trap.
(this is a good example but the concept is the same)
https://www.w3.org/TR/wai-aria-practices/examples/dialog-
modal/dialog.html
Guideline 2.2 Enough Time
Provide users enough time to read and use content.
SC 2.2.1 Timing Adjustable Level A
For each time limit that is set by the content, at least one of the following is
true:
• Turn off: The user is allowed to turn off the time limit before encountering
it; or
• Adjust: The user is allowed to adjust the time limit before encountering it
over a wide range that is at least ten times the length of the default setting;
or
• Extend: The user is warned before time expires and given at least 20
seconds to extend the time limit with a simple action (for example, "press
the space bar"), and the user is allowed to extend the time limit at least ten
times; or
Exceptions
• Real-time Exception: The time limit is a required part of a real-time
event (for example, an auction), and no alternative to the time limit is
possible; or
• Essential Exception: The time limit is essential and extending it would
invalidate the activity; or
• 20 Hour Exception: The time limit is longer than 20 hours.
SC 2.2.2 Pause, Stop, Hide
For moving, blinking, scrolling, or auto-updating information, all of the
following are true:
• • Moving, blinking, scrolling:
• For any moving, blinking or scrolling information that (1) starts
automatically, (2) lasts more than five seconds, and (3) is presented in
parallel with other content, there is a mechanism for the user to pause,
stop, or hide it unless the movement, blinking, or scrolling is part of an
activity where it is essential; and
• • Auto-updating:
• For any auto-updating information that (1) starts automatically and (2) is
presented in parallel with other content, there is a mechanism for the user
to pause, stop, or hide it or to control the frequency of the update unless
the auto-updating is part of an activity where it is essential.
Example of carousal
• Shopclues website
https://www.shopclues.com/
Guideline 2.3 Seizures and
Physical Reactions
Do not design content in a way that is known to cause seizures or physical
reactions.
SC 2.3.1 Three Flashes or Below Threshold
• Web pages do not contain anything that flashes more than three
times in any one second period, or the flash is below the general flash
and red flash thresholds.
Guideline 2.4 Navigable
Provide ways to help users navigate, find content, and determine where they are.
SC 2.4.1 Bypass Blocks
A mechanism is available to bypass blocks of content that are repeated
on multiple Web pages.
Methods for Bypass
• heading structure
• Landmarks
• Skip link
• Expand / collapse menu
What are landmarks?
• landmarks are the regions of HTML5 ARIA

the web page <header> Role=“banner”

<nav> Role=“navigation”
• Either HTML5 sectional elements <main> Role=“main”
or <aside> Role=“complimentary”
• ARIA landmark roles <footer> Role=“contentinfo
Skip links
Create a skip link at the top of the screen
Targets at the main region of the page.
<a href=“#main”>Skip to content</a>
<main id=“main”>
<p>Main content goes here</p>
</div>
SC 2.4.2 Page titl- Level A
Web pages have titles that describe topic or purpose.
SC 2.4.3 Focus Order Level A
If a Web page can be navigated sequentially and the navigation
sequences affect meaning or operation, focusable components receive
focus in an order that preserves meaning and operability.
Problems with focus order – Tabindex – Part
1 of 2
• Incorrect focus order due to • Positive tabindex – NO no no
DOM order or tabindex • Tabindex=“0” – Only when
actionable elements are not
focusable.
• Negative tabindex – Special
cases such as menus and tabs
Focus management – models, dialogs – part
2 of 2
• model example at
https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-
modal/dialog.html
SC 2.4.4 Link Purpose (in context) Level A
The purpose of each link can be determined from the link text alone or
from the link text together with its programmatically determined link
context, except where the purpose of the link would be ambiguous to
users in general.
Creating accessible links
<a • proper link text
href=“http://www.mixability.co.in • Alternate text for images with
”/>http://www.mixability.co.in/</ links
a>
• Aria-label
<a
href=http://www.mixability.co.in/t
rainings/><img src=“logo.png”
/></a>
Link text is either unclear or not at
all available.
SC 2.4.5 Multiple Ways Level AA
More than one way is available to locate a Web page within a set of
Web pages except where the Web Page is the result of, or a step in, a
process.
Solutions for multiple ways
• Search functionality • Small websites
• Sitemap • Logged in pages
• Links from home to other pages • Pages part of process or a flow
• Index/ TOCs
SC 2.4.6 Headings and Labels Level AA
Headings and labels describe topic or purpose.
SC 2.4.7 Focus Visible Level AA
• Any keyboard operable user interface has a mode of operation where
the keyboard focus indicator is visible.
Does & donts
• Avoide outline:none
• Check how is the default indicator
• If focus indicator is overwritten – ensure that it is clear and do not cut
/ overlap
• Secondary way ofidentifying currently focus item i.e. background
color change BP
CSS to provide clear indicator
Eg: the default color for link is as follows:

Color- black

Background color: white

Link: underline

Change on focus or hover as follows

Color: White

Background : black

Remove underline.

Before focus:

a{

color: black;

background-color: white;

text-decoration: underline

On focus, on hover

a:focus, a:hover {

color: white;

background-color: black;

text-decoration: none

}
 Principal 3: Understandable
Information and the operation of user interface must be understandable.
Guideline 3.1 Readable
Make text content readable and understandable.
SC 3.1.1 Language of Page Level A
The default human language of each Web page can be
programmatically determined.
SC 3.1.2 Language of parts Level AA
The human language of each passage or phrase in the content can be
programmatically determined
Exceptions
• proper names,
• technical terms,
• words of indeterminate language, and
• words or phrases that have become part of the vernacular of the
immediately surrounding text.
Providing Language
• lang attribute with valid
language code
• Different language codes from
W3C
• <html lang=“en”> for the entire
page.
• <p lang=“hi”>content in Hindi
here</p>
Guideline 3.2 Predictable
Make Web pages appear and operate in predictable ways.
SC 3.2.1 On Focus Level A
• When any user interface component receives focus, it does not
initiate a change of context.
Example on focus
• Use activate instead of focus.
www.alarm.com
3.2.2 On input Level A
• Changing the setting of any user interface component does not
automatically cause a change of context unless the user has been
advised of the behavior before using the component.
Example onChange
• UIDAI (AADHAR website)
https://uidai.gov.in/

Credit card bill pay (credit card numbers fields)

https://www.billdesk.com/pgidsk/pgmerc/induscard/indus_card.jsp

Example 1

1. Change a value in the list box and a new modal window displays.
2. A phone number with 3 fields i.e. country code, area code and phone number that are moved
to different fields without intimation to the user.

Note: Change of content is not change of context

SC 3.2.3 Consistent Navigation Level AA
• Navigational mechanisms that are repeated on multiple Web pages
within a set of Web pages occur in the same relative order each time
they are repeated, unless a change is initiated by the user.
SC 3.2.4 Consistent Identification Level AA
Example
• Components that have the same functionality within a set of Web
pages are identified consistently.
Example
• Search icon should be the same through out the website.
• Printer icon shows the print functionality (icon should be repeated
and the label too)
• Label can be slightly changed dependent on the content Eg: print
receipt, print invoice etc
Guideline 3.3 Input Assistance:
Help users avoid and correct mistakes.
3.3.1 Error Identification:
If an input error is automatically detected, the item that is in error is
identified and the error is described to the user in text. (Level A)
Tips for error identification
a. Do not use sensory characterstics to identify field in error.
a. Provide textual error message.
b. Associate the error message with the field
c. Notify the error situation to the user after form submission.

Use alerts, focus management or aria-describedby etc for relations.

3.3.2 Labels or Instructions:
Labels or instructions are provided when content requires user input.
(Level A)
What are labels?
• Label is something always visible
• Placeholder, aria-label or title alone is wrong
• Provide instructions whereever required.
3.3.3 Error Suggestion:
If an input error is automatically detected and suggestions for
correction are known, then the suggestions are provided to the user,
unless it would jeopardize the security or purpose of the content.
(Level AA)
3.3.4 Error Prevention (Legal, Financial,
Data):
Web pages that cause legal commitments or financial transactions for the
user to occur, that modify or delete user-controllable data in data storage
systems, or that submit user test responses, at least one of the following is
true: (Level AA)
1.
Reversible: Submissions are reversible.
2.
Checked: Data entered by the user is checked for input errors and the user is
provided an opportunity to correct them.
3.
Confirmed: A mechanism is available for reviewing, confirming, and
correcting information before finalizing the submission.
 Principle 4: Robust
Content must be robust enough that it can be interpreted reliably by a wide variety
of user agents, including assistive technologies.
Guideline 4.1 Compatible:
Maximize compatibility with current and future user agents, including assistive
technologies.
4.1.1 Parsing:
In content implemented using markup languages, elements have
complete start and end tags, elements are nested according to their
specifications, elements do not contain duplicate attributes, and any
IDs are unique, except where the specifications allow these features.
(Level A)
Know more about parsing
You are lucky
Modern browsers take care of
• Duplicate attributes
• Improper opening & closing elements
• Well formed
But still cross check the defects &
Take care of duplicate id values *
4.1.2 Name, Role, Value:
For all user interface components (including but not limited to: form
elements, links and components generated by scripts), the name and
role can be programmatically determined; states, properties, and
values that can be set by the user can be programmatically set; and
notification of changes to these items is available to user agents,
including assistive technologies. (Level A)
More about Name, Role, Value
A simple checkbox built with divs.
How do u provide label for it: Accessible Name
How to you say checked/ unchecked: State
First of all is it a checkbox: Role

Conveying the important properties of a custom control

Exercise
• Take the document from the instructor and create an accessible web
page out of it.
Additional Resources
• WCAG Checklist Maxability
• ARIA Overview Maxability

• Other Trainings Maxability

• Web AIM
• WCAG Techniques
• ARIA 1.1 authoring practices
Thank you
Lets commit to make the digital content accessible for everyone.
www.maxability.co.in
www.facebook.com/maxability.co.in
@max_ability
rakesh@maxability.co.in