{"id":587,"date":"2020-11-05T08:21:18","date_gmt":"2020-11-05T14:21:18","guid":{"rendered":"https:\/\/wowfall2020.londietmartin.com\/?p=587"},"modified":"2020-11-05T08:21:18","modified_gmt":"2020-11-05T14:21:18","slug":"alt-text-for-screen-readers-and-accessibility","status":"publish","type":"post","link":"https:\/\/wowfall2020.londietmartin.com\/?p=587","title":{"rendered":"Alt Text for Screen Readers and Accessibility"},"content":{"rendered":"\n

One important component of writing on the web is accessibility. Usability.gov<\/a> says accessibility focuses on how a disabled person accesses or benefits from a site, system, or application and should be considered throughout the design and development process. <\/p>\n\n\n\n

Making accessibility a priority ensures that all potential users have a decent user experience and are able to access your information. When designing for all, you must consider how a disabled person may use your site. Some readers only need contrast. Others may need to control your site with their keyboard, so a logical and navigable site is what\u2019s needed. While others may use screen readers.  <\/p>\n\n\n\n

\u201cScreen readers are software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer or braille display. A screen reader is the interface between the computer’s operating system, its applications, and the user.\u201d <\/p>American Foundation for the Blind<\/cite><\/blockquote>\n\n\n\n

If you would like to see a screen reader in action, the Goodwill Industries of Arkansas<\/a> website has an accessibility widget that allows users to use what they need while browsing the site. <\/p>\n\n\n\n

When users rely on screen readers, the website design has to allow for this. One major way to design for the use of screen readers is to include alt text or alternative text in the html. Alt text is used to describe the appearance and function of an image on a page. <\/p>\n\n\n\n

When a screen reader user visits your site, the alt text will be read to ensure users understand the image. Alt text is also displayed on sites when images cannot load. Not adding alt text to your images will result in screen readers saying image not found or the file name. <\/p>\n\n\n\n

What does this look like in action? <\/strong><\/p>\n\n\n\n

<\/p>\n\n\n\n

Okay alt text:<\/strong> <\/p>\n\n\n\n

<img src=\u201dbird.png\u201d alt=\u201dbird\u201d><\/p>\n\n\n\n

Better alt text:<\/strong> <\/p>\n\n\n\n

<img src=\u201dbird.png\u201d alt=\u201dblue and yellow macaw\u201d><\/p>\n\n\n\n

Best alt text:<\/strong> <\/p>\n\n\n\n

<img src=\u201dbird.png\u201d alt=\u201dblue and yellow macaw riding scooter\u201d><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Okay alt text: <\/strong><img src=\u201dwomanwithphone.png\u201d alt=\u201dwoman holding a phone\u201d><\/p>\n\n\n\n

Better alt text: <\/strong><img src=\u201dwomanwithphone.png\u201d alt=\u201dwoman holding flip phone\u201d><\/p>\n\n\n\n

Best alt text: <\/strong><img src=\u201dwomanwithphone.png\u201d alt=\u201dwoman with puzzled expression looking at flip phone\u201d><\/p>\n\n\n\n

<\/p>\n\n\n\n

How do we write great alt text?<\/strong><\/p>\n\n\n\n

  1. Describe the image as specifically as possible. <\/li>
  2. Keep it short. Most screen readers cut off after 125 characters. <\/li>
  3. Don\u2019t use images as text. <\/li>
  4. Don\u2019t include \u201cimage of\u201d or \u201cpicture of\u201d in alt text. <\/li>
  5. Don\u2019t include copyright or any extra info. <\/li><\/ol>\n\n\n\n

    When deciding what your alt text should say, you need to consider what you are conveying with the image. Don\u2019t waste characters describing irrelevant items within the image. It could confuse users when trying to relate the images to the rest of the page. <\/p>\n\n\n\n

    In the following image, you could put the alt text a few different ways depending on what you are trying to convey. <\/p>\n\n\n\n

    You could say it is a man standing in front of a mountain with snow on the ground, or a man in front of a mountain in Calgary in the snow. But, if this image is to show Jack Black in Calgary during the filming of Jumanji the next level, neither of those alt text attributes convey that message. What would be needed is alt=\u201dJack Black in the snow in Calgary during the filming of Jumanji: The Next Level\u201d.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Accessibility is one of the most important elements in website design. We have to design for anyone who could visit our site and whatever they need to make their visit more pleasant, like screen readers. Then we must keep in mind that our alt text has to be on point to convey the message we are trying to convey with our images.  An accessible website makes for happy users. <\/p>\n\n\n\n

    Sources: <\/strong><\/p>\n\n\n\n

    Usability.gov: https:\/\/www.usability.gov\/what-and-why\/accessibility.html<\/p>\n\n\n\n

    https:\/\/moz.com\/learn\/seo\/alt-text#:~:text=Alt%20text%20is%20a%20tenet,to%20visually%20identify%20an%20image.<\/a><\/p>\n\n\n\n

    https:\/\/accessibility.psu.edu\/images\/alttext\/<\/a><\/p>\n\n\n\n

    https:\/\/www.afb.org\/blindness-and-low-vision\/using-technology\/assistive-technology-products\/screen-readers<\/a><\/p>\n\n\n\n

    <\/p>\n\n\n\n

    Image Sources:<\/strong><\/p>\n\n\n\n

    Jack Black: https:\/\/www.vanityfair.com\/hollywood\/photos\/2019\/12\/jumani-the-next-level-shenanigans<\/p>\n\n\n\n

    Woman on Phone: https:\/\/otod.wordpress.com\/2011\/08\/25\/how-to-silence-your-cell-phone-ringer-for-old-people\/<\/p>\n\n\n\n

    Macaw on Scooter: https:\/\/www.discovermagazine.com\/planet-earth\/having-a-bird-brain-is-actually-a-compliment<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    <\/p>\n","protected":false},"excerpt":{"rendered":"

    One important component of writing on the web is accessibility. Usability.gov says accessibility focuses on how a disabled person accesses or benefits from a site,…<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-587","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/posts\/587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=587"}],"version-history":[{"count":2,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/posts\/587\/revisions"}],"predecessor-version":[{"id":589,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/posts\/587\/revisions\/589"}],"wp:attachment":[{"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}