4.4 Razor Pages 辅助功能

文档摘要

4.4 Razor Pages 辅助功能第四章：ASP.NET Core Razor Pages 父章节领域 - 4.4 Razor Pages 辅助功能详解在构建现代Web应用程序时，辅助功能 (Accessibility, 通常缩写为 A11y) 不再是可选项，而是至关重要的组成部分。它关乎于让所有用户，包括那些有视觉、听觉、认知、运动或语言障碍的用户，都能够平等地访问和使用Web内容。ASP.NET Core Razor Pages 作为构建Web UI的强大框架，提供了丰富的工具和特性来帮助开发者构建更具包容性和可访问性的应用程序。 1. 辅助功能的重要性与原则为什么辅助功能至关重要？从道德、法律和社会责任的角度出发，阐述Web辅助功能的重要性。

4.4 Razor Pages 辅助功能

第四章：ASP.NET Core Razor Pages 父章节领域 - 4.4 Razor Pages 辅助功能详解

在构建现代Web应用程序时，辅助功能 (Accessibility, 通常缩写为 A11y) 不再是可选项，而是至关重要的组成部分。它关乎于让所有用户，包括那些有视觉、听觉、认知、运动或语言障碍的用户，都能够平等地访问和使用Web内容。ASP.NET Core Razor Pages 作为构建Web UI的强大框架，提供了丰富的工具和特性来帮助开发者构建更具包容性和可访问性的应用程序。

1. 辅助功能的重要性与原则

为什么辅助功能至关重要？ 从道德、法律和社会责任的角度出发，阐述Web辅助功能的重要性。
WCAG (Web Content Accessibility Guidelines) 简介: 介绍Web内容可访问性指南，以及其四个核心原则 (POUR - Perceivable, Operable, Understandable, Robust)。

2. Razor Pages 中的语义化 HTML 结构

语义化 HTML 的概念: 解释语义化 HTML 的含义和优势，以及如何使用 HTML5 语义化标签构建清晰的结构。
Razor Pages 布局与语义化标签: 如何在 Razor Pages 的布局页 (_Layout.cshtml) 和页面中使用 <header>, <nav>, <main>, <article>, <aside>, <footer> 等语义化标签。
标题 (Headings) 的正确使用: 解释标题标签 (<h1> - <h6>) 的层级结构和语义意义，以及如何在 Razor Pages 中正确使用标题来组织内容。
列表 (Lists) 的运用: 展示如何使用有序列表 (<ol>) 和无序列表 (<ul>) 来呈现列表数据，提高内容的可理解性。

3. 键盘可访问性 (Keyboard Accessibility)

Tab 键导航: 确保用户可以使用 Tab 键在页面元素之间进行导航，并遵循逻辑的 Tab 顺序。
焦点指示器 (Focus Indicators): 确保焦点元素有清晰可见的焦点指示器，帮助键盘用户了解当前焦点位置。
tabindex 属性的应用: 解释 tabindex 属性的作用，以及如何在 Razor Pages 中使用 tabindex 来控制元素的 Tab 顺序。
跳过链接 (Skip Links): 实现跳过链接，允许键盘用户快速跳过导航等重复内容，直接访问主要内容区域。

4. ARIA 属性 (Accessible Rich Internet Applications)

ARIA 的作用与应用场景: 介绍 ARIA 的作用，以及何时使用 ARIA 来增强非语义化 HTML 或动态内容的辅助功能。
常用的 ARIA 属性:
- role 属性: 定义元素的角色，例如 role="navigation", role="main", role="alert", role="dialog" 等。
- aria-label 和 aria-labelledby 属性: 为元素提供可访问的名称，尤其适用于没有文本内容的元素或需要提供更详细标签的元素。
- aria-describedby 属性: 为元素提供可访问的描述，链接到页面上其他元素的描述信息。
- aria-live 属性: 指示动态更新区域的内容变化，并通知屏幕阅读器用户。
- aria-expanded 和 aria-controls 属性: 用于可折叠/展开的组件，指示组件的展开状态和控制的区域。
- aria-hidden 属性: 隐藏元素，使其不被辅助技术识别，通常用于装饰性元素。
在 Razor Pages 中使用 ARIA 属性的示例: 展示如何在 Razor Pages 的 HTML 标记中添加 ARIA 属性，以改善动态组件和复杂 UI 的可访问性。

5. 表单辅助功能 (Form Accessibility)

