WCAG 2.0 AA
Cal State LA Web Working Group
WCAG 2.0
• 14 guidelines and numerous checkpoints that determine the accessibility of a web page
• WCAG creates specific tests for Section 508 compliance
• Provides 3 priorities or levels of conformance
• Priority 1 or Level A conformance was a basic requirement for some groups to
be able to use web documents
• Priority 2 or Level AA conformance indicated better accessibility and removal of
significant barriers to accessing the content
• Priority 3 or Level AAA checkpoints provided improvements to web content
accessibility
WCAG 2.0 AA and Department of Justice
• Department of Justice has made WCAG 2.0 AA compliance a requirement in several settlements
• Museum of Crime and Punishment, 2015
• EdX, 2015
• Louisiana Tech University, 2013
Cal State LA Web and WCAG 2.0 AA Compliance Effort
• Compliance Sheriff focused testing/reporting
• Most common checkpoint failures
• Biggest impact
• Section 508 A – Alternative text requirements
• WCAG 2.0 - H24; H35; H36; H37a; H45; H46; H53; F3a
• Section 508 C – Color: contrast and use of color
• WCAG 2.0 – G14b; G18; G145
• Section 508 I – Iframes and frames
• WCAG 2.0 – H64
Cal State LA Web Focused Reporting Overall Results
Division/College
CCOE
AL
BE
NSS
HHS
ECST
HC
PaGE
AA
SL
AF
UA
EM
ITS
OP
Checkpoint A
18
14
5
36
0
2
0
0
11
3
11
86
1
0
2
Checkpoint C
274
401
254
290
8
7
20
11
397
23
397
73
33
10
21
Checkpoint I
0
19
6
8
0
546
0
12
124
1
124
0
4
5
147
Link Requirements
147
298
251
128
218
273
2
9
196
6
196
48
41
34
90
Website
Cal State LA
Checkpoint A
189
Checkpoint C
2219
Checkpoint I
996
Link Requirements
1937
Cal State LA Web Focused Reporting Overall Results
Division/College
CCOE
AL
BE
NSS
HHS
ECST
HC
PaGE
AA
SL
AF
UA
EM
ITS
OP
Pages Tested
787
490
253
605
218
273
20
114
424
68
284
91
162
268
149
Pages Failed
331
331
253
373
218
273
5
26
403
31
271
84
58
44
106
Pages Passed
456
159
0
232
0
0
15
88
21
37
13
7
104
224
43
Website
Cal State LA
Pages Tested
4206
Pages Failed
2807
Pages Passed
1399
Section 508 A – Alternative Text
Description
Long Description
The objective of this technique is to provide text alternatives that serve the same purpose as the
H24 Provide text
selectable regions of an image map. An image map is an image divided into selectable regions defined by
alternatives for the area
<code>area</code> elements. Each area is a link to another Web page or another part of the current
elements of image
Web page. The <code>alt</code> attribute of each <code>area</code> element serves the same
maps (WCAG2)
purpose as the selectable area of the image.
H35 Provide text
Provide a text alternative for an applet by using the alt attribute to label an applet and providing the text
alternatives on applet alternative in the body of the applet element. Both mechanisms are required due to the varying support
elements (WCAG2)
of the alt attribute and applet body text by user agents.
H36 Use alt attributes For input elements of type 'image', the <code>alt</code> attribute of the <code>input</code> element
on images used as
is used to provide a functional label. This label indicates the button's function, but does not attempt to
submit buttons
describe the image. The label is especially important if there are multiple submit buttons on the page
(WCAG2)
that each lead to different results.
H46 When EMBED
elements are used, the
EMBED elements present functionality not available to all users. If an embedded object cannot be
NOEMBED element is viewed or is not supported by the browser then the <noembed> element should be used to direct the
required in the page
user to alternative content of the same meaningful value
(WCAG2)
Section 508 A – Alternative Text
H53 Use the body of
the object element
(WCAG2)
The objective of this technique is to provide a text alternative for content rendered using the object
element. The body of the object element can be used to provide a complete text alternative for the
object or may contain additional non-text content with text alternatives.
When using the <code>img</code> element, specify a short text alternative with the
H37a Use alt attributes
<code>alt</code> attribute. Note. The value of this attribute is referred to as "alt text". Alt text is a
on img elements
text replacement for an image which is used to explain what the image is and what it is trying to
(WCAG2)
convey to the user
H45 Use longdesc
(WCAG2)
The objective of this technique is to provide information in a file designated by the
<code>longdesc</code> attribute when a short text alternative does not adequately convey the
function or information provided in the image. The <code>longdesc</code> attribute is a <abbr
title="">URI</abbr>, the target of which contains a long description of the non-text content.
F3a Failure of Success
The CSS background-image property provides a way to include images in the document with CSS
Criterion 1.1.1 due to
without any reference in the HTML code. The CSS background-image property was designed for
using CSS to include decorative purposes and it is not possible to associate text alternatives with images that are included
images that convey
via CSS. Text alternatives are necessary for people who cannot see images that convey important
important information.
information. Therefore, it is a failure to use this property to add images to convey important
(WCAG2)
information.
Section 508 C – Color: contrast and the use of color
Description
Long Description
The objective of this technique is to ensure that when color
differences are used to convey information, such as required
form fields, the information conveyed by the color differences
are also conveyed explicitly in text.
G14b Ensure that information conveyed by color differences is
also available in text. (WCAG 2)
Check that the information conveyed is also available in text and
that the text is not conditional content.
G18 Ensuring that a contrast ratio of at least 4.5:1 exists
between text (and images of text) and background behind the
text (WCAG 2.0)
Smaller text must have higher contrast, text less than 18 point
(if not bold) and less than 14 point (if bold) to make sure that
users can read text that is presented over a background.
G145 Ensure that a contrast ratio of at least 3:1 exists between
Larger text can have lower contrast, text at least 18 point (if not
text (and images of text) and background behind the text that is
bold) or at least 14 point (if bold) to make sure that users can
at least 18 point (if not bold) or at least 14 point (if bold).
read text that is presented over a background.
(WCAG 2.0)
Section 508 I – Iframes and frames
Description
Long Description
The objective of this technique is to demonstrate the use of the
title attribute of the frame or iframe element to describe the
contents of each frame. This provides a label for the frame so
users can determine which frame to enter and explore in detail.
It does not label the individual page (frame) or inline frame
(iframe) in the frameset.
H64 Using the title attribute of the frame and iframe elements
(WCAG 2)
Note that the title attribute labels frames, and is different from
the title element which labels documents. Both should be
provided, since the first facilitates navigation among frames and
the second clarifies the user's current location.
The title attribute is not interchangeable with the name
attribute. The title labels the frame for users; the name labels it
for scripting and window targeting. The name is not presented
to the user, only the title is.
Cal State LA New Focused Web Accessibility Reports
http://www.calstatela.edu/its/ati-subset-reports
Cal State LA Web New Work Shops
• New training workshops (approach and focus)
• Sessions will focus on individual colleges/divisions reports
• How to review new focused reports
• How to correct non-compliant items in the report
• Hands on assistance
• Access to Compliance Sheriff
• Use of Compliance Deputy to test fixes