Wir finden Wege, unterschiedliche Bedürfnisse zu berücksichtigen.
V O R T R A G
I Can Hear My Mother’s Voice
* Jordan Lord, Deborah Lord
![Three elderly white women sit next to each other; two of them wear leopard-print and have matching strawberry blonde hair. The third woman wears a pink track jacket and closes her eyes, as she holds the hand of the woman in the center. They all appear to be singing. A caption at the bottom of the frame reads: “you can read it in their lips.](/media/i-can-hear-my-mothers-voice-jordan-lord-2018.jpg)
Sinne
- 👁️ Sehen
- 👂 Hören
- 🖐🏾 Tasten
Architektur
Orientierungssysteme, Rampen, Akustik
![Bodenleitsysteme in Salerno](/media/bodenleitsysteme.jpg)
Industriedesign
Besteck, Schaukeln, Ergonomie
![Löffel](/media/liftware-loeffel.jpg)
Film, TV, Live
Untertitel, akustische Bildbeschreibung, Gebärdensprache
Grafikdesign
Brailleschrift, Legasthenie, „Brazilian Ads“
![Brailleschrift](/media/brailleschrift.jpeg)
![GT Haptik Schrift](/media/gt-haptik-font.png)
![OpenDyslexic Schrift](/media/opendyslexic-font.png)
![OCR-A Schrift](/media/ocr-a-font.jpg)
![FE-Schrift](/media/fe-schrift-1978.png)
![Ghost (Spicy Catsup) Plakat](/media/advertising-in-brazil-1.jpeg)
![Cesar Hundefutter Plakat](/media/advertising-in-brazil-2.jpeg)
![Cesar Hundefutter Plakat](/media/advertising-in-brazil-3.jpeg)
Webdesign
Text-to-Speech, einfache Sprache, Farbkontraste, Schriftgrößen
![ÖGS barrierefreie Website](/media/oegs-website-barrierefrei.png)
![Häufigkeit der Accessibility Mängeln (WCAG)](/media/websites-with-wcag-failures.png)
![Stark Extension für Google Chrome](/media/stark-chrome-plugin.png)
Prinzipien
- Wahrnehmbar: Informationen und Bestandteile müssen wahrnehmbar präsentiert werden.
- Bedienbar: Bestandteile müssen bedienbar sein.
- Verständlich: Informationen und Bestandteile müssen verständlich sein.
- Robust: Inhalte müssen robust genug sein, damit sie zuverlässig interpretiert werden können.
Alt Text as Poetry
Workshop von Bojana Coklyat und Shannon Finnegan
![Alt Text as Poetry](/media/alt-text-as-poetry.png)
P R A X I S
Fokus
- 🏢 HTML
- 💅🏾 CSS
- 💃 JavaScript
Übung anlegen
- Ordner „html-1“ kopieren, in „html-2“ umbenennen und in VS Code öffnen
- Datei „vorname.html“ im Chrome-Browser öffnen
Navigation
Links zu einer Navigation zusammenfassen. Linksammlungen wie eine Hauptnavigation werden so semantisch klar gekennzeichnet. Ein Menü besteht in der Regel aus visuell wahrnehmbaren Links in Listenform. Beispiele dafür: Hauptnavigation am Seitenanfang, Links in der Fußzeile.
…
<nav>
<ul>
<li><a href="vorname.html">Home</a></li>
<li><a href="ueber-mich.html">Über mich</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
…
Artikel
Elemente zu einem Artikel zusammenfassen. Enthält in der Regel mindestens eine Überschrift, mehrere längere Paragraphen und ein Medienelement (Bild oder Video). Beispiele dafür: Beitrag auf Nachrichten-Portalen, Projektvorstellung auf einer Portfolio-Website.
…
<article>
<h1>Mein neues Projekt</h1>
<p>Ein etwas längerer Absatz oder so ok. Kann inhaltlich ruhig auch etwas in die Tiefe gehen und ausschweifender Themen behandeln.</p>
<img src="media/beispiel-grafik.png">
<p>Ein etwas längerer Absatz oder so ok. Ein etwas längerer Absatz oder so ok.</p>
</article>
…
Sektion
Elemente in einer Sektion zusammenfassen. Sie enthält in der Regel visuell zusammenhängende Elemente (= Sinngruppe) die eigenständig funktionieren und als klar erkennbarer Abschnitt eine auffallende Präsenz im Gesamten einnehmen. Beispiele dafür: Projekt-Übersicht mit Thumbnails, Formular zur Newsletter-Anmeldung.
…
<section>
<img src="media/beispiel-grafik.png">
<h2>Projekt 1 Titel</h2>
<video src="media/beispiel-video.mp4" autoplay muted loop>🥵 Oje</video>
<h2>Projekt 2 Titel</h2>
</section>
…
Gruppe
Elemente neutral zusammenfassen. Besteht keine klare semantische Rolle einer Gruppe von Elementen, kann man diese auch neutral bündeln. Meistens handelt es sich dabei um kleinere Bausteine, die Teil eines größeren Abschnitts (Sektion) sind. Beispiel dafür: Thumbnail mit einem nebenstehenden Titel.
…
<section>
<div>
<img src="media/beispiel-grafik.png">
<h2>Projekt 1 Titel</h2>
</div>
<div>
<video src="media/beispiel-video.mp4" autoplay muted loop>🥵 Oje</video>
<h2>Projekt 2 Titel</h2>
</div>
</section>
…
Frame
Externe Website einbetten.
…
<iframe src="https://www.newyorker.com">🥵 Oje</iframe>
…
Sprache
Dokument um Sprachangabe ergänzen. Essenzielle Angabe, um Browsern und Suchmaschinen klar zu kennzeichnen, welche Sprache überwiegend auf der jeweiligen Seite vorkommt.
<html lang="de">
<head>
<title>Meine erste Website</title>
</head>
<body>
…
</body>
</html>
Zeichensatz
Dokument um Zeichencodierung ergänzen. Essenzielle Angabe, um Browsern klar zu melden, welcher Umfang an Schriftzeichen und Symbolen geladen werden muss, um eine fehlerhafte Darstellung von Texten zu vermeiden.
<html lang="de">
<head>
<meta charset="utf-8">
<title>Meine erste Website</title>
</head>
<body>
…
</body>
</html>
Bildbeschreibung
Bild um Alternativtext ergänzen. Essenzielle Angabe, um Screenreadern und Suchmaschinen zu ermöglichen Bildinhalte zu erfassen und sinngemäß wiederzugeben.
…
<div>
<img src="media/beispiel-grafik.png" alt="Cooles Bild">
<h2>Projekt 1 Titel</h2>
</div>
…
Thumbnail
Video um Thumbnail ergänzen.
…
<div>
<video src="media/beispiel-video.mp4" poster="media/beispiel-video-thumbnail.png" controls muted loop>🥵 Oje</video>
<h2>Projekt 2 Titel</h2>
</div>
…
Navigation
- Eine zusätzliche Beschreibung für Screenreader angeben
- Ziel des Links in einem neuen Tab öffnen
…
<nav>
<ul>
<li><a href="vorname.html">Home</a></li>
<li><a href="ueber-mich.html" aria-label="Über mich">🧚</a></li>
<li><a href="https://www.instagram.com/bylinebyline" target="_blank">Instagram</a></li>
</ul>
</nav>
…
Übung abschließen
Übung so gut wie möglich fertig machen (vollständig und sauber) und bis zum nächsten Termin per Slack DM abgeben.
📂 → 🗜️ → 🎁 → 💬 → ✅