視力或運動存在障礙的客戶可能會使用鍵盤進行在線導航和完成任務。這些客戶依靠可視的指示器來傳達他們的鍵盤焦點在網頁上的位置。在以下示例中,電子郵件字段具有一個可視的焦點指示器:
視力或運動存在障礙的客戶可能會使用鍵盤進行在線導航和完成任務。這些客戶依靠可視的指示器來傳達他們的鍵盤焦點在網頁上的位置。在以下示例中,字段具有一個可視的焦點指示器:
如果您要編輯模板的樣式表,請確保沒有從任何頁面元素中刪除鍵盤焦點樣式。請遵循以下準則:
當所有交互式頁面元素都有鍵盤焦點時,它們都有一個清晰的可視指示器。這些元素包括鏈接、按鈕和表單字段。
若要詳細了解本文中討論的主題的 Web 可訪問性,請參閱以下資源。
Colors with Good Contrast(對比度良好的顏色),來自 Web Accessibility Initiative 的一篇文章
Contrast Ratio,一種在線工具,可以用于查找兩種顏色之間的對比度
Color Contrast Analyzer,一個可供下載的對比率應用程序,由 Paciello Group 開發
16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake(16 像素字體大小:適用于正文。任何一個細節的缺失都是一個代價昂貴的錯誤),來自 Smashing Magazine 的一篇文章
來自 Web AIM 的文章:Text alignment(Text alignment)
Link Appearance(鏈接外觀),來自 Web AIM 的一篇文章
來自 Web AIM 的文章:Using Headings for Content Structure(對內容結構使用標題)
Text to Speech(文本到語音轉換),來自 Web Accessibility Initiative 的一篇文章
Alternative Text(替代文本),來自 Web AIM 的一篇文章
來自 Medium 的文章:Considerations when writing alt text(編寫替代文本時的)
來自 A11Y 項目的文章:A Primer to Vestibular Disorders(前庭疾病入門)
Text to Speech(文本到語音轉換),來自 Web Accessibility Initiative 的一篇文章
Video Captions(視頻字幕),來自 Web Accessibility Initiative 的一篇文章
來自 YouTube 幫助的文章:Use automatic captioning(使用自動字幕)
Captions and subtitles(字幕和副標題),來自 Vimeo 幫助中心的一篇文章
Keyboard Compatibility(鍵盤兼容性),來自 Web Accessibility Initiative 的一篇文章
Introduction to Focus(焦點簡介),來自 Google 開發人員的一篇文章
Keyboard support
Customers with vision or motor impairment might use a keyboard to navigate and complete tasks online. These customers rely on a visual indicator to communicate where their keyboard’s focus is on a web page. In the example below, the Email field has a visual focus indicator:
If you edit your theme's stylesheet, then make sure that you don't remove the keyboard focus style from any page elements. Use the following guideline:
All interactive page elements have a clear visual indicator when they have keyboard focus. These elements include links, buttons, and form fields.
Resources
To learn more about web acssibility for the topics discussed in this article, see the following resources.
Color contrast resources
Colors with Good Contrast, an article from the Web Accessibility Initiative
Contrast Ratio, an online tool that you can use to find the contrast ratio between two colors
Color Contrast Analyzer, a contrast ratio application for download that was developed by the Paciello Group
Text resources
16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake, an article from Smashing Magazine
Text alignment, an article from Web AIM
Link Appearance, an article from Web AIM
Using Headings for Content Structure, an article from Web AIM
Alternative text resources
Text to Speech, an article from the Web Accessibility Initiative
Alternative Text, an article from Web AIM
Considerations when writing alt text, an article on Medium.
Slideshow and video resources
A Primer to Vestibular Disorders, an article from The A11Y Project
Text to Speech, an article from the Web Accessibility Initiative
Video Captions, an article from the Web Accessibility Initiative
Use automatic captioning, an article from YouTube Help
Captions and subtitles, an article from the Vimeo H Center
Keyboard support resources
Keyboard Compatibility, an article from the Web Accessibility Initiative
Introduction to Focus, an article from Google Developers
特別聲明:以上文章內容僅代表作者本人觀點,不代表ESG跨境電商觀點或立場。如有關于作品內容、版權或其它問題請于作品發表后的30日內與ESG跨境電商聯系。
平臺顧問
微信掃一掃
馬上聯系在線顧問
小程序
ESG跨境小程序
手機入駐更便捷
返回頂部