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

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

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

五個核心原理可確保可訪問的幻燈片：

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

在

2. >清晰可見：足夠大，具有足夠的顏色對比度。

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

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

   >

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

   >

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

   >

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

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

>

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

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