A visually impaired user of a musical ear-training website I created tells me her screen reader is not properly pronouncing key names. In a selector dropdown on the page I have the flatted key names spelled with the proper unicode runes for a musical accidentals, e.g D♭, E♭, etc.
The screen reader apparently has no pronunciation for this symbol. I could change labels to D-flat, E-flat, etc. She says these spellings are pronounced sensibly.
On the other hand, I'd like to retain proper musical spelling for unimpaired users.
Is there a construct in html or css that allows one to provide an alternate string that will be discovered and read by screen readers?
For reference, website is at https://etudes.ellisandgrant.com and the source code is at https://github.com/Michael-F-Ellis/infinite-etudes
aria-label is what you are looking for here. You should be able to put aria-label="D flat" and it will be read out correctly