Using aria-sort in HTML5 Validation
Assuming a static HTML table, for example:
<table> <thead> <tr> <th scope="col" aria-sort="none"><a href="...">Name <span title="Sort">▲</span></a></th> <th scope="col" aria-sort="ascending"><a href="...">Score <span title="Ascending">▲</span></a></th> </tr> </thead> <tbody> <tr> <td>C</td> <td>1</td> </tr> <tr> <td>A</td> <td>5</td> </tr> <tr> <td>B</td> <td>9</td> </tr> </tbody> </table> Would it be wise to use aria-sort (when UA supports it)?
http://www.w3.org/TR/wai-aria/states_and_properties#aria-sort
I think this might be useful, but the W3C validator currently requires role="columnheader" in <th scope="col"> , which is redundant as it already implies th[scope="col"] :
http://www.w3.org/TR/wai-aria/roles#columnheader
And once you start specifying this, you also need to set the role for everyone up to <table role="grid"> ... which is great if you don't use the appropriate tags.
The validator is correct. This may seem strange, but the problem is with the specification, not with the validator.
As @CraigFrancis comments, this issue was raised on the authentication mailing list, where the message refers to the error report. The error was closed on the grounds that the behavior of the validators is correct, in accordance with the specifications. This means that if you use aria-sort , you need to explicitly set the role in columnheader or rowheader , even if you have the scope attribute.
As stated in this question, this means that additional role attributes are then needed higher in the document tree, so that you will end with the following minimally:
<!doctype html> <title>aria-sort issue</title> <table role="grid"> <thead> <tr role="row"> <th scope="col" role="columnheader" aria-sort="none"><a href="...">Name <span title="Sort">▲</span></a></th> <th scope="col" role="columnheader" aria-sort="ascending"><a href="...">Score <span title="Ascending">▲</span></a></th> </tr> </thead> <tbody> <tr> <td>C</td> <td>1</td> </tr> <tr> <td>A</td> <td>5</td> </tr> <tr> <td>B</td> <td>9</td> </tr> </tbody> </table> This looks superfluous, especially since the definition of role=columnheader says that it is "the structural equivalent of an HTML th element with a column scope." However, the HTML5 LC definitions related to WAI-ARIA do not indicate the implied ARIA semantics for th (or tr or table ). This may reflect the use of tables for layout, which was widespread, so it is unrealistic to assume that the table element represents a grid (array, matrix) in a structural (or “semantic”) sense. Thus, when the "tabularity" of the table element is related to ARIA, it must be explicitly expressed by role attributes at different levels of nesting.
Please note that the aria-sort attribute is purely informative, declarative. It describes that the elements of a table (grid) are in ascending or descending order (or another). It does not ask the browser to sort them or create user interface tools for sorting. In practice, it is intended for use when the author has taken care of sorting the table, on the server side of the page or on the client side of JavaScript. User agents can use this information in various ways, for example. announcing the order to the user.
The ARIA specification adds that "for each table or grid, authors SHOULD apply aria-sort only one header at a time." Sample code violates this recommendation. (The error message is not issued by the validator, it SHOULD, not SHALL.) In this case, aria-sort="none" should be deleted. The aria-sort attribute specified in the column header indicates that the rows in the table are sorted according to this column, so for obvious reasons, it should only be set for one column.