Hide character form dropdown option from screen reader and read it as defined message

I have requirement of displaying asteric (*) for some options as in below.

<select name="pNameDropDownList" id="pNameDropDownList" >
	<option value="-1">Select Name</option>
	<option value="12">*Jessica</option>
	<option value="34">*Thomas</option>
	<option value="56">Dorenda</option>

Screen reader should read * as Specially Named instead of asteric.

How can we do this using aria. Any help is greatly appreciated.

I don’t get a chance to mess around with screen readers too often, but you can give this a try. To hide the asterisk in screen readers, wrap your text with aria-hidden=true:
<span aria-hidden="true">*</span>Jessica

To have the screen reader say something that’s not visible, wrap your text with aria-label="TEXT":
<span class="screen-reader-only">Specially Named</span>Jessica

You’ll also need to add a class that positions the content outside of the view (which is, as far as I know, the only way to “hide” content to be read only by screen readers):

.screen-reader-only {position: absolute; top: -9999px; left: -9999px}

Together, you’d do:

<span class="screen-reader-only">Specially Named</span><span aria-hidden="true">*</span>Jessica

Hi OzRamos,

I tried with your suggestion. Dropdownoption value

Specially Named*Jessica

displays whole text in dropdown. It seems style is not getting applied to option value.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.