CHI 2021 Website Accessibility

  • July 28, 2020

We are trying to make all the aspects of CHI 2021 as accessible as possible to everyone. Making the CHI 2021 conference website accessible is part of that effort. In this blog post, we share what members of the organizing committee have been doing to make the website accessible.

An accessible web site is one that can be used efficiently by people in a variety of ways. Some of our community members use large fonts, high contrast color settings, or screen magnification. Others listen to web pages and navigate them using a screen reader. Some people use only a keyboard, or a braille display. Some of us have color vision differences, or are sensitive to animation or clutter. Some rely on captions or transcripts to convey audio information. Our goal is to make information about CHI easily accessible and easy to navigate, no matter how each user approaches it.

In the process of making and deploying the CHI 2021 website, Communication Chairs designed the site with accessibility in mind, and Accessibility Chairs evaluated the site’s accessibility. All pages on the website were designed and generated using WordPress; Communication chairs edited the WordPress’s HTML templates to adhere to W3C Web Content Accessibility Guidelines (WCAG 2.1), more specifically WCAG 2.1 AA standards. Accessibility Chairs then assessed the accessibility of the landing page and subpage that were generated from those templates. Following the SIGACCESS’s Accessible Conference Guide and IBM’s Accessibility Checklist, Accessibility Chairs evaluated the website with the four-step process, which involved:

  • Automatic test of whether the pages met basic accessibility requirements (e.g., presence of alt text for figures) using Lighthouse and Wave
  • Manual test of whether the controls (e.g., links) can be reached and operated just with a keyboard
  • Manual check to see if magnifying the content and changing the contrast break the design of the web pages
  • Manual test of the navigability of the web pages with screen readers using NVDA on a Windows desktop computer and VoiceOver on a MacBook Pro

Automated Accessibility Check

There are two comments on accessibility; one on the text color contrast and one on the alt text. The first comment says, “the color contrast between the foreground text and the background could be increased (although this level of contrast may be tolerable given the large font size).” The second comment says, “alt text should be added to each sponsor logo.”

Figure 1: The landing page of the CHI 2021 website with comments on its accessibility.

Lighthouse and Wave allowed us to identify accessibility problems in the early version of the WordPress templates. Lighthouse, a tool that can be used through Google Chrome’s DevTools, provides a score of how accessible the page is and reveals accessibility problems if any can be automatically detected. Wave is another tool that allows us to inspect the accessibility of a  web page. We used the two tools to uncover as many accessibility problems as possible. Although automated tools cannot find all accessibility problems, they are an important first step.

Two types of potential accessibility issues emerged. First, some images used in the template pages did not have a text description that serves as a replacement for the image for people who cannot see it (‘alt text’). The lack of alt text for images is problematic as it prevents a screen reader user from figuring out the image content. Alt text was added to each image on the production version of the website. Second, the landing page had potentially low-contrast text elements. The warning was issued due to the white text on the semi-transparent background on the landing page, which could lower its legibility. We adjusted the opacity of the background to increase the contrast.

Keyboard Accessibility

Some of our community members use a keyboard and no mouse, so we manually tested whether we can navigate the web page with a keyboard alone to assess the keyboard accessibility. We:

  • Checked if a user can use a Tab key to navigate through interactive elements (e.g., links).
  • Assessed intuitiveness of keyboard-based navigation order

All the links on the page could be reached using a Tab key (and Shift+Tab) alone, and we could jump to the target web page by hitting Enter key. The structure of the web page was simple and intuitive to navigate. Because there were no custom widgets like dialog boxes and form elements, we did not test their accessibility.

Magnification and Contrast Adjustment

On the landing page of CHI 2021, a header with a message "Welcome to CHI 2021" overlaid with navigation elements at the top of the page.

Figure 2: The landing page of the CHI 2021 website. The page layout became distorted as we used the browser's zoom feature to increase the content's size. In this figure, the header text and navigation elements overlapped each other.

We manually tested if controlling the font size and contrast would affect the accessibility of the web site. We used the operating system’s built-in zooming features (e.g., magnifier in Windows, macOS's zooming feature) and the browsers' zooming features (e.g., Google Chrome's zooming feature). We noticed that using the browser's zooming functionality to enlarge page contents broke its layout when the zoom level was set higher than 150% (Figure 2). As people with low vision might increase the font size using the browser feature, WCAG standards require  that readers should be able to increase the font size up to 200% without breaking the page layout. In the newer version, Communication Chairs fixed the issue.

We used macOS’s feature to invert screen color and adjust contrast to see the visibility of the web contents. Manual inspection of the color inverted and contrast adjusted content showed that the web page contents are legible even after the adjustment.

Screen Readers

To assess the accessibility of the website with a screen reader, we manually inspected with VoiceOver and read out the web page content on macOS and iPhone. We used NVDA to assess the screen readability on Windows. We found that the reading experience was good and did not identify any noticeable accessibility problems. Because this round of accessibility assessment was done with a sighted member of the Accessibility Chairs, one of the Accessibility Chairs who is bline is currently evaluating the site as she uses it herself with her screen reader.

Other Things

Working with other organizing committee members and CHI community members, we made videos as accessible as possible. The teaser video of CHI 2021 has closed-caption (CC) to support people with hearing impairments. In addition, Communication Co-chairs created a version of the video with audio description, which is more accessible for people with visual impairments. With the help of community contributions, the teaser video has it in seven languages now.

Apart from the conference web site, SIGCHI’ Progressive Web App is also undergoing accessibility improvement every year. These improvements will benefit all SIGCHI conferences. 

If you have any concerns or identify accessibility issues, please contact our Accessibility Chairs, Chieko Asakawa, Kotaro Hara, and Shari Trewin by email: accessibility@chi2021.acm.org, and someone will respond to you shortly.

HOME >  Blog >  CHI 2021 Website Accessibility
pagetop