Dostepne obrazy i multimedia

W Starożytnym Egipcie każda rzezba, malowidlo i relief na ścianie swiatyni miał swój opis - czesto wyrzynany obok w formie hieroglifów. Dzis musimy robic to samo dla treści wizualnych w internecie, aby osoby niewidome i słabowidzące mogly zrozumieć, co przedstawiaja nasze obrazy i multimedia.

Tekst alternatywny (alt)

Atrybut

alt

to najważniejszy element dostępności obrazów. Czytnik ekranowy odczyta go zamiast pokazywac obraz.

Zasady pisania alt

1<!-- 1. Opisuj CO jest na obrazku, nie JAK wygląda plik -->
2<!-- ŹLE -->
3<img src="IMG_0042.jpg" alt="IMG_0042.jpg">
4<img src="piramida.jpg" alt="piramida">
5
6<!-- DOBRZE -->
7<img src="piramida.jpg"
8     alt="Wielka Piramida w Gizie na tle zachodzacego słońca">
9
10<!-- 2. Badzr zwiezly - 1-2 zdania -->
11<!-- ŹLE - za dlugi -->
12<img src="mask.jpg"
13     alt="Na zdjeciu widzimy zlota maske posmiertna mlodego
14     faraona Tutanchamona, która zostala odkryta przez Howarda
15     Cartera w 1922 roku w Dolinie Krolow i wazy około 11 kg
16     czystego zlota z inkrustacjami z lapis lazuli i turkusu">
17
18<!-- DOBRZE -->
19<img src="mask.jpg"
20     alt="Zlota maska posmiertna faraona Tutanchamona z inkrustacjami z lapis lazuli">

Kiedy alt powinien być pusty?

Obrazy dekoracyjne, które nie niosa treści informacyjnej, powinny mieć pusty atrybut alt:

1<!-- Dekoracyjna linia oddzielajaca -->
2<img src="border-pattern.png" alt="">
3
4<!-- Ikona obok tekstu, który ja opisuje -->
5<button>
6    <img src="search-icon.png" alt="">
7    Szukaj
8</button>
9<!-- Tekst "Szukaj" juz opisuje funkcje, ikona jest dekoracyjna -->
10
11<!-- Tło dekoracyjne - lepiej używać CSS -->
12<div style="background-image: url('papyrus-bg.jpg')">
13    <p>Tresc artykulu...</p>
14</div>

Element figure i figcaption

1<figure>
2    <img src="rosetta-stone.jpg"
3         alt="Kamien z Rosetty z trzema rodzajami pisma: hieroglifami, pismem demotycznym i greckim">
4    <figcaption>
5        Kamien z Rosetty (196 p.n.e.) - klucz do odczytania hieroglifów,
6        odkryty w 1799 roku przez zolnierzy Napoleona
7    </figcaption>
8</figure>

<figcaption>

to podpis widoczny dla wszystkich użytkowników, a

alt

to opis przeznaczony specjalnie dla czytników ekranowych.

Dostepne wideo

Napisy (Captions)

1<video controls>
2    <source src="exhibition-tour.mp4" type="video/mp4">
3
4    <!-- Napisy dla osób nieslyszacych -->
5    <track kind="captions" src="captions-pl.vtt"
6           srclang="pl" label="Polski" default>
7
8    <!-- Napisy w innym jezyku -->
9    <track kind="subtitles" src="subtitles-en.vtt"
10           srclang="en" label="English">
11
12    Twoją przeglądarka nie wspiera elementu video.
13</video>

Roznica miedzy captions a subtitles:

• Captions - napisy dla osób nieslyszacych, zawieraja też opisy dzwiekow:

  [muzyka w tle]

  ,

  [dzwiek kroków]

• Subtitles - tlumaczenie dialogow na inny jezyk

Format WebVTT

1WEBVTT
2
300:00:01.000 --> 00:00:04.000
4Witamy w Muzeum Starożytnego Egiptu.
5
600:00:04.500 --> 00:00:08.000
7Rozpoczynamy nasza podroz od Sali Glownej.
8
900:00:08.500 --> 00:00:12.000
10[dzwieki kroków na marmurowej podlodze]

Dostepne audio

1<figure>
2    <figcaption>
3        <h3>Audiobook: Historia Kleopatry</h3>
4    </figcaption>
5    <audio controls>
6        <source src="cleopatra.mp3" type="audio/mpeg">
7        Twoją przeglądarka nie wspiera elementu audio.
8    </audio>
9    <!-- Transkrypcja dla osób nieslyszacych -->
10    <details>
11        <summary>Transkrypcja nagrania</summary>
12        <p>Kleopatra VII Filopator, ostatnia wladczyni
13        dynastii Ptolemeuszow...</p>
14    </details>
15</figure>

SVG dostępny

1<!-- SVG jako obraz informacyjny -->
2<svg rolę="img" aria-labelledby="chart-title chart-desc">
3    <title id="chart-title">Liczba odwiedzajacych muzeum</title>
4    <desc id="chart-desc">
5        Wykres slupkowy pokazujacy wzrost odwiedzajacych
6        z 50 000 w 2020 do 120 000 w 2024.
7    </desc>
8    <!-- elementy SVG -->
9</svg>
10
11<!-- SVG dekoracyjny -->
12<svg aria-hidden="true" focusable="false">
13    <!-- dekoracyjna grafika -->
14</svg>

Prefers-reduced-motion

Niektory uzytkownicy są wrazliwi na animacje - mogą powodowac zawroty glowy lub nudnosci:

1/* Domyslna animacja */
2.slide-in {
3    animation: slideIn 0.5s ease-in-out;
4}
5
6/* Wylaczenie animacji dla użytkowników, ktorzy tego wola */
7@media (prefers-reduced-motion: reduce) {
8    .slide-in {
9        animation: none;
10    }
11
12    * {
13        transition-duration: 0.01ms !important;
14        animation-duration: 0.01ms !important;
15    }
16}

Dostepne multimedia to jak napisy przy egipskich relielach - pozwalaja kazdemu zrozumieć przekaz, niezależnie od tego, czy "widzi" oryginal, czy korzysta z opisu.