How to implement a class of sr-only when a class already exists

user_6719819 0
Viewed 62

I have a div with an already established class that I cannot remove but I need to for both visual readers and the screen reader to be able to "read" the contents. As I understand it, sr-only is for the screen reader to only be able to read, how do I develop this for both screen readers and visual readers?

<div class="page instructions">
  <p>I'm baby pBR&B activated charcoal mlkshk quinoa, kickstarter keytar tattooed bespoke cray 8-bit ramps blue bottle.</p>
  <p>Cliche cronut hella actually godard venmo banh mi hashtag paleo poutine selvage fixie.</p>
  <p>Locavore tofu sartorial man braid, pickled tumeric pug bespoke schlitz adaptogen live-edge microdosing echo park cronut.</p>
  <p>Art party ramps direct trade, hashtag heirloom gluten-free literally glossier vaporware sartorial normcore edison bulb tousled.</p>
</div>
accessibility css
1 Answers

If you want to make the text visible to both screen readers and sighted users viewing the text visually, there is no further action required. Assuming the text is viewable on screen, it will already be viewable to screen readers by default.

Note that class="page instructions" means the element has the class of page and the class of instructions (class names are space delimited). So if, for example, you wanted text to have classes sr-only and page-instructions, you would simply use class="sr-only page-instructions".

user_83187310
Related