Accessibility & Multi-Screen Design: Images

A presentation at #cos18 in June 2019 in by Eric Eggert

Slide 1

Accessibility & Multi-Screen Design Images Eric Eggert — Accessibility & Multi-Screen Design – #cos18

Slide 2

Disclaimer This course is not a W3C course. Views expressed are my own. Dies ist kein W3C-Kurs. Alle Ansichten sind meine Eigenen.

Slide 3

Overview ๏ Definitions ๏ The img element ๏ alt attribute ๏ srcset attribute for Display Density ๏ srcset attribute for Width Descriptions ๏ sizes attribute ๏ The picture element ๏ type attribute

Slide 4

Definitions

Slide 5

Slide 6

Slide 7

5144×1698px ≧ 11 1024×768px monitors! 410kb

Slide 8

Samsung Galaxy J3 (2017) 720 x 1280 pixels (~294 ppi density) 9.5 phones needed to display the watch image at native resolution.

Slide 9

Two Main Use Cases for Responsive Images (More defined by RICG.)

Slide 10

Switch Resolution & Density

Slide 11

Slide 12

Art Direction

Slide 13

Slide 14

Slide 15

Slide 16

Source: Use Cases and Requirements for Standardizing Responsive Images

Slide 17

The img element

Slide 18

Slide 19

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.

Slide 20

WAI Images Tutorial

Slide 21

Does the image contain text? ๏ Yes: ๏ … and the text in the image is also present as real text nearby. Use an empty alt attribute. See Decorative Images. ๏ … and the text is only shown for visual effects. Use an empty alt attribute. See Decorative Images. ๏ … and the text in the image is not present otherwise. Use the alt attribute to include the text of the image. See Images of Text. ๏ No: Continue.

Slide 22

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? ๏ Yes: ๏ Use the alt attribute to communicate the destination of the link or action taken. See Functional Images. ๏ No: Continue.

Slide 23

Does the image contribute meaning to the current page or context? ๏ Yes: ๏ … and it’s a simple graphic or photograph. Use a brief description of the image in a way that conveys that meaning in the alt attribute. See Informative Images. ๏ … and it’s a graph or complex piece of information. Include the information contained in the image elsewhere on the page. See Complex Images. ๏ … and it shows content that is redundant to real text nearby. Use an empty alt attribute. See Functional Images. ๏ No: Continue.

Slide 24

Is the image purely decorative or not intended for the user? ๏ Yes: ๏ Use an empty alt attribute. See Decorative Images. ๏ No: ๏ End of tree.

Slide 25

Everything starts with an img element in responsive images.

Slide 26

Slide 27

When is it just a simple img element? ๏ A fixed width, single density web page ๏ Small differences in file size ๏ Using vector-based images like SVG

Slide 28

High Density Images

Slide 29

ppi = pixel per inch

Slide 30

iPhone 1, 3G, 3GS: 320×480px @ ~165ppi

Slide 31

iPhone 4 & 4s: 640×960px @ ~330ppi (=2×)

Slide 32

iPhone 5 & 5s: 640×1136px @ ~330ppi (=2×)

Slide 33

๏ iPhone 6, 6s, 7, 8: 750×1334px @ ~326ppi (=2×) ๏ iPhone 6 Plus, 6s Plus, 7 Plus, 8 Plus: 1080×1920px @ ~401ppi (=3×)

Slide 34

srcset

Slide 35

If we take our watch image and base it on a 320px width for 1x resolution, we’d come up with this: <img srcset=”watch.jpg, watch-2x.jpg watch-3x.jpg watch-4x.jpg watch-5x.jpg watch-6x.jpg watch-7x.jpg watch-8x.jpg watch-9x.jpg watch-10x.jpg watch-11x.jpg watch-12x.jpg watch-13x.jpg watch-14x.jpg watch-15x.jpg watch-16x.jpg 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x, 11x, 12x, 13x, 14x, 15x, 16x”>

Slide 36

Best for fixed-width images but insufficient for flexible images* *You remember that flexible images are a core principle of RWD, right?

Slide 37

srcset width descriptors

Slide 38

Browser picks the best source?! ๏ The browser determines the width of the image on the page ๏ calculates what size of image is needed and ๏ downloads that.

Slide 39

Of course it is not that easy!

Slide 40

Introducing: Prefetching ๏ Browsers fetch images before they know how the website actually looks to make the web faster. ๏ They fetch images before the CSS is loaded. ๏ So initially, every image is as wide as the viewport.

Slide 41

Slide 42

Slide 43

Slide 44

What to do?!

Slide 45

sizes FTW!

Slide 46

sizes is required (when using width descriptors)

Slide 47

Slide 48

We tell the browser how wide the image is in relationship to the viewport (or absolutely).

Slide 49

We also tell the browser when that relationship changes.

Slide 50

Slide 51

Media Conditions Subset of media queries: (max-width: 480px) or (min-width: 480px)

Slide 52

Size ๏ Often expressed in viewport width (vw) unit ๏ 1vw is 1% of the width of the viewport ๏ 33vw = 33% of the viewport ๏ Can also be px, em, % ๏ calc() can be used (for example for calculating margins)

Slide 53

Slide 54

Browser Support Source: Can I use… Support tables for HTML5, CSS3, etc

Slide 55

Polyfill: Picturefill Don’t use it unless you have to

Slide 56

Slide 57

<picture> <source media=”(min-width: 900px)” srcset=”cat-vertical.jpg”> <source media=”(min-width: 750px)” srcset=”cat-horizontal.jpg”> <img src=”cat.jpg” alt=”cat”> </picture> ๏ Picture Container Element ๏ Multiple Sources with media queries ๏ Srcset support ๏ Fallback <img> element (required)

Slide 58

media attribute = real media query media attribute is a directive, not a suggestion

Slide 59

Slide 60

<picture> <source srcset=”homepage-person@desktop.png, homepage-person@desktop-2x.png 2x” media=”(min-width: 990px)”> <source srcset=”homepage-person@tablet.png, homepage-person@tablet-2x.png 2x” media=”(min-width: 750px)”> <img srcset=”homepage-person@mobile.png, homepage-person@mobile-2x.png 2x” alt=”Shopify Merchant, Corrine Anestopoulos”> </picture> When the image was variable width instead of fixed width, width descriptors and sizes could have been used as well.

Slide 61

type attribute This attribute lets you assign different image formats.

Slide 62

Image Formats ๏ “Traditional”: PNG, GIF, JPG ๏ “Advanced” ๏ SVG ๏ WebP ๏ JPEG2000 ๏ HEIC

Slide 63

<picture> <source type=”image/svg+xml” srcset=”logo.xml”> <source type=”image/webp” srcset=”logo.webp”> <img src=”logo.png” alt=”ACME Corp”> </picture> Unless art direction, no media attribute needed.