Web 内容无障碍指南 (WCAG) 2.1 由万维网联盟的一个工作组起草。它包含一系列非技术层面的准则及成功标准,旨在确保残障人士能够访问并使用 Web 内容。
作为对该准则的介绍,联盟提供了一系列条款和支持文档:
此外,请参阅:
该指南根据三个一致性级别进行分级:A 级(最低)、AA 级和 AAA 级(最高)。簡言之,層級的定義如下:
在创建站点时,您应该大体上确定希望自己的站点符合哪个等级。
以下部分介绍 WCAG 2.1 准则的各个层面以及符合 A 级和 AA 级的相关成功标准。
在本文件中,使用了以下内容:
准则 1:可感知 – 信息和用户界面组件必须以可感知的方式呈现给用户。
指南 1.1 文本替代:为任何非文本内容提供替换文本,以便可以将其更改为人们需要的其他形式,例如大字体、盲文、语音、符号或更简单的语言。
网页上的信息可以多种不同的非文本格式提供,例如图片、视频、动画、图表和图形。盲人或有严重视力障碍的人无法看到非文本内容。但是,他们可以通过屏幕阅读器读取文本内容或通过盲文显示设备以触觉形式呈现文本内容来访问相关内容。因此,通过为图形格式的内容提供替换文本,无法看到该内容的用户便可以获取与该内容中提供的信息相对等的文本内容。
另一個實用的優點是,替代文字功能可讓搜尋引擎技術為非文字內容編制索引。
对于静态图形,基本的要求是为图形提供对等的替换文本。该方法可以在替换文本字段中完成。例如,参见核心组件图像。
某些开箱即用的核心组件(例如**轮播)没有提供用于向单个图像添加替换文本描述的替换文本**字段,尽管存在适用于整个组件的标签字段(辅助功能选项卡)。
在为您的 AEM 实例实施这些版本时,您的开发团队必须配置此类组件以支持 alt
属性。这样做可确保作者可以将其添加到该内容中(请参阅添加对其他 HTML 元素和属性的支持)。
默认情况下,AEM 要求填写替换文本字段。如果图像是纯粹的装饰并且不需要替换文本,则可以选中图像具有装饰性选项。
非文字內容有多種形式,因此替代文字的值取決於圖形在網頁中所扮演的角色。 您可能会觉得有帮助的一些一般规则包括:
以下特定类型的非文本内容可能需要替换文本:
说明性照片:指人物、对象或地点的图像。考虑照片在页面中的作用,以及推荐使用的图像内容描述,这非常重要,因为辅助技术可宣布元素类型(例如,graphic
或 image
)。在替代文本描述中使用 screenshot
或 illustration
可以提高清晰度,但这取决于上下文。一致性是一个重要因素,在做出某项决策时,该决策应该是面向整个创作团队的,并且应被应用于整个用户体验中。
图标:指传递特定信息的小图形符号(图形)。页面和站点上使用的图标必须保持一致。图标在页面或站点上出现的所有实例都应使用相同的简短替换文本,除非这样做会与相邻的文本产生不必要的重复情况。
图表和图形:通常用于表示数值数据。因此,替代文本的选择之一就是简要地总结图表或图形中表现出来的主要趋势。如有必要,还可以在高级图像属性选项卡中的描述字段中以文本形式提供更加详尽的描述。此外,还可以在页面或站点的其他位置以表形式提供源数据。
映射、示意图、流程图:对于提供空间数据的图形(例如,支持描述对象之间的关系或者某个流程),请确保以文本格式提供关键消息,并且此文本信息位于每个关联的数据点附近。对于映射,提供等效完整文本可能不太现实,但如果提供映射来作为帮助相关人员找到特定位置的一种方法,则映射图像的替换文本可以简短地指示为 X 映射,然后在页面其他位置的文本中或者通过图像组件高级选项卡中的描述字段提供该特定位置的说明。
CAPTCHA:
验证码:验证码 (CAPTCHA) 是 Completely Automated Public Turing test to tell Computers and Humans Apart(全自动区分计算机和人类的图灵测试)的缩写。這是用於網頁的安全性檢查,可區分人類與惡意軟體,但可能會導致存取障礙。 這些影像需要使用者描述他們所看到的內容,以便通過安全性測試。 为这些图像提供替代文本是不可能的,因此必须思考出非图形的替代解决方案。W3C 提供了一些建议。这些方法中的每一种都有其自身的优点和缺点。
背景图像:背景图像是使用层叠样式表 (CSS) 而不是 HTML 实现的。这就意味着无法指定替换文本值。因此,背景图像不应提供重要的文本信息 - 即便提供,这些信息必须也要在页面的文本中有所提及。尽管如此,当图像无法显示时,也应务必显示替代背景。
背景和前景文字之間應該要有適當等級的對比,詳情請參閱 對比(最小) (1.4.3).
准則1.2以時間為基礎的媒體:提供以時間為基礎的媒體替代方案。
此准则涉及“基于时间”**的 Web 内容。这包括用户可以播放的内容(例如,视频、音频和动画内容),这些内容可以是预先录制的,也可以是实时流传输的。
以下用户可能会遇到音频和视频的无障碍问题:
使用不支援以特定媒體格式(例如AdobeFlash)播放內容的瀏覽器或裝置的人也可能無法播放視訊或音訊。
以不同格式提供此資訊,例如文字(或沒有音訊的視訊)可讓無法存取原始內容的人存取這些資訊。
如果音频或视频内容是作为同一网页上存在的其他格式内容的替换内容提供的,则可能不需要其他替换文本。
准则《了解 WCAG 1.2.1》提供了进一步的信息。
在 AEM 网页中插入多媒体的方式与插入图像类似。但是,多媒体内容与静态图像相比还是更为复杂,而且在控制多媒体的播放方式时有各种不同的设置和选项。
如果将多媒体与信息性内容结合使用,则也必须创建替代内容的链接。例如,要加入文本记录,应创建一个用于显示记录的 HTML 页面,然后在音频内容旁边或下方添加一个链接。
耳聋或听力欠佳的用户无法或很难获取音频内容。註解是口語和非口語音訊的對等文字,會在視訊期間的適當時間顯示在畫面上。 它們可讓無法聽到音訊的人瞭解正在發生的事情。
字幕有以下两种形式:
尽量使用隐藏字幕,因为这样用户可以选择是否观看字幕。
对于隐藏式字幕,必须以适当的格式(如 SMIL)为对应的视频文件创建并提供同步字幕文件(与此相关的详细操作说明不在本指南的范围之内,但是我们在更多信息 - 字幕(预先录制)(1.2.2) 中提供了一些教程的链接。确保提供注释或在视频播放器中启用字幕功能,以便让用户知道视频有字幕可看。
如果您必須使用開啟的註解,請將文字內嵌到視訊曲目中。 這可以使用視訊編輯應用程式來完成,該應用程式允許將標題覆蓋在視訊上。
c
如果视频或动画中的信息仅以可视形式呈现,或者音轨提供的信息不足以让用户了解视频或动画中正在播放的内容,则失明或患有视觉障碍的用户将会遇到无障碍问题。
有兩種方法可達成此成功標準。 兩者皆可接受:
至于如何创建带有音频描述的视频,具体细节不在本指南的范围之内。创建视频和音频描述非常耗时,但是 Adobe 的其他产品可以帮助您完成这些任务。
该成功标准与字幕(预先录制)的标准完全相同,因为其用途在于解决耳聋或听力欠佳的用户遇到的辅助功能问题,两者的不同之处在于该成功标准需要处理网络直播等实时演示。
遵循上面字幕(预先录制)所提供的指南。但鉴于媒体的实时性质,必须尽可能以最快的速度提供字幕,并对正在发生的情况做出回应。因此,应当考虑使用实时字幕工具或语音转文本工具。
与此相关的详细说明不在本指南的范围之内,但是以下资源提供了有用的信息:
此成功标准与音频描述或替代媒体(预先录制)的标准几乎完全相同,唯一不同之处在于,作者必须提供更加详细的音频描述才能符合 AA 级标准。
遵循音频描述或替代媒体(预先录制)所提供的指南。
指引1.3改寫:建立可以不同方式呈現的內容(例如更簡單的版面),而不會遺失資訊或結構。
本指引涵蓋支援以下人員所需的需求:
可能无法访问作者使用相应内容的默认呈现方式呈现的信息(例如,多列布局或大量使用颜色和/或图像的页面)的用户。
可能要使用纯音频内容或可视替代显示方式(如大文本或高对比度)的用户。
残障人士使用的许多辅助型技术都依赖结构性信息才能有效地显示或“理解”**内容。此結構資訊可以採用頁面標題、表格列和欄標題以及清單型別的形式。 例如,熒幕助讀程式可讓使用者在標題之間導覽頁面。 但是,當頁面內容似乎只有透過視覺樣式而非基礎HTML的結構時,則沒有可用於輔助技術的結構資訊,限制其支援更輕鬆瀏覽的能力。
该成功标准旨在确保此类结构性信息通过 HTML 或其他代码技术以编程的方式提供,这样浏览器和辅助型技术便可以访问并利用这些信息。
AEM 允许轻松地使用相应的 HTML 元素构建语义上有意义的 Web 内容。可在 RTE(一种文本组件)中打开页面内容,然后使用段落格式菜单(段落符号)指定相应的结构元素(例如,段落、标题等)。
在适用的情况下,您可以使用以下元素来确保网页具有相应的结构:
标题:只要您启用了 RTE 辅助功能,AEM 就会提供三个级别的页面标题。您可以使用这些标题标识内容的章节和子章节。标题 1 是最高级别的标题,标题 3 是最低级别的标题。系统管理员可以配置系统以允许使用更多标题级别。
列表:可以使用 HTML 指定三种不同类型的列表:
<ul>
元素用于表示无序(项目符号)列表。单个列表项使用 <li>
元素进行标识。<ol>
元素用于表示编号列表。单个列表项使用 <li>
元素进行标识。如果您想要將現有內容變更為特定清單型別,請反白適當的文字並選取適當的清單型別。 如同先前顯示如何輸入段落文字的範例一樣,適當的清單元素會自動新增至您的HTML。
在全屏模式下,单个项目符号列表和编号列表图标可见。 当不处于全屏模式时,这两个选项在单个列表图标的后面可用。
表:数据表必须使用 HTML 表元素进行标识:
<table>
元素<tr>
元素进行标识<th>
元素进行标识<td>
元素进行标识此外,辅助表会使用以下元素和属性:
<caption>
元素用于为表提供可视描述。默认情况下,描述显示在表上方居中的位置,但是可以使用 CSS 相应地调整位置。描述采用编程方式与表相关联,因此这是一种提供内容简介的有用方法。<summary>
元素通过总结视力正常的用户可以看到的内容,帮助失明的用户更加轻松地了解表中提供的信息。当使用了复杂或非常规的表布局时,这种工作流程非常有用(该属性不会显示在浏览器中,只会由辅助型技术读取)。<th>
元素的 scope
属性用于指示某个单元格表示特定行的标题,还是特定列的标题。在复杂的表中,即数据单元格可能与一个或多个标题相关联的情况下,类似的方法是使用标题和 id 属性。默认情况下,这些元素和属性不直接可用,但系统管理员可以在表属性对话框中添加对这些值的支持(请参阅添加对其他 HTML 元素和属性的支持)。
若要開啟 表格 對話方塊,您可在其中選取 表格屬性 標籤:
然後,您可以使用 儲存格屬性 若要選擇儲存格是資料或標題儲存格:
强调:使用 <strong>
或 <em>
元素指示要强调的内容。切勿在段落中使用标题突出显示文本。
突出显示要强调的文本;
单击属性面板中显示的 B 图标(表示 <strong>
)或 I 图标(表示 <em>
)(确保已选择 HTML)。
标准 AEM 安装中的 RTE(富文本编辑器)设置为:
<b>
对象<strong>
<i>
对象<em>
尽管两种形式效果相同,但是最好使用 <strong>
和 <em>
,因为从语义上来讲,它们才是正确的 HTML 标记。开发团队在开发项目实例时,可以将 RTE 配置为使用 <strong>
和 <em>
(而非 <b>
和 <i>
)。
复杂数据表:有时,一些复杂表拥有两级或更多级标题,此时,基本的表属性可能不足以提供所有必需的结构性信息。对于此类复杂表,需要使用标题和 id 属性在标题和与之相关的单元格之间建立关系。
ID屬性無法在現成可用的安裝中使用。 可透過設定HTML規則和RTE中的序列化程式來啟用。
例如,在下表中,标题和 ID 是相匹配的,以便为辅助型技术用户建立程序化关联。
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
要在 AEM 中实现此操作,使用源代码编辑模式直接添加标记。
在標準安裝中,此功能無法立即使用。 它需要設定RTE、HTML規則和序列化程式。
此成功标准旨在使用户代理既能够提供内容的替代呈现方式,同时还能保留理解内容含义所需的阅读顺序。能够以编程方式确定至少一个有意义的内容呈现顺序,这一点很重要。当辅助技术以错误的顺序阅读内容,或者在应用替代样式表或其他格式更改时,不符合此成功标准的内容可能会使用户感到困惑或是不知所措。
遵循如何达到成功标准 1.3.2 中的准则。
设计者往往关注可视设计特征,如颜色、形状、文本样式,或者内容在展示信息时所在的绝对或相对位置。在传达信息方面,这些可能是强大的设计技术(可以改善具有认知无障碍需求的视力正常用户的整体无障碍体验),但是失明或患有视觉障碍的用户可能无法访问需要视觉识别属性(例如位置、颜色或形状)的信息。
同样,如果用户在获取信息时必须辨认不同的声音(例如,男性或女性讲话的内容),而且音频内容没有反映在任何替代文本中,则患有听觉障碍的用户就会遇到辅助功能问题。
有關替代顏色的需求,請參閱 使用顏色.
請確定任何依賴頁面內容視覺特性的資訊也會以替代格式呈現。
如果用户在非可视上下文中可以理解使用的描述性词语的含义,则可以使用描述性词语。例如,使用 以上 和 以下 通常可以接受,因為它們分別表示特定內容專案之前和之後的內容;當朗讀內容時,這仍然有意義。
准則1.4可區分:讓使用者更容易檢視和聆聽內容,包括將前景與背景分開。
此成功標準特別針對色彩感知。 其他形式的認知包含在 可調整(1.3);包括程式化存取顏色和其他視覺化簡報編碼。
颜色能够有效地增强网页的美感,而且还有助于传递信息。但是,由于各种视觉障碍(从失明到色盲)的限制,部分用户无法辨认某些颜色。这就使颜色编码无法可靠地提供信息。
例如,一些患有红绿色盲症的用户无法辨认绿色和红色阴影。这些用户可能会将这两种颜色看成第三种颜色(如棕色),在这种情况下,他们就无法辨认红色、绿色和棕色。
此外,如果用户使用仅支持文本的浏览器、单色显示设备或查看黑白打印的页面,他们也无法感知到颜色。
还需要考虑的一个事项是界面元素(例如,选项卡、切换按钮等)的“选定”**状态,这些状态需要以颜色和视觉呈现方式以外的其他某种方式传递。对于这些元素,在创建不依赖特定感官的全包容用户体验时,额外使用图案、形状和编程信息将很有帮助。
无论在何处使用颜色传递信息,都应确保无需看到颜色即可获取相应的信息。
例如,确保通过颜色传递的信息也明确地提供在文本中。
如果颜色用作提供信息的线索,则还应该提供其他可视线索,如更改样式(例如,粗体、斜体)或者字体。 这样可以帮助弱视或色盲的用户识别信息。但是,不能完全依赖这种方法,因为这对于根本无法看到页面的用户而言并无助益。因此,提供隐藏文本或使用编程解决方案(例如 Web 标准的无障碍的富因特网应用程序 (ARIA) 套件)将此信息传递给失明用户将非常有用。
如果同时还有其他音频正在播放,则使用屏幕阅读软件的用户可能会难以听清语音输出。尤其是当屏幕阅读器的语音输出是基于软件的(现今大多数都是如此),并且是通过与系统声音相同的音量控制来调控时,这种困难就会加剧。此外,一些患有认知障碍和神经系统障碍的用户可能对声音敏感。这些用户认为无法更改音频内容的音量将会造成干扰。
因此,用户能够关闭背景声音是非常重要的。
控制音量包括能够将音量减小到零。
遵循如何达到成功标准 1.4.2 中的准则。
成功标准 1.4.3
AA 级
對比(最小):文字的視覺化呈現和影像的對比率至少為4.5:1,以下除外:
请参阅了解非文本对比度获取更多详细信息,从而帮助确保内容作者了解有关非文本元素(包括图标、界面元素等)的其他要求。
有某些視覺障礙的人可能無法分辨某些低對比的顏色配對。 如果出现以下任一情况,此类用户便可能遇到无障碍问题:
純粹用於裝飾目的的文字會從此成功標準中排除。
請確定文字與其背景的對比度已足夠。 對比率視相關文字的大小和樣式而定:
请记住,字体在呈现同等 PT/PX/EM 大小的方式上可能有所不同。
在为 Web 内容选择适当的字体和大小时,请在可读性和可用性方面做出良好的判断。
对以下短语执行网络搜索,以查找可以帮助您转换为其他单位的工具:
要检查对比度,可使用颜色对比度工具,例如 Paciello Group Color Contrast Analyzer 或 WebAIM Color Contrast Checker。這些工具可讓您檢查顏色配對,並報告任何對比問題。
或者,如果您不太在意頁面外觀的指定,則可以選擇不指定背景和前景文字顏色。 在这种情况下,无需检查对比度,因为用户的浏览器会确定文本和背景的颜色。
如果页面无法达到建议的对比度级别,则必须提供一个链接以指向该页面的对等替代版本(不存在颜色对比度问题),或者允许用户根据自己的要求调整页面颜色方案的对比度。
此成功标准旨在确保成功缩放视觉呈现的文本,包括基于文本的控件(已显示出来供用户查看的文本字符,[与仍以 ASCII 等数据格式表示的文本字符]),以便具有轻微视觉障碍的用户可以直接阅读相关内容,而无需使用屏幕放大镜等辅助技术。网页上的所有内容都能缩放,这一点或许能够让用户受益,但文本是最关键的。
除了遵循如何达到成功标准 1.4.4 下的准则外,您还可以鼓励内容作者在其页面设计和字体大小(例如,响应式 Web 设计)中使用不固定、灵活的宽度和高度,以便读者可以调整文本大小。
標誌型別(屬於標誌或品牌名稱的文字)被認為是必要的。
当需要文本的某种特定样式时,通常会使用文本的图像;例如,商标标志或从其他来源生成的文本(如纸质文档的扫描件)。 然而,與以HTML呈現並使用CSS設定樣式的文字相比,文字的影像在變更大小或外觀方面缺乏彈性,而這對於視覺障礙或閱讀困難的人可能是必要的。
如果必须使用文本的图像,应使用 CSS 将文本的图像替换为 HTML 形式的对等文本,这样就可以对文本进行自定义。有关如何实现这一操作的示例,请参阅 C30:使用 CSS 将文本替换为文本的图像并提供用于切换的用户界面控件。
此准则涉及的是,确保用户可以使用键盘访问所有功能。
此成功标准旨在确保在可能的情况下,通过键盘或键盘接口(以便使用替代键盘)来操作内容。对于视觉障碍人士(无法使用鼠标等需要手眼协作的设备的人),以及必须使用替代键盘或充当键盘模拟器的输入设备的人士而言,如果内容是可以通过键盘或替代键盘操作的,那么他们就能够操作这些内容。键盘模拟器包括语音输入软件、通过呼吸来操作的软件、屏幕键盘、扫描软件以及各种辅助技术和备用键盘。此外,视力欠佳的人也可能难以跟踪指针,如果可以通过键盘控制指针,他们会发现使用软件会容易得多(或者这是他们能够使用软件的唯一方法)。
遵循如何达到成功标准 2.1.1 中的准则。
此成功标准旨在确保内容不会陷入网页内容子部分中的键盘焦点内。当一个页面综合采用了多种格式以及使用插件或嵌入式应用程序渲染页面时,经常会出现这种问题。
有时,网页的功能会将焦点限制在内容的子部分(例如,模态对话框)。在这种情况下,您应该为用户提供一种方法,使其能够退出该内容的子部分(例如,按 ESC 键关闭模态对话框,或者使用“关闭”按钮关闭模态对话框)。
遵循如何达到成功标准 2.1.2 中的准则。
准则 2.2 充足的时间:为用户提供充足的时间来阅读和使用内容。
此准则涉及的是,确保用户有充足的时间来阅读内容并执行操作。
此成功标准旨在确保残障用户有尽可能充足的时间与 Web 内容交互。失明、视力欠佳、行动不便以及认知困难等残障人士,可能需要更多时间来阅读内容或执行在线填表等操作。如果 Web 功能是计时的,则某些用户难以在限制时间内完成所需的操作。这可能会导致他们无法访问相关服务。设计不限时功能将有助于残障人士成功完成这些操作。提供相应选项,让用户可以选择禁用时间限制、自定义时间限制长度或在达到时间限制前请求更多时间,这有助于那些需要超过预期时间的用户成功完成任务。这些选项应按照对用户最有帮助的顺序列出。禁用时间限制是最优选项,其次是自定义时间限制长度,再次是在达到时间限制之前请求更多时间。
遵循如何达到成功标准 2.2.1 中的准则。
注意要点:
某些用户可能会认为移动的内容会让人分心,甚至让人觉得难受,而且难以将注意力集中在页面的其他部分。此外,如果用户无法跟上移动的文本,他们可能就很难阅读此类内容。
如果创建的网页包含移动、闪光或闪烁的内容,则可以采纳以下一项或多项建议,具体视内容的性质而定。
准则 2.3 癫痫发作:切勿设计会导致癫痫发作或生理反应的内容。
由于任何未达到此成功标准的内容会干涉用户使用整个页面的能力,因此网页上的所有内容(无论是否用来达到其他成功标准)必须达到此成功标准。请参阅符合性要求 5:不干涉。
在某些情況下,閃爍的內容可能會導致光敏性癲癇發作。 此成功標準可讓這類使用者存取及體驗所有內容,而不需擔心內容閃爍問題。
请采取措施确保应用以下技术:
准则 2.4 可导航:提供帮助用户导航、查找内容并确定其位置的方法。
此准则涉及的是,确保内容便于用户导航且简洁明了。
此成功标准旨在让按顺序浏览内容的人更直接地访问网页的主要内容。网页和应用程序通常包含也会在其他页面或屏幕上显示的内容。重复出现的内容块示例包括但不限于:导航链接、标题图形、菜单和广告画面。就本规定而言,单个字词、短语或单个链接等较小的重复内容不被视为重复块。
遵循如何达到成功标准 2.4.1 中的准则。
此成功標準可協助每個人(無論是否有任何特定問題)快速識別網頁內容,而不需完整閱讀頁面。 当在不同的浏览器选项卡中打开了多个网页时,这种方法十分有用,因为页面标题会显示在选项卡中,从而可以快速定位。
在 AEM 中创建新 HTML 页面时,可以指定页面标题。应确保标题能够充分描述页面内容和用途,尤其是任何独特方面,以便访客能够快速识别该页面的内容是否与自己的需求相关。
您也可以在编辑页面时编辑页面标题,通过页面信息 – 属性可访问该设置。
此成功标准旨在确保用户按顺序导航内容时,他们接收到信息的顺序与内容含义一致,并且这种按顺序导航的操作可通过键盘实现。此成功标准可让用户生成与内容一致的心智模型,从而减少混淆。内容中可能存在不同的反映逻辑关系的顺序。例如,在由多个字段和/或步骤组成的在线表单中移动组件反映了内容中的逻辑关系。
遵循如何达到成功标准 2.4.3 中的准则。
對於所有使用者而言,無論是否有損毀,透過適當的連結文字清楚指出連結的方向是至關重要的。 这有助于用户决定自己是否切实希望追踪某个链接。对于视力正常的用户而言,当页面上有多个链接时,有意义的链接文本十分有用(尤其当页面包含大量文本时),因为有意义的链接文本能够更加清晰地说明目标页面的功能。使用一些辅助型技术的用户可以在单个页面上生成所有链接的列表,如果链接文本是唯一的且可以提供有用信息,则用户可以轻松地脱离上下文理解链接文本。但是,如果链接无法提供足够的信息来准确描述链接目标位置,则患有认知障碍的视力正常用户可能会感到困惑。
首先,确保链接文本清晰地描述了链接目的。
链接用词在各个页面中应保持一致,尤其是导航栏的链接。例如,如果特定页面的链接在某个页面中被命名为出版物,则在其他页面中也应使用该文本,以确保一致性。
编写文本时,在使用标题属性确保页面上呈现的类似链接提供有关目标位置的唯一信息方面还存在一些问题(例如,“阅读更多”通常是指一系列的不同目标位置):
因此,雖然title屬性可用於為連結提供額外內容,請注意其限制,且請勿將其用作適當連結文字的替代方式。
如果链接是由图像构成的,则应确保该图像的替换文本描述了链接的目标位置。例如,如果将一个书架的图像设置为某人出版物的链接,则替换文本应该写成张三的出版物,而不是书架。
或者,如果連結錨點包含描述連結用途以及影像元素的文字(因此文字會出現在影像旁邊),請對影像使用空的alt屬性:
<a href="publications.html">
<img src = "bookshelf.jpg" alt = "" />
John Smith's publications
</a>
以上代碼片段僅供說明之用,建議您使用 影像 元件。
虽然提供无需附加上下文即可标识链接目的的链接文本是一种建议的方法,但我们意识到这并不总是可行的。与上下文无关的链接可用于以下情况,其 HTML 示例详见:如何达到成功标准 2.4.4。
有时,一个页面上会有多个链接(其中每个链接都提供了复杂而又必要的链接方向详情),此时可以为该网页提供一个替代版本,使其显示完全相同的内容,只是其中的链接文本较为简洁。
或者,也可以使用脚本,这样就能够最大限度地减少链接本身中提供的文本;但是,在将位于页面顶部的相应控件激活后,链接文本就会扩展成更多的详细信息。类似的方法还有使用 CSS 为视力正常的用户隐藏完整的链接,但是仍然将完整的链接呈现给屏幕阅读器用户。与此相关的说明不在本文档的范围之内,但是可以在更多信息 - 链接目的(在上下文中)(2.4.4) 部分获取有关如何实现此操作的更多信息。
此成功标准旨在让用户能够以最符合其需求的方式找到内容。用户可能会发现一种技术比另一种技术更易于使用或理解。
即便是小型网站,也应为用户提供一些不同的定位方式。对于只有三、四个页面的网站,如果所有页面均链接自主页,则只需在主页上提供所有页面的链接、以及在各自页面上提供前往主页的链接即可,而主页上的链接也可用作站点地图。
遵循如何达到成功标准 2.4.5 中的准则。
此成功标准旨在帮助用户了解网页中包含哪些信息以及这些信息的组织方式。当标题清晰且具有描述性时,用户可以更轻松地找到所寻找的信息,并且可以更轻松地了解内容不同部分之间的关系。描述性标签可帮助用户识别内容中的特定组件。
遵循如何达到成功标准 2.4.6 中的准则。
此成功标准旨在帮助用户了解当前的键盘焦点在哪个元素。
用户必须能够知道在多个元素中,哪一个元素是当前的键盘焦点所在。如果屏幕上只有一个键盘可操作控件,则应该可以达到成功标准,因为这样的视觉设计只会呈现一个键盘可操作项目。
成功标准中说的“操作模式”,则是考虑到了部分平台可能无法始终显示焦点指示器的情况。在通常情况下只有一种操作模式,因此,此成功标准可适用。
遵循如何达到成功标准 2.4.7 中的准则。
Guidelinate 3.1可讀取:讓文字內容可讀取且可理解。
此成功標準旨在確保文字和其他語言內容正確呈現。 對於熒幕助讀程式使用者,這可確保內容的發音正確,而視覺瀏覽器更有可能正確顯示特定字元集。
要达到此成功标准,可以使用页面顶部 <html>
元素中的 lang
属性来识别网页的默认语言。例如:
如果页面采用英语编写,则 <html>
元素应该写成:
<html lang = "en">
而要以西班牙语呈现的页面应该采用以下标准:
<html lang = "es">
在 AEM 中,页面的默认语言是在创建页面时设置的,但是也可以在编辑页面属性时进行更改。
AEM 针对根语言的变体做了进一步的微调,例如,美式英语 - en-us、英式英语 - en-gb 和加拿大英语 - en-ca。这种详细级别对辅助型技术来说通常是多余的,尽管它可以用于标识页面内容中的区域变化。
此成功標準的用途與成功標準類似 頁面語言,但適用於單一頁面上包含多種語言內容的網頁(例如,由於引號或不常見的外來字)。
套用此成功標準的頁面允許:
lang
属性可用于标识内容语言的更改。例如,引用的德语(ISO 639-1 代码“de”)可以采用以下方式表示:
<blockquote cite = "John F. Kennedy" lang = "de">
<p>Ich bin ein Berliner</p>
</blockquote>
現成可用的執行個體不支援區塊引號。 可開發自訂元件以支援該功能。
同样,如果通过以下方式使用 span
元素,则浏览器可以准确地呈现不常见的外来词或短语:
<p>The only French phrase I know is <span lang = "fr">je ne sais quoi</code>.</p>
如果包含使用不同语言的人名或城市,或者使用默认语言中常用的外来词或短语(如英语中的 schadenfreude),则不必遵循此成功标准。
要添加包含相应语言的 span 元素,可以在 RTE 的源代码编辑模式下手动编辑 HTML 标记,以将其写成如上显示的方式。或者,也可以由系统管理员将 lang
属性添加到 RTE 中(请参阅添加对其他 HTML 元素和属性的支持)。
此准则涉及的是,确保网页的外观与操作保持一致。
此成功标准旨在确保访客在以自己的方式浏览文档时,功能是可预测的。任何能够在收到焦点时触发事件的组件,均不得更改上下文。组件收到焦点时更改上下文的示例,包括但不限于:
焦点可以通过键盘(例如,通过 Tab 键前往控件)或鼠标(例如,选择文本字段)移到控件。 将鼠标移到控件上方不会移动焦点,除非脚本会实施此行为。对于某些类型的控件,选择控件也可能会激活该控件(例如按钮),这反过来又会发起对上下文的更改。
遵循如何达到成功标准 3.2.1 中的准则。
此成功标准旨在确保输入数据或选择表单控件这样的操作具有可预见的效果。更改任何用户界面组件的设置,就会更改该控件的某些方面,当用户不再与界面交互时,这些方面的更改会一直存在。因此,选中复选框、在文本字段中输入文本,或更改列表控件中的选定项会更改其设置,但激活链接或按钮则不会更改其设置。上下文更改可能会给那些不容易感知更改或容易被更改分散注意力的用户造成困惑。只有当明确告知为响应用户操作而会发生上下文更改时,此类更改才是恰当的。
遵循如何达到成功标准 3.2.2 中的准则。
此成功标准旨在鼓励使用一致的呈现和布局,当用户与一组网页内的重复内容进行交互,并且需要多次找到特定信息或功能时,这种一致的呈现和布局会很有帮助。视力欠佳的人使用屏幕放大功能每次显示屏幕的一小部分时,通常会使用视觉提示和页面边界来快速找到重复内容。对于使用空间记忆或设计中的视觉提示来找到重复内容的视觉用户而言,按相同顺序呈现重复内容也非常重要。
请务必注意,本节中使用了“相同顺序”这种说法,这并不意味着不能使用子导航菜单,或者不能使用二级导航块或页面结构。相反,此成功标准旨在帮助与网页中重复内容进行交互的用户预测其寻找内容的位置,并在再次遇到时更快地找到这些内容。
用户可以通过使用自适应用户代理或通过设置首选项来发起顺序更改,以对他们最有用的方式呈现信息。
遵循如何达到成功标准 3.2.3 中的准则。
此成功标准旨在确保采用一致的方式标识一组网页内重复出现的功能组件。使用屏幕阅读器的用户在操作网站时所使用的一种策略是,依赖他们对可能出现在不同网页上的功能的熟悉程度,且这种依赖程度很深。如果相同的功能在不同网页上具有不同的标签(或者更通俗地讲,具有不同的访问名称),则网站的使用难度会显著增加。这也可能会令人困惑,并增加认知困难人士的认知负担。因此,一致的标签会有所帮助。
此一致性要求的适用范围也包括替换文本。如果图标或其他非文本项目具有相同的功能,则其相应的替换文本也应保持一致。
如果某个网页上有两个组件的功能与一组网页内另一个页面上的组件功能相同,则所有这 3 个组件都必须保持一致。因此,同一页面上的那两个组件会保持一致。
尽管在单个网页内始终保持一致是理想的最佳做法,但准则 3.2.4 仅解决一组网页内的一致性问题(该组网页内的多个页面上包含重复出现的某些内容)。
遵循如何达到成功标准 3.2.4 中的准则。
此成功标准旨在确保用户知道发生了错误,并可确定错误的具体内容。错误消息应尽可能具体和明确。表单提交失败时,重新显示表单并指示错误字段并不足以让某些用户感知发生了错误。例如,屏幕阅读器用户在遇到某个指示器之前,不会知道内容中存在错误。他们可能会在遇到错误指示器之前就完全放弃表单,认为页面根本无法正常工作。根据 WCAG 中的定义,输入错误是用户提供的不可接受的信息。这包括:
网页要求提供但用户忽略了的信息,或者用户虽已提供但不是要求的数据格式或允许的值。例如:
遵循如何达到成功标准 3.3.1 中的准则。
提供指示以幫助人們完成表單是介面可用性良好做法的基本部分。 这种做法对于患有视觉障碍或认知障碍的用户而言十分有用,否则这类用户可能难以理解表单的布局以及要在特定的表单字段中提供的数据种类。
在 AEM WKND 演示项目中,当向页面添加表单组件(如文本字段)时,会添加默认标签。此默认标题取决于组件类型。您也可以在该字段编辑对话框的标题与文本选项卡中添加自己的标题。应务必确保标签能够帮助用户理解与每个表单组件相关的数据。
此 標題 欄位必須用於欄位元素,因為它提供可用於輔助技術的標籤。 僅在該欄位旁的文字中寫入標籤是不夠的。
对于某些表单组件,还可以使用隐藏标题复选框以可视方式隐藏标签。以这种方式隐藏的标签仍然可用于辅助技术,但不会显示在屏幕上。尽管在某些情况下这不失为一种好方法,但是最好尽可能保留可视的标签,因为有些用户可能只查看屏幕上较小的一部分(每次一个字段),并且需要借助标签来准确地识别字段。
使用了图像按钮(如 WKND 项目的图像按钮组件)后,编辑对话框标题与文本选项卡中的标题字段实际上会为图像提供替换文本,而不是提供标签。因此,在以下示例中,包含文本 Submit
的图像,其替换文本就是 Submit
,该文本是使用编辑对话框中的标题字段添加的。
在 WKND 项目中,如果存在一组相关控件(如单选按钮组),则可能需要该组以及单个控件的标题。在 AEM 中添加一组单选按钮时,标题字段会提供此组标题,而单个标题会在创建单选按钮(项目)时指定。
但是,组标题和单选按钮本身之间并没有编程关联。模板编辑器需要将标题包装在必需的 fieldset
和 legend
标记中,以便创建此关联,而且该操作只能通过编辑页面源代码来完成。或者,系統管理員可以新增對這些元素的支援,以使它們出現在 欄位屬性 對話方塊(請參閱 新增對其他HTML元素和屬性的支援)。
如果必须按照特定的格式输入数据,应在标签文本中予以清楚说明。例如,如果必须以 DD-MM-YYYY
格式输入日期,应在标签中特别指明这一点。這表示當熒幕助讀程式的使用者遇到該欄位時,會自動公告標籤,以及關於格式的其他資訊。
如果必须输入表单字段,请在标签中使用“必填”一词来说明。AEM 会为必填字段添加一个星号,但是最好在标签本身中也包含 required
一词(在编辑对话框的标题字段中)。
標籤的位置也很重要,因為這有助於他們找到適當的欄位。 當使用者面對複雜表單時,這尤其重要。 請遵循下列慣例:
在功能有限的简单表单中,可以相应地标记 Submit
按钮,以将其用作相邻字段的标签(如 Search
)。在尋找標籤文字的空間可能困難的情況下,這個用法很有用。
此成功标准旨在确保用户在可能的情况下接收合理建议以便更正输入错误。在 WCAG 中,输入错误的定义是指系统“不接受的用户提供的信息”。系统不接受的信息示例包括:要求提供但用户忽略了的信息,以及用户虽已提供但不是要求的数据格式或允许的值。
成功标准 3.3.1 会提供错误通知。然而,认知困难的人士可能很难理解如何更正错误。患有视觉障碍的人士可能无法明白到底应该如何更正错误。如果表单提交失败,用户或许会放弃表单,因为他们可能不确定如何更正错误,即使他们知道已经发生错误。
内容作者可以提供错误描述,或者用户代理可以根据特定于技术的、通过编程方式确定的信息来提供错误描述。
遵循如何达到成功标准 3.3.3 中的准则。
成功标准 3.3.4
AA 级
错误预防(法律、金融、数据):对于用户操作将产生法律承诺或财务交易的网页,会修改或删除数据存储系统中用户可控数据的网页,或者会交用户测试响应的网页,以下至少有一项为真:
此成功标准旨在帮助残障用户在执行无法撤销的操作时,避免因错误而造成严重后果。例如,购买不可退款的机票,或者提交订单在经纪帐户中购买股票,这些都是可能产生严重后果的金融交易。如果用户弄错航空旅行日期,他们最终可能会拿到一张无法改签的日期错误的机票。如果用户在要购买的股票数量上出错,他们最终可能会购买超出预期数量的股票。这两种错误涉及的交易都是立即发生且事后无法更改,并且可能代价高昂。同样,如果用户无意中修改或删除了存储在数据库中并且以后需要访问的数据(如旅行服务网站中自己的全部旅行档案),这也可能是一个无法挽救的错误。当涉及修改或删除“用户可控”数据时,此项标准的目的是防止大量丢失数据,例如删除一份文件或记录,而不是要求在每次保存命令时进行确认,也不是指对文档、记录或其他数据进行简单的创建或编辑。
残障用户可能更容易出错。患有阅读障碍的人可能会颠倒数字和字母,而患有运动障碍的人则可能会意外按错按键。通过撤销操作,用户能够纠正可能导致严重后果的错误。有了审查和更正信息的功能,用户可以在采取可能会造成严重后果的行动之前及时发现错误。
用户可控数据是指用户可查看的数据,用户可以通过有意的操作来改变和/或删除这些数据。用户控制此类数据的示例可能包括:更新用户帐户的电话号码和地址,或者从网站删除过去发票的记录。它不是指用户无法直接查看或与之交互的数据,例如互联网日志记录和搜索引擎监测数据。
遵循如何达到成功标准 3.3.4 中的准则。
准则 4:强健 – 内容必须足够强健,以供包括辅助技术在内的各种用户代理进行解读。
准则 4.1 兼容:最大限度地兼容当前和未来用户代理,包括辅助技术。
最大限度地兼容当前和未来用户代理,包括辅助技术。
此成功标准旨在确保用户代理(包括辅助技术)能够准确地解读和分析内容。如果内容无法解析为数据结构,则不同的用户代理可能会以不同的方式呈现内容,或者无法解析内容。一些用户代理会使用“修复技术”来呈现编码欠佳的内容。
由于修复技术因用户代理而异,因此作者不能假设内容将被准确地解析为数据结构,或者内容将被包括辅助技术在内的专业用户代理正确呈现,除非内容是根据该技术的正式语法所定义的规则创建的。在标记语言中,元素和属性语法中的错误以及未提供正确嵌套的开始/结束标签,会导致使用户代理无法可靠地解析内容的错误。因此,成功标准要求内容只能使用正式语法的规则来解析。
遵循如何达到成功标准 4.1.1 中的准则。
此成功标准旨在确保辅助技术 (AT) 能够收集关于内容中用户界面控件状态的信息,激活(或设置)并跟踪内容中用户界面控件的状态。
当使用来自无障碍访问技术的标准控件时,此过程非常简单。如果根据规范使用用户界面元素,则符合此规定的条件。(请参阅下面的成功标准 4.1.2 示例)
但是,如果创建了自定义控件,或者界面元素被(使用代码或脚本)编程为具有不同于常规的角色和/或功能,则需要采取其他措施以确保控件可向辅助技术提供重要信息并允许辅助技术控制这些重要信息。
用户界面控件的一个重要的状态是它是否具有焦点。控件的焦点状态可以通过编程方式确定,并且会向用户代理和辅助技术发送关于焦点状态的变更通知。用户界面控件状态的其他示例包括:复选框或单选按钮是否已被选中,或者可折叠的树或列表节点是否已展开或折叠。
遵循如何达到成功标准 4.1.2 中的准则。