网站无障碍性设计：确保所有人平等访问的最佳实践与标准

hwyzw

    可访问性意味着让每个人（无论能力如何）都可以轻松访问和使用网站。这是网站设计的一个重要方面，因为它确保每个人都可以平等地使用和享受互联网。

    无障碍最佳实践

    有许多最佳实践可以帮助确保您的网站可访问。这些做法包括：

    综上所述

    可访问性是网站设计的一个重要方面，可确保每个人，无论能力如何，都可以轻松访问和使用网站。通过遵循最佳实践、使用可访问性测试工具并致力于持续改进，您可以创建一个真正具有包容性的网站，满足所有用户的需求。

    网站建设应符合哪些标准？

    网站建设必须满足以下标准： 1、用户体验友好性：网站的设计应该简洁、清晰、易于导航，让用户快速找到所需的信息。同时，网站加载速度要快，避免用户因等待而失去耐心。例如，网站的布局要合理，避免过多的广告、弹窗干扰用户浏览；搜索功能必须准确，能够快速响应用户的查询需求。 2. 可访问性和兼容性：网站应该在各种设备和浏览器上都能正常运行，无论用户是通过手机、平板电脑还是计算机访问它。同时，网站应遵循无障碍设计原则，方便残疾人使用。例如，网站应支持HTML5标准，以确保在不同浏览器上的兼容性；同时，应提供足够的文字大小和对比度，以方便视力不佳的用户阅读。 3.安全：网站应采取必要的安全措施，保护用户数据免受黑客和恶意软件的侵害。例如，网站应使用HTTPS协议进行加密通信，防止数据在传输过程中被窃取；同时，应对用户输入进行验证和过滤，以防止跨站脚本攻击（XSS）和SQL注入等安全漏洞。 4、内容质量：网站提供的信息应准确、权威、有价值，满足用户的需求。例如，新闻网站应确保其发布的新闻真实可靠；电子商务网站应提供详细的产品描述和用户评论，以帮助用户做出购买决定。 5.响应式设计：网站应该具有响应式设计，可以适应不同的屏幕尺寸和设备类型，以提供一致的用户体验。例如，当在移动设备上访问网站时，内容应自动调整布局和字体大小以适合小屏幕。综上所述，一个符合标准的网站应该具有良好的用户体验、可访问性和兼容性、安全性、内容质量和响应式设计。只有这样的网站才能吸引和留住用户，达到其宣传、促销或销售的目的。

    【To G设计赋能】政府网站信息无障碍设计前言

    “信息无障碍”译自“”，是指任何人在任何情况下都可以平等、便捷、无障碍地获取和使用信息。以互联网环境为例，互联网产品可以让老年人、视障、听障、阅读障碍等用户顺利使用。

    近年来，随着互联网的快速发展，很多人开始广泛使用电子政务，政府也越来越多地通过网络向所有人提供信息和服务。国家统计局和残联数据显示，我国65岁及以上老年人有1.4亿人，残疾人有8502万人。分别为：视力障碍者1263万人； 2054万听力障碍者；以及 130 万有语言障碍的人。身体残疾人2472万人； 568万智力障碍者； 629万精神障碍者； 1386万多重残疾人。目前，我国31个省、276个地级市、1197个县级残联开通网站，积极推进残疾人证件智能化，发展“互联网+残疾人服务”。为了让残疾人无障碍地使用电子政务，为他们提供更加便捷、高效的服务，政府网站的无障碍性显得尤为重要。网站构建的所有内容都应该尽可能具有包容性、可访问性和可读性，为每个人设计，并为每个人服务。

    残疾分析

    信息无障碍涵盖了广泛的残疾类别，包括视觉、听觉、身体、言语、认知、语言、学习和神经障碍。我们可能无法满足所有类型、程度和多种残疾的需求，但我们可以开始分析和研究构成更大基数的特殊人群。

    视力障碍者： 1.视力低下。由于各种原因，双眼视力障碍或视野缩小，难以完成常人能做的工作、学习或活动； 2.色盲，分为全色盲和部分色盲（红色盲）。 、绿色盲、蓝黄盲等），无法区分A颜色或某种颜色； 3、色弱，包括全色弱和部分色弱（红弱、绿弱、蓝黄弱等），能看到颜色，但识别颜色的能力较慢或差； 4.盲人、因眼疾或意外伤害而失明的人。听力障碍：听力损失或双耳听力障碍，不能或听不到周围环境声音的人，包括全聋、听力困难、听力减弱的人。运动障碍人士：主要指手部不灵活或需要使用辅助设施的人士。它还包括在某些环境下无法正常用手操作的人。阅读障碍：最常见的特殊学习困难之一。在阅读中，他们会跳词、跳行、加词、替换词、倒读，或者无法理解阅读内容，混淆相似的词。老年人：可能会出现身体机能下降、记忆力减退、视力丧失等症状。

    要实现网站的信息可访问性，需要花费大量的时间、大量的研究和用户测试。不过，我们可以分阶段逐步推进转型。比如从整个网站的色彩对比入手，解决弱视人群的问题。问题。

    1. 使用良好的色彩对比度为弱视人士设计

    确保颜色对比度符合 WCAG 2.0（内容可访问性指南）标准是信息可访问性中非常重要的一步。如果我们在设计中做到这一点，我们还可以确保弱视人群能够更好地获取信息。

    根据WCAG 2.0标准： 对比度（AA级）：文本和文本图像的视觉呈现必须具有至少4.5:1的对比度；大文本：大文本（粗细为粗细时大于18px，粗细为粗细时大于24px）和大文本的图像对比度至少为3:1；对比度（AAA级）：文本的视觉呈现和文本图像的对比度至少为7:1；大文本：大文本（粗体粗细大于 18 像素，粗体粗细大于 24 像素）和大文本图像的对比度至少为 4.5:1。

    在附属内容、非活动界面组件、纯粹装饰性、作为徽标或品牌名称一部分的文本中，没有最低对比度限制。

    可以帮助我们在线测试对比度并调整颜色以满足标准

    Grid可以测试多种颜色组合是否符合WCAG 2.0对比度标准

    我用Grid对国内两个省级政务服务网站的颜色进行了测试，发现基本上只有主文本和副文本的颜色能够达到标准。网站大面积使用的品牌蓝色（链接颜色）字体大小必须大于18px。以满足对比度要求。

    英国政府网站是目前全球数字政府中最好的政务网站。在英国，政务服务是所有服务中使用时间最长、使用量最大的服务。他们的网站设计也非常注重信息的可访问性，并在这方面下了很大的功夫。

    经过测试发现，英国政府网站使用的颜色具有足够高的对比度，满足WCAG 2.0标准，整体颜色使用饱和度和亮度较低的颜色。加强色彩对比度不仅是为了让弱视人群更好地使用我们的产品，也是为了让显示设备较差的用户以及老年人有更好的产品体验。

    2. 针对色盲人群进行设计，避免仅使用颜色来传达信息。

    颜色在设计中发挥着重要作用，能够唤起情感、感觉和想法，并有助于增强品牌的信息和感知。然而，当用户看不到颜色或以不同的方式感知它们时，颜色的力量就会消失。对于无法区分颜色的色盲人来说，如果仅将颜色作为传达信息、表明信息重要性或区分视觉元素的唯一方式，他们很难感知。

    Stark（插件）可以模拟不同类型色盲人看到的效果来帮助我们设计

    在某个政府网站的注册表中，如果您在未填写任何信息的情况下点击注册按钮，必填字段的错误消息将在下面显示为红色文本。这种方法对于普通用户来说是可以感知的。右图模拟了红绿色盲人看到的效果。这样的话，错误信息的引导就会大大减少。

    英国政府网站上的错误信息对于色盲和色弱人群来说非常友好。除了红色提示文字外，输入框的边框也会加粗，并添加竖线表示未填写的表单项，提醒用户注意。另外，实际上有很多视觉处理方法可以达到传递信息的目的，例如在输入框内或提示文字之前添加感叹号图标。这种方法对于普通用户来说也会更加清晰。暗示。

    3.为盲人设计支持键盘导航

    网站对键盘导航的支持是可访问性最关键的方面之一。辅助功能指南提到，对于依赖屏幕阅读器的盲人和没有精确肌肉控制能力的人来说，需要通过键盘操作所有功能。使用键盘导航内容。

   

    当您浏览网站时，整体页面导航顺序应该是合乎逻辑的、可预测的且直观的。选项的顺序应遵循以下规则：从左到右、从上到下、顶部导航到内容区域，最后是页脚。

    我们可以尝试仅使用键盘来测试站点，使用 Tab 键移动焦点并使用 Enter 键选择元素。测试所有交互元素是否可预测且有序。如果不用鼠标就能浏览整个网站的所有内容，就证明该网站已经满足了支持键盘导航的基本要求。

    下图是国内某政府网站首页的导航区域。标记的数字是获得焦点的顺序。在使用键盘导航的过程中，整个页面的导航顺序比较混乱，并且无法通过键盘获取某些元素。

    相反，英国政府网站和澳大利亚政府网站的首页导航逻辑会更加清晰。整个网站遵循从左到右、从上到下的原则。每个交互元素都可以通过键盘访问，让用户感知整个网站。布局决定了每个内容的位置。

    当用户使用 Tab 键导航网站的交互元素时，焦点会提供当前所选组件的视觉指示。焦点可帮助用户了解界面上的哪些元素具有键盘焦点，并帮助他们了解在浏览网站时所处的位置。很多网站都使用浏览器默认的焦点样式，但我们也可以根据符合网站风格、与品牌相呼应的内容来设计焦点样式。

    英国政府网站重新设计了焦点样式，使用黄色突出焦点，让用户更清楚当前焦点在哪里。根据元素的不同，样式会发生变化。

    苹果官网的焦点样式也进行了重新设计，圆角输入框的焦点也进行了相应调整，使焦点与页面元素更加融合。

    为非文本内容添加替代文本

    视障人士经常使用屏幕阅读器来“收听”我们的网站。网站上的文本、图像、组件和其他信息都是通过屏幕阅读器朗读的。这时，为这些非文本内容添加准确的辅助替代文本就显得非常重要了。

    以下图为例。左图中搜索框按钮的替代文本是“按钮”。这样的描述会非常抽象，增加了视障人士的理解门槛，很容易让他们产生疑问：这个按钮的作用是什么？相对来说，右图中的处理就清晰很多。按钮的替代文本清楚地告诉用户这是一个搜索按钮。

    图片在设计中常常用来传达特定的感觉和渲染气氛。如果我们需要用替代文字来传达图片信息，可以尝试用简洁的语言来描述图片内容，以便视障人士能够快速获取信息。在他们的脑海中形成一幅图画，而不是仅仅告诉他们这是一幅图画。

    如果我们不向图像添加替代文本，屏幕阅读器将直接将文件名读取为字符串。尝试打开屏幕阅读器并闭上眼睛来“听”这种图片是一种非常不舒服的体验。

    此外，英国政府网站上还有很多细节值得学习。他们添加的标签说明非常清晰。当焦点切换到列表中的第一项时，会告诉用户列表中有多少项以及下拉菜单的当前状态，让视障人士能够了解列表的布局整个网站。同时，也大大提高了他们的安全感。

    提供多种验证码方式

    账户注册是用户开始业务办理的第一步，但这一步往往会给视障人士带来很大的阻力。目前，不少政务服务网注册流程验证方式仅提供图形验证码，但读屏器无法识别验证码中的文字信息。如果注册过程中出现障碍，即使对其他业务流程进行无障碍改进，对于视障人士来说也是毫无意义的。除了图形验证码之外，我们还应该提供多种验证方式供用户选择，比如手机验证码、语音验证码等。

    苹果网站注册过程中，验证方式除了提供图形验证码外，还提供语音验证码。

    快速访问内容

    对于只使用键盘导航的用户来说，他们希望在熟悉网站后可以直接访问页面内容。然而，许多网站的顶部导航中有多个菜单。用户在访问页面内容之前，需要一一切换链接到达页面内容，打开新页面，重复上述步骤。

    面对这样的问题，我们可以提供更加友好的解决方案。当用户开始使用键盘导航页面时，提供“跳到内容”链接，直接跳过每个页面上的重复内容，提高视障人士或键盘用户的操作效率。

    在使用键盘导航时，还提供了页面内及其他页面模块的导航菜单，让用户能够更快速地跳转到指定内容，更高效地使用。

    4. 为有听力障碍人士设计的视频添加字幕

    网站上的视频应尽可能带有字幕，以便有听力障碍的人能够结合视频片段理解内容。在政府网站的服务指南视频教程中添加字幕，也可以帮助听障人士更好地获取信息、更轻松地完成服务流程。此外，我们还可以提供详细的图文指南供用户选择。

    5. 旨在支持运动障碍人士的键盘导航

    如果一些运动障碍人士无法控制鼠标，他们实际上需要使用键盘来浏览网站。支持键盘导航的网站不仅是为盲人用户设计的，而且对于其他残疾人也非常重要。

    互动元素易于点击

    在设计控件时，还应改善行动障碍者和老年用户的用户体验，适当增加可点击的目标区域，并将按钮、菜单选项和链接做得足够大，以方便其操作。

    6. 为阅读障碍者设计图形、图片和文本相结合的布局

    由于患有阅读障碍的人在阅读文本时存在一定的困难，他们可能会跳词、跳行或添加单词。网站应尽量减少在同一位置出现大文本。 WCAG2.0中也提到单行宽度不能超过40个汉字或符号。通过标题、图片和列表的使用，保持文字表达简洁、内容清晰。对内容进行分解，缓解其阅读压力，从而为用户提供心理休息，提高内容的可读性。

    保持一致的对齐方式

    整个网站尽可能保持统一的对齐方式。英国政务网各模块内容均左对齐，遵循用户从左到右的浏览习惯，更加自然、高效。患有阅读障碍的人原本就有阅读困难。如果有多个对齐方式，就会使它们更加混乱。

    7. 为老年人设计时使用更大的字体

   

    为了保证老年用户能够清晰地浏览网站，并且考虑到并非每个用户都使用高分辨率的显示设备，大的字体大小对他们来说非常重要。同时，我们还需要避免拥挤的大段文字，尽量合理分解信息，增加留白，通过排版组合让用户更加清晰明了地获取信息。

    英国政府事务网站的文本系统中，采用较大的字体进行组织，最小的文本也采用19px的字体大小。

    考虑到用户对字体大小显示的不同需求，香港政府网站的顶部导航还提供了字体大小的入口，指导用户如何在不同浏览器下设置字体大小，以便他们设置显示最适合他们阅读的效果。

    减少手动输入

    很多老年人到了一定年龄后，身体机能和记忆力就会开始逐渐下降，这使得他们操作网站界面变得更加困难。拼写输入是最大的障碍之一。我们应该尽量减少用户手动输入拼写的需要。在业务处理过程中，填写个人信息时，您可以优先从账户信息中拉取相关内容。对于其他信息补充，对于能够提供选项的内容应尽可能使用选择控件。

    浏览路径简单明了

    为了让老年人更好地浏览网站内容，页面布局和模块划分应保持清晰，为他们提供简单明了的视觉动线，使整个网站内容直观易懂。

    概括

    针对不同类型的用户群体，我们应该思考如何为他们设计和提供更高效的服务，让每个人都能平等、便捷、无障碍地获取信息。

    专为视障人士设计

    使用良好的颜色对比度 使用可读的字体大小 使用颜色、图形和文本的组合来传达信息 支持键盘导航 为非文本内容添加替代文本

    专为听力障碍人士设计

    为视频添加字幕。使用标题、图片、列表等对内容进行分解，保持内容清晰、简洁、逻辑性强。

    专为行动障碍人士设计

    支持键盘导航，交互元素易于点击

    专为阅读障碍人士设计

    使用图形、图像和文本的组合来保持一致的对齐方式并保持内容清晰简洁。

    专为老年人设计

    使用较大的字体使浏览路径简单明了，减少手动输入。互动元素很容易点击。

    无障碍设计并不意味着网站看起来不好。相反，它会给我们的思维过程带来一些限制。在这些约束下，我们将探索如何让我们的设计适用于所有用户，为每个人设计，为每个人提供更好的政府服务。

    参考

    ” “

    ““缺口

    “因为这并不难”

    《为了和》巴勃罗

    “如何打造团队”里斯

    《每个人都需要知道的 7 件事》杰西

    网页内容无障碍指南 (WCAG) 2.0

    CDC