Kanban Accessibility

Accesibility Attributes

Web accessibility makes web content and web applications more accessible to disabled people. It's especially helpful in dynamic content changes and development of advanced user interface components with HTML, Javascript and related technologies. Smart HTML elements framework offers full accessibility support for it's web components.

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.

Keyboard Interaction

The following keyboard shortcuts are available to interact with the Kanban:

Key Action
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.