介绍
- 1分钟
ASP.NET 开发人员需要了解几个概念、语法和元素，以使各种能力的人都可以访问他们的网页。通过遵循本模块中的原则，您可以提高 Web 应用程序的可访问性。
示例场景
假设您的团队受雇使用 ASP.NET Core 为一家披萨餐厅构建 Web 应用程序。一位图形设计师已经创建了规范，一位同事实现了基本功能。客户要求您检查该网站以确保其可供广泛访问。
我们将做什么？
在本模块中，您首先创建一个新的 ASP.NET Core Web 应用程序并观察影响其可访问性的问题。您可以安装工具来诊断辅助功能问题，然后修复表单和视觉辅助功能的问题。最后，您使用屏幕阅读器来了解辅助功能问题如何影响屏幕阅读器体验。然后，您进一步改进您的应用程序以允许基于屏幕阅读器的导航。
主要目标是什么？
在本课程结束时，您将能够诊断并修复 ASP.NET Core Web 应用中的可访问性问题。您还将学习如何避免常见错误，以便您可以设计和构建具有可访问性的 Web 应用程序。
辅助功能和屏幕阅读器
- 2分钟
网络是一个奇妙的地方，最好每个人都可以参与。构建可访问的 Web 应用程序的第一步是对用户与这些应用程序交互的多种方式有基本的了解。
包容性设计的重要性
当您开发 Web 应用程序时，很容易进入编写一些代码、在浏览器中测试代码、修复错误、重复、重复、重复的工作流程。不幸的是，这种方法导致网络应用程序并不适合所有人。
有充分的理由考虑网络应用程序的可访问性：
- 您的大量潜在用户可能有一种或多种缺陷，需要他们以不同的方式与网络应用程序进行交互。提高可访问性会增加您的潜在用户群。
- Web 应用程序现在受到许多法律要求的约束，以符合 Web 可访问性标准。未能将可访问性纳入您的开发方法可能会导致法律和经济处罚。
- 无障碍是一项人权。帮助他人充分访问互联网是合乎道德的事情。
我们的浏览方式并不相同
Web 开发人员通常关注基于浏览器的传统交互，但许多用户以不同的方式访问应用程序。
屏幕阅读器
最著名的辅助工具之一是屏幕阅读器。屏幕阅读器是视力障碍人士常用的客户端。它们内置于大多数操作系统中。
最基本的是，屏幕阅读器从上到下以声音方式阅读页面。如果您的页面全是文本，则阅读器会以与浏览器类似的方式传达信息。网页很少是纯文本的；它们包含链接、图形、颜色和其他视觉组件。必须小心确保屏幕阅读器可以正确读取此信息。
视力障碍
视觉能力是一个谱系。一些用户需要或者更喜欢听觉体验。许多人更喜欢视觉体验，但可能会遇到小文本或对比度问题。
输入设备
开发人员通常会考虑 Web 应用程序中的键盘、鼠标和移动触摸屏交互。然而，这些设备只是用户与计算机和网络应用程序交互的一些方式。其他模式包括人体工程学键盘、和弦键盘、语音交互、眼球追踪和头部追踪。
网络是一个可访问的平台
所有这些信息可能看起来有点令人畏惧。幸运的是，HTML 和 Web 标准是为可访问性而设计的。在许多情况下，当您遵循 Web 标准时，您的 Web 应用程序可以在各种辅助功能场景中“正常工作”或需要进行少量修改。
ASP.NET Core 模板是使用 Bootstrap 构建的，其设计时考虑到了可访问性。它考虑响应式设计、结构标记和颜色对比。尽管它不是自动可访问性，但它可以帮助您入门。
Web 的可访问性见解简介
在本模块中，您将使用名为 Accessibility Insights for Web 的浏览器扩展来查找并修复 Web 应用程序和网站中的辅助功能问题。
练习 - 创建示例应用程序
- 5分钟
让我们通过创建一个新项目并指定一些用于输入项目名称的用户界面来开始实现应用程序的设计。
创建解决方案
.NET CLI 是创建 ASP.NET Core Web API 的最简单方法。当您安装 .NET SDK 时，CLI 已预安装。
在本单元中，您将使用 .NET CLI 在本地创建 Web API。您还可以了解最终的项目。
创建并探索 Web API 项目
为了设置 .NET 项目以使用 Web API，我们使用 Visual Studio Code。Visual Studio Code 包含一个集成终端，可以轻松创建新项目。如果您不想使用其他代码编辑器，可以使用终端来运行此模块中的命令。
-
在 Visual Studio Code 中，选择“文件” > “打开文件夹”。
-
在您选择的位置创建一个名为AccessibleWeb的文件夹，然后选择“选择文件夹”。
-
从主菜单中选择“视图” > “终端”，在 Visual Studio Code 中打开集成终端。
-
在终端窗口中，复制并粘贴以下命令：
.NET CLI复制dotnet new webapp此命令创建基本 Web API 项目的文件。这些文件包括一个名为AccessibleWeb.csproj的 C# 项目文件，其中包含一些入门页面。
您可能会收到 Visual Studio Code 的提示，要求添加资产以调试项目。在对话框中选择是。
您现在应该可以访问这些文件。
重击复制-| obj -| Pages -| Shared -| _ViewImports.cshtml -| _ViewStart.cshtml -| Error.cshtml -| Error.cshtml.cs -| Index.cshtml -| Index.cshtml.cs -| Privacy.cshtml -| Privacy.cshtml.cs -| Properties -| appsettings.Development.json -| appsettings.json -| ContosoPizza.csproj -| Program.cs -| Startup.cs
创建数据输入表单
-
打开Index.cshtml。
-
将页面内容替换为以下标记。
剃刀复制@page @model IndexModel @{ ViewData["Title"] = "Home page"; } <div class="text-center"> <h1 class="display-4">Welcome</h1> <p>We hope you like pizza. That's what we make here.</p> </div> <style> div.button { width: 200px; height: 50px; border-radius: 20px; background-color: lightgray; text-align: center; padding: 10px; margin: 50px; } </style> <h1 class="display-6">Join our mailing list</h1> <p>Sign up to hear about all our special offers!</p> <form name="CustomerInfo"> <div class="container w-50 p-3"> <div class="row"> <div class="col-4 text-primary"> First Name </div> <div class="col-8"> <input type="text" id="Name"> </div> </div> <div class="row"> <div class="col-4 text-primary"> Last Name </div> <div class="col-8"> <input type="text" id="Name"> </div> </div> <div class="row text-black-50"> <div class="col-4"> Phone </div> <div class="col-8"> <input type="text" id="Phone"> </div> </div> <div class="row text-black-50"> <div class="col-4"> Birthday </div> <div class="col-8"> <input type="text" id="Birthday"> </div> </div> <div class="row text-primary"> <div class="col-4"> Email Address </div> <div class="col-8"> <input type="text" id="Email"> </div> </div> <div class="button"> <a href="#" onclick="document.getElementById('CustomerInfo').Submit();"> Submit Form </a> </div> </div> </form> <p style="font-size: 30px"><b>All about our wonderful pizza!</b></p> <p class="bg-light text-muted">We make it fresh every day, sometimes up to two or three times a day!<br><br> We love to make pizza! </p> <div class="text-center"> <img width="120" src="data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.226 112L36.2.2c60 16 74 49 81 84z' fill='%23ea8'/%3e%3cpath d='M.197 112L31 14C84 29 96 57 103 88z' fill='%23fea' /%3e%3c/svg%3e"> </div> <p style="font-size: 30px"><b>We take your privacy seriously!</b></p> <p class="bg-light text-muted">Unlike other pizza restaurants that share your pizza preferences, we care about your privacy.<br><br> Want to know more? <a href="/Privacy">Click here.</a> </p> <p style="font-size: 30px"><b>Delivery options</b></p> <p class="bg-light text-muted">There are a few ways we can get the pizza to you:<br> - Postal mail<br> - Dog sled<br> - Drone (experimental!) </p>
运行应用程序
<form>
<input type="text" id="name" required>
<input type="date" id="birthday">
<input type="submit">
</form>
您现在可能已经掌握了该模式：使用内置的 HTML 表单行为而不是连接自定义 JavaScript 和 UI 可以使您的表单在各种浏览体验中更可用。
Web 的可访问性见解
Accessibility Insights for Web是 Google Chrome 和 Microsoft Edge 的扩展。我们将在以下练习中使用它来识别和修复示例应用程序中的可访问性问题。
该扩展支持以下主要工具：
现在您已经了解了基础知识，您可以在下一个练习中修复披萨网站了。
所以现在您可以编写更少的代码并且更易于访问。这是双赢的！
Tab 键顺序
使用键盘或屏幕阅读器浏览表单的用户依赖 Tab 键顺序。除非您有复杂的表单设计或尝试做一些过于花哨的事情，否则它会起作用。对于大多数表单来说，很难弄乱 Tab 键顺序。然而，这是一个需要测试的重要功能。
您可以通过选择键盘上的 Tab 键并检查交互来测试 Tab 键顺序。然而，正如我们在下一个练习中看到的，Accessibility Insights for Web 可以使此测试变得更加容易。
表格提交
当用户填写完表单并准备提交时，没有什么比过于复杂的过程更令人沮丧的了。支持表单提交的最佳方式是一个简单的<input type="submit">元素：
练习 - 修复表单可访问性问题
在本练习中，您将使用 Accessibility Insights for Web 来识别和修复表单中的辅助功能问题。
安装 Web 浏览器扩展的 Accessibility Insights
转到Google Chrome 或 Microsoft Edge 中的 Web页面的辅助功能见解。 选择与您的浏览器相对应的安装按钮。 当扩展页面出现时，选择适合您的浏览器的按钮（对于 Microsoft Edge， 选择“获取” ；对于 Chrome ，选择“添加到 Chrome ”）来安装扩展。使用 FastPass 检查表单
在本练习中，您将使用 FastPass 工具。在 FastPass 中，您可以运行三个测试，在不到五分钟的时间内找到最常见的可访问性问题。
通过在浏览器中选择扩展程序的工具栏按钮，打开Accessibility Insights for Web 的启动板。您还可以使用键盘快捷键 Ctrl+Shift+K（对于 macOS，为 ⌘+Shift+K）。
选择快速通行证链接。第二个窗口将打开并列出 FastPass 在自动检查中检测到的可访问性问题。
自动检查发现了许多错误。在本练习中，我们将重点关注表单。
有两种与错误消息交互的方法。您可以使用 FastPass 工具中的列表，也可以选择网页上的错误消息。在这种情况下，FastPass 工具会列出整个页面的错误，当您想要专注于表单时，这可能会有点让人不知所措。现在让我们使用页内错误消息。
选择名字标签右侧的感叹号。
UI 显示该标签对比度较低。它还提醒您注意，您正在使用颜色编码来指示此表单中的必填字段。
通过选择其他标签的错误图标，您可以看到它们的对比度都很低。让我们查看表单的名字部分的 HTML，以了解颜色对比度问题。
<div class="row">
<div class="col-4 text-primary">
First Name
</div>
<div class="col-8">
<input type="text" id="Name">
</div>
</div>
在这里，您可以看到名字标签使用 Bootstraptext-primary类来显示浅蓝色文本颜色，表示必填字段。删除该类并向标签text-primary添加一个required属性<input>，如下所示。
<div class="row">
<div class="col-4">
First Name
</div>
<div class="col-8">
<input type="text" id="Name" required>
</div>
</div>
再次运行该应用程序，然后像以前一样运行 FastPass。您可以看到名字标签的错误现已清除。
伟大的！现在您知道了修复方法，您可以对其余标签执行相同的操作。
查看表单其余部分的 HTML。您可以看到标签使用text-primary或 来text-black-50表示颜色。删除这些属性，并将required属性添加到姓氏和电子邮件地址输入字段。
<form name="CustomerInfo">
<div class="container w-50 p-3">
<div class="row">
<div class="col-4">
First Name
</div>
<div class="col-8">
<input type="text" id="Name" required>
</div>
</div>
<div class="row">
<div class="col-4">
Last Name
</div>
<div class="col-8">
<input type="text" id="Name" required>
</div>
</div>
<div class="row">
<div class="col-4">
Phone
</div>
<div class="col-8">
<input type="text" id="Phone">
</div>
</div>
<div class="row">
<div class="col-4">
Birthday
</div>
<div class="col-8">
<input type="text" id="Birthday">
</div>
</div>
<div class="row">
<div class="col-4">
Email Address
</div>
<div class="col-8">
<input type="text" id="Email" required>
</div>
</div>
<div class="button">
<a href="#" onclick="document.getElementById('CustomerInfo').Submit();">
Submit Form
</a>
</div>
</div>
</form>
运行应用程序并再次查看 FastPass。您可以看到所有标签错误消息现已清除。
这不是严格要求的，但您可以继续显示必填字段的指示。更新<style>页面顶部附近的块以包含必填字段和可选字段的规则。
input:optional {
border-color: #ccc;
}
input:required {
border-color: mediumblue;
}
现在必填字段周围有蓝色边框。
您现在已准备好修复表单元素。选择名字字段的错误指示显示存在两个错误。第一个错误表明表单的<input>标记没有唯一属性。该属性值是一个问题，因为 HTML ID 始终被假定为唯一，而辅助技术通常仅作用于第一个元素。
在源代码中，您可以看到您用作名字和姓氏Name字段的 ID 。
<div class="col-8">
<input type="text" id="Name" required>
</div>
</div>
<div class="row">
<div class="col-4">
Last Name
</div>
<div class="col-8">
<input type="text" id="Name" required>
</div>
</div>
将 ID分别更改为FirstName和。LastName
<div class="col-8">
<input type="text" id="FirstName" required>
</div>
</div>
<div class="row">
<div class="col-4">
Last Name
</div>
<div class="col-8">
<input type="text" id="LastName" required>
</div>
</div>
运行应用程序并再次检查 FastPass。为每个输入字段选择错误指示表明您现在已经很接近了。每个输入字段都有相同的错误消息，表明它需要标签。
更新名字文本以使用<label>标签。
<div class="row">
<div class="col-4">
<label for="FirstName">First Name</label>
</div>
<div class="col-8">
<input type="text" id="FirstName" required>
</div>
</div>
运行应用程序并再次检查 FastPass。你应该看到两件事。首先，元素的错误消息FirstName现已清除。其次，选择“名字”标签现在会选择“名字”输入。
将<label>标签添加到其他表单输入字段。您的表单代码现在应该如下所示。
<form name="CustomerInfo">
<div class="container w-50 p-3">
<div class="row">
<div class="col-4">
<label for="FirstName">First Name</label>
</div>
<div class="col-8">
<input type="text" id="FirstName" required>
</div>
</div>
<div class="row">
<div class="col-4">
<label for="LastName">Last Name</label>
</div>
<div class="col-8">
<input type="text" id="LastName" required>
</div>
</div>
<div class="row">
<div class="col-4">
<label for="Phone">Phone</label>
</div>
<div class="col-8">
<input type="text" id="Phone">
</div>
</div>
<div class="row">
<div class="col-4">
<label for="Birthday">Birthday</label>
</div>
<div class="col-8">
<input type="text" id="Birthday">
</div>
</div>
<div class="row">
<div class="col-4">
<label for="Email">Email Address</label>
</div>
<div class="col-8">
<input type="text" id="Email" required>
</div>
</div>
<div class="button">
<a href="#" onclick="document.getElementById('CustomerInfo').Submit();">
Submit Form
</a>
</div>
</div>
</form>
此代码清除所有表单字段错误！
现在是时候修复“提交”按钮了。这里的问题是对比度低（如错误消息中所示）和onclick运行自定义 JavaScript 的事件。您可以通过用标准类替换按钮来修复这两个问题<input type="submit">。
找到这个代码。
<div class="button">
<a href="#" onclick="document.getElementById('CustomerInfo').Submit();">
Submit Form
</a>
</div>
将其替换为此代码。
<div class="text-center">
<input class="btn btn-primary" type="submit">
</div>
您已完成所有必需的修复，但您还可以进行一项快速改进。您可以将输入类型从text可用的情况更改为更具体的类型。
将“电话”字段type的属性更改为。tel
将生日字段type的属性更改为。date
将电子邮件字段type的属性更改为。表单的完整代码现在应如下所示。email
<form name="CustomerInfo">
<div class="container w-50 p-3">
<div class="row">
<div class="col-4">
<label for="FirstName">First Name</label>
</div>
<div class="col-8">
<input type="text" id="FirstName" required>
</div>
</div>
<div class="row">
<div class="col-4">
<label for="LastName">Last Name</label>
</div>
<div class="col-8">
<input type="text" id="LastName" required>
</div>
</div>
<div class="row">
<div class="col-4">
<label for="Phone">Phone</label>
</div>
<div class="col-8">
<input type="tel" id="Phone">
</div>
</div>
<div class="row">
<div class="col-4">
<label for="Birthday">Birthday</label>
</div>
<div class="col-8">
<input type="date" id="Birthday">
</div>
</div>
<div class="row">
<div class="col-4">
<label for="Email">Email Address</label>
</div>
<div class="col-8">
<input type="email" id="Email" required>
</div>
</div>
<div class="text-center">
<input class="btn btn-primary" type="submit">
</div>
</div>
</form>
运行应用程序并选中 FastPass。您可以看到，您在修复可访问性问题的同时改善了所有用户的体验。新表格在 FastPass 中没有显示任何错误。它包括浏览器本机输入控件，无需其他代码即可进行验证和必填字段检查。
查找并修复常见的视觉辅助功能错误
您的用户具有各种视觉能力。色盲者可能无法区分颜色，或者可能难以处理彼此相似的颜色。其他用户可能会使用缩放来放大内容。适应各种视觉能力是可访问性的重要组成部分。
对比
确保足够的对比度使每个人都可以更轻松地阅读文本内容、解释图形元素、识别 UI 组件并注意到这些组件何时更改状态。视力不佳的人通常难以阅读文本、识别与背景没有对比的按钮或确定 UI 组件的状态。如果一个人患有色觉缺陷，进一步降低感知对比度，那么问题可能会加剧。
幸运的是，可以通过编程方式检查对比度。您可以使用 Accessibility Insights for Web 中的 FastPass 工具来执行对比度检查。
颜色
颜色是网页设计的重要组成部分，但请记住，每个人对颜色的看法都略有不同。对于某些人来说，它会导致色盲。大约十二分之一的男性是色盲。色盲有几种不同的类型，例如红绿色盲和蓝黄色盲。
此外，您的用户可能会使用颜色来最大程度地减少眼睛疲劳，使用颜色保真度较差的显示器，或者在使颜色感知变得困难的照明下工作。
在上一个练习中，您了解到应该设计 Web 应用程序，以便它们不需要色觉。
除了 FastPass 自动化测试之外，您还可以检查您的网站对不同色盲程度的人的显示效果。使用Windows和macOS内置的滤色器。
飞涨
您的网站在巨大的 4K 显示器上看起来很漂亮...但这并不意味着您的所有用户都会以同样的方式体验它。有些用户可能会放大至 200% 才能阅读文本，有些用户可能会在移动设备上阅读。
网络浏览器擅长缩放文本。Bootstrap 旨在促进根据屏幕尺寸进行缩放的响应式设计。对您而言，重要的是要使事情尽可能简单，按照设计的方式使用网络，并在不同的显示器和不同的缩放级别上测试您的网站。
在下一个练习中，您将查找并修复披萨餐厅网站上的视觉可访问性问题。
练习 - 修复视觉可访问性问题
完全的
100 经验值
5分钟
在上一个练习中，您在示例网页的表单元素中使用了辅助功能错误指示器。在本练习中，您将使用 Accessibility Insights for Web 来查找并修复视觉辅助功能问题。
运行该应用程序，然后运行 FastPass。您应该会看到检测到三个颜色对比度问题。
展开第一期以显示更多详细信息。
这是重要的部分：
“元素的颜色对比度不足 4.44（前景色：#6c757d，背景色：#f8f9fa，字体大小：12.0pt (16px)，字体粗细：正常）。预期对比度为 4.5:1”
此信息告诉您，辅助功能标准建议的对比度为 4.5:1，但灰色text-muted背景（来自class bg-light）上的灰色文本（使用 class ）仅为 4.44:1。
如果您查看其他对比度错误，您会发现它们都有相同的问题。
您有两个简单的选择：消除灰色背景或使用标准黑色文本。与设计师快速交谈后，您决定在灰色背景上使用黑色文本。
编辑 HTML 并text-muted从三个bg-light段落中删除该类。表单下方生成的 HTML 应类似于以下示例。
超文本标记语言
复制
<p style="font-size: 30px"><b>All about our wonderful pizza!</b></p>
<p class="bg-light">We make it fresh every day, sometimes up to three times a day!<br><br>
We love to make pizza!
</p>
<div class="text-center">
<img width="120" src="data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.226 112L36.2.2c60 16 74 49 81 84z' fill='%23ea8'/%3e%3cpath d='M.197 112L31 14C84 29 96 57 103 88z' fill='%23fea' /%3e%3c/svg%3e">
</div>
<p style="font-size: 30px"><b>We take your privacy seriously!</b></p>
<p class="bg-light">Unlike other pizza restaurants that share your pizza preferences, we care about your privacy.<br><br>
Want to know more? <a href="/Privacy">Click here.</a>
</p>
<p style="font-size: 30px"><b>Delivery options</b></p>
<p class="bg-light">There are a few ways we can get the pizza to you:<br>
- Postal mail<br>
- Dog sled<br>
- Drone (experimental!)
</p>
再次运行应用程序和 FastPass 以验证颜色对比度问题是否已解决。
笔记
如果“单击此处”链接文本仍然存在单一颜色对比度问题，您可以忽略它。该问题与该模块无关。
在下一个单元中，我们将研究如何让屏幕阅读器可以访问内容。
查找并修复屏幕阅读器辅助功能问题
如果图像是内容的重要组成部分，则alt属性应包含简短的描述。想象一下您正在通过电话向某人描述该网页 - 您会说什么？
<img src="/img/mozzarella.png" alt="A close-up picture of a fresh baked mozzarella pizza">
如果图像纯粹是装饰性的，只需包含一个空的描述，如下所示：
<img src="/img/divider.png" alt="">所有这些项目通常可以设置与<div>元素相同的样式，因此您只需替换标签即可。默认的 ASP.NET Core 布局页面（位于/Pages/Shared/_Layout.cshtml中）使用其中许多元素，包括header、nav、main和footer。
标题元素
HTML <h1>-<h6>元素显示内容的标题。<h1>是最高级别，为页面标题保留，并且每页只能使用一次。之后的级别<h1>按重要性顺序嵌套。
想象一下我们网站上的一个页面，其中包含有关披萨配料的详细信息。您可以使用以下标题：
- Margherita Pizza Ingredients (h1)
- Dough (h2)
- Flour (h3)
- Yeast (h3)
- Salt (h3)
- Sugar (h3)
- Sauce (h2)
- Toppings (h2)
- Mozzarella (h3)
- Basil (h3)
- etc.
正如我们在下一个练习中看到的，一个常见的错误是使用文本样式来表示标题，而不是使用实际的标题元素。屏幕阅读器看不到这些伪标题。您需要使用实际的标题元素为屏幕阅读器提供导航。
Tab 键顺序
许多用户使用键盘并依赖 Tab 键顺序浏览应用程序。幸运的是，意外破坏 HTML 页面上的 Tab 键顺序是很困难的（尽管并非不可能）。不过，您应该使用 FastPass 检查 Tab 键顺序。练习仅使用键盘浏览应用程序以了解用户体验。
图像和替代文本
我们以几种不同的方式在网页上使用图像。有些对内容很重要，而另一些则是装饰性的。为了向屏幕阅读器提供此信息，所有图像都应包含一个alt属性。
我们在“辅助功能和屏幕阅读器”单元中简要讨论了屏幕阅读器。屏幕阅读器顾名思义：它为您朗读屏幕内容。此外，它还提供声音提示、上下文和控制，以便在 Web 应用程序和复杂内容中移动并与之交互。
屏幕阅读器选项
在 Windows 上，默认情况下包含“讲述人” 。JAWS和NVDA（非可视桌面访问）也可以安装在 Windows 上。在 macOS 和 iOS 上，默认安装VoiceOver 。
在下一个练习中，您将启用操作系统提供的屏幕阅读器并使用它与披萨网站进行交互。
为屏幕阅读器创建可访问的内容
现代 Web 应用程序并不是充满文本的简单页面。它们至少还包括导航、标题和图像。其中许多包括交互式表单、注册和登录、搜索功能、结构化数据表等等。
如果内容结构正确，屏幕阅读器可以帮助用户与复杂内容进行交互。创建正确的结构需要遵守网络标准，而不仅仅是让内容在浏览器中看起来不错。
页面结构
当您进行视觉设计时，很容易<div>在任何地方使用。可以通过 CSS 将元素<div>设置为任何样式，Bootstrap 当然不会阻止<div>随意使用元素。
但是，只要有可能，您就可以通过使用结构性 HTML 元素来向屏幕阅读器提供更多语义信息和上下文。结构性 HTML 元素包括：
<header>：您通常在页面顶部看到的内容，包括徽标、导航、搜索和登录。
<nav>：表示带有导航链接的页面部分。
<main>：顾名思义，该标签表示页面的主要内容。
<article>：带有标题的单独文章，通常显示在列表中。
<aside>：页面上的额外信息，例如侧边栏或标注。
<footer>：页面底部的信息，通常包括版权信息和隐私政策。
<section>：表示不适合前述分组之一的内容块。
练习 - 查找并修复内容以便屏幕阅读器可访问
更改“点击此处”
找到包含无用的“单击此处”文本的行：
Want to know more? <a href="/Privacy">Click here.</a>
将其更改为以下措辞。
View our <a href="/Privacy">privacy policy</a> for more information.
使用屏幕阅读器进行最终验证
通过选择 Windows 徽标键+Ctrl+Enter 打开“讲述人”。 在“讲述人”运行的情况下，切换到披萨网页。 重复选择 Tab 键可在页面上的链接之间移动。这次，您听到的不是“链接：单击此处”，而是“链接：隐私政策”。你修好了！ 选择 1键可列出顶级标题。您应该听到大声朗读“欢迎”。 再次选择 1键。您会听到“讲述人”报告没有剩余的 1 级标题。成功！ 重复选择 2键可循环浏览 2 级标题。叙述者大声朗读它们。 通过选择 Windows 徽标键 + Ctrl + Enter 停止讲述人。修复通过屏幕阅读器测试发现的问题
此页面上还有几个剩余项目需要修复，即标题和神秘的“单击此处”链接。
修复标题
将“加入我们的邮件列表”标题从<h1>降级 至<h2>。只能有一个<h1>，并且页面顶部的“欢迎”文本首先出现。
<h2>Join our mailing list</h2>
查看“关于我们美味的披萨的一切！”的 HTML 标题揭示了阻止“讲述人”找到它的问题：它实际上不是标题！
<p style="font-size: 30px"><b>All about our wonderful pizza!</b></p>
该文本的样式设置为使用粗体文本和大字体，但不使用标题元素。将此标签更改为<h2>.
<h2>All about our wonderful pizza!</h2>
现在您知道要查找什么了，您可以看到页面下方的其他标题中也重复出现了同样的问题。更改“我们认真对待您的隐私！” 标题使用<h2>.
<h2>We take your privacy seriously!</h2>
将“交付选项”标题更改为使用<h2>。
<h2>Delivery options</h2>
- 再次选择 Tab 键。您会听到一个链接大声朗读为“链接：单击此处”。这个叙述不清楚，因为我们无法分辨我们被告知选择哪个链接。
- 通过选择 Windows 徽标键 + Ctrl + Enter 停止讲述人。
我们建议您阅读“讲述人”教程，您可以在“讲述人”设置屏幕上找到该教程。
使用“讲述人”浏览页面
如果尚未运行，请选择 Windows 徽标键 + Ctrl + Enter 打开“讲述人”。 在“讲述人”运行的情况下，切换到披萨网页。您可以选择浏览器或使用 Alt+Tab 来执行此操作。 选择 1键可列出顶级标题。您应该听到大声朗读“欢迎”。 再次选择 1键。您将听到“加入我们的邮件列表”。<h1>这种叙述是不正确的，因为一页上应该只有一个元素。 再次选择
1键。讲述人报告没有更多
<h1>元素。 选择
2键。讲述人报告没有任何
<h2>元素。 选择
3键。讲述人报告没有任何
<h3>元素。显然，页面上的其余标题有问题。 重复选择 Tab 键以在表单和
“提交”按钮之间移动。这很有效，正如您根据之前的制表位验证所期望的那样。
使用屏幕阅读器进行测试
还有一些 FastPass 无法检测到的问题。您可以在评估工具中找到它们，该工具对页面执行完整的可访问性评估。但这超出了本教程的范围。相反，让我们通过使用屏幕阅读器在页面中移动来体验它们。
启用 Windows 屏幕阅读器
“讲述人”是直接内置于 Windows 中的屏幕阅读器，使用户无需鼠标即可完成常见任务。您可以通过以下两种方式之一启用“讲述人”：
选择 Windows 徽标键+Ctrl+Enter 以启动“讲述人”。再次选择这些键可停止讲述人。（在旧版本的 Windows 上，快捷方式是 Windows 徽标键 + Enter。）在许多键盘上，Windows 徽标键位于底行按键上，位于 Alt 键的两侧。
选择 Windows 徽标键+Ctrl+N 打开“讲述人”设置，然后打开“使用讲述人”下的切换开关。
检查制表位
现在所有自动检查都已清除，是时候检查制表位了。在 FastPass 的左侧窗格中选择制表位。
打开FastPass 中的显示选项卡停靠点切换。
切换到 Web 应用程序并开始使用 Tab 键在页面中移动。请注意，导航从页面顶部开始，通过表单和页面链接，到达页脚中的链接。
在尝试使用屏幕阅读器浏览示例网页之前，请查找并修复剩余的辅助功能问题。
修复图像替代文本
运行网站和 FastPass。最后剩下的问题是页面上的一张图像缺少替代文本。
该图像纯粹是装饰性的，因此您只需添加空的alt描述即可。
<img alt="" width="120" src="data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.226 112L36.2.2c60 16 74 49 81 84z' fill='%23ea8'/%3e%3cpath d='M.197 112L31 14C84 29 96 57 103 88z' fill='%23fea' /%3e%3c/svg%3e">
运行应用程序并最后检查一次 FastPass。您应该看到所有自动检查现在都已通过。
概括
寻找更多资源和联系方式
.NET 开发者社区 .NET 直播电视准备好建造一些东西了吗？
使用 Xamarin.Forms 构建移动应用 使用 ASP.NET Core 创建 Web UI 使用 ASP.NET Core 控制器创建 Web API 使用 Blazor 构建 Web 应用寻找更多信息？
C# 文档 .NET 文档通过 .NET 初学者视频系列了解更多信息
C#101 适合初学者的 Blazor在本模块中，您使用了 Web 可访问性的 HTML 标准以及 Web 可访问性见解来查找和修复 ASP.NET Core Web 应用程序中的可访问性问题。
参考
Web 可访问性简介来自 W3C Web 可访问性倡议的资源，旨在使 Web 可访问。
残疾人如何使用网络：关于残疾人（包括有年龄相关障碍的人）如何使用网络的 W3C 资源。
包容性设计：来自 Microsoft 的方法、原则和资源，包括包容性设计工具包。
Accessibility Insights：用于解决可访问性问题的免费开源应用程序。
Accessibility Insights for Web 简介：视频概述如何使用 Accessibility Insights for Web 应用程序来解决可访问性问题。
-
通过在终端窗口中输入以下命令来运行应用程序。
.NET CLI复制dotnet run -
在 Web 浏览器中转至 https://localhost:5001。您应该会看到披萨餐厅网站的主页。该页面乍一看可能看起来不错，但它包含许多限制其可访问性的问题。在以下单元中，您将找到并解决这些问题。
-
使用 Accessibility Insights for Web 查找并修复表单辅助功能问题
200 经验值 - 5分钟
-
用户与 Web 应用程序交互的最重要方式之一是使用表单提交信息。在编写表单时需要考虑几个重要因素，以确保所有用户都可以浏览、填写和提交表单。
基本概念是按照 HTML 的设计方式使用它。标准 HTML 表单元素是为可访问性而构建的，但很容易在不知不觉中使用最新的 JavaScript 库或过于聪明的 CSS 覆盖可访问性功能。
标签
表单上的每个输入标签都应该有一个关联的
<label>标签来识别它。此标记与仅在屏幕上输入元素旁边放置一些文本不同，因为标签以编程方式与输入元素关联。例如，当输入元素具有焦点时，屏幕阅读器会读取标签文本。选择标签会激活输入并使交互变得更容易。它还可以帮助使用触摸屏设备的用户。用户无需在手机上寻找一个小复选框，只需选择标签即可。
以下是带有关联标签的输入文本字段的示例：
超文本标记语言复制<label for="name">Name</label> <input type="text" id="name">验证和错误消息
必填字段
让我们从最简单的情况开始：必填字段。您可以使用
requiredHTML 输入元素上的属性，而不是使用颜色编码或其他自定义 UI 元素来指示这些字段。屏幕阅读器可以处理此属性，任何浏览器上的用户都可以通过使用其平台的标准 UI 来查看所需的字段交互。超文本标记语言复制<input type="text" id="name" required>如果您想为所需元素添加更多视觉设计，可以使用 CSS 伪选择器。提供其他样式很好，但使用该
required属性可以为所有用户提供可访问的指示。以下 CSS 样式将所需文本框的边框颜色设置为红色：CSS复制input:required { border-color: red; }输入类型
HTML 表单元素为常见输入类型提供全面的验证支持。例如，您可以使用以下代码，而不是使用自定义 JavaScript 和 HTML 来显示日期选择器：
超文本标记语言复制<input type="date" id="birthday">此代码为用户的浏览器和操作系统提供本机日期选择器弹出窗口。日期选择器经过了可访问性测试，并为您处理验证。对过去需要自定义正则表达式验证、UI 元素和 JavaScript 的输入类型有广泛的支持：
- 电子邮件
- 日期
- 月
- 星期
- 时间
- 范围
- 网址
- 颜色
-
FastPass是一个轻量级的两步流程，可帮助开发人员在不到五分钟的时间内识别常见的、影响较大的可访问性问题。对于这种情况，该工具：
- 自动检查是否符合大约 50 项辅助功能要求。
- 提供清晰的说明和可视化帮助程序，可以轻松识别与键盘访问相关的关键可访问性问题。这些问题包括缺少制表位、键盘陷阱和不正确的制表符顺序。
-
评估允许任何具有 HTML 技能的人验证 Web 应用程序或网站是否符合 Web 内容可访问性指南 (WCAG) 2.1 AA 级。对于这种情况，该工具：
- 自动检查是否符合大约 50 项辅助功能要求。
- 提供大约 20 个手动测试的分步说明、示例和修复方法指南。许多测试都是辅助的，这意味着该工具可以识别测试实例或提供可视化帮助程序。
-
其他工具可让您快速访问可视化，帮助您识别可访问性问题
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
