引言
在前面的学习中，我们了解到语义化的 HTML 是无障碍 Web 应用的基石。然而，现代 Web 应用离不开 CSS 和 JavaScript 的加持。这两项技术如果使用得当，能够显著提升用户体验和可访问性；反之，如果滥用或忽视无障碍原则，则会严重损害残障用户的使用体验。
本文将从 CSS 和 JavaScript 两个维度，系统性地梳理无障碍开发中的最佳实践，帮助开发者构建既美观又包容的 Web 应用。
CSS 无障碍实践
保持语义与视觉的一致性
CSS 拥有强大的样式能力，可以让任何 HTML 元素呈现出任何外观。但强大的能力也意味着更大的责任。开发人员应当始终为特定任务使用恰当的语义元素，而不是通过 CSS 强行改变元素的本意。
屏幕阅读器用户依赖标题元素进行页面导航，如果开发者用样式化的div或span替代真正的标题标签，这些用户将失去快速定位内容结构的能力。类似地，如果对真正的标题元素进行过度的样式修改，使其看起来不再像标题，同样会混淆所有用户的认知预期。
因此，核心原则是：在保持元素原有语义功能的前提下进行视觉美化，而非彻底改变元素的外观和行为模式。
文本内容的可读性设计
对于页面中的核心文本内容，包括标题、段落、列表等，CSS 的设置应当服务于可读性这一首要目标。
以下是一个标准的 HTML 内容结构示例：
<h1>Heading</h1><p>Paragraph</p><ul><li>My list</li><li>has two items.</li></ul>对应的 CSS 样式可以参考如下设置：
h1{font-size:5rem;}p, li{line-height:1.5;font-size:1.6rem;}在字体大小方面，应选择合理的基准尺寸，避免过小或过大的极端设置。行高（line-height）建议设置在 1.5 倍左右，这样能够保证多行文本之间有足够的呼吸空间，方便所有用户顺畅阅读。字母间距也应当适度，过紧或过松都会影响阅读体验。
标题应当通过字号、字重等方式与正文形成清晰的视觉层次对比。列表项应当呈现出清晰的列表结构，让用户能够直观识别项目的归属关系。段落之间应有适当的间距，避免文字挤作一团。
颜色搭配同样至关重要。文本颜色与背景颜色之间必须有足够的对比度，以确保低视力用户或色觉障碍用户能够清晰辨认内容。可以使用在线对比度检测工具，如 WebAIM 的颜色对比度检查器，来验证配色方案是否符合 WCAG 标准。
值得强调的是，高对比度设计不仅对视觉障碍用户有益，在强光环境下使用移动设备的普通用户同样能够从中获益。
强调文本的克制样式
当使用em和strong等内联元素对特定文本进行语义强调时，CSS 的干预应当保持克制。粗体和斜体是 Web 生态中长期形成的通用约定，用户已经习惯了通过这些视觉特征识别强调内容。
HTML 结构示例：
<p>The water is<em>very hot</em>.</p><p>Water droplets collecting on surfaces is called<strong>condensation</strong>.</p>开发者可以适度添加颜色变化来强化强调效果：
strong, em{color:#a60000;}但不宜彻底改变粗体或斜体的呈现方式。随意颠覆这些约定俗成的视觉模式，只会给所有用户带来认知负担。
保持缩写的可识别性
abbr元素用于标记缩写、首字母缩略词，并通过title属性提供完整释义。
HTML 结构示例：
<p>Web content is marked up using<abbrtitle="Hypertext Markup Language">HTML</abbr>.</p>在 CSS 层面，可以适当添加颜色：
abbr{color:#a60000;}这些元素通常采用虚线下划线的样式约定，用户通过这一视觉线索得知该词条包含扩展信息。偏离这一公认的设计模式是不明智的。如果需要为缩写添加额外样式，应当在保留虚线下划线这一识别特征的基础上进行微调。
链接状态的全面反馈
超链接是 Web 中最基础的交互元素，其样式设计直接关系到用户能否顺利导航。
HTML 链接示例：
<p>Visit the<ahref="https://www.mozilla.org">Mozilla homepage</a>.</p>标准的链接样式可以参考如下设置：
a{color:#ff0000;}a:hover, a:visited, a:focus{color:#a60000;text-decoration:none;}a:active{color:#000000;background-color:#a60000;}标准的链接约定包括：下划线标识、不同状态下的颜色变化（默认蓝色、已访问紫色、激活红色），以及悬停时的指针光标变化。键盘用户在通过 Tab 键导航时，链接需要呈现清晰的焦点轮廓（如 Firefox 的虚线轮廓或 Chrome 的蓝色轮廓）。
这些视觉反馈对使用键盘操作的用户至关重要，绝对不应通过 CSS 移除outline样式。开发者可以创意地设计链接样式，但必须确保每个交互状态都有明确的视觉反馈。当用户悬停、聚焦或激活链接时，都应有相应的样式变化来指示当前状态。
表单元素的焦点管理
表单是用户与网站进行数据交互的核心途径。在 CSS 层面，主要工作是合理排列表单元素的位置、调整标签与输入框的间距，以及确保整体视觉整洁。
HTML 表单结构示例：
<div><labelfor="name">Enter your name</label><inputtype="text"id="name"name="name"/></div>与链接类似，表单控件在获得焦点时必须有清晰的视觉提示。不同浏览器的默认焦点样式可能有所差异，开发者可以选择统一这些样式以提升设计一致性，但绝不可彻底移除焦点指示。这些视觉线索对于依赖键盘导航的用户来说是必不可少的辅助信息。
表格数据的可读性优化
数据表格的 CSS 设计应当围绕可读性展开。表头单元格应当通过加粗或其他方式突出显示，帮助用户建立行与列的数据对应关系。使用斑马条带化（交替行颜色）可以显著提高长表格的行间辨识度，减少视觉串行错误。
表格的整体布局应当清晰有序，边框、间距等视觉元素应当有助于数据结构的表达，而非增加视觉噪音。
合理处理内容的隐藏
在许多 UI 设计中，部分内容并非始终可见，例如选项卡面板中的非激活内容。使用绝对定位将内容移出可视区域是一种合理的隐藏策略，因为屏幕阅读器仍然能够访问这些内容，只是视觉上不可见。
与此相对，visibility:hidden和display:none会彻底将内容从无障碍树中移除，导致屏幕阅读器用户完全无法感知这些内容的存在。除非有特殊理由需要向所有用户隐藏内容，否则应当谨慎使用这两种属性。
尊重用户的个性化样式覆盖
不同用户有着不同的视觉需求。低视力用户可能希望放大所有网站的文本字号，重度色觉缺陷用户可能需要高对比度的配色方案。浏览器提供了自定义样式表的功能，各类样式扩展工具也允许用户覆盖页面样式。
开发者应当以开放和包容的态度接受这种覆盖行为。设计应当具备足够的弹性，当用户强制放大文本时，主要内容区域应当能够适应变化，通过滚动或其他方式完整呈现所有内容，而不是被截断或彻底错乱。
JavaScript 无障碍实践
不唐突的增强原则
不唐突的 JavaScript 是构建无障碍交互的核心指导思想。这一原则强调 JavaScript 应当用于增强已有的功能，而非完全构建功能本身。基础功能应当在 JavaScript 不可用的情况下依然能够正常工作。
实际项目中，完全脱离 JavaScript 可能并不现实，但开发者应当始终将增强而非替代作为目标。充分利用浏览器内置功能，而不是为所有交互重新发明轮子，这不仅能提升性能，也能减少潜在的无障碍问题。
客户端表单验证的无障碍实现
客户端表单验证是不唐突 JavaScript 的典型应用场景。在用户提交表单时即时检查数据有效性，能够快速反馈错误，避免等待服务器响应带来的延迟和页面刷新。
在实现中，应当使用label元素将标签与输入控件明确关联，确保屏幕阅读器能够将两者一起朗读。以下是一个表单验证的 HTML 结构：
<labelfor="name">Enter your name:</label><inputtype="text"name="name"id="name"/>验证逻辑应当在表单提交时触发，而非每次输入变化都进行验证，避免过于频繁的 UI 更新对屏幕阅读器用户造成干扰：
form.onsubmit=validate;functionvalidate(e){errorList.innerHTML="";for(vari=0;i<formItems.length;i++){vartestItem=formItems[i];if(testItem.input.value===""){errorField.style.left="360px";createLink(testItem);}}if(errorList.innerHTML!==""){e.preventDefault();}}错误信息的呈现需要特别关注无障碍细节。错误消息容器应当使用绝对定位等不影响屏幕阅读器访问的方式进行隐藏和显示。每个错误项应当包含清晰的文本说明，并提供一个可直接跳转到对应输入控件的链接：
functioncreateLink(testItem){varlistItem=document.createElement("li");varanchor=document.createElement("a");anchor.textContent=testItem.input.name+" field is empty: fill in your "+testItem.input.name+".";anchor.href="#"+testItem.input.name;anchor.onclick=function(){testItem.input.focus();};listItem.appendChild(anchor);errorList.appendChild(listItem);}WAI-ARIA 属性在此场景中能够提供额外帮助。role="alert"可以确保错误消息在动态出现时被屏幕阅读器及时播报：
<divclass="errors"role="alert"aria-relevant="all"><ul></ul></div>鼠标特定事件的键盘替代方案
JavaScript 中的鼠标特定事件，如mouseover、mouseout、dblclick等，无法通过键盘操作触发。如果功能完全依赖这些事件，键盘用户将被排除在外。
解决方案是为每个鼠标事件配对相应的键盘可访问事件。以缩略图放大功能为例：
imgThumb.onmouseover=showImg;imgThumb.onmouseout=hideImg;imgThumb.onfocus=showImg;imgThumb.onblur=hideImg;focus和blur事件分别对应元素获得焦点和失去焦点的时刻，能够为键盘用户提供与鼠标悬停等同的交互机会。配合tabindex属性将非交互元素纳入 Tab 键导航序列，键盘用户便能够访问并操作这些元素。
click事件在多数浏览器中对键盘操作（如回车键）有良好支持，但当元素并非默认可聚焦时，需要额外处理键盘事件来确保等效功能。
避免过度依赖 JavaScript 构建内容
一种常见的不良实践是使用 JavaScript 生成页面中所有的 HTML、CSS 和交互逻辑。这种做法带来了严重的无障碍隐患，因为屏幕阅读器和其他辅助技术难以可靠地解析动态生成且缺乏语义结构的内容。
开发者应当始终坚持使用正确的技术完成正确的工作。在考虑实现方案时，应当自问：这个复杂的 JavaScript 小部件是否真的必要，还是纯文本和标准表单元素就足以满足需求？优先选择原生 HTML 元素总是比重新构建自定义控件更安全、更易于访问。
总结
CSS 和 JavaScript 是构建现代 Web 体验不可或缺的工具，但它们的使用方式直接决定着应用的可访问性水平。
在 CSS 方面，核心要点包括：保持语义与视觉的一致性、确保文本可读性和颜色对比度、维护链接和表单控件的状态反馈、合理处理内容隐藏，以及尊重用户的自定义样式需求。
在 JavaScript 方面，核心要点包括：遵循不唐突的增强原则、实现可访问的表单验证、为鼠标事件提供键盘替代方案，以及避免过度依赖脚本生成内容。
无障碍 Web 开发不是一项孤立的工作，而是贯穿于 HTML、CSS 和 JavaScript 全链路的系统实践。当这三者协调一致、各司其职时，我们才能构建出真正面向所有人的包容性 Web 应用。