shopify商店模板為特殊人群提供的鍵盤支持功能以及資源訪問-ESG跨境

鍵盤支持

視力或運(yùn)動(dòng)存在障礙的客戶可能會(huì)使用鍵盤進(jìn)行在線導(dǎo)航和完成任務(wù)。這些客戶依靠可視的指示器來傳達(dá)他們的鍵盤焦點(diǎn)在網(wǎng)頁上的位置。在以下示例中，字段具有一個(gè)可視的焦點(diǎn)指示器：

如果您要編輯模板的樣式表，請(qǐng)確保沒有從任何頁面元素中刪除鍵盤焦點(diǎn)樣式。請(qǐng)遵循以下準(zhǔn)則：

• 當(dāng)所有交互式頁面元素都有鍵盤焦點(diǎn)時(shí)，它們都有一個(gè)清晰的可視指示器。這些元素包括鏈接、按鈕和表單字段。

資源

若要詳細(xì)了解本文中討論的主題的 Web 可訪問性，請(qǐng)參閱以下資源。

顏色對(duì)比度資源

• Colors with Good Contrast（對(duì)比度良好的顏色），來自 Web Accessibility Initiative 的一篇文章

• Contrast Ratio，一種在線工具，可以用于查找兩種顏色之間的對(duì)比度

• Color Contrast Analyzer，一個(gè)可供下載的對(duì)比率應(yīng)用程序，由 Paciello Group 開發(fā)

文本資源

• 16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake（16 像素字體大?。哼m用于正文。任何一個(gè)細(xì)節(jié)的缺失都是一個(gè)代價(jià)昂貴的錯(cuò)誤）,來自 Smashing Magazine 的一篇文章

• 來自 Web AIM 的文章：Text alignment（Text alignment）

• Link Appearance（鏈接外觀），來自 Web AIM 的一篇文章

• 來自 Web AIM 的文章：Using Headings for Content Structure（對(duì)內(nèi)容結(jié)構(gòu)使用標(biāo)題）

替代文本資源

• Text to Speech（文本到語音轉(zhuǎn)換），來自 Web Accessibility Initiative 的一篇文章

• Alternative Text（替代文本），來自 Web AIM 的一篇文章

• 來自 Medium 的文章：Considerations when writing alt text（編寫替代文本時(shí)的）

幻燈片和視頻資源

• 來自 A11Y 項(xiàng)目的文章：A Primer to Vestibular Disorders（前庭疾病入門）

• Text to Speech（文本到語音轉(zhuǎn)換），來自 Web Accessibility Initiative 的一篇文章

• Video Captions（視頻字幕），來自 Web Accessibility Initiative 的一篇文章

• 來自 YouTube 幫助的文章：Use automatic captioning（使用自動(dòng)字幕）

• Captions and subtitles（字幕和副標(biāo)題），來自 Vimeo 幫助中心的一篇文章

鍵盤支持資源

• Keyboard Compatibility（鍵盤兼容性），來自 Web Accessibility Initiative 的一篇文章

• Introduction to Focus（焦點(diǎn)簡(jiǎn)介），來自 Google 開發(fā)人員的一篇文章

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

特別聲明：以上文章內(nèi)容僅代表作者本人觀點(diǎn)，不代表ESG跨境電商觀點(diǎn)或立場(chǎng)。如有關(guān)于作品內(nèi)容、版權(quán)或其它問題請(qǐng)于作品發(fā)表后的30日內(nèi)與ESG跨境電商聯(lián)系。