Under the Hood: Improving Accessibility of Activities

According to figures from the U.S. Department of Education, over 7 million or 14% of students in the U.S. received special education services in the 2018-2019 school year under the Individuals with Disabilities Education Act (IDEA)*. Fortunately, assistive technologies that help many classroom students are becoming built-in tools for most operating systems and web browsers. Many accessibility features—for example, text to speech, word prediction, and optical character recognition—are included in Apple’s macOS and iOS and Google’s Chrome. These tools can significantly improve the quality of learning for students with low-level vision, color blindness, low mobility, and hearing impairments.

While these features are becoming increasingly standardized for most operating systems, accessibility is not always included in web technology development. The Concord Consortium is redoubling its efforts to improve the design of our online activities. After reviewing the W3C criteria for accessibility conformance, known as the Web Content Accessibility Guidelines (WCAG), we focused initially on three accessibility guidelines and incorporated these features into a new design framework for activities in our STEM Resource Finder.

Distinguishable

Distinguishable features include those that make it easier for users to see and hear content, including color, text spacing, button size, and separating foreground from background. For example, WCAG recommends that the size of the target for pointer inputs is at least 44 by 44 pixels, so we increased the size of the buttons for navigating between pages in an activity. We also adjusted the background and foreground colors to meet the minimum contrast ratio. This improves usability for students with visual impairments and limited mobility by increasing the visibility of the button on the page and increasing the clickable area of the button.

In addition, we added features that ensure that media on the web page are perceivable by all. These features include text alternatives (also known as “alt tags”) for any non-text content like images or videos that are read aloud with the use of screen readers and closed captions for videos that can be turned on or off by the user.

<nav className="activity-page-links" data-cy="activity-page-links">
  <div className="pages">Pages in this Activity</div>
  { this.props.activityPages.filter((page) => !page.is_hidden).map((page, index: number) => (
    <div className="page-item" key={`index ${index}`}
      onClick={this.handlePageChange(index + 1)}
      onKeyDown={this.handlePageChange(index + 1)}>
    <span>{`${index + 1}. `}</span>
    <span className="page-link"
      onClick={this.handlePageChange(index + 1)}
      onKeyDown={this.handlePageChange(index + 1)}
      tabIndex={0}>{`Page ${index + 1}`}
    </span>
  </div>
  ))
  }
  <button className="button begin"
    onClick={this.handlePageChange(1)}
    onKeyDown={this.handlePageChange(1)}>
    Begin Activity
  </button>
</nav>

Keyboard accessible

Keyboard-accessible features include those that make all functionality available from a keyboard. They are especially useful for students with mobility impairments who may have difficulty making the precise hand movements required to use a mouse. The WCAG guidelines require that all web page elements are operable through a keyboard interface by using the tab key, without requiring specific timing for individual keystrokes. We used HTML form controls and links to ensure the correct and logical tab and reading order for all elements displayed on activity pages (Figure 1).

Navigable

Navigable features help users navigate, find content, and determine their location on a web page. We assessed the internal structure of the interactive page elements and updated the order of these elements in the underlying code to ensure that they follow a logical sequence within the content. We made the keyboard focus indicator always visible to students who navigate activity pages using a keyboard. We also improved the display of the user’s location within the activity by updating the page breadcrumb trail to use visible separators and navigation arrows.

Most assistive technology is driven by thoughtful formatting and inclusion of assistive tags that are otherwise invisible to everyday users. While color contrast and button size are obvious, screen reader tags, hierarchy, and consistent labeling are not. Implementing these features is one way we are emphasizing our dedication to advancing STEM inquiry through technology and creating activities that are usable by all learners.

* National Center for Education Statistics, U.S. Department of Education

Kiley McElroy-Brown (kmcelroy-brown@concord.org) is the scrum master and a project manager.