1. For important information, use text rather than images. Only use images that usefully add to the text.
2. Describe non-text elements in the UI or with alternative text so screen readers can succinctly describe images and media.
3. Avoid moving or flashing images if possible.
If an image contains information that can only be understood by seeing the image, then you need to explain the content of the image using alternative text. Follow these guidelines when you write alt text:
1. The text should be an adequate replacement for both the content and the function of the image.
2. Determine the correct content and then deliver that message as succinctly as possible. Aim for no more than a few words, though sometimes a short sentence or two may be necessary.
3. Don't repeat information that is contained in the text found on the page around the image.
4. Don't use phrases like "image of ..." or "a photo of ..." to describe the image. This is apparent when using screen readers and the description itself should be enough to replace the meaning of the image.
5. If the meaning and content of an image is conveyed by surrounding text, header, or captions, then you might not need as much alternative text.
If the image is used strictly to make the page pleasant to the eye, doesn't contain a link, and isn't used to deliver information, then include the alt attribute, but leave it empty. For example, alt=""
A complex image could be a diagram, table or chart. Depending on the level of complexity, the image may need text near it explaining the contents, short alt text that complements this and possibly a link to a page with a long text description.
1. Provide transcripts and in-sync captioning. Make sure users can control when the video or gif starts and stops.
2. Provide audio description for any text displayed in a video.