2 Adding Alt Text To Images & Tables | Digital Services Georgia

Provide alternative text, or alt text, when a screen reader needs to understand the message provided by the images on a page. If your image contains information or represents something meaningful, determine the message the image conveys and write a short, concise text description that will convey that information. If the image is only decorative, skip the alt text so you don’t distract your users with screen readers from the more important content on the page.

When writing alt text, remember:

  • Brief is better.
  • Strive for informative, not poetic.
  • Use complete sentences with proper punctuation.
  • If the graphic includes text, put all of the words in the alt text.
  • Follow the inverted-triangle method and put the most important information first. For example, "Acme Logo: Sun rising over white sand dunes" is better than "Sun rising over white sand dunes: Acme Logo".
  • Check your spelling and try to avoid abbreviations or acronyms unless they have been previously defined. Screen readers will mispronounce words that are misspelled.
  • Don’t include any information that’s already present in the caption.
  • Describe the function of the image, especially if the image is a link. “Search the Card Catalog" is much more useful than "Photo of a collection of books and other reading materials scattered on a library table".
  • Always provide alt text for images that are links. If you don’t, the screen reader reads the title of the image.

Image alt text

  1. Right-click the image.
  2. Select Format Picture.
  3. Select the Alt Text option from the list.
  4. Add summary alt text in the description entry area.
Main Menu sample A File menu drop down with 'Format Picture' highlighted Format Picture An example of a Format Picture menu box

Use table styles

Using tables in your documents greatly increases the amount of information a screen reader must dictate to the user. First, the reader announces the the number of rows and columns, then recounts the contents for every single cell in the table. This is a long, laborious process, and you run the risk of your user getting distracted or losing interest quickly.

If you must use a table, only use it for tabular data, not plain text. Accessible tables should indicate which cells are for headers and which are for rows. Without those labels, people using assistive technology won’t be able to make sense of the information. Sometimes the reader will speak out the information in a different order than it appears. To avoid these issues, use table styles when developing a table structure.

To add a table with headings:

  1. Go to the Insert tab on the Word ribbon.
  2. In the Tables section, select the Tables icon.
  3. Select the number of rows and columns for your table.
Insert Menu sample A screen shot of the Insert menu
  1. Select the inserted table by clicking its border. When the table is selected, the Table Tools menu appears.
  2. Click on Table Tools > Design.
  3. In the Table Styles Options group, check the box next to Header Row.
Design menu Screen shot of the Design menu under Table Tools

Adding alt text to tables

Feel like your content would really benefit from a table but don’t want to put your users through that narration nightmare? Good news! The same way alt text can convey the meaning of an image, the alt text in a table provides users of screen readers the same summary information that sighted users get when quickly browsing a table.

To add alt text to your tables:

  1. Right-click the table.
  2. Select Table Properties.
  3. Select the Alt Text tab.
  4. Enter the summary information for the table in the Description field.
Table Properties Screen shot of Table Properties example. The alt text description field contains the following: "Table showing types of institution memberships. There are records for three institutions."
  • Printer-friendly version
  • Making Your Documents Accessible
  • 1 Creating Document Structure
  • 3 Hyperlinks with Context

Từ khóa » Html Table Td Alt Text