PrimeVue 符合 WCAG 2.1 AA 级别标准，有关详细信息，请参阅每个组件的无障碍文档。
根据世界卫生组织的数据，全球 15% 的人口在某种程度上存在残疾。因此，在任何情况下，无障碍功能（例如轮椅使用者的坡道或带有字幕的多媒体）都至关重要，以确保任何人都可以消费内容。
残疾类型多种多样，因此您需要充分了解您的受众以及他们如何与创建的内容互动。主要有四类：
失明、低视力或色盲是常见的视觉障碍类型。屏幕放大镜和色盲模式通常是浏览器的内置功能，而对于依赖屏幕阅读器的人，页面开发人员需要确保内容可以被阅读器读取。常用的阅读器有 NVDA 、 JAWS 和 ChromeVox 。
失聪或听力损失是指完全或部分无法听到声音。听力障碍人士使用辅助设备，但当与网页互动时可能不够。常见的实现方式是为带有音频的内容提供文字替代、转录和字幕。
行动障碍人士因肢体丧失、瘫痪或其他各种原因而出现与运动相关的残疾。头部指针等辅助技术是一种与屏幕互动的设备，而键盘或触控板仍然是无法使用鼠标的人的解决方案。
认知障碍的范围更广，包括有学习障碍、抑郁症和阅读障碍的人。精心设计的内容也会为没有残疾的人带来更好的用户体验，因此为认知障碍进行设计会为任何用户带来更好的设计。
在辅助技术的帮助下，正确的页面结构是实现无障碍网页内容的核心要素。HTML 基于可访问的基础，表单控件默认可以通过键盘使用，并且屏幕阅读器更容易处理语义 HTML。
WCAG 指的是Web 内容无障碍指南，这是一项由 W3C（万维网联盟）的 WAI（Web 无障碍倡议）管理的标准。WCAG 包含使 Web 内容更易访问的建议。PrimeVue 组件旨在在不久的将来实现高水平的 WCAG 合规性。
全球各个国家/地区也有关于 Web 无障碍的政府政策。其中最著名的是美国的 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 由角色、属性和属性组成。角色定义元素的主要用途，例如复选框、对话框、选项卡列表，而状态和属性定义元素的元数据，例如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 用作 label 标签（带 for 属性）的替代品。
<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 的对比度，并考虑选择不会引起振动的颜色。
背景和前景内容之间的颜色对比度应足够充分，以确保可读性。下面的示例显示了两个具有良好和不良样本的情况。
颜色振动是由于选择了彼此对比度较低的颜色而导致运动的错觉。选择颜色组合时需要谨慎，以避免振动。
在高饱和度的颜色用于深色设计方案中时，应避免使用，因为它们会导致眼睛疲劳。相反，应优先使用不饱和的颜色。