What techniques make visual content easy to navigate with screen readers?

1 Use alt text

Alt text, or alternative text, is a brief description of the content and function of an image that is displayed when the image cannot be rendered or is not available. Alt text is also read aloud by screen readers, so it is essential to provide meaningful and relevant information that conveys the purpose and context of the image. Alt text should not be longer than 125 characters, and it should avoid repeating the caption or surrounding text. For example, instead of writing "logo of ABC company", you could write "ABC company, a leading provider of graphic design services".

2 Use captions

Captions are text labels that explain or comment on an image, usually placed below or next to it. Captions can provide additional information that is not included in the alt text, such as the source, date, or location of the image. Captions can also clarify the meaning or significance of the image, especially if it is complex or abstract. Captions should be concise and clear, and they should be linked to the image using the <figure> and <figcaption> HTML tags. This way, screen reader users can easily associate the caption with the image and access both elements as a unit.

3 Use headings

Headings are text elements that indicate the structure and hierarchy of a document or a web page. Headings can also be used to organize and label visual content, such as graphs, diagrams, and icons. Headings can help screen reader users navigate and understand the content more easily, as they can skip or jump to different sections or topics. Headings should be descriptive and informative, and they should follow a logical order from the most general (H1) to the most specific (H6). For example, you could use a heading like "Sales revenue by quarter" to introduce a bar chart that shows the data.

4 Use tables

Tables are visual representations of data that are arranged in rows and columns. Tables can be useful to display numerical or textual information in a structured and organized way. However, tables can also pose some challenges for screen reader users, as they may not be able to perceive the layout or the relationships between the cells. To make tables easy to navigate with screen readers, you need to use proper markup and formatting. You need to use the <table>, <tr>, <td>, and <th> HTML tags to define the table, rows, cells, and headers. You also need to use the <caption> tag to provide a summary of the table, and the <scope> and <id> attributes to indicate the roles and references of the headers.

5 Use SVG

SVG, or Scalable Vector Graphics, is a format that allows you to create and display vector-based images that can be scaled and modified without losing quality. SVG images can be more accessible and usable than bitmap images, such as JPEG or PNG, for screen reader users. This is because SVG images can be embedded directly into the HTML code, and they can include text and attributes that can be read by screen readers. For example, you can use the <title> and <desc> tags to provide a name and a description for the SVG image, and the <aria-label> and <aria-labelledby> attributes to link the image to the text.