图片的替代文本

当您向您的在线商店添加图片时,请务必使盲人或视力不佳的客户也能访问这些图片。您可以通过添加精确描述每张图片内容的替代文字来实现此目的。使用屏幕阅读器的客户依靠替代文字来获取您在线商店上的图片内容。

您可以从 Shopify 后台将替代文本添加到产品图片。您可以通过模板管理器将替代文本添加到模板中的其他图片。

在将替代文本添加到图片时,假设您要向闭着眼睛的人描述图片是一个好的做法。帮助他们在脑海中形成一张图片。您描述图片的方式也取决于网页的内容。例如,如果您的企业是一家旅行社,那么您描述图片的方式可能与当您的企业是一家户外装备店时有所不同。请思考以下图片:

对于旅行社而言,您可以参考这两位朋友正在旅行的国家和地区,以及他们正望向的海洋的名称。另一方面,对于户外装备店而言,您可能会关注这两位朋友背包的品牌和特色。

如果您的企业是一家旅行社,那么效果较差的替代文本示例可能是“两个人面朝大海”。对于相同的旅行社而言,效果较好的替代文本示例可能是“在一个阳光明媚的日子里,两位好友正在葡萄牙的拉古什旅行,他们一起眺望着卡米洛海滩的沙滩”。

幻灯片和视频可访问性

当您向您的在线商店添加视频时,请确保要考虑到以下客户群体的需求:视力不佳的客户、存在听力障碍或听力不佳的客户,或可能易患前庭功能紊乱的客户。

其中部分客户依赖屏幕阅读器的文本到语音转换功能,该功能可大声朗读网页的内容。来自视频和音乐的附加音频可能会使此体验难以实现,特别是在其意外出现时。最好为您的视频添加隐藏式字幕,以便耳聋或有听力障碍的客户可以访问这些内容。

前庭功能紊乱的客户可能会因为观看移动的内容而出现眩晕的症状。因此,使幻灯片和视频不会自动播放是非常重要的。

幻灯片

当您向您的在线商店添加幻灯片时,请遵循以下准则:

  • 不自动播放幻灯片。

  • 如果幻灯片自动播放,它们应包括客户可以用于暂停或停止幻灯片播放的设置。

视频

当您向您的在线商店添加视频时,请遵循以下准则:

  • 视频不会自动播放。

  • 如果视频自动播放,则其音频静音。

  • 对于包含音频的视频,此视频完全可见,不受其他页面元素的阻碍。这能够使隐藏式字幕保持可见。

  • 对于包含对话的视频,可以使用文本听录稿。这些听录稿可包含在页面上,或包含在可通过链接访问的单独页面中。

这些准则也适用于幻灯片中的视频。

Shopify商户官网原文详情:

Alternative text for images

When you add images to your online store, it's important to make them accessible to customers who are blind or have low vision. You can do this by adding alternative text that accurately describes each image. Customers who use screen readers rely on alt text to communicate the content of images on your online store.

You can add alt text to your product images from the Shopify admin. You can add alt text to the other images in your theme from the theme editor.

When you add alt text to an image, a good practice is to pretend that you're describing the image to someone who has their eyes closed. Help them to create an image in their mind. The way that you describe an image also depends on the context of your web page. For example, you might describe an image differently if your business is a travel agency than if your business is an outdoor equipment store. Consider the following image:

For a travel agency, you might refer to the country and region in which the two friends are traveling, and to the name of the ocean or sea that they're looking at. On the other hand, for an outdoor equipment store, you might focus on the brands and features of the two friends' backpacks.

If your business is a travel agency, then an example of poor alt text might be, "Two people in front of the ocean." For the same agency, an example of good alt text might be, "Two friends traveling in Lagos, Portugal, looking out at the sandy cove of Praia do Camilo on a sunny day."

Slideshow and video accessibility

When you add videos to your online store, make sure that you consider the needs of customers with low vision, customers who are deaf or hard of hearing, or customers who might be susceptible to vestibular disorders.

Some of these customers rely on the text to speech capability of screen readers, which read aloud the contents of a web page. Additional audio from videos and music, especially when it's unexpected, can make this experience difficult. For customers who are deaf or hard of hearing, it's a good idea to add closed captioning to your videos so that those customers can access the content.

Customers with vestibular disorders can experience dizziness with moving content. Because of this, it's important that slideshows and videos don't play automatically.

Slideshows

When you add a slideshow to your online store, use the following guidelines:

  • Slideshows do not play automatically.

  • If slideshows do play automatically, then they include a setting that customers can use to pause or stop the slideshow.

Videos

When you add a video to your online store, use the following guidelines:

  • Videos do not play automatically.

  • If videos do play automatically, then their audio is muted.

  • For videos that include audio, the video is fully visible and not obstructed by other page elements. This allows closed captions to remain visible.

  • For videos that include dialogue, text transcripts are available. These are included either on the page, or in a link to a separate page.

These guidelines also apply to videos that are in a slideshow.

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