Hi Mike!
Thanks for the adjustments. With this version, the tabs function correctly, are accessible and usable and do not cause errors in the WCAG testing tool Eye-Able-Audit. That’s great! Thank you for your commitment and the commitment of your team!
Are you interested in further optimizing your theme? I noticed other little things that are not optimal in terms of accessibility.
1. For example, in the “Timeline” content element. If no entry is added to the “Milestone Date” field, an empty <h2> tag is output in the HTML code. Headlines can be filtered through screen readers and output as a navigable list. An empty headline tag would not be optimal in this case. The solution here is to assign the attribute aria-hidden=”true” and tabindex=-1 to an empty <h> tag.
2. In the navigation menu, the links to the individual pages are determined by the accessible content of the tag and output by screen readers. If a navigation point is implemented without textual content but only with an icon, the accessible content of the link is missing. In this case, an optional title attribute can be assigned to the link with icon. However, a title attribute is not reliably viewed by screen readers as an accessible name for a link. In this case you need a way to optionally enter an “aria-label=name of the link”.
I would like to thank you for your effort and the super-fast support!
Best regards, Marko
—
Hallo Mike!
Danke für die Anpassungen. Mit dieser Version funktionieren die Tabs korrekt, sind zugänglich und bedienbar und verursachen keine Fehler im WCAG-Prüftool Eye-Able-Audit. Das ist Klasse! Vielen Dank für deinen Einsatz bzw. den Einsatz eures Teams!
Seid Ihr interessiert an weiteren Optimierungen eures Themes? Ich habe weitere Kleinigkeiten festgestellt, die hinsichtlich der Barrierefreiheit nicht optimal sind.
1. Beispielsweise im Inhalts-Element “Zeitleiste”. Wird im Feld “Meilenstein-Datum” kein Eintrag hinzugefügt, dann wird im HTML-Code ein leeres <h2>-Tag ausgegeben. Headlines können durch Screenreader gefiltert und als navigierbare Liste ausgegeben werden. Ein leeres Headline-Tag wäre in diesem Fall nicht optimal. Die Lösung an der Stelle ist, einem leeren <h>-Tag das Attribut aria-hidden=”true” und tabindex=-1 zuzuweisen.
2. Im Navigationsmenü werden die Verlinkungen zu den einzelnen Seiten durch den zugänglichen Inhalt des -Tags bestimmt und durch Screenreader ausgegeben. Wird ein Navigationspunkt ohne textlichen Inhalt, sondern nur mit einem Icon umgesetzt, fehlt der zugängliche Inhalt des Links. In diesem Fall kann ein optionales title-Attribut dem Link mit Icon zugewiesen werden. Ein title-Attribut wird jedoch nicht zuverlässig von Screenreadern als zugänglicher Name für eine Verlinkung angesehen. In diesem Fall benötigt man eine Möglichkeit ein “aria-label=Name des Links” optional eintragen zu können.
Ich bedanke mich für eure Mühe und den superschnellen Support!
Beste Grüße, Marko