页面 · 功能Web accessibility · a11y
网页无障碍
网页无障碍就是让视力不好或手部不便的顾客也能顺畅使用网站。
就像在店门口铺一条坡道、把菜单字写大一些。对所有人来说都更方便。
再详细一点
把屏幕内容朗读出来的读屏软件看不到图片，所以会朗读图片说明（alt）。没有说明的话，那张图片就等于不存在。
文字和背景的颜色差（明度对比）要足够大。国际标准（WCAG）建议普通文字的对比度至少达到4.5:1。
做好无障碍，年长的顾客、在阳光下用手机浏览的顾客也会觉得更方便，搜索引擎也能更好地理解内容。根据行业和规模，有些情况下法律会要求做到无障碍，需要事先确认。
网页无障碍按什么标准来判断？
网页无障碍以国际标准WCAG（网页内容无障碍指南），以及在此基础上制定的韩国本土标准KWCAG（韩国型网页内容无障碍指南）来判断。WCAG由W3C制定，目前的推荐版本是2.2版；韩国国内使用的是KWCAG 2.2版。
两套标准都从四项原则出发。原则的名称听起来很难，但放到店铺网站上看，意思其实很简单。
普通店铺的网站也很适合参考这套标准。这样您可以和制作公司用同一套语言讨论无障碍做到了哪一步，以后想提高标准时，起点也很清楚。
表格可以左右滑动查看
| 原则 | 含义 | 在店铺网站上 |
|---|---|---|
| 可感知性 | 所有顾客都要能看到或听到内容 | 图片描述、足够的文字对比度、视频字幕 |
| 可操作性 | 所有顾客都要能使用按钮和菜单 | 用键盘也能预约、按钮尺寸足够大 |
| 可理解性 | 内容和使用方法要能看懂 | 浅显的文案、输入框名称、易懂的错误提示 |
| 健壮性 | 在各种设备 · 辅助软件上都要正常运行 | 符合标准的代码、兼容读屏软件 |
小店铺的网站也有网页无障碍的法定义务吗？
网页无障碍的法律依据是韩国《禁止歧视残疾人及权利救济等相关法律》，适用对象和时间由施行令分阶段规定。因此很难一概而论说“所有店铺义务都一样”，具体会因经营形态和规模而不同。
您的店铺是否属于适用对象，最准确的做法是在韩国国家法令信息中心查看法律和施行令原文，或咨询专业人士。如果参与公共机构项目或投标，有时还会被要求提供网页无障碍质量认证。
抛开法定义务不谈，做好无障碍就是少流失顾客。开始老花眼的老顾客、一只手抱着孩子用手机的顾客，也同样能受益。
网页无障碍质量认证与法定义务是两回事，它是通过审核确认是否符合标准、再授予认证的制度。小店铺即使不去申请认证，只要参考标准把基础做好，就已经很有意义。
文字颜色对比度4.5:1怎么检查？
颜色对比度是用数字表示文字颜色和背景颜色亮度差的数值，把两种颜色输入免费的对比度检测工具就能马上知道。WCAG 2.2成功标准1.4.3要求：普通文字达到4.5:1以上，大号文字（18磅以上，粗体为14磅以上）达到3:1以上。
设计中最容易出问题的地方是：浅灰色的提示文案、照片上的白色文字、品牌色按钮上的文字。照片上的文字在照片较亮的部分对比度会下降，所以要把照片稍微调暗，或在文字后面垫一层半透明背景。
Logo和装饰性文字不在这个标准之内。但价格 · 营业时间 · 按钮这类顾客必须看清的文字，要一个不漏地检查。
同时也要注意不要只靠颜色传达信息。像“红色日期表示已满”这样只用颜色区分，难以分辨颜色的顾客就看不出来，所以要同时加上“已满”字样或标记。
自己可以怎样检查网站的无障碍？
即使没有专业工具，基本问题也能自己找出来。下面的检查只要有电脑和手机，20~30分钟就能完成。
发现问题时，把位置截图发给制作公司就可以了。问题说得越准确，修改也越快。
如果读屏功能在某处只读出“图片”“按钮”，说明那里缺少描述或名称。对顾客来说这是不知道用途的按钮，应该最先修改。
- 01在电脑上不用鼠标，只用Tab键在菜单之间移动，一路走到预约 · 咨询。
- 02用Tab键移动时，确认能否看到边框之类的标记，显示当前所在位置。
- 03把浏览器放大到200%，看看文字有没有重叠或被截断。
- 04打开手机的读屏功能（iPhone的VoiceOver、安卓的TalkBack），听一听首屏内容。
- 05在预约 · 咨询表单中，确认每个输入框都显示名称，输入错误时会提示哪里错了。
- 06如果有视频，确认是否有字幕、不开声音也能看懂内容。
不同行业的网站无障碍要特别注意哪里？
每个行业顾客必须看到的信息不同，先确认这些信息是否可以无障碍获取就行。下面是小店铺经常忽略的地方。
如果店里老年顾客多，还要注意字号。很多顾客在手机设置里把字体调大了，请确认字体放大后按钮文字会不会被截断或重叠。
需要改的地方看起来再多，也不必一次全部改完。从预约 · 咨询 · 价格这类顾客一定会经过的页面开始，依次修改即可。
- 咖啡馆 · 餐厅：菜单只用图片上传的话，读屏软件读不出来。菜单和价格也要用文字写出来。
- 美发店：预约表单的日期 · 时间选择不要只能用鼠标操作，并给输入框加上名称。
- 工坊：课程介绍视频要加字幕，所需材料 · 所需时间也要用文字写出来。
- 网店：整张长图式的详情页，要把核心信息（材质 · 尺寸 · 配送）同时用文字写出来。
网页无障碍常见的错误有哪些？
最常见的错误是想在上线前一口气把无障碍问题全部改完。颜色 · 字号 · 表单结构在设计阶段就已确定，从一开始就定好标准会轻松得多。
只看自动检测工具的分数就结束也很可惜。工具能告诉您图片描述“有没有”，却判断不了“写得对不对”，所以一定需要人工亲自确认。
无障碍不是调整一次就结束的事。每次上传新照片、新活动横幅、新菜单时，都要重新注意图片描述和文字对比度，所以负责运营的人了解基本规则很重要。
网页无障碍要问网站制作公司哪些问题？
如果制作公司说“已经做好无障碍”，请拿到他们按什么标准、如何确认的结果。以后要修改或交给别家时也用得上。
- 无障碍标准（WCAG · KWCAG）会做到什么程度？
- 在设计稿阶段会检查文字对比度吗？
- 只用键盘能完整完成预约 · 咨询吗？
- 上线后上传照片时，有没有方便您填写描述（alt）的输入框？
举个例子
- 在浅灰色底上用白字写营业时间，很多顾客都很难看清。
- 与其写“点击这里”，不如写成“查看全部菜单”，只读按钮文字就能明白意思。
只需确认这些
- 每张图片是否都有说明（alt）
- 文字和背景是否区分明显
- 在手机上放大页面后，布局是否不会错乱
- 只听按钮文字是否就知道它是做什么的
我的店需要吗？
所有网站都适用。如果店里年长的顾客多，更要多加留意。
在ISSYMO
为每张图片写说明（alt）已包含在搜索 · AI曝光基础设置中。无障碍标准要做到什么程度，我们会在会议中和您一起确定。
常见问题
参考资料
最后更新于