tesk9/accessible-html/5.0.0

NOTE: the latest version is 6.2.0

Accessibility.Key

Managing focus

tabbable : Bool -> Attribute msg

Add or remove an element from the normal flow of tabbable/focusable elements.

tabbable True will set the tabindex to 0, and tabbable False will set the tabindex to -1.

You may use Html.Attributes.tabindex if you need to control the tab order more explicitly, but you may want to restructure your HTML to match how you want users to interact with it instead. If you're considering changing tabindex or restructuring your HTML, read Understanding Success Criterion 1.3.2: Meaningful Sequence.

Keyboard event listener

onKeyDown : List (Decoder msg) -> Attribute msg

Pass a list of decoders.

onKeyDown [ enter TheyHitEnterDoSomething, left DoSomeOtherThing ]

Decoders

tab : msg -> Decoder msg

Use with onKeyDown to succeed when user hits the tab key.

onKeyDown [ tab Tab ]
tabBack : msg -> Decoder msg

Use with onKeyDown to succeed when user hits the tab key while hitting shift.

onKeyDown [ tabBack GoBack ]
up : msg -> Decoder msg

Use with onKeyDown to succeed when user hits the up arrow key.

onKeyDown [ up Up ]
down : msg -> Decoder msg

Use with onKeyDown to succeed when user hits the down arrow key.

onKeyDown [ down Down ]
left : msg -> Decoder msg

Use with onKeyDown to succeed when user hits the left arrow key.

onKeyDown [ left Left ]

Activation

enter : msg -> Decoder msg

Use with onKeyDown to succeed when user hits the Enter key.

onKeyDown [ enter TheyHitEnterDoSomething ]
space : msg -> Decoder msg

Use with onKeyDown to succeed when user hits the spacebar.

onKeyDown [ space SpaceBar ]

Deactivation

escape : msg -> Decoder msg

Use with onKeyDown to succeed when user hits esc.

onKeyDown [ escape CloseModal ]