Keyboard and screen readers
Every draggable can be dragged without a pointer. Tab to a card, press Space or Enter
to pick it up, use the arrow keys to move it between the columns that can take it (Home and
End jump to the first and the last), and press Space or Enter to drop it or
Escape to cancel. A live region tells screen readers what happens, using each source's and target's
Label; the panel under the board shows what it said. The arrow buttons on each card are the
single-pointer alternative WCAG 2.5.7 asks for: the same move, without dragging. The columns are styled from
the data-bit-bdnd-* attributes alone.
Announcements
To do 2
Doing 1 of 2
Done 1
Nothing moved yet.
What a screen reader hears
- Nothing yet: pick a card up with the keyboard. (Mouse and touch drags are not announced - a screen reader user drags with the keyboard.)
Announcements on the provider replaces the texts: each one is a function of what happened - the
source's and the target's names, the target's place and count, the item - and one that answers
null is not read out. AllowKeyboard="false" on the provider takes every card out of
keyboard dragging at once (on a single draggable, just that one): the cards leave the tab order, and the move
buttons are what is left. A Disabled target takes nothing - no hover, no drop - and the arrow keys
skip it, as they skip the full "Doing" column, whose CanDropPredicate refuses a third card.