nib icon indicating copy to clipboard operation
nib copied to clipboard

WAI ARIA Compliance

Open jpuri opened this issue 6 years ago • 0 comments
trafficstars

To comply with WIA-ARIA rules I plan to implement following:

  1. All clickable sections should be focuseable.
  2. Add following role attribute to tag as applicable: 1. button - An input that allows for user-triggered actions when clicked or pressed. aria-disabled, aria-label, aria-haspopup 2. cell - A cell in a tabular container. 3. columnheader - A cell containing header information for a column. 3. dialog - A dialog is a descendant window of the primary window of a web application. For HTML pages, the primary application window is the entire web document, i.e., the body element. aria-label, Authors SHOULD focus an element in the modal dialog when it is displayed, and authors SHOULD manage focus of modal dialogs., aria-modal 4. heading - A heading for a section of the page. aria-level 5. img - A container for a collection of elements that form an image. aria-label 6. textbox - A generic type of widget that allows user input. aria-placeholder, aria-required, aria-label, aria-labelledby, aria-disabled, 7. link - An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. aria-disabled, aria-label 8. list - A section containing listitem elements. See related listbox. 9. listitem - A single item in a list or directory. 10. option - A selectable item in a select list. 11. grid - A composite widget containing a collection of one or more rows with one or more cells where some or all cells in the grid are focusable by using methods of two-dimensional navigation, such as directional arrow keys. aria-label 12. listbox - A widget that allows the user to select one or more items from a list of choices. 13. row - A row of cells in a tabular container. 14. rowheader - A cell containing header information for a row in a grid. 15. separator - A divider that separates and distinguishes sections of content or groups of menuitems. 16. table - A section containing data arranged in rows and columns. 18. toolbar - A collection of commonly used function buttons or controls represented in compact visual form. Authors MUST supply a label on each toolbar when the application contains more than one toolbar. 19. tooltip - A contextual popup that displays a description for an element. Authors SHOULD ensure that elements with the role tooltip are referenced through the use of aria-describedby before or at the time the tooltip is displayed.

aria-readonly, aria-required, aria-label, aria-labelledby, aria-disabled, aria-hidden, aria-keyshortcuts

  1. Menu items should all be focuseable.

Ref: https://www.w3.org/TR/wai-aria-1.1/#introduction

jpuri avatar Feb 16 '19 10:02 jpuri