Question

当前制作invisible content的方法（即在屏幕上隐藏文本，但可将其提供给屏幕阅读器）似乎很不客气。目前，引导程序的sr-only混合定义为：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

我的问题是：使用仅屏幕的简单媒体查询可以轻松完成此操作吗？我特别想知道是否可以接受以下媒体查询和规则进行隐藏（例如，以下应用程序中的标题）：

@media only screen {
  h2 {
    display: none;
  }
}

换句话说：媒体查询@media only screen是否适用于屏幕阅读器和屏幕？

展开此代码段，以查看可能有用的地方。

const sections = document.querySelectorAll('section');
const anchors = document.querySelectorAll('nav a');

window.addEventListener('hashchange', ({ newURL }) => {
  const { hash } = new URL(newURL);
  
  sections.forEach(section => {
    if (section.matches(hash)) {
      section.style.display = null;
    } else {
      section.style.display = 'none'
    }
  });
  
  anchors.forEach(anchor => {
    if (anchor.href === newURL) {
      anchor.parentNode.classList.add('active');
    } else {
      anchor.parentNode.classList.remove('active');
    }
  });
});

article {
  display: flex;
}

section {
  flex-basis: 50%;
  max-height: 100vh;
  overflow: auto;
}

nav {
  margin-right: 1em;
}

nav a {
  color: #adadad;
}

nav .active a {
  color: #333333;
  font-weight: bold;
}

@media only screen {
  h2 {
    display: none;
  }
}

<article>
  <nav>
    <ol>
      <li class="active">
        <a href="#chapter-1">Chapter 1</a>
      </li>

      <li>
        <a href="#chapter-2">Chapter 2</a>
      </li>

      <li>
        <a href="#chapter-3">Chapter 3</a>
      </li>
    </ol>
  </nav>

  <section id="chapter-1">
    <h2>Chapter 1</h2>
    <p>The heading above is redundant for sighted users.</p>
  </section>
  
  <section id="chapter-2" style="display: none;">
    <h2>Chapter 2</h2>
    <p>They can infer it from the nav bar to the left.</p>
  </section>
  
  <section id="chapter-3" style="display: none;">
    <h2>Chapter 3</h2>
    <p>But screen readers might benefit from having it there.</p>
  </section>
</article>

Answer 1

我不知道这是否不太“ hacky”，但是肯定要简单一些。如果某个元素被aria-labelledby或aria-describedby引用并且该元素被隐藏，则该元素仍将在accessible name calculation中使用。

因此，您可以真的将其隐藏，而不是使用sr-only类来隐藏文本。

<span id="foo" style="display:none;">you can't see me</span>
...
<a href="#" id="myself" aria-labelledby="myself foo">hello</a>

当您导航到链接时，屏幕阅读器会说：“您好，您看不到我”

Answer 2

对不起，我对您要执行的操作感到有些困惑。因此，您尝试以可视方式（可视）隐藏文本，但将其提供给屏幕阅读器（盲人）。您能解释一下您要实现的目标吗？

如果是这样，我认为Bootstrap sr-only没什么问题...这是另一种选择。

.hidden 
{position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}

但是，如果您想将其隐藏在屏幕阅读器中，则只需使用aria-hidden =“ true。

display:none;

不会被屏幕阅读器读取。

辅助功能：使用媒体查询隐藏文本

2 个答案: