The effect of attribute data-auto-a11y in Font Awesome 5

Question

If we want to use SVG+JS of rendering Font Awesome 5 icon, then switch the css/all.css into js/all.js.

Using a <script> tag in the browser:

<script 
  src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" 
  data-auto-a11y="true">
</script>

My question is what is the effect of data-auto-a11y in Font Awesome 5?

Is it necessary to use it?

Answer 1

Diving into the Font Awesome code on GitHub, in particular at /js/fontawesome.js first of all the data-auto-a11y attribute is mapped to a property autoA11y. Searching for that through the code it looks like this property governs if various aria- attributes are set, specifically if autoA11y is true and there is a title attribute then aria-labelledby is set, otherwise aria-hidden is set.

So, if you care about accessibility (and I think everybody should) then it does matter. However, I would also add that, on other lines of the code, it seems to indicate that this being set to true is the default. I would suggest you probably don't need it, however it would certainly in that case be harmless.

Caveat: I know nothing a priori about the internal workings of Font Awesome, this is just based on an analysis of the code.

Font Awesome code snippets

Default settings (line 257)

  var _default = {
    familyPrefix: DEFAULT_FAMILY_PREFIX,
    replacementClass: DEFAULT_REPLACEMENT_CLASS,
    autoReplaceSvg: true,
    autoAddCss: true,
    autoA11y: true,
    searchPseudoElements: false,
    observeMutations: true,
    mutateApproach: 'async',
    keepOriginalSource: true,
    measurePerformance: false,
    showMissingIcons: true
  };

Uses of autoA11y. (Line 1605)

  function attributesParser (node) {
    var extraAttributes = toArray(node.attributes).reduce(function (acc, attr) {
      if (acc.name !== 'class' && acc.name !== 'style') {
        acc[attr.name] = attr.value;
      }

      return acc;
    }, {});
    var title = node.getAttribute('title');

    if (config.autoA11y) {
      if (title) {
        extraAttributes['aria-labelledby'] = "".concat(config.replacementClass, "-title-").concat(nextUniqueId());
      } else {
        extraAttributes['aria-hidden'] = 'true';
        extraAttributes['focusable'] = 'false';
      }
    }

    return extraAttributes;
  }

and line 1874

    if (config.autoA11y && !title) {
      extra.attributes['aria-hidden'] = 'true';
    }

and finally line 2291

      if (config.autoA11y) {
        if (title) {
          attributes['aria-labelledby'] = "".concat(config.replacementClass, "-title-").concat(nextUniqueId());
        } else {
          attributes['aria-hidden'] = 'true';
          attributes['focusable'] = 'false';
        }
      }