网络游戏加盟合作_网络营销方式主要有哪些_广告推广免费发布_网络营销都有哪些形式

Accessibility into Development for Web Developers

HTML

HTML是一种动态且强大的标记语言。许多HTML元素，例如，都有内置的键盘可访问性，允许用户使用键盘按钮导航到界面中的元素并与之交互。然而，简单的问题，如误用标签或属性，可能会导致严重的可访问性障碍。

HTML提供了内容的结构和顺序。

正确准确地使用原生HTML可以确保用户遇到具有他们期望的默认行为的组件。

正确使用原生HTML将允许您：

1. 提供有意义的语义和预期的组件行为。
2. 默认情况下，为交互元素提供焦点。
3. 以有意义的方式排列元素，以提供正确的阅读和焦点顺序。
4. 确保用户可以访问您的内容，无论他们的设备、软件和/或任何自定义设置如何。

大多数可访问性问题不是在JavaScript或ARIA编码中发现的，而是在定义文档对象模型（DOM）的HTML代码中发现的。因此，最重要的是，尽管HTML是大多数编码解决方案的核心，但按预期创建元素。

CSS

CSS增强或补充了HTML提供的内容，或隐藏了用户尚不能访问的内容。
开发人员只应在无法通过HTML实现的情况下，应用CSS编码来增强内容的样式化。

使用正确的CSS可以让你：

1. 向用户隐藏或显示内容。
   （在某些情况下，它甚至可以允许您仅向辅助技术显示内容。）
2. 根据视口调整布局。
3. 为低视力用户提供高对比度造型。
4. 设计一个视觉上吸引人的焦点状态。

注意：当对所有用户隐藏内容时，您必须确保内容在语义上或功能上对键盘隐藏。避免使用CSS属性，如opacity：0和margin left：100%，这些属性只会在视觉上隐藏内容。

JavaScript

CSS可以增强核心HTML代码的样式，JavaScript可以通过提供额外的行为来增强代码。
使用适当的JavaScript将允许您：

1. 为界面添加其他辅助功能。
2. 管理键盘焦点。
3. 管理ARIA状态，并根据事件动态切换重要值。
4. 使用JavaScript为自定义控件添加预期的键盘可用性。

当构建在坚实的HTML和CSS基础之上并支持完整的键盘时，JavaScript驱动的体验可以完全访问。

ARIA

ARIA 为辅助技术用户传达额外的复杂交互。

仅在 HTML、CSS 和 JavaScript 无法提供复杂模式和交互的解决方案时使用 ARIA。

关于 ARIA 的最佳实践：

• 确保管理 ARIA 状态并经常进行测试！某些 ARIA 可能会降低屏幕阅读器的可用性。

• 节制使用 ARIA，并在开始之前了解 ARIA 规范。记住黄金法则：没有 ARIA 比坏的 ARIA 更好。

注意，当你从可访问性堆栈的基础 HTML 层向上进展时，每层的体积逐渐减小。这反映了一个理念：在可能的情况下，大部分编码解决方案应在下层解决，只在最后才保留 ARIA 解决方案。

Progressive enhancement in action

现在我们已经了解了渐进增强在无障碍技术栈中的工作原理，接下来让我们来看看如何对一个披露组件进行渐进增强。

在这个例子中，我们使用的是产品详情页面上的“免费配送与退货”披露组件。

我们可以通过以下步骤开始这个过程：

1. 确定核心功能。
2. 使用最原始的代码（即最低层的解决方案）来提供这一功能。
3. 增强这一体验。

换句话说，信息应该如何编码才能确保所有用户都能够访问？

In some cases, the most primitive code to provide the functionality is through a heading and paragraph text.<!– Start with the lowest stack: HTML --><h2>Free Shipping & Returns</h2><p>Free standard shipping and free 60-day returns for members. …</p>

接着，当 JavaScript 可用时，它会将该模式转换为一个详情/摘要组件。JavaScript 的存在使得它可以管理 ARIA。如果 JavaScript 不可用，那么“免费配送与退货”的内容就只是标题和段落文本。

<!-- after / JavaScript redraws the FAQ item into a details/summary widget --><details class="disclosure"><summary><h3>Free Shipping & Returns</h3> </summary><p>Free standard shipping and free 60-day returns for members. …</p> </details>

Landmarks

HTML5 引入了一些结构性元素，这些元素通常与文档结构和标志性角色（landmark roles）相匹配。

HTML 元素	隐含角色	可接受的角色
header	N/A	banner
nav	navigation	navigation
main	main	main
footer	N/A	contentinfo
article	article	application, article, document, or main
aside	complementary	complementary

这些标志性角色帮助用户理解页面的布局，并允许他们快速浏览页面内容。

避免使用无意义的div，而应该根据文档结构，使用html5的结构化编码。

Headings

标题为内容提供了结构。它们帮助用户了解网站上的可用内容，并显示内容之间的关系。对于许多有障碍的用户来说，标题对理解数字资产中预期的用户体验至关重要，并且对于在网站或应用程序中轻松导航是必不可少的。

