Week 11 - Intro to Accessibility

Date: 2025-04-09

Austin Seraphin - How the blind use technology to see the world

Austin’s website.

Voice User Interfaces - Austin was on the committee for accessibility of these interactive fiction games who has posted a report on their research.

Web Accessibility Perspectives - Compilation of 10 Topics/Videos

from W3C Web Accessibility Initiative (WAI)

Making your website accessible

It is most efficient and effective to incorporate accessibility from the very beginning of projects, so you don’t need go back and to re-do work.

Source: W3C Web Accessibility Initiative from Designing for Web Accessibility

Basic considerations to help you get started making your user interface design and visual design more accessible to people with disabilities. These tips are good practice to help you meet Web Content Accessibility Guidelines (WCAG) requirements.

Stories of Web Users

Page Title

Good page titles are particularly important for orientation — to help people know where they are and move between pages open in their browser. The first thing screen readers say when the user goes to a different web page is the page title.

Image text alternatives (“alt text”)

Text alternatives (“alt text”) convey the purpose of an image, including pictures, illustrations, charts, etc. Text alternatives are used by people who do not see the image. (For example, people who are blind and use screen readers can hear the alt text read out; and people who have turned off images to speed download or save bandwidth can see the alt text.)

You don’t usually see the alt text. It is in the web page markup like this:

<img src="pointer_to_image.png" alt="here's where the alternative text goes">).

Headings

All pages should have headings, marked up properly.

e.g.

Heading level 1 <h1>
  heading level 2 <h2>
     heading level 3 <h3>
     heading level 3 <h3>
  heading level 2 <h2>
     heading level 3 <h3>
       heading level 4 <h4>
       heading level 4 <h4>
  heading level 2 <h2>

Contrast Ratio

Some people cannot read text if there is not sufficient contrast between foreground and background.

Resize text

Keyboard access and visual focus

Many people cannot use a mouse and rely on the keyboard to interact with the Web. People who are blind and some sighted people with mobility impairments rely on the keyboard or on assistive technologies and strategies that rely on keyboard commands, such as voice input. Accessible websites enable people to access all content and functionality — links, forms, media controls, etc. — through a keyboard.

Moving, Flashing, Blinking Content

Multimedia alternatives

Accessibility Principles

Source: Information from W3C Web Accessibility Initiative (WAI)

Text alternatives are equivalents for non-text content. Examples include:

Text alternatives convey the purpose of an image or function to provide an equivalent user experience. For instance, an appropriate text alternative for a search button would be “search” rather than “magnifying lens”.

Captions and other alternatives for multimedia

Content can be presented in different ways

Content is easier to see and hear

Distinguishable content is easier to see and hear. Such content includes:

Operable user interface and navigation

Functionality is available from a keyboard

Many people do not use the mouse and rely on the keyboard to interact with the Web. This requires keyboard access to all functionality, including form controls, input, and other user interface components.

Users have enough time to read and use the content

Content does not cause seizures and physical reactions

Users can easily navigate, find content, and determine where they are

Users can use different input modalities beyond keyboard

Text is readable and understandable

Many people rely on predictable user interfaces and are disoriented or distracted by inconsistent appearance or behavior.

Workshop: Exploring Web Accessibility Tools

  1. Do Easy Checks using the above identified first simle steps to check.
  1. Use a web accessibility tool checker like Accessibility Checker.

  2. Use the Browser’s Accessibility inspector and Check for issues.

  3. Get user feedback from the right people and skills. Things to consider include: age, background, disabilities.

In most cases, including users in evaluation involves: getting a few people with disabilities - and depending on your target audience, older users including them throughout the development process to complete sample tasks on prototypes so you can see how the different aspects of the design and coding could be improved discussing accessibility issues with them. source.

Homework

Read

What’s it Like to Use a Screen Reader

How to write inclusive, accessible digital products

Accessibility presentation

Please read the Introduction to Web Accessibility

This reading focuses on:

Please pick a research topic of interest to you that relates to accessibility and interface, broadly interpreted. Create a 3 - 5 minute presentation, no more than 3 - 5 slides, to explain your topic and relevant information.

Please pick a unique topic. Examples include:

Please cite at least 2 sources for your information.