Accessibility, Disability Discrimination Act, Equality Act 2010

[cjohnsonuk]

Enhancement/feature description We are required to make sure our pages are accessible for people that use assistive technology to access our service under the UK's Disability Discrimination Act and more recently Equality Act 2010. Some of this is colour contrast to account for people with visual impairment. I'm guessing this may be a case of having an alternative theme / set of css files for high contrast. Some is missing elements such as form elements not having labels.

Steps which explain the enhancement/feature It would be good if Tablefilter created content that passed the tests for WCAG A and WCAG AA (https://www.w3.org/WAI/standards-guidelines/wcag/) . We test using tools like the Axe plugin in (https://github.com/dequelabs/axe-core) in Google Chrome

Why would the enhancement be useful to most users Developers in the UK and other countries that have legislation relating to accessibility for users of assistive technology would benefit from pages enhanced with Table filter being compliant with legislation.

Screenshots and GIFs

Additional context

Here's some text from the report generated on one of the demo tablefilter pages:

Issue description Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds Impact: serious Element location .even[validrow="true"]:nth-child(2) > td:nth-child(3) > a[target="_blank"] Element source Russia

Issue description Ensures every form element has a label

Impact: critical Element location .pgSlc Element source

**Describe alternatives you've considered** The alternative is not using Tablefilter **TableFilter Version:** tested on our site with v 0.6.105 confirmed on v0.6.109 at https://www.tablefilter.com/columns-visibility.html **Browser and version:** Chrome 79.0.3945.130 **OS and version:** Windows 10 **Device:** PC

koalyptus commented 4 years ago

Hi @cjohnsonuk, Please note you can easily satisfy those accessibility rules by using the many hooks TableFilter provides to change the style of individual elements or globally by using a custom stylesheet. Cheers

tdsbtoes commented 3 years ago

@koalyptus Our web team also commented on the markup not being accessible. It isn't a lot of work to make this compliant: adding a CAPTION to the table, and using SCOPE attributes seems to be all that's needed.

e.g.

<table>
<caption>Shelly's Daughters</caption>

<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>

<tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>

<tr>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</tr>

</table>

I know that TableFilter makes 2 tables (with grid layout), one with the headers and one with data. To be compliant, it appears TableFilter would have to make one table, or at least add a visually hidden header row for the data table. Sure, this means some extra work, but this issue of accessibility isn't going away. You should consider this.

Thanks!

EDIT> after turning off grid layout, the caption I had in my table is replaced with the pagination (bad), but only one table is used (good!). With the grid layout, the caption is removed entirely. Neat trick to use caption for pagination tools, but that negates the accessibility. Sorry!

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[koalyptus]

Hi @cjohnsonuk, Please note you can easily satisfy those accessibility rules by using the many hooks TableFilter provides to change the style of individual elements or globally by using a custom stylesheet. Cheers

[tdsbtoes]

@koalyptus Our web team also commented on the markup not being accessible. It isn't a lot of work to make this compliant: adding a CAPTION to the table, and using SCOPE attributes seems to be all that's needed.

e.g.

<table>
<caption>Shelly's Daughters</caption>

<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>

<tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>

<tr>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</tr>

</table>

I know that TableFilter makes 2 tables (with grid layout), one with the headers and one with data. To be compliant, it appears TableFilter would have to make one table, or at least add a visually hidden header row for the data table. Sure, this means some extra work, but this issue of accessibility isn't going away. You should consider this.

Thanks!

EDIT> after turning off grid layout, the caption I had in my table is replaced with the pagination (bad), but only one table is used (good!). With the grid layout, the caption is removed entirely. Neat trick to use caption for pagination tools, but that negates the accessibility. Sorry!