Merge pull request #324 from joomla/chmst-patch-2

Update icons.md
joomla · Nov 14, 2024 · a29bc61 · a29bc61
2 parents a5ab3c0 + 4d5ae99
commit a29bc61
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/docs/general-concepts/icons.md b/docs/general-concepts/icons.md
@@ -17,14 +17,15 @@ To display such an icon you can use:
 
 ```php
 ?>
-<span class="icon-cancel"></span> <?php echo Text::_('JCANCEL') ?> 
+<span class="icon-cancel" aria-hidden="true"></span> <?php echo Text::_('JCANCEL') ?> 
 ```
+The attribute aria-hidden="true" hides the icon from screen readers and improves accessibility. 
 
 You can also display FontAwesome icons which aren't used in Joomla, but you have to include an additional CSS class.
 According to [fa style names](https://docs.fontawesome.com/web/setup/upgrade/whats-changed#full-style-names) the CSS classes should be "fa-solid" or "fa-brands":
 
 ```php
 ?>
-<span class="fa-solid fa-bomb"></span> <?php echo Text::_('JSAVE') ?> 
-<span class="fa-brands fa-facebook"></span> <?php echo 'facebook' ?> 
+<span class="fa-solid fa-bomb" aria-hidden="true"></span> <?php echo Text::_('JSAVE') ?> 
+<span class="fa-brands fa-facebook" aria-hidden="true"></span> <?php echo 'facebook' ?> 
 ```
diff --git a/versioned_docs/version-4.4/general-concepts/icons.md b/versioned_docs/version-4.4/general-concepts/icons.md
@@ -17,13 +17,16 @@ To display such an icon you can use:
 
 ```php
 ?>
-<span class="icon-cancel"></span> <?php echo Text::_('JCANCEL') ?> 
+<span class="icon-cancel" aria-hidden="true"></span> <?php echo Text::_('JCANCEL') ?> 
 ```
+The attribute aria-hidden="true" hides the icon from screen readers and improves accessibility. 
 
-You can also display FontAwesome icons which aren't used in Joomla, but you have to include the "fa" class:
+You can also display FontAwesome icons which aren't used in Joomla, but you have to include an additional CSS class.
+According to [fa style names](https://docs.fontawesome.com/web/setup/upgrade/whats-changed#full-style-names) the CSS classes should be "fa-solid" or "fa-brands":
 
 ```php
 ?>
-<span class="fa fa-bomb"></span> <?php echo Text::_('JSAVE') ?> 
+<span class="fa-solid fa-bomb" aria-hidden="true"></span> <?php echo Text::_('JSAVE') ?> 
+<span class="fa-brands fa-facebook" aria-hidden="true"></span> <?php echo 'facebook' ?> 
 ```
 
diff --git a/versioned_docs/version-5.2/general-concepts/icons.md b/versioned_docs/version-5.2/general-concepts/icons.md
@@ -17,14 +17,15 @@ To display such an icon you can use:
 
 ```php
 ?>
-<span class="icon-cancel"></span> <?php echo Text::_('JCANCEL') ?> 
+<span class="icon-cancel" aria-hidden="true"></span> <?php echo Text::_('JCANCEL') ?> 
 ```
+The attribute aria-hidden="true" hides the icon from screen readers and improves accessibility. 
 
 You can also display FontAwesome icons which aren't used in Joomla, but you have to include an additional CSS class.
 According to [fa style names](https://docs.fontawesome.com/web/setup/upgrade/whats-changed#full-style-names) the CSS classes should be "fa-solid" or "fa-brands":
 
 ```php
 ?>
-<span class="fa-solid fa-bomb"></span> <?php echo Text::_('JSAVE') ?> 
-<span class="fa-brands fa-facebook"></span> <?php echo 'facebook' ?> 
+<span class="fa-solid fa-bomb" aria-hidden="true"></span> <?php echo Text::_('JSAVE') ?> 
+<span class="fa-brands fa-facebook" aria-hidden="true"></span> <?php echo 'facebook' ?> 
 ```