Tech is For Everyone: The Basics of Online Accessibility

A gentle introduction to making software that's usable by everyone, regardless of physical ability.

Transcript

1. Tech is for Everyone: The Basics of Online Accessibility Presented at Netroots Nation 20, August 15, 2020 By Jason A. Lefkowitz President, Rogue Repairman Productions LLC https://roguerepairman.com
2. What is accessibility? The practice of making software usable by as many people as possible.
3. 3 And by “software,” we mean... Web sites Web applications Desktop applications Mobile applications
4. 4 The interface is physical The interface between software and user is physical – Inputs: keyboard, mouse, touchscreen, voice control – Outputs: text, images, audio, video But: people have differing levels of physical ability
5. 5 Case study: visual acuity In America, there are… • Blind people: 1.3 million • People with low vision: 2.9 million • People with cataracts: 24.4 million • People with myopia: 34.1 million Source: Data for 2010, National Eye Institute (NIH)
6. 6 Disability is a continuum • There is not a single small population of “disabled people,” there are lots of people with varying degrees of ability • Accessibility aims to make tools and products that are useful for the widest possible part of the continuum
7. 7 Common types of disability • Visual • Auditory • Motor skills • Speech • Cognitive/learning
8. 8 Assistive technology can help... Screen readers Screen magnifiers Braille displays Alternative input devices
9. 9 … but only if you let it Assistive technologies can be reduced in effectiveness or even thwarted completely by poorly designed software It is therefore imperative to design for accessibility
10. 10 Screen readers Users who are blind or visually impaired will have problems with visual content A common tool to overcome these problems is a screen reader: a tool that reads the content of the page aloud So: how can we design software that works well with screen readers?
11. 11 Supporting screen readers • Use semantic HTML • Use HTML5 sectioning tags or ARIA Landmarks • HTML5: <main>, <nav>, <aside>, <header>, <footer> • Provide text alternatives for content that is purely visual (e.g. ALT tags for images, transcripts for audio/video) • Provide descriptive text labels on links
12. 12 Design for legibility Low-vision users will have trouble reading text if it isn’t formatted for legibility • Avoid “fine print”/ “tinytext” super-small font sizes • Ensure that text meets the minimum level of contrast against its background needed for legibility • 4.5 to 1 for body text, 3 to 1 for large text (headlines) • Contrast checkers are available on the web that can tell you the contrast ratio between two colors
13. 13 Assisting the colorblind Even users with high visual acuity can be colorblind. Avoid communicating information solely through color. A traffic light is still usable even if you can’t distinguish the colors of the lights, because you can tell the meaning of the light from its position
14. 14 Audiovisual content needs text alternatives An increasing amount of online content is presented today in audiovisual media: videos, podcasts, etc. Audiovisual content can be inaccessible to both hearing- impaired and visually impaired users Providing a transcript can open up this content to them For videos, consider offering captions as well
15. 15 Helping users with motor skill issues • Support keyboard-only navigation (including logical tab ordering) • Avoid interactive elements that are based on timing, or require dexterity (e.g. moving elements) • Provide generous “tap targets” for all links, buttons, etc.
16. 16 How to get accessibility “for free” • Use platform-standard user interface elements wherever possible, rather than inventing custom ones • Where you must invent custom ones, put in the extra work to make them compliant with the platform’s usability standards
17. 17 Universal design Build accessibility in from the start, rather than leaving it as an afterthought It is easier to build something that works for everyone than to build something that doesn’t and try to hack accessibility on later Universal designs can benefit everyone: see the “curb cut effect”
18. 18 Auditing your site’s accessibility Google Lighthouse is a free tool that can audit any page on the Web for accessibility and performance problems Lighthouse is built into the Chrome browser’s developer tools, so you can get a quick report on any page with a few clicks It’s not a substitute for a full professional accessibility audit, but it can help you identify many common issues More info at https://developers.google.com/web/tools/lighthouse/
19. 19 Accessibility standards • U.S. government standard: Section 508 • W3C standard: Web Content Accessibility Guidelines (WCAG)
20. 20 Thanks! Jason A. Lefkowitz President, Rogue Repairman Productions jason@roguerepairman.com “Technology sucks. We make it suck less.”