清晰的文档结构对每个人都有益：

• 盲人或视力低下的人 理解和找到主要内容部分。
• 使用屏幕阅读器的人 快速浏览不同的内容部分。
• 认知障碍者 理解内容部分之间的关系。
• 你！ 标题有助于搜索引擎优化（SEO）。标题为你的内容提供了清晰的结构。如果你的内容结构清晰，你在 Google 上获得良好排名的机会就会更高。

那么，创建有意义的标题结构的五个主要规则是什么呢？

请选择下面的每一项以展开内容并了解更多信息：

1. 标题应用于组织内容（h1、h2、h3、…h6）。
   这意味着 <h2> 下的内容应该属于 <h1> 的内容，<h3> 下的内容应该属于 <h2> 的内容，依此类推。

2. 每个网页中应仅包含一个 H1（标题 1）。

3. 标题应按正确的顺序排列。
   当你使用 <h1> 时，下一个标题应为 <h2>，而下一个标题不应跳过到 <h4>。

4. 避免使用隐式标题（CSS）。
   不要通过将标题样式设置为更大和更粗来进行样式处理，而应通过 HTML 标题元素为标题赋予语义结构。不是说不能给h1标签设置样式，而是不能将其它标签放大加粗来当作标题。

5. 标题应该是唯一的。

Links versus buttons

由于其在用户界面中的功能，链接和按钮可能难以区分。开发者甚至可能通过使用 CSS 将链接看起来像按钮，反之亦然。在我们继续讨论接下来的两个元素并探讨如何使它们更具可访问性之前，先来明确链接和按钮之间的区别。

主要区别在于：链接将用户带到某个目的地，而按钮则用于执行 UI 中的操作。

例如，链接用于将用户重定向到其他位置，以了解更多信息或访问相关内容。它们可以让用户导航到不同的网页、文档、电子邮件地址，甚至同一数字资源或文档内的其他位置。而按钮则用于提交表单、退出用户流程或取消交易。

无论你决定如何呈现用户界面元素，都可以根据上述原则来确定应该定义为链接还是按钮。

正确定义按钮和标签至关重要，因为如果没有为元素分配正确的属性，使用辅助技术的用户将无法知道该元素预期的行为是什么。

在第一个元素中，“Explore more stays”控件将用户带到预订页面。视觉上，它显示为紫色且带下划线的“Explore more stays”文本，因此看起来像一个链接。在代码中，开发者使用了 href 属性，正确地将该元素定义为 HTML 中的链接。

第二个元素与第一个功能相同，也名为“Explore more stays”，但视觉上它呈现为一个按钮。然而，功能上，开发者同样使用了 href 属性，将其正确定义为一个链接。

第三个元素是“Add to Bag”控件，激活时会通过打开对话框来改变用户界面。功能上，这是一个按钮，开发者使用 button 属性正确地将其定义为按钮。

在上述每个场景中，用户都能在与元素交互时清楚地知道预期的行为。

Link and button labels

让链接和按钮具备可访问性的另一个重要因素是标签。标签帮助用户识别各种用户界面元素，使他们能够理解每个元素的功能并执行所需的操作。清晰、具有描述性的标签将有助于用户顺利地与数字体验进行互动。

在接下来的几个部分中，我们将探讨如何为链接和按钮设置标签，使它们更具可访问性。

Links

链接是网站中常见的元素，通常通过颜色差异、下划线或光标变化来向用户显示。然而，为了让所有用户轻松识别和使用链接元素，你必须确保：

• 链接文本简短精炼。
• 链接文本在上下文中都具有意义。
• 图像链接有有意义的替代文本（alt 文本）。

链接文本简洁且在上下文中有意义非常重要，因为它帮助使用辅助技术的用户快速浏览网站，用户可以通过页面上的链接列表快速导航。这有效减少页面的冗余，并为辅助技术用户提供高效的网页导航方式。

不清晰的链接文本示例

在上下文之外，上述示例中的链接文本并不具备实际意义。

无障碍链接文本示例

注意：你应该与内容设计师和设计团队合作，以确保链接文本清晰且具有意义。

Button

与链接一样，按钮也需要具有信息丰富的标签文本，以确保可访问性。

考虑一个拥有多个“添加到购物车”按钮的网站，针对不同的商品。对于视觉障碍用户（如盲人或视力低下者），由于这些按钮使用相同的信息文本，一次又一次地通过辅助技术向他们重复，他们将无法轻松区分不同的按钮。

为按钮添加 aria-label 属性可以在不改变视觉界面的情况下提供按钮的确切上下文。

添加 aria-label 会替换按钮的可访问名称。使用辅助技术访问该数字资产的用户在导航到该按钮时会听到“将 Diet Coke 添加到购物车，按钮”。这是 ARIA 的最佳用例之一。

Images

在构建用户界面时，设计师和开发者可能会选择使用两种类型的图像：有意义的图像和装饰性图像。装饰性图像是出于样式考虑，可能使你的网站看起来更美观；而有意义的图像则是理解数字平台或页面完整体验所必需的。

