MozillaWiki

Accessibility/WebAccessibilityAPI: Difference between revisions

Page Discussion

Accessibility/WebAccessibilityAPI (view source)

Revision as of 15:06, 8 May 2015

6,652 bytes added ,  8 May 2015
→‎Questions/concerns
 
(25 intermediate revisions by the same user not shown)
Line 293: Line 293:
<code>
<code>
AccessibleElement .''actions''
AccessibleElement .''actions''
::Returns a [[#ActionSet|ActionSet]] object of actions exposed by the accessible element. The returned object is not live, i.e. it is not updated if the accessible element actions change.
::Returns a [[#ActionMap|ActionMap]] object of actions exposed by the accessible element. The returned object is not live, i.e. it is not updated if the accessible element actions change.
</code>
</code>


Line 374: Line 374:




<div id="ActionSet">
====ActionMap====


====ActionSet====
Accessible actions are presented by <code>ActionMap</code> map like object of pairs { action name, action object }.
</div>
 
Accessible actions are presented by <code>ActionSet</code> map like object of pairs { action name, action object }.


<pre>
<pre>
interface ActionSet {
interface ActionMap {
   readonly maplike<DOMString, Action>;
   readonly maplike<DOMString, Action>;
};
};
Line 477: Line 474:
                           });
                           });
</pre>
</pre>
====Questions/concerns====
* Interactions should be extended to allow to specify a control that triggers the action. The concept is described by InidieUI: you can use mouse, touchscreen, keyboard, voice control or a control element to invoke the action. Maybe Interactions should be renamed to Triggers to share terms with IndieUI.
Here's the image of InideUI action/interaction concept.
<div style="height: 254px; overflow: hidden;">
http://www.w3.org/WAI/intro/iui-scroll.png
</div>
Alternatively we could introduce relations between actions like "triggers" and "triggeredby".
* What about highlevel actions (uberactions), for example, "press" buttons means "send something somewhere". This may be covered by label. Another example, selected listitem on the left changes a view on the right, "select" actions has meaning of "change view". Or checkbox that enables/disables related controls, "check/uncheck" action means "enable/disable controls". These examples correlates to controlledby/controllerfor relations, but the relations doesn't reveal type of control.


===Parent-child relations===
===Parent-child relations===
Line 561: Line 573:
   AccessiblePos? move(DOMNode container, long offset);
   AccessiblePos? move(DOMNode container, long offset);
   AccessiblePos? move(DOMPoint);
   AccessiblePos? move(DOMPoint);
  AccessiblePos? move(Where where, Controller);


   AccessiblePos? search(Where where, Controller);
  AccessiblePos? move(Where where, Criteria);
   AccessiblePos? search(Where where, Criteria);


   readonly attribute AccessibleElement root;
   readonly attribute AccessibleElement root;
Line 576: Line 588:


====Construction====
====Construction====
Construction by accessible element and offset relative it.
<code>
<code>
AccessiblePos .''Constructor''(AccessibleElement, Offset, AccessibleElement)
AccessiblePos .''Constructor''(AccessibleElement, Offset, AccessibleElement)
Line 588: Line 603:
</code>
</code>


The offset may be either a number, a numeric mapping of caret position in the content, or a literal.


<pre>
<pre>
Line 593: Line 610:
enum OffsetLiterals {
enum OffsetLiterals {
   "before",
   "before",
   "afterbegin",
   "begin",
   "at",
   "at",
   "beforeend",
   "end",
   "after"
   "after"
};
};
Line 602: Line 619:
<code>
<code>
OffsetLiterals .''before''
OffsetLiterals .''before''
::Used to set the accessible position right before the accessible element beginning
::Used to set the accessible position right before the accessible element beginning.
</code>
</code>


<code>
<code>
OffsetLiterals .''afterbegin''
OffsetLiterals .''begin''
::Used to set the accessible position right after the accessible element beginning
::Used to set the accessible position right after the accessible element beginning.
</code>
</code>


<code>
<code>
OffsetLiterals .''at''
OffsetLiterals .''at''
::Used to set the accessible position at the accessible element
::Used to set the accessible position at the accessible element.
</code>
</code>


<code>
<code>
OffsetLiterals .''beforeend''
OffsetLiterals .''end''
::Used to set the accessible position right before the accessible element ending
::Used to set the accessible position right before the accessible element ending.
</code>
</code>


