htmlattributesinternationalizationaccessibility

Can I set a language attribute on the col element of a table


I have a table that has mixed languages. One column has English and the other column has another language. Is it possible to set the language for that column at a column level or do I need to set the language at each cell.

for example, would this produce a properly accessible table for anyone using a screenreader:

<table>
    <colgroup>
      <col lang="en" />
      <col lang="fr" />
    </colgroup>
     <thead>
       <tr>
         <th id="product-name" lang="fr">Produit</th>
         <th id="product-cta">Essai de Produit</th>
      </tr>
     </thead>
    <tbody>
      <tr>
        <th headers="product-name" id="widgetos">WidgetOS</th>
        <td headers="widgetos product-cta"><a href="#">essaye-le</a></td>
      </tr>
      <tr>
        <th headers="product-name" id="widgetplugins">Widget Plugins</th>
        <td headers="widgetplugins product-cta"><a href="#">essaye-le</a></td>
      </tr>
    </tbody>
</table>

or do I have no choice but to set the lang at each table cell:

<table>
     <thead lang="fr">
       <tr>
         <th id="product-name"Produit</th>
         <th id="product-cta">Essai de Produit</th>
      </tr>
     </thead>
    <tbody>
      <tr>
        <th headers="product-name" id="widgetos" lang="en">WidgetOS</th>
        <td headers="widgetos product-cta" lang="fr"><a href="#">essaye-le</a></td>
      </tr>
      <tr>
        <th headers="product-name" id="widgetplugins" lang="en">Widget Plugins</th>
        <td headers="widgetplugins product-cta" lang="fr"><a href="#">essaye-le</a></td>
      </tr>
    </tbody>
</table>
    

Solution

  • It's technically valid to have a lang attribute, since it is allowed on all elements.

    However, the documentation for lang attribute says:

    The lang global attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user.

    If an element has no lang attribute, it will inherit the lang value set on its parent node, which in turn may inherit it from its parent, and so on.

    IN clear, this implies that the lang attribute affects the content within the element, and nothing else. Since <col> has no descendants, we can deduce that a lang attribute here is totally useless, it can't affect anything.

    ON the side of col element, it is described how CSS is handled, but nothing is said about attributes of other kind, if they are sort of "distributed" or "copied" to the corresponding cells or not. Since nothing is specified, I wouldn't assume they are, or not consistantly across browsers.

    Additionally to the pure doc answer, screen readers need to stay as simple as possible: they switch language when an element with a different lang is encountered, and switch back when it's finished. Languages switches are obviously and naturally stored in a stack (to handle nesting properly). For efficiency, they probably don't check if a lang is specified / coming from elsewhere. In particular, the <col> essentially gives presentational informations, so is maybe even totally ignored by screen readers.

    So to wrap up, you'd better play the safe path and specify the lang attribute in every cell, rather than rely on a quite hypothetic behavior mostly unspecified.