shopify商店模板为特殊人群提供的键盘支持功能以及资源访问

键盘支持

视力或运动存在障碍的客户可能会使用键盘进行在线导航和完成任务。这些客户依靠可视的指示器来传达他们的键盘焦点在网页上的位置。在以下示例中，电子邮件字段具有一个可视的焦点指示器：

如果您要编辑模板的样式表，请确保没有从任何页面元素中删除键盘焦点样式。请遵循以下准则：

• 当所有交互式页面元素都有键盘焦点时，它们都有一个清晰的可视指示器。这些元素包括链接、按钮和表单字段。

资源

若要详细了解本文中讨论的主题的 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 开发人员的一篇文章

Shopify商户官网原文详情：

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 accessibility 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 Help Center

Keyboard support resources

• Keyboard Compatibility, an article from the Web Accessibility Initiative

• Introduction to Focus, an article from Google Developers

文章内容来源：Shopify商户官方网站

（本文内容根据网络资料整理和来自用户投稿，出于传递更多信息之目的，不代表本站其观点和立场。本站不具备任何原创保护和所有权，也不对其真实性、可靠性承担任何法律责任，特此声明！）

常见问答(FQAS)

是的,Shopify提供了一些辅助功能来帮助残疾人更好地访问和浏览商店,例如键盘导航。模板开发人员可以在设计模板时考虑这些功能,以提高网站的可访问性。

在设计模板时,开发人员应考虑以下限制功能:添加文字替代(alt文本)到图像中;使用表格标题()来描述表格结构;禁用自动播放的音频和视频;提供对比度较高的颜色组合,以提高可读性等。同时,也应确保所有内容和功能仅通过键盘都能访问和操作。

是的,Shopify提供商店的自适应设计,能根据浏览器或设备自动调整页面布局。此外,还支持字体缩放、高对比度主题和屏幕阅读器。商店所有者也可以在“辅助功能”设置中自定义店铺的访问模式,例如键盘导航等。这能大幅提升残障人士在线购物体验。

开发人员可以通过添加正确的ARIA标签来改进键盘导航,例如为导航元素添加role=\"navigation\"。同时,应确保通过制表、空格、回车等键就可以访问和操作所有交互元素。最后,测试键盘访问是否流畅,以发现任何页面元素通过键盘无法访问的问题。