Projekt

Allgemein

Profil

Aktionen

GX-Bug #70155

geschlossen

Barrierefreiheit verbessern Honeygrid Theme | Improve accessibility

Von Till Tepelmann vor etwa 2 Jahren hinzugefügt. Vor 5 Monaten aktualisiert.

Status:
Erledigt
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
2024-07-10_14h29_16.mp4 (14,8 MB) 2024-07-10_14h29_16.mp4 Jessica Balaban, 10.07.2024 14:25

Aktionen #1

Von Patrick Bayer vor fast 2 Jahren aktualisiert

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

Von Till Tepelmann vor fast 2 Jahren aktualisiert

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

Von Till Tepelmann vor fast 2 Jahren aktualisiert

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

Von Daniel Wu vor mehr als 1 Jahr aktualisiert

  • Tags wurde auf Maintenance_2023 gesetzt
Aktionen #6

Von Till Tepelmann vor 10 Monaten aktualisiert

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

Von Hendrik Bahr vor 10 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 10 Monaten aktualisiert

  • Zugewiesen an wurde auf Till Tepelmann gesetzt
Aktionen #9

Von Till Tepelmann vor 10 Monaten aktualisiert

Aktionen #10

Von Till Tepelmann vor 10 Monaten aktualisiert

Aktionen #11

Von Till Tepelmann vor 9 Monaten aktualisiert

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

Von Krystian Czerwinski vor 9 Monaten aktualisiert

  • Zugewiesen an wurde auf Krystian Czerwinski gesetzt
Aktionen #13

Von Krystian Czerwinski vor 9 Monaten aktualisiert

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

Von Marcel Thieses vor 9 Monaten aktualisiert

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

Von Hendrik Bahr vor 8 Monaten 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 8 Monaten 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 8 Monaten aktualisiert

  • Tags wurde von BACKLOG zu 5.0.0.0 geändert
Aktionen #18

Von Rico Schreiber vor 7 Monaten aktualisiert

  • Zugewiesen an wurde auf Rico Schreiber gesetzt
Aktionen #19

Von Rico Schreiber vor 7 Monaten aktualisiert

  • Status wurde von Testing zu Erledigt geändert
Aktionen #21

Von Jessica Balaban vor 5 Monaten aktualisiert

ASQA - Regressionstest: erfolgreich
getestet auf Desktop (Firefox Version 127.0 (64-Bit), Chrome Version 126.0.6478.127 (Offizieller Build) (64-Bit), Edge Version 126.0.2592.87 (Offizielles Build) (64-Bit)), Gambio Version: v5.0.0.0

Das Honeygrid Theme hat in dem Test zur Barrierefreiheit ein Ergebnis von 90 Punkten erziehlt.

Aktionen

Auch abrufbar als: Atom PDF