Why it matters

Designing and building for accessibility ensures you the ability to reach all your users.

As a city we are required by law to meet the accessibility guidelines set forth by the Americans with Disabilities Act and Section 508 of the Rehabilitation Act. But for too long our approach has been one of compliance, designed around certain best practices; but, best practices perpetuate a conflicting “one size fits all” model that’s rarely rooted in any actual insight (much less insight that is relevant to your product) propelling products toward a state of mediocrity.

We have chosen to completely revamp our guidelines and implement an educational approach throughout our product teams. From project managers to content strategist and designers to developers, we all learn why this matters and how to implement, holding each other accountable in the process. We have actually brought an ideology of empathy into our entire design and development process. Focused on research, testing, and feedback of ALL our users.

First we need to educate ourselves in how people with disabilities interact through their numerous different devices. What are the limitations and advantages of each device?

Users

To first provide us with a shared vocabulary as we move through this guide we have set up four categories below that allow us to showcase how your users interact with and experience your website. Then we can begin to develop an understanding of how to best implement our designs and deliver content.

pictogram of an eye with a line crossing through it

Visual - Blind, Low Vision, Color Blind

Convert visual info to audio
Small type, strange type-face, dispersed layout
Color does not convey meaning

pictogram of an ear with a line crossing through it

Auditory - Deaf, Hard of hearing

Closed Captioning, Transcripts

pictogram of human brain

Cognitive - Attention, Learning Disorders

Convoluted presentation of information

pictogram of a human hand

Physical - Mobility, Tremors, Paralysis

Limits input devices (keyboard, mouse, touch screen)

Users Personas

Understanding the user is key to providing any relevant solution. User personas allow us to better imagine ourselves in certain scenarios and understand what limitations exist.

Empathy allows us to keep the user front of mind while building and testing frequently to constantly challenge our assumptions. Once we place ourselves in another's shoes we can start to think and develop solutions to alleviate those barriers.

young man playing a guitar young man editing music with his laptop set ontop of a keyboard piano close up of young man's hands playing guitar

Nick, 26

Lives in Lower Haight, and works downtown as an accountant by day, but his passion is music. He’s been playing guitar since he was 13 and writes his own songs. He uses the internet to find new music and publish his own. Check him out on SoundCloud!

He was also born blind. Making it hard to navigate some music blogs. He gets frustrated when some websites autoplay music or video, as it is sometimes hard to find the controls using keyboard navigation.

Ruth, 84

Has 3 children and 4 grandchildren. She lives in Noe Valley and uses MUNI as her primary form of transportation. An Avid user of email & Facebook to keep up with her family, she just bought her first smartphone.

When visiting new websites she finds herself enlarging text and using high contrast modes frequently.

Devices

Some users find it helpful to use specialized input or output devices. Including: screen readers, speech to text, braille displays, and many more. Knowing how these devices interpret and navigate your site is important to how you structure your code.

Braille Display

A keyboard that can be used to both type braille and render the text on screen into braille with it's pop-up nodules. Speech Synthesizers such as VoiceOver are also often used in combination.

refreshable braille display made by Humanware

Switch Access

Switch controls can help those with limited movement create shortcuts and can be programed to register single-tap, double-tap, and long-press variants.

compact wired switch or button, made by AbleNet

Eye or Face Tracking

A computer input device that takes the place of a mouse by tracking the users head movements from a small dot placed on the forehead to move the cursor. Used by people with little or no hand movement.

facial tracking camera made by AbleNet

Law

Americans with Disabilities Act of 1990 (ADA) is a civil rights law. It prohibits discrimination on the basis of disability, as long as the person is otherwise qualified

Title II and III of the ADA requires that all programs offered through the state and local government such as the City and County of San Francisco must be accessible and usable to people with disabilities.

The Federal Rehabilitation Act of 1973 prevents discrimination based on disability

Section 508 of the Rehab Act requires Federal agencies to make their electronic and information technology accessible to people with disabilities.

Standards

The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.

Web Accessibility Initiative (WAI) is an effort to improve the accessibility of the web for people with disabilities.

Web Content Accessibility Guidelines (WCAG) 2.0 is a stable, referenceable technical standard with 3 levels of compliance

Accessible Rich Internet Applications (WAI-ARIA) 1.0 is a technical specification that provides a framework used to improve the interoperability of dynamic content generated by scripts