<label> 标签与 for 属性: 正确使用 <label> 标签，并通过 for 属性将其关联到表单控件，提高表单控件的可访问性。
输入类型 (Input Types) 的选择: 选择合适的 HTML5 输入类型 (例如 type="email", type="tel", type="number", type="date")，以提供语义化的输入和内置的验证。
表单验证与错误提示: 实现可访问的表单验证和错误提示机制，确保错误信息清晰易懂，并与相应的表单控件关联。
aria-invalid 属性: 在表单验证失败时，使用 aria-invalid="true" 属性标记无效的表单控件，并提供错误提示信息。
fieldset 和 legend 标签: 使用 <fieldset> 和 <legend> 标签对相关的表单控件进行分组，并提供明确的组标题。

6. 图像与多媒体辅助功能

alt 属性的重要性: 为 <img> 标签添加有意义的 alt 属性，提供图像的文本描述，供屏幕阅读器用户理解图像内容。
装饰性图像与空 alt 属性: 对于纯粹装饰性的图像，使用空的 alt 属性 (alt="")，避免屏幕阅读器读取无意义的信息。
音频和视频的字幕与文字稿: 为音频和视频内容提供字幕 (captions) 和文字稿 (transcripts)，使听力障碍用户和需要文本形式内容的用户能够访问多媒体信息。
<figure> 和 <figcaption> 标签: 使用 <figure> 和 <figcaption> 标签为图像和多媒体内容提供语义化的容器和标题。

7. 颜色对比度 (Color Contrast)

颜色对比度标准: 介绍 WCAG 对颜色对比度的要求，确保文本和背景颜色之间有足够的对比度，使视觉障碍用户能够清晰地阅读内容。
颜色对比度检测工具: 推荐常用的颜色对比度检测工具，例如 WebAIM Contrast Checker, Accessible Colors 等。
在 Razor Pages 中选择可访问的颜色方案: 在 Razor Pages 应用的设计中，选择符合颜色对比度标准的颜色方案。

8. 动态内容与 AJAX 的辅助功能

aria-live 属性的应用: 对于使用 AJAX 动态更新的 Razor Pages 内容区域，使用 aria-live 属性来通知屏幕阅读器用户内容的变化。
焦点管理 (Focus Management): 在动态内容更新或组件加载后，合理地管理焦点，确保键盘用户能够顺利地访问新内容。
无障碍的 JavaScript: 确保 Razor Pages 中使用的 JavaScript 代码不会破坏辅助功能，例如避免使用仅依赖鼠标交互的组件，并使用 ARIA 属性增强动态组件的可访问性。

9. 辅助功能测试与验证

手动测试: 使用键盘导航测试页面的可操作性，使用屏幕阅读器 (例如 NVDA, JAWS, VoiceOver) 测试页面的可访问性。
自动化测试工具: 介绍常用的自动化辅助功能测试工具，例如 WAVE, Axe, Lighthouse 等，帮助检测 Razor Pages 应用中潜在的辅助功能问题。
用户测试: 进行真实用户的辅助功能测试，邀请不同类型的用户 (包括残疾用户) 参与测试，获取真实的反馈和改进建议。

10. Razor Pages 辅助功能代码实践与示例

我们将通过一系列代码示例，演示如何在 Razor Pages 中应用上述辅助功能原则和技术。

1. 辅助功能的重要性与原则

为什么辅助功能至关重要？

道德责任: 每个人都应该有平等地访问信息的权利，Web 辅助功能是保障信息平等的关键。
法律法规: 许多国家和地区都有关于Web辅助功能的法律法规 (例如美国的 ADA, 欧洲的 EN 301 549, 中国的信息无障碍标准等)，不符合辅助功能标准可能会导致法律风险。
社会责任: 构建可访问的网站和应用能够惠及更广泛的用户群体，提升品牌形象和社会责任感。
商业利益: 提高辅助功能可以扩大用户群体，增加潜在客户，并提升用户体验。

WCAG (Web Content Accessibility Guidelines) 简介:

WCAG 是由 W3C (World Wide Web Consortium) 发布的国际公认的 Web 内容可访问性指南，它定义了 Web 内容需要满足的可访问性标准。WCAG 2.1 是目前广泛应用的最新版本，它基于四个核心原则 (POUR):

Perceivable (可感知性): 信息和用户界面组件必须以用户可感知的方式呈现。例如，提供文本替代方案给非文本内容，提供字幕给音频和视频内容。
Operable (可操作性): 用户界面组件和导航必须是可操作的。例如，确保所有功能都可以通过键盘操作，提供足够的时间让用户阅读和使用内容。
Understandable (可理解性): 信息和用户界面的操作必须是可理解的。例如，使用清晰简洁的语言，提供可预测的页面布局和导航。
Robust (健壮性): 内容必须足够健壮，能够被各种用户代理 (包括辅助技术) 可靠地解析。例如，遵循 Web 标准，使用兼容性强的技术。

