替代文本

Shopify旨在提供一个<一个href="//www.theturtleeffect.com/polaris/foundations/accessibility">包容的经验．替代文本(alt文本)帮助视力低下或丧失的人使用我们的产品。

通常，alt文本是图像的文本替换，通常由alt HTML元素属性表示，alt = " "，但也可用于其他场景。

屏幕阅读器通过alt文本向视力低下或失明的人解释图像。如果图像由于某种原因(例如，由于网络连接不稳定)下载失败，还会显示Alt文本。

Alt文本应:

• 帮助访问者浏览网站
• 提供包容性的体验
• 尽可能的具体和简洁

图片的Alt文本

所有< img >标签需要一个Alt文本属性，即使它是空的。我们需要让屏幕阅读器知道忽略图像。

图片的空alt文本属性: .

书写alt文本

Alt文本应始终以纯文本形式编写。

• 尽量使用最简单的词语。纠结于如何替换一个复杂的单词?检查这个<一个href="https://www.plainenglish.co.uk/the-a-z-of-alternative-words.html">A-Z替代词列表或者这些<一个href="//www.theturtleeffect.com/polaris/content/product-content">简单的语言技巧．
• 避免不必要的词语。如果你取出一个单词，这个短语是否同样容易理解?如果是，那就删掉这个词。
• 写简洁。思考如何写一个小空间是一个很好的捷径。
• 写在<一个href="//www.theturtleeffect.com/polaris/content/grammar-and-mechanics">主动语态．只有当你想隐藏是谁在做所描述的事情时才使用被动语态。

需要alt文本的情况

图标

           

            

             

              

               例子
<按钮 type="button" class="Code_CopyButton__W2O1C" aria-label="Copy to clipboard">
               
             
            
            
<按钮咏叹调-标签＝“关闭”onclick＝“myDialog.close()”>X</按钮>
           

行动

如果空间限制要求你写的号召行动没有名词，如“了解更多”和“立即申请”，进一步说明商家选择后将被送往何处。

           

            

             

              

               例子
<按钮 type="button" class="Code_CopyButton__W2O1C" aria-label="Copy to clipboard">
               
             
            
            
<一个href＝“{cta-url}”咏叹调-标签＝“了解更多关于使用Shopify开设在线商店的信息”欧宝体育官网入口首页>了解更多</一个>
           

复杂的图片

稍微复杂一点的图像在代码中需要更多的逻辑。

           

            

             

              

               例子
<按钮 type="button" class="Code_CopyButton__W2O1C" aria-label="Copy to clipboard">
               
             
            
            
<div的作用＝“img”咏叹调-labelledby＝“star_id”><img src＝“fullstar.png”alt＝＂＂/><img src＝“fullstar.png”alt＝＂＂/><img src＝“halfemptystar.png”alt＝＂＂/></div><div id＝“star_id”>3.的5星星</div>
           

发音和翻译

我们不仅努力让用户与产品的互动愉快，我们也想让我们的商家的听觉体验愉快。HTML lang属性帮助语音合成工具识别发音，帮助翻译工具识别使用的规则。

             

              

               

                

                 例子
<按钮 type="button" class="Code_CopyButton__W2O1C" aria-label="Copy to clipboard">
                 
               
              
              
<html朗＝“en”></超文本标记语言>
             

             

              

               

                

                 例子
<按钮 type="button" class="Code_CopyButton__W2O1C" aria-label="Copy to clipboard">
                 
               
              
              
<超文本标记语言></超文本标记语言>
             

这是一个<一个href="https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry">语言属性的标准列表你可以在你的文档中使用。

搜索引擎优化

Alt文本是增加网站可搜索性的好方法。这适用于Shopify的管理之外。

• 逻辑地使用关键字(人们搜索的词)
• 永远不要为了插入关键字而降低alt文本的相关性或清晰度

要深入了解编码和alt文本标准，请访问<一个href="https://www.w3.org/WAI/intro/wcag.php">网页内容无障碍指引(WCAG)．