PrimeVue 符合 WCAG 2.1 AA 级标准，有关详细信息，请参阅每个组件的无障碍文档。
根据世界卫生组织的统计，世界上有 15% 的人口在某种程度上存在残疾。 因此，任何环境下的无障碍功能（例如轮椅用户的坡道或带有字幕的多媒体）对于确保任何人都能消费内容至关重要。
残疾的类型多种多样，因此您需要了解您的受众以及他们如何与创建的内容进行互动。 主要有四大类：
失明、低视力或色盲是常见的视觉障碍类型。屏幕放大镜和色盲模式通常是浏览器内置的功能，而对于依赖屏幕阅读器的人来说，页面开发人员需要确保内容可以被阅读器读取。流行的阅读器包括 NVDA 、 JAWS 和 ChromeVox 。
耳聋或听力损失是指完全或部分听不到声音。听力障碍人士使用辅助设备，但在与网页互动时可能不足够。常见的做法是为带有音频的内容提供文本替代、文字记录和字幕。
行动障碍人士由于肢体丧失、瘫痪或其他各种原因而导致与运动相关的残疾。诸如头部指针之类的辅助技术是与屏幕交互的设备，而键盘或触控板仍然是无法使用鼠标的人的解决方案。
认知障碍的范围更广，包括有学习障碍、抑郁症和阅读障碍的人。精心设计的内容也为没有残疾的人带来了更好的用户体验，因此针对认知障碍进行设计可以为任何用户带来更好的设计。
借助辅助技术的正确页面结构是无障碍网络内容的核心要素。HTML 基于可访问的基础，默认情况下，表单控件可以通过键盘使用，并且语义 HTML 更容易被屏幕阅读器处理。
WCAG 指的是 Web 内容无障碍指南，这是由 W3C（万维网联盟）的 WAI（Web 无障碍倡议）管理的标准。 WCAG 包括使 Web 内容更易于访问的建议。PrimeVue 组件旨在在不久的将来达到高水平的 WCAG 标准。
全球各个国家也制定了有关网络无障碍的政府政策。其中最著名的有美国的Section 508和欧盟的Web 无障碍指令。
应该首选原生表单元素，而不是用于其他目的（如演示）的元素。例如，下面的按钮由浏览器呈现为表单控件，可以通过制表符接收焦点，也可以使用空格键触发。
<button @click="onButtonClick(event)">Click</button>
另一方面，使用 div 的基于花式 CSS 的按钮没有键盘或屏幕阅读器支持。
<div class="fancy-button" @click="onButtonClick(event)">Click</div>
除了使用 keydown 来恢复键盘支持外，还需要 tabindex 使 div 元素可访问。为了避免重载和实现浏览器已经提供的功能，应该首选原生表单控件。
<div class="fancy-button" @click="onClick(event)" @keydown="onKeyDown(event)" tabindex="0">Click</div>
表单组件必须与另一个描述表单元素用途的元素相关联。这通常通过 label 元素实现。
<label for="myinput">Username:</label>
<input id="myinput" type="text" name="username" />
HTML 提供了各种元素来组织网页上的内容，屏幕阅读器可以识别这些元素。首选语义 HTML 以获得良好的语义，可以为阅读器提供开箱即用的支持，而当使用带有类的常规 div 元素时，则无法实现。考虑以下示例，这些示例对阅读器的意义不大。
<div class="header">
<div class="header-text">Header</div>
</div>
<div class="nav"></div>
<div class="main">
<div class="content">
</div>
<div class="sidebar">
</div>
</div>
<div class="footer">
</div>
可以使用内置屏幕阅读器支持的语义元素来实现相同的布局。
<header>
<h1>Header</h1>
</header>
<nav></nav>
<main>
<article></article>
<aside></aside>
</main>
<footer>
</footer>
ARIA 指的是“无障碍富 Internet 应用程序”，它是一套用于填补语义 HTML 不足之处的套件。这些情况主要与富 UI 组件/小部件有关。尽管浏览器对富 UI 组件（如日期选择器或颜色选择器）的支持在过去几年中有所改进，但许多 Web 开发人员仍然使用由他们或 PrimeVue 等其他项目创建的源自标准 HTML 元素的 UI 组件。这些类型的组件必须提供键盘和屏幕阅读器支持，后一种情况是使用 WAI-ARIA 的地方。
ARIA 由角色、属性和属性组成。 角色定义了元素的主要用途，例如 checkbox、dialog、tablist，而 状态 和 属性定义了元素的元数据，例如 aria-checked、aria-disabled。
考虑以下原生复选框的情况。它具有内置的键盘和屏幕阅读器支持。
<input type="checkbox" value="Prime" name="ui" checked>
带有 CSS 动画的花式复选框可能看起来更具吸引力，但可能缺乏无障碍功能。下面的复选框可能会显示一个带有动画的已选中字体图标，但它不可制表，无法使用空格键选中，也无法被阅读器读取。
<div class="fancy-checkbox">
<i class="checked-icon" v-if="checked"></i>
</div>
一种替代方法是对阅读器使用 ARIA 角色，并对键盘支持使用 Javascript。请注意使用 aria-labelledby 作为带有 for 的 label 标签的替代。
<span id="chk-label">Remember Me</span>
<div class="fancy-checkbox" role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk-label"
@click="toggle" @keydown="onKeyDown(event)">
<i class="checked-icon" v-if="checked"></i>
</div>
但是，最佳实践是将语义 HTML 用于可访问性，同时保持 UX 设计。此方法涉及隐藏用于可访问性的原生复选框，并使用 Javascript 事件更新其状态。请注意使用 p-hidden-accessible，它会向用户隐藏元素，但不会向屏幕阅读器隐藏元素。
<label for="chkbox">Remember Me</label>
<div class="fancy-checkbox" @click="toggle">
<input class="p-hidden-accessible" type="checkbox" id="chkbox" @focus="updateParentVisuals" @blur="updateParentVisuals"
@keydown="onKeyDown(event)">
<i class="checked-icon" v-if="checked"></i>
</div>
一个可工作的示例是 PrimeVue 复选框，它是可制表的、键盘可访问的，并且符合屏幕阅读器的要求。它依赖于隐藏的原生复选框，而不是 ARIA 角色。
网页上的颜色应旨在达到至少 4.5:1 的对比度，并考虑选择不会引起振动的颜色。
背景和前景内容之间的颜色对比度应足够充分，以确保可读性。下面的示例显示了两个案例，其中包含好和坏的示例。
颜色振动是由于选择了彼此之间可见度较低的颜色而导致运动的错觉。选择颜色组合时需要谨慎，以避免振动。
当在黑暗设计方案中使用时，应避免使用高饱和度颜色，因为它们会导致眼睛疲劳。相反，应首选不饱和颜色。