Pie Chart Accessibility

| | Comments (0)

Like pie charts but worry about screen reader accessibility? There is a simple workaround - provide both the chart and the numeric in text form. The latest survey results of screen reader usage from Web AIM provides a great example of chart and graph accessibility.

While a pie chart (embedded in an image) is provided for each result, the table with the data is shown immediately below. The ALT tag used simply indicates the chart being shown (e.g. alt="Chart showing mobile screen readers used"), but the actual numbers can be seen in the table beneath the image. Not only does this method avoid adding a lengthy image description, but provides numeric data to low-vision users and simplifies the presentation of the pie chart (no tiny numbers needed in the image).

Another good lesson from these pie charts is that they are usable for users with color deficient vision because they rely on values of lightness and darkness. They are still colorful, but each slice color is differentiated by lightness/darkness not color (i.e. hue).

Leave a comment