Draft: Feature/Accessibility

[OrbisK]

Disclaimer Ich versuche mich gerade privat etwas mehr mit dem Thema "Barrierefreiheit" im Web auseinanderzusetzten. Nicht alle Commits oder Änderungen werden dem Best Practice entsprechen. Feedback in jeder Hinsicht wäre sehr hilfreich. Ich versuche den PR so gut es geht aktuell zu halten und kann ihn immer nur wenn ich Zeit habe weiter bearbeiten.

TODOs

• [ ] ARIA Labels
• [x] Routing Mitteilungen
• [ ] Headings anpassen
• [ ] Semantische Tags
• [x] "Überspringen" links
• [ ] Focusmanagement
• [ ] Kontraste anpassen

ARIA Labels

• [ ] ARIA Label hinzufügen
• [ ] Proteintabelle (Ernährung) barrierefrei machen.

Routing Mitteilungen

• [x] Mitteilungen für den Screenreader, wenn sich die aktuelle Route ändert. (Erfolgt mittels @vue-a11y/announcer. ) (11e37f8)

Headings anpassen

• [ ] Headings auf allen Seiten anpassen. W3

semantische Tags

Wenn möglich mehr semantische Tags oder Roles verwenden.

• [ ] Header
• [x] Main (a3c017b?)
• [ ] Navbar
• [x] Footer (663ae7c118cdc5cfc693be5f4459a7a4a3938d62) (558442a0ca555d3191bfef475c5389550aa1d7f8)
• [x] ArticleContent (558442a0ca555d3191bfef475c5389550aa1d7f8)
• [ ] Figures für Bilder mit Caption und alt
  • [x] Ernährung (f42a07e10b152f137bab406f347478bc9d1172e8)
  • [ ] weitere Seiten

"Überspringen" Links

Siehe

• [x] Link für: "Springe zum Hauptinhalt" (a24d8eb113aceba4ceb6fa47046556023df98b4d)
• [x] Link für: "Springe zum Footer" (a24d8eb113aceba4ceb6fa47046556023df98b4d)

Focusmanagement

• [x] Der focus/tab sollte beim routing wieder zurück gesetzt werden. (54141c4)

Kontraste anpassen

Einige Farben haben teilweise nicht ausreichend Kontrast zum Hintergrund. Besonders bei Verlinkungen.

• [ ] Kontraste bei Verlinkungen prüfen
• [ ] Label für Proteintabelle (Ernährung) im Darkmode anpassen

offene Themen/Disskusion

• <main></main> oder <section></section> Tags verwenden? (siehe a3c017b)
• aria-hidden für sidebar?