Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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