Accessibility

In order to make your control available for assistive technologies and Fabasoft app.test you need to implement the correct semantic and keyboard navigation.

The Fabasoft product is implemented as a WAI-ARIA 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 more than just providing information as plain HTML and standard form elements, you need to implement your control as 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