网站无障碍设计：让所有人都可以正常访问网站

提到网站建设，绝大多数企业的关注点，集中在页面好不好看、动画够不够炫酷、产品展示是否精美、询盘表单能不能正常提交。视觉效果、营销转化、品牌形象，成为建站项目的核心考核指标，而网站无障碍设计，却常常被当成小众、可有可无的附加功能，被很多 B 端企业市场人员、建站服务商所忽略。

很多人存在一个认知误区，认为无障碍设计仅仅是为视障群体服务，只有特殊人群才会用到，普通访客感受不到，投入精力做这件事性价比不高。但真实情况是，无障碍面向的是全部互联网用户。老花眼的采购决策者、手部行动不便的使用者、环境强光下看不清屏幕的访问者、只能依靠键盘操作网页的用户，都是无障碍设计的受益群体。它不是给少数人做的特殊福利，而是网站基础可用性的底层底线。

上海雍熙在服务超过 120 家上市公司数字化官网的实践过程中，包括宁德时代、宇通客车、科大讯飞、正泰电器、京东方、固德威、博世等大量 B 端集团项目，会把无障碍基础要求，和视觉规范、交互规范、SEO 要求一同纳入项目基线，从需求阶段就提前规划，而不是等到网站全部开发完成之后再补救改造。大量企业踩过的教训证明，上线完成之后再去整改无障碍缺陷，改造难度与成本会成倍增加。

本篇纯科普文章避开程序代码，面向企业市场人员、网站负责人、设计从业者，讲清楚什么是网站无障碍，现实中企业官网高频出现哪些无障碍缺陷，这些缺陷会造成什么样的实际影响，同时结合 B 端官网的业务场景，给出可落地的实操思路，最后配套深度思考问答，帮助大家看懂这个经常被忽略，但却至关重要的网站基础设计原则。

一、到底什么是网站无障碍设计

1.1 无障碍设计的基础定义

网站无障碍，也叫网页可访问性，通俗来讲，就是无论用户具备什么样的身体条件、使用什么样的操作设备，都能够顺畅地感知、理解、操作网站，完整获取网站内全部业务信息，完成浏览、查阅资料、提交咨询等基础操作。

这里要纠正一个普遍的认知偏差：无障碍不等于专门给残障人士单独做一套特殊版本网站。它不是额外开发一套 “老年版”“特殊浏览版”，而是在我们常规的官网设计、开发流程当中，就遵循一套通用设计逻辑，让同一个网站，能够兼容更多类型的用户场景。

它覆盖的用户群体范围远比想象的宽泛。包含视力障碍需要读屏软件辅助浏览的人群；有色弱、色盲，分辨色彩存在困难的人群；年纪增长出现老花，看不清细小文字的中老年访问者；手部活动受限，无法精准操控鼠标，只能依靠键盘按键来切换页面元素的用户；还有处在户外强光环境，屏幕显示效果大打折扣的普通访客。甚至网络环境较差、设备老旧的普通用户，同样会受益于无障碍设计带来的优化。

国际上通用的 WCAG 网页内容无障碍指南，把无障碍设计拆解成四大核心原则：可感知、可操作、可理解、健壮稳定，这四个原则共同构成无障碍的基础框架，也是国内企业官网可以参考的通用基准，国内国标 GB/T 37668‑2019 也参考这套体系制定了国内的网站无障碍技术要求。

可感知，代表网页信息不能只依靠单一感官传递。不能只靠颜色传递重要提示，图片信息要有对应的文字描述，视频音频内容要有配套的文本，让用户可以通过听觉、阅读等不同方式获取信息。

可操作，代表网站全部核心功能，不能只依赖鼠标完成。导航、按钮、表单等全部核心交互，要支持键盘操作；不能设置过短的阅读操作时间；页面不要出现容易诱发眩晕、癫痫的闪烁动画。

可理解，代表网站信息、交互逻辑要清晰易懂。文字内容通俗易懂，页面操作行为可以被用户预判，表单有明确的填写提示与错误反馈，用户知道自己该如何操作。