graph TD A[WCAG Principles] --> B(Perceivable); A --> C(Operable); A --> D(Understandable); A --> E(Robust); B --> B1[Text Alternatives]; B --> B2[Time-based Media]; B --> B3[Adaptable]; B --> B4[Distinguishable]; C --> C1[Keyboard Accessible]; C --> C2[Enough Time]; C --> C3[Seizures and Physical Reactions]; C --> C4[Navigable]; D --> D1[Readable]; D --> D2[Predictable]; D --> D3[Input Assistance]; E --> E1[Compatible];

2. Razor Pages 中的语义化 HTML 结构

语义化 HTML 的概念:

语义化 HTML 是指使用 HTML 标签来赋予内容含义和结构，而不仅仅是描述内容的呈现方式。语义化标签能够清晰地表达内容的结构和意义，有助于浏览器、搜索引擎和辅助技术理解网页内容。

Razor Pages 布局与语义化标签:

在 Razor Pages 中，我们可以在 _Layout.cshtml 布局页和各个页面中使用 HTML5 语义化标签来构建清晰的页面结构。

_Layout.cshtml 示例 (部分):


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MyWebApp</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">MyWebApp</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">隐私</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2023 - MyWebApp - <a asp-area="" asp-page="/Privacy">隐私</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

在这个示例中，我们使用了 <header>, <nav>, <main>, <footer> 等语义化标签来定义页面的头部、导航、主要内容和页脚区域。role="main" 属性用于明确指示 <main> 元素作为页面的主要内容区域。

标题 (Headings) 的正确使用:

标题标签 (<h1> - <h6>) 用于组织页面内容，并为用户和辅助技术提供清晰的结构。<h1> 标签通常用于页面主标题，<h2> - <h6> 用于子标题，形成层级结构。

Index.cshtml 示例 (部分):


@page
@model IndexModel
@{
    ViewData["Title"] = "首页";
}
<main>
    <section>
        <h1>欢迎来到我的网站</h1>
        <p>这里是网站的首页内容，我们将介绍网站的主要功能和服务。</p>
    </section>
    <section>
        <h2>最新文章</h2>
        <ul>
            <li><a href="#">文章标题一</a></li>
            <li><a href="#">文章标题二</a></li>
            <li><a href="#">文章标题三</a></li>
        </ul>
    </section>
    <section>
        <h2>关于我们</h2>
        <p>了解更多关于我们的信息...</p>
    </section>
</main>

在这个示例中，我们使用了 <h1>, <h2> 标签来组织页面内容，清晰地划分了不同的内容区域。

列表 (Lists) 的运用:

使用有序列表 (<ol>) 和无序列表 (<ul>) 来呈现列表数据，可以提高内容的可理解性，并帮助屏幕阅读器用户正确理解列表结构。

示例:


<h2>产品列表</h2>
<ul>
    <li>产品A</li>
    <li>产品B</li>
    <li>产品C</li>
</ul>
<h2>步骤</h2>
<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

3. 键盘可访问性 (Keyboard Accessibility)

Tab 键导航与焦点指示器:

确保用户可以使用 Tab 键在页面元素之间进行导航，并遵循逻辑的 Tab 顺序。浏览器通常会为获得焦点的元素提供默认的焦点指示器 (例如边框或高亮)。

tabindex 属性的应用:

tabindex 属性可以控制元素的 Tab 顺序。

tabindex="0": 元素可以获得焦点，并按照 HTML 结构顺序参与 Tab 导航。
tabindex="-1": 元素可以通过 JavaScript 获得焦点，但不参与 Tab 导航。
tabindex="正整数": 显式指定元素的 Tab 顺序，数字越小，Tab 顺序越靠前 (不推荐使用正整数，容易造成混乱)。

跳过链接 (Skip Links):

跳过链接允许键盘用户快速跳过导航等重复内容，直接访问主要内容区域。跳过链接通常是页面加载时第一个获得焦点的元素，按下 Tab 键即可跳过导航到主要内容区域。

_Layout.cshtml 中添加跳过链接示例:


<body>
    <a href="#main-content" class="skip-link">跳到主要内容</a>
    <header>
        </header>
    <div class="container">
        <main role="main" class="pb-3" id="main-content">
            @RenderBody()
        </main>
    </div>
    <footer>
    </footer>
</body>

CSS 样式隐藏跳过链接，只在获得焦点时显示:


.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background-color: #f0f0f0;
    color: #333;
    padding: 10px;
    z-index: 100;
    transition: top 0.3s ease-in-out;
}
.skip-link:focus {
    top: 0;
}

