Accessibility & Multi-Screen Design

Eric Eggert, outline

Accessibility &
Multi-Screen Design Images

This course is not a W3C course.
Views expressed are my own.

Dies ist kein W3C-Kurs.
Alle Ansichten sind meine Eigenen.



This Image

Blackberry Curve

Two main
use cases

More as defined by the Responsive Images Community Group

Resolution and density switching

Art direction

The img element

<img src="cat-image.jpg" alt="Cute cat image">

The alt attribute

The alternative text (alt) describes an image in a way that the purpose or content of the image is clear without seeing the image.

Decision Tree

Does the image contain text?

Is the image used in a link or a button, and would it be hard or impossible to understand what the link or the button does, if the image wasn’t there?

Does the image contribute meaning to the current page or context?

Is the image purely decorative or not intended for the user?

The img element is the basis of everything responsive images

When do you need only a simple img?

High density images

ppi = pixel per inch

Types of resolutions