4.1.2.A. Use the aria-live attribute for the drag and drop customisation feature (high)
As a screen reader user,
I want the aria-live attribute to be used to track focus changes for the drag and drop customisation feature
So that screen readers can announce the position of the item to screen reader users to ensure they can keep track of where the current item is.
Issue | Examples | Description | Code used | Recommendation |
---|---|---|---|---|
27 |
.Stat Data Explorer (BETA) • Regional Statistics by Remoteness Structure (ASGS 2016), 2011-2020 Example of what the the screen reader says: - You have lifted the Measure dimension from *object object* at position 1. - You have moved the selected dimension from *object object* to *object object* at position 1, the highest position in *object object* is position 2
|
When users "pick up" the item and move it to different columns, there is no screen reader announcement to inform users of the section it will be dropped into. Additionally, when the item is dropped in a column with multiple items, there is no indication of how many items are in the column or the current positioning. So users who are browsing with a screen reader may not be able to track which changes they are making to the table. Users who are using keyboard only to activate the control may not be able to follow which items are focused. |
It is recommended to announce the position of the item to screen reader users to ensure they can keep track of where the current item is. This can be achieved by using an aria-live region and programmatically pushing messages to the container. The region should be on the page at all times. Text added within the region is announced immediately by screen readers. The status change messages should include which section (Rows, Columns, Row Sections) the item is in, and the position if it is being dropped into a stack. For example "Rows column, second item of two rows". Additionally push messages to this region to say when the item has been picked up and placed. Ensure the aria-live region is emptied before new messages are added. From the example, here is what the screen reader should ideally announce: - You have lifted the Measure dimension from *Columns* at position 1. - You have moved the selected dimension from *Columns* to *Row sections* at position 1, the highest position in *Row sections* is position 2
|
Edited by jean-baptiste nonin