Is Your Website Accessible? Stephanie M. Brown School of Health, Physical Education, and Recreation Indiana University

Session Outline What is web accessibility? Web accessibility guidelines Evaluating your own website Resources

Web Accessibility - What it is Everyone, regardless of ability, can use the web Navigate Understand Interact Contribute If you are conveying information, everybody should have equal access to it

Disabilities to Keep In Mind Visual Blindness Low vision Color blindness Auditory Deafness Hard of hearing Physical Motor disabilities Speech Speech disabilities Cognitive/neurological Dyslexia/dyscalculia Attention deficit Intellectual disabilities Memory impairments Seizure disorders

Web Accessibility - Why is it so Important? It’s the right thing to do It’s easy to do It’s the law Section 508 ADA It can increase your market It can improve the experience for those without disabilities

What are the guidelines for evaluating accessibility? World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI). World Wide Web Consortium Web Accessibility Initiative Web Content Accessibility Guidelines Current version due out soon WCAG 1.0 versus WCAG 2.0 Applies more broadly to different technologies More comprehensive Testable Organized differently (guidelines and checkpoints versus principles and success criteria) If you conform to 1.0, you will probably conform to 2.0

Alternative Text “Provide equivalent alternatives to auditory and visual content” Be as descriptive but succinct as possible Use longdesc="my_description.txt“ if necessary Caption video and multi-media ( Lecture%20February% qt.smil) Lecture%20February% qt.smil Alt Text turned off ( necessary-for-photo-sharing-sites) necessary-for-photo-sharing-sites Not So Good – wedding photo Good – a bride feeds wedding cake to the groom

Color “Don’t rely on color alone” Information conveyed in color should also be available without color Provide sufficient color contrast

Style Sheets “Use markup and style sheets and do so properly” Pages should be readable without a style sheet Separate structure from presentation HTML and CSS ( necessary-for-photo-sharing-sites/) necessary-for-photo-sharing-sites/) Use the right DOCTYPE HTML 4.01 Transitional

Natural Language “Clarify natural language usage” Identify primary language – EN Avoid abbreviations and acronyms or write them out the first time

Tables “Create tables that transform gracefully” Avoid using tables for layouts Use CSS for style AND positioning Identify row and column headers and

Newer Technologies “Ensure that pages featuring new technologies transform gracefully” Check to make sure that pages which use scripts work when scripts are turned off ( NOSCRIPT elements Your browser does not support JavaScript!

Time-Sensitive Content Changes “Ensure user control of time-sensitive content changes” Avoid screen flicker, scrolling and text blink (

Embedded User Interfaces “Ensure direct accessibility of embedded user interfaces” Javascripts, applets, embedded video Event-handlers Use onmousedown with onkeydown

Device Independence “Design for device-independence” Input/output devices Mouse, keyboard, voice, head wand Tab indexes and access keys ( (

Interim Solutions “Use interim accessibility solutions” No pop-ups or new windows without alerting user Don’t use auto refresh

Accessible Technologies “Use W3C technologies and guidelines” HTML, XHTML and XML for structure CSS and XSL for style Avoid deprecated tags Provide alternatives to non-accessible technologies (PDF’s, etc.)

Context and Orientation Info “Provide context and orientation information” Helps users understand complex pages Group blocks of information appropriately

Navigation “Provide clear navigation mechanisms” Site map, understandable navigation, skip over navigation content Not So Good – for a description of our program, click hereclick here Good – for a description of our program, please visit our program info page. program info

Clear and Simple “Ensure that documents are clear and simple” Use simple language and grammar

How Do I Evaluate My Website? Review guidelines and plan ahead! Examine pages using graphical browsers Use different types and versions Turn off style sheets, images, etc. Examine pages using specialized browsers Text-only Screen readers Screen Reader Simulator ( Check PDF’s and other technologies PDF Read Out Loud Feature ( Validate site for accessibility when doing other validation checks Have actual users test it out

Browser Checks IE7Firefox 1.5Opera 9.2 Zoom -lower right hand side of screen -magnifying glass -up to 1000% Needs add-on-upper right hand side of screen -magnifying glass -up to 1000% Change colors -Tools, Internet Options, Accessibility, Ignore Colors -Tools, Options, Content, Colors -Tools, Preferences, Web Pages -Or User Mode Change text size -Page, Text Size, largest – smallest -View, Text Size, Increase/Decrease -Author/User Mode, A++, A+ or A Choose font -Tools, Internet Options, Fonts (webpage and plain text) -Tools, Options, Content, Fonts and Colors -Tools, Preferences, Web pages Turn off style sheets -Tools, Internet Options, Accessibility, Formatting (check all 3) -View, Page Style, No Style-User Mode Turn off images -Tools, Internet Options, Advanced, Multi-media, uncheck Show Pictures -Tools, Options, Content, uncheck Load Images -Show Images Turn off scripting -Tools, Internet Options, Security, Custom Level, Scripting, disable all -Tools, Options, Content, uncheck Enable Java and Enable Javascript -Tools, Quick Preferences, uncheck Enable Java and Javascript

Resources Web Accessibility Web Accessibility Initiative ( Web Accessibility Initiative WebAIM ( WebAIM Dive Into Accessibility ( Dive Into Accessibility Web Axe ( Web Axe IU Standards ( IU Standards Section 508 Section508.gov ( Section508.gov Validation Tools Accessify.com ( Accessify.com ATRC Web Accessibility Checker ( ATRC Web Accessibility Checker Hermish ( Hermish Cynthia Says ( Cynthia Says

Resources Browsers Lynx ( Lynx JAWS ( JAWS Screen Reader Simulator ( Screen Reader Simulator Opera ( Opera Firefox Add-ons ( Firefox Add-ons Other Colorblind Web Page Filter ( Colorblind Web Page Filter Anybrowser.com ( Anybrowser.com Using Opera to check accessibility ( Using Opera to check accessibility Magpie ( Magpie Adobe Accessibility Resource Center ( Adobe Accessibility Resource Center Flash ( Flash RIA ( RIAhttp://webaim.org/techniques/aria/ PDF Read Out Loud (