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 类(类名是空格定界)。因此，例如，如果您希望文本具有 sr-only 和 page-instructions 类，则只需使用 class="sr-only page-instructions “。