我叫Dima，我在圣彼得堡Yandex办公室工作，并在Toloka接口开发团队中提供内部服务。 今年，我
为接口开发学院准备了一个讲座。 以下是其解码。
什么是接口可用性？ 对于谁来说重要的，为什么要为此而努力？ 使接口可访问的基本技术是什么？ 除了这些问题之外，讲座还阐明了辅助技术的基本原理。 我试图分析该理论和大量实际示例，以及显示屏幕阅读器的过程。
-在当今流行的可访问性术语下隐藏了什么？ 您有什么选择？ 对于盲人，屏幕阅读，残障人士，动作协调……是的。 可访问性-每个人都可以使用该界面的能力，而不受物理或技术限制。
可访问的界面是最适合广泛用户使用的界面。 也许有人有疑问，为什么要使接口可访问？ 这有什么动机？ 首先，对我而言，最重要的动机是道德。 残疾人并不比其他人差，他们也希望并有机会使用您开发的资源的全部功能。
财务方面。 残疾人是购买商品，使用服务的客户，因此确保可访问性还有助于扩大您的当前市场并进入新市场。
法律方面。 许多国家/地区的法律都规定了获取信息的不可剥夺的权利。 例如，在美国和欧盟，残疾人应该可以访问所有Web界面。 在我们国家，这主要适用于国有网站，对于所有其他国家，这仅作为建议。
这些人是谁，谁在乎可访问性？ 首先-有视觉障碍的用户，完全失明的人，有视觉障碍的人，有色觉障碍的人。 这些用户发现很难看到您的网站。 他们可能根本看不到您的网站。 第二类是违反肌肉骨骼系统的用户。 这样的人很难使用输入设备，因为它们具有运动性，自发性肌肉收缩的问题。
我要特别注意这样一个事实，即我们每个人有时都可能会受到时间限制，因此他将无法以通常的方式使用该界面。 例如，右手打断右手开始出现运动问题。 而且，在不考虑这些功能的情况下开发的界面可能完全无法访问。
现在，在俄罗斯大约有10％的人口是一种或另一种残疾人。 而且远不是最后一个地方，那里是视力障碍者或肌肉骨骼系统的人。 所有这些人都是您网站的潜在访问者。 可访问性对他们尤其重要。
帮助人们使用界面的技术可以分为两种：硬件和软件。 通过特殊的键盘，鼠标，操纵杆和其他输入设备，可以帮助残疾人使用界面。
我想以这个东西为例。 这种类型的设备称为交换机。 可访问性不仅与计算机和笔记本电脑有关，还与移动设备有关。 残疾人可以通过手机或平板电脑访问您的网站。 该设备连接到iOS或Android设备，您可以为其按钮分配一些用户操作。 例如，此开关-具有两个大按钮，在页面上为其分配焦点控制很方便。
对于看不到您的界面的用户，语音合成并不总是很方便。 因此，有一个盲文显示器。 这是一种特殊的输出设备，以盲文的有形点形式显示信息。 很酷的东西，但是有两个问题。 这是非常昂贵的，并不是每个有需要的人都负担得起。
此外，在更成熟的年龄失去视力的人通常不知道盲文字母，也不想掌握盲文字母。
软件技术也足够。 这些是用于增加页面图像的工具，例如Windows内置的屏幕放大器，macOS，这些是软件色域修改器等。 例如，有一些软件可以让您通过眼睛和头部的运动来控制界面。 在macOS上，此类程序是内置的，称为驻留控制。 但是在软件技术中，屏幕阅读器占有特殊的位置。 这是一个特殊的应用程序，可以向用户读取站点和操作系统的内容，为用户提供便捷的导航功能。
屏幕阅读器是为视障人士感知信息的最便捷且最广泛的方式。 我们将在讲座期间更详细地讨论它们。
关于接口可用性领域中的建议的几句话。 我们有GOST，在西部有WCAG和508节。这些建议中描述的方法不会影响网站的外观，但会为残障用户提供一些其他导航和使用的内容。
可以帮助您立即访问界面的做法。 替代性描述应在文本中传达简短信息，以补充说明。
页面上的图形和图标也是如此。 请记住：他们还需要其他支持。 如果页面上的任何其他元素显示为图像，则必须使用aria-hidden =“ true”属性将其从屏幕阅读器中隐藏。
接下来，我们将讨论带有前缀aria的属性。
有必要使用标签标记来描述输入字段，为此我们用输入字段的id值指定for属性。 这不仅使您可以通过单击标签来快速切换到编辑控件，而且还可以在语义上将控件与其描述联系起来，即，屏幕阅读器将向我们阅读此元素的描述。 指示输入字段的数据类型。
除了将自动添加到这些输入的验证规则之外，在许多情况下，还将提供一种方便的跨浏览器输入信息的方法。 例如，如此处所示，日历为日期或颜色（如果是颜色）。 如果浏览器不支持任何一种类型，则带有文本类型的输入将被替换，不会有任何损坏。
使用必填或aria-required =“ true”属性标记必填字段。 使用fieldset标签对相关字段进行分组，并使用图例元素指示组标题，您不仅可以指定组的用途，还可以指定字段的一般特征（例如，该组中的所有字段都是必需的）。
我们将三个单选按钮包装在fieldset标签中，将标题设置在图例标签中。 现在，无论选择哪个按钮，屏幕阅读器都将读取图例标签的内容。 访问该网站的人将了解这种形式的情况。
显示错误和成功消息。
关于标题，因此很明显，此标记中的文本应描述页面的目的或标题。 如果您只有一个页面应用程序，那么在浏览页面时不要忘记更改title标签的内容。
指定页面的语言。 为此，请在HTML标签中设置lang属性。 这对SEO很有帮助，它有助于翻译插件，并且屏幕阅读器可以准确地确定此类页面的语言。 如果您的文档包含多种语言，则可以为各个标签指定lang属性。 观察布局的有效性。 这很重要，因为屏幕阅读器可能会误读无效的页面。 语义也是如此。 页面上的所有元素在语义上都应该正确，您应该出于语义目的使用HTML标记。 在创建自定义元素时，请注意正确的语义。
让我们谈谈语义领域的例子。 首先是头条新闻。 它们是页面上最重要的语义元素之一。 当某人使用屏幕阅读器访问该网站时，进入一个未知的页面，那么他在该页面上要做的第一件事就是遵循标题。 在屏幕阅读器中，甚至还有一种特殊的模式可以让您方便地执行此操作。 如果您的页面包含标题并显示清晰的层次结构，那么一个人浏览该站点将很方便，他将能够快速转到所需的部分。 使用起来非常方便。
语义重要性的另一个示例是菜单的布局。 如果您将菜单制作为左侧，那么从语义的角度来看，它将只是一个组。 div是一个分组标记，在其中将有一些不相关的元素，在这种情况下，只有三个链接。
如果通过包装一个特殊的语义标记进行导航，其中将包含一个元素列表，每个元素都是一个链接，那么从语义，屏幕阅读器和浏览器的角度来看，这将是诚实的导航，其中包含三个元素的列表，根据此列表将很方便四处走动。
我希望下一个技巧对您很明显：正确使用第五HTML标准中的语义标记可确保浏览器和辅助技术在逻辑上正确解释您的布局。
关于自适应布局和移动版本。 您
已经进行了有关自适应布局
的讲座 ，希望您了解这一点的重要性。
您应该始终优先考虑嵌入式HTML元素，并且仅在必要时创建自己的元素。 原因很简单：包装盒中已有的内置元素具有正确的语义和许多功能。 人们谈论它时，通常会以按钮为例。 因此，我将有两个按钮。
它们仅在铭文上有所不同，但实际上只有左按钮是一个按钮。 它基于按钮标签。 正确的只是一个风格化的div。 因此，我们可以将焦点集中在左侧按钮上-button是默认的可聚焦元素。 该按钮处于禁用状态，无法按下该按钮。 如果我们处于按钮的焦点，则通过按Enter和Space键单击该按钮。 从浏览器的角度来看，只有此按钮才具有正确的语义作用，屏幕阅读器就是该按钮，而当屏幕阅读器到达那里时，它将说这是一个按钮。 基于div的按钮没有全部。 您将必须自己实现以下几点。 但是，为什么有内置的良好浏览器API可以使用呢？
在开发和布局阶段之前考虑可访问性很重要。 谁曾在工作中或他的副项目中参与过设计或绘图设计？ 绝对有一半以上的观众。 在这个方向上的一些技巧。 请勿使界面的外观过小或与背景元素合并。
另外，请勿在正文中使用装饰性字体或书法字体。 记住那些视力和色彩感知有问题的用户。 关于使用显色效果较差的显示器的人。 他们所有人可能根本看不到您的界面元素。 这对于控件，控件而言尤其重要。
我们讨论过形式，但更多是在语义方面。 在此，请注意用户与表单交互的有效设计，并考虑到某些用户的特征。 例如，有些人的运动技能有问题，他们可能很难进入小的领域。 因此，使这些元素的单击区域大于控件或按钮。 彼此靠近的元素也是如此。 运动技能有问题的人可能会错过并按错方向。 分散重要元素的距离，并确保要求确认一些不可逆的操作，例如删除数据。
有关设计一致性，一致性，可预测性和一致性的共同点。 您的整个设计应该采用一种风格。 您网站上的所有街区都应位于一个地方。 当浏览页面时，块不应从一个地方跳到另一个地方。 这对于导航尤其重要。 一个看不见您网站的人会在自己脑海中构筑自己的形象，并想象它的外观。 如果您的导航从一个页面跳转到另一个页面，那么他将对此感到困惑，将无法使用该站点。
除了我们已经了解的所有技术之外，还有一个旨在为残障用户提供与Internet上的站点进行交互的便捷方法的标准。
在理解复杂性之前，让我们从浏览器的角度看它的幕后工作原理。 加载页面后，浏览器开始解析HTML标记，并基于该标记构建DOM树。 我希望您知道这种结构，它是在浏览器中显示数据的基础，可以使用JS进行更改，等等。构建DOM树时，浏览器会基于它构建另一个数据结构-可访问性树。 该树包含有关可访问性的有用信息。 屏幕阅读器等辅助技术将获取此信息。 并为用户提供一些便捷的方式来与站点进行交互。 在此交互过程中，DOM可能会更改，因此浏览器会监视DOM中的更改并根据需要更新可访问性树。 辅助技术消除了这些变化，并以某种方式修改了它们提供给用户的功能。
这是一个隔离的数据结构。 无法从DOM访问它，也无法使用JS对其进行查看或编辑。 浏览器完全处理此结构的实现和管理。 有关元素语义的信息存储在此树中，借助这些信息，辅助技术可以理解如何从页面中解释元素。
现在只能在特殊工具的帮助下访问此信息。 DevTools可访问性检查器就是这样的元素之一。 Chrome可用性检查器现在位于“实验技术”部分，您可以通过访问“ Chrome标志”页面启用该功能。 您打开了这些技术，然后转到DevTools并打开辅助功能面板本身。 因此，她从事业务。
此处显示了各种有用的可访问性信息。 随之而来的问题是，这些信息从何而来以及如何进行更改？
小例子。
只是包装在标签中的本机复选框。 因此它将在可访问性树中显示。 我们看到这是一个对象，它具有字段，复选框类型，从标签中获取的名称以及可以检查和不检查的状态。
现在，我们使用div创建一个自定义复选框，其状态由样式表示。 但是从浏览器的角度来看，辅助技术将只是具有某些含义的文本。 这两个例子清楚地证实了我之前所说的：只要有可能，就应始终使用本机元素。 但是通常这是不可能的。 然后，ARIA标准得以解决。
ARIA规范添加了特殊的属性，这些属性确定元素在可访问性树中的表示方式以及元素将具有的属性。 该规范给我们的主要内容是用于描述元素类型的角色，用于描述其状态的属性。
我们将简要介绍一下角色和属性，然后通过示例进行修复。 让我们从角色的概念开始。 角色使我们能够对页面上的元素进行分类。 它已安装，我们将使用所需的值添加到role属性的HTML元素中。
标准中有许多不同的角色，它们分为不同的组。 例如，小部件的角色。 它们被分配给元素，这些元素是用户界面的独立部分。 这些是常用的按钮，单选按钮，选项卡，工具提示。 接下来是组合其他角色元素的复合角色。 显然，单选组由单选元素组成，或者选项卡列表由选项卡组成。 以下是结构角色和地标，地标。 这些角色被赋予页面上的大型语义块。
除了角色之外，ARIA标准还提供状态。 他们可以描述元素当前处于什么状态。 例如，小部件的状态，它们指示元素被隐藏，标记，锁定等。
也有一些状态指示元素的连接。 例如，一个元素描述另一个元素，控制另一个元素。 各国也可以声明预期内容会发生变化的特定区域。 这些区域称为活动区域。
有许多角色和条件。 所有这些都可以在规范网站上阅读。
让我们看一下最常用角色的示例。
让我们完成自定义复选框。 我们使用相同的div，但是现在我们为其添加了复选框角色，以及一个显示状态的属性，该状态已通过aria选中，为true或false。 现在，您需要添加适当的JS，从浏览器的角度来看，语义将是一个诚实的复选框。 其他元素可以用相同的方式制作。 例如，充当开关的按钮将在状态之间切换。 她具有自己的角色，如交换机和指示她当前状态的属性。
复合角色的示例。 有一个带有tablist元素的列表，里面有带有tab角色的元素。 因此，我们告诉浏览器，这意味着这些元素是选项卡。
一个更复杂的示例是多级菜单。 除了各种角色外，还有一个结构性角色-导航，还有彼此嵌套的复合角色。 有几个有趣的状态，例如，aria-haspopup的值为true表示此元素为下拉列表。 , , aria-hidden true, , , .
, , , . , , JS, , , . aria-haspopup . aria-hidden , .
, . , . « », . aria-controls id , . , , , aria-describedby. , .
, , . . , , ? aria live . alert, aria-live. , , , . role=”alert” aria-live assertive, . , , live-region.
, , live region aria-live polite. , , .
. live , . , , , , , , , , . 100%, , .
. , , : Shift + Tab Tab. . , .
HTML-. , . - CSS-, , , float order , , .
. , , , . . . tab, , . , - , .
, focus ring, . , , , . .
, , , . , . . , , outline, box-shadow, border, , .
. , , -. , . , . , . , .
, ? , , focus ring . .
, focus ring. , , , : , , , . , . , , . , , , .
, , , . , , ? tabindex. 0, . . , tab.
div . tab, . tabindex=0, , .
tabindex=-1, , . JS.
tabindex > 0 . , , .
tabindex > 0 — , . , , . . . , . , -, Bootstrap.
, — ESC , — , . , . , . , .
, material design, . , , . , . , , . , , , . , tab - .
, - . . . , . — inert.
, . inert , . , , , . , .
, JS. . — Focus Manager. . apture - . release , , . , , , . , .
— , . — .
(, React Modal) .
. ?
VoiceOver, Apple, macOS, iOS, WatchOS, . , , , , , . , macOS.
Windows, NVDA. . , , VoiceOver, , , , .
Windows — JAWS. , , , VoiceOver, .
. , , , . VoiceOver, .
macOS Accessability « », VoiceOver. “ VoiceOver” Cmd + F5. , , , , . , .
macOS. , . , , . , tab, .
. . , focus ring , . , ?
-, , . . , . complimentary, . 2 , - , . tab .
. — . , aria-haspopup. , , , Enter . :
, .
popup. , , . . , , , . — . , .
, .
. , tablist, , . . , , .
.
. . , , , . . .
, . , , , . , . , .
, , , .
, , , , . , , .
, , tab, .
, tab shift+tab . . VoiceOver , Ctrl+Cmd+U.
, . . landmarks, .
. , , , , , , .
. . , , , . — .
, VoiceOver, , .
, , — .
, , . , . , . , . , , , . , , . . . Tab Shift +Tab. , — .
, . . , - , , , .
Accessibility Inspector. , , .
Audits DevTools. -, 60- Chrome. , , , .
, Audits, — Axe. , . . , . , , , , .
Axe - Selenium. , — , . . Axe CLI — , , , . Phantom JS.
. , .
—
Mozilla;
—
, ;
—
A11ycast — YouTube Google, , ;
—
Inclusive components , . , , .
, , — , . .
— 52872-2012
— WCAG 2.0
— inert
— :focus-visible
— Focus manager
— React Focus Lock
— Axe Core