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

Window provides a built-in compliance with WAI-ARIA specification via attributes like role, aria-modal, aria-label and others.

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 Window component has a role dialog and as such it is a descendant window of the primary window of a web application. Dialogs are most often used to prompt the user to enter or respond to information. A dialog that is designed to interrupt workflow is usually modal.

The Window component has a header section that can hold multiple button controls with role button that can trigger an action.

The following ARIA attributes are used in the Window:

  • aria-disabled - indicates that the interaction with the Window is disabled.
  • aria-modal - indicates whether or not the Window is modal.
  • aria-label - applied to the buttons located in the header section of the Window. Each button contains only an icon. That is why it needs a label attribute to provide a textual explanation of it's purpose, for example collapse, minimize, maximize, pin, etc.
  • aria-labelledby - indicates that there is another element that labels the Window. That element is the header and the attribute points to it's id.
  • aria-level - applied to the header section of the Window, indicates that the header is nested at level 1.

Keyboard Interaction

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

Key Action
Arrow Down/Up/Left/Right Draggs the window in the corresponding direction, if the window is not pinned.
Control + Arrow Down/Up/Left/Right Resizes the window in the corresponding direction, according to the resizeMode property.
Alt + Arrow Down/Up/Left/Right Maximizes/Minimizes/Restores the window depending on the current state and the headerPosition property of the Window. When headerPosition is 'left' or 'right', Arrow Left/ Arrow Right will trigger the operations and vice versa.
Escape Closes the window.
Enter/Space Selects a header button, if focused.
ALT + C Collapses/Expands the Window.
ALT + M Minimizes/Restores the Window.
ALT + P Pin/Unpin the Window.

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