WebAIM - Web Accessibility In Mind

E-mail List Archives

Image Buttons

for

From: JP Jamous
Date: Nov 3, 2016 7:22AM

Okay Folks! Here is another one for ya!



The video player has buttons that have icons showing different symbols to
operate the player. While my concern is people with cognitive disabilities
and low vision, I am wondering what approach would be best to show the
symbol as well as text in the button caption.



Here is a code sample:



<button>

<span>

A square icon goes here, using the <i></i>, which is included in Bootstrap.

</span>

<span>

Stop

</span>

</button>



Is this the best approach to keep the text visible so it is not included in
the icon itself? My main concern is to find the happy medium for all of my
audience.