<code>
<code>
OffsetLiterals .''after''
OffsetLiterals .''after''
::Used to set the accessible position right after the accessible element ending
::Used to set the accessible position right after the accessible element ending.
</code>
</code>




<code>
<b>Example #1. Input widget.</b>
AccessiblePos .''Constructor''(DOMPoint, AccessibleElement)
 
::Constructs the accessible position.
<pre>
::Parameters
<input id="input" value="Hello">
:::''point'' of ''DOMPoint''
<script>
::::a point, the accessible position should be set at
var input = document.getElementById("input").a11ement;
:::''root'' of ''AccessibleElement'', optional
 
::::a root of subtree containing the position. If not provided then parent document is used.
// Position is at the control
</code>
var p = new A11ePos(input, "at");


// Position is in the control text at 0 offset.
p = new A11ePos(input, "begin");


<code>
// Position is in the control text at 5 offset.
AccessiblePos .''Constructor''(DOMNode, long, AccessibleElement)
p = new A11ePos(input, "end");
::Constructs the accessible position from (DOMNode, offset) pair.
</script>
::Parameters
</pre>
:::''node'' of ''DOMNode''
 
::::the container node
<b>Example #2. Image inside a paragraph.</b>
:::''offset'' of ''long''
 
::::offset within the container node
<pre>
:::''root'' of ''AccessibleElement'', optional
<p id="p">I <img id="img" src="love.png" alt="love"> you</p>
::::a root of subtree containing the position. If not provided then parent document is used.
 
</code>
<script>
var img = document.getElementById("img").a11ement;
 
// The position is right before the image, at 2 offset relative the paragraph.
var p = new A11ePos(img, "before");


// The position is right after the image, at 3 offset relative the paragraph.
p = new A11ePos(img, "after");


<code>
// The position is at the image, no offset relative the paragraph is applicable.
AccessiblePos .''Constructor''
p = new A11ePos(img, "at");
::Constructs the accessible position equal to given position.
p = new A11ePos(img, "begin");
::Parameters
p = new A11ePos(img, "end");
:::''pos'' of ''AccessiblePos''
</script>
::::accessible position to copy
</pre>
</code>


<b>Example #3. Table.</b>


Examples:
<pre>
<pre>
var pos1 = new A11ePos(new DOMPoint(x, y), document.accessibleElement);
<table id="table">
  <tr>
    <td>cell</td>
  </tr>
</table>
<script>
var table = document.getElementById("table").a11ement;


var pos2 = new A11ePos(button.accessibleElement, "at");
// The position at the table.
var pos3 = new A11ePos(paragraph.accessibleElement, "afterbegin");
var p = new A11ePos(table, "at");


var pos4 = new A11ePos(pos2);
// The position is in the table, before the row.
var p = new A11ePos(table, "begin");
 
// The position is in the table, after the row.
var p = new A11ePos(table, "end");
 
// The position is in the table, before the row, numeric offset is ignored.
var p = new A11ePos(table, 1);
</script>
</pre>
</pre>


====Move through the content====
 
