fluid.updateAriaLabel
fluid.updateAriaLabel(element, text, options)
Update the ARAI label of an element.
fluid.updateAriaLabel(element, text, options);
File name: FluidView.js
Parameters
element |
(CSS-based selector, single-element jQuery object, or DOM elemen) Identifies the element to described. |
text |
(String) The text description. |
options |
(Object) Optional: An object containing properties to customize the functioning of the ARIA labeller. |
Return Value
Object | The ARIA labeller object. |
Options
Name |
Description |
Default |
---|---|---|
|
A boolean indicating whether or not a live region should be created an associated with the element. |
|
|
The mark-up to use in the creation of the live region (only used if |
|
|
The ID to assign to the live region (only used if |
"fluid-ariaLabeller-liveRegion" |
|
The text to place in the live region (only used if |
none |
See Also
Examples
The following function (taken from the Infusion Uploader component) uses fluid.updateAriaLabel()
to add the file name and size information to items in the list of files in the Uploader queue.
var renderRowFromTemplate = function (that, file) { var row = that.rowTemplate.clone(), fileName = file.name, fileSize = fluid.uploader.formatFileSize(file.size); row.removeClass(that.options.styles.hiddenTemplate); that.locate("fileName", row).text(fileName); that.locate("fileSize", row).text(fileSize); that.locate("fileIconBtn", row).addClass(that.options.styles.remove); row.prop("id", file.id); row.addClass(that.options.styles.ready); bindRowHandlers(that, row); fluid.updateAriaLabel(row, fileName + " " + fileSize); return row; };
The example below is taken from the Infusion Reorderer component. This event listener uses fluid.updateAriaLabel
to label the reordered items with information about their positioning in the list. The second call to fluid.updateAriaLabel
creates a live region that specifies where the moved item was moved from.
listeners: { onRefresh: function () { var selectables = that.dom.locate("selectables"); fluid.each(selectables, function (selectable) { var labelOptions = {}; var id = fluid.allocateSimpleId(selectable); var moved = movedMap[id]; var label = that.renderLabel(selectable); var plainLabel = label; if (moved) { moved.newRender = plainLabel; label = that.renderLabel(selectable, moved.oldRender.position); $(selectable).one("focusout", function () { if (movedMap[id]) { var oldLabel = movedMap[id].newRender.label; delete movedMap[id]; fluid.updateAriaLabel(selectable, oldLabel); } }); labelOptions.dynamicLabel = true; } fluid.updateAriaLabel(selectable, label.label, labelOptions); }); } }