How do you handle images of text and charts in an accessible way?

Alt text should describe the subject, environment, actions, or any other relevant information. Basically, how would you succinctly describe what you're seeing to someone not there?

Alt Text is sometimes overdiscriptive, but when it comes to charts and graphs as images on a website it is important that the user gets a similar understanding of the chart/ graph as a person without sight impairment. The user should know what the Chart is showing and key takeaways from the Chart

For an image with a small amount of text, setting alt text can be an OK solution. For more complex images -- including charts -- alt text is usually not sufficient. It's better to avoid images of text when you can. For charts, it's better to include a table next to the chart showing the same data, and/or a text summary of the chart.

The approach of using text instead of images of text has several advantages. Firstly, it makes the text more readable and offers flexibility in adjusting font size, style, and colour to cater to individual users. Additionally, text is easily scalable for users with vision challenges without compromising clarity, unlike images, which can become pixelated. Text content is more discoverable by search engines, and works with screen readers without the need for alt text.

If your goal is to conform to the Web Content Accessibility Guidelines (WCAG), then avoiding images of text is essential. There are a few exceptions where WCAG does permit text in images: * within logos * within images that contain "significant other visual content", e.g. graphs, screenshots, and diagrams * where users can customize the "font, size, color, and background" of the text within the image See the WCAG success criterion 1.4.4 Images of Text for more info.

Ensuring accessibility for images of text and charts involves thoughtful integration of captions and summaries. Drawing from my experience, captions should succinctly describe the image's relevance, while summaries provide a deeper analysis, enhancing understanding for users with visual impairments. This approach not only complies with WCAG guidelines but also enriches user engagement by ensuring content is perceivable by all. It’s essential to use clear, concise language in both captions and summaries to aid understanding without overwhelming the user. This strategy benefits all users by providing multiple ways to interpret and interact with content, ultimately fostering a more inclusive web environment.

For data visualizations always provide a data table equivalent to the chart to allow the information to be consumable by a screen reader. Libraries like highcharts and charts.js are good starting points.

To achieve the best accessibility for data visualizations, consider using a tool that produces interactive, accessible charts. Preferably these should include sonification -- allowing users to explore your chart via sound.

One thing to note, when it comes to images and charts, automation really will only be able to tell if an image has alt text or not. It wont be able to tell if the image alt is valuable or not. For charts, there isn't really any automated checks for them specifically. If you are testing if the charts/graphs you are making are accessible, this would require manual intervention.

These must be tested manually. One day we may have automated tools that test charts reliably, but until that date comes, manual testing is the best way to ensure accessibility. Including a detailed description of the story of each chart is also recommended.

Evaluating images and charts using automated tools is a non-starter and probably one of the worst use-cases for this type of technology. All Automated testing tools rely on an over-simplified algorithm which detects the presence of an alternative accessible text without really checking that text to see if that text is a suitable description of the image or its purpose. Charts and graphs in particular almost always need an alternative data table that is accessible and can be read and understood by assistive technologies such as screen readers. If there was ever a prime example to illustrate why manual testing by an experienced web accessibility professional is needed over automated testing then this would be it.

When creating charts and graphs, use labels, hatching and shading, and/or different types of dotted lines to ensure that color is not used as the sole means of conveying information. Check the chart using color blindness simulators to verify that the information is accessible to users with color vision deficiency.

To handle images of text and charts accessibly: - Use text over images of text whenever possible. - Use descriptive alt text for images that accurately convey their content. - Provide text-based summaries or descriptions for charts and graphs. - Consider using HTML tables or SVG graphics for accessible chart alternatives.