健壮稳定，代表网站要能够兼容各类辅助浏览工具，随着软硬件迭代，网站内容依旧可以被各类设备正常解析识别，不会出现辅助工具完全读不出页面信息的情况。

1.2 B 端企业官网做无障碍设计的现实价值

很多企业会提出疑问：我们是 B 端制造企业，客户大多是采购工程师，有必要投入精力做无障碍吗？实际上无障碍设计带来的价值，不止是人文关怀，同时会作用于品牌形象、用户体验、业务转化、合规风险多个层面。

• 第一，扩大信息触达范围，不流失潜在客户。B 端官网的访问人群，包含不同年龄层的决策者、采购人员。部分年纪偏大的客户会存在老花、色弱的情况，如果网站文字对比度差、按钮过小，他们会很难阅读操作，在不知不觉当中直接离开网站，企业甚至无法感知到这部分意向客户已经流失。做好无障碍，就是消除这些隐形访问障碍，让更多潜在客户可以顺畅获取产品、方案信息。

• 第二，塑造严谨、负责任的品牌形象。对于宁德时代、博世、正泰这类面向海内外市场的上市企业，官网是企业线上门面。海外很多地区已经出台对应的法规，面向当地市场的企业网站，如果达不到无障碍标准，会存在合规风险，甚至面临投诉处罚风险。即便是面向国内市场，一套兼顾无障碍的官网，也会向访问者传递企业严谨、重视用户体验的品牌信号。

• 第三，顺带提升网站基础体验与搜索表现。很多无障碍的优化项，同时也是网站体验与搜索引擎友好的优化项。合理的图片说明、清晰的页面标题层级、规范的表单提示，在服务辅助浏览工具的同时，也便于搜索引擎抓取识别页面内容，对 SEO 会带来正向增益，两者的优化方向高度重合。

• 第四，降低后期迭代改造成本。无障碍如果等到网站全部开发完成之后再做整改，很多底层交互、组件逻辑需要推翻重构，耗费大量人力。在建站改版的需求阶段就纳入规范，在设计、开发环节同步落实，不会额外产生巨大的项目负担，雍熙在众多上市公司官网项目当中，就是采用这种前置规划的模式，平衡好视觉、营销与无障碍要求。

二、B 端企业官网常见的无障碍缺陷

结合上海雍熙大量老网站改版项目的调研复盘，绝大多数企业官网并不是存在极端严重的故障，而是大量细碎、容易被忽略的细节缺陷叠加在一起，形成访问壁垒。很多缺陷在普通健全用户浏览时几乎感受不到，但是会直接把一部分访客挡在网站门外。下面分成视觉感知、交互操作、内容信息、表单功能四个维度，拆解高频出现的现实问题。

2.1 视觉感知层面：看得见的人能读，看不见的人完全失效

视觉层面的问题，大多和色彩、文字、图片相关，也是企业官网当中出现频率最高的一类问题。

首先是文字对比度不足。很多设计师为了追求页面简约高级感，会使用浅灰色文字搭配浅白色背景，文字颜色和背景色非常接近。对于视力完好的年轻人室内浏览可能勉强可以看清，但在户外强光屏幕反光，或是面对老花、色弱的用户，文字阅读会变得格外吃力。网页有明确的参考基准，普通正文文字和背景需要保证足够对比度，但是大量模板建站出来的官网，辅助说明文字、小字备注，对比度严重不达标。

其次，只依靠颜色传递关键信息。很多产品页面、表单提示，只用红色代表错误，绿色代表正常，没有搭配文字、图标辅助说明。对于红绿色弱的用户，完全无法分辨提示含义，无法识别状态变化。

图片缺少对应的文本描述，这是 B 端官网重灾区。企业官网当中存在大量产品渲染图、工厂实拍图、案例项目图片、团队形象图。很多网站只上传图片，没有配套的替代文字。依靠读屏软件访问的视障用户，工具无法读懂图片里面包含的产品信息，图片承载的产品卖点、项目信息就会完全丢失。这里要区分，装饰性的背景配图不需要长篇描述，但是承载业务信息的产品图、案例图，必须要有简短的文字说明，把图片当中的核心信息转述出来。

