Add aria-expanded and title attributes for accessibility improvements #135
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add aria-expanded and title attributes to first cell of each row so that when someone tabs to them they will hear "click to expand" or "click to collapse" in the screen reader. Also, if use hovers above the cell with their mouse, they will see a title with the same language. Note: these new changes can be tested with the Basic Responsive and other examples (https://datatables.net/extensions/responsive/examples/initialisation/option.html), but there is an issue where tabbing doesn't work correctly until rows are sorted few times. (see reported Issue DataTables#134 ). To test the proposed accessibility improvement changes, please click the sorting buttons several times in the datatable.
pczarn2
changed the title
AllanJard
added a commit
that referenced
this pull request
Oct 23, 2024
…ctly Fix: `tabindex` could incorrectly be applied to the final column when Ajax loading data #135
|
Oops - didn't mean to reference this issue with that commit - it was meant for #134 ! |
AllanJard
pushed a commit
to DataTables/Dist-DataTables-Responsive
that referenced
this pull request
Oct 23, 2024
… accessability wasn't being applied correctly Fix: `tabindex` could incorrectly be applied to the final column when Ajax loading data DataTables/Responsive#135 Sync to source repo @079d776d2c7eaf9f0131b195d41da7afccc8e3dd
AllanJard
pushed a commit
to DataTables/Dist-DataTables-Responsive-DataTables
that referenced
this pull request
Oct 23, 2024
… accessability wasn't being applied correctly Fix: `tabindex` could incorrectly be applied to the final column when Ajax loading data DataTables/Responsive#135 Sync to source repo @079d776d2c7eaf9f0131b195d41da7afccc8e3dd
AllanJard
pushed a commit
to DataTables/Dist-DataTables-Responsive-Bootstrap
that referenced
this pull request
Oct 23, 2024
… accessability wasn't being applied correctly Fix: `tabindex` could incorrectly be applied to the final column when Ajax loading data DataTables/Responsive#135 Sync to source repo @079d776d2c7eaf9f0131b195d41da7afccc8e3dd
AllanJard
pushed a commit
to DataTables/Dist-DataTables-Responsive-Foundation
that referenced
this pull request
Oct 23, 2024
… accessability wasn't being applied correctly Fix: `tabindex` could incorrectly be applied to the final column when Ajax loading data DataTables/Responsive#135 Sync to source repo @079d776d2c7eaf9f0131b195d41da7afccc8e3dd
AllanJard
pushed a commit
to DataTables/Dist-DataTables-Responsive-jQueryUI
that referenced
this pull request
Oct 23, 2024
… accessability wasn't being applied correctly Fix: `tabindex` could incorrectly be applied to the final column when Ajax loading data DataTables/Responsive#135 Sync to source repo @079d776d2c7eaf9f0131b195d41da7afccc8e3dd
AllanJard
pushed a commit
to DataTables/Dist-DataTables-Responsive-SemanticUI
that referenced
this pull request
Oct 23, 2024
… accessability wasn't being applied correctly Fix: `tabindex` could incorrectly be applied to the final column when Ajax loading data DataTables/Responsive#135 Sync to source repo @079d776d2c7eaf9f0131b195d41da7afccc8e3dd
AllanJard
pushed a commit
to DataTables/Dist-DataTables-Responsive-Bootstrap4
that referenced
this pull request
Oct 23, 2024
… accessability wasn't being applied correctly Fix: `tabindex` could incorrectly be applied to the final column when Ajax loading data DataTables/Responsive#135 Sync to source repo @079d776d2c7eaf9f0131b195d41da7afccc8e3dd
AllanJard
pushed a commit
to DataTables/Dist-DataTables-Responsive-Bootstrap5
that referenced
this pull request
Oct 23, 2024
… accessability wasn't being applied correctly Fix: `tabindex` could incorrectly be applied to the final column when Ajax loading data DataTables/Responsive#135 Sync to source repo @079d776d2c7eaf9f0131b195d41da7afccc8e3dd
AllanJard
pushed a commit
to DataTables/Dist-DataTables-Responsive-Bulma
that referenced
this pull request
Oct 23, 2024
… accessability wasn't being applied correctly Fix: `tabindex` could incorrectly be applied to the final column when Ajax loading data DataTables/Responsive#135 Sync to source repo @079d776d2c7eaf9f0131b195d41da7afccc8e3dd
|
Let me have a little think about this one. It sounds like a good idea in principle, particularly the aria attributes. It would need i18n support though, and I don't really want title attributes by default. I'll have a think :-) |
|
@AllanJard Sounds good. Thanks for considering it :) |
|
@AllanJard with the new tab indexes code, the following lines of code are no longer needed (they will cause a small bug that overwrites the titles/aria-expanded during table resizing on the rows that were collapsed before resize.
|
|
Thanks - I'll keep that in mind when I come to this. |
|
@AllanJard I just had a thought that maybe instead of using title attributes, maybe tooltips like this would be better? https://a11y.nicolas-hoffmann.net/simple-tooltip/ Something to consider once you have time to look at this again. |
|
Thanks for the suggestion. JS driven tooltips are a lot more flexible, but I won't be adding a dependency to this library (other than DataTables and jQuery of course). If someone wants to use an external tooltip library they can run it on the generated table. |
|
Makes sense. Thanks! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Add aria-expanded and title attributes to first cell of each row so that when someone tabs to them they will hear "click to expand" or "click to collapse" in the screen reader. Also, if user hovers above the cell with their mouse, they will see a title with the same language.
Note: these new changes can be tested with the Basic Responsive and other examples (https://datatables.net/extensions/responsive/examples/initialisation/option.html), but there is an issue where tabbing doesn't work correctly until rows are sorted few times. (see reported Issue #134 ). To test the proposed accessibility improvement changes in this pull request, please click the sorting buttons several times in the DataTable before testing.
Changes have been tested with NVDA and JAWS. I don't have a way to test with Voice Over.