Web Compliant Images

 
 
Information based on current Branding and Style Guide for VSU, more importantly 508 Compliance and Accessibility Laws
 
Image OK ✔ ( Recommended, No Text )techstipend_raw.jpg

 

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. Content owners are the best resource for text descriptions since they know what information they want the image to convey. Determine alt text by asking, "What text would I put here instead of this picture?" Review WebAIM Alternative Text for appropriate use of alternative text. Review W3C's Alt Decision Tree for guidance on how to describe images.

 
Image OK ✔ ( Maximum Text / Logo Use )techstipend.jpg

 

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text. Customizable: The image of text can be visually customized to the user's requirements; Essential: A particular presentation of text is essential to the information being conveyed. Logotypes (text that is part of a logo or brand name) are considered essential. Avoid using images of text. Use text instead.

 
Image Rejected ✘ ( Text Heavy / Contrast )techstipend_rejected.jpg

 

ALL images must have the alt attribute (even decorative images should be tagged alt=""). IMG must have an alt attribute for valid HTML5.The Accessible Name and Accessible Description for images is computed per W3C’s HTML Accessibility API Mappings (HTML-AAM) for images
 
Examples
  • alt
    <img src="/whitehouse.jpg" alt="White House south entrance">
  • aria-labelledby (must reference the ID of the image description)
    <img aria-labelledby="steps" src="white-house-steps.jpg">
    ...
    <p id="steps">The President waited on the White House front steps for the ambassador to arrive.</p>
  • aria-label (contains the description)
    <img aria-label="home" src="/whitehouse.png">
  • aria-describedby (must reference the ID of supporting information for the image description)
    <img src="/plus.png" aria-label="close or open branch" aria-describedby="plus-expand">
    ...
    <p id="plus-expand">Use the right arrow key to expand and the left arrow key to collapse. </p>
  • title
    <img src="/whitehouse.jpg" title="White House south entrance">
    • When title is provided with alt, aria-labelledby, or aria-label, the value of title is computed as the accessible description.
      <img src="/whitehouse.jpg" alt="White House south entrance" title="view from south lawn">
    • If title and aria-describedby are both provided, aria-describedby is the accessible description and title is ignored.