Seven Steps to a More Accessible Website Todd Weissenberger Web Accessibility Coordinator University...
-
Upload
kaylyn-crosse -
Category
Documents
-
view
226 -
download
0
Transcript of Seven Steps to a More Accessible Website Todd Weissenberger Web Accessibility Coordinator University...
Seven Steps to a More Accessible Website
Todd WeissenbergerWeb Accessibility CoordinatorUniversity of Iowa
Version 1.0 • September 2012
Training Objecti ves
• 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
Getti ng 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 non-text 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-TECHS-20101014/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
Evaluati on 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 102. The FAE also comes as a Firefox toolbar, and is compatible through Firefox version 103. Available as a stand-alone .exe
HiSoft ware 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
HiSoft ware Compliance Sheriff
HiSoft ware Compliance Sheriff
TEXT ALTERNATIVES
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.
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
Practi ces 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 alternati ves
• Placeholder text– alt=“spacer”– alt=“image1”
• Text content that does not convey the meaning of the non-text 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 Descripti on
• ALT – May be sufficient by itself for static images– Should contain information that provides same information and
function
G95: Short Text Descripti on
<img src=“wheelchairBBall.png" alt="Detail of Wheelchair
Basketball Game" />
Text-Only Rendering with the WAVE Toolbar
<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." />
G94: Short Descripti on, Same Purpose and Informati on
Long Descripti on
• 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 Descripti ons
<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 Descripti on
<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 Informati on in a Background Image
GUIDELINE 1.3
Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
USE H1-H6 TO IDENTIFY HEADINGS
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
General Guidelines
Don’t… Instead… Because……rely on font weight and size to format topic headings
…use semantic markup tags h1 through h6 to identify topic or section headings
User agents use heading markup to 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
GUIDELINE 1.4
Make it easier for users to see and hear content including separating foreground from background.
COLOR CONTRAST
SC 1.4.3: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
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), whereL1 is the relative luminance of the lighter of the foreground or background colors, andL2 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 Rati o
• 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 Suffi cient Color Contrast
RESIZE TEXT
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)
General Guidelines
Don’t… Instead… Because…
…use points or pixels to define font size
…use EM, % or a named font size User agents may not be able to adapt fixed-size text
…use the <font> tag to apply font size
…use a CSS rule to apply size in EM, % 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
GUIDELINE 2.4
Provide ways to help users navigate, find content, and determine where they are.
PAGE TITLES2.4.2 Web pages have titles that describe topic or purpose.
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
Suffi cient 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
USE LANGUAGE ATTRIBUTES ON THE HTML ELEMENT
3.1.1 The default human language of each Web page can be programmatically determined.
General Guidelines
Don’t… Instead… Because……omit the LANG (or XML:LANG) attribute in your <html> tag
Use <html lang="en"…> to clearly identify the primary human language of your page
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 Att ribute (HTML)
• <html lang="en">• <html xml:lang="en">
IDENTIFY CHANGES IN HUMAN LANGUAGE
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.
H58: Identi fy 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>
PROPERLY LABELED FORM CONTROLS
3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input.
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/xhtml1-transitional.dtd">
• XHTML 1.0 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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