To ensure that DITA table content is compatible with screen readers and accessible to individuals with visual impairments, it’s important to follow best practices for structuring tables and providing descriptive information.

These practices involve using semantic markup, providing alternative text, using headers and captions, using row and column grouping, avoiding excessive rowspan and colspan attributes, specifying headers and IDs, and testing with screen readers.

Use Semantic Markup

Use semantic markup to structure tables. In DITA, this involves defining tables with <table>, <tgroup>, and associated elements such as <colspec>, <tbody>, <row>, and <entry>. These elements provide structure and context for assistive technologies.

Provide Alternative Text

When tables include images or non-text content, use the alt attribute to provide alternative text that describes the content. Ensure that this description conveys the same information as the visual representation.

Use Headers and Captions

Include table headers (<th>) to label rows and columns. This helps screen readers interpret the structure of the table. Additionally, consider using a <title> or <caption> element to provide a summary or title for the table.

Use Row and Column Grouping

When tables are complex and involve groups of rows or columns, use <thead>, <tfoot>, and <tbody> elements to group them. This aids screen readers in presenting the content in a structured manner.

Avoid Excessive Rowspan and Colspan

Minimize the use of rowspan and colspan attributes, as excessive use can complicate screen reader interpretation. Only use these attributes when necessary for conveying the table’s structure.

Specify Headers and IDs

For complex tables, associate data cells with headers using the headers attribute. Use unique id attributes for headers and associate them with data cells.

Test with Screen Readers

Always test tables using screen reader software to ensure that they are navigable and comprehensible. Make necessary adjustments based on the feedback.

Example

    <table>
      <caption>Monthly Sales Report</caption>
      <colgroup>
        <col span="1" style="width: 1*;"></col>
        <col span="1" style="width: 1*;"></col>
        <col span="1" style="width: 1*;"></col>
      </colgroup>
      <thead>
        <tr>
          <th scope="col" rowspan="2" colspan="1">Product</th>
          <th scope="col" rowspan="1" colspan="1">January</th>
          <th scope="col" rowspan="1" colspan="1">February</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row" rowspan="1" colspan="1">1001</th>
          <td headers="r2c2">350</td>
          <td headers="r2c3">420</td>
        </tr>
      </tbody>
    </table>
  

In this example, the table includes semantic elements, a title, row and column headers, and alternative text for the product images. Following these best practices ensures that the table is accessible to users with visual impairments and can be effectively interpreted by screen reader software.