打造无障碍的线上商店

无障碍是指在设计线上商店时，确保包括视觉、听觉、行动或认知障碍在内的所有客户，都能无障碍地浏览、理解商店内容并完成购买。提升商店的无障碍程度，不仅能帮助您触及更广泛的客户群体，还能降低法律风险美国的《美国残疾人法案》(ADA) 与欧洲经济区的《欧洲无障碍法案》(EAA) 等法规，正日益要求线上企业达到无障碍标准。

本指南将说明如何撰写有效的图片描述、规划标题层级、添加视频字幕、选择具无障碍性的色彩，以及清楚标注表单栏位。

了解线上商店的网页无障碍标准

全球多数无障碍规范都以《网页内容无障碍指南》(Web Content Accessibility Guidelines，简称 WCAG）为基础，这是一套国际公认的标准，旨在让身心障碍人士也能顺利使用数字内容。WCAG 涵盖的范畴包括内容的描述方式、页面的结构方式，以及访客与表单、链接、媒体互动的方式。

无障碍设计中许多技术层面，例如页面结构与键盘导览，已由 SHOPLINE 主题与组件处理。以下各节将说明身为商家的您可以采取哪些措施让商店内容更具无障碍性。

为商品图片与横幅图片添加替代文字

屏幕阅读器会依赖替代文字（Alt Text，一段简短的文字描述）向看不到图片的客户说明图片内容。
如需添加有效的替代文字，请在商品页面、横幅或分区图片设置中打开您要描述的图片，然后在替代文字栏位中输入简洁的描述。您添加替代文字的位置会因图片类型而异：

• 商品图片：前往【商品】，选择该商品点击【封面图片】，然后添加或更新【ALT 属性】。
• 横幅或分区图片：前往【设置】>【文件库】，点击选定的图片，然后添加或更新【ALT 属性】。

撰写替代文字时，请遵循以下最佳实践：

• 为图片添加简洁的描述，说明图片内容及其重要性，而不是仅标注为「图片」或「照片」。
  • 商品照片：描述商品本身，例如「藏青色纯棉圆领毛衣，折叠放置于木桌上」。
  • 横幅或促销图片：描述图片传达的讯息，例如「夏季促销横幅：泳装全场 7 折」。
• 仅当图片纯属装饰、不含任何信息（例如背景纹理）时，才将替代文字栏位留空。
• 若图片本身是可点击的链接，例如导向某个分类页面的横幅，替代文字应描述该链接的目的地或动作，而非图片本身，例如「选购夏季系列」而非「沙滩照片与太阳眼镜」。

撰写清楚的链接与按钮文案

使用屏幕阅读器的客户，经常会在链接与按钮之间跳转来浏览页面，有时并不会阅读周围的文字。撰写清楚、具描述性的链接与按钮文案，能帮助客户理解链接会前往何处，或按钮会执行什么操作。

撰写链接与按钮文案时，请遵循以下最佳实践：

• 将「点击这里」或「了解更多」等模糊字词，替换为能描述目的地或动作的文字，例如「查看运费政策」或「加入购物车」。
• 同一份文案不要用于不同的目的地如果两个链接分别导向不同文件，请勿使用相同文案标注。请使用「下载 PDF」与「下载 Word 版本」，而非两个相同的「下载」链接。
• 当链接会开启新分页或下载文件时，请让客户知悉，例如「下载我们的尺寸指南（PDF，2MB）」。
• 请勿仅依靠颜色来区分链接与周围文字，请加上底线或其他视觉提示，例如客户将鼠标悬停在链接上时的样式变化。

正确规划页面标题层级

屏幕阅读器会利用标题层级（类似目录的概念），协助客户浏览页面并理解其结构。正确使用标题层级，也能提升内容整体的组织性与可读性。

在主题编辑器中排列分区时，若要让标题保持无障碍性，请遵循以下最佳实践：

• 每个页面仅使用一个主标题（标题 1），该标题应呈现页面的核心主题，例如商品名称或分类标题。
• 标题层级须依序排列，不可跳级。例如，标题 2 之后不应直接接续标题 4。
• 使用标题样式来呈现内容结构，而非仅用来调整文字大小。请勿为了强调某段文字，而将非小节标题的内容套用大标题样式。

设置具无障碍性的轮播图

轮播图或幻灯片若会自动切换，可能对无障碍体验造成困扰。如需让轮播图保持无障碍性，建议将轮播图设置为预设不自动播放。

为视频添加字幕

字幕能帮助听障或有听力困难的客户理解视频内容，也能改善在静音状态下观看视频的客户的观看体验。

在为商店添加视频时，请遵循以下最佳实践：

• 为您上传至商店的所有视频添加字幕，尤其是商品演示或品牌视频。
• 为纯音频内容（例如播客或旁白）提供文字稿。
• 避免使用会自动播放声音的视频，因为这可能会让使用屏幕阅读器的客户感到困扰。

选择具无障碍性的色彩组合

文字与背景之间充足的对比度，能让视力较弱或色盲的客户更容易阅读商店内容。 在自定义主题色彩时，请遵循以下最佳实践：

• 正文文字与背景之间的对比度，建议至少达到 4.5:1。
• 大字体文字（18pt 以上，或 14pt 粗体以上）及图标，建议对比度至少达到 3:1。
• 避免仅依靠颜色传达信息，例如仅以红色标示必填表单栏位。请将颜色与文字或图标搭配使用。
  • 示例：低对比度的文字与按钮在背景上难以辨识。
    
  • 示例：较高对比度的文字与按钮在背景上更容易辨识。
    

选择具无障碍性的文字对齐方式

两端对齐的文字（左右两侧同时对齐）会造成字母与词语间距不均，可能让有阅读障碍或低视力的客户更难阅读。

在为商店内容排版时，请遵循以下最佳实践：

• 在商品描述、横幅及其他页面内容中，使用靠左对齐，而非两端对齐。
• 若分区或自定义内容区块提供对齐设置选项，请选择靠左对齐，而非两端对齐。
  • 示例：两端对齐的文字会造成字距不均。
    
  • 示例：靠左对齐能让字距保持均匀一致。
    

清楚标注表单栏位

如果您的商店使用表单，例如订阅通讯、联络表单或自定义结账栏位，清楚的标签能帮助每位客户了解应填写的内容。

如需以具无障碍性的方式标注表单，请遵循以下最佳实践：

• 为每个栏位提供常驻可见的标签，请勿仅依赖占位符文字， 因为客户一开始输入，占位符文字就会消失。
• 清楚标示必填栏位，包括视觉呈现（例如加上星号并附说明）以及栏位标签文字本身（例如「电子邮件（必填）」）。
• 撰写清楚、具体的错误信息，让客户了解哪里出错以及如何修正，而不是仅显示笼统的「输入无效」。