Accessible Web Sites: What can you do?
Upcoming SlideShare
Loading in...5
×
 

Accessible Web Sites: What can you do?

on

  • 3,763 views

Presented at a Leadership Institute webinar for the Montana Arts Council in May 2012. Primarily a talk discussing the concepts behind the WCAG 2.0 guiding principles....

Presented at a Leadership Institute webinar for the Montana Arts Council in May 2012. Primarily a talk discussing the concepts behind the WCAG 2.0 guiding principles.

Based on the December presentation for the Montana web programmers meetup, but modified for the audience.

Statistics

Views

Total Views
3,763
Views on SlideShare
3,759
Embed Views
4

Actions

Likes
3
Downloads
2
Comments
0

3 Embeds 4

http://www.linkedin.com 2
https://si0.twimg.com 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Accessible Web Sites: What can you do? Accessible Web Sites: What can you do? Presentation Transcript

    • Accessible Web SitesWHAT CAN YOU DO?
    • Who am I? - A web designer and programmer - An advocate for web accessibility - A writer on practical accessibility - Read more at http://www.joedolson.com
    • What am I going to talk about? 1) Overview of web accessibility principles 2) Examples of testing methods (with and without tools) 3) Tools and resources for further work.
    • Web Accessibility: An Overview
    • Fundamentals - Techniques: - Technology specific - Rapidly changing as technology shifts - Principles: - Technology independent - Change as research learns more about human cognition
    • Knowing principles helps you learn techniques
    • Web Content Accessibility Guidelines v.2Principles: - Perceivable - Operable - Understandable - Robust
    • Perceivable - your product can be perceived regardless of disability.People who cannot use one or more of their senses can stillobtain the information on your web site.
    • Perceivability Red Flags: - Is information contained in an image? A sound file? Avideo? - Does the information require specific knowledge tointerpret, such as awareness of position on the page or color? - Does the document use HTML headings? - Does the documents contrast meet minimumspecifications?
    • Perceivability Requires Imagination - Imagine the MANY possible ways to access your site: - If the user cannot hear sounds (no speakers, Deaf orHard of Hearing) - If the user cannot see images (non-image renderingbrowser, blind or sight-impaired) - If the user is not using the site as you laid it out (re-drawn by a mobile browser or linearized by a screen reader)
    • Operable - your product can be operated regardless of disability.People who cannot use one or more of their senses can stillperform actions such as navigation, purchasing, orcommunicating at your web site.
    • Operability Red Flags - Can you easily distinguish link text from other text on thesite? - When navigating without a mouse, can you tell whereyou are in the site? Is the navigation order logical? - On a form, can you navigate the form without a mouse?Do you have to use fine motor skills to successfully selectoptions? - Do pages have unique titles? - Are links clearly labeled? (e.g. not “Read more” or “Clickhere”)
    • Both menus have the“Express Free” optionselected. The left isusing a keyboard.
    • Operability is ComplicatedWhen it comes to forms and complex applications such asvideo players, operability is very difficult to test thoroughlywithout specialized knowledge and tools. However, thekeyboard test is a good start for any issue.
    • UnderstandableThe Information on and operation of the site must beunderstandable. Users must be able to understand theinformation as well as the operation of the user interface.
    • Understandability Red Flags - Are interface methods consistent with expectations?Links should be underlined; other text not. - Is navigation consistent from one page to the next? - Are functions identified consistently? (“Search” on onepage and “Find” on another) - In a form, is it clear what information is needed and howto enter it? (Dates, phone numbers, and other formatted datain particular.) - Is the language of the document specified?
    • Robust - Your site is built according to standards.A site is robust if it will be maximally usable on a wide range ofbrowsers or devices; building with W3C HTML standards helpsensure that it will be usable on future devices or browsers.Validating your site with the W3Cs validator tool is theprimary test for this: http://validator.w3.org
    • Questions?
    • Seeing with other eyesTESTING WITHOUT TOOLS
    • Testing doesnt always need special tools - Understanding how people with disabilities use a site - Learning how to see potential problems - Applying the principles of accessibility
    • Think like assistive technology - Imagining you are blind isnt sufficient; you also have tothink like a machine - You have to understand what information is available tothe computer.This form of testing is only an overview: it cant detect everyproblem. It can forestall endemic issues, however.
    • The Blind Experience - Is keyboard dependent. - Uses complex keyboard commands - Gets information about visual objects from related textCan links be visited via keyboard? Form fields? Submitbuttons? Are form responses announced when a form issubmitted? Has the web site defined keyboard controls whichmay conflict with the assistive technology? Do images andmedia files have text equivalents?
    • Low vision or partial sight. - Use OS tools or assistive technology with screenmagnification - May adjust browser settings to increase font size - May use alternate contrast schemes - May have narrow field of visionIs all text visible when the font size is enlarged? Are linelengths too long using screen magnifiers? Is contrastsufficient for text to be legible with poor light perception orcolor blindness? Do instructions depend on coloridentification for success?
    • Reduced motor skills. - May use a mouse, but have difficulty controlling it withprecision. - May be keyboard dependent. - May use special pointing devices such as a mouth stick,head wand, or eye tracker.Are clickable areas large enough to activate using less refinedpointing devices such as a mouth stick or head wand? Iskeyboard focus visible, so keyboard dependent users can tellwhat they are currently activating?
    • Cognitive Limitations. - May need extra time to complete time-based tasks. - May become confused if navigation or layout of sitechanges significantly from page to page - May need orientation tools to return to previous pages - May be highly distracted by motion or soundConcerns relating to learning disabilities range broadly acrossissues with recall, comprehension, reading skill, attention, andspatial cognition. Use of contrast, color coordination ofrelated items, choice of fonts, and simplification of writtentext are among the rich variety of strategies for supportingthese issues.
    • Refining perceptionsTOOLS AND RESOURCES
    • Overview of testing.The best testing is to put a group of assistive tech users infront of your site, and set them tasks to accomplish. This is,obviously, beyond the means of most developers and clients.The compromise is threefold: - Limit use of newer, less-tested technologies. - Research new features thoroughly. - Do as much testing as you can.
    • General purpose tools (free!).- Firefox Accessibility Toolbar: http://bit.ly/firefox-toolbar- Internet Explorer Accessibility Toolbar:http://bit.ly/ie-toolbar- WebAIMs WAVE tester: http://wave.webaim.org- Windows Ease of Access: http://bit.ly/ease-of-access- MacOS Accessibility: http://bit.ly/mac-access
    • WAVE
    • WAVE results Red: definite error Green: Yay! Yellow: needs human verification
    • Color contrast testing tools (free!).- Firefox ColorZilla extension: http://bit.ly/color-zilla- Graybit.com: http://bit.ly/u12eSu- Color contrast comparison tool:http://bit.ly/color-compare- Color contrast exploration tool:http://bit.ly/color-explore- ColorPic eyedrop tool: http://bit.ly/colorpic
    • MT.gov results: shows all defined contrasts
    • Screen reader tools (free).- WebAnywhere: (web) http://bit.ly/web-anywhere- NVDA: (Windows) http://www.nvda-project.org/- VoiceOver: (Mac) – its built in!Screen reader tools (not at all free).- JAWS: http://bit.ly/jaws-reader- Window-Eyes: http://bit.ly/rBlRYW- Zoomtext: http://www.aisquared.com/zoomtext/+ many, many others.
    • Secondary Tools.- W3C HTML Validator: http://validator.w3.org/- W3C CSS Validator: http://jigsaw.w3.org/css-validator/- W3C Semantic Extractor: http://bit.ly/vBKMyy- HTML 5 Outline Generator: http://bit.ly/w02s3J
    • MT.gov:HTML validator results - Validator resultsrequire significantexpertise to fullyUnderstand.
    • Finding more information.- WCAG Recommended Techniques: highly technical, thoughsimpler than the WCAG itself.http://www.w3.org/TR/WCAG-TECHS/- WebAIM: Simplified summaries, recommendations.Extensive documentation on almost every accessibility topic:http://webaim.org- University of Minnesota, Duluth Web Design References:Extensive curated catalog of accessibility articles on the web:http://bit.ly/t3tPZC