Projekt

Allgemein

Profil

Aktionen

GX-Bug #70155

offen

Barrierefreiheit verbessern Honeygrid Theme | Improve accessibility

Von Till Tepelmann vor mehr als 1 Jahr hinzugefügt. Vor 4 Tagen aktualisiert.

Status:
Testing
Priorität:
Normal
Zugewiesen an:
-
Kategorie:
Frontend
Zielversion:
% erledigt:

0%

Geschätzter Aufwand:
Steps to reproduce:
Betroffene Versionen:
4.7.1.2
Release Notes Langtext:

Verbesserungen für die Barrierefreiheit

Tags:

Beschreibung

Es sollten einige HTML Elemente wie die Suche und die Sprache wechseln HTML Aria Label bekommen um die Lesbarkeit für Screenreader zu verbessern.

Kann wie folgt geprüft werden:

  1. Shop 4.9 installieren
  2. Startseite mit Lighthouse im Browser prüfen (Plugin ggf. installieren)
  3. Beim Punkt Barrierefreiheit sind einige Punkte aufgeführt, die keine Aria Labels haben
  4. StyleEdit im Gambio Admin über "Inhalte->Theme bearbeiten" öffnen
  5. Theme Honeygrid aktiveren unter dem Menüpunkt (Hamburger Menü)
  6. Speichern und StyleEdit beenden
  7. Startseite erneut mit dem Lighthous Plugin im Browser testen

Erwartetes Ergebnis:
Beim Lighthouse Test im Browser sollte die Barrierefreiheit eine höhere Punktzahl erreicht werden als 57

Tatsächliches Ergebnis:
Es wird ein Fehler angezeigt, dass Aria Label fehlen und die Punktzahl für Barrierefreiheit ist sehr gering.


Folgende Punkte behandelt der bereits eingereichte Code:

Schaltflächen haben keinen für Screenreader zugänglichen Namen

[user-scalable="no"] wird im -Element verwendet oder das [maximum-scale]-Attribut ist
kleiner als 5

Der Wert einer ARIA-ID muss eindeutig sein, damit andere Instanzen nicht von Hilfstechnologien übersehen werden.


Some HTML elements such as the search and the language should be given HTML Aria labels to improve readability for screen readers.

Can be checked as follows:

  1. install Shop 4.9
  2. check start page with Lighthouse in the browser (install plugin if necessary)
  3. some items are listed under accessibility that do not have Aria labels
  4. open StyleEdit in the Gambio Admin via "Content->Edit theme"
  5. activate the Honeygrid theme under the menu item (hamburger menu)
  6. save and exit StyleEdit
  7. test the start page again with the Lighthous plugin in the browser

Expected result:
In the Lighthouse test in the browser, the accessibility score should be higher than 57

Actual result:
An error is displayed that Aria labels are missing and the accessibility score is very low.


The code already submitted addresses the following points:

Buttons do not have an accessible name for screen readers

[user-scalable="no"] is used in the element or the [maximum-scale] attribute is
smaller than 5

The value of an ARIA ID must be unique so that other instances are not overlooked by assistive technologies.


Dateien

lighthouse.pdf (3,95 MB) lighthouse.pdf Till Tepelmann, 06.03.2024 17:48

Aktionen #1

Von Patrick Bayer vor mehr als 1 Jahr aktualisiert

  • Beschreibung aktualisiert (Vergleich)
  • Status wurde von Gemeldet zu Anerkannt geändert
Aktionen #2

Von Till Tepelmann vor etwa 1 Jahr aktualisiert

  • Status wurde von Anerkannt zu In Bearbeitung geändert
  • Release Notes Langtext aktualisiert (Vergleich)
Aktionen #4

Von Till Tepelmann vor etwa 1 Jahr aktualisiert

  • Status wurde von In Bearbeitung zu Testing geändert
  • Release Notes Langtext aktualisiert (Vergleich)
Aktionen #5

Von Daniel Wu vor 8 Monaten aktualisiert

  • Tags wurde auf Maintenance_2023 gesetzt
Aktionen #6

Von Till Tepelmann vor 2 Monaten aktualisiert

  • Tags wurde von Maintenance_2023 zu 4.9.4.0_beta1 geändert
Aktionen #7

Von Hendrik Bahr vor etwa 2 Monaten aktualisiert

Till Kannst Du das besser spezifizieren?

  • Welche Elemente genau sollen Aria Label bekommen?
  • Wie genau sieht ein Aria Label aus? (z.B. Link zur Doku)
  • In welchem Theme soll das gemacht werden? (Bitte nur in Malibu)
  • Wie kann ein Tester prüfen, ob das Ticket vollständig umgesetzt wurde? (Also wie nutzt man einen Screenreader und wo bekommt man sowas her?)
Aktionen #8

Von Hendrik Bahr vor etwa 2 Monaten aktualisiert

  • Zugewiesen an wurde auf Till Tepelmann gesetzt
Aktionen #9

Von Till Tepelmann vor etwa 2 Monaten aktualisiert

Aktionen #10

Von Till Tepelmann vor etwa 2 Monaten aktualisiert

Aktionen #11

Von Till Tepelmann vor etwa 2 Monaten aktualisiert

  • Beschreibung aktualisiert (Vergleich)
  • Zugewiesen an Till Tepelmann wurde gelöscht
Aktionen #12

Von Krystian Czerwinski vor etwa 1 Monat aktualisiert

  • Zugewiesen an wurde auf Krystian Czerwinski gesetzt
Aktionen #13

Von Krystian Czerwinski vor etwa 1 Monat aktualisiert

  • Zugewiesen an Krystian Czerwinski wurde gelöscht
Aktionen #14

Von Marcel Thieses vor etwa 1 Monat aktualisiert

  • Tags wurde von 4.9.4.0_beta1 zu BACKLOG geändert
Aktionen #15

Von Hendrik Bahr vor 4 Tagen aktualisiert

  • Thema wurde von Barrierefreiheit verbessern | Improve accessibility zu Barrierefreiheit verbessern Honeygrid Theme | Improve accessibility geändert
  • Zielversion wurde auf 5.0.0.0 gesetzt
Aktionen #16

Von Hendrik Bahr vor 4 Tagen aktualisiert

For online pages the lighthouse score / accessability check can be made here without the installation of the chrome plugin https://pagespeed.web.dev/

Aktionen #17

Von Hendrik Bahr vor 4 Tagen aktualisiert

  • Tags wurde von BACKLOG zu 5.0.0.0 geändert
Aktionen

Auch abrufbar als: Atom PDF