4. ARIA 属性 (Accessible Rich Internet Applications)

ARIA 的作用与应用场景:

ARIA 属性用于增强非语义化 HTML 或动态内容的辅助功能。当 HTML 标签本身无法充分表达元素的角色、状态或属性时，可以使用 ARIA 属性进行补充说明。

常用 ARIA 属性示例:

role="navigation": 明确指示 <nav> 元素作为导航区域。 (虽然 <nav> 标签本身已具有语义，但显式添加 role="navigation" 可以提高兼容性)。
role="main": 明确指示 <main> 元素作为主要内容区域。
role="alert": 指示重要的、通常是临时的消息，屏幕阅读器会立即朗读。
role="dialog" 和 aria-modal="true": 用于模态对话框，aria-modal="true" 表示对话框是模态的，阻止用户与页面其他部分交互。
aria-label="关闭": 为没有文本内容的按钮 (例如图标按钮) 提供可访问的名称。
aria-labelledby="heading-id": 将元素的标签关联到页面上 ID 为 "heading-id" 的标题元素。
aria-describedby="description-id": 为元素提供描述，链接到页面上 ID 为 "description-id" 的描述元素。
aria-live="polite" 或 aria-live="assertive": 指示动态更新区域的内容变化，polite 表示屏幕阅读器会在空闲时朗读，assertive 表示立即中断当前朗读并朗读更新内容 (慎用 assertive)。
aria-expanded="true" 或 aria-expanded="false": 用于可折叠/展开的组件，指示组件的展开状态。
aria-controls="content-id": 用于可折叠/展开的组件，指示控制展开/折叠的内容区域的 ID。
aria-hidden="true": 隐藏元素，使其不被辅助技术识别，例如隐藏装饰性图标或动画。

Razor Pages 中使用 ARIA 属性的示例:

可折叠/展开组件:


<button aria-expanded="false" aria-controls="details-content">
    展开详情
</button>
<div id="details-content" aria-hidden="true">
    <p>这是详细内容，点击按钮可以展开和折叠。</p>
</div>
<script>
    const button = document.querySelector('button[aria-controls="details-content"]');
    const content = document.getElementById('details-content');
    button.addEventListener('click', () => {
        const expanded = button.getAttribute('aria-expanded') === 'false';
        button.setAttribute('aria-expanded', expanded);
        content.setAttribute('aria-hidden', !expanded);
    });
</script>

在这个示例中，我们使用了 aria-expanded 和 aria-controls 属性来增强按钮和内容区域的可访问性，JavaScript 代码动态更新 aria-expanded 和 aria-hidden 属性以反映组件的展开状态。

5. 表单辅助功能 (Form Accessibility)

<label> 标签与 for 属性:

使用 <label> 标签为表单控件提供标签，并通过 for 属性将其关联到相应的表单控件的 id 属性。

示例:


<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<label for="password">密码:</label>
<input type="password" id="password" name="password">

输入类型 (Input Types) 的选择:

选择合适的 HTML5 输入类型，可以提供语义化的输入和内置的验证。

示例:

<input type="email">: 电子邮件地址输入
<input type="tel">: 电话号码输入
<input type="number">: 数字输入
<input type="date">: 日期选择器

表单验证与错误提示:

实现可访问的表单验证和错误提示机制，确保错误信息清晰易懂，并与相应的表单控件关联。

aria-invalid 属性与错误提示示例:


<label for="email">邮箱:</label>
<input type="email" id="email" name="email" aria-invalid="@(Model.EmailError ? "true" : "false")">
@if (Model.EmailError)
{
    <span id="email-error" class="error-message">请输入有效的邮箱地址</span>
}
<script>
    const emailInput = document.getElementById('email');
    const emailErrorSpan = document.getElementById('email-error');
    emailInput.addEventListener('invalid', () => {
        emailInput.setAttribute('aria-invalid', 'true');
        emailErrorSpan.style.display = 'block'; // 或者其他显示错误信息的方式
    });
    emailInput.addEventListener('input', () => {
        if (emailInput.validity.valid) {
            emailInput.setAttribute('aria-invalid', 'false');
            emailErrorSpan.style.display = 'none'; // 隐藏错误信息
        }
    });
</script>

在这个示例中，我们使用了 aria-invalid 属性来标记无效的输入框，并使用 <span> 标签显示错误提示信息，并通过 JavaScript 代码动态更新 aria-invalid 属性和错误提示信息的显示状态。

fieldset 和 legend 标签:

使用 <fieldset> 和 <legend> 标签对相关的表单控件进行分组，并提供明确的组标题。

