Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Usability Begins with Accessibility- Patrick McSweeny

C93a2f095a8dce6dbc3176db3e837db0?s=47 A11YChi
September 18, 2019
11

Usability Begins with Accessibility- Patrick McSweeny

For many web developers, accessibility is an afterthought, if they even think about it at all. What they fail to realize is that planning for accessibility from the beginning can actually enhance the design process rather than hindering it, with the end result being more usable by everyone. This presentation will cover some common web accessibility techniques and show you how they can change the way you think about web design.

About the Speaker

Patrick McSweeny is a full-stack web developer and designer with over ten years experience.

C93a2f095a8dce6dbc3176db3e837db0?s=128

A11YChi

September 18, 2019
Tweet

Transcript

  1. Usability Begins with Accessibility Patrick McSweeny

  2. About Me • Started building websites in 2007 • Single

    page app developers can get off my lawn
  3. About Me • Type 1 diabetic • Good eyesight •

    I sometimes have trouble reading text on websites − Small text − Light Contrast − Unreadable fonts
  4. Accessibility is not a Priority • Ignorance • Apathy •

    Some think it’s too time consuming/expensive
  5. Human Computer Interaction • Input devices − Keyboard − Mouse/trackpad/touchscreen

    • Output devices − Screen − Speakers
  6. Disabilities affecting HCI • Visual impairment (poor eyesight/blindness) • Physical

    impairments (can’t use keyboard/mouse) • Cognitive impairment • Auditory impairment
  7. A Viscous Cycle • Able-bodied developers develop for able-bodied users

    − Typical HCI workflow taken for granted − People with disabilities get frustrated and give up − Fewer people with disabilities use computers
  8. What if I told you Browser have a built in

    accessibility API
  9. Wait for it

  10. HTML + CSS!

  11. • Sort of true: HTML was invented to display documents

    • Also sort of true: Computers were invented to solve math problems • More accurate: HTML + CSS gives you the building blocks for a user interface
  12. HTTP & HTML • HTTP: Hypertext Transfer Protocol • HTML:

    Hypertext Markup Language • The design of HTTP & HTML is intertwined • HTML was designed for user interaction and dynamic content from the beginning − HTML forms and links provide input method − Semantic HTML allows browser to understand
  13. Semantic HTML • Allows browser to describe text to screen

    reader • Lists (ul & ol) organize content • Text elements (headers and paragraph) describe content • HTML 5 introduces new elements to describe and organize content
  14. Side Benefit to Semantic HTML • Organize your content −

    Using divs and spans requires no thought about organization − Semantic HTML forces you to think about how content should be organized and described
  15. HTML Forms • Input types provide different types of interaction

    • HTML5 input types like number and color provide browser UI • Label tags, when properly used, allow browser to identify and describe inputs • Fieldset and legend tags organize form content
  16. The Bottom Line • HTML, when used properly, lays the

    foundation for accessibility
  17. CSS • Using fixed font sizes takes control out of

    users’ hands − Pixels (px) and points (pt) ignore font size setting − Using em or rem allows text size to change along with user setting
  18. CSS • Added side benefit to using relative font size:

    Cleaner code
  19. More Basic CSS Techniques • Avoid giving text unnecessarily small

    size or light contrast • Choose fonts for readability − Minimize use of decorative fonts − Character spacing, size are important • Extract presentation logic from HTML − Don’t use br tags
  20. Further Study • W3.org/WAI – Web Accessibility Initiative (World Wide

    Web Consortium) • developer.mozilla.org/en-US/docs/Web/Accessi bility – Mozilla Docs • Typographic Web Design by Laura Franz • Learn CSS/HTML fundamentals
  21. @PatrickMcSweeny