Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

table heading which are sortable are not accessible. #1768

Open
SteveHarney opened this issue Oct 8, 2020 · 3 comments
Open

table heading which are sortable are not accessible. #1768

SteveHarney opened this issue Oct 8, 2020 · 3 comments

Comments

@SteveHarney
Copy link

I have been looking into various html controls presented by wcomponents it has come to my attention that the table headers for sortable columns should have the role="button" as this is a typical mark up for screen readers.

This is a snippet generated from from 1.5.23

                 <th id="_0_thh1" scope="col" data-wc-columnidx="0" class="wc-th" tabindex="0"
                     aria-sort="none">
                    <div id="_0a0a" class="wc-decoratedlabel">
                       <div id="_0a0a-body" class="wc-labelbody wc_dlbl_seg">First name</div>
                    </div>
                    <i aria-hidden="true" class="fa fa-caret-down"/>
                 </th>
@ghost ghost self-assigned this Oct 15, 2020
@ghost
Copy link

ghost commented Oct 15, 2020

Thanks @SteveHarney . When the last update was made to the table HTML column sorting was intrinsic to the th element column header when the table had the sortable attribute. That attribute has been dropped from 5.2 so we will have to update the table.
I am not convinced the th element is the right place for a role of button as that would remove its intrinsic role of columnheader but you are right, we should make explicit the interactive nature of the sort function in some way.

@ghost ghost added the theme only label Oct 15, 2020
@ghost
Copy link

ghost commented Oct 15, 2020

It appears that WAI-ARIA authoring practices suggest use of role grid on a table which is interactive and no role on sortable column headers - instead the use of property aria-sort implies a sortable column. This will still require rewriting the table HTML and providing an implementation of keywalker to comply but will not require role masking.
See https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html#ex2_label for an example.

@SteveHarney
Copy link
Author

The aria-sort does not indicate sortable, but rather that the data has been sorted. the example provided actually still uses role="button" on a span inside the TH.

<table role="grid" aria-labelledby="grid2Label" class="data">
          <tbody><tr>
            <th aria-sort="ascending">
              <span tabindex="0" role="button">Date</span>
            </th>

@ghost ghost removed the theme only label Nov 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant