Make Accessible Websites for All

It is UCSF policy and US law that our websites are created to be Accessible by persons with disabilities.

Most of the key elements of accessibility should already exist in an up-to-date, dynamic, UCSF branded and user-friendly website.

Determined by the type of content of your website, you may need to provide alternative ways to perceive, understand and interact for users with disabilities. For example, videos must have captions. This makes it possible for people with hearing impairments to perceive the sound information and improves the user experience for all. – Ever forget your earbuds at the library?

Accessibility benefits us all.

Accessibility Supports the Future

So many of the communication features you take advantage of were created for people with disabilities: the telephone, voice recognition, auto-complete, spell check, pinch-and-zoom, text-to-speech and so on.

The effort you put in today, will ensure their future compatibility, increase audience, improve SEO and help you out when you forget your glasses.

Perceivable, Understandable, Operable and Robust

By Persons with Disabilities such as:

Visual: Blind, low-vision, color-blind, forgotten reading glasses

Hearing: Deafness, hard-of-hearing, limited range hearing, no earbuds

Cognitive: Learning disabilities, distractibility, tired

Motor: Slow response time, limited fine motor control, on a bumpy bus

Disabilities are on a Spectrum

Being on a bumpy bus or not having your earbuds or glasses – those are disabilities? you may question. Disabilities can be permanent, temporary or situational. It really does not matter why you may need to zoom-in or read captions, what matters is that it is possible.

By providing for the far reaches of accessibility you also include every situation in-between and then some.

Getting from Policy to Accessible Website

Understand the Need for Accessibility

Get familiar with the concepts of alternative means of perception. Examine how your content is understood. Interact with your site with the color grayed out, mouse-less or even with your eyes closed. Take these impressions into consideration and into your planning, building and testing.

Plan and Budget Saves Time and Money

As you plan and create the elements of your website: articles, images, videos, forms, lists, headings, tables, page titles, navigation, links, consider how each of these elements perceived, operated, understood by the user and how robust the construction of the elements are for flexibility and longevity.

Making accessible websites is far faster and much lower cost of making websites accessible after they are build. And far cost, time and reputation saving than the shame of a lawsuit.

Plan Accessibility Along with Content Creation tips:

Videos – save scripts and notes for the captioning

Forms – Layout so title and field stay visible from phone to monitor

Images – Provide text alternatives or let screen-readers skip

Layout – Not depended on styling but part of the DOM structure

Color – Maintains a 4.5 contrast ratio to backgrounds

Links – Do they make sense alone and go where expected?

Decorative Elements – allow screen-readers to skip

Embedded Media – Provide user controls

Tables – never for layout and always label elements

A Guideline for Every Element of a Website

WCAG 2.0 AA (web content accessibility guidelines) are the guidelines UCSF follows. This is the internationally recognized and approved standard. Following these will meet the ADA standards as well. There are 25 Guidelines to level AA, organized by the four principals.

WCAG P.O.U.R. Principles

Perceivable: The three main senses of perception are sight, sound and touch. Some of your users may have difficulties with one or more of their senses, making them reliant on assistive technology to browse your website.

Operable: The main issues for making your website operable are, ensuring good keyboard-only navigation, avoiding setting time limits for your users and helping them out if they make errors on forms.

Understandable: Your website must use clear terms, have simple instructions and explain complex issues. Be clear and consistent.

Robust: Make content fully accessible by third-party technology (like web browsers and screen readers) by adhere to recognized standards.

Meeting each guideline is being able to say yes to the “Success Criteria tests”. For example: Is there a way to get in and out of every component of the page (e.g. widget or control) using only the keyboard? Yes/No

Some of the guidelines apply to all, such as declaring a language, but many guidelines are specific to elements that may or not be present.

Accessibility Beyond Websites

These principles can apply to all digital communications and tools: emails, documents, apps anything that a person with disabilities would need accommodations to access. Pay attention to what elements you us such as links, images, hierarchy, etcetera and be aware of it's accessibility.