您好，
我正在参与 RAMP COVID-19 项目。我们选择了 Discourse 作为我们的 论坛，对此非常满意。
我和一位同事一直在关注无障碍访问问题。我相信我们已经通过管理员 CSS 功能解决了低对比度问题。但根据 WAVE 的检测结果，我们仍存在一些不确定能否自行解决的问题，具体如下：
-
链接图片缺少替代文本：这与头像图片有关。虽然有描述性标题，但 alt 属性为空。
-
每个页面都缺少标签：
<div><input type="text"></div>
-
每个页面都有一个空标题：
<div class="title"><h3></h3><!-- --></div>
-
报告了大量与 SVG 相关的空按钮。
-
存在空链接，例如：
<a href="" aria-hidden="true" tabindex="-1" class="tabLoc"></a>
以及
<a href="" class="edit-topic" title="edit the title and category of this topic" data-ember-action="" data-ember-action-27="27"><svg class="fa d-icon d-icon-pencil-alt svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#pencil-alt"></svg></a>。
-
存在空的表格表头：<th data-sort-order="posters" class="posters"></th>
我很难相信我们是唯一遇到这些问题的用户，因此我在想，是 WAVE 过于严格，还是我们遗漏了一些关键点？任何帮助都将不胜感激。
提前感谢，
Kostas
8 个赞
这些在浏览器 F12 检查器中渲染的页面 HTML 里都能看见吗？
1 个赞
感谢您的关注。有一个项目（空标题）我不确定能否找到，但其余内容我可以通过 WAVE 的“代码”功能获取，并借助 F12 检查器（尽管需要一些努力）找到。
我不确定时区是否对我们有利（我在英国，UTC+01:00），但如果有帮助，我很乐意通过 Teams 或类似平台进行通话演示。
1 个赞
riking
(Kane York)
4
aria-hidden 属性应能正确地让无障碍工具隐藏此链接。
4 个赞
如果其中有一些是相对容易解决的，我们是否可以处理一下 @awesomerobot？
3 个赞
是的，我相信其中至少有几处很容易修复。我会仔细查看一下。
3 个赞
空的 alt 属性本身是可以的……这本意是向屏幕阅读器发出信号，表明该图像仅为装饰，可以忽略……但是，我们还包含了 title 属性……因此，根据 `img` with null `alt `and non-null `title` attributes - Screen reader compatibility 的说法，这有时可能会带来问题。
有些屏幕阅读器能正确忽略头像，但另一些则会因为这个问题将用户名/名称朗读两遍。
我提交了一个 PR 以移除帖子头像中的 title 属性：
这是显示要复制和分享的 URL 的输入框，已提交 PR 在此处添加 aria 标签：
我还没找到这个……可能是基于站点设置？需要再仔细查看一下。
我们不为视力正常的用户标注此项，因为他们可以扫视该列并推断其内容……如果看不见，这就难得多了……为屏幕阅读器添加标签是有意义的：
其余未涵盖的问题都与按钮相关，我还需要进一步调查……
8 个赞
您好，
非常感谢你们当时的迅速回复和行动。我想确认一下，合并后的请求是否已在某个版本的代码中？
另外，如果我将我们修改的主题进行整理并分享出来，以便通过 WAVE 可访问性测试，这对你们会有帮助吗？
此致，
Kostas
1 个赞
sam
(Sam Saffron)
10
当然，最新的 Discourse 已包含这些修复。
欢迎分享主题。
2 个赞
我稍后会鼓起勇气完成所有更新（希望如此），并再次汇报。
关于主题，情况变得有些混乱。我们使用的是（并修改了）Light 主题。我们对颜色进行了以下高层级调整：
三级色： #0088cc → #006498
四级色： #e45735 → #C93C1B
危险色： #e45735 → #C93C1B
成功色： #009900 → #007A00
我后来想到的一个巧妙办法是，直接测试颜色页面的无障碍性。
随后，我们使用 CSS 编辑器（admin/customize/themes/3/common/scss/edit）进行了大量修改，但我不确定该如何传达这些更改（我可以复制粘贴，但我不确定这是否是您想要的，也不确定是否应该放在这个线程中）。我认为，如果我们能在高层级界面上看到其他提到的颜色（例如 var(–primary-medium)），事情可能会变得更容易。例如，一个经典的例子是 #919191 → #595959，但我的方法只是处理我在浏览页面时偶然发现的“症状”（而且由于“站点”的动态特性，今天能通过的检查，明天未必能通过）。
我也很乐意尝试其他方式，请随时告知。不过，在任何情况下，我都无法运行演示服务或检查代码等。
另外，我还想说明，我完全无法修复 admin/upgrade 页面（该页面存在许多对比度问题）；我不确定它是否不遵循 CSS 规范，或者具体原因是什么。
3 个赞
riking
(Kane York)
12
elijah
(Eli the Bearded)
13
据我回忆，Discourse 的管理后台使用独立的样式表（这些样式表更难编辑），目的是防止用户因 CSS 修改而意外将自己锁在无法使用的管理界面之外。
我稍微落后了一些，尽管我们已经升级了论坛。但还是想回复那些花时间（非常感谢！）查看此帖子的朋友们。
谢谢。如果我点击你的链接，Wave 会检测到 13 个无障碍问题（低对比度），但并非针对颜色本身。这是因为与颜色页面不同，它没有展示这些颜色是如何使用的（是作为背景还是带有文字的前景）。
请告诉我如何提供帮助；确实存在许多对比度错误。
再次您好。
我又检查了一遍，错误数量已大幅减少，非常感谢 @awesomerobot 以及其他提供帮助的朋友们！
不过，我仍遇到以下错误：
- 访问分类时：以下代码中的按钮为空：
<button name="Filter by: [missing %{name} value]" role="combobox" data-name="regular" data-value="1" aria-expanded="false" aria-haspopup="menu" aria-owns="ember41-body" tabindex="0" id="ember41-header" class="select-kit-header single-select-header btn-default dropdown-select-box-header btn no-text btn-icon ember-view" type="button">- 在其他页面上，
ember 后的数字不同，也会出现此问题。
- 访问分类时：表格标题为空：
<th data-sort-order="posters" class="posters" aria-label="Posters"></th>
- 用户“system”发布的帖子：链接图片缺少替代文本：
<img alt="" src="/user_avatar/ramp-forums.epcc.ed.ac.uk/system/90/1_2.png" class="avatar" width="45" height="45">
- 任何帖子：空链接
<a href="" aria-hidden="true" tabindex="-1" class="tabLoc"></a>- 以及上述语句中元素的多种排列组合
- 搜索有有效结果时：空标题
<h3 class="search-footer"><!----></h3>（我在此处编辑了格式，删除了空白和换行符）
- 搜索有有效结果时：高级搜索中有五个缺失的表单标签（如需更多信息，我可以提供）
如有任何帮助，将不胜感激。
我也应该感谢 @fzngagan，抱歉。感谢你的关注，很高兴再次收到你的消息。
2 个赞