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 – 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

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 /intro.html /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 construction elements

Evaluation and Assessment Tools WAVE [ (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 – 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

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

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 non- text content – alt=“Site Introduction” Filenames – DSC1991.jpg – 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

Text-Only Rendering with the WAVE Toolbar

G94: Short Description, Same Purpose and Information

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 The preceding chart describes first quarter sales for...

G73: Link Adjacent to Description View a complete description here

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 Learn More About Chicago

Adjacent Image and Text Links Go to the Chicago page

Use FANGS to Simulate a Screen Reader

Use FANGS to Check Links

Providing Information in a Background Image

GUIDELINE 1.2 Time-based Media: Provide alternatives for time-based media.

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 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

SEMANTIC TABLE CONSTRUCTION Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Data Table Structure: Code Monthly Revenues Location Month Receipts Des Moines January $10000 February $12000 March $14000

H63: Use the SCOPE Attribute Assign SCOPE attribute to elements – Associates header and data cells in a table – Table demonstration with NVDA

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 clearlySome 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 = * R * G * B where R, G and B are defined as: if R sRGB <= then R = R sRGB /12.92 else R = ((R sRGB )/1.055) ^ 2.4 if G sRGB <= then G = G sRGB /12.92 else G = ((G sRGB )/1.055) ^ 2.4 if B sRGB <= then B = B sRGB /12.92 else B = ((B sRGB )/1.055) ^ 2.4 and R sRGB, G sRGB, and B sRGB are defined as: R sRGB = R 8bit /255 G sRGB = G 8bit /255 B sRGB = B 8bit /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. (L ) / (L ), 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] [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

Exercise: Provide Sufficient Color Contrast

RESIZE TEXT SC 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 sizeUser agents may not be able to adapt fixed-size text …use the tag to apply font size …use a CSS rule to apply size in EM, % or named font size The 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 TITLES 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 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 element per page Page title should reflect the content and purpose of the page To comply with iCITA standards, the title and the content should consist of similar content; this is not required by WCAG 2, Level AA

USE LANGUAGE ATTRIBUTES ON THE HTML ELEMENT 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 tag Use 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 Attribute (HTML)

IDENTIFY CHANGES IN HUMAN LANGUAGE 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: Identify Changes in Language je ne sais quoi. Bjørnen og bjørnejegeren har ikkje same meining

PROPERLY LABELED FORM CONTROLS Labels or Instructions: Labels or instructions are provided when content requires user input.

Form Labels: The Code... Name PhoneNum...

USE VALID HTML

XHTML DTDs XHTML 1.1 XHTML 1.0 Transitional XHTML 1.0 Strict

HTML DTD Examples HTML 5 HTML 4.0 Strict HTML 4.0 Transitional

Valid XHTML 1.1 Document Structure Accessible Document...Content...

validator.w3.org/#validate_by_upload

validator.w3.org/#validate_by_uri

RESOURCES

Resources