1 of 14

Design with �Accessibility in Mind

CSCI 185

Spring, 2024

1

2 of 14

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”�

- Tim Berners-Lee, W3C Director, inventor of the Web

3 of 14

Accessibility Is Very Important

  1. 15% of the world population and 26% of the U.S. population has a some form of a disability
    1. Statistically: about 3-4 people in this class
  2. Most of us will become disabled at some point (temporary or permanently)
    • Usually by way of injury or age-related health conditions
  3. Inaccessibility is illegal

3

Credit: Victoria Chávez

4 of 14

Design with accessibility in mind

How do I design my website so that it…

  • Is easy to use?
  • Is pleasant to look at?
  • Does not leave user confused?
  • Serves its purpose (to sell, inform, catch someone’s attention, etc.)?
  • Is accessible to everyone?

4

Credit: Victoria Chávez

5 of 14

So, what can you do to make your website accessible?

5

6 of 14

1. Consider how various forms of disability might impact a person’s experience of your website.

  • Take a look at these accessibility posters.
  • What implications might these suggestions have for the website you want to build?
  • Many (but not all) of these suggestions map onto the principles of design that we discussed last week.

6

Credit: Victoria Chávez

7 of 14

2. Follow the rules of composition

  1. Poor use of proximity may prevent neurodiverse users from easily navigating your site. It can also prevent screen-readers from properly reading a site aloud for blind users
  2. Low or bad contrast prevents color-blind users and low-vision users from accessing your site
    1. Use lightness to create contrast, not just hue
    2. Avoid complementary hues (e.g. red and green, orange and blue) and bright colors for backgrounds.
  3. Misaligned sections (alignment) can be confusing and make it difficult for users with mobility issues to access your site

7

Credit: Victoria Chávez

8 of 14

…but, good visual design is not necessarily accessible

  1. While bad design is inaccessible, accessibility is more than just good design
  2. Other accessibility considerations include:
    1. Descriptive alt-text and captions for media
    2. Resizable-friendly
    3. Screen-reader friendly
    4. Keyboard-friendly (no mouse)
  3. There’s actually a whole set of standards for web accessibility: Web Content Accessibility Guidelines (WCAG)
  4. Fret not, plenty of accessibility resources are available to help you get started!

8

Credit: Victoria Chávez

9 of 14

3. Consider Content & Structure (beyond the CSS)

  1. Use semantic HTML
  2. Describe tables, graphs, and figures
  3. Write in plain, simple, concise language
  4. Describe images using the alt attribute of the img tag
  5. Always set the language of a webpage (i.e., <html lang="en">)
  6. Use descriptive links (i.e., “accessibility resources”, not “more info here”)

Credit: Victoria Chávez

10 of 14

A few quick notes on color blindness

10

11 of 14

Color Blindness: Ishihara Plates

11

If you’re colorblind, you can’t see the bottom of the left pair, the top of the middle pair, and neither of the right pair.

12 of 14

Color Blindness Guidelines

13 of 14

Use accessibility tools to help you

13

14 of 14

Demo: Using the WAVE Browser Extension

  • One useful tool you might consider:
  • Let’s try installing it before doing an accessibility analysis…

14