Patterns

Start Reset

Example 1 CodeX Example 2 Choose a beer: (use “Kro” to see some suggestions) Keyboard Interaction UP and DOWN: Cycles through auto-suggestions and input field. ESC: Close the menu ENTER: Select the currently focused auto-suggestion and close the menu. TAB: Select the currently focused auto-suggestion, close the menu, and move focus to the next focusable element. Screen-reader Interaction when… Continue reading Accessible jQuery-ui Components

Example File New Open Print Edit Undo Redo Cut Copy Paste Format Font Text View 100% Zoom In Zoom Out Help The menus are keyboard accessible: Activate the triggering element using the keyboard. Press the Up and Down Arrow keys to move focus between the menu options. Press the Left and Right Arrow keys to… Continue reading Accessible Nav Menu

Example ARIA Date Picker Set Date: keyboard accessible When the calendar is opened, focus is set on the current date. Press the Left and Right arrow keys to navigate the row by week day. Press the Home and End keys to jump to the beginning or end of the current row. Press the Up and… Continue reading Accessible Datepickers

Example 1 Accessible dialog tooltip window Welcome div (and test the focus trap). ARIA Role Attribute Element Usage dialog div Identifies the element that serves as the dialog container. aria-labelledby=IDREF div Gives the dialog an accessible name by referring to the element that provides the dialog title. aria-describedby=IDREF div Gives the dialog an accessible description… Continue reading Accessible dialog tooltip

Example Show me another modal Woot, you can take the content of a hidden div (and test the focus trap). You may also test a loooooooooong… content. Aria Role Attribute Element Usage dialog div Identifies the element that serves as the dialog container. aria-labelledby=IDREF div Gives the dialog an accessible name by referring to the… Continue reading Accessible Modal Window

Example 1st tab 2nd tab 3rd tab Title here the content of 1st tab Other title here the content of 2nd tab Another title here the content of 3rd tab Aria Role, Property, State, and Tabindex Attributes Role Attribute Element Usage tablist div Indicates that the element serves as a container for a set of… Continue reading Accessible Tab Panel

Accessible Accordion Example First tab Content of 1st tab Second tab Content of 2nd tab Third tab Content of 3rd tab ARIA Attribute Element Usage aria-expanded=”true” button Set to true when the Accordion panel is expanded, otherwise set to false. aria-controls=”ID” button Points to the ID of the panel which the header controls. aria-disabled=”true” button If the accordion… Continue reading Accessible Accordion

Aria Data Table Example Accessibility Webinar Title Location Date Accessibility Testing Chennai Oct 25th, 2019 Accessibility Documentation Delhi Dec 21st, 2019 Accessibility ARIA Punjab Oct 25th, 2019 HTML Code CSS Code JAWS Screen Reader Shortcuts Topic Task Command Table: Go to next (previous) table T (Shift + T) Cell: Cell to right Ctrl + Alt… Continue reading ARIA Data Table