技术控

    今日:130| 主题:49332
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Alternative Text and Images

[复制链接]
柒染划破泪浅 发表于 2016-10-5 16:51:44
148 0

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
The most accessible format for any content on the web is plain text. Plain text is incredibly malleable, it can be altered in ways to cater to almost any disability. For users with no visual difficulties, they can simply read the text. If a user has visual impairments, the text can be converted to speech. Even if a user has both visual and auditory difficulties, plain text can be converted to braille.
  However, most websites are not made up of pure text. We have other types of content that is not so malleable, like images. To make these alternative forms of content more accessible, we need to provide a text alternative of them.
   For images, this is typically provided using the alt attribute. As a blanket rule, all images should have an alt attribute . This, however, does not mean that actual alternative text needs to be provided for every image. There are three states we can have for the alt attribute -
  
       
  •   Defined- Where actual descriptive text is provided in the attribute, e.g. alt="A dog" . In this case, a screen reader will read the text provided when the user comes across the image, and usually give the context that it is an image.
       
  •   Null- Where the attribute is written but left empty, e.g. alt="" . In this case, a screen reader will skip over the image entirely as if it never existed.
       
  •   Invalid( bad practice ) - Where the attribute is skipped entirely. In this case, a screenreader will read the value of the src attribute instead. Having this happen is never useful to the user, so it is advised that no images remain in this state.
      
  In this article, we will go over when each of the first two states is suitable, and how different types of alternative text should be used.
  Alternative Text for Different Image Types

  Broadly, there are 7 types of images. The way we handle alternative text is different for each.
  1. Images of Text

  As a general rule, images of text should be avoided, the only exception to this being for logos. Due to the flexibility of CSS, we can now recreate pretty much any visual styling to plain text. So, using an image of text may only be needed in the rarest of circumstances.
   In these rare cases, the best practice is to repeat the text of the image in the alt attribute. This will give screen reader users essentially the exact same experience as visual users.
   
Alternative Text and Images-1 (accessible,disability,provided,content,however)

  [code]Alternative Text and Images-2 (accessible,disability,provided,content,however)[/code]  2. Informative Images

  Informative images are images that, as you would guess, provide some information. This information can be anything from a label, to supplementary information, to just an impression.
  For informative images, the alternative text should convey the same information that the image does. This might be as simple as one word saying what the image is. For example, in the image below, images are used to label each section.

Alternative Text and Images-3 (accessible,disability,provided,content,however)

  [code]
  
  

Alternative Text and Images-4 (accessible,disability,provided,content,however)


  

26 Eletu Ogabi...




  
  

Alternative Text and Images-5 (accessible,disability,provided,content,however)


  

Continental




  
  

Alternative Text and Images-6 (accessible,disability,provided,content,however)


  

Monday 12:00 - 22:00 ...


[/code]  If the information that the image is conveying is more of an impression, then a physical description of the contents of the image may not be appropriate. Instead, we can provide the feeling that the image is trying to convey in the alternative text instead.
  For example, on a website for dog sitters, the image below might be on the about page.
1234下一页
友荐云推荐




上一篇:How it actually feels to write JavaScript in 2016
下一篇:三分钟搞懂 HTTP Transfer-Encoding
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表