DockingLayout 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.

The DockingLayout is a non standard element when it comes to the Accessibility. It groups multiple other components like Splitters, Tabs, Windows by adding interaction capabilities between them. That is why it has the role "group".

Accessibility is achieved thanks to the WAI-ARIA attributes of the composing elements. Some of which are:

  • aria-disabled - indicates that interaction with the DockingLayout is disabled.
  • aria-hidden - applied to DockingLayout internal containers that do not take part in the interaction of the element and do not provide any information about the component. These elements should not be part of the accessibility API of the component.
  • aria-modal - applied to the TabsWindow components that represents the items of the DockingLayout. This attribute is used to indicate that the windows are not modal.
  • aria-owns - indicates that the DockingLayout is the actual parent owner of TabsWindow items. In cases where the items are dropped outside ( undocked ) the DockingLayout, this attribute is applied to them to indicate their actual owner.
  • aria-label - defines a string that labels the internal components of the DockingLayout that contain information about the it's state. Such elements are the header buttons of the TabsWindow items that provide the possibility to manipulate them.
  • aria-orientation - indicates the current orientation of the Splitter and Tab components that construct the DockingLayout component.

Keyboard Interaction

The DockingLayout element features several components that have their own keyboard handling. Keyboard navigation depends on the currently focused component.

Via the TAB key the users can navigate through the focusable components of the DockingLayout.

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

Key Action
TAB Changes the focus to a different DockingLayout item.
Control Hides the snapping feedback that appears during item dragging.
Escape Cancel the current dragging operation.

Additional information on WAI-ARIA for the SMART Framework can be found here.