Accessibility

In order to make your control accessible to assistive technologies and Fabasoft app.test, you need to implement the correct semantics and keyboard navigation.

The Fabasoft product is implemented as a WAI-ARIA-compliant application (http://www.w3.org/WAI/intro/aria.php).

The default role for a new jQuery Control is document (see chapter “Predefined Attributes”) and the focused element is this.Container() (see chapter “Predefined Functions”).

If you want to do more than just providing information as plain HTML and standard form elements, you need to implement your control as a WAI-ARIA widget (http://www.w3.org/TR/wai-aria-practices/#accessiblewidget).

In the following example, the control renders a custom checkbox:

Example

function jQuery<SWCREF>_<majorid>_<minorid>_MyCheckbox()
{
// do not set ariarole on container (override default behavior)
this.config.ariarole = "";

  this.OnRender = function MyCheckbox_OnRender(output)
  {
    // add a unique id
    output.Push("<div id=\"" + this.GetId("MyCheckbox") + "\" " +
    // add a tabstop to the element which is returned by this.GetTabTarget()
                "tabindex=\"0\" " +
    // add the correct role (http://www.w3.org/TR/wai-aria/roles#checkbox)
                "role=\"checkbox\" " +
    // add the required attributes and states
                "aria-label=\"" + this.info.label + "\" " +
                "aria-checked=\"" + this.value + "\">");
    output.Push("</div>");
  };

  this.GetTabTarget = function MyCheckbox_GetTabTarget ()
  {
    // return the element with role="checkbox"
    return this.GetElement("MyCheckbox");
  };

...
}

Accessibility

Download PDF

Download PDF