示例:


<fieldset>
    <legend>个人信息</legend>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
    <label for="age">年龄:</label>
    <input type="number" id="age" name="age">
</fieldset>

6. 图像与多媒体辅助功能

alt 属性的重要性:

为 <img> 标签添加有意义的 alt 属性，提供图像的文本描述。

示例:


<img src="logo.png" alt="网站Logo">

装饰性图像与空 alt 属性:

对于纯粹装饰性的图像，使用空的 alt 属性 (alt="")。

示例:


<img src="decorative-line.png" alt="" aria-hidden="true">

音频和视频的字幕与文字稿:

为音频和视频内容提供字幕和文字稿。

<video> 标签字幕示例:


<video controls>
    <source src="video.mp4" type="video/mp4">
    <track kind="captions" src="captions_zh.vtt" srclang="zh" label="中文">
    <track kind="captions" src="captions_en.vtt" srclang="en" label="English">
    您的浏览器不支持 video 标签。
</video>

<figure> 和 <figcaption> 标签:

使用 <figure> 和 <figcaption> 标签为图像和多媒体内容提供语义化的容器和标题。

示例:


<figure>
    <img src="chart.png" alt="销售额图表">
    <figcaption>图表: 2023年销售额增长趋势</figcaption>
</figure>

7. 颜色对比度 (Color Contrast)

颜色对比度标准:

WCAG 2.1 AA 级别要求文本和背景颜色之间的对比度至少为 4.5:1，对于大文本 (18pt 或 14pt 加粗) 和 UI 组件，对比度至少为 3:1。

颜色对比度检测工具:

WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
Accessible Colors: https://accessible-colors.com/

在 Razor Pages 中选择可访问的颜色方案:

在 Razor Pages 应用的设计中，使用颜色对比度检测工具检查颜色方案，确保符合 WCAG 标准。

8. 动态内容与 AJAX 的辅助功能

aria-live 属性的应用:

对于使用 AJAX 动态更新的 Razor Pages 内容区域，使用 aria-live 属性来通知屏幕阅读器用户内容的变化。

示例 (动态更新消息区域):


<div id="message-area" aria-live="polite">
    <!-- 消息内容将动态更新 -->
</div>
<button onclick="updateMessage()">更新消息</button>
<script>
    function updateMessage() {
        const messageArea = document.getElementById('message-area');
        messageArea.textContent = '消息已更新！'; // 动态更新消息内容
    }
</script>

焦点管理 (Focus Management):

在动态内容更新或组件加载后，合理地管理焦点，确保键盘用户能够顺利地访问新内容。例如，在模态对话框打开后，将焦点移动到对话框的第一个可交互元素。

9. 辅助功能测试与验证

手动测试:

键盘导航测试: 只使用键盘 (Tab, Shift+Tab, Enter, Space, 方向键等) 浏览和操作 Razor Pages 应用，检查所有功能是否可访问，Tab 顺序是否逻辑。
屏幕阅读器测试: 使用屏幕阅读器 (NVDA, JAWS, VoiceOver) 访问 Razor Pages 应用，检查页面结构、内容朗读是否正确，交互组件是否可访问。

自动化测试工具:

WAVE (Web Accessibility Evaluation Tool): https://wave.webaim.org/ (浏览器扩展或在线工具)
Axe DevTools: https://www.deque.com/axe/devtools/ (浏览器扩展)
Lighthouse (Chrome DevTools): Chrome 开发者工具内置的 Lighthouse 审计工具包含辅助功能检查。

用户测试:

进行真实用户的辅助功能测试，邀请不同类型的用户 (包括残疾用户) 参与测试，获取真实的反馈和改进建议。

10. Razor Pages 辅助功能代码实践与示例

本章节已经穿插了大量的代码示例，涵盖了语义化 HTML、键盘可访问性、ARIA 属性、表单辅助功能、图像辅助功能等多个方面。在实际 Razor Pages 开发中，应该将辅助功能融入到开发的每一个环节，从页面结构设计到组件实现，再到测试验证，持续提升应用的辅助功能水平。

总结:

Razor Pages 辅助功能是一个涉及多个方面的综合性主题。通过遵循 WCAG 原则，合理运用语义化 HTML、ARIA 属性、键盘导航、表单辅助功能等技术，并进行持续的测试和验证，我们可以构建出更具包容性和可访问性的 ASP.NET Core Razor Pages 应用程序，让所有用户都能平等地享受 Web 内容和服务。辅助功能的提升不仅符合道德和法律要求，也能提升用户体验，扩大用户群体，最终带来更广泛的社会和商业价值。