Download DOCTYPE html - MyWeb

Seven Steps to a More Accessible Website
Todd Weissenberger
Web Accessibility Coordinator
University of Iowa
Version 1.0 • September 2012
Training Objectives
• Gain a fundamental understanding of web accessibility and its
role in site design at Iowa
• Understand how to obtain and use a selection of tools to
evaluate the accessibility of your site
• Experience a variety of techniques intended to improve
overall web accessibility
Getting Started
• Download files from http://myweb.uiowa.edu/tmweiss/7/
– Scenario pages
– Utilities
– Bookmark this page for plug-in installation
• Locate Adobe Dreamweaver CS5
– Web editor
WEB ACCESSIBILITY OVERVIEW
Web Accessibility Project Status Report
• Policy pending ratification
• WCAG 2.0, Level AA Compliance indicated by policy
• Units should now:
– Build new web content with accessibility in mind
– Develop accessibility assessment and remediation strategy
– Request initial evaluation from Web Accessibility Coordinator
WCAG 2.0, Level AA Accessibility Guidelines
• Worldwide standard since December, 2008
• Adopted or under consideration by all CIC institutions, and
numerous other entities
• Twelve basic guidelines governing accessible HTML, scripting,
media and other web content
• http://www.w3.org/TR/WCAG20/
Perceivable
• 1.1 Text Alternatives: Provide text alternatives for any nontext content so that it can be changed into other forms people
need, such as large print, braille, speech, symbols or simpler
language.
• 1.2 Time-based Media: Provide alternatives for time-based
media.
• 1.3 Adaptable: Create content that can be presented in
different ways (for example simpler layout) without losing
information or structure.
• 1.4 Distinguishable: Make it easier for users to see and hear
content including separating foreground from background.
Operable
• 2.1 Keyboard Accessible: Make all functionality available from
a keyboard.
• 2.2 Enough Time: Provide users enough time to read and use
content.
• 2.3 Seizures: Do not design content in a way that is known to
cause seizures.
• 2.4 Navigable: Provide ways to help users navigate, find
content, and determine where they are.
Understandable
• 3.1 Readable: Make text content readable and
understandable.
• 3.2 Predictable: Make Web pages appear and operate in
predictable ways.
• 3.3 Input Assistance: Help users avoid and correct mistakes.
Robust
• 4.1 Compatible: Maximize compatibility with current and
future user agents, including assistive technologies.
Techniques
• W3 specifies two categories of techniques
– Sufficient Techniques
– Advisory Techniques
• http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS20101014/intro.html
SITE ASSESSMENT
Site Assessments
• Self-Assessment
– Performed by site managers prior to initial Web Accessibility
Evaluation
– Addresses “low-hanging fruit” and common compliance flags
– Likely to catch numerous occurrences of non-conforming code
• Site assessment by ITS Web Accessibility Coordinator
– Automated evaluation tool
– Recommendations and best practices
– Assistance with remediation/rebuilding
Common Compliance Issues*
•
•
•
•
•
•
•
Missing or inadequate text equivalents
Insufficient color contrast
Missing LANG attribute
Non-adaptive font size
Nested headings
<table> construction
<form> elements
Evaluation and Assessment Tools
•
•
•
•
•
•
•
WAVE [http://wave.webaim.org] (free)1
Functional Accessibility Evaluator [fae.cita.uiuc.edu] (free)2
A-Checker [achecker.ca] (free)
Juicy Studio [juicystudio.com]
Web Developer Toolbar
AIS Toolbar for IE [visionaustralia.org.au] (free)
Colour Contrast Analyser [visionaustralia.org.au] (free)3
1. WAVE also comes as a Firefox toolbar, and is compatible through Firefox version 10
2. The FAE also comes as a Firefox toolbar, and is compatible through Firefox version 10
3. Available as a stand-alone .exe
HiSoftware Compliance Sheriff
• HiSoftware Compliance Sheriff
– Adopted by the University of Iowa
– Licensed to Web Accessibility Project to perform automated site
testing
•
•
•
•
•
Analyzes multiple navigation levels
Customizable checkpoints
Yields a variety of results and reports
Maps occurrences to WCAG 2.0 checkpoints
Results can be updated manually
HiSoftware Compliance Sheriff
HiSoftware Compliance Sheriff
Guideline 1.1 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.
TEXT ALTERNATIVES
General Guidelines
Don’t…
Instead…
Because…
…neglect the ALT text
…provide ALT text (usually)
User agents require ALT
text to convey the
meaning of an image
…use filenames or
placeholder text as
ALT content
…use text that meaningfully conveys the
information and serves the purpose of
the non-text element
Filenames and
placeholder text have no
meaning
…forget to update
ALT text when
necessary
…keep ALT text up-to-date as images and
other non-text content changes
…the ALT text should
clearly convey the
meaning of the element
…add ALT text to
images that should
be ignored
…use an empty ALT attribute for spacers
and decorative images
…this removes any
uncertainty on the part of
the user
…use CSS to include
images that convey
critical information
…ensure that images that convey critical
information are available to user agents
CSS-provided images
cannot convey content to
most user agents
WCAG Techniques (Selected)
GENERAL
•
•
G94: Providing short text alternative
G95: Providing short text alternatives that
provide a brief description of the non-text
content AND
–
–
–
•
•
G92: Providing long description for non-text
content that serves the same purpose and
presents the same information using a long
text alternative technique listed below
G74: Providing a long description in text near
the non-text content, with a reference to the
location of the long description in the short
description
G73: Providing a long description in another
location with a link to it that is immediately
adjacent to the non-text content
G82: Providing a text alternative that
identifies the purpose of the non-text
content
G100: Providing the accepted name or a
descriptive name of the non-text content
using a short text alternative technique
HTML
•
•
•
•
•
•
H67: Using null alt text and no title attribute
on img elements for images that AT should
ignore
H2: Combining adjacent image and text links
for the same resource
H37: Using alt attributes on img elements
H24: Providing text alternatives for the area
elements of image maps
H30: Providing link text that describes the
purpose of a link for anchor elements
H45: Using longdesc
Practices to Avoid:
• Using a filename or path as ALT text
• Redundant ALT text: when descriptive text exists adjacent to a
non-text element, use an empty ALT attribute
• Placing important information in background images
Non-compliant text alternatives
• Placeholder text
– alt=“spacer”
– alt=“image1”
• Text content that does not convey the meaning of the nontext content
– alt=“Site Introduction”
• Filenames
– DSC1991.jpg
– 20110411.png
Describing Non-Text Content
• Short description (can provide the same information and
function as non-text)
• Long description is necessary to provide same information
and function as non-text)
– Adjacent to non-text content
– Linkable from non-text content
– Reference via LONGDESC (deprecated in HTML 5)
Display ALT text with the Web Developer Toolbar
Assess a page with the WAVE Toolbar
ALT Text: Short Description
• ALT
– May be sufficient by itself for static images
– Should contain information that provides same information and
function
G95: Short Text Description
<img src=“wheelchairBBall.png"
alt="Detail of Wheelchair
Basketball Game" />
Text-Only Rendering with the WAVE Toolbar
G94: Short Description, Same Purpose and Information
<img src="braille.png"
alt=“Diagram of Braille letter W, a
single raised dot in the center left
position and raised dots in the top,
middle and bottom right positions." />
Long Description
• Actually two descriptions
– A short description that describes the image in brief
– A long description that conveys the information contained in the
image
• Long description can include:
– Descriptive content immediately adjacent to the image (G73)
– A link or reference to descriptive content in another location (G74)
– Use of the LONGDESC attribute to identify the URI of a long
description of the non-text element
G74: Long and Short Descriptions
<img src="q1_chart.png“
alt="Q1 Regional Sales Chart. Details follow the chart" />
<p>The preceding chart describes first quarter sales for...</p>
G73: Link Adjacent to Description
<img src="q1_chart.png" alt="First Quarter Sales Chart, 2010" />
<a href="q1_chart.html">View a complete description here</a>
H2: Adjacent Image and Text Links
• When a graphical element acts as a link and is adjacent to a
text link to the same resource, the two items should be
combined
• The repetition of the links may cause confusion or
disorientation among some users
H2: Adjacent Image and Text Links
Adjacent Image and Text Links
<a href="http://www.chicagoreader.com">
<img src="common/images/chi.jpg“
alt="LearnMore About Chicago" /></a>
<a href="http://www.chicagoreader.com">
Learn More About Chicago</a>
Adjacent Image and Text Links
<a href="http://www.chicagoreader.com">
<img src="common/images/chi.jpg" alt="" />
Go to the Chicago page</a>
Use FANGS to Simulate a Screen Reader
Use FANGS to Check Links
Providing Information in a Background Image
Create content that can be presented in different ways (for example
simpler layout) without losing information or structure.
GUIDELINE 1.3
1.3.1 Info and Relationships: Information, structure, and relationships
conveyed through presentation can be programmatically determined or
are available in text. (Level A)
USE H1-H6 TO IDENTIFY HEADINGS
General Guidelines
Don’t…
Instead…
Because…
…rely on font
weight and size to
format topic
headings
…use semantic markup tags h1
User agents use
through h6 to identify topic or section heading markup to
headings
identify and navigate
through topics
…apply improperly
nested headings
out of order
…nest headings in a meaningful
outline order
User agents use the
headings to relate the
outline of a page
…use heading
markup solely to
produce a visual
text effect
…use CSS appropriate to the content
in question
Assistive technology will
convey information
about the content as
though it were a
heading
Display Page Outline from the WAVE Toolbar
Logical Structure/Heading Order
Text-Only Viewing
Simulated Screen Reader Output
Screen Reader Output
Make it easier for users to see and hear content including separating
foreground from background.
GUIDELINE 1.4
SC 1.4.3: The visual presentation of text and images of text has a contrast
ratio of at least 4.5:1
COLOR CONTRAST
General Guidelines
Don’t…
Instead…
Because…
…select foreground
and background
colors with poor
contrast
…use colors that contrast clearly
Some users may be
unable to discern subtle
differences in color
…apply a
foreground or
background color
by itself
…apply foreground and background
colors to the same object, or forego
foreground and background colors
altogether
A foreground or
background color by
itself may overrise a
user’s local settings,
resulting in insufficient
contrast
…use color alone to
convey meaning
…use text to clarify color-coded page
elements
Screen readers don’t
express color; therefore
the meaning is lost for
screen reader users
G18: Color Contrast
Measure the relative luminance of each letter (unless they are all uniform) using the formula:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:
if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4
and RsRGB, GsRGB, and BsRGB are defined as:
RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255
The "^" character is the exponentiation operator.
Note: For aliased letters, use the relative luminance value found two pixels in from the edge of the letter.
Measure the relative luminance of the background pixels immediately next to the letter using same formula.
Calculate the contrast ratio using the following formula.
(L1 + 0.05) / (L2 + 0.05), where
L1 is the relative luminance of the lighter of the foreground or background colors, and
L2 is the relative luminance of the darker of the foreground or background colors.
Check that the contrast ratio is equal to or greater than 4.5:1
Color Contrast
• Contrast levels defined in WCAG standard
• Sufficient text/background contrast levels can vary according
to text size and weight
• Juicy Studio (or other tool) can evaluate for sufficient contrast
– [Colour Contrast Ratio Analyser]
Contrast Ratio
• Text and images of text have a contrast ratio of at least 4.5:1
• 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 have no contrast requirement
•
•
•
•
Decorative
Inactive
Hidden or not visible
A component of a larger image
– Logotypes: Text that is part of a logo or brand name has no minimum
contrast requirement.
Specify Text and Background Colors
body
}
{
background-color: #ccc;
color: #000;
Analyze Contrast in JuicyStudio
http://juicystudio.com/services/luminositycontrastratio.php
Exercise: Provide Sufficient Color Contrast
SC 1.4.4 Resize text: Except for captions and images of text, text can be
resized without assistive technology up to 200 percent without loss of
content or functionality. (Level AA)
RESIZE TEXT
General Guidelines
Don’t…
Instead…
Because…
…use points or
…use EM, % or a named font size
pixels to define font
size
User agents may not be
able to adapt fixed-size
text
…use the <font> tag …use a CSS rule to apply size in EM, %
to apply font size
or named font size
The <font> tag is
deprecated, and no
longer supported by
most user agents
Use %, EM or Named Font Size (C12)
•
•
•
•
Pixels and points don’t scale
Use EM, % or a named font size to define text size
1 em = 100% = 12pt = 16px (roughly)
Consider setting a base font-size in a body rule, and scale from
there
Set Font-Size Globally
• Set a base font-size for the body
• For context, assume a default size of 16px (12pt)
body
}
{
font-size:125%;
Use EM to set container width
• EM will reflect the effective font size as inherited from the
container’s parent
• Try different EM-sized column widths and adjust as needed
div#sidebar
{
width:14.9em;
float:right;
border-left:solid .1em #000;
font-size:1.2em;
}
Other WCAG Techniques
• G142: Using a technology that has commonly-available user
agents that support zoom
• G178: Providing controls on the Web page that allow users to
incrementally change the size of all text on the page up to 200
percent
• G179: Ensuring that there is no loss of content or functionality
when the text resizes and text containers do not resize
• G146: Using liquid layout
Exercise: Construct Resizable Text
Provide ways to help users navigate, find content, and determine where
they are.
GUIDELINE 2.4
2.4.2 Web pages have titles that describe topic or purpose.
PAGE TITLES
General Guidelines
Don’t…
Instead…
Because…
…forget to apply a
title to your page
…include a page title in the <head>
section of your page (H25)
This can help users
orient themselves
within your site
…use a generic
page title across a
number of pages
…use a descriptive title (G88)
This can assist users in
understanding the
purpose of the current
page
Sufficient Techniques
•
•
•
•
G88 and H25
Only use one <title> element per page
Page title should reflect the content and purpose of the page
To comply with iCITA standards, the title and the <h1> content
should consist of similar content; this is not required by WCAG
2, Level AA
3.1.1 The default human language of each Web page can be
programmatically determined.
USE LANGUAGE ATTRIBUTES ON THE
HTML ELEMENT
General Guidelines
Don’t…
Instead…
Because…
…omit the LANG (or Use <html lang="en"…> to clearly
XML:LANG)
identify the primary human language
attribute in your
of your page
<html> tag
Screen readers and
Braille outputs can
adapt content based on
human language
…forget the
language code
Use the appropriate two-character
language code, or a sub-code (en-US)
to identify the language of your page
The user agent uses the
language code to adjust
pronunciation, add
additional code, etc.
…use the wrong
version of LANG
Use LANG="" or xml:lang="",
depending on the DTD of your
document
HTML and XHTML
support the lang
attribute differently
H57: Language Attribute (HTML)
• <html lang="en">
• <html xml:lang="en">
3.1.2 The human language of each passage or phrase in the content can
be programmatically determined except for proper names, technical
terms, words of indeterminate language, and words or phrases that have
become part of the vernacular of the immediately surrounding text.
IDENTIFY CHANGES IN HUMAN
LANGUAGE
H58: Identify Changes in Language
<span lang="fr">
je ne sais quoi
</span>.
<blockquote xml:lang="no">
Bjørnen og bjørnejegeren har ikkje same meining
</blockquote>
3.3.2 Labels or Instructions: Labels or instructions are provided when
content requires user input.
PROPERLY LABELED FORM CONTROLS
Form Labels: The Code
<table border="0" cellspacing="4" cellpadding="2"
width="420">
...
<label for=“Name”>Name</label>
<input id="Name" size="40" />
<label for=“PhoneNum”>PhoneNum</label>
<input id="PhoneNum" size="40" />
...
</table>
USE VALID HTML
XHTML DTDs
• XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
• XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
• XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
HTML DTD Examples
• HTML 5
<!DOCTYPE html>
• HTML 4.0 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
• HTML 4.0 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Valid XHTML 1.1 Document Structure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml“ lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accessible Document</title>
</head>
<body>
...Content...
</body>
</html>
validator.w3.org/#validate_by_upload
validator.w3.org/#validate_by_uri
RESOURCES
Resources
•
•
•
•
•
http://www.w3.org/TR/WCAG20-TECHS/intro.html
http://www.webaim.org
http://www.w3schools.com/quality/quality_accessibility.asp
http://www.csszengarden.com
http://itaccessibility.uiowa.edu