Jump to content
Latest News: (loading..)
douglaswalker

aria-hidden="true" on bootstrap button

Recommended Posts

 

Hi there 

I want to include the attribute aria-hidden="true" on the link below for the font awesome icon.

 

echo  tep_draw_button("Back In Stock", "fa fa-clock-o", tep_href_link("groups.php", "groups_id=11"),"primary", NULL, "btn-success");

 

much appreciated

Doug

Share this post


Link to post
Share on other sites

Not sure I fully understand what your after? but if all you need is the fa fa-clock icon not to be shown on that one button then just use some simple css.

<style>
.fa {
  display: none !important;
}
</style>

so this image.png.5fbe136236f4691097bae65c525e423b.png

will become this

image.png.5e70f4323a2d4091afd2e34415bbbc35.png


 

Share this post


Link to post
Share on other sites
5 hours ago, douglaswalker said:

 

Hi there 

I want to include the attribute aria-hidden="true" on the link below for the font awesome icon.

 

echo  tep_draw_button("Back In Stock", "fa fa-clock-o", tep_href_link("groups.php", "groups_id=11"),"primary", NULL, "btn-success");

 

much appreciated

Doug

https://github.com/gburton/Responsive-osCommerce/blob/master/includes/functions/html_output.php#L389

includes aria-hidden=true on all tep_draw_button calls (if it has an icon [the 2nd parameter]).

If you want only an icon (and no text)...this would be useless for (eg) screen readers, in which case you have two options;

Option 1:  don't use tep_draw_button
remembering to use class and role on the <a>

<a role="button" class="btn btn-success" href="' . tep_href_link('x', 'y') . '"><i class="fa fa-z" aria-hidden="true"></i></a>

Option 2:  use tep_draw_button
but move the icon into the text

echo  tep_draw_button('<i aria-hidden="true" class="fa fa-z"></i>', null, tep_href_link('x', 'y'),'primary', NULL, 'btn-success');

Option 2 is easier (to remember what to do) and something similar is in use at (eg);

https://github.com/gburton/Responsive-osCommerce/blob/master/shopping_cart.php#L117
with
https://github.com/gburton/Responsive-osCommerce/blob/master/includes/languages/english/shopping_cart.php#L24

In the live code, these are the two shopping cart buttons; 

btn.jpg.9aad09d4873743b8019d20df00eaa4fc.jpg

In this case, there is NO TEXT, just an icon - the icon therefore does not have aria-hidden="true" on it as this would obviously be bad for (eg) screen readers.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites
6 hours ago, douglaswalker said:

I want to include the attribute

Sorry Doug you are right in your approch. Acording to (WAI-ARIA) 1.2 https://www.w3.org/TR/wai-aria-1.2/

The  aria-hidden attribute indicates whether an element is exposed to an accessibility API

So icon only should be avoided as they will not be of any use to people with visability issues using the API and as you say having both text and icon can confuse so it is recomended to use aria-hidden to remove the icons.

We so easly forget that we need to cover disability issues.


 

Share this post


Link to post
Share on other sites
2 hours ago, douglaswalker said:

yes i had a customer with a screen reader let me know the problems

intresting as when I checked font awesome are API compatiable as they use css,  https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility

also when I tested your button with google screen reader it worked perfectly? as you will see in my test.

 

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×