Created
March 2, 2017 16:06
-
-
Save sebworks/943f14730e6c33f58af84074aa723777 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Decorative images | |
Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive. [1] | |
Images may be deemed decorative when they are : | |
- Visual styling such as borders, spacers, and corners; | |
- Supplementary to link text to improve its appearance or increase the clickable area; | |
- Illustrative of adjacent text but not contributing information (“eye-candy”); | |
- Identified and described by surrounding text. [1] | |
--- | |
Decorative images should be coded as follows: | |
``` | |
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="" /> | |
``` | |
Screen reader skips over the image because it's alt tag is empty. | |
``` | |
<div class="m-info-unit_image | |
m-info-unit_image__square" | |
style="background-image: url(https://s3.amazonaws.com/files.consumerfinance.gov/f/images/clipboard-round-300x300.dcd0a1d3464c.original.png);"> | |
</div> | |
``` | |
Screen reader doesn't process the DOM element because it's tag is empty. | |
--- | |
[1] ( https://www.w3.org/WAI/tutorials/images/decorative/) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment