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>


This content originally appeared on Hussein Al Hammad and was authored by Hussein Al Hammad

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>


This content originally appeared on Hussein Al Hammad and was authored by Hussein Al Hammad


Print Share Comment Cite Upload Translate Updates
APA

Hussein Al Hammad | Sciencx (2019-12-30T00:00:00+00:00) FontAwesomeSVG-PHP v1.1: improved accessibility. Retrieved from https://www.scien.cx/2019/12/30/fontawesomesvg-php-v1-1-improved-accessibility-2/

MLA
" » FontAwesomeSVG-PHP v1.1: improved accessibility." Hussein Al Hammad | Sciencx - Monday December 30, 2019, https://www.scien.cx/2019/12/30/fontawesomesvg-php-v1-1-improved-accessibility-2/
HARVARD
Hussein Al Hammad | Sciencx Monday December 30, 2019 » FontAwesomeSVG-PHP v1.1: improved accessibility., viewed ,<https://www.scien.cx/2019/12/30/fontawesomesvg-php-v1-1-improved-accessibility-2/>
VANCOUVER
Hussein Al Hammad | Sciencx - » FontAwesomeSVG-PHP v1.1: improved accessibility. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2019/12/30/fontawesomesvg-php-v1-1-improved-accessibility-2/
CHICAGO
" » FontAwesomeSVG-PHP v1.1: improved accessibility." Hussein Al Hammad | Sciencx - Accessed . https://www.scien.cx/2019/12/30/fontawesomesvg-php-v1-1-improved-accessibility-2/
IEEE
" » FontAwesomeSVG-PHP v1.1: improved accessibility." Hussein Al Hammad | Sciencx [Online]. Available: https://www.scien.cx/2019/12/30/fontawesomesvg-php-v1-1-improved-accessibility-2/. [Accessed: ]
rf:citation
» FontAwesomeSVG-PHP v1.1: improved accessibility | Hussein Al Hammad | Sciencx | https://www.scien.cx/2019/12/30/fontawesomesvg-php-v1-1-improved-accessibility-2/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts