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

[satish0244]

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>
</select>

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

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

[OzRamos]

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

[satish0244]

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.