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

Auch abrufbar als: Atom PDF