Construction from a point on the screen. See [[#Hit_testing|hit testing]] for details.


<code>
<code>
AccessiblePos .''move''(AccessilbeElement, Offset)
AccessiblePos .''Constructor''(DOMPoint, AccessibleElement)
::Move the accessible position to the given anchor and offset.
::Constructs the accessible position.
::Parameters
::Parameters
:::''element'' of ''AccessibleElement''
:::''point'' of ''DOMPoint''
::::the anchor
::::a point, the accessible position should be set at
:::''offset'' of ''Offsest'', optional
:::''root'' of ''AccessibleElement'', optional
::::offset relative the anchor
::::a root of subtree containing the position. If not provided then parent document is used.
:::Return itself.
</code>
 


Construction from a DOM node and offset relative it. See [[#Caret_and_selection|selection]] section for examples.


AccessiblePos .''move''(DOMNode, long)
<code>
::Move the accessible position to the given DOM node at given offset.
AccessiblePos .''Constructor''(DOMNode, long, AccessibleElement)
::Constructs the accessible position from (DOMNode, offset) pair.
::Parameters
::Parameters
:::''node'' of ''DOMNode''
:::''node'' of ''DOMNode''
::::the anchor
::::the container node
:::''offset'' of ''long''
:::''offset'' of ''long''
::::offset relative the anchor
::::offset within the container node
:::Return itself.
:::''root'' of ''AccessibleElement'', optional
::::a root of subtree containing the position. If not provided then parent document is used.
</code>
 


Copy constructor.


AccessiblePos .''move''(DOMPoint)
<code>
::Move the accessible position in the content. Returns true if succeeded.
AccessiblePos .''Constructor''
::Constructs the accessible position equal to given position.
::Parameters
::Parameters
:::''point'' of ''DOMPoint''
:::''pos'' of ''AccessiblePos''
::::the point the accessible position should be moved to.
::::accessible position to copy
:::Return itself.
</code>
 
 
====Change the position====


There is a bunch of methods to change accessible position.


AccessiblePos .''move''(Where, Controller)
<code>
::Move the accessible position to the content. Returns true if succeeded.
AccessiblePos .''move''(AccessilbeElement, Offset)
::Move the accessible position to the given anchor and offset.
::Parameters
::Parameters
:::''where'' of ''Where''
:::''element'' of ''AccessibleElement''
::::where the search should be performed
::::the anchor
:::''controller'' of ''Controller''
:::''offset'' of ''Offsest'', optional
::::function describing a match
::::offset relative the anchor
:::Return itself.
:::Return itself or null if not succeeded.




AccessiblePos .''search''(Where, Controller)
AccessiblePos .''move''(DOMNode, long)
::Finds the accessible position relative the current one. Returns new instance.
::Move the accessible position to the given DOM node at given offset.
::Parameters
::Parameters
:::''where'' of ''Where''
:::''node'' of ''DOMNode''
::::where the search should be performed
::::the anchor
:::''controller'' of ''Controller''
:::''offset'' of ''long''
::::function describing a match
::::offset relative the anchor
:::Return new instance.
:::Return itself or null if not succeeded.
</code>


AccessiblePos .''move''(DOMPoint)
::Move the accessible position in the content. Returns true if succeeded.
::Parameters
:::''point'' of ''DOMPoint''
::::the point the accessible position should be moved to.
:::Return itself or null if not succeeded.
====Move through the content====
Accessible position can be moved through the content by criteria.
AccessiblePos .''move'' (''Where'', ''Criteria'')
::Move the accessible position to the content complying with criteria.
::Parameters
:::''where'' of ''Where''
::::where the search should be performed
:::''criteria'' of ''Criteria''
::::function describing a match
:::Return itself if succeeded, otherwise null.
AccessiblePos .''search'' (''Where'', ''Criteria'')
::Search for content of the given criteria relative the accessible position.
::Parameters
:::''where'' of ''Where''
::::where the search should be performed
:::''criteria'' of ''Criteria''
::::function describing a match
:::Return new instance if succeeded, otherwise null.
</code>
=====Where to search=====
The search area and the way accessible elements are traversed are defined by <code>Where</code> argument. It defines whether traversal is perfromed by accessible tree hierarchy or by layout on the screen, and whether the traversal is relative of the current position or relative of the root.


<pre>
<pre>
enum Where { "forward",
enum Where {
            "backward",
  "forward",
            "cyclic forward",
  "backward",
            "cyclic backward",
  "cyclic forward",
            "tofirst",
  "cyclic backward",
            "tolast",
  "tofirst",
            "left",
  "tolast",
            "right",
 
            "up",
  "left",
            "down",
  "right",
            "above",
  "up",
            "under",
  "down",
            "closest"
  "above",
  "under",
  "closest"
};
};
</pre>
</pre>
Line 751: Line 841:
::Search backwards from the accessible position in cycle.
::Search backwards from the accessible position in cycle.


Where .''tofirst''
Where .''first''
::Search for a first match inside the root.
::Search for a first match inside the root.


Where .''tolast''
Where .''last''
::Search backwards (from last to first element) for a first match inside the root.
::Search backwards (from last to first element) for a first match inside the root.


Line 780: Line 870:




Examples:
<b>Example.</b>
 
<pre>
<pre>
function controller(elm) { }
function criteria(el) { }
var pos1 = new A11ePos(new DOMPoint(x, y), a11edoc).move("forward", controller);


var pos2 = new A11ePos(elm, "at").move("backward", controller);
var pos1 = new A11ePos(new DOMPoint(x, y), a11edoc).move("forward", criteria);


var pos3 = new A11ePos(pos).move("forward", controller);
var pos2 = new A11ePos(elm, "at").move("backward", criteria);
 
var pos3 = new A11ePos(pos).move("forward", criteria);
or
or
var pos2 = pos2.search("forward", controller);
var pos2 = pos2.search("forward", criteria);
</pre>
</pre>




=====Criteria=====


=====Matching function=====
Criteria can be either a literal describing how the position should be moved or a matching function called for every traversed accessible.


<pre>
<pre>
callback Controller = SearchTerm sequence<SearchTerm> (AccessibleElement);
typedef CriteriaLiteral or CriteriaFunc Criteria;
</pre>
</pre>




<code>
<pre>
Controller
enum CriteriaLiteral {
::A matching function used to define an algorithm of how the position is moved through the document.
::Returns
:::a search term(s)
</code>
 
 
<pre>
enum SearchTerm {
   "char",
   "char",
   "word",
   "word",
Line 817: Line 902:
   "paragraph",
   "paragraph",
   "change",
   "change",
   "bit",
   "bit"
 
  "at",
  "skipsubtree",
  "stop",
  "next"
};
};
</pre>
</pre>


<code>
<code>
SearchTerm .''char''
CriteriaLiteral .''char''
::Used to move the position one char long.
::Used to move the position one char long.
</code>


<code>
CriteriaLiteral .''word''
SearchTerm .''word''
::Used to move the position to the next word.
::Used to move the position to the next word.
</code>


<code>
CriteriaLiteral .''sentence''
SearchTerm .''sentence''
::Used to move the position to the next sentence.
::Used to move the position to the next sentence.
</code>


<code>
CriteriaLiteral .''line''
SearchTerm .''line''
::Used to move the position to beginning of next line or end of previous line.
::Used to move the position to beginning of next line or end of previous line.
</code>


<code>
CriteriaLiteral .''paragraph''
SearchTerm .''paragraph''
::Used to move the position to beginning of next/previous paragraph.
::Used to move the position to beginning of next/previous paragraph.
</code>


<code>
CriteriaLiteral .''change''
SearchTerm .''change''
::Used to move the position to next change either of text attribute or new accessible.
::Used to move the position to next change either of text attribute or new accessible.
</code>


<code>
CriteriaLiteral .''bit''
SearchTerm .''bit''
::Used to move the position to next/previous navigable position. For example, from accessible start inside of it to right before accessible outside of it or moving from end of this line to start of next line in case of soft line break lines.
::Used to move the position to next/previous navigable position. For example, from accessible start inside of it to right before accessible outside of it or moving from end of this line to start of next line in case of soft line break lines.
</code>
</code>




<code>
<b>Example #1. Traverse a paragraph by words.</b>
SearchTerm .''at''
::Used to set the position at the element. Search is stopped.
 
SearchTerm .''stop''
::Search is discontinued after other search terms are processed.
 
SearchTerm .''skipsubtree''
::Subtree of traversed element is ignored for next step.
 
SearchTerm .''next''
::Used to continue the search if other search terms weren't succeed. Default option.
</code>
 
 
<b>Examples.</b>


<pre>
<pre>
var pos1 = new A11ePos(document.getElementById("a").a11ement);
var p = document.getElementById("p").a11ement;
var pos2 = pos1.search("forward", () = > { return [ "word", "stop" ];});
var pos1 = new A11ePos(p, "begin", p), pos2 = null;
var pos3 = pos1.search("forward", () => { return "word"; });
while (pos2 = pos1.search("forward", "word")) {
  console.log(pos2.text(pos1));
  pos1 = pos2;
}
</pre>
</pre>


<pre>
<pre>
<p>Click <a id="a">here</a>, fellow</p>
<p id="p">Mozilla is a <a href="">free-software</a> community which
produces the <a href="">Firefox web browser</a>.</p>
</pre>
</pre>
pos2 and pos3 points after "here" word in the link.
 
The script above generates the log "Mozilla ", "is ", "a ", "free-", "software ", "community", "which ", "produces ", "the ", "Firefox ", "web ", "browser."


<pre>
<pre>
<p>Click <a id="a"><img src=""></a>, fellow</p>
<p id="p">Mo<a href="">zilla</a>.</p>
</pre>
</pre>
pos2 equals to pos1, pos3 points after "fellow" word in the link.
 
The log is "Mozilla".
 
 
<pre>
callback CriteriaFunc = CriteriaLiteral or Offset or "next" (AccessibleElement);
</pre>
 
<code>
CriteriaFunc
::A criteria function used to define an algorithm of the match.
::Returns
:::a criteria term or offset(s)
</code>
 
If "next" is returned then criteria function is reentered with next traversed accessible. If offset is given then traversing is stopped, the accessible position is moved to the traversed accessible element and given offset. If criteria literal is returned then the accessible position is moved to the position complying the criteria. If it cannot be moved withing current accessible then it reenters with next accessible.




<b> Example. Navigate by widgets and structures, and by words in case of text.</b>
<b> Example. Navigate by widgets and structures, and by words in case of text.</b>
<pre>
<pre>
function controller(aEl)
function criteria(aEl)
{
{
   var role = document.taxonOf("role", aEl.role);
   var role = document.taxonOf("role", aEl.role);
   if (role.is("widget")
   if (role.is("widget")
     return [ "at", "skipsubtree" ];
     return "at";


   if (role.is("structure")
   if (role.is("structure")
     return "at";
     return "at";


   // Reenters with next accessible if it cannot move to the next word within this accessible.
   // Reenters with next accessible if it cannot move to the next line within this accessible.
   if (role.is("textcontainer"))
   if (role.is("textcontainer"))
     return "word";
     return "line";


   return "next";
   return "next";
}
}


pos.move("next", finder);
pos.move("next", criteria);
</pre>
</pre>


====Other methods====
====Other methods====
Line 983: Line 1,057:
<pre>
<pre>
partial interface AccessiblePos {
partial interface AccessiblePos {
   DOMString textInBetween(AccessiblePos pos);
   DOMString text(AccessiblePos pos);
  DOMString text(CriteriaLiteral criteria);
   readonly attribute AttributeSet textAttributes;
   readonly attribute AttributeSet textAttributes;
};
};
Line 989: Line 1,064:


<code>
<code>
AccessibleDocument .''textInBetween''
AccessibleDocument .''text(AccessiblePos)''
::Returns the text enclosed between this and given accessible positions.
::Returns the text enclosed between this and given accessible positions.
AccessibleDocument .''text(CriteriaLiteral)''
::Returns the text at the position complying the given criteria. See [[#Criteria|criteria]] for options.
</code>
</code>


Example how to get first line of the first encountered paragraph:
Example how to get first line of the first encountered paragraph:


<pre>
<pre>
var startPos = new A11ePos().move("first", a => a.role == "paragraph");
function criteria(a)
var endPos = startPos && startPos.search("forward", a => [ "line", "stop" ]);
  { return a.role == "paragraph" ? "being" : "next" };
var text = startPos.textInBeetween(startPos, endPos);
var startPos = new A11ePos(document).move("first", criteria);
var endPos = startPos && startPos.search("forward", "line");
var text = startPos.text(startPos, endPos);
</pre>
 
or same effect by using criteria literal


say(text);
<pre>
function criteria(a)
  { return a.role == "paragraph" ? "being" : "next" };
var pos = new A11ePos(document).move("first", criteria);
var text = pos.text("line");
</pre>
</pre>


===Text attributes===
===Text attributes===
Line 1,053: Line 1,140:
AccessibleDocument .''selectionStart''
AccessibleDocument .''selectionStart''
::Get/set selection start.
::Get/set selection start.


AccessibleDocument .''selectionEnd''
AccessibleDocument .''selectionEnd''
Line 1,060: Line 1,146:




<b>Example</b>
<b>Example.</b>


<pre>
<pre>
Line 1,420: Line 1,506:
control.relations.add("labelledby", label.a11yment);
control.relations.add("labelledby", label.a11yment);
</pre>
</pre>
[to do actions/interactions and patterns]




Line 1,876: Line 1,959:
===Implied semantics===
===Implied semantics===


The author has to be less verbose as possible. If a role usually implies number of sets or attributes then they are supposed to set so the authur doesn't need to list them. For example if <code>listitem</code> is selectable then you don't have to point <code>selectable</code> state on it, in other words, these code snippets are equivalent:
The idea is to help the author to keep the code less verbose as possible. If role implies a number of preset attributes or states then they are present on the accessible element by default, i.e. if the author didn't list them. For example, if <code>listitem</code> role is selectable and focusable by default then the author doesn't have to point <code>selectable</code> and <code>focusable</code> states when he describes a listitem source, in other words, these code snippets are equivalent:


<pre>
<pre>
var source = {
var source1 = {
   role: "listitem"
   role: "listitem"
};
};
</pre>


<pre>
var source2 = {
var source = {
   role: "listitem",
   role: "listitem",
   states: [ "selectable" ]
   states: [ "selectable", "focusable" ]
};
};
</pre>
</pre>


The implied semantics is described by [[#SemanticsProviders|semantics provides]].
Implied semantics is described by [[#SemanticsProviders|taxonomies]].
 


===Conflicts===
===Conflicts===


[to be done conflicts between native semantics, ARIA and this API]
[to be done conflicts between native semantics, ARIA and this API, I tend to think that the author should be able to replace/remove native semantics if needed. This can ruin the web page but it gives the absolute control over the page content. A dangerous but quite powerful tool like atomic energy. ]
 


===Sniffing===
===Sniffing===


In order to make optimization the content provider has to know whether accessibility consumer is active. The provider can add a callback for <code>deploy</code> and <code>conceal</code> event types which will be triggered when consumer appears/gets inactive.  
In order to make an optimization, the content provider has to know whether an accessibility consumer (like screen reader) is active. The provider can add a callback for <code>deploy</code> and <code>conceal</code> event types which will be triggered when consumer appears/gets inactive.  


<pre>
<pre>
Line 2,143: Line 2,226:
   sequence<DOMString> states;
   sequence<DOMString> states;
   Object attributes;
   Object attributes;
  sequence<DOMString> relations;
  sequence<DOMString> actions;
};
};
</pre>
</pre>
Line 2,165: Line 2,250:
RoleTaxon .''attributes''
RoleTaxon .''attributes''
::List of attributes supported by the role. Default value of the attribute may be specified as modifier. For example, "live:polite" points out that "live" object attribute has "polite" value by default. If default value is not specified then it's taken from referred attribute taxon description.
::List of attributes supported by the role. Default value of the attribute may be specified as modifier. For example, "live:polite" points out that "live" object attribute has "polite" value by default. If default value is not specified then it's taken from referred attribute taxon description.
RoleTaxon .''relations''
::List of relations supported by the role.
RoleTaxon ..''actions''
::List of supported actions. Actions from the list are exposed on the accessible element depending on states present on it. For example, if supported actions are "check" and "uncheck", then "check" is exposed if the accessible element doesn't have "checked" state, otherwise "unchecked".
</code>
</code>




<b>Example. ARIA <code>textbox</code> role</b>
<b>Example. ARIA <code>textbox</code> role.</b>


<pre>
<pre>
Line 2,189: Line 2,280:
};
};
</pre>
</pre>
<b>Example. ARIA <code>checkbox</code> role.</b>
<pre>
var taxa = {
  checkbox: {
    description: "checkbox",
    parents: [ "input" ],
    states: [ "checkable:default, "checked" ],
    actions: [ "check", "uncheck" ]
  }
};
</pre>


<b>Example. ARIA <code>log</code> role.</b>
<b>Example. ARIA <code>log</code> role.</b>
Line 2,202: Line 2,308:
};
};
</pre>
</pre>


====States====
====States====
Line 2,210: Line 2,315:
   DOMString description;
   DOMString description;
   sequence<DOMString> dependents;
   sequence<DOMString> dependents;
   DOMString opposite;
   DOMString exclusives;
}
}
</pre>
</pre>
Line 2,222: Line 2,327:
::List of all dependent states. For example, "focused" state always accompanied by "focusable" state.
::List of all dependent states. For example, "focused" state always accompanied by "focusable" state.


StateTaxon ..''opposite''
StateTaxon ..''exclusives''
::An opposite state if any. Opposite state are mutually exclusive. For example, if "vertical" state is applied then "horizontal" is not and vice versa.
::Mutually exclusive states if applicable. For example, if "vertical" state is applied then "horizontal" is not and vice versa.
</code>
</code>


Line 2,235: Line 2,340:
   },
   },
   focused: { },
   focused: { },
   singleline: {
   singleline: {
     opposite: "multiline"
     exlcusives: [ "multiline" ]
   },
   },
   multiline: {
   multiline: {
     opposite: "singleline"
     exlcusives: [ "singleline" ]
   },
   },
   readonly: { },
   readonly: { },
   editable: { },
   editable: { },
   required: { }
   required: { },
 
  checked: {
    exlusives: [ "mixed" ]
  },
  mixed: {
    exlusives: [ "checked" ]
  }
};
};
</pre>
</pre>


====Attributes====
====Attributes====
Line 2,286: Line 2,399:
</pre>
</pre>


=HTML and beyond=


This doc introduces common patterns to express the semantics of markup languages to accessibility. Markup specifics is not a target for this doc in general. Each markup specification has to take care to describe their accessibility stuff in terms of this API.
====Actions====


=Extensibility=
<pre>
dictionary ActionTaxon {
  DOMString description;
  DOMString dual;
  sequence<DOMString> states;
};
</pre>


The web application might need to extend default taxonomies to express the new semantics. For example, the web service publishing music sheets can introduce new characteristics like role, states, etc to describe music sheet content. However the web application should take care to explain new characteristic by extending default taxonomies, i.e. by describing the connection between old and new characteristics. That will resolve any backward compatibility issue, so if the consumer doesn't know about new roles then he can still figure out a closest match it's aware about. For example, if the web app author introduces "x-redbutton' and provides a role taxonomy for it saying this is an extension of 'button' role, then the consumer unfamiliar with 'x-redbutton' role will treat it as a button.
<code>
ActionTaxon .''description''
::Localized action description.


The author should follow name convention to avoid potential collisions with future additions into the spec predefined lists. Thus all names should be prefixed by 'x-' like 'x-redbutton' from example above.
ActionTaxon .''dual''
::Dual action taxon. When action is invoked, it is switched to its dual action if applicable.
 
ActionTaxon .''states''
::Implied states. When action is invoked, states of dual action are cleared, this action states are set.
</code>
 
 
<b>Example.</b>
 
<pre>
var taxa = {
  check: {
    description: "check",
    dual: "uncheck",
    states: [ "checked" ]
  },
  uncheck: {
    description: "uncheck",
    dual: "check"
  }
};
</pre>
 
=HTML and beyond=
 
This doc introduces common patterns to express the semantics of markup languages to accessibility. Markup specifics is not a target for this doc in general. Each markup specification has to take care to describe their accessibility stuff in terms of this API.
 
=Extensibility=
 
The web application might need to extend default taxonomies to express the new semantics. For example, the web service publishing music sheets can introduce new characteristics like role, states, etc to describe music sheet content. However the web application should take care to explain new characteristic by extending default taxonomies, i.e. by describing the connection between old and new characteristics. That will resolve any backward compatibility issue, so if the consumer doesn't know about new roles then he can still figure out a closest match it's aware about. For example, if the web app author introduces "x-redbutton' and provides a role taxonomy for it saying this is an extension of 'button' role, then the consumer unfamiliar with 'x-redbutton' role will treat it as a button.
 
The author should follow name convention to avoid potential collisions with future additions into the spec predefined lists. Thus all names should be prefixed by 'x-' like 'x-redbutton' from example above.


==Music sheet example==
==Music sheet example==
Line 2,326: Line 2,478:
   crescendo: [note, ...] a list a notes the crescendo is applied to
   crescendo: [note, ...] a list a notes the crescendo is applied to
   diminuendo: [note, ...] a list a notes the diminuendo is applied to
   diminuendo: [note, ...] a list a notes the diminuendo is applied to
</pre>
Or in terms of taxonomies:
<pre>
document.import("role", {
  sheet: {
    description: "sheet",
    attributes: [ "instrument", "tempo", "clef" ]
  },
  note: {
    description: "note",
    attributes: [ "key", "alteration", "octave", "duration", "effects" ],
    relations: [ "crescendo", "diminuendo" ]
  }
});
document.import("attributes", {
  instrument: {
    description: "instrument type"
  },
  tempo: {
    description: "tempo"
  },
  clef: {
    description: "clef"
  },
  key: {
    description: "key",
    values: [ "C", "D", "E", "F", "G", "A", "H" ],
  },
  alteration: {
    description: "alteration",
    values: [ "none", "flat", "sharp" ],
    default: "none"
  },
  octave: {
    description: "octave",
    values: [ "contra", "great", "small", "1line", "2line" ],
  },
  duration: {
    description: "duration"
  },
  effects: {
    description: "effects"
  }
});
document.import("relations", {
  crescendo: {
    description: "crescendo"
  },
  diminuendo: {
    description: "diminuendo"
  }
});
</pre>
</pre>
Surkov.alexander
Confirmed users
1,396

edits

Retrieved from "https://wiki.allizom.org/Special:MobileDiff/1072609...1073446"