alert-circle An exclamation point inside of a circle. alert-triangle An exclamation point inside of a triangle shape. arrow-down-left An arrow pointing down and to the left. arrow-down-right An arrow pointing down and to the right. arrow-down An arrow pointing down. arrow-left An arrow pointing left. arrow-right-thick A thick arrow pointing right arrow-right An arrow pointing right. arrow-up-left An arrow pointing up and to the left. arrow-up-right-thick A thick arrow pointing up and to the right arrow-up-right An arrow pointing up and to the right. arrow-up-thick A thick arrow pointing up arrow-up An arrow pointing up. award A award bell A bell. calendar A calendar icon. camera-off A camera that is deactivated. camera A camera. check-circle A checkmark in a circle. checkmark A checkmark. chevron-down A chevron arrow pointing down. chevron-up A chevron arrow pointing up. chevron A chevron arrow pointing down. chevron A chevron arrow pointing down. chrome Chrome browser logo. close-circle An x in a circle. close A x shape. door A car door. edge Edge browser logo. ellipses An ellipses shape. engine A car engine. envelope A closed envelope. explorer Internet explorer logo. eye-off An eye that is deactivated. eye An eye. facebook Facebook logo. file-text A piece of paper with lines on it. file A blank piece of paper. firefox Firefox browser logo icon-flame A flame. fwd A car drivetrain. gear A gear with multiple teeth. grid A 2x2 grid. heart An empty heart. height-width Arrows indicating height and width measurement. home A home icon. info THe letter i in a circle. instagram Instagram logo. link A chain link. linkedin Linkedin logo. map-marker A map marker pin. maximize Four corners containing a plus sign. menu Three lines signifying a menu. message-circle A speech bubble. minus A minus dash. mpg A car dashboard gauge. opera Opera browser logo. pause A pause symbol. pencil A pencil. phone A phone handset. pinteest-disc Pinterest logo in a disc. pinterest Pinterest logo. play A play button. plus A plus symbol. safari Safari browser logo. search A magnifying glass. seat A car seat. shield A shield sliders A group of control sliders. square A square with rounded corners star A star. tag A shopping tag. thumbs-down A hand with the thumb pointing down. thumbs-up A hand with the thumb pointing up. trash A trash can. trophy A trophy. truck A truck icon. twitter Twitter logo. user-circle An outline of a person in a circle. user An outline of a person. video A video camera. youtube Youtube logo. zoom-in A magnifying glass with a plus in the center
Spark logo Spark Design System
Accessibility

Keyboard interaction

All focusable interactive elements are operable with a keyboard and can be navigated to and from using the Tab key

Back to the a11y checklist

Why it matters

All interactive elements on a page (e.g. fields, buttons, links, menus, accordions, media players, etc.) need to be operable with the keyboard. We also need to ensure that keyboard users do not become trapped in a subset of the content that can only be exited using a mouse or pointing device. For example, keyboard users must be able to use modals, lighboxes, and other pop-ups, and dismiss them with the Escape key.

WCAG 2.0 reference: 2.1 Keyboard Accessible (Guideline), 2.1.1 Keyboard, 2.1.2 No Keyboard Trap

Example: When a modal dialog box is triggered, it needs to “trap” the keyboard use to the modal until it is dismissed by the user. The keyboard focus needs to immediately move to the first actionable element in the modal. When a user moves the keyboard focus past the last element in the modal dialog box, it needs to loop to the beginning of the dialog box. The keyboard user needs to be able to access all controls in the dialog box, especially the controls to dismiss the dialog.

Sample modal code

How to check for this

Follow these steps Manual

Collaborators

Designers identify and define the tab order

Resources