In this section, we have provided guidance for creating accessible figures and tables. By figures, we are referring to visual content such as charts, diagrams, images, designs, schematics and text blocks that may be embedded as images.
Since visual content including figures contributes to a paper or pictorial’s communication of knowledge, the visual design and alt text should also reflect that intellectual merit. So we have developed guidance for creating accessible content to support authors and reviewers.
While papers and pictorials will not be rejected for having inaccessible visual content alone, we aim to ensure papers and pictorials are accessible to the widest audience possible. Following this guidance before submission will make camera ready preparation easier, at which point accessible figures will be required, and also support reviewers who rely on accessible figures. However, authors will have the opportunity to update their figures and alt text before the camera ready submission, just as they will be able to make other final edits to their papers and pictorials.
Please read this guide before creating figures and alt text for your submission, but please do not hesitate to reach out to the DIS 2023 Accessibility and Diversity Chairs for assistance at inclusion@dis2023.acm.org.
In addition to the DIS 2023 accessibility team (Rahaf Alharbi, Cynthia Bennett, Robin Brewer, Franchesca Spektor), Frank Elavsky and Garreth Tigwell contributed to writing this guidance.
TL;DR: A Summary
This guidance is long so we have developed these high level key points. However, a time investment into learning how to create accessible figures now will pay off later. We encourage readers to not just read these key points but to read the subsections corresponding with each figure type in their paper or pictorial.
- Visual Accessibility
Create figures with appropriate color contrast. Use high resolution png files for any images. - Alt text
Write figure descriptions that consider a research audience, which may be longer than alt text on social media or websites. Provide research-related detail and describe any data trends or axis information (e.g., in charts). We have specific guidance for pictorial authors or those who have grouped photos. - Table descriptions
Use the table feature of your editor to create tables. Keep tables simple and avoid nesting tables. Brief table descriptions help readers get the main points quickly.
Creating Visually Accessible Figures:
Accessible figures are visually accessible to people with varying visual and cognitive capabilities and disabilities (e.g, low vision, color blindness). To create figures that are visually accessible, we recommend:
- Avoid using color as the only channel for conveying meaningful or essential information. Some readers may have impaired color vision and be unable to distinguish between low contrast shades or certain color pairings. Pairing textures, shapes, size or dash patterns can be more useful–but watch for patterns that are easy to confuse, such as similar dashed lines that cross over each other in a line chart. See more examples of how to pair shape, pattern, and color here.
- We understand that attaining adequate contrast may be difficult when figures are photos, such as pictures of a user study. However, authors can be intentional about choosing clear images when possible, can highlight key content to increase its contrast, and can include informative captions and alt text (see more guidance below).
- Adequately contrast the color of meaningful elements with their background at a ratio of 4.5:1. This ratio also matters if you are highlighting or annotating information in figures. You can use this WebAIM: Color Contrast Checker. For example, black text on a white background would be high contrast and might minimize distracting elements.
- You can easily increase the comprehensibility of your figure by adding an informative caption, descriptive text where necessary including chart/diagram titles, axis labels, and legends.
- Informative captions give readers context to interpret your figures appropriately. They are different from alt text (described below) which makes the visual content accessible to screen readers and braille displays. Informative captions tell all readers what to expect and why you have included it. In journalism, captions are supposed to answer the 5 ‘W’s,’ (‘who,’ ‘what,’ ‘when,’ ‘where,’ and ‘why’), but the composition of your figures will determine which questions are most important to answer in the informative captions corresponding with your unique figures.
- High resolution figures tend to be more accessible. We recommend at least 300 dots per inch (DPI) but the best resolution will depend on the size and content in your figure. High resolution helps readers who will print out your paper or pictorial s they will not be able to zoom into the figures.
- Cropping images to focus on the content of interest reduces distractions.
- Using the full width of the page will make figures more readable.
- Embed figures/images as high resolution PNG. This will result in fewer problems during the PDF accessibility remediation phase while still providing quality for users who zoom or view figures and images in a large format.
Examples of visually accessible figures
What makes this figure visually accessible: This is a color coded diagram showing the tasks in each component in a study on alt text. The diagram shows two study phases, one with alt text authors (top) and one with screen reader users (bottom). There is a clear arrow drawn from alt text author usability testing tasks 1 and 2 to the second part of the screen reader users’ interview, representing the data flow. The figure uses contrast-appropriate colors, but meaning is not communicated only through color. Finally, this figure includes both a figure description and a caption within the body of the paper.
This figure example is from Kelly Mack, Edward Cutrell, Bongshin Lee, and Meredith Ringel Morris. 2021. “Designing Tools for High-Quality Alt Text Authoring.” In The 23rd International ACM SIGACCESS Conference on Computers and Accessibility, 1–14. Virtual Event USA: ACM. https://doi.org/10.1145/3441852.3471207. The authors’ figure description was adapted to the context of this document; please see original, full caption in the paper.
What makes this figure accessible: A mouse cursor is selecting a bar (left, shown with a thick indication border) in a stacked bar chart to filter a dataset (on the right). This figure shows a bar chart that uses color as well as textures to represent information.
This figure is used as an example in The Chartability Workbook.
Resources for creating visually accessible figures
- WebAIM: Accessible Images
- WebAIM: Color Contrast Checker
- Guidance on charts from Apple
- Chartability Image Accessibility Audit URL
- Author Reflections on Creating Accessible Academic Papers
- ACM Accessibility
Creating Alt Text for Your Figures
Alt text makes visual content (e.g., images, diagrams, and charts) accessible to screen reader and braille users. They include the essential information about a figure. Below we provide guidance and examples of good and bad alt text for images and graphs.
To create high-quality alt text, we recommend:
- Write alt text considering the context and audience. While many guides recommend that alt text be brief, remember the audience for papers and pictorials is often other researchers. Consider what an alt text reader would need to know to adequately review whether the work is relevant for their own research–such as accurately summarizing your results in their own literature review or even replicating the study. This may require more detail than alt text written for a more casual context like social media.
- Generally, structure your alt text to give a high-level summary, then details. However, high-level summaries should not be the same as the figure caption, which a screen reader user will also read. Whereas the caption will provide context (guidance in the previous section), the high-level overview can overview the visual content (e.g., 2 line charts (top and bottom) depicting changes over time). The details can then commence. (E.g., (top) line chart titled T shows A on the X-axis, B on the Y-axis and contains C trend and/or D and E key data points.) Sharing key takeaways that the visual draws a reader’s eye toward may be included in this detail, particularly when a graphic is complex with many data series, datapoints, or trend changes.
- Describe relevant research information. When depicting study equipment, consider its high importance to the figure. A lot of alt text guidance emphasizes the importance of describing people, sometimes more than other objects in the image. However, in the context of a paper or pictorial, alt text readers are likely also researchers and need to know more details about the study equipment, prototype, workshop supplies, etc.
- If you are writing alt text for a data representation, it is likely essential that you include the chart/diagram type, the type of data in the chart which is often reflected in the axis labels and legend, and the key takeaways. Colors, shapes, and textures used to visually style a data representation do not need to be described, but the categories they represent should be included.
- In certain cases, redundancy between text in the body text and alt text is ok. Some alt text writing guides recommend not replicating information in alt text that is written in body text (e.g., writing key results in a paragraph in the paper). Our advice departs from these guides as a common method for skimming papers and pictorials is to glance from figure-to-figure. Screen reader users deserve this same access. In fact, there are keyboard commands to navigate files and web pages graphic-by-graphic. If you write key results in your paper or pictorial that are also represented in a figure, you can copy and paste them in the alt text, and include them at the end of the ‘details’ section of alt text so a screen reader user can move on if they have already encountered these key results in your paper or pictorial’s text. At the very least, reference the paper or pictorial section where the details are given (e.g., key points are detailed in section 4.3).
- If you include a table of data that makes up the figure in supplementary materials, reference it in that figure’s alt text. While this welcome data table means the alt text could contain fewer details about specific data points, the main points should still be communicated in the alt text.
- Some figures may show meaningful relationships, such as arrows between boxes in a diagram or schematic. Explain meaningful relationships in alt text after giving the high-level overview. See these Image Description Guidelines from The Diagram Center for more nuanced recommendations.
- Some figures may depict a group of images. If the grouping is meaningful, write this meaning in the alt text before describing the individual images. See these Image Description Guidelines from The Diagram Center for more nuanced recommendations.
Example Alt Text for Photos / Figures:
High-quality alt text: “Selection of prototyping materials and narrators’ biographical prototypes brought to the workshop. Nikki’s back scratcher on the far left; Dianna’s jeggings and sequins and wax-covered pen in the middle; and Nikki’s embroidery holder featured on the far right.”
Low-quality alt text: “Prototyping materials and prototypes laid out on a table.”
The difference: The low quality version provides no information about the materials on the table, or how they are important to the study.
Figure and alt-text is from Cynthia L. Bennett, Burren Peil, and Daniela K. Rosner. 2019. Biographical Prototypes: Reimagining Recognition and Disability in Design. In Proceedings of the 2019 on Designing Interactive Systems Conference (DIS ’19). Association for Computing Machinery, New York, NY, USA, 35–47. https://doi.org/10.1145/3322276.3322376
Example Alt Text for Photos / Figures:
High quality alt text:
“5 people icons around a table. John is at the bottom end of the table. On the right side of the table is the participant and captioner, with the participant sitting closer to John. Angled between John and the participant is a tablet displaying the current interview question and a screen displaying captions. To John’s left, on the left side of the table, are two interpreters.”
Low quality alt text:
“A diagram of the study setup.”
For reference, also see the original figure caption:
“A diagram of John’s setup when interviewing DHH participants. John thoughtfully organized the space to ensure sightlines between himself and his captioner, himself and the participant, his participant and the interpreters, and himself and his participant to the tablet with interview questions. This diagram was created and shared with John’s permission and feedback.”
Notice that the alt text and caption complement each other. They do not replicate each other.
Figure and alt-text is from Kelly Mack, Emma McDonnell, Venkatesh Potluri, Maggie Xu, Jailyn Zabala, Jeffrey Bigham, Jennifer Mankoff, and Cynthia Bennett. “Anticipate and Adjust: Cultivating Access in Human-Centered Methods.” In CHI Conference on Human Factors in Computing Systems, pp. 1-18. 2022. DOI: https://doi.org/10.1145/3491102.3501882
Example Alt Text for Data Visualization
High quality alt text: “Two stacked horizontal bar graphs showing the percentage of overall description scores by figure and description type.
Graph 1 – Percentage of Overall Description by Figure Type:
Y-axis represents the different figure types.
X-axis represents the percentage, ranging from 0% to 100%.
All Figures: 0: Blank = 24%; 1: Not Descriptive = just over 0%; 2: Somewhat Descriptive = 114%; 3: Descriptive = 89%; 4: Very Descriptive = 68%; Number of figures = 300; Percentage of figures = 100%.
Data Vis: 0: Blank = just over 0%; 1: Not Descriptive = just over 0%; 2: Somewhat Descriptive = 34%; 3: Descriptive = 36%; 4: Very Descriptive = 25%; Number of figures = 98; Percentage of figures = 33%.
Image: 0: Blank = just over 0%; 1: Not Descriptive = just over 0%; 2: Somewhat Descriptive = 60%; 3: Descriptive = 42%; 4: Very Descriptive = 36%; Number of figures = 142; Percentage of figures = 47%.
Diagram: 0: Blank = 2%; 1: Not Descriptive = just over 0%; 2: Somewhat Descriptive = 21%; 3: Descriptive = 16%; 4: Very Descriptive = 10%; Number of figures = 50; Percentage of figures = 17%.
Text Block: 0: Blank = 7%; 1: Not Descriptive = 2%; 2: Somewhat Descriptive = 4%; 3: Descriptive = N/A; 4: Very Descriptive = N/A; Number of figures = 13; Percentage of figures = 4%.
Table: 0: Blank = 10%; 1: Not Descriptive = N/A; 2: Somewhat Descriptive = 4%; 3: Descriptive = 3%; 4: Very Descriptive = N/A; Number of figures = 17; Percentage of figures = 6%.
Graph 2 – Percentage of Description Score by Description Type:
Y-axis represents the different description types.
X-axis represents the percentage, ranging from 0% to 100%.
Overall: 0: Blank = 24%; 1: Not Descriptive = just over 0%; 2: Somewhat Descriptive = 114%; 3: Descriptive = 89%; 4: Very Descriptive = 68%; Number of figures = 300.
Caption: 0: Blank = 26%; 1: Not Descriptive = just over 0%; 2: Somewhat Descriptive = 185%; 3: Descriptive = 68%; 4: Very Descriptive = 16%; Number of figures = 300.
Alt Text (Long): 0: Blank = 96%; 1: Not Descriptive = just over 0%; 2: Somewhat Descriptive = 88%; 3: Descriptive = 56%; 4: Very Descriptive = 51%; Number of figures = 300.
Alt Text (Short): 0: Blank = 161%; 1: Not Descriptive = 119%; 2: Somewhat Descriptive = 17%; 3: Descriptive = just over 0%; 4: Very Descriptive = just over 0%; Number of figures = 300.”
Low quality alt text: “Two bar plots showing overall scores of description quality by figure type and description type.”
Difference: the high quality alt text provides numerical details of the different elements in each bar plot whereas the low quality alt text is missing critical information.
Disclaimer: This figure could have been more visually accessible by denoting bars with texture in addition to color.
Figure & alt text is from Candace Williams, Lilian de Greef, Ed Harris III, Leah Findlater, Amy Pavel, and Cynthia Bennett. 2022. “Toward supporting quality alt text in computing publications.” In Proceedings of the 19th International Web for All Conference, pp. 1-12. DOI: https://doi.org/10.1145/3493612.3520449
Example Papers and Pictorials with High-Quality Alt Text
Note for accessing alt text: If you’re not using a screen reader, you can view existing alt-text in a PDF by hovering your cursor over the images in Adobe. Additionally, for users with advanced Acrobat Acrobat functionality, you can go into the Accessibility tab and click “Set Alternate Text.” This will let you click through all alt-text for figures one at a time.
- Spektor et al. 2021 pictorial and document of figures and alt text
- De Greef et al. 2021
- Lee et al. 2022
- Mack et al. 2021
- Mack et al. 2022
- Menzies et al. 2022
- Williams et al. 2022
Resources for Writing Alt Text
- SIGACCESS Guide on Describing Figures
- Image Description Guidelines from The Diagram Center
- How to write good alternative descriptions for your data visualization
- “How to write an image description” by Alex Chen
Creating Accessible Tables and Text blocks
To create accessible tables and text blocks, we recommend:
- Use your text editor’s built-in tables to format tables, as they tend to be more screen reader accessible and thus not require alt text. Adding tables to your paper or pictorial via an image file necessitates alt text, in which case, the text from each cell should be reformatted into natural language sentences, usually one for each row, and included in the alt text.
- Try to keep tables simple. Generally, it is better to have a higher quantity of simpler tables than one complex table (i.e., splitting a large table into multiple smaller tables). Avoid merging cells together, nested tables, styling to denote significance, and images or graphics mixed in with data in other cells. In a single cell, try to only include one data point rather than including multiple values.
- Table descriptions should not be redundant with captions. Like alt text, table captions are not the same as table descriptions. Table captions might include a title of the table. In the table description, authors could include the main takeaways and purpose of the table. For example, a table description could include trends or patterns.
- Format text blocks (e.g., pseudocode snippets) as block quotes instead of images. This allows a screen reader user to navigate the text with the same keyboard commands they employ to read the paper or pictorial. Adding text blocks as image files to your paper requires alt text, in which case all of the text from the text block should be included. However, formatting text as text is preferable. Text in images likely will not scale well, which can particularly impact people with low vision who need to magnify the image to see it properly.
Examples of accessible tables:
| Date | Event | Venue |
| 12 February | Waltz with Strauss | Main Hall |
| 24 March | The Obelisks | West Wing |
| 14 April | The What | Main Hall |
Table description: This table was created using our editor’s table function, and will thus be accessible to a screen reader. It shows sufficient contrast between text and background on the top row, which further helps distinguish important details. It depicts an example of a fictional concert lineup, including the dates, name of event, and venues for three shows.
Resources for creating accessible tables:
Accessibility & Diversity Chairs
- Cynthia Bennett
- Robin Brewer
Assistants to the Accessibility and Diversity Chairs
- Rahaf Alharbi
- Franchesca Spektor