December 30, 2019

FontAwesomeSVG-PHP v1.1: improved accessibility

I've updated FontAwesomeSVG-PHP with improved accessibility features.

If you are not familiar with FontAwesomeSVG-PHP, it is a PHP class that inlines Font Awesome's SVG icons without Javascript. It renders the icons on the server side instead of outputting something like <i class="fas fa-file"></i> and have Javascript replace that with the actualy SVG icon on the client side.

What's new?

Automatic aria-labelledby

With the previous version you could add a <title>:

echo $FA->get_svg('fas fa-file', [
    'title' => 'File',
]);

The above outputs something like:

<svg>
    <title>File</title>
</svg>

With the new version you can also add an id to the <title>. If you do, aria-labelledby will be automatically set for you:

echo $FA->get_svg('fas fa-file', [
    'title' => 'File',
    'title_id' => 'file-id',
]);
<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:

echo $FA->get_svg('fas fa-file', [
    'aria-label' => 'File',
]);
<svg aria-label="File"></svg>

aria-hidden attribute

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

echo $FA->get_svg('fas fa-file');
<svg aria-hidden="true"></svg>