可访问的内联式列表（附实例）

我在我的网站上有一个这样的清单，有很长一段时间了。

直到我在屏幕阅读器上试了一下，发现屏幕阅读器读取的是我用来实现子弹的伪元素（::before 和::after ）内容。

屏幕阅读器会读出类似 "PizzaMIDDLE DOTDönerMIDDLE DOTKaffee "的内容。不太好。让我们试着解决这个问题。

错误的解决方案：伪元素中的文本

这是我最初的解决方案，在::before 伪元素和相邻的兄弟姐妹选择器中的子弹头字符，只在元素之间显示，而不是在每个元素前面：

li + li::before {
  content: ' · ';
}

优点：简单。

缺点:无法访问,屏幕阅读器会把每个子弹读成中间的点或类似的东西。

正确的解决方案：标记

一个解决无障碍问题的天真方案可以是将子弹移到标记中，并用aria-hidden="true" 来包装它们。

<ul>
  <li>Pizza <span aria-hidden="true"> · </span></li>
  <li>Döner <span aria-hidden="true"> · </span></li>
  <li>Kaffee</li>
</ul>

优点:在屏幕阅读器中运行良好。

缺点:如果可以避免的话，我不喜欢在标记中保留像列表子弹这样的东西，但要使用一个文本字符作为子弹，这可能是你唯一的解决方案。

正确的解决方案：图像或CSS在伪元素中

这是我的最终解决方案。它是基于最初的、错误的、带有伪元素的解决方案，但使用图形作为子弹。它可以是简单形状的CSS，如一个圆或一个箭头，或更复杂形状的SVG。

我只有一个圆，所以我使用了CSS:

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
li + li::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.5ch;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: currentColor;
}

display: flex 我在ul ，以使其独立于HTML中可能的空白处。

请看Artem Sapegin (@iamsapegin)在CodePen上写的笔wVBzZo。

优点:在屏幕阅读器中运行良好，标记干净。

缺点:有很多的CSS。需要用CSS或SVG画一个子弹。

结论

这两种解决方案在小屏幕上看起来都不是很好，当项目不能放在一行上的时候。我不知道有什么完美的方法，所以把它当作一个家庭作业。如果你找到了好办法，请告诉我。

这个案例很好地提醒了我们要更加注意网站和应用程序的可访问性。我们应该至少做基本的可访问性测试，不要总是相信我们的直觉，就像我在这个列表中所做的，是错误的，并将不可访问的功能运送到生产。