Accessibility Tip of the Week: Providing alternative text for complex images

/ susangifford

This week Robert Hardy, our district website accessibility specialist, shares about how to provide alternative text for complex images. Please call Robert with any accessibility questions at Ext. 6105. He is more than happy to talk by phone or schedule a time to meet with you.

Some images are difficult to describe succinctly. Images such as graphs or flow charts don’t lend themselves to simple interpretation, and can be concerning when approached from an accessibility standpoint.

In actuality, these complex images can be quite simple to make accessible. Rather than provide an alternative text tag, the author can include additional content alongside their complex image. This additional content not only enhances accessibility, but also improves the user experience overall.

Graphs

When it comes to graphs or charts, the easiest and most accessible route is to provide a data table alongside the image. Take for example this graph showing the high and low temperatures for this week:

Olympia high and low temps week of 2/13/19 - table included below

While the chart does well to show trends, the data table is particularly helpful in showing exact figures.

Table of highs and low temperatures for the week in order from Sunday through Saturday: Highs 40, 32, 34, 39, 42, 38 and 33. Lows: 32, 15, 14, 22, 27, 28, 16.

Doing this also enables users to copy and paste the data. A live example of this practice can be seen on the district’s 2018 Annual Report.

Flow Charts

Another complex image type is a flow chart. Take for example this flow chart from the Capital High School Course Catalog:

CHS course catalog flow chart example - list version included below

Similar to the graph above, a flow chart can be challenging to describe in paragraph form. What can be included to enhance accessibility? In this case, the answer would be to include the flow chart in list form alongside the graphic. This flow chart could be displayed as:

  • Algebra 1 (required)
    • Geometry (required)
      • 4-year college path options (Meets 3rd math credit)
        • Algebra 2 (C or better in Geometry)
          • IB Discrete (B or better in Alg2)
            • Pre Calculus (B or better in Discrete)
          • Pre Calculus (B or better in Alg2)
            • IB Calculus SL (B or better in Pre Calc)
              • IB Calculus HL (B or better in Calc)
      • Non 4-year college options (Meets 3rd math credit)
        • Financial Algebra (Alg & Geom)
        • Precision / Bicycle Manufacturing (Alg & Geom)
        • Robotics Math (Alg & Geom)

Similar to the chart and table example, this simplified layout also allows for content to be copied and pasted later on.

By providing alternatives in these ways, we can work not only to enhance the accessibility of our content, but also the general usability.

As always, if you have any questions regarding creating accessible content, please reach out to Robert Hardy at extension 6105.