• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Accessibility Check-Up

Accessibility Check-Up



Doing an efficient, high-level evaluation of your website

Doing an efficient, high-level evaluation of your website



Total Views
Views on SlideShare
Embed Views



4 Embeds 435

http://etechlib.wordpress.com 432
http://thisninja 1
https://twitter.com 1
https://etechlib.wordpress.com 1



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.


Accessibility Check-Up Accessibility Check-Up Presentation Transcript

  • AccessibleWebScott WilliamsOffice of Institutional Equityswims@umich.edu@swimsy
  • Accessibility Checkup
  • Visual inspection Tiny type and small mouse targets Poor color contrast Continuous motion or sound (the modern equivalent of <blink>) Busy or cluttered layout, complicated menus Videos are captioned
  • Big items You should be able to operate entire site from keyboard alone Readability: font size and contrast Links should be uniquely identifying and descriptive Linked images MUST have alt text describing destination page Form elements should be labeled properly Videos must be captioned
  • Evaluation tools Keyboard — using your tab, arrow, and enter keys AChecker — Online accessibility checker WAVE — Firefox browser add-on toolbar Contrast Color Checker — Firefox browser add- on with results displayed in table format Mobile devices
  • The keyboard Keyboard accessibility is one of the cornerstones of web accessibility Screen reader users and those with motor impairments cannot use a mouse You should be able to easily navigate to any part of your web pages or website and perform all functionality using just the keyboard Procedure: http://www.umich.edu/webaccess/eval/keyboard.ht ml
  • Testing keyboard accessibility  Unplug your mouse  Employ the tab, arrow, return, and spacebar keys  Tab through the entire page. Note sequence. Can you see keyboard focus?  Operate menus and widgets  Submit forms
  • Potential problems Excessive tabbing to reach main content  Solution: employ skip-to-content link that has visible focus Links not visible on keyboard focus  Solution: Add a:focus style to highlight focus Javascript elements not keyboard accessible or harbor “keyboard traps”  Solution: Employ ARIA to ensure keyboard a11y Excessive number of links  Solution: Consider chunking page differently, going “narrower and deeper” with the IA
  • AChecker An online accessibility evaluator. On a single page:  cites the line number of the accessibility violation  shows the errant code  gives the appropriate remediation  links to a resource page specific to the problem Concentrate on “Known Problems” category.
  • Possible issues Lack of alt text for images Lack of labels for form elements Color contrast Mouse event handlers
  • AChecker screen shots
  • Achecker screen shot 2
  • Using AChecker Enter URL of site you are affiliated with Select compliance level under “Options” link If an authenticated page:  View source
  • WAVE Accessibility Toolbar WAVE uses a distinctive icon approach in displaying accessibility information. Displays:  missing alternative text for images  missing form labels  table structure  script elements and event handlers  document structure and reading order  and many more … Icon key explains icons
  • WAVE screen shot
  • WAVE Very common to not see all icons for errors indicated in count. Frustrating. Spot what you can. No error listing function. Icons distort page layout, sometimes severely. Incorrect heading order. Use <h2>s for navigation headings. It’s fine if these precede the first <h1>, as they will in most cases. Can also use document landmark roles. Null or empty alternative text: is appropriate for spacer images or non-informative images.
  • Color contrast checker Juicy Studio add-on for Firefox Works on Macs, PCs, and Linux platforms examines the information in your style sheet to and web page calculate the contrast Cannot be used to evaluate graphic or Flash content Cannot evaluate text over a background image Firefox menu pick: Tools >Colour Contrast Analyser> Luminosity Contrast Ratio
  • Contrast display page
  • Mobile devices Will uncover mouse event handlers Limited viewing scope Large number of links burdensome Improving site for mobile also makes site more accessible
  • U-M resources http://umich.edu/webaccess/ Evaluation checklist: http://umich.edu/webaccess/best/quickguide.h tml Evaluation tools and procedures: http://umich.edu/webaccess/eval/ swims@umich.edu