SlideShare ist ein Scribd-Unternehmen logo
A11y ist für alle da - auch für Dich!
A11y ist für alle da - auch für Dich!
A11y = Accessibility
11 Buchstaben, die sich keiner merken kann …
}
Nils Lauk
@hirsebirse
Quelle: https://www.flickr.com/photos/firelizard5/8479806007/
Eine Zielgruppe? Viele Gewinner!
Es geht nicht um Behinderung, sondern um Beeinträchtigung
Quelle: https://download.microsoft.com/download/B/0/D/B0D4BF87-09CE-4417-8F28-D60703D672ED/INCLUSIVE_TOOLKIT_MANUAL_FINAL.pdf
Arm gebrochen: Maus oder Telefon mit der „falschen“ Hand bedienen
Mobiltelefon in der Sonne, Seite mit wenig Kontrast
Videonachricht auf dem Telefon, während laute Party im Gange ist
„Okay, Google …“
Worauf kann Design achten?
Dünne Schrift und zu geringer Kontrast sind zu vermeiden
http://webaim.org/resources/contrastchecker/
Eine Überschrift ist eine Überschrift
Screenreader hangeln sich an Überschriften durchs Dokument
JA
- <h1> bis <h6>
- Vorher Gedanken über Struktur machen
NEIN
- .h1 bis .h6 und sonst nichts
- Nicht nur übers Visuelle gehen
Vermeide den übermäßigen Gebrauch von VERSALIEN
• Versalien sind schwer zu lesen
• Versalien können Screenreader verwirren
• Versalien sind „unhöflich“
• Menschen mit Leseschwäche werden benachteiligt
• Für Entwickler: Lieber mit CSS stylen!

.gross {text-transform: uppercase;}
• Aber lieber einfach lassen …
„Schrei doch nicht so“
Finde das richtige Mittelmaß bezüglich Satzlängen
Zu lange Zeilen vermeiden
- Man verliert die Zeile
Zu kurze Zeilen vermeiden
- Man muss zu viel hin und zurück
Finde das richtige Mittelmaß bezüglich Satzlängen
Finde das richtige Mittelmaß bezüglich Satzlängen
Kommuniziere nicht über Farbe
Farbfehlsichtkeit kommt bei 8-9% der Männer und 1% der Frauen vor
Kommuniziere nicht über Farbe
Farbfehlsichtkeit kommt bei 8-9% der Männer und 1% der Frauen vor
Kommuniziere nicht über Farbe
Farbfehlsichtkeit kommt bei 8-9% der Männer und 1% der Frauen vor
Kommuniziere nicht über Farbe
Farbfehlsichtkeit kommt bei 8-9% der Männer und 1% der Frauen vor
Kommuniziere nicht über Farbe
Tools zum Testen von Farbfehlsichtigkeit
Kommuniziere nicht über Farbe
Tools zum Testen von Farbfehlsichtigkeit
Kommuniziere nicht über Farbe
Tools zum Testen von Farbfehlsichtigkeit
www.getstark.co
Kommuniziere nicht über Farbe
Tools zum Testen von Farbfehlsichtigkeit
Ein Link soll als solcher zu erkennen sein
Farbe, Gestaltung - Hauptsache er hebt sich vom Fließtext ab
Dies ist ein einfacher Fließtext, der
an irgendeiner Stelle einen Link hat -
ich sage aber nicht wo genau. Viele
werden es erkennen, Menschen mit
Rot-Grün-Schwäche könnten ihre
Probleme damit haben …
Dies ist ein einfacher Fließtext, der
an irgendeiner Stelle einen Link hat -
ich sage aber nicht wo genau. Viele
werden es erkennen, Menschen mit
Rot-Grün-Schwäche könnten ihre
Probleme damit haben …
Dies ist ein einfacher Fließtext, der
an irgendeiner Stelle einen Link hat -
ich sage aber nicht wo genau. Viele
werden es erkennen, Menschen mit
Rot-Grün-Schwäche könnten ihre
Probleme damit haben …
Text: #333
Link: #006567
Text: #333
Link: #009090
… oder schön unterstreichen
Ist immerhin so gelernt.
Ein Link soll Sinn machen
Wie nenne ich meinen Link?
• Hier finden Sie mehr zu unseren Produkten
• Klicken Sie hier für Informationen über uns
Nicht gut
• Finden Sie mehr heraus über unsere Produkte
• Klicken Sie hier für Informationen über uns
Besser
Nimm dem User nicht das Outline weg
a:focus { outline: none; }
Gib Platz zum Klicken
a { padding: .4em; }
„Touch targets must be large enough to touch accurately.“
— BBC Mobile Accessibility Guidelines
BBC schlägt vor
• Die empfohlene Touchfläche sollte 7 bis 10mm betragen.
• Die Touchfläche kann z.B. durch Zugabe von padding erzeugt werden.
• Buttons immer „mit Luft“ versehen.
Keine Info auf den Bildern
Nicht in Photoshop auf dem Bild schreiben, wenn es wichtig ist
Animationen und Videos können Schwindel auslösen
Sparsam mit Bewegtbildern umgehen, Kontrolle geben, Fokussieren
Schönes Video, aber …
Untertitel und/oder Transkript bereitstellen
Schönes Video, aber …
Untertitel und/oder Transkript bereitstellen
Schönes Video, aber …
Untertitel und/oder Transkript bereitstellen
Schönes Video, aber …
Untertitel und/oder Transkript bereitstellen
Worauf kann Technik achten?
Semantik!
Ein richtiger Seitenaufbau hilft allen
<header>
role="banner"
Landmark: Banner
<main>
role="main"
Landmark: main
<aside>
role="complementary"
Landmark: Seitenbereich
<nav>
role="navigation"
Landmark: Navigation
<footer>
role="contentinfo"
Landmark: contentinfo
Benutze die richtigen HTML5-Elemente oder wenigstens das „role“-Äquivalent
Semantik!
Semantik!
• Benutze Landmarks, also vernünftige Auszeichnungen im Markup (nav, main, …)

