Making a UCSF COVID Site Accessible: From Tweet to Action

UCSF Medical Center

By Jill Wolters. This is a digital accessibility success story that started on Twitter. A member of my Digital Accessibility Advisory Committee, Ed Chen, brought a Tweet to my attention: a screen reader user encountered a content barrier on an important COVID-19 website. Screen readers are a type of assistive technology used by people who are blind that converts online text to speech and reads the content aloud, so that blind users can access the content.

The accessibility process to remove the barrier illustrates the need for important conversations, a good faith effort, and a roadmap for continuous improvement.

A New COVID-19 Website

In June, a new website for COVID-19 R estimation for California was announced on Twitter by Dr. Bibbins-Domingo. While this is not an official University of California San Francisco website, it is a UCSF-related website, and barriers to online content may reflect poorly on UCSF and the F.I. Proctor Foundation.

The content includes multiple graphs for daily case counts and R estimates per California county and region plus an R estimate graph for the most recent week. “R” is the time-varying reproduction number, the average number of COVID-19 cases infected by a given case over the course of that individual’s disease progression.

A screen reader user read the announcement on Twitter, visited the website, then tweeted that they encountered barriers to the data graphs when reading the website with several different types of screen readers.

Important Conversations

Dr. Worden, an epidemiologist from the F.I. Proctor Foundation who manages the website and the scientific quality of the data, tweeted back to the user right away that he would work on improvements.

When I’m made aware of an online content barrier, part of my job is to reach out to the website contact and offer to provide awareness, guidance and training to find a solution. When I connected with Dr. Worden, I was thrilled to hear his long-standing commitment to accessibility and that his volunteer coder Alex Y. Ge, a medical student from the UCSF School of Medicine, was interested in incorporating accessibility for the website.

A Good Faith Effort

We discussed the different components of the website and various approaches for the accessibility improvements. The following solutions were implemented by Dr. Worden and Alex Ge:

  • Added informative alternative (alt) text on all graphs
  • Created machine-readable tables, i.e. readable by a screen reader
  • Assured keyboard navigation using the tab key
  • Provided downloadable .csv files as alternatives for the graphs

These solutions not only help screen reader users, but also users who do not navigate with a mouse and users who might not be able to interpret data in graph form and rely on alternative text.

Once the changes were made, Dr. Worden reached out to the user. The user confirmed his screen reader assistive technology could access the content, confirmed his overall experience definitely improved, and thanked Dr. Worden.

The user suggested a small consideration to eliminate the repeated “there are” phase in the alt text for all graphs, and the conversation continued with Dr. Worden agreeing to improve the auto-generated alt text.

Most users, who report content barriers, simply want equal access to the content, not to threaten a lawsuit, and are willing to engage in a conversation to share their experience to make it better for all users.

Roadmap for Accessibility

Accessibility is an ongoing process, not a discrete feature of a website or web application.  The continuous improvement process includes the monitoring of content for accessibility and a simple documented plan also known as a roadmap.

This COVID-19 website’s roadmap contains these future improvements:

  • a table version of the data from the ranked R plot
  • an interim plan to reprogram the automatically generated alt text to avoid repetition of the phrase “there are” for each county and region’s graph
  • eventually moving from HTML4 to HTML5 for better support of presenting alt text

Sometimes the improvements require resources such as time, training, or money. When the resources become available, content owners tackle the list items. For example, the table version of the ranked R plot required some time and was implemented this summer. Another step was taken this fall where the automatically updated alt text was reprogrammed to avoid repetitive phrases.

The moral of the story is, how important conversations, good faith efforts, and a roadmap are part of the accessibility process that creates customer satisfaction.

For more details, read the complete Twitter thread.

Jill Wolters, web standards program manager, IT Web Services, UC San Francisco.Jill Wolters is web standards program manager, IT Web Services, UC San Francisco.

Comment (1)

  1. Debra Yarger

    BRAVO! We need more of this approach across the board. Things like Zoom, which are not ADA compliant make it very difficult for sight impaired individuals to use…. when WebEx was terrific!

    Reply

Leave a Reply to Debra Yarger Cancel reply

Your email address will not be published.