ALT 文本为需要理解传达信息或含义的图像的任何人提供了文字等价物。因此，通过 alt 属性为图像提供替代文本是非常重要的，包括将装饰性图像标识为此类图像的 ALT 文本。

没有 ALT 文本，视力障碍用户将无法了解有意义的图像对内容的贡献。这就像一个没有意义的占位符。

<img src="IMG-02412.jpg" alt="Horseshoe Bend on the Colorado River with gorgeous mountain views and colorful riverbed." />

通过 alt 属性提供有意义的 ALT 文本，即使文本是装饰性的且需要被辅助技术跳过，也能帮助用户接收和理解图像的目的，并理解图像传达的任何信息。

我们可以使用 ALT 文本决策树来确定图像的目的。这将帮助你为图像选择合适的 ALT 文本。

SVG images

可缩放矢量图形（SVG）是一种基于 XML 的标记语言，用于描述二维矢量图形。SVG 没有类似于 <img> 标签中的 “alt” 属性，因此需要采用不同的方式来向残障用户传达信息。

最低限度的属性

也是必须存在的属性，这些属性为 SVG 提供可访问名称，并将 SVG 标识为图像。

1. 在 <svg> 元素内嵌套添加 <title> 属性。
2. 为 <title> 属性添加 ID。
3. 添加 role="img"。
4. 使用 aria-labelledby 引用 SVG 中 <title> 的 ID。

可选属性

这些属性提供关于图像的额外有用信息。

1. 添加带有 ID 的 <desc> 元素。
2. 使用 aria-describedby 引用 <desc> 中的 ID。

<svg role="img" aria-labelledby="svgTitle svgDesc" xmlns="http://www.w3.org/2000/svg" width="100" height="100"><title id="svgTitle">示例图像</title><desc id="svgDesc">这是一个示例的可缩放矢量图形，展示了一个简单的图标。</desc><circle cx="50" cy="50" r="40" fill="blue" />
</svg>

装饰性 SVG

这些属性用于隐藏 SVG，并防止焦点进入 SVG 内部。

1. 添加 aria-hidden="true"。
2. 添加 focusable="false"。

<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="lightgray" />
</svg>

Keyboards

键盘可访问性是网络可访问性中最重要的方面之一。

对于行动能力或灵活性较低的人来说，他们无法有效使用鼠标，依赖键盘进行导航。盲人用户通常使用键盘进行导航，并结合其他工具。
经过修改的键盘和其他辅助技术模拟键盘的功能。

操作	按键组合
移动焦点到下一个可聚焦元素	Tab
移动焦点到上一个可聚焦元素	Shift + Tab
激活链接	Enter
激活按钮	Enter 或 Spacebar
勾选或取消勾选复选框	Spacebar
改变单选按钮的选择	上/下箭头键
打开下拉菜单	Spacebar
在下拉菜单中导航选项	上/下箭头键
关闭模态窗口	Esc

可视焦点指示器 Visual focus indicators

焦点指示器帮助指示用户当前所处或正在与之互动的交互控件。虽然浏览器默认生成焦点指示器，但我们可以通过设计自定义的焦点指示器为客户提供更好的体验。根据 WCAG 2.1，定制的焦点指示器应与背景的对比度至少达到 3:1。

:focus-visible 是一个 CSS 伪类选择器，允许您在用户使用 Tab 键在交互元素之间移动时对焦点进行样式化。

/* Focusing the button with a keyboard will show a dashed black */
button:focus-visible {outline: 4px dashed black;
}/*Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {outline: none;box-shadow: 1px 1px 5px rgba(1,1,0,.7);
}

Keyboard focus

在高层次上，键盘焦点指的是接收键盘输入的交互元素。换句话说，如果一个交互元素可以接收键盘输入，那么它就具有键盘焦点。
当通过键盘使用 Tab 键在这些元素之间切换时，这些元素获得焦点的顺序被称为键盘焦点顺序。

有几个键盘焦点的最佳实践需要遵循，以提高键盘焦点的可访问性。

您的键盘焦点需要具有以下特性：

• 有意义：确保焦点指示器能有效地传达当前交互元素的状态。
• 目的明确：每个获得焦点的元素都应有其特定的功能和目的，用户能够清楚地理解其作用。
• 直观：焦点顺序应符合用户的期望，使用户能够轻松地通过 Tab 键导航。
• 可控：用户应能够控制焦点的移动，避免出现意外或混淆的导航体验。

Tabindex

tabindex 属性有三种不同的用法：

• 使用 tabindex="0" 使元素可以被 Tab 键选中并获得焦点。
• 使用 tabindex="-1" 使元素可以通过 JavaScript 获取焦点或将元素从 Tab 顺序中移除。
• 使用 tabindex="1"（或任何大于 1 的数字）定义显式的 Tab 或键盘导航顺序。应避免使用正值 tabindex，因为它们难以准确维护。