1 / 26

Introduction To Accessibility

Learn the basics of web accessibility, including WCAG 2.0 guidelines, key disability issues, and strategies for incorporating accessibility into web development. Explore tools like WAVE and get practical examples to help you think about accessibility in your own work.

alphonsol
Download Presentation

Introduction To Accessibility

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction To Accessibility Kara Harkins March 29, 2019 #WITSMA19 @kara_h

  2. Getting a bit meta … • Talk (don’t worry, just a few basics) • Tools to use • A few examples to get used to thinking accessibility • Three Q&A sections interspersed on slides Note that examples are for web but can help with general accessibility (like alt text). Oh, and yes, I am always finding things to tweak on my own pages. Accessibility is never done.

  3. BACKGROUND • WCAG 2.0 (3 levels) • Level A  Good! • Level AA Yay!! • Level AAA  WOW!!! • ADA • Section 508 • Current version is basically a copy/paste of WCAG 2.0 • Required for government and some others

  4. Main disability Issues • Hearing • Vision • Color Blindness • Physical Ability • Cognition (Often hardest accessibility issues for reengineering sites) • Neurodiversity (can include autism, ADHD, etc) • Learning Disabilities • Yes, temporary disabilities are included

  5. Why care? • Access for all is A Good Thing • Promotes good coding • See getting buy-in

  6. How to Convince Others (getting buy-in) • A must if government (and some others) • What if your main user were temporarily disabled? • What if a new user is disabled? • What if a developer becomes disabled? • More users that can access site

  7. CMS (Content Management systems) • Big help with accessibility as they already handle many things so you can focus on accessibility of content • Wordpress • Drupal (8 is great) • Joomla! • Various PHP/MySQL based systems • Commonspot, etc ….

  8. Questions?????? • #WITSMA19 • @kara_h

  9. Quick tests • Can you navigate without a mouse? • Run WAVE or another tool • BEST test: tests by people with various disabilities

  10. Other Low Hanging Fruit • Use alt text (except for borders, logos, and spacers) • Not all images use an alt, decorative borders and spacers for example • Only use tables for data (use divs for positioning) • Form labels • H1, H2, H3, H4 … • Start using CSS (ideally linked stylesheets) • Aria (for low vision) is simply tags, but beyond scope of this course • Add lang=‘en’ to <html> tags • Fix glaring HTML issues • Links should be descriptive, not ‘click here’ • Run an accessibility checker (like WAVE) on the site for more ideas

  11. colorblindness • Test for different conditions: • https://www.toptal.com/designers/colorfilter

  12. CONTRAST • Check any proposed colors: • https://webaim.org/resources/contrastchecker/

  13. Tools • Firefox • WAVE Accessibility Extension • Accessibility in Tools->Web Developer->Accessibility • Chrome (and chromium based browsers) • WAVE Accessibility Extension • Siteimprove Accessibility Checker • Safari • Turn on voice (look up how to turn on/off) • Microsoft Edge (will use chrome extensions in future) • Page Analyzer

  14. Questions?????? Install wave • #WITSMA19 • @kara_h

  15. Why CSS stylesheets? • Allows overriding by users • Trend for things like <font> tags is to go away • Allows display code to be future proofed • The more text the better for accessibility technologies • Separating content and display is good design • Use relative sizing rather than pixel sizing (general tip)

  16. <img> examples • NO • <imgsrc=‘dog-2280748_960_720.jpg’> • <imgsrc=‘dog-2280748_960_720.jpg’ alt=‘an animal’> • <imgsrc=‘line.gif’ alt=‘a pretty line’> • YES • <imgsrc=‘dog-2280748_960_720.jpg’ alt=‘brown puppy with tan spots sitting on a tan couch’>

  17. LINK Example NO Hardcoding a <STYLE></STYLE> section Using style=“…..” in an element Leaving out any attribute in the example below YES In <head> section -> <LINK rel=“stylesheet” type=“text/css” href=“default.css”>

  18. Form element example NO <p>University <input type=‘text’ id=‘universityname’></p> YES <p><label for=‘universityname’>University</label> <input type=‘text’ id=‘universityname’></p>

  19. <html> examples NO • <html> • <html class=’pageclass’> YES • <html lang=‘en’> • <html lang=‘jp’> • <html lang=‘en’ class=‘pageclass’>

  20. Questions BEFORE LOOKING AT SITES? • #WITSMA19 • @kara_h

  21. WAVE demo (extension or wave.webaim.org)

  22. WAVE: www.google.com • Yes, even google shows errors so need to • analyze what it reports.

  23. Wave: www.yahoo.com More possible errors than google

  24. Wave: www.twitter.com/login • Note when not logged in username and • password fields are bad.

  25. Wave: www.irs.gov Remember possible errors are not errors

  26. Questions?????? Other sites? • #WITSMA19 • @kara_h

More Related