act-rules.github.io
act-rules.github.io copied to clipboard
act-rules
Headers attribute rule should skip non-table roles [a25f45]
The following example would fail the headers attribute rule, because the applicability only excludes table that are not in the accessibility tree. I think the exception should be broader, and exclude tables that do not have role=table, grid, or treegrid.
<table role="region">
<td id="self" headers="self">World</td>
</table>
Another possibility could be to be inapplicable when there is no th element in the table (or no role of *header).
Considering the need to record accessibility support data, once we have agreed on that, might be worth to mention that with Safari (+ VO) semantic tables (managed using HTML 5 tags such as <table>, <thead>, <tbody>, <tr>, <th>, <td>, ...) styled using CSS properties such as display:flex do not behave as tables and, consequently, header cells neither. They are rendered as text nodes and role="..." attribute must be set to allow AT rendering them accordingly.
Discussed in CG call: update applicability to exclude tables that do not have role table, grid, or treegrid
Hello group,
as per CG call, I'm providing table and list examples where, in Safari (and this is here for over a year - at least), CSS overrides the semantic of <table> and <list> elements.
Unfortunately (or fortunately :D) I'm no longer able to replicate the Chrome scenario I mentioned during the discussion (but it was replicable on November 4th).
-
Standard table element with no CSS property set by the author -
<tr>properly computed into the accessibility tree as a row:
-
Table element with display:flex CSS property set -
<tr>improperly computed into the accessibility tree as a text element (no matching ARIA role) - table content is announced as simple text:
-
Table element with display:flex CSS property set but also role="table" -
<tr>properly computed into the accessibility tree as a row:
Similarly, list elements (<ul> or <ol>) with list-style-type:none CSS property are not recognized as list elements by Safari:
-
Standard list element with no CSS property set by the author -
<ul>properly computed into the accessibility tree as a list:
-
List element with list-style-type:none CSS property -
<ul>improperly computed into the accessibility tree as a text element (no matching ARIA role) - list items are announced as simple text:
-
List element with list-style-type:none CSS property set but also role="list" -
<ul>properly computed into the accessibility tree as a list:
Attached also the .zip with the examples for your own tests: example.html.zip
Giacomo
+ If in Chrome you replace "display: flex" in the 2nd table with "display: contents" you obtain something similar to the scenario I was able to replicate on Nov 4th (but I'm pretty sure it was "display: flex" and for sure not "display: contents").