WCAG- Go beyond and be creative by Irfan Ali from ETS Princeton New Jersey

WCAG: Go Beyond and Be Creative
Irfan Ali
Educational Testing Service
1

What is WCAG?
Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in
cooperation with individuals and organizations around the glob, with a goal of providing a
single standard for web content accessibility that meets the needs of individuals,
organizations, and government internationally.
Please remember- “WCAG standards are guidelines, not law”.
2
Copyright © 2017 by Educational Testing Service. All rights reserved. ETS, the ETS logo and MEASURING THE POWER OF LEARNING
are registered trademarks of Educational Testing Service (ETS). 34728

Who needs WCAG?
WCAG are international standards use for designing, developing, and procuring. These
guidelines are useful for:
• Web Content developers
• Web authoring tool developers
• Web accessibility evaluation tool developers
• People who want or need a standard for web and mobile accessibility
3

WCAG Principles
The W3C organizes the standards into four principles:
• Perceivable – Make it easier for users to see and hear content
• Operable – Help users navigate and find content
• Understandable – Help users avoid and correct mistakes
• Robust – Maximize compatibility with current and future user tools
4

Lets talk about practical problems
To save you wading though the complete guide of WCAG, here are some examples and
explanation to consider on WCAG-friendly design.
hyperlink and button style-
• use buttons to signal clickable actions, such as “download”, “sign up”, or “log out”. If you
want something that looks and acts like a button, try to always use the “button” element
rather than styling link like a button
• If you want the user to trigger some event in clicking it, use a button
• If you want to navigate to a new page or different target on the same page, use anchor
element
http://ets-research.org/ia11ylab/ia/training/design-bootstrap/index.html
5

Design forms with labels – Need to provide clear, always visible labels for each field.
6
Better: provide clear, permanent
label for each field
Graphics source: mono company

Using colors–
• Designer often uses fancy colors to develop the UI without checking the contrast ratio
for low vision or color bling users. Designer should choose color wisely as they can
greatly impact the readability of content. The practical application of contrast means
“the visual presentation of text and images of text has a contrast ratio of at least 4.5:1”.
• Color should not be solely relied upon to convey information.
7
Graphics source: credit karma

Mis-using ARIA–
• ARIA usage – mis-use of ARIA is very common problem. First rule of ARIA is- “ARIA is
more of a band-aid. Use it carefully.”
8
<div role=“alert” aria-alive=“assertive” id=”errorMessage”
style=“display:none;”>
Please fix the errors in the form. </div>
<div role=“alert” aria-alive=“assertive” id=”errorMessage”
style=“display:block;”>
Please fix the errors in the form. </div>

Dialog Modal Implementation – Modal dialogs are very tricky to make fully accessible.
Especially for the keyboard and screen reader users. Some checkpoints to follow:
• Markup the dialog overlay appropriately
• On dialog open, set focus
• On close, return focus to last item
• Prevent mouse click outside the dialog
• Prevent tabbing outside the dialog
• Allow ESC key to close dialog
9

Using ARIA to enhance SVG accessibility–
• SVG1.1 accessibility support is limited in browsers and screen readers, but ARIA can be
used now to improve the accessibility of simple SVG.
SVG included in an img tag:
Inline SVG:
10
<img src=“img/blue-triangle.svg” role=“image” alt=“Blue Triangle”/>
<svg role=“img” aria-labelledby=“title desc”>
<title id=“title”>Red circle</title>
<desc id=“desc”>Red circle with a black border</desc>
<circle role=“presentation” cy=“60” r=“55” stroke=“black” stroke-width=“1”
fill=“red”>
</svg>

Navigability–
• Make all functionality available from a keyboard and use the focus ring to make the focus
visible
• Provide ways to help users navigate, find content, and determine where they are
• Any drag and drop feature also supports cutting and pasting to move the objects
• An application or pop-up that shows up on a user screen has the ability t be closed via a
button on the keyboard, not just clicking on the X symbol with a mouse
11

Common mistakes that developers make:
• adding unnecessary tab-index to make everything focusable
• Adding many aria-label
• Putting role on sematic elements
• Missing valid properties from custom element
• Tabs with automatic activation
http://w3c.github.io/aria-practices/examples/tabs/tabs-1/tabs.html
12

WCAG- Go beyond and be creative by Irfan Ali from ETS Princeton New Jersey

Recommended

Recommended

More Related Content

Similar to WCAG- Go beyond and be creative by Irfan Ali from ETS Princeton New Jersey

Similar to WCAG- Go beyond and be creative by Irfan Ali from ETS Princeton New Jersey (20)

Recently uploaded

Recently uploaded (20)

WCAG- Go beyond and be creative by Irfan Ali from ETS Princeton New Jersey