css - 当一个类已经存在时如何实现一个 sr-only 类

Question

我有一个已经建立的类的 div，我无法删除它，但我需要视觉阅读器和屏幕阅读器才能“阅读”内容。据我了解，sr-only是让屏幕阅读器只能阅读，我如何为屏幕阅读器和视觉阅读器开发它？

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

Answer 1

如果您想让文本对屏幕阅读器和以视觉方式查看文本的视力正常的用户可见，则无需进一步操作。假设文本可在屏幕上查看，默认情况下屏幕阅读器已经可以查看该文本。

请注意 class="page instructions"表示该元素的类为 page和 instructions 的类(class)(类名以空格分隔)。因此，例如，如果您希望文本具有类 sr-only和 page-instructions ，您只需使用 class="sr-only page-instructions" .