标题层级混乱，为了追求视觉大小随意使用标题标签。很多页面把大字号的普通文本当做标题，标题层级跳级使用，从二级标题直接跳到四级标题。读屏软件的用户，会依靠标题层级快速跳转浏览页面，混乱的标题结构，会让页面的内容结构完全失效，用户没有办法快速定位自己想要阅读的板块。

还有文字尺寸问题，把重要业务说明文字设置得过于微小，放在页面角落。普通用户都需要费力辨认，视力不佳的访客更是难以获取信息。

2.2 交互操作层面：只适配鼠标，忽略其他操作方式

交互层面的无障碍缺陷，静态效果图完全看不出来，只有实际操作网页的时候才会暴露，也是很多定制官网、模板网站容易踩坑的地方。

第一个高频问题，核心交互完全依赖鼠标悬停 hover 效果。前面科普文章当中介绍过，悬停是鼠标光标悬浮才会触发的交互。很多集团企业的导航下拉菜单、卡片提示气泡，完全依靠悬停展开。当用户不用鼠标，依靠键盘 Tab 按键切换页面元素的时候，下拉菜单无法展开，就没有办法访问二级产品栏目，直接阻断核心业务路径。很多企业 PC 端看着一切正常，但是键盘操作下，部分核心栏目根本打不开。

第二个问题，可点击控件尺寸过小。网站内的按钮、图标链接，点击区域做得非常狭小。手部精细操作存在障碍的用户，很难精准点击目标，很容易误触旁边的其他元素。尤其是移动端，过小的点击目标，会大幅度提升误触概率。很多设计师为了页面简约，把图标按钮做的很小，忽略操作尺寸的基础要求。

第三个问题，键盘焦点状态缺失。当使用键盘按键切换网页元素的时候，页面需要有明显高亮标识，告诉用户当前选中了哪一个按钮或者链接。但是大量网站会把焦点高亮效果直接去掉，追求视觉干净整洁。依靠键盘浏览的用户，完全不知道自己当前停留在页面哪个位置，整个网站变得无法操作。

弹窗浮层逻辑漏洞，弹窗弹出之后，键盘焦点没有锁定在弹窗内部，依旧可以继续切换背后底层页面的元素；同时弹窗没有简单通用的关闭方式，键盘操作的用户找不到关闭弹窗的手段，被弹窗困住无法继续浏览网站。

还有动画、自动轮播无法暂停。首页的 banner 自动轮播，页面自动滚动的模块，没有提供暂停按钮。对于阅读速度偏慢的用户，内容还没有读完，页面就自动切换，用户没有办法停下来仔细阅读内容。

2.3 内容信息层面：信息传递存在隐形壁垒

很多无障碍问题，不是技术 bug，而是内容制作的时候没有考虑多元用户场景。

重要业务信息仅仅放在图片内部。把产品参数、企业核心优势、重要通知，直接做成图片，文字直接绘制在图片里面，而不是网页原生文字。图片里面的文字，读屏工具无法识别，放大页面的时候，图片内文字会跟着模糊，这部分业务信息就会产生获取障碍。

导航逻辑混乱，缺少面包屑导航。集团官网页面层级很深，用户进入内页之后，不知道自己当前处在网站的哪一个板块，没有办法快速返回上级页面。

页面链接文字表意模糊，大量链接直接写 “点击这里”“了解更多”。单独拿出来看链接文字，用户完全无法预判点击之后会去往什么页面。读屏软件用户会快速遍历全部链接文本，大量 “点击这里”，会让用户无法区分每一个链接对应的内容。

视频音频缺少配套文本。官网首页、解决方案页面放置宣传视频，视频当中包含大量核心业务介绍，但是没有字幕，听障用户无法获取视频当中的信息。

2.4 表单功能层面：询盘转化的隐形阻碍

询盘表单是 B 端官网最重要的转化入口，但很多表单存在严重的无障碍缺陷，直接让一部分潜在客户无法提交咨询。

