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>
:
1echo $FA->get_svg('fas fa-file', [2 'title' => 'File',3]);
The above outputs something like:
1<svg>2 <title>File</title>3</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:
1echo $FA->get_svg('fas fa-file', [2 'title' => 'File',3 'title_id' => 'file-id',4]);
1<svg aria-labelledby="file-id">2 <title id="file-id">File</title>3</svg>
aria-*
attributes
You can now add any aria-*
attribute to the SVG tag:
1echo $FA->get_svg('fas fa-file', [2 'aria-label' => 'File',3]);
1<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:
1echo $FA->get_svg('fas fa-file');
1<svg aria-hidden="true"></svg>