Embed Size (px)
Citation preview
Most Common Accessibility Concerns and How to Address
ThemUniversity Information Technology Services
Assistive Technology and Accessibility Centers
http://go.iu.edu/MGK #DLBB @JoeHumbert(Capital M as in Mike Capital G as in Golf Capital K as in Kilo)
ATAC’s Vision Statement:Provide equal access and an inclusive environment for the IU community through the use of technology.
Located in the Wells Library, Suite [email protected](812) 856-4112
2
3
Presenters
• Brian Richwine• Manager, Assistive Technology and Accessibility Centers
• Mary Stores• Senior Alternate Media and Accessibility Specialist, Assistive Technology and
Accessibility Centers
• Joe Humbert• Principal Accessibility Analyst, Assistive Technology and Accessibility Centers
4
Outline• What is Accessibility?• Accessibility Laws, Standards, & Guidelines• Common Web Accessibility Concerns • Questions & Feedback
5
Please note:
• Please hold questions until the end• We will try to answer as many questions as we can• If not, we will answer them by email
6
What is Accessibility?
• Subset of usability• Incorporated in principals of Universal Design (UD) and UD for Learning• Department of Justice and Education definition
• “…a student can acquire the same information, engage in the same interactions, and enjoy the same services as sighted [non-disabled] students with substantially equivalent ease of use.” – Joint "Dear Colleague" Letter: Electronic Book Readers
• Simply put:• Providing “access” regardless of how a user chooses to consume the content
7
Laws / Policies / Standards / Guidelines
• LAWS• Americans with Disabilities Act (A
DA) as Amended• Prevent discrimination
• Section 504, Rehabilitation Act of 1973
• Prevent discrimination • Particularly for Higher Education
• University Policy• UA-02 ADA Policy
• IU’s adherence to Federal ADA
• Guidelines & Standards• W3C Web Content Accessibility
Guidelines (WCAG) 2.0 A & AA• Section 508 Standards• Guidance
on Applying WCAG 2.0 to Non-Web Information and Communications Technologies (WCAG2ICT)
• Authoring Tool Accessibility Guidelines (ATAG) 2.0
8
Common Web Accessibility Concerns
• Text Language• Page Title• Appropriate Heading Structure• Clear and Descriptive Link Text• Meaningful HTML Markup• Alternate Text for Meaningful Images• Captioned Video and Transcripts for Audio• Careful Use of Color and Avoid Sensory Dependent Instructions• Keyboard Accessibility
9
Text Language
• Specify the default language of the document in the <HTML> element• Use appropriate language codes and sub-language codes (Country Code)• XHTML
• <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
• HTML 5• <html lang="en-US">
• Identify language changes in the content• Same attributes on individual elements
• <span lang="es-MX">se habla español!</span>
10
Page Title
• Provide an unique, succinct, yet descriptive title for EVERY webpage• Recommendations
• Put most relevant content first• Use similar text to the main heading• Example: “Evaluation Services - Access Center - Access University”
• <title>Evaluation Services - Access Center - Access University</title>
• Avoid• Extraneous Words• Example of poor page title: “Home”
11
Appropriate Heading Structure
• Mark up sections of content with HTML headings of appropriate level• Recommendations
• Start each section with a heading• Nest headings in a outline format (h2, h3, h4 ,h5)
• Avoid• Marking up content as a heading for the visual look• Skipping heading levels (h1, h3, h3, h5)• Marking up solitary content as a heading• Really long headings (entire sentence)
Use Heading Elements
Use: <h1>Herald Times Online</h1> <h2>Headlines</h2>
Not:
<div class="mainHeading">Headlines</div>
12
13
Appropriate Heading Structure - ExamplesGood Heading Structure• h1. Evaluation Services
• h2. Evaluation Request Form• h2. IT accessibility evaluations• h2. Consultations• h2. Training video• h2. Overview• h2. Helpful links
• h3. Connect with Access• h3. Site Navigation• h3. Access IT• h3. Contact Us
• h4. Springfield• h4. Franklin
Poor Heading Structure• h3. Evaluation Services
• h1. Se habla espanol!• h2. Overview
• h3. connect with Access• h6. Site Navigation• h6. Access IT• h6. Contact Us
• h5. Springfield• h5. Franklin
Clear and Descriptive Link Text
Avoid non-unique, non-descriptive text: <a href="…">Click here</a>
14
Avoid “Click here” LinksHere is how “click here” links appear to a screen-reader user. Which would you chose?
15
Keep It Meaningful
Don’t let a screen-reader user’s experience look like this:
Logo Banner Logout My Workspace ETS Supervisors UIE Seminars Student Portal Go-To Network My Active Sites Press alt + up and down arrows to scroll through menu Fall 2007 accessible site Summer 2010 testing bspace OTHER My Workspace PROJECTS Doing Disability Working Group ETS Supervisors Go-To Network Identity and Access Management Student Portal UIE Seminars Hidden Sites are not included in this menu. Access them in My Workspace -> Worksite Setup. To hide a site, go to My Workspace - > Preferences -> Customize Tabs. Tools begin here Home Site Setup My Files Membership Schedule Announcements Preferences Account Need Help? Content begins here Message of the Week Help for Message of the Week Options Welcome, Summer Session students and instructors! Would you like to create a site for the course you're teaching? Look here for more help. Have questions about what you can or cannot do within bSpace? Visit these FAQs, organized by campus role, to learn more. Instructors: As the end of the semester approaches, be sure to consult our online tools and services for help with processing and posting grades on
16
It Can be MeaningfulBy using the appropriate HTML Markup, a screen-reader user’s experience can be more like:
Logo Banner
Logout
• My Workspace
• ES 101A--Social Science Methods
• UIE Seminars
• 20TH-C LIT THEORY Sp10
• 5TH YR JAPANESE B Sp10
• My Active Sites
Fall 2009
• UIE Seminars
Spring 2010
• 20TH-C LIT THEORY Sp10
• 5TH YR JAPANESE B Sp10
• ES 101A--Social Science Methods17
18
Meaningful HTML Markup• Put thought and planning into the structure of your webpage code• Recommendations
• Markup groups of related content as… lists (ordered, unordered, definition)• Markup quotes (short and block) as blockquotes• Provide row and/or column headers for tabular data tables• Provide a summary for complex tables (interactive headers, spanning rows,
etc.)• Use CSS to modify visual style
19
Meaningful HTML Markup (Cont.)• Put thought and planning into the structure of your webpage code• Avoid
• Using HTML elements for visual presentation that have semantic meaning• Using tables for layout• Adding accessibility information to tables used for layout• Static lists of only one item
20
Meaningful HTML Markup – Example code• Lists
• <ul> <li><a href="home.htm">Home</a></li> <li><a href="about.htm">About us</a></li> <li><a href="contact.htm">contact us</a></li></ul>
• Blockquotes• <blockquote>“To be, or not to be, that is the question” <footnote> -<em>Hamlet</em>, William Shakespeare </footnote></blockquote>
21
Meaningful HTML Markup – Example code• Data tables
• <table> <tr> <th>Name</th> <th>Gender</th> <th>Birth Month</th> </tr> <tr> <th scope="row">Joe</th> <td>Male</td> <td>June</td> </tr> <tr> <th scope="row">Mary</th> <td>female</td> <td>July</td> </tr><table>
22
Alternative Text for Meaningful Images• Provide descriptive text for meaningful and important images• Recommendations
• Describe the purpose of the image• Keep the text short and sweet (8-10 words)• If the description is really long, include it in the content or on a separate page• Charts, graphs and complex images will need a separate alternative• If the image contains text, replicate the original text. Summarize if lengthy• For links with images, describe the destination not the image itself• Provide no alt text (alt="") or use background images for decoration
23
Alternative Text for Meaningful Images (Cont.)• Provide descriptive text for meaningful and important images• Avoid
• Providing alternative text for decorative images (spacers, boxes, lines)• Words that will already be conveyed (link, image, graphic)• Using the file name as the alternative
24
Alternative Text for Meaningful ImagesExample code• Meaningful images
• <img alt="Southern Association of Developers Access Award" src="files/award.jpg">
• Links with an Image• <a class="accred" href="[url]"><img alt="Accreditation information for Access University from the Accessible Learning Commission" src="files/11_alc_ema_accred.jpg"></a>
• Decorative images• <img alt="" src="files/spacer.jpg">
25
Captioned Video and Transcripts for Audio• Provide Text-based and synchronized alternatives for multimedia• Recommendations
• Provide synchronized captions for video• If producing your own captions, follow captioning guidelines and best practices• Provide a transcript for audio files• Provide lead time for captioning (rush jobs cost extra $$$)• It is ok to lightly edit transcripts and captions (you can remove ums and ahs)
• Avoid• Using unedited YouTube automated captions (most need at least minor edits)
Make Careful Use of ColorDo not use color as the sole means of indicating information – non-visual users will have no idea about color changes:
26
27
Careful Use of Color/Sensory Independence• Never use color by itself to convey information, choose colors wisely• Recommendations
• Choose color combinations with high contrast (>4.5:1)• Check you color combinations for high contrast [WebAIM Contrast Checker]
• Avoid • Sensory information, If at all possible (click the blue button on the left)• Using color by itself for important information (complete the fields in red)• Color combinations that have known issues (red/green, blue/yellow)
Color blindness Wikipedia
Sufficient ContrastThe colors chosen for text need to have sufficient contrast with the background.Many people have some form of color blindness and people with low-vision need high-contrast for ease of reading.
28
Guessing the Brightness Contrast Level
Understanding what provides high and low brightness contrast can be challenging. What has more contrast here?
For example, apply the grayscale view to this slide and see the effect on the two colors of text used.
29
30
Keyboard Accessibility• Ensure all interactive content is accessible with the keyboard• Recommendations
• Enhance visual indication of keyboard focus to match hover state• If modifying common keystrokes, provide text instructions• Test all interactions and navigation order with keyboard (Tab, Enter, and Space)
• Avoid• Using scripting to trigger interactive events, when possible (use native code)• Taking over control of/trapping the keyboard• Removing visual indication of keyboard focus• Triggering events on Blur, Focus, Input, etc.
31
Keyboard Accessibility – Example codeKeyboard only users need to know where they are in navigating a page! Web browser software uses the outline property to indicate which element has focus.Visual indication of keyboard focus
a:focus {Outline: thin dotted [color];
}
32
Demo Time!
• Live Demos with screen reading software and keyboard• To try the demo out yourself
• Inaccessible: https://atac.iu.edu/index2.php• Accessible: https://atac.iu.edu/
33
Helpful Resources:Helpful Accessibility Info:
• WCAG 2.0 Techniques: http://www.w3.org/TR/WCAG20-TECHS/ • WebAIM’s Resources: http://webaim.org/resources/
Tools:• Online: WAVE by WebAIM: http://wave.webaim.org/ • aXe DevTools by Deque Labs:
https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/?src=api • Web Accessibility Quick Check Tool for Firefox:
http://blrichwine.github.io/W15yQC/
Contrast AnalyzersColor Contrast Analyzer Tools:• Software (Mac or PC):
http://www.paciellogroup.com/resources/contrastAnalyser• Online:
snook.ca Contrast Tool:http://snook.ca/technical/colour_contrast/colour.html
34
