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.

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