[W3Conf] Léonie Watson: “像你真心在乎一样设计:面向网页专业人士的实用无障碍”

Avatar of Chris Coyier
Chris Coyier 发布

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 价值 200 美元的免费积分!

Léonie Watson (@leoniewatson) 是一位来自英国布里斯托尔的数字无障碍顾问。她相信无障碍的重要性,也相信它不会阻碍创造力。

这些是我从她在旧金山 W3Conf 上的演讲中摘录的笔记,作为 此直播博客系列 的一部分。

让 Léonie 心跳加速的是像你真心在乎一样设计的理念。她分享了围绕这个理念的三个原则。

1. 像 Banksy 一样设计

挑战传统智慧。

例如:无障碍会扼杀创造力。她在英国的一家公司工作,那里的人真的相信这一点。然后她向我们展示了一个非常复杂的网页表单,它拥有各种很棒的动画和交互,但从无障碍的角度来看却完美无缺。

无障碍并不难,只是我们不熟悉而已。

我们对无障碍的思考方式,让它变得不熟悉。我们只需要更多地了解目标受众中的人。

2. 像达芬奇一样设计

对如何改进我们的日常工作充满好奇。

一个重要的概念是保持页面之间的一致性(例如,徽标、搜索导航)。这些成为重要的视觉地标,以帮助人们保持方向。这适用于您重复使用的任何类型的“小部件”,也适用于功能和外观。

HTML5 占位符不能替代真正的描述性文本。

考虑文本大小。考虑标题结构。考虑导航(它的外观、感觉和行为)。

“您不希望人们不得不费力才能获取您的信息。”

“从链接和输入中移除焦点轮廓是一个彻底的灾难。”

网络并没有崩溃。如果崩溃了,那是我们造成的。当我们损害无障碍性时,我们应该受到责备。

3. 像香奈儿一样设计

存在一个“无障碍堆栈”。

  • 顶部:屏幕阅读器
  • 中间:无障碍 API (⇅)
  • 底部:网页浏览器
堆栈。

“仅仅因为浏览器支持某个功能,并不意味着它存在于无障碍 API 中。”

浏览器必须首先支持某个功能,然后它才会向上移动到堆栈中。这从无障碍角度来看会使事情变得复杂。

在页面上正确使用 HTML(正确的标题、正确的列表等)意味着为屏幕阅读器用户提供正确的非线性方式来在页面上跳转。HTML5 ARIA 地标角色也是对此的一个重要胜利。

<main> 元素已经讨论了无数次。只需一个按键,人们就可以到达页面的主要内容。一个简单但重要的胜利。

使用 Ajax 不会自动破坏无障碍性。关键在于您如何使用它。测试、测试、再测试!她展示了一个例子,说明如何在不改变“添加到购物车”按钮上的焦点的情况下,将购物车逻辑地放置在该按钮之后,从而使屏幕阅读器体验在这种情况下可以接受。

无障碍性影响着构建体验的所有领域。“敏捷无障碍性”= 在整个过程中实现无障碍性。