Accessibility: Toolbar

2 posts, 0 answers
  1. Jan
    Jan avatar
    38 posts
    Member since:
    Apr 2017

    Posted 09 Jun 2017 Link to this post



    the buttons of the dialog are defined as "role=toolbar". In this case the buttons need to be controlled by the arrow keys and to disable the tab function.

    "For a horizontal toolbar (the default):
    Left Arrow: Moves focus to the previous control. Optionally, focus movement may wrap from the first element to the last element.
    Right Arrow: Moves focus to the next control. Optionally, focus movement may wrap from the last element to the first element."

    Also the "role=toolbar" should just be set, if the item count is three or more.

    "Use toolbar as a grouping element only if the group contains 3 or more controls."




    You should remove the "role=toolbar" or just set it with three items or more and add the arrow control.

  2. Veselin Tsvetanov
    Veselin Tsvetanov avatar
    699 posts

    Posted 13 Jun 2017 Link to this post

    Hello Jan,

    Thank you for the shared concerns about the Dialog WAI-ARIA compliance. After reviewing the structure of the Dilog widget, we can confirm, that from a semantic point of view, the group role is more appropriate role for the buttons container element.

    As a small token of gratitude for drawing our attention to this case, I have updated your Telerik points.

    Concerning the WAI-ARIA specification for the toolbar role, note that the manged focus of descendants MAY be implemented for this role, but it is not mandatory. As stated in the WAI-ARIA Practices, this management is suggested to optimize the benefits of the Toolbar widget. It, however, is not part of the official specification.

    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top