Your SlideShare is downloading. ×



Published on

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • Not just blindness. A very diverse community.
  • 1 in 10 have a disability that will affect their using the internet
  • Besides being the right thing to do … we have legal considerations.
  • In general terms …The beautyof the standards are that you don’t have to keep in mind every conceivable disability when you are coding your site.
  • This is a departure from WCAG 1.0, which references specific technologies, such as javascript
  • Captions, screen reader, Braille display
  • Chunking appropriately, avoiding jargon or institutional languageDifferent learning modalities, visual versus verbalDon’t changenav and layout structureCareful with AJAX-y elements, pop-upsConsiderate form validation; especially important for ITS
  • Don’t select heading levels for their default size—use CSS to style your headings.
  • Transcript

    • 1. Accessible Web Scott Williams Office for Institutional Equity
    • 2. Disabilities and the web  Visual: blindness, low-vision, color-blindness  Hearing: partial to total deafness  Motor: inability to use a mouse or physical keyboard, slow response time, limited fine motor control  Cognitive: Learning disabilities, distractibility, dyslexia, inability to remember or focus on large amounts of information
    • 3. 1in 5 people have a disability  People with disabilities in the U.S: 60 million  People in U.S. with disabilities that impede them using the internet: 27 million  People age 15 and older having difficulty hearing a normal conversation: 8 million. Completely deaf: 1 million  People age 15 and older having difficulty reading ordinary newsprint (even with glasses): 8 million. Completely blind: 1.8 million
    • 4. Legal  Both the Rehabilitation Act of 1973 and the Americans with Disabilities Act of 1991 prohibit colleges and universities from discriminating against students, faculty, and staff with disabilities.  DOJ is in the process of revising Title II and III of the ADA to include online resources of state and local entities  DOJ not interested in the budgetary or logistical reasons for why a billion dollar business is violating someone’s civil rights  Case law—individuals or entities can file civil rights complaints, e.g., Penn State, NYU, Northwestern, Target, Southwest Airlines,, Ramada, Kindle, and LSAC
    • 5. What is accessibility?
    • 6. Web Accessibility  Making the web accessible for the widest possible audience  Inseparable from usability, mobile, SEO: improve one and you improve the others  Best way to accomplish accessibility? Adherence to standards.
    • 7. WCAG 2.0  W3C Web Content Accessibility Guidelines  De facto standard world-wide. Adopted by governments. Cited in U.S case law. Future basis for ADA and Section 508 compliance.  WCAG 2.0 is principle-, not technology-based  The four principles (POUR):  Perceivable  Operable  Understandable  Robust
    • 8. Perceivable  Provide text alternatives for images and form elements  Provide captions and transcripts for video and audio  Use correct semantic markup (e.g., headings and lists) so content can be presented in different ways  Make it easier for users to see content by using good color contrast  Avoid movement and distractions on page
    • 9. Operable  All functionality is available from the keyboard!  Users have control over timing and limits  Do not cause seizures (don’t flash content)  Provide ways to help users navigate, find content, and determine where they are
    • 10. Understandable  Economical and plain use of language  Text supplemented with illustrations, videos, and other formats where appropriate (i.e., support various learning modalities)  Navigation, information structure are discernable and consistent  Make pages operate in predictable ways  Help users avoid and correct mistakes
    • 11. Robust  Functional across various technologies  Syntax errors that don’t affect visual presentation may hamper assistive technology and accessibility evaluation tools  Adhering to W3C standards ensures future compatibility  Validate your code at
    • 12. Biggest barriers to AT users  CAPTCHA – images, presenting text used to verify that you are a human user (& reCAPTCHA)  Inaccessible Flash content  Cryptic Links or buttons  Images with missing or improper descriptions (alt text)  Complex or difficult forms  Lack of keyboard accessibility  Screens or parts of screens that change unexpectedly  Missing or improper headings  Too many links or navigation items  Complex data tables  Lack of "skip to main content" or "skip navigation" links  Inaccessible or missing search functionality
    • 13. Top 5 Web Best Practices
    • 14. 1. Proper <h1> heading  Screen readers can find and list headings  <h1> heading uniquely identifies the page in the website  Should be placed directly in front of the main content of the page  The <h1> header should also match at least a subset of the the page <title>
    • 15. 2. Proper heading hierarchy  Headings need to be properly nested to convey organization of the page  <h2> tags follow the <h1> tag, the <h3> tags follow the <h2> tags, etc.
    • 16. 3. Meaningful link text  Screen readers can find and list links  Descriptions for the links must be meaningful out of context, via tabbing or presented in a list  Don’t use ―here‖, ―click here‖, ―read this‖, and ―more‖  Don’t use URL as a link description—will sound like gibberish, unless very short and intuitive
    • 17. 4. Text equivalents  All informative non-text elements must be accompanied by text equivalents  graphical buttons and links  Informative images  graphical representations of text (including drop caps, equations, and symbols)  form controls and text fields  audio files and podcasts  Videos <img src="mlogo.gif" alt="University of Michigan Block M logo">
    • 18. 5. Keyboard accessibility  Make sure that form widgets can be operated using the keyboard only  Make sure tab order is logical and intuitive and visible  Source order = tab order  Use source order, not tabindex attribute, to program tab order
    • 19. Accessible Wordpress  Themes:  Plugins:  Wordpress Accessibility Group:  Joe Dolson:
    • 20. Accessible MS Word  As in the web environment, navigation and orientation key  Create structured documents  Use heading formatting for headings  Use table-of-contents utility for large documents to provide navigation  Provide alternative text for images  Use table utility to create tables  Use proper styles for formatting text
    • 21. Format Headings
    • 22. Alt text for images
    • 23. Use the Description Field  Add alt text to the Description field. Leave the Title field blank.  JAWS reads combined Title + Description fields  Of the two fields, Description is the only field that is backwards-compatible. If you add a Title in Office 2010 and open the document in an earlier version, the Title is lost.  Third-party tools that export or convert Office documents utilize only the Description field, not the Title field
    • 24. Use table utility—not tabs
    • 25. Accessible PDFs  HTML format is always preferable for assistive technology  PDFs have 2 layers: presentation and logical  Presentation: information for display purposes only; not apparent to assistive technology  Logical: information for assistive technology only; does not affect display information  A ―tagged‖ PDF will have this logical layer and be apparent to screen readers. Complex PDFs may not have correct reading order or alternative text for images, however.
    • 26. Creating accessible PDFs  Adobe PDF Maker add-in is no longer required for Office 2010  However, if you check the option to ―Minimize size (publishing online)‖, you will lose all structure tags  When minimizing, you must also check the ―Document structure tags for accessibility‖ checkbox
    • 27. Office 2011 for Mac  Office for Mac 2011 can save as PDF, but it doesn’t produce a tagged PDF  Accessibility information, including heading structure and alt text, is lost in the conversion  Do not use Mac version for PDF creation
    • 28. Checking PDF Accessibility  Using Adobe Reader, select the menu pick: Document > Accessibility Quick Check  Pop-up window will let you know if PDF is untagged.  Virtually all PDF accessibility checkers only detect if a PDF is tagged, not if it is actually readable.  Netcentric’s PAW handy for creating accessible Word documents  Netcentric’s CommonLook necessary for formal remediation of complex PDF document
    • 29. Word & PDF Resources   /  nverting.php  office-overview
    • 30. PowerPoint  Use predefined layouts. They are accessible.  Add alternative text to images  Edit hyperlinks  Use the PowerPoint Accessibility Checker  If converting to HTML, do not use PPT save-as- web feature, use Lecshare:
    • 31. Use alt text for images
    • 32. Do not use URLs for link text
    • 33. Use the accessibility checker
    • 34. YouTube  Automatic captioning does not provide adequate captions. Error rate is too high!  However, auto-captions do provide good first draft to work from. Use the YouTube editor to clean up the caption track:  Patty Bradley put together a nice tutorial:
    • 35. Accessibility Resources  For assistance, email:  U-M:  WebAIM:  Online accessibility checkers:  
    • 36. Questions?