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