常见网站可用性问题

常见网站可用性问题

简单的方法就能轻易解决

WebAIM已发布最新报告。通过自动检测的方法检测网站,报告针对100万个网站上出现的可用性问题进行了分析。其中哪些问题是可轻而易举改正的呢?

扩展阅读

WebAIM,是一家总部位于美国犹他州的非营利组织。自2019年,启动WebAIM Million’项目。每年发布综合分析报告,观察互联网可用性的发展趋势和改善/下降。
报告内容很有见地。值得推荐阅读!

基于自动可用性检测而进行调查,需要加上以下警告:

一是“易于感知的问题”和“对用户造成影响的问题”,两者无关,是不一样的。自动化测试也只涵盖了所有互联网可用性中的一小部分,因为有些问题机器(现在或永远)无法检测。我并不是说这会降低调查的作用,而是想明确指出这一点。W3C的ACT-Rules 组织致力于指定合理的测试规则。

好的,让我们看看当今最热门的问题以及开发人员、浏览器和 CMS 是如何解决问题的。

低文本对比度

在某些情况下,文本颜色和背景颜色的对比度低于WCAG阈值(另请参见MDN on contrast)。

通过安装插件(如:Contrast Ratio 设计师可以检查对比度。

开发人员可以使用自动对比度检查器,来确保避免使用低对比度文本。运行一个检查器,如Firefox 开发工具辅助功能面板中的检查器或CI/CD 的ax,或者将两种颜色粘贴到一个手动工具中,如 Contrast Ratio。

设计人员和开发人员都可以使用 Polypane 的对比度检查器,它会给出替代方案建议,这不仅可以更轻松地找到问题,还可以同时修复问题。

用户可以使用像Fix Contrast这样的插件:它可以即时微调颜色,这样就不必忍受低对比度文本。

针对网页内容无障碍指南的新颜色对比度算法之一问题,人们进行诸多讨论,目前讨论仍在进行中。

缺少替代文字

当你创建内容,对图片进行描述。在使用Twitter的内容管理器,甚至在GitHub上发布帖子:使用替代文本功能,以便看不到图像的用户可以访问图片的替代文本。在不支持替代文本的平台上,例如 Slack 或移动 LinkedIn (!),可以用文本描述图像。如果您选择 CMS 或内容平台,确保它可以处理或设置使用替代文本。

生成的 HTML 如下:

<!-- image with text -->
<img src="website-logo.png" alt="hiddedevries.nl" />

<!-- image with redundant content -->
<img src="hidde.png" alt="" /> 
<p>Photo of Hidde</p>

你可根据Alt Decision Tree书写替代文本。文本内容的要点是,如果图像的位置显示出一个正方形,在正方形中写什么以使其不影响阅读?可以选择将其留空。就像上面的例子一样,有一张照片,下面有一段描述它的段落。在这种情况下,在alt属性中写“Hidde”或“Hidde 的照片”是多余的,最好使用一个空的alt(但不要将属性保留在那里,否则某些浏览器会使用图像 URL 作为替代)。

用户可以使用 Microsoft Edge,它可以填补缺失的替代文本。AI 不擅长理解意图或背景,但精通识别文本。下次新闻网站再发布新冠病毒防治新规则的图片,并不带有替代文本时(就像荷兰主要新闻网站在整个疫情期间所做的那样),Edge 的用户可以理解其内容。

空链接和按钮

当链接、按钮或其他交互元素没有名称时,屏幕阅读器或语音控制等辅助技术无法唯一识别它们。如果要与之交互,则需要给它们定义一个名称。

屏幕阅读器说“这里有 4 个按钮:按钮、按钮、按钮和按钮”与“这里有 4 个按钮:发布内容、删除内容、更改为草稿、上传图像”,想象一下两者之间的区别。在第一种情况下,需要按一下按钮才知道按钮的用处;在第二种情况下,不需要任何额外操作。

名称源自文本内容,例如按钮内的实际文本,或者可以通过属性添加。有关更多详细信息,请参阅命名以提高可访问性控件命名规范

开发人员需要确保他们构建的所有控件(链接、按钮、表单字段等)都有名称,最好是有独立意义:

<!-- names that make sense out of context -->
<button>Submit form</button>
<button>Publish content</button>
<button>Expand filters</button>
<a href="//wikipedia.org">Wikipedia</a>
<a href="//twitter.com">Hidde on Twitter</a>

<!-- names that are confusing -->
<a href="/">click here</a><!-- avoid -->
<a href="/">read more</a><!-- avoid -->

<!-- names that are missing; avoid or add a name -->
<a href="//twitter.com/"><svg/></a><!-- avoid -->
<a href="//linkedin.com"><img src="" alt="" /></a><!-- avoid -->
<button><img/><button><!-- avoid -->

浏览器有时可以从附近的文本中节选名称。这并不理想,可能会导致错误和令人困惑的猜测,导致用户体验糟糕。开发人员最清楚控件的作用并能命名它。

缺少表单标签

表单标签受命名影响,因为表单单独命名表单元素。

开发人员设置表单输入框的for属性并指向input/select/textareaid,可以解决此问题,这也使得单击标签将光标移动到输入狂

<!-- “for” and “id” are same, this connects them -->
<label for="field">Address</label>
<input id="field" />

他们还可以给输入框添加一个aria-label属性(注意,ARIA 标签解析得不好)。

缺少表格标签

开发人员应确保元素具有 lang 属性,并使用正确语言:

<!-- marks this document as 'in English -->
<html lang="en">

有时有忘记,因为<html> 元素存在于哪些从未修改过的模板中,但这并不难,因此请务必仔细检查此属性是否存在并设置为正确的语言。

如果页面的一部分内容是另一种语言的,在相应DOM节点元素上再次设置lang属性。当使用国际化的插件时,确保设置了 langs 。

CMS可以确保 lang 属性的正确设置。浏览器可以猜测语言,但也有可能出错,特别是在区分方言时:它们通常对人很重要,而对机器则不那么重要。

原文地址:https://hidde.blog/common-a11y-issues/

凶猛小白兔

发表评论