Accessibility

Why we should care about accessibility in design

We naturally tend to use our own abilities as a baseline when we’re working on design projects for print and web. Instead, we need to keep in mind our diverse users and their diverse abilities to make sure we’re creating inclusive products that aren’t designed only for a specific range of people.

When something works for everyone, it works better for everyone.

Accessibility is not just for folks who use assistive technologies!

  • If your site takes 10 seconds to load on a mobile connection, it’s not accessible.

  • If your site works on only one browser, it’s not accessible.

  • If the content in your publication is hard to see or understand, it's not accessible.

Best practices for text

Ensure good contrast in your colors

Text and text backgrounds should have sufficient contrast so that the text remains easy to read. How much contrast is enough? You can test color combinations with WhoCanUse. This web tool brings attention and understanding to how color contrast can affect different people with visual impairments. Type in your background color and your text color, and see how your combination fares.

Make text easy to read

People don’t read on the web. They scan a page for keywords and start reading only when they find what they are looking for. Help ‘em out: Use headings, lists, meaningful link text. Divide text into short blocks.

    • Important points in the text should stand alone—don’t hide important information in large text blocks.

    • Write simply and clearly. Not everyone reads under perfect conditions, and for some readers your language may not be their native language.

Use descriptive headings

Headings are the framework of your content. A good heading should simply and concisely describe the content that follows.

    • H1 = page title. Use H2, H3, H4 to divide your content into meaningful sections, like a book index. Don’t skip levels.

    • Never use headings for visual effects, such as to bold text or increase font size.

Compress your PDFs

PDF documents can be any size—some PDFs are simply large files—but always reduce file size as much as possible before uploading: File > Save as Other > Reduced Size PDF in Acrobat. See this PDF screenreader accessibility guide to learn more.

Tips for audio and video

  • Carefully consider permissions and permitting, particularly when working with footage of marine mammals, children, and Indigenous communities.

  • Avoid auto play. Provide controls to start, stop, and pause media.

  • Offer transcripts of audio, with summaries of sounds—e.g. “[laughter]” or “[explosion]” if possible. Alternatively, offer captions for video, with summaries of sounds, settings, actions, text, and facial expressions necessary for understanding the content.

  • Avoid rapidly flashing, bright content.

  • Follow guidance provided on the Accessibility page for all text and design elements, particularly with regards to contrast and color combinations.

Links on websites

Always try to tell a visitor what to expect when clicking a link. Don’t make them guess.

    • Embed URLs within text. It allows use of descriptive link text instead of a URL.

    • Use meaningful and descriptive link text—never “click here” or “more info.” If you don’t do this, sighted users must read the whole sentence to understand what “click here” means. Screen reader users must guess where link goes.

      • Incorrect (non descriptive) link text: Click here to subscribe to our newsletter. You can download the manual of the espresso machine, or contact us for more information.

      • Correct (descriptive) link text: Subscribe to our newsletter if you are interested in our work. Download the manual as PDF, or contact us for more info.

Don’t set any link to open in a new window.*

Readers expect that websites will not spawn new windows. This also breaks the back/forward button navigation in browsers. And, it's a poor method of trying to “keep someone on your page.”

    • You may personally prefer to open links in new windows/tabs. That’s great for you, but it is safe to assume most users are most comfortable with the default behavior of opening a link in the same window.

    • Users can make a link open in a new window by right-clicking a link. That means both behaviors are available for links, giving everyone a choice. Choice is good.

    • Useful answers in case you encounter resistance!

      • “But clicking takes the user away from our website!” > “That’s literally what the user has chosen to do.”

      • “But you have to navigate back with the back button!” > “The back button is the most used feature in web browsers, ever, period.”

*Sadly, links on this Google Site open in new windows—we can't change that. Sometimes technology interferes with accessibility.

Avoid writing links in all caps.

All-caps text is harder to read for people with dyslexia. Some screen readers will think short words are abbreviations, and will spell the words out character by character.

Takeaway:
Always try to remember users on mobile devices or with slow Internet.

We get "spoiled" with fast connections on campus or in the city and assume everyone has the same experience. This is not true, especially in many parts of rural Alaska.
It's easy to forget that your fast connection isn't universal!