Campaign Creators – Unsplash
在欧盟，约有8000万公民患有视觉障碍、运动或认知障碍及听力残疾等残障，占人口的10%至30%，他们往往无法充分利用网站。
Aktion Mensch与Google合作，联合Pfennigparade基金会和咨询机构BITV-Consult对德国访问量最大的在线商店进行了可访问性测试。结果揭示了企业到2025年需采取的行动力度：被测试的商店中有75%不具备可访问性。
私营部门的无障碍网站仍处于起步阶段。European Accessibility Act (EAA)将改变这一现状：到2025年，欧盟内所有企业的网站和电子商务商店必须对所有用户实现无障碍且可用，无障碍性将成为强制要求。德国通过Barrierefreiheitsstärkungsgesetz (BFSG)实施该欧盟指令，法律将于2025年生效。
实施无障碍性的基础是Web Content Accessibility Guidelines (WCAG)。这些国际公认的指南自2018年以来一直定义了设计和开发无障碍网站的技术标准。
在线商店运营商、UX设计师和Web开发人员最好在开发初期就考虑可访问性和设备独立性，坚持“可访问性优先”。目标不应仅是从2025年起满足法律标准，更应是通过新的设计原则使数字产品易于为所有人使用。
德国在线商店可访问性测试结果
针对德国在线商店的无障碍测试检查了78个拥有完整电子商务流程（从搜索到完成购买）的网站，评估了Web Content Accessibility Guidelines (WCAG)中最重要的8个标准。
结果显示，被测试的商店中有75%不具备可访问性。
- 缺乏键盘可操作性（lack of keyboard operability）是最常见的障碍。在被测试的78个网站中，有61个无法仅通过键盘进行操作。
- 许多网站存在对比色缺失（lack of contrast color）的问题，给视障测试者带来挑战。
- 弹窗内容（如横幅广告）无法关闭也是主要障碍之一。
积极的一面是：符合关键可操作性标准的测试页面在其他方面通常也具备可访问性。所有17个页面在填写表单时都满足了清晰标签的标准；至少15个页面提供了简单的文本调整大小功能（“捏合缩放”）以提高可读性；在至少12个网站上，订购过程中的交互控件（如“汉堡菜单”）得到了正确标注，状态（例如服装的预选尺寸）也能被正确读出，用户可以轻松更改选择并成功完成整个购买流程的导航。
Elizabeth Woolner– Unsplash
网络上最常见的障碍有哪些？
基本上，网站和电子商务商店中的障碍可分为技术性和内容相关两类。
技术性障碍
- 许多网站无法通过键盘或语音命令进行访问和导航。
- 屏幕阅读器和盲文显示器无法读取内容。这类辅助工具需要清晰的语义化HTML结构才能正确解读文本、表格和表单。
- 图片缺少替代文本（alt text）。只有设置了ALT标签，屏幕阅读器和其他辅助技术才能描述并正确解读图片。
- 许多网站基于旧技术构建，不具备响应式设计，在智能手机和现代浏览器中难以使用。
- 浏览器缩放（放大）功能不足或被网站阻止。
内容相关障碍
- 颜色和字体使用不当，如字体过小、对比度不足，导致视障人士难以感知。
- 内容与颜色关联导致理解困难。例如仅提示“点击右下角的绿色按钮”，同时包含文字和颜色信息的CTA对盲人来说几乎无法解读。
- 文本过于复杂且难以理解。
- 视频缺乏音频描述（audio description）以及供听障人士使用的字幕。
新的欧洲指令（EAA）和无障碍法案（BFSG）
新的European Accessibility Act旨在为企业开辟新市场机会，并为残疾人提供更广泛的无障碍产品和服务，增加了私营和商业公司在2025年使其产品和服务无障碍的义务。
最初的重点在于用户的易用性，涵盖以下领域：
- 自动取款机
- 售票和值机设备
- 通信服务
- 在线交易和电子商务的平台和服务
- 银行服务
- 航空、巴士、铁路和海运服务
员工人数少于十人且年营业额低于两百万欧元的微型企业可豁免欧盟法规，但若提供并销售数字服务则不适用此豁免。各欧盟成员国须通过法律制定并监督此事。
德国通过Barrier-Free Act (Barrierefreiheitsstärkungsgesetz, BFSG)引入新法规，于2025年生效并要求私营企业实现无障碍。服务方面的过渡条款设定至2030年，自助终端方面设定至2040年。最终由各联邦州监督合规情况，实际处罚严格程度及制裁措施尚不明确。
Elizabeth Woolner– Unsplash
无障碍网店：工具与技巧
在规划网站/网店时就应考虑到无障碍性。以下提示和工具将帮助您实施网络项目，提升残障人士的使用体验。
使用对比色
颜色组合往往缺乏对比度。若使用细字体，则需要更高的对比度；字体越小，与背景的对比度应越高。特别是在智能手机上，要考虑阳光和反射的影响！同时建议测试黑白对比，避免过于强烈。可使用对比度检查器（contrast checker/calculator）广泛测试颜色是否具有理想对比度。
注意色盲
红绿色觉缺失非常普遍，影响近十分之一的男性。患有绿色视觉障碍（deuteranopia）或红色视觉障碍（protanopia）的人无法区分这两种颜色。建议使用色盲模拟器（colour blindness simulator）进行测试。一般来说，尽量谨慎使用颜色并清晰地区分它们。
提供夜间模式（深色模式）
网站的深色模式不仅深受开发者喜爱，还有助于患有特殊眼疾（如白内障）的人群阅读。许多用户表示在夜间模式下或阳光下使用时眼睛疲劳感减轻。夜间模式是锦上添花的功能，但并非必需。
使用无衬线字体，避免过细或过粗的字重
建议视障人士使用无衬线字体，推荐使用常规字重，尽量避免使用细体和粗体，加粗强调应适度使用。大写字母也会使视力受损者阅读困难。此外，存在专为拼写和阅读障碍（dyslexia）人群设计的特殊排版方案，研究表明此类患者也倾向于使用字母易于区分的无衬线字体。
字体大小不小于14px
可使用字体大小计算器根据DIN 1450标准确定理想字号，建议分别计算智能手机、平板电脑和桌面屏幕的最小尺寸。如果浅色文字用于深色背景，请将字体大小增加10%。行距经验法则是至少为字体大小的120%。连续文本行长最多应为80个字符，并采用左对齐，尽量避免居中和右对齐。此外，请注意文本不一定非要放置在图片或颜色渐变之上。
使用语义化HTML标记
语义化HTML标记有助于屏幕阅读器识别网站结构并将信息准确传达给用户。通过使用适当的HTML标签（如<header>、<nav>、<main>、<article>、<section>等），为页面的每个元素赋予特定含义。
使用ARIA属性
ARIA（无障碍富互联网应用）属性帮助辅助技术更准确地解释动态内容和用户界面组件。例如，ARIA地标允许屏幕阅读器识别网站中的重要部分，如页眉、页脚或主要内容区域。
无障碍检查：您的在线商店是否具备无障碍功能？
您可以通过免费的浏览器工具快速测试电子商务网站的可访问性，如WAVE和AChecker。如果网站基于WordPress，还可以使用免费插件WP Accessibility和One Click Accessibility进行轻松检查。
使用WAVE进行无障碍检查的技巧
WAVE根据《Web内容无障碍指南WCAG 2.1》标准评估网站，这是FSO和欧盟指令法律要求的基础。重要的是，网站至少应达到WCAG的AA级合规水平。
- 在“无样式”视图中进行测试：停用所有样式表，检查阅读顺序是否合适。
- WAVE会在图片旁边显示替代文本，请确保其连贯且易于理解。
- 利用WAVE代码面板评估表单中的标签和输入字段。
- 使用浏览器扩展程序测试由脚本动态生成的内容及受密码保护的页面。
实施工具提供的调整措施后，可使用BITV测试的WCAG清单再次检查，并最终通过键盘和屏幕阅读器（如Mac上的VoiceOver或Windows上的NVDA）主动测试无障碍性。
如需官方确认，推荐BIK BITV测试。这是一种付费流程，由德国选定专家对网站可访问性进行全面可靠测试。BITV测试定义了98个测试步骤，除WCAG 2.1标准外，还包含EN 301 549为网页内容制定的另外38项要求。
结论
新的欧洲指令使数字行业中的无障碍主题受到更多关注，并将私营企业置于义务之下。UX设计师和Web开发人员面临的主要挑战是设计和实施所有即将推出的项目及数字产品，使其无障碍化。
最好的指导仍然来自W3C的Web内容无障碍指南。借助WAVE等浏览器工具，您可以轻松对在线商店进行基本的无障碍检查。
简化设计并将无障碍性放在首位是2025年的座右铭。好消息是：如果数字服务和产品更易于使用且更简单，这将为所有人带来优势，无论是否有障碍。
关于作者
Stephan Raffeiner是一位数字营销专家和博客作者，担任课程讲师并从事网页设计师工作。他在digitalmarketingblog.it上撰写有关在线营销主题、电子商务趋势的文章，并报道WordPress、UX/UI设计、SEO、数字分析、社交媒体和Web3的最新动态。