如何让屏幕阅读器的用户更容易访问推荐页面？答案

【问题标题】：How can I make a testimonials page more accessible for users of screen readers?如何让屏幕阅读器的用户更容易访问推荐页面？
【发布时间】：2015-10-03 16:15:51
【问题描述】：

页面顶部有一个标题，后面是用户的引用、他们组织的徽标和指向其主页的链接，以及他们的姓名和职位。

目前，屏幕阅读器的大纲在页面的主要部分只有一个标题。我认为理想情况下，每个推荐应该有子项目，最好由组织确定（但是，我是这个可访问性交易的新手）。但我找不到合适的 ARIA 角色来添加。

底部还会有一个“显示更多”按钮。

我想到的另一个解决方案是在其中添加一些 <h2>s，但是，我不知道这是否是一种好的做法。

问题：

是否应该在屏幕阅读器上显示每个推荐的子项？
如果有，是否有合适的 ARIA 角色？
如果没有，是否有替代解决方案，或者我应该放弃吗？

谢谢。

【问题讨论】：

标签： html accessibility wai-aria testimonials

【解决方案1】：

您不需要将每个推荐都设为子项。如果这样做，则根本不需要 ARIA 角色：只需将其设为 h2。
但是您可以选择另一种处理方式：让您的每个用户引用blockquote，或者，如果由于某种原因不适合，则使用article（作为<div role="article"> 或作为<article> HTML 5 语义标记）。

【讨论】：

【解决方案2】：

尝试设想（不是双关语）屏幕阅读器用户将如何浏览 cmets。标题对于导航非常有用。我可以按“1”或“2”或“3”分别跳到每个 H1、H2、H3。或者，无论级别如何，我都可以使用“H”导航到每个标题。

例如，使用 google 搜索，每个结果都是一个 H3。移动到下一个搜索结果非常容易。

您必须决定哪些文本应该是 H3（或 H2 或您决定的任何级别）。应该是组织名称、用户名还是推荐信本身？这是一个设计问题。

如果您不使用原生 html 标头标签（H1、H2），请确保指定正确的 aria 标签：

   <div role='heading' aria-level='2'>

【讨论】：