創(chuàng)建可訪問(wèn)的幻燈片：綜合指南

幻燈片在組織網(wǎng)站上很普遍，但由於可訪問(wèn)性的要求而言，通常無(wú)法訪問(wèn)。 流行的Web開(kāi)發(fā)框架（例如Bootstrap和Foundation）並不固有地支持可訪問(wèn)的幻燈片，需要進(jìn)行大量修改。本文概述了創(chuàng)建包容性幻燈片的關(guān)鍵可訪問(wèn)性原則。 隨後的文章將提供實(shí)用的代碼示例。

常見(jiàn)的幻燈片類型（圖1和2）經(jīng)常缺乏關(guān)鍵特徵：暫停功能和鍵盤(pán)可訪問(wèn)性。 導(dǎo)航幻燈片時(shí)，許多設(shè)計(jì)無(wú)法保持鍵盤(pán)的焦點(diǎn)。

五個(gè)核心原理可確?？稍L問(wèn)的幻燈片：

1. >用戶對(duì)運(yùn)動(dòng)的控制： wcag 2.2.2要求一種機(jī)制暫停，停止或隱藏自動(dòng)移動(dòng)持續(xù)五秒鐘的內(nèi)容。 簡(jiǎn)單的暫停/停止鏈接有效。避免在可能的情況下分散動(dòng)畫(huà)過(guò)渡的注意力。

在

2. >清晰可見(jiàn)：足夠大，具有足夠的顏色對(duì)比度。

   通過(guò)鍵盤(pán)，鼠標(biāo)和觸摸可訪問(wèn)
   >
   • ：>按鈕或鏈接是理想的；避免僅依靠。
   >
   • 明確的焦點(diǎn)/懸停指示：焦點(diǎn)上的視覺(jué)變化不同，滿足對(duì)比度要求。 形狀變化比僅顏色變化更可取。 > tabindex
   >精心設(shè)計(jì)的控件的示例可以在Accessibilityoz（圖3和4）和Griffith University（圖6）等網(wǎng)站上找到，展示了臺(tái)式機(jī)和移動(dòng)設(shè)備的清晰暫停按鈕和導(dǎo)航控件。 莫納什大學(xué)（Monash University）提供了一個(gè)沒(méi)有自動(dòng)運(yùn)動(dòng)的移動(dòng)友好幻燈片的示例（圖5）。

3. > 邏輯焦點(diǎn)順序：選項(xiàng)卡訂單應(yīng)鏡像視覺(jué)佈局和HTML結(jié)構(gòu)。控件（尤其是暫停）應(yīng)在內(nèi)容之前。 內(nèi)容更改不應(yīng)發(fā)生在當(dāng)前的焦點(diǎn)元素之前。

   >

4. >有效的代碼和樣式：幻燈片應(yīng)在禁用樣式表中起作用，儘管演示可能會(huì)有所不同。 禁用樣式表時(shí)，請(qǐng)避免意外的內(nèi)容變化或重疊。 文本應(yīng)通過(guò)瀏覽器文本大小調(diào)整來(lái)擴(kuò)展；移動(dòng)版本必須支持捏到Zoom。

   >

5. 有意義的替代方案：為無(wú)法訪問(wèn)幻燈片的用戶提供基於文本的替代方案。 這可能包括一個(gè)“僅屏幕閱讀器”部分重複幻燈片內(nèi)容和鏈接，理想地放置在幻燈片出現(xiàn)的位置。 在提供的信息方面，請(qǐng)確保此替代方案等效於幻燈片。 圖像需要適當(dāng)?shù)?code>alt屬性。

   >

>結(jié)論：創(chuàng)建真正可訪問(wèn)的幻燈片需要仔細(xì)考慮這些原理。 下一篇文章將提供實(shí)現(xiàn)這些目標(biāo)的實(shí)用代碼實(shí)施。 >

經(jīng)常詢問(wèn)有關(guān)可訪問(wèn)幻燈片的問(wèn)題（常見(jiàn)問(wèn)題解答）（本節(jié)在很大程度上與原始輸入保持不變，因?yàn)樗峁┝擞袃r(jià)值的補(bǔ)充信息。） 什麼是可訪問(wèn)的幻燈片？

>

如何使我的幻燈片可訪問(wèn)？ > 什麼是alt文本，為什麼很重要？ > 如何將字幕添加到幻燈片上？ > 為什麼鍵盤(pán)導(dǎo)航很重要？ 如何使幻燈片的語(yǔ)言清晰而簡(jiǎn)單？ 什麼是成績(jī)單，為什麼很重要？ > 如何為幻燈片創(chuàng)建成績(jī)單？ >我可以使用自動(dòng)化工具使我的幻燈片可訪問(wèn)嗎？ > 使我的幻燈片可訪問(wèn)有什麼好處？

以上是幻燈片的難以忍受的難以捉摸的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！