• Landmarks können a.) aufgelistet und b.) direkt angesprungen werden

• Kann z.B. <main> nicht benutzt werden, dann setze role="main" ein

• Überschriften (h1 - h6) vernünftig einsetzen, keine <div class="wie-h1">

• Überschriften unterteilen das Dokument und können direkt angesprungen werden
Semantik!
aria-attribute unterstützen
ARIA steht für Accessible Rich Internet Applications
Beispiele für aria-Attribute
aria-checked 

aria-describedby

aria-disabled

aria-hidden

aria-labelledby

aria-required

…
https://www.w3.org/TR/wai-aria/states_and_properties
Semantik!
aria-attribute unterstützen
<label for="pw">Passwort</label>
<input type="password" id="pw" aria-describedby="pw-hint">
<button>Abschicken</button>
<dialog id="pw-hint">Passwort muss mindestens zwölf Zeichen enthalten</dialog>
dialog {
display: none;
background-color: yellow;
padding: .3em;
}
#pw:focus ~ dialog {
display: block;
}
Semantik!
Das Label stellt Verbindung her
<ul>
<li>
<input type="checkbox"> Salami
</li>
</ul>
Chromevox:
„Kästchen nicht aktiviert, Listenelement“
„aktiviert, Kästchen aktiviert“
VoiceOver:
„deaktiviert: Markierungsfeld“
„markiert: Markierungsfeld“
Negative Nebeneffekte
- Klick auf „Salami“ setzt kein Häkchen
- Keine Ahnung, was ich da anhake
Semantik!
Das Label stellt Verbindung her
Chromevox:
„Listenelement: Salami, Kästchen nicht
aktiviert“
„aktiviert, Salami, Kästchen aktiviert“
VoiceOver:
„Salami, deaktiviert: Markierungsfeld“
„markiert: Salami, Markierungsfeld“
Positive Nebeneffekte
- Klick auf „Salami“ setzt Häkchen
- Man weiß, was man anhakt
<ul>
<li>
<input type="checkbox" id="item1">
<label for="item1">Salami</label>
</li>
</ul>
Semantik!
Das Label stellt Verbindung her
Chromevox:
„Salami, Kästchen nicht aktiviert,
Listenelement“
„aktiviert, Salami, Kästchen aktiviert“
VoiceOver:
„Salami, deaktiviert: Markierungsfeld“
„markiert: Salami, Markierungsfeld“
<ul>
<li>
<label>
<input type="checkbox" id="item1">
Salami
</label>
</li>
</ul>
Semantik!
Das Label stellt Verbindung her
<label>
<input type="radio" name="farbe" value="blau"> Blau
</label>
<label>
<input type="radio" name="farbe" value="gruen"> Grün
</label>
Semantik!
Das Label stellt Verbindung her
Chromevox bei Fokus auf Elementen:
Text bearbeiten
Suchen, Schaltfläche
<input type="text">
<button>Suchen</button>
Semantik!
Das Label stellt Verbindung her
Chromevox bei Fokus auf Elementen:
„Suchbegriff eingeben“, Text bearbeiten
Suchen, Schaltfläche
<input type="text" placeholder="Suchbegriff eingeben“>
<button>Suchen</button>
Semantik!
Das Label stellt Verbindung her
Chromevox bei Fokus auf Elementen:
„Suchbegriff eingeben“, Text bearbeiten
Suchen, Schaltfläche
<span>Filmsuche</span>
<input type="text" placeholder="Suchbegriff eingeben">
<button>Suchen</button>
Semantik!
Das Label stellt Verbindung her
Chromevox bei Fokus auf Elementen:
„Filmsuche“ with hint „Suchbegriff eingeben“, Text bearbeiten
Suchen, Schaltfläche
<label for="search">Filmsuche</label>
<input type="text" id="search" placeholder="Suchbegriff eingeben">
<button>Suchen</button>
Vernünftige Links
Unsichtbare Links, sichtbare Links, umbenannte Links
<a href="#content" class="visihidden">Springe direkt zum Inhalt</a>
<ul>
<li>
<a href="seite.html">Impressum</a>
</li>
<li>
<a href="seite2.html" aria-hidden="true">Kontakt</a>
</li>
</ul>
<main id="content">
<p>Viel Text und Blabla. Lesen Sie <a href="products.html" aria-
label="Produkte">mehr</a>.</p>
</main>
.visihidden {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.visihidden:focus {
clip: auto;
height: auto;
overflow: auto;
position: relative;
width: auto;
}
Links mit Icons - aber richtig
Nur visuell ist nicht gut
<a href="#">
<i class="fi-search size-36" aria-hidden="true">
::before
</i>
</a>
Links mit Icons - aber richtig
Nur visuell ist nicht gut
<a href="#">
<i class="fi-search size-36" aria-hidden="true">
::before
</i>
Suche
</a>
Suche
„Suche“
Links mit Icons - aber richtig
Nur visuell ist nicht gut
<a href="#">
<i class="fi-search size-36" aria-hidden="true">
::before
</i>
<span class="visihidden">Suche</a>
</a>
„Suche“
<button>
<i class="fi-search size-36" aria-hidden="true">
::before
</i>
<span class="visihidden">Suche</a>
</button>
Was ist auf dem Bild?
Immer das alt-Attribut für Bilder setzen
VoiceOver: „b s p bild 4 5 1 8 6 3 2 5 0 x 2 5 0 j p g, Bild“
<img src="pics/bsp-bild-451863-250x250.jpg" width="250" height="250">
Schlecht
VoiceOver: „ “
<img src="pics/bsp-bild-451863-250x250.jpg" alt width="250" height="250">
Besser
VoiceOver: „Hamburgs Michel, Bild“
<img src="pics/bsp-bild-451863-250x250.jpg" alt="Hamburgs Michel" width="250"
height="250">
Richtig
National Federation of the Blind gegen Target Corp.
6 Millionen Dollar Strafe wegen fehlender Alt-Attribute
Was ist auf dem Bild?
alt-Attribut in der weiten Webwelt
Schlecht
Der Alt-Text soll beschreiben, was auf dem Bild zu sehen ist! Dieser Text hier ist viel zu lang.
Besser wäre: „HSV-Sponsor Klaus-Michael Kühne mit gelangweiltem Gesichtsausdruck“ (o.ä.)
Was ist auf dem Bild?
alt-Attribut in der weiten Webwelt
Schlechter
Dieser Text ist besagt einfach nichts. Besser wäre: „Stempel mit Aufschrift ‚Unheilbar‘ oder
einfach ein leeres Alt-Attribut, das würde dann „überlesen“ werden.
Was ist auf dem Bild?
alt-Attribut in der weiten Webwelt
Gut
Augen zu und vorstellen, eine Stimme liest es vor. Kann man sich bei diesem Text etwas
vorstellen, was auf dem Bild zu sehen ist? Ja. Sehr gut beschrieben.
Was ist auf dem Bild?
alt-Attribut in der weiten Webwelt
Geht gar nicht
Dieser Text für das Alt-Attribut geht gar nicht! Kommt wohl durch das Content
Management System. Ist aber sehr peinlich …
Nicht den Zoom auf mobilen Geräten deaktivieren
Manche Menschen sind darauf angewiesen
<meta name="viewport" content="width=device-width, minimum-scale=1,
maximum-scale=1, user-scalable=0">
<meta name="viewport" content="width=device-width, initial-scale=1">
„user-scale=0 ist wie das Abreißen einer Rollstuhlrampe
vor einer Behörde, weil die ‚nicht schön‘ ist.“
— Nils Lauk
A11y geht alle etwas an
Jeder profitiert davon - jetzt oder später
• Das Internet ist für alle da
• Niemand sollte ausgesperrt werden, niemandem Informationen vorenthalten
• Machen und keine Furcht davor haben
• Selbst kleine Dinge sind hilfreich (noch mal: Leg los!)
• Es gibt Richtlinien - aus tech. Sicht und für Umsetzung offizieller Seiten
• Wer nicht A11y berücksichtigt, kann „finanziell bestraft“ werden
• A11y ist nicht die Aufgabe einer Person, alle müssen daran arbeiten
• Nicht nur Design und Technik, auch Contentmanager sind gefragt (einfache Sprache)
• Du machst die Seite nicht für Dich, sondern für die Leute „da draußen“
• Du kannst jederzeit auch eine Beeinträchtigung erfahren, Du machst das für Dich
• A11y ist einfach das Richtige zu machen
• Etwas für eine Zielgruppe zu machen, bedeutet für andere Zielgruppen zu arbeiten
DankeNils Lauk, Mediale Hamburg, 2017
Weiterführende Links
Es gibt eine Fülle an Informationsquellen zum Thema A11y im Internet. Hier nur eine ganz kleine Auswahl:
https://www.microsoft.com/en-us/accessibility/default.aspx
https://download.microsoft.com/download/B/0/D/B0D4BF87-09CE-4417-8F28-D60703D672ED/
INCLUSIVE_TOOLKIT_MANUAL_FINAL.pdf (21MB)
https://developers.google.com/web/fundamentals/accessibility/
http://www.bbc.co.uk/guidelines/futuremedia/accessibility/
https://webaim.org/
https://developer.mozilla.org/en-US/docs/Web/Accessibility
https://www.webaccessibility.com/best_practices.php?technology_platform_id=5
https://www.smashingmagazine.com/2016/06/improving-color-accessibility-for-color-blind-users/
https://www.smashingmagazine.com/2012/06/links-should-never-say-click-here/
https://hodigital.blog.gov.uk/category/accessibility/
https://insidegovuk.blog.gov.uk/2014/08/04/sentence-length-why-25-words-is-our-limit/

Weitere ähnliche Inhalte

Ähnlich wie A11y ist für alle da - auch für Dich!

Content kills your Concept?!
Content kills your Concept?!Content kills your Concept?!
Content kills your Concept?!
kuehlhaus AG
 
Blackhat Protection: Negative SEO verstehen & verhindern - SEOkomm 2012
Blackhat Protection: Negative SEO verstehen & verhindern - SEOkomm 2012Blackhat Protection: Negative SEO verstehen & verhindern - SEOkomm 2012
Blackhat Protection: Negative SEO verstehen & verhindern - SEOkomm 2012
Bastian Grimm
 
Trend Forecast Oktober 2014 (Bildsprache, Logos, Farben, Web-Design, Gestaltu...
Trend Forecast Oktober 2014 (Bildsprache, Logos, Farben, Web-Design, Gestaltu...Trend Forecast Oktober 2014 (Bildsprache, Logos, Farben, Web-Design, Gestaltu...
Trend Forecast Oktober 2014 (Bildsprache, Logos, Farben, Web-Design, Gestaltu...
Winkler & Stenzel Marketing GmbH
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk innovationsagentur
 
Seo campixx: Kleine Stilkunde "Texte"
Seo campixx: Kleine Stilkunde "Texte"Seo campixx: Kleine Stilkunde "Texte"
Seo campixx: Kleine Stilkunde "Texte"
Eric Kubitz
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
Nico Steiner
 
WCAG 2.0-Vortrag Webtech 2009
WCAG 2.0-Vortrag Webtech 2009WCAG 2.0-Vortrag Webtech 2009
WCAG 2.0-Vortrag Webtech 2009
Tomas Caspers
 
A terminology guideline to build controlled vocabularies in Chinese - Die Reg...
A terminology guideline to build controlled vocabularies in Chinese - Die Reg...A terminology guideline to build controlled vocabularies in Chinese - Die Reg...
A terminology guideline to build controlled vocabularies in Chinese - Die Reg...
termlogica
 
Stay calm & keep shipping - iOS DevCon 2013
Stay calm & keep shipping - iOS DevCon 2013Stay calm & keep shipping - iOS DevCon 2013
Stay calm & keep shipping - iOS DevCon 2013
superflomo
 
Ergonomie Tag2
Ergonomie Tag2Ergonomie Tag2
Ergonomie Tag2
Marcel Zimmermann
 
Die 10 groeßten Fehler im eMarketing
Die 10 groeßten Fehler im eMarketingDie 10 groeßten Fehler im eMarketing
Die 10 groeßten Fehler im eMarketing
Angelika Röck
 
10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite
10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite
10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite
eMBIS GmbH - Akademie für Online Marketing
 
Conversational ux eresult-kundenevent-muenchen_10-2017
Conversational ux eresult-kundenevent-muenchen_10-2017Conversational ux eresult-kundenevent-muenchen_10-2017
Conversational ux eresult-kundenevent-muenchen_10-2017
eResult_GmbH
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Nicolai Schwarz
 
Barrierefreie Webseiten
Barrierefreie WebseitenBarrierefreie Webseiten
Barrierefreie Webseiten
drubb
 
Die Macht der SEO-Texte
Die Macht der SEO-TexteDie Macht der SEO-Texte
Die Macht der SEO-Texte
Heike Häfele
 
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013
Jan Hendrik Merlin Jacob
 
Online texten-für-pr andreas-gnann-abp_11-08-29
Online texten-für-pr andreas-gnann-abp_11-08-29Online texten-für-pr andreas-gnann-abp_11-08-29
Online texten-für-pr andreas-gnann-abp_11-08-29
andreasgnann
 
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
Ponton-Lab GmbH
 
Web 2.0 in und für Bibliotheken
Web 2.0 in und für BibliothekenWeb 2.0 in und für Bibliotheken
Web 2.0 in und für Bibliotheken
Christian Hauschke
 

Ähnlich wie A11y ist für alle da - auch für Dich! (20)

Content kills your Concept?!
Content kills your Concept?!Content kills your Concept?!
Content kills your Concept?!
 
Blackhat Protection: Negative SEO verstehen & verhindern - SEOkomm 2012
Blackhat Protection: Negative SEO verstehen & verhindern - SEOkomm 2012Blackhat Protection: Negative SEO verstehen & verhindern - SEOkomm 2012
Blackhat Protection: Negative SEO verstehen & verhindern - SEOkomm 2012
 
Trend Forecast Oktober 2014 (Bildsprache, Logos, Farben, Web-Design, Gestaltu...
Trend Forecast Oktober 2014 (Bildsprache, Logos, Farben, Web-Design, Gestaltu...Trend Forecast Oktober 2014 (Bildsprache, Logos, Farben, Web-Design, Gestaltu...
Trend Forecast Oktober 2014 (Bildsprache, Logos, Farben, Web-Design, Gestaltu...
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
Seo campixx: Kleine Stilkunde "Texte"
Seo campixx: Kleine Stilkunde "Texte"Seo campixx: Kleine Stilkunde "Texte"
Seo campixx: Kleine Stilkunde "Texte"
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
 
WCAG 2.0-Vortrag Webtech 2009
WCAG 2.0-Vortrag Webtech 2009WCAG 2.0-Vortrag Webtech 2009
WCAG 2.0-Vortrag Webtech 2009
 
A terminology guideline to build controlled vocabularies in Chinese - Die Reg...
A terminology guideline to build controlled vocabularies in Chinese - Die Reg...A terminology guideline to build controlled vocabularies in Chinese - Die Reg...
A terminology guideline to build controlled vocabularies in Chinese - Die Reg...
 
Stay calm & keep shipping - iOS DevCon 2013
Stay calm & keep shipping - iOS DevCon 2013Stay calm & keep shipping - iOS DevCon 2013
Stay calm & keep shipping - iOS DevCon 2013
 
Ergonomie Tag2
Ergonomie Tag2Ergonomie Tag2
Ergonomie Tag2
 
Die 10 groeßten Fehler im eMarketing
Die 10 groeßten Fehler im eMarketingDie 10 groeßten Fehler im eMarketing
Die 10 groeßten Fehler im eMarketing
 
10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite
10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite
10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite
 
Conversational ux eresult-kundenevent-muenchen_10-2017
Conversational ux eresult-kundenevent-muenchen_10-2017Conversational ux eresult-kundenevent-muenchen_10-2017
Conversational ux eresult-kundenevent-muenchen_10-2017
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 
Barrierefreie Webseiten
Barrierefreie WebseitenBarrierefreie Webseiten
Barrierefreie Webseiten
 
Die Macht der SEO-Texte
Die Macht der SEO-TexteDie Macht der SEO-Texte
Die Macht der SEO-Texte
 
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013
 
Online texten-für-pr andreas-gnann-abp_11-08-29
Online texten-für-pr andreas-gnann-abp_11-08-29Online texten-für-pr andreas-gnann-abp_11-08-29
Online texten-für-pr andreas-gnann-abp_11-08-29
 
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
 
Web 2.0 in und für Bibliotheken
Web 2.0 in und für BibliothekenWeb 2.0 in und für Bibliotheken
Web 2.0 in und für Bibliotheken
 

A11y ist für alle da - auch für Dich!

  • 1. A11y ist für alle da - auch für Dich!
  • 2. A11y ist für alle da - auch für Dich! A11y = Accessibility 11 Buchstaben, die sich keiner merken kann … }
  • 5. Es geht nicht um Behinderung, sondern um Beeinträchtigung
  • 6. Quelle: https://download.microsoft.com/download/B/0/D/B0D4BF87-09CE-4417-8F28-D60703D672ED/INCLUSIVE_TOOLKIT_MANUAL_FINAL.pdf Arm gebrochen: Maus oder Telefon mit der „falschen“ Hand bedienen Mobiltelefon in der Sonne, Seite mit wenig Kontrast Videonachricht auf dem Telefon, während laute Party im Gange ist „Okay, Google …“
  • 8. Dünne Schrift und zu geringer Kontrast sind zu vermeiden http://webaim.org/resources/contrastchecker/
  • 9. Eine Überschrift ist eine Überschrift Screenreader hangeln sich an Überschriften durchs Dokument JA - <h1> bis <h6> - Vorher Gedanken über Struktur machen NEIN - .h1 bis .h6 und sonst nichts - Nicht nur übers Visuelle gehen
  • 10. Vermeide den übermäßigen Gebrauch von VERSALIEN • Versalien sind schwer zu lesen • Versalien können Screenreader verwirren • Versalien sind „unhöflich“ • Menschen mit Leseschwäche werden benachteiligt • Für Entwickler: Lieber mit CSS stylen!
 .gross {text-transform: uppercase;} • Aber lieber einfach lassen … „Schrei doch nicht so“
  • 11. Finde das richtige Mittelmaß bezüglich Satzlängen Zu lange Zeilen vermeiden - Man verliert die Zeile Zu kurze Zeilen vermeiden - Man muss zu viel hin und zurück
  • 12. Finde das richtige Mittelmaß bezüglich Satzlängen
  • 13. Finde das richtige Mittelmaß bezüglich Satzlängen
  • 14. Kommuniziere nicht über Farbe Farbfehlsichtkeit kommt bei 8-9% der Männer und 1% der Frauen vor
  • 15. Kommuniziere nicht über Farbe Farbfehlsichtkeit kommt bei 8-9% der Männer und 1% der Frauen vor
  • 16. Kommuniziere nicht über Farbe Farbfehlsichtkeit kommt bei 8-9% der Männer und 1% der Frauen vor
  • 17. Kommuniziere nicht über Farbe Farbfehlsichtkeit kommt bei 8-9% der Männer und 1% der Frauen vor
  • 18. Kommuniziere nicht über Farbe Tools zum Testen von Farbfehlsichtigkeit
  • 19. Kommuniziere nicht über Farbe Tools zum Testen von Farbfehlsichtigkeit
  • 20. Kommuniziere nicht über Farbe Tools zum Testen von Farbfehlsichtigkeit www.getstark.co
  • 21. Kommuniziere nicht über Farbe Tools zum Testen von Farbfehlsichtigkeit
  • 22. Ein Link soll als solcher zu erkennen sein Farbe, Gestaltung - Hauptsache er hebt sich vom Fließtext ab Dies ist ein einfacher Fließtext, der an irgendeiner Stelle einen Link hat - ich sage aber nicht wo genau. Viele werden es erkennen, Menschen mit Rot-Grün-Schwäche könnten ihre Probleme damit haben … Dies ist ein einfacher Fließtext, der an irgendeiner Stelle einen Link hat - ich sage aber nicht wo genau. Viele werden es erkennen, Menschen mit Rot-Grün-Schwäche könnten ihre Probleme damit haben … Dies ist ein einfacher Fließtext, der an irgendeiner Stelle einen Link hat - ich sage aber nicht wo genau. Viele werden es erkennen, Menschen mit Rot-Grün-Schwäche könnten ihre Probleme damit haben … Text: #333 Link: #006567 Text: #333 Link: #009090 … oder schön unterstreichen Ist immerhin so gelernt.
  • 23. Ein Link soll Sinn machen Wie nenne ich meinen Link? • Hier finden Sie mehr zu unseren Produkten • Klicken Sie hier für Informationen über uns Nicht gut • Finden Sie mehr heraus über unsere Produkte • Klicken Sie hier für Informationen über uns Besser
  • 24. Nimm dem User nicht das Outline weg a:focus { outline: none; }
  • 25. Gib Platz zum Klicken a { padding: .4em; } „Touch targets must be large enough to touch accurately.“ — BBC Mobile Accessibility Guidelines BBC schlägt vor • Die empfohlene Touchfläche sollte 7 bis 10mm betragen. • Die Touchfläche kann z.B. durch Zugabe von padding erzeugt werden. • Buttons immer „mit Luft“ versehen.
  • 26. Keine Info auf den Bildern Nicht in Photoshop auf dem Bild schreiben, wenn es wichtig ist
  • 27. Animationen und Videos können Schwindel auslösen Sparsam mit Bewegtbildern umgehen, Kontrolle geben, Fokussieren
  • 28. Schönes Video, aber … Untertitel und/oder Transkript bereitstellen
  • 29. Schönes Video, aber … Untertitel und/oder Transkript bereitstellen
  • 30. Schönes Video, aber … Untertitel und/oder Transkript bereitstellen
  • 31. Schönes Video, aber … Untertitel und/oder Transkript bereitstellen
  • 33. Semantik! Ein richtiger Seitenaufbau hilft allen <header> role="banner" Landmark: Banner <main> role="main" Landmark: main <aside> role="complementary" Landmark: Seitenbereich <nav> role="navigation" Landmark: Navigation <footer> role="contentinfo" Landmark: contentinfo Benutze die richtigen HTML5-Elemente oder wenigstens das „role“-Äquivalent
  • 35. Semantik! • Benutze Landmarks, also vernünftige Auszeichnungen im Markup (nav, main, …) • Landmarks können a.) aufgelistet und b.) direkt angesprungen werden • Kann z.B. <main> nicht benutzt werden, dann setze role="main" ein • Überschriften (h1 - h6) vernünftig einsetzen, keine <div class="wie-h1"> • Überschriften unterteilen das Dokument und können direkt angesprungen werden
  • 36. Semantik! aria-attribute unterstützen ARIA steht für Accessible Rich Internet Applications Beispiele für aria-Attribute aria-checked aria-describedby aria-disabled aria-hidden aria-labelledby aria-required … https://www.w3.org/TR/wai-aria/states_and_properties
  • 37. Semantik! aria-attribute unterstützen <label for="pw">Passwort</label> <input type="password" id="pw" aria-describedby="pw-hint"> <button>Abschicken</button> <dialog id="pw-hint">Passwort muss mindestens zwölf Zeichen enthalten</dialog> dialog { display: none; background-color: yellow; padding: .3em; } #pw:focus ~ dialog { display: block; }
  • 38. Semantik! Das Label stellt Verbindung her <ul> <li> <input type="checkbox"> Salami </li> </ul> Chromevox: „Kästchen nicht aktiviert, Listenelement“ „aktiviert, Kästchen aktiviert“ VoiceOver: „deaktiviert: Markierungsfeld“ „markiert: Markierungsfeld“ Negative Nebeneffekte - Klick auf „Salami“ setzt kein Häkchen - Keine Ahnung, was ich da anhake
  • 39. Semantik! Das Label stellt Verbindung her Chromevox: „Listenelement: Salami, Kästchen nicht aktiviert“ „aktiviert, Salami, Kästchen aktiviert“ VoiceOver: „Salami, deaktiviert: Markierungsfeld“ „markiert: Salami, Markierungsfeld“ Positive Nebeneffekte - Klick auf „Salami“ setzt Häkchen - Man weiß, was man anhakt <ul> <li> <input type="checkbox" id="item1"> <label for="item1">Salami</label> </li> </ul>
  • 40. Semantik! Das Label stellt Verbindung her Chromevox: „Salami, Kästchen nicht aktiviert, Listenelement“ „aktiviert, Salami, Kästchen aktiviert“ VoiceOver: „Salami, deaktiviert: Markierungsfeld“ „markiert: Salami, Markierungsfeld“ <ul> <li> <label> <input type="checkbox" id="item1"> Salami </label> </li> </ul>
  • 41. Semantik! Das Label stellt Verbindung her <label> <input type="radio" name="farbe" value="blau"> Blau </label> <label> <input type="radio" name="farbe" value="gruen"> Grün </label>
  • 42. Semantik! Das Label stellt Verbindung her Chromevox bei Fokus auf Elementen: Text bearbeiten Suchen, Schaltfläche <input type="text"> <button>Suchen</button>
  • 43. Semantik! Das Label stellt Verbindung her Chromevox bei Fokus auf Elementen: „Suchbegriff eingeben“, Text bearbeiten Suchen, Schaltfläche <input type="text" placeholder="Suchbegriff eingeben“> <button>Suchen</button>
  • 44. Semantik! Das Label stellt Verbindung her Chromevox bei Fokus auf Elementen: „Suchbegriff eingeben“, Text bearbeiten Suchen, Schaltfläche <span>Filmsuche</span> <input type="text" placeholder="Suchbegriff eingeben"> <button>Suchen</button>
  • 45. Semantik! Das Label stellt Verbindung her Chromevox bei Fokus auf Elementen: „Filmsuche“ with hint „Suchbegriff eingeben“, Text bearbeiten Suchen, Schaltfläche <label for="search">Filmsuche</label> <input type="text" id="search" placeholder="Suchbegriff eingeben"> <button>Suchen</button>
  • 46. Vernünftige Links Unsichtbare Links, sichtbare Links, umbenannte Links <a href="#content" class="visihidden">Springe direkt zum Inhalt</a> <ul> <li> <a href="seite.html">Impressum</a> </li> <li> <a href="seite2.html" aria-hidden="true">Kontakt</a> </li> </ul> <main id="content"> <p>Viel Text und Blabla. Lesen Sie <a href="products.html" aria- label="Produkte">mehr</a>.</p> </main> .visihidden { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .visihidden:focus { clip: auto; height: auto; overflow: auto; position: relative; width: auto; }
  • 47. Links mit Icons - aber richtig Nur visuell ist nicht gut <a href="#"> <i class="fi-search size-36" aria-hidden="true"> ::before </i> </a>
  • 48. Links mit Icons - aber richtig Nur visuell ist nicht gut <a href="#"> <i class="fi-search size-36" aria-hidden="true"> ::before </i> Suche </a> Suche „Suche“
  • 49. Links mit Icons - aber richtig Nur visuell ist nicht gut <a href="#"> <i class="fi-search size-36" aria-hidden="true"> ::before </i> <span class="visihidden">Suche</a> </a> „Suche“ <button> <i class="fi-search size-36" aria-hidden="true"> ::before </i> <span class="visihidden">Suche</a> </button>
  • 50. Was ist auf dem Bild? Immer das alt-Attribut für Bilder setzen VoiceOver: „b s p bild 4 5 1 8 6 3 2 5 0 x 2 5 0 j p g, Bild“ <img src="pics/bsp-bild-451863-250x250.jpg" width="250" height="250"> Schlecht VoiceOver: „ “ <img src="pics/bsp-bild-451863-250x250.jpg" alt width="250" height="250"> Besser VoiceOver: „Hamburgs Michel, Bild“ <img src="pics/bsp-bild-451863-250x250.jpg" alt="Hamburgs Michel" width="250" height="250"> Richtig National Federation of the Blind gegen Target Corp. 6 Millionen Dollar Strafe wegen fehlender Alt-Attribute
  • 51. Was ist auf dem Bild? alt-Attribut in der weiten Webwelt Schlecht Der Alt-Text soll beschreiben, was auf dem Bild zu sehen ist! Dieser Text hier ist viel zu lang. Besser wäre: „HSV-Sponsor Klaus-Michael Kühne mit gelangweiltem Gesichtsausdruck“ (o.ä.)
  • 52. Was ist auf dem Bild? alt-Attribut in der weiten Webwelt Schlechter Dieser Text ist besagt einfach nichts. Besser wäre: „Stempel mit Aufschrift ‚Unheilbar‘ oder einfach ein leeres Alt-Attribut, das würde dann „überlesen“ werden.
  • 53. Was ist auf dem Bild? alt-Attribut in der weiten Webwelt Gut Augen zu und vorstellen, eine Stimme liest es vor. Kann man sich bei diesem Text etwas vorstellen, was auf dem Bild zu sehen ist? Ja. Sehr gut beschrieben.
  • 54. Was ist auf dem Bild? alt-Attribut in der weiten Webwelt Geht gar nicht Dieser Text für das Alt-Attribut geht gar nicht! Kommt wohl durch das Content Management System. Ist aber sehr peinlich …
  • 55. Nicht den Zoom auf mobilen Geräten deaktivieren Manche Menschen sind darauf angewiesen <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=0"> <meta name="viewport" content="width=device-width, initial-scale=1"> „user-scale=0 ist wie das Abreißen einer Rollstuhlrampe vor einer Behörde, weil die ‚nicht schön‘ ist.“ — Nils Lauk
  • 56. A11y geht alle etwas an Jeder profitiert davon - jetzt oder später • Das Internet ist für alle da • Niemand sollte ausgesperrt werden, niemandem Informationen vorenthalten • Machen und keine Furcht davor haben • Selbst kleine Dinge sind hilfreich (noch mal: Leg los!) • Es gibt Richtlinien - aus tech. Sicht und für Umsetzung offizieller Seiten • Wer nicht A11y berücksichtigt, kann „finanziell bestraft“ werden • A11y ist nicht die Aufgabe einer Person, alle müssen daran arbeiten • Nicht nur Design und Technik, auch Contentmanager sind gefragt (einfache Sprache) • Du machst die Seite nicht für Dich, sondern für die Leute „da draußen“ • Du kannst jederzeit auch eine Beeinträchtigung erfahren, Du machst das für Dich • A11y ist einfach das Richtige zu machen • Etwas für eine Zielgruppe zu machen, bedeutet für andere Zielgruppen zu arbeiten
  • 57. DankeNils Lauk, Mediale Hamburg, 2017
  • 58. Weiterführende Links Es gibt eine Fülle an Informationsquellen zum Thema A11y im Internet. Hier nur eine ganz kleine Auswahl: https://www.microsoft.com/en-us/accessibility/default.aspx https://download.microsoft.com/download/B/0/D/B0D4BF87-09CE-4417-8F28-D60703D672ED/ INCLUSIVE_TOOLKIT_MANUAL_FINAL.pdf (21MB) https://developers.google.com/web/fundamentals/accessibility/ http://www.bbc.co.uk/guidelines/futuremedia/accessibility/ https://webaim.org/ https://developer.mozilla.org/en-US/docs/Web/Accessibility https://www.webaccessibility.com/best_practices.php?technology_platform_id=5 https://www.smashingmagazine.com/2016/06/improving-color-accessibility-for-color-blind-users/ https://www.smashingmagazine.com/2012/06/links-should-never-say-click-here/ https://hodigital.blog.gov.uk/category/accessibility/ https://insidegovuk.blog.gov.uk/2014/08/04/sentence-length-why-25-words-is-our-limit/