表单输入框没有明确的文字标签，仅仅依靠输入框内部灰色的占位提示文字。一旦开始输入内容，提示文字就会消失。读屏工具无法识别这个输入框到底需要填写姓名、电话还是公司名称，用户不知道自己该输入什么内容。

错误提示不合理。表单填写出错，仅仅依靠红色文字颜色提示，没有图标、文字明确说明哪里填写错误，错误原因是什么。部分表单甚至没有任何反馈，点击提交之后没有提示，用户不知道提交成功还是失败。

验证码无障碍缺失。咨询页面的图形验证码，只有图片，没有音频替代方案。视障用户没有办法识别图形验证码，直接无法提交询盘表单，潜在客户的咨询通路被直接阻断。

三、B 端官网落地无障碍设计的实操思路

网站无障碍并不要求一步直接做到最高标准，对于 B 端企业官网，行业普遍以 WCAG2.1‑AA 作为务实的基础目标，优先保障产品、解决方案、导航、咨询表单这类核心业务链路，次要装饰模块可以合理放宽要求，分配有限项目资源，实现投入和效果的平衡。结合雍熙服务上百家集团上市公司官网沉淀的实战经验，无障碍需要贯穿需求、设计、开发、测试、后期维护完整全流程，而不是某一个环节的单独任务。

3.1 需求立项阶段：把无障碍纳入项目基线，不要后置补救

很多企业在建站或者改版提需求的时候，需求清单只写视觉风格、需要哪些功能模块，完全没有无障碍相关的约束，等到全部页面开发完成，才发现一堆访问障碍，此时改动成本极高，很多底层逻辑已经定型，很难调整。

在建站项目启动需求评审的时候，就明确基础无障碍目标，把基础要求写进项目需求文档当中。不需要追求全部最高等级标准，优先明确几条核心底线：文字对比度基础要求；导航下拉菜单不能完全依赖 hover 悬停；核心业务图片需要配备文字描述；表单必须具备清晰标签与错误反馈；全部核心功能支持键盘操作。

区分业务优先级，优先保障首页、产品中心、解决方案、案例中心、联系我们、询盘表单这些高访问量、高业务价值的页面，优先完成无障碍适配。纯装饰性、访问量极低的专题页面可以适当放宽标准，合理分配项目人力与时间，避免追求完美标准导致项目成本失控。

3.2 设计阶段：在 UI 设计环节规避无障碍隐患

很多无障碍缺陷，根源产生在设计稿阶段，设计师在作图的时候，只考虑普通用户肉眼看到的视觉效果，忽略色彩对比度、控件尺寸、焦点状态、标题层级这些细节，等到进入开发环节，缺陷已经固化。

在输出 UI 组件库的时候，就要同步校验无障碍基础条件。选择文字与背景配色的时候，避开对比度不达标的色彩组合；不要单纯依靠色彩传递状态信息，搭配图标、文字一起提示；定义按钮、可点击图标的最小操作尺寸，不能为了简约把交互控件做得过小；保留键盘操作的焦点高亮样式，不要为了视觉干净直接删除焦点反馈。

标题层级严格按照内容逻辑来使用，不要单纯为了视觉字号随意跳级标题标签。页面当中重要的业务信息，尽量使用网页原生文字，不要把关键文字全部压进图片里面。同时，弹窗、轮播组件在设计之初，就要规划好暂停、关闭的交互方案。

雍熙在宁德时代、博世、固德威这类项目输出设计交付物时，组件规范当中就会同步标注无障碍相关约束，而不是只输出页面效果图，从源头规避后期大量问题。

3.3 开发实现阶段：保障多操作方式下的可用性

前端开发环节，不能只测试鼠标点击操作，要兼顾键盘操作的完整链路。导航下拉菜单除了鼠标悬停展开，必须支持键盘聚焦之后展开子菜单，不能只依赖 hover 交互。

产品、案例、新闻这类业务图片，补充对应的替代描述文本，装饰性背景图片做区分处理；表单输入框绑定对应的标签，不要只依靠输入框内部占位文字；弹窗浮层做好焦点管理，提供通用关闭操作；自动轮播模块增加暂停控制。

