mfw div spamming

mfw div spamming

Semantic HTML Elements und Accessibility

mfw - my face when

div spamming

Die Kunst, für jedes Element und jeden Container <div> zu nutzen.

Die obligatorische Agenda

  1. ​Exklusiver Einblick in Screen Readers und Keyboard Navigation
  2. Die 10 besten Alternativen zu <div>. #6 wird dich überraschen!
  3. Mehr Accessibility Tweaks (aria-, role und alt)
  4. 2 coole Browser-Plugins
  5. Warum sollte uns das interessieren?

VoiceOver Demo

"link, Accessiblity - Wikipedia"
<a>Accessibility - Wikipedia</a>
"Search Form, required, search text field"
<input aria-label="Search Form" type="search" >
"heading level 2 Legislation"
<h2>Legislation</h2>
"white line figure"
<img alt="white line figure" src="2qn28a.jpg" >
"collapsed, Menu pop-up link, More options"
<a aria-haspopup="true" aria-label="More options" aria-controls="action-menu" aria-expanded="false" ></a>

Screen Reader be like ¯\_( ͡ᵔ ͜ʖ ͡ᵔ )_/¯

<input> <div onclick="openLink()">Accessibility - Wikipedia</div> <div >Legislation</div> <img src="2qn28a.jpg"> <div onclick="openPopup()"></div>

Alternativen zu <div>

Wirklich bei #6 aufpassen!

"Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors."

#1

span

<div style="display: inline;">Text</div><span>Text</span>

#2

b

<span style="font-weight: bold;">Text</span><b>Text</b>

#3

headings

<div >Oberüberschrift</div> <div >Unterüberschrift</div><h1>Oberüberschrift</h1> <h2>Unterüberschrift</h2>

#4

section

<div> <h2>Titel</h2> <p>Something meaningful</p> </div><section> <h2>Titel</h2> <p>Something meaningful</p> </section>

#5

time

<span>02.12.2020 13:00</span><time datetime="2020-12-02 13:00"> 02.12.2020 13:00 </time>

#7

button

<div onclick="doSmth()"> Klick mich! </div><button onclick="doSmth()"> Klick mich! </button>

#8

lists

<div> <div *ngFor="let item of shoppingList"> {{item}} </div> </div><ul> <li *ngFor="let item of shoppingList"> {{item}} </li> </ul>

#9

nav

<div> <a href="/home">Home</a> <a href="/impressum">Impressum</a> </div><nav> <a href="/home">Home</a> <a href="/impressum">Impressum</a> </nav>

#10

figure / figcaption

<div> <img src="/stuhl.jpg" alt="Foto eines blauen Stuhles auf weißem Hintergrund" > <span>Unser neuer Stuhl</span> </div><figure> <img src="/stuhl.jpg" alt="Foto eines blauen Stuhles auf weißem Hintergrund" > <figcaption>Unser neuer Stuhl</span> </figure>

Mehr tolle Attribute

alt

"Foto einer hübschen Person"

<img alt="Foto einer hübschen Person" src="my-image.png" >
aria-label

"button delete"
<button aria-label="delete"> <svg><!-- --></svg> </button>
aria-hidden

wird vom screen reader übersprungen
<div aria-hidden="true"></div>
role

"Button, Click me!"
"You are on a text element" (VoiceOver)

<div role="button">Click me!</button> <div role="seperator">Nonsense</div>
aria-describedby

"This is important information."
<button onclick="openPopover()" aria-describedby="important-info" >Click me!</button> <Popover id="important-info"> This is important information. </Popover>

WAVE und axe

Ecosia 
lesetagebu.ch

Warum das ganze?

<div> <div>Eine Überschrift</div> <div> Ganz ganz viel Text und hier ist <div>kursiver Text</div>. </div> <div> <div> Nicht diesen Button klicken! </div> <div onclick="clicked()"> Klick mich! </div> </div> </div><dialog> <h1>Eine Überschrift</h1> <p> Ganz ganz viel Text und hier ist <i>kursiver Text</i>. </p> <div> <b> Nicht diesen. Button klicken! </b> <button onclick="clicked()"> Klick mich! </button> </div> </dialog>

Search Engine Optimization

Lesbarkeit für Crawler:
alt, aria-label

Eindeutigere Klassifikation des Contents:
viele <article>s - Blog oder Newspage

Navigierbarkeit für Crawler:
<a href="..."> statt Click-Events

Identifizierung des relevanten Inhalts:
<h1>, <h2>, <p>
"Mild"
(H54.3)
"Moderate" bis "Severe"
(H54.2, H54.1)
Blindheit
(H54.0)
Anteil der Menschen mit eingeschränkter Sicht (global)
Ohne eingeschränkte Sicht
Global data on visual impairment, WHO (2010)

Und jetzt?

  1. ​Standartkonformen HTML-Code schreiben (Dev Tools - Console, Issues)
  2. Die richtigen Tags einsetzen
  3. Mehr HTML, weniger JavaScript
  4. Navigierbarkeit mit Tastatur beachten / Fluss designen
  5. alt-Texte für Bilder schreiben
  6. Hierarchie für Überschriften entwerfen
  7. WAVE und axe einsetzen
Danke für Eure Aufmerksamkeit!

Cool Stuff

Screen Readers: NVDA (Windows), JAWS (Windows), VoiceOver (Mac), Orca (Gnome)
Extensions: axe - Web Accessiblity Testing, WAVE (both Chrome & Firefox)