Accessibility/WebAccessibilityAPI: Difference between revisions

Jump to navigation Jump to search

Accessibility/WebAccessibilityAPI (view source)

Revision as of 16:43, 29 April 2015

1,281 bytes added ,  29 April 2015
→‎Make the content accessible
Line 1,176: Line 1,176:
* create whole accessible trees for inaccessible content, for example, for graphics, charts in a canvas.
* create whole accessible trees for inaccessible content, for example, for graphics, charts in a canvas.


===Tweaking the accessible element===
===Direct change of accessible properties===


Accessible element properties can be altered right on the accessible element. Changing accessible property will result in accessible events if needed. For example:
Accessible element properties can be altered right on the accessible element. Changing accessible property will result in accessible events if needed. For example:
Line 1,185: Line 1,185:
<script>
<script>
var div = document.getElementById("button").a11ement;
var div = document.getElementById("button").a11ement;
div.name="click me";
div.name = "click me";
div.description = "test accessibility";
div.description = "test accessibility";
</script>
</script>
Line 1,267: Line 1,267:


<div id="AccessibleSource">
<div id="AccessibleSource">
===Extending the semantics===
===Extend the semantic via accessible source===
</div>
</div>


Line 1,488: Line 1,488:
In case if interactions cannot be provided then the accessible source have to implement <code>activate</code> method to invoke actions.
In case if interactions cannot be provided then the accessible source have to implement <code>activate</code> method to invoke actions.


====Reference to the accessible element====
====Proto====


<code>
<code>
AccessibleSource .''element''
AccessibleSource .''proto''
::Set by the browser when the accessible source is attached to the accessible element.
::Point to accessible element implementation as it was before 'source' set. Set by the browser when the accessible source is attached to the accessible element.  
</code>
</code>


===Building the accessible tree===


The web developer can create whole portions of accessible content having no underlying DOM nodes. This can be done by creating ''AccessibleSource'' object and attaching it to the existing accessible tree.
===Change the accessible tree===


<pre>
The web developer can alter existing accessible tree including subtree creations and deletions. This can be done either by <code>AccessibleSource</code> object assigned to the accessible element or by direct manipulations on the accessible tree.
partial interface AccessibleSource {
  sequence<AccessibleSource> children;
};
</pre>


<b>Example. Add items into the list.</b>


<pre>
====Direct manipulations on the tree====
var sourceItems = [
  {
    role: "listitem",
    states: "focusable",
    name: "item1"
  },
  {
    role: "listitem",
    states: "focusable",
    name: "item2"
  }
];
listboxNode.accessibleSource = { children: sourceItems };
</pre>


Accessible source object can be used to create new accessible element and insert it into the tree. If DOM node is used as a source then associated subtrees of accessible elements within the DOM node are reparanted, i.e. they are removed from children of its current accessible parent and added as children of new parent. Accessible element can be removed from children.


<pre>
<pre>
partial interface AccessibleElement {
partial interface AccessibleChildren {
  Children children;
};
 
interface Children {
  iterable<AccessibleElement>;
 
   void append(AccessibleSource or DOMNode ... children);
   void append(AccessibleSource or DOMNode ... children);
   void insertBefore(AccessibleElement before, AccessibleSource or DOMNode children);
   void insertBefore(AccessibleElement before, AccessibleSource or DOMNode ... children);
  void insertAfter(AccessibleElement after, AccessibleSource or DOMNode ... children);
  void replace(AccessibleSource or DOMNode ... children);
   void remove(AccessibleElement ... children);
   void remove(AccessibleElement ... children);
   void removeAll();
   void clear();
}
};
</pre>
</pre>


<code>
<code>
Children .''append''
Children .''append''
::Creates accessible elements from given sources and appends them as children of the accessible element.
::Appends accessible elements provided by sources as children to the accessible element.
</code>
 
Children .''insertBefore''
::Inserts accessible elements provided by sources before the given child.
 
Children .''insertAfter''
::Inserts accessible elements provided by sources after the given child.
 
Children .''replace''
::Replaces existing children accessible elements within elements provided by sources.


<code>
Children .''remove''
Children .''remove''
::Removes accessible elements, generated from given source elements, from the accessible tree.
::Removes accessible elements from the accessible tree.
 
Children .''clear''
::Removes all child accessible elements.
</code>
</code>


