CSS Pitfalls for Screen Readers

Handouts

Presented at 2:15pm in Denver 1-3 on Wednesday, November 16, 2022.

#36424

Speaker(s)

  • John Northup, Director of Evaluations, WebAIM
  • Siyu Wu, PhD Student, Penn State University

Session Details

  • Length of Session: 1-hr
  • Format: Lecture
  • Expertise Level: Intermediate
  • Type of session: General Conference

Summary

Although Cascading Style Sheets (CSS) are useful for applying visual styles and transformations to web pages, they can create unintended inequivalence for screen reader users. We will demonstrate how to avoid various CSS declarations that can harm the screen reader experience.

Abstract

Participants will learn how various CSS techniques affect how content is exposed to screen reader users, and how CSS can impact reading order in ways that designers and developers may not expect. Of particular interest are situations where the screen reader experience diverges from the visual presentation. We will offer robust solutions to overcome screen reader limitations and browser inconsistencies. We have tested over a dozen common CSS declarations in the most widely used browser-AT pairings and will present our results.

Keypoints

  1. Certain CSS declarations can result in inequivalent experiences for visual and screen reader users.
  2. Some CSS techniques behave differently in different screen reader-browser pairings.
  3. Developers can save time and trouble by being aware of these CSS pitfalls at the beginning of a project.

Disability Areas

Vision

Topic Areas

Assistive Technology, Web/Media/App Access

Speaker Bio(s)

John Northup

John Northup has worked in front-end development, usability, and accessibility for over twenty years. He currently manages the WebAIM evaluation team and has previously worked at Deque and Ford Motor Company.

Siyu Wu

Siyu co-designs authentic science learning practices with students, teachers, and community partners.

Handout(s)

Presentation Slides: CSS Pitfalls for Screen Readers