search

BorderTech / wcomponents

Accessible Web UI Framework for Enterprise
GNU General Public License v3.0
21 stars 17 forks source link

table heading which are sortable are not accessible. #1768

Open SteveHarney opened 3 years ago

SteveHarney commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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>