Pipit Font Awesome v1.1: improved accessibility

I’ve updated the Pipit Font Awesome app to use the new version of FontAwesomeSVG-PHP which brings better accessibility features.

Automatic aria-labelledby

The previous version had an option for specifing a <title> inside the svg tag:

pipit_fa_icon('fas fa-file', [
    'title' => 'File',
]);
<perch:fa id="file" icon="fas fa-file" title="File" html>
<svg>
    <title>File</title>
</svg>

You can now also specify an id for the <title> and the aria-labelledby attribute will be automatically added for you:

pipit_fa_icon('fas fa-file', [
    'title' => 'File',
    'title_id' => 'file-id',
]);
<perch:fa id="file" icon="fas fa-file" title="File" title-id="file-id" html>
<svg aria-labelledby="file-id">
    <title id="file-id">File</title>
</svg>

aria-* attributes

You can now add any aria-* attribute to the SVG tag:

pipit_fa_icon('fas fa-file', [
    'aria-label' => 'File'
]);
<perch:fa id="file" icon="fas fa-file" aria-label="File" html>
<svg aria-label="File"></svg>

Automatic aria-hidden

Decorative icons should be hidden from screen readers. So aria-hidden="true" is added to the SVG tag by default unless <title> or aria-label is set:

pipit_fa_icon('fas fa-file');
<perch:fa id="file" icon="fas fa-file" html>
<svg aria-hidden="true"></svg>
link