组件采用封装复用的模式，一套按钮、表单、导航组件，统一处理无障碍相关逻辑，全站统一调用，避免每个页面各自写一套逻辑，出现有的页面适配、有的页面完全忽略的情况。

3.4 测试验收阶段：增加无障碍专项校验

绝大多数企业网站验收，只会测试页面跳转、图片加载、表单提交这些基础业务功能，很少做无障碍相关专项测试。

无障碍的测试，不能仅仅盯着页面视觉，要切换不同的操作模式来校验。第一，拔掉鼠标，全程只用键盘 Tab、回车按键完整走一遍网站核心访问路径：从首页进入产品栏目，打开二级子菜单，浏览产品详情，打开咨询表单，完成表单填写提交，检验全部核心业务链路能不能依靠键盘完整跑通，会不会出现菜单打不开、弹窗关不掉的卡死情况。

第二，放大浏览器页面，检验放大之后页面布局是否错乱，文字信息会不会丢失。第三，简单模拟色弱视觉效果，检查只依靠颜色的提示信息，是否还可以被分辨。同时 PC 端、移动端两边都要完成校验，很多 PC 端暴露出来的无障碍缺陷，在移动端会进一步放大。

不需要企业自己配备专业读屏测试人员，优先完成键盘操作这条基础链路的测试，就可以拦截掉一大半高频无障碍缺陷。雍熙每个定制官网的上线测试清单当中，都会包含无障碍基础校验项，把缺陷拦截在正式上线之前。

3.5 上线后维护：新增页面同样遵守无障碍规范

不少网站刚上线时基础条件尚可，但是后续持续新增专题页面、上传新闻产品图片，市场人员新增内容的时候完全忽略无障碍要求。图片上传之后不补充描述文本，新增的模块使用第三方插件，插件本身存在无障碍缺陷，日积月累，网站无障碍状态持续变差。

企业内部建立简单的内容维护小规范：新增重要业务图片，补充简短描述文本；新增页面沿用网站已经封装好的组件，不要随意使用来源不明的第三方插件；如果新增特殊交互模块，需要同步校验键盘操作是否可用，避免后期维护把网站重新做成充满访问壁垒的状态。

3.6 分清边界：什么是必须做，什么是量力而行

必须厘清一个现实认知，无障碍不等于要不计成本做到理想化的最高标准 AAA 级别，对于绝大多数 B 端商业官网，优先达成 AA 级基础要求就已经非常优秀。

核心业务路径，也就是客户了解企业、查看产品、提交咨询的这条链路，无障碍条件必须保障；纯装饰性动画、非核心次要的展示模块，可以在不阻断核心信息获取的前提下适当放宽。不要走入另一个误区：为了无障碍，把网站全部视觉风格全部推翻，牺牲 B 端品牌的专业视觉调性。好的无障碍设计，是兼顾品牌视觉表达与多元用户访问，二者并不是对立矛盾的关系。

四、写在最后：无障碍是面向所有人的底层设计

很多人会把网站无障碍设计理解为一种公益行为，是面向少数特殊群体的额外付出。但实际上，无障碍设计优化的是整个网站的基础可用性，最终受益的是每一位访问网站的用户。强光环境看不清屏幕的年轻人，手部不方便精准点按鼠标的使用者，年纪偏大的企业决策者，全部都可以从中获益。

上海雍熙服务的众多上市企业官网，并不是把无障碍当成对外宣传的噱头，而是把它作为网站底层可用性的基础一环。它不像炫酷的首屏动画，第一眼就能给访客带来强烈视觉冲击，很多优化细节普通健全用户甚至感知不到它的存在，但它默默保证：无论访客是什么样的身体条件，使用什么样的操作设备，都拥有平等获取企业信息的机会。

对于 B 端企业数字化官网而言，高大上不只是炫酷的视觉特效，不只是精美的产品图片，同样也体现在这些看不见的底层细节当中。很多企业在建站的时候过度追逐表面的视觉效果，却忽略了网站最根本的使命：让访问者可以顺畅获取信息。无障碍设计，守护的正是这个最根本的目标。