<b>Example</b>
<pre>
<input id="input" role="combobox">
<div id="list" role="listbox">
  <div role="listitem">choice1</div>
  <div role="listitem">choice1</div>
</div>
<script>
var input = document.getElementById("input").a11ement;
input.children.replace(document.getElementById("list"));
</script>
<pre>
====Build up the tree via accessible source====
You can provide child accessible elements for the given accessible element by assigning <code>AccessibleSource</code> object to it. This approach allows to create whole portions of the accessible tree for the content having no underlying DOM nodes.
<pre>
partial interface AccessibleSource {
  sequence<AccessibleSource or DOMNode> children;
};
</pre>


<code>
<code>
AccessibleElement .''insertBefore''
AccessibleSource .''children''
 
::Return collection of accessible children. If AccessibleSource is provided then it's used to create a new accessible element and insert it as a child. If accessible DOMNode is provided then its accessible element is used, if inaccessible DOMNode is provided then its accessible children if any are used.
AccessibleElement .''insertAfter''
::Creates accessible elements from given sources and inserts them as siblings of the accessible element.
</code>
</code>


<b>Example. Add list with items into the tree.</b>
<pre>
var tree = {
  role: "listbox",
  name: "colors",
  children: [
    {
      role: "listitem",
      states: "focusable",
      name: "red"
    },
    {
      role: "listitem",
      states: "focusable",
      name: "green"
    }
  ]
};
divNode.accessibleSource = tree;
</pre>




====Canvas hit regions====
====Canvas hit regions====


Canvas [https://html.spec.whatwg.org/multipage/scripting.html#hit-regions hit region options] are extended by ''accessibleElement'' which is used to connect accessible element with hit region. Whenever hit region is activated then ''activate'' method of connected ''AccessibleSource'' object is called with no argument provided.
Canvas [https://html.spec.whatwg.org/multipage/scripting.html#hit-regions hit region options] are extended by ''a11ement'' which is used to connect accessible element with hit region. Whenever hit region is activated then ''activate'' method of connected ''AccessibleSource'' object is called with no argument provided.


Say you have a canvas with drawn button. In order to make it accessible you can create accessible button right in JS.
Say you have a canvas with drawn button. In order to make it accessible you can create accessible button right in JS.


<pre>
<pre>
var canvasNode = document.getElementById("canvas");
var source = {
var buttonSource = {
   role: "button",
   role: "button", name: "test",
  name: "test",
   actions: [ "click" ],
   actions: {
  activate: function(aName) {
     click: {
     if (aName == "click") {
       interactions: {
       var event = new MouseEvent("click", { "clientX, this.x, "clientY": this.y });
        mouse: "click"
       canvasNode.dispatchEvent(event);
       }
      return;
     }
     }
 
  },
     // the button was activated by the user (called as callback from hit region)
  onactivated: function(aEvent) {
    this.button.propChanged("states");
     if (aEvent.region == "button")
     this.states += "focused";
      this.proto.set("focused");
     else
      this.proto.states.unset("focused");
   }
   }
   x: 100,
   proto: null
  y: 100;
  canvasNode: canvasNode,
  button: null
};
};


buttonSource.button = canvas.accessibleElement.attachSource(buttonSource);
canvasNode.addHitRegion({ id: "button", a11ement: source });
canvasNode.addHitRegion({ "accessibleElement": buttonSource });
canvasNode.addEventListener("click", source.onactivated.bind(source));
</pre>
 
If accessible button property is changed then you have to call ''sourceChanged'', for example, if ''name'' is changed then you do
 
<pre>
buttonSource.name = "new name";
button.propChanged("name");
</pre>
</pre>




===Feedback===
===Feedback notifications===


An accessible element may be notified of any kind of event, including its accessible source property change. In case of notification the browser will fire accessible events and update its cache if necessary. Decision when to notify the browser or not should be based on accessible events model. In other words if the property change in native markup causes an accessible event then same change in accessible source requires it too.
An accessible element may be notified of any kind of event, including its accessible source property change. In case of notification the browser will fire accessible events and update its cache if necessary. Decision when to notify the browser or not should be based on accessible events model. In other words if the property change in native markup causes an accessible event then same change in accessible source requires it too.
Surkov.alexander
Confirmed users
1,396

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/1071120"

Navigation menu