Search code examples
htmlaccessibilityusabilitywai-aria

aria-sort on hyperlink instead of table thead th

I was reading/watching others implement sorting table and I haven't found any result if aria-sort is possible to ad on hyperlink. This is my original source code:

<th scope="col" role="columnheader" aria-sort="none" aria-controls="data-form-table">Name</th>

Is this possible to use it this way?

<th scope="col" role="columnheader"><a href="products.php?sort=name&mode=asc" aria-sort="none" aria-controls="data-form-table">Name</a></th>
Solution

  • Maybe, but I wouldn't recommend it.

    The W3C HTML validator fails anchor elements with this property.

    Error: Attribute aria-sort not allowed on element a at this point.

    As per the WAI-ARIA 1.1 spec, authors should use aria-sorton the th element whenever possible:

    "Authors SHOULD only apply this property to table headers or grid headers."

    https://www.w3.org/TR/wai-aria/states_and_properties#aria-sort

    The caveat here is the word "SHOULD" which is defined in this context by RFC 2119:

    1. SHOULD This word, or the adjective "RECOMMENDED", mean that there may exist valid reasons in particular circumstances to ignore a particular item, but the full implications must be understood and carefully weighed before choosing a different course.

    https://www.rfc-editor.org/rfc/rfc2119

    So, while it's not entirely prohibited, I believe that the failure of the W3C validator is sufficient cause to believe that this may present issues with assistive technology, either now or in the future.