-
▼.sraCSS
-
The ".sraCSS" property contains the inline styling values that render screen reader accessible hidden text.
-
screen reader accessible hidden text is visible to screen reader users while remaining invisible to sighted users, which has no affect on visual layout.
Values: {
position: "absolute", clip:" rect(1px 1px 1px 1px)", padding: 0, border: 0, height: "1px", width:"1px", overflow: "hidden", zIndex: -1000
}
Syntax
// From within an AccDC Object
$A([
{
runAfter: function(dc){
// Get the element
var el = $A.getEl('objId');
// Then make it invisible to sighted users, but keep it visible for screen reader users
$A.css(el, dc.sraCSS);
},
...
}
]);
// Or using the global $A namespace instead
$A.css(el, $A.sraCSS);
-
▼.sraCSSClear()
-
The ".sraCSSClear()" method clears all CSS styles previously set using sraCSS.
-
Values cleared: [
position, clip, padding, height, width, overflow, zIndex
]
Syntax
// From within an AccDC Object
$A([
{
runAfter: function(dc){
// Get the element
var el = $A.getEl('objId');
dc.sraCSSClear(el);
},
...
}
]);
// Or using the global $A namespace instead
$A.sraCSSClear(el);
-
▼.role
-
The "role" property sets the beginning and ending screen reader accessible hidden boundary text for an AccDC Object.
-
The "role" property is rendered using screen reader accessible hidden text via "sraCSS", which is invisible to sighted users and has no affect on visual layout.
Syntax
$A([
{
role: 'Menu',
...
}
]);
// Or
$A.reg.myObj.role = 'Settings Tab';
Important
-
The "role" property should contain a short concise (one to three word) summary of the AccDC Object's purpose.
-
The automatic rendering of the "role" property for screen reader users can be enabled/disabled using the "showHiddenBounds" property.
-
When the "showHiddenBounds" property is set to True, the "role" property value is prepended to the "accStart" and "accEnd" property values.
-
▼.accStart
-
The "accStart" property sets the beginning screen reader accessible hidden text for an AccDC Object.
-
The "accStart" property value is appended to the "role" property value at runtime;
The "accStart" property is rendered using screen reader accessible hidden text via "sraCSS", which is invisible to sighted users and has no affect on visual layout.
Default: "Start"
Syntax
$A([
{
accStart: 'Begin',
...
}
]);
// Or
$A.reg.myObj.accStart = 'Start';
Important
-
The automatic rendering of the "accStart" property value for screen reader users can be enabled/disabled using the "showHiddenBounds" property.
-
When the "showHiddenBounds" property is set to True, the "accStart" property value is appended to the "role" property value.
-
▼.accEnd
-
The "accEnd" property sets the ending screen reader accessible hidden text for an AccDC Object.
-
The "accEnd" property value is appended to the "role" property value at runtime;
The "accEnd" property is rendered using screen reader accessible hidden text via "sraCSS", which is invisible to sighted users and has no affect on visual layout.
Default: "End"
Syntax
$A([
{
accEnd: 'End',
...
}
]);
// Or
$A.reg.myObj.accEnd = 'End';
Important
-
The automatic rendering of the "accEnd" property value for screen reader users can be enabled/disabled using the "showHiddenBounds" property.
-
When the "showHiddenBounds" property is set to True, the "accEnd" property value is appended to the "role" property value.
-
▼.ariaLevel
-
The "ariaLevel" property sets the heading level of an AccDC Object for screen reader users.
-
Values: 1 through 6 (default=2)
Syntax
$A([
{
ariaLevel: 3,
...
}
]);
// Or
$A.reg.myObj.ariaLevel = 4;
-
▼.showHiddenBounds
-
The "showHiddenBounds" property enables/disables the rendering of screen reader accessible hidden boundary text for screen reader users.
-
Default: True
Syntax
$A([
{
showHiddenBounds: false,
...
}
]);
// Or
$A.reg.myObj.showHiddenBounds = false;
-
▼.accClose
-
The "accClose" property sets the Text for the screen reader accessible hidden close link at the end of an AccDC Object.
-
The "accClose" property is rendered using screen reader accessible hidden text via "sraCSS", which is invisible to sighted users and has no affect on visual layout.
Default: "Close"
Syntax
$A([
{
accClose: 'Exit',
...
}
]);
// Or
$A.reg.myObj.accClose = 'Dismiss';
Important
-
The automatic rendering of the "accClose" property value for screen reader users can be enabled/disabled using the "showHiddenClose" property.
-
When the "showHiddenClose" property is set to True, the "accClose" property value is prepended to the "role" property value.
-
The "dc.fn.closeLink" property can be used to access the DOM node for the screen reader accessible hidden close link at runtime.
-
▼.showHiddenClose
-
The "showHiddenClose" property enables/disables rendering of the screen reader accessible hidden close link at the end of an AccDC Object.
-
Default: True
Syntax
$A([
{
showHiddenClose: false,
...
}
]);
// Or
$A.reg.myObj.showHiddenClose = true;
-
▼.displayHiddenClose
-
The "displayHiddenClose" property controls whether the screen reader accessible hidden close link will appear in the tab order for keyboard users.
-
Default: True
When set to True, the hidden Close link will become visible when it receives keyboard focus.
(This is a U.S. Section-508 requirement)
When set to False, the hidden Close link will not appear in the tab order, though it will still be rendered for screen reader users.
Syntax
$A([
{
displayHiddenClose: false,
...
}
]);
// Or
$A.reg.myObj.displayHiddenClose = true;
Required:
-
The "showHiddenClose" property must be set to True.
-
▼.tabRole
-
The "tabRole" property sets the screen reader accessible hidden role text for an AccDC Tab Control, which is added to the triggering element.
-
The "tabRole" property is rendered using screen reader accessible hidden text via "sraCSS", which is invisible to sighted users and has no affect on visual layout.
Default: "Tab"
Syntax
$A([
{
tabRole: 'Map',
...
}
]);
// Or
$A.reg.myObj.tabRole = 'Wizard Step 1';
Important
-
The "tabRole" property should contain a short concise (one to three word) summary of the AccDC Object's intended functionality.
-
The "tabRole" property value is appended to the text within the triggering element, and is rendered before the "tabState" property value for screen reader users.
Required:
-
The "isTab" property must be set to True;
-
▼.tabState
-
The "tabState" property sets the screen reader accessible hidden state text for an AccDC Tab Control, which is added to the triggering element.
-
The "tabState" property is rendered using screen reader accessible hidden text via "sraCSS", which is invisible to sighted users and has no affect on visual layout.
Default: "Selected"
Syntax
$A([
{
tabState: 'Open',
...
}
]);
// Or
$A.reg.myObj.tabState = 'Expanded';
Important
-
The "tabState" property should contain a short concise (one word) summary of the AccDC Object's Active State.
-
The "tabState" property value is appended to the text within the triggering element, and is rendered after the "tabRole" property value for screen reader users.
Required:
-
The "isTab" property must be set to True.
-
▼.toggleRole
-
The "toggleRole" property sets the screen reader accessible hidden role text for an AccDC Toggle Control, which is added to the triggering element.
-
The "toggleRole" property is rendered using screen reader accessible hidden text via "sraCSS", which is invisible to sighted users and has no affect on visual layout.
Default: ""
Syntax
$A([
{
toggleRole: 'Menu',
...
}
]);
// Or
$A.reg.myObj.toggleRole = 'Checkbox';
Important
-
The "toggleRole" property should contain a short concise (one to three word) summary of the AccDC Object's intended functionality.
-
The "toggleRole" property value is appended to the text within the triggering element, and is rendered before the "toggleState" property value for screen reader users.
Required:
-
The "isToggle" property must be set to True.
-
▼.toggleState
-
The "toggleState" property sets the screen reader accessible hidden state text for an AccDC Toggle Control, which is added to the triggering element.
-
The "toggleState" property is rendered using screen reader accessible hidden text via "sraCSS", which is invisible to sighted users and has no affect on visual layout.
Default: ""
Syntax
$A([
{
toggleState: 'Open',
...
}
]);
// Or
$A.reg.myObj.toggleState = 'Checked';
Important
-
The "toggleState" property should contain a short concise (one word) summary of the AccDC Object's active state.
-
The "toggleState" property value is appended to the text within the triggering element, and is rendered after the "toggleRole" property value for screen reader users.
Required:
-
The "isToggle" property must be set to True.
-
▼.forceFocus
-
The "forceFocus" property determines if focus is automatically moved to the beginning of an AccDC Object when opened.
-
Default: False
Syntax
$A([
{
forceFocus: true,
...
}
]);
// Or
$A.reg.myObj.forceFocus = false;
-
▼.returnFocus
-
The "returnFocus" property determines if focus is automatically returned to the triggering element when an AccDC Object is closed.
-
Default: True
Syntax
$A([
{
returnFocus: false,
...
}
]);
// Or
$A.reg.myObj.returnFocus = true;
-
▼.announce
-
The ".announce" property specifies that the textual content of an AccDC Object will automatically be announced to screen reader users when opened.
-
Syntax
$A([
{
announce: true,
...
}
]);
-
▼.announce()
-
The "$A.announce()" method announces the text of any string or DOM node to screen reader users.
-
"$A.announce()" is also prototyped to the String object.
Syntax
$A([
{
runAfter: function(dc){
// Announce the content of a DOM node
$A.announce(dc.containerDiv);
},
...
}
]);
// Or
// Announce a string, and return the string literal
var str = "Hello World".announce();
// Or
// Announce the content of a DOM node, and suppress the announcement of repetitive strings
$A.announce(document.getElementById('lastChatMsg'), true);
// Or
// Temporarily override the suppression of repetitive strings
String.announce.lastMsg = '';
// Now announce the content of a string
$A.announce(lastIncomingMsg, true);
-
▼String.announce.baseDelay
-
The "String.announce.baseDelay" property determines the initial delay in milliseconds when the "$A.announce()" method queues messages to be announced sequentially.
-
Default: 2000
Syntax
String.announce.baseDelay = 1500;
-
▼String.announce.charMultiplier
-
The "String.announce.charMultiplier" property determines the delay in milliseconds when a message using "$A.announce()" contains two or more words including punctuation.
-
Default: 160
Syntax
String.announce.charMultiplier = 150;
-
▼String.announce.clear()
-
The "String.announce.clear()" method clears the message stack of all queued message strings waiting to be announced.
-
Syntax
String.announce.clear();