Accessibility/WebAccessibilityAPI: Difference between revisions

Accessibility/WebAccessibilityAPI (view source)

Revision as of 21:21, 28 April 2015

187 bytes removed , 28 April 2015

→‎Make the content accessible

Surkov.alexander

Confirmed users

1,396

edits

@@ Line 1,483: / Line 1,483: @@
 </code>
-===Feedback===
-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.
+===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.
 <pre>
-partial interface AccessibleElement {
+partial interface AccessibleSource {
-   void notifyOf(DOMString eventType, optional Object attrs);
+   sequence<AccessibleSource> children;
 };
 </pre>
+<b>Example. Add items into the list.</b>
-<code>
-AccessibleElement .''notifyOf''
-::Called when source has been changed to notify the host accessible element about property change. The browser is responsible to fire proper accessible events and update its internal representation.
-::Parameters
-:::prop
-::::Name of the property like ''role'' or ''state''
-:::value
-::::Value describing the event.
-</code>
-If the above listbox gets disabled then you have to reflect that in its state:
 <pre>
-var listboxSource = {
+var sourceItems = [
-  role: "listbox",
+  {
-  name: "breed list",
+    role: "listitem",
-  states: "disabled",
+    states: "focusable",
+    name: "item1"
-   get element() { return this.elm; }
+   },
-   set element(aElm) {
+   {
-     this.elm = aElm;
+     role: "listitem",
-    this.elm.notifyOf("change:name");
+     states: "focusable",
-     this.elm.notifyOf("change:states", { added: "disabled" });
+    name: "item2"
    }
-};
+];
+listboxNode.accessibleSource = { children: sourceItems };
 </pre>
-===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.
 <pre>
-typedef AccessibleSource or sequence<AccessibleSource>
-  AccessibleChild;
 partial interface AccessibleElement {
-   AccessibleChild appendChildren(AccessibleChild);
+   Children children;
+};
-   void removeChildren(AccessibleChild);
+interface Children {
+   iterable<AccessibleElement>;
-   AccessibleChild insertBefore(AccessibleChild);
+   void append(AccessibleSource or DOMNode ... children);
-   AccessibleChild insertAfter(AccessibleChild);
+  void insertBefore(AccessibleElement before, AccessibleSource or DOMNode children);
-};
+   void remove(AccessibleElement ... children);
+  void removeAll();
+}
 </pre>
 <code>
-AccessibleElement .''appendChildren''
+Children .''append''
 ::Creates accessible elements from given sources and appends them as children of the accessible element.
 </code>
 <code>
-AccessibleElement .''removeChildren''
+Children .''remove''
 ::Removes accessible elements, generated from given source elements, from the accessible tree.
 </code>
@@ Line 1,559: / Line 1,546: @@
 </code>
-Also you can manage <code>AccessibleElement.source</code> property to change the sourced accessible element (which is equivalent to removal/insertion operation) or remove the accessible element if its source is nullified.
-Now you can add list item accessible elements to listbox accessible element.
-<pre>
-var sourceItems = [
-  {
-    role: "listitem",
-    states: "focusable",
-    name: "item1"
-  },
-  {
-    role: "listitem",
-    states: "focusable",
-    name: "item2"
-  }
-];
-var listItems = listboxNode.accessibleElement.appendChildren(items);
-</pre>
@@ Line 1,619: / Line 1,586: @@
 button.propChanged("name");
 </pre>
+===Feedback===
+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.
+<pre>
+partial interface AccessibleElement {
+  void notifyOf(DOMString eventType, optional Object attrs);
+};
+</pre>
+<code>
+AccessibleElement .''notifyOf''
+::Called when source has been changed to notify the host accessible element about property change. The browser is responsible to fire proper accessible events and update its internal representation.
+::Parameters
+:::prop
+::::Name of the property like ''role'' or ''state''
+:::value
+::::Value describing the event.
+</code>
+If the above listbox gets disabled then you have to reflect that in its state:
+<pre>
+var listboxSource = {
+  role: "listbox",
+  name: "breed list",
+  states: "disabled",
+  get element() { return this.elm; }
+  set element(aElm) {
+    this.elm = aElm;
+    this.elm.notifyOf("change:name");
+    this.elm.notifyOf("change:states", { added: "disabled" });
+  }
+};
+</pre>
 ===Implied semantics===