Build your web apps using Smart Custom Elements
Smart.Kanban - Accessibility
Kanban provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-label, aria-expanded, aria-hidden and others. They are applied to the corresponding elements inside the template of the components.
The purpose of the ARIA attributes is to help disabled people by providing the information specific to the component to assistive technology in the screen readers.
The Kanban acts as logical collection of UI elements - the Kanban's columns and tasks. As such, it has the role "group" applied along with additional ARIA attributes to describe the behavior of the component.
The following ARIA attributes are used in the Kanban:
- aria-disabled - indicates that interaction with the Kanban is disabled.
- aria-hidden - indicates that the element does not take part in the interaction with the Kanban and will not be mapped to the accessibility API. For example, the arrow icon inside the drop down button doesn't provide information for the assistive technology so it should be ignored.
- aria-orientation - applied to the ScrollBar and Listbox elements inside the template of the Kanban, this attribute indicates their orientation. For example, there is a horizontal and a vertical scrollbar inside the popup.
- aria-valuemax - applied to the ScrollBar elements inside the popup of the Kanban. Used to indicate the maximum scroll value.
- aria-valuemin - applied to the ScrollBar elements inside the popup of the Kanban. Indicates minimum scorll value of the element.
- aria-valuenow - applied to the ScrollBar elements inside the popup of the Kanban. Used to indicate the current scroll value of the element.
- aria-describedby - indicates that there's an element that describes the value of the Kanban component.
- aria-label - defines a string value that labels the elements that provide information or user interaction. In practise, this attribute labels the input, the popup, the container that contains the label for the Kanban and other elements from it's template.
- aria-labelledby - identifies the element that labels the Kanban.
The following keyboard shortcuts are available to interact with the Kanban:
|Arrow Up / Arrow Right||Highlights the next task in a column.|
|Arrow Down / Arrow Left||Highlights the previous task in a column.|
|Home||Highlights the first task in a column.|
|End||Highlights the last task in a column.|
|Enter/Space||Selects task(s), activates focused buttons, opens Actions/Comments/Users drop downs|
|Escape||Closes opened drop down and focuses on the button that opens the drop down.|
|F2||Begins the editing of the highlighted task.|
|Delete||Deletes the highlighted task (prompts the user first).|
Additional information on WAI-ARIA for the SMART Framework can be found here.