I am styling the send buttons on my contact form and blog subscription signup. Each letter of the word SEND is a different color. I can use an image for this or, thanks to help I received in another thread here, I can use button instead of input and style each letter with span and nth-of-type tags.
But I'm unclear on how this might affect accessibility. I want to make it clear that this is a send button to submit their contact form content or email address for the subscription.
Does anyone know how this renders per accessibility concerns?
button is the right element for this case (ideally with role="submit" on it as well). Coloring every letter differently does seem like an iffy UX call; this is a utility button, so it definitely needs to be clear and easy to read.
Speaking of accessibility, be aware that:
if you write your button like this:
<button>SEND</button>
screen-readers will pronounce it as "S-E-N-D" - one letter at a time, like an acronym. You can avoid this with a little CSS.
HTML:
<button>Send</button>
CSS:
button { text-transform: uppercase; }