Accessibility

TODO

Immer alt und title verwenden, wegen screenreadern. Wenn das Bild nur dekorativ ist, leer setzen, nicht weglassen! ‘‘‘html '’’

Bei Videos audio oder textbeschreibung mit anbieten. Wenn möglich Transkript anbieten kein autoplay, animationen desktivierbar

font-size in em, rem oder % angeben

anklickbares muss mindestestn 44x44 Pixel groß sein! Farben und Kontrast Seitentitel und Linktext sollen ähnlich sein, zweck soll erkennbar sein eher linklisten am ende der seite, statt inline links für dasselber Ziel immer den gleichen Linktext verwenden aria-label fügt infos für screenreader hinzu tabindex macht elemente fokkusierbar konsistenz! navigation immer an gleicher stelle, gleiche reihenfolge der links, etc. button und input als buttons mit aria-label versehen

browserabhängige shortcuts Ffox alt+shift+KEY Chrome/IE alt+KEY Safari, etc.? anscheinend problematisch(?) -> aria-keyshortcuts

title tag für jede Seite sinvoll setzen

h1 - h6 zur Beschreibung von Abschnitten

labels für formulare benutzen

Sitemap, Breadcrumbs

extra dialogfenster, oder feldbeshreibung, aussagekräftig!! role attribut (status,log,alert)

Accessible Rich Internet Applications - aria !!!

aria-requiered - pflichtfelder aria-labeledby - mehrfachfelder beschreibung, z.B. adresse: str, hausnr, plz aria-describedby aria-label - beschreibung aria-hidden - vor screenreader verstecken

lang Attribut - kann in jedem element verwendet werden, span für einzlene Wörter!!!

als abschluss 5 Seiten html projekt

Hauptseite, Inhaltsverzeichnis, Formular

Seiten:

1. verwendete tools, css boilerplate oä, …
2. Markdown
3. Vim
4. Hilfeseite
5. Shortcutliste

verlinkung auf accessibility seiten (welche?)

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark

https://www.amitmerchant.com/the-new-light-dark-function-to-switch-theme-color-in-css/

https://raw.githack.com/jenil/chota/master/test/index.html

https://turretcss.com/getting-started/

https://feathercss.elishaterada.com/