Child pages
  • fluid.updateAriaLabel

Documentation for a historical release of Infusion: 1.4
Please view the Infusion Documentation site for the latest documentation, or the Infusion 1.3. Documentation for the previous release.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

fluid.updateAriaLabel(element, text, options)

Update the ARAI label of an element.

fluid.updateAriaLabel(element, text, options);

File name: FluidView.js


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.






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 dynamicLabel is true).

"<div class=\"liveRegion fl-offScreen-hidden\" aria-live=\"polite\"></div>"


The ID to assign to the live region (only used if dynamicLabel is true).



The text to place in the live region (only used if dynamicLabel is true).


See Also


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 =,
        fileSize = fluid.uploader.formatFileSize(file.size);
    that.locate("fileName", row).text(fileName);
    that.locate("fileSize", row).text(fileSize);
    that.locate("fileIconBtn", row).addClass(that.options.styles.remove);
    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);
  • No labels