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

Editor 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 Editor acts as a button(s) with a popup. As such it has the role "button" applied along with additional ARIA attributes to describe the behavior of the component.

The following ARIA attributes are used in the Editor:

  • aria-disabled - indicates that interaction with the Editor is disabled.
  • aria-hidden - indicates that the element does not take part in the interaction with the Editor 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-describedby - indicates that there's an element that describes the value of the Editor component.
  • aria-activedescendant - contains the ID of the currently active child object that is part of the Editor component.
  • aria-pressed - describes the state of a toolbar button item in the Editor component.
  • aria-haspopup - Indicates the availability and type of interactive popup element, such as menu or dialog associated to a Toolbar item.
  • aria-placeholder - Defines a short hint (a word or short phrase) intended to aid the user with data.
  • aria-multiline - Indicates whether a text box accepts multiple lines of input or only a single line
  • 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 Editor and other elements from it's template.
  • aria-labelledby - identifies the element that labels the Editor.

Smart.Editor supports the following keyboard shortcuts:

  • Insert link - Control + K
  • Insert image - Control + Shift + I
  • Insert table - Control + Shift + E
  • Undo - Control + Z
  • Redo - Control + Y
  • Copy - Control + C
  • Cut - Control + X
  • Paste - Control + V
  • Bold - Control + B
  • Italic - Control + I
  • Underline - Control + U
  • Strikethrough - Control + Shift + S
  • Uppercase - Control + Shift + U
  • Lowercase - Control + Shift + L
  • Superscript - Control + Shift + =
  • Subscript - Control + =
  • Indent - Control + ]
  • Outdent - Control + [
  • Source Code Mode / Preview Mode - Control + Shift + H
  • Full Scree Mode - Control + Shift + F
  • Justify Center - Control + E
  • Justify Full - Control + J
  • Justify Left - Control + L
  • Justify Right - Control + R
  • Clear Format - Control + Shift + R
  • Ordered List - Control + Shift + O
  • Unordered List - Control + Alt + O

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