創建可訪問的幻燈片:綜合指南
幻燈片在組織網站上很普遍,但由於可訪問性的要求而言,通常無法訪問。 流行的Web開發框架(例如Bootstrap和Foundation)並不固有地支持可訪問的幻燈片,需要進行大量修改。本文概述了創建包容性幻燈片的關鍵可訪問性原則。 隨後的文章將提供實用的代碼示例。
常見的幻燈片類型(圖1和2)經常缺乏關鍵特徵:暫停功能和鍵盤可訪問性。 導航幻燈片時,許多設計無法保持鍵盤的焦點。
五個核心原理可確保可訪問的幻燈片:
>用戶對運動的控制:
>清晰可見:足夠大,具有足夠的顏色對比度。
通過鍵盤,鼠標和触摸可訪問tabindex
> 邏輯焦點順序:選項卡訂單應鏡像視覺佈局和HTML結構。控件(尤其是暫停)應在內容之前。 內容更改不應發生在當前的焦點元素之前。
>>有效的代碼和样式:幻燈片應在禁用樣式表中起作用,儘管演示可能會有所不同。 禁用樣式表時,請避免意外的內容變化或重疊。 文本應通過瀏覽器文本大小調整來擴展;移動版本必須支持捏到Zoom。
>有意義的替代方案:為無法訪問幻燈片的用戶提供基於文本的替代方案。 這可能包括一個“僅屏幕閱讀器”部分重複幻燈片內容和鏈接,理想地放置在幻燈片出現的位置。 在提供的信息方面,請確保此替代方案等效於幻燈片。 圖像需要適當的alt
屬性。
>結論:創建真正可訪問的幻燈片需要仔細考慮這些原理。 下一篇文章將提供實現這些目標的實用代碼實施。
經常詢問有關可訪問幻燈片的問題(常見問題解答)(本節在很大程度上與原始輸入保持不變,因為它提供了有價值的補充信息。) 什麼是可訪問的幻燈片?
>如何使我的幻燈片可訪問? > 什麼是alt文本,為什麼很重要? > 如何將字幕添加到幻燈片上? > 為什麼鍵盤導航很重要? 如何使幻燈片的語言清晰而簡單? 什麼是成績單,為什麼很重要? > 如何為幻燈片創建成績單? >我可以使用自動化工具使我的幻燈片可訪問嗎? > 使我的幻燈片可訪問有什麼好處?
以上是幻燈片的難以忍受的難以捉摸的詳細內容。更多資訊請關注PHP中文網其他相關文章!