Punkte: 95 von 100 (sehr gut zugänglich)
Die beiden nebeneinanderstehenden Links zu Facebook führen zum selben Ziel, deshalb sollten sie auch den gleichen Alternativtext haben.
Logo und Bannertextgrafik führen zum selben Ziel, deshalb wäre es konsequenter, beide Grafiken mit einem Ankerelement zu verlinken.
Unnötig detaillierte Alternativtexte bei den Teaserbildern in den Tab-Panels (etwa "Zu sehen ist ein Auschnitt eines Stimmzettels der Bundestagswahl am 24.09.2017 Das Vorschaubild ist mit der Detailansicht des Beitrags verlinkt." Der auf den Teaserbildern stets wiederholte Hinweis, dass das Bild mit der Detailansicht des Beitrags verlinkt ist, ist überflüssig und störend: dass hier ein Link vorliegt, wird ja über die Rolle vermittelt, und das Linkziel wird im alt-Attribut genannt. Die Redundanz wird noch verstärkt durch die überflüssige Wiederholung des Alternativtextes im title-Attribut.
alt-Text Spezialseiten für das große Hintergrundbild nicht zielführend, aber über aria-hidden=true wohl ohnehin unterdrückt.
Punktabzug: 0,75 Punkte
Die Sprunglinks am Seitenbeginn sollten als Liste ausgezeichnet werden.
Suchergebnisse sollten zur besseren nicht-visuellen Navigation als Liste ausgezeichnet sein (oder sonst Einzelergebnisse mit h3-Überschrift).
Vergl. auch allgemeine Anmerkung.
Vergl. allgemeine Anmerkung.
Vergl. allgemeine Anmerkung.
Punktabzug: 0,5 Punkte
Blockzitat "Ich habe die Vision.." sollte mit blockquote ausgezeichnnet sein.
Punktabzug: 0,25 Punkte
Filter sollte als legen eines fieldset umgesetzt werden, dass die Checkboxen einschließt. So ist bei nichtvisueller Nutzung nicht unmittelbar klar (wenn auch vom Kontext her naheliegend), dass es sich hier um eine Filterung handelt.
Punktabzug: 0,75 Punkte
Text "Stadt der Generationen" (Grün auf mit Grau überlegtem Fotohintergrund) hat einen zu geringen Kontrast (ca. 1,8:1 bis 2,3:1, SOLL: 3:1).
Text "Aktiv im Grünen leben" (Blau auf mit Grau überlegtem Fotohintergrund) hat abhängig von der Helligkeit des Fotohintergrunds einen zu geringen Kontrast (ca. 2,7:1 bis 3,1:1, SOLL: 3:1).
Text "Bürgerservice, Aktuelles, Verwaltung und Rat" auf Karussel hat mit ca. 2,8:1 einen etwas zu geringen Kontrast (SOLL: 3:1).
Kontrast des Datums "Historisches aus Lohmar", blauer Text (437EB2) auf grauem Hintergrund (F0F0F0), IST: 3,8:1, SOLL: 4,5:1.
Vergl. allgemeine Hinweise.
Hervorgehobener Suchbegriff in den Teasertexten, rot (FF0000) auf weiß (FFFFFF), IST 4,0:1, SOLL 4,5:1. Vergl. allgemeine Hinweise.
Vergl. allgemeine Hinweise.
Punktabzug: 0,75 Punkte
Kalender-Einträge: Einträge werden bei Tastaturnutzung beim Fokussieren angezeigt und vorgelesen, die im Pop-Over enthaltenen Links sind aber nicht mittels Tastatur fokussierbar bzw. auslösbar, um zu den hinterlegten Seiten zu gelangen. Die Pfeiltastennavigation, die im Screenreader-Browse-Modus zu den Inhalten führen könnte, wird anscheinend über JavaScript abgefangen und zum Navigieren zur nächsten und vorhergehenden Zelle (benachbarte Tage) genutzt. Insofern stimmt auch nicht der zugänglich versteckte Hinweis an nicht-visuelle Nutzer "Wenn Sie einen Tag ausgewählt haben, drücken Sie Enter, um zu den Veranstaltungen dieses Tages zu gelangen". Das Ausführen dieses Hinweises führt im Gegensatz dazu, dass das Popover schließt.
Alle Veranstaltungen sind jedoch über den Link "Alle Veranstaltungen anzeigen" auf einer extra Seite verfügbar.
Punktabzug: 0,75 Punkte
Die Reihenfolge, in der die Inhaltselemente durchlaufen werrden, entspricht nicht der visuellen Anordnung (Kopf, mittlere Spalte, rechte Spalte, dan erst linke Spalte, dann Footer). Ist aber durch die gute Zugänglichkeit über Landmarks unsd Sprungmarks kein gravierendes Problem.
Nach Auswahl eines Tabs (Aktuelles, Verkehrshinweise, usw.) sollte der Fokus im Tabpanel landen und nicht erst noch die übrigen Tabs durchlaufen.
Vergl. aber allgemeine Anmerkung.
Vergl. aber allgemeine Anmerkung.
Punktabzug: 0,5 Punkte
title Attribute auf allen Einträgen der Navigation sind überflüssig und verschlechtern die nicht-visuelle Nutzung (ggf. doppelte Ausgabe bei nicht visueller Nutzung).
Links im Blättermenü nicht aussagekräftig hier wird nur 1 - Link, 2 - Link usw. ausgegeben.
Die Links sollten über verstickten Linktext oder aria Label Aussagekräftiger werden (etwa Suchergebnisse - Seite 2.
Vergl. allgemeine Anmerkung.
Verlinkte h3-Überschriften in den Tabpanels:
#title# wiederholt den Linktext - visuell ist das unnötig, da der Text ja sichtbar ist, bei nicht-visueller Nutzung ist es störend redundant (doppelte Ausgabe).
Vergl. auch allgemeine Anmerkung.
Vergl. allgemeine Anmerkung.
Punktabzug: 0,5 Punkte
Fokussichtbarkeit auf der Hauptnavigation bei Mausnutzung (Menü klappt aus) sehr viel deutlicher als bei Tastaturnutzung (dünner gestrichelter Rahmen).
Fokus auf der Suchen-Lupe bei Mausnutzung (grau unterlegt) deutlicher als be Tastaturfokussierung (dünner gestrichelter Rahmen).
Siehe allgemeine Anmerkung.
Im Firefox (v.55) bei 100% Vergrößerungsfaktor (Standard) kein sichtbarer Fokus auf den Filter-Optionen nach dem Sucheingabefeld (Fokus unterdrückt). Die Fokusposition bei Tastaturnutzung ist hier nur über Versuch und Irrtum rauszukriegen. In v.56 sichtbar. Im IE ist der gestrichelte Rahmen sichtbar.
Siehe auch allgemeine Anmerkung.
Siehe allgemeine Anmerkung.
Punktabzug: 0,25 Punkte
Die recht langen Alternativtexte für de Bilder im Slider sind für Screenreader-Nutzer nicht verfügbar, da der Slider mit aria-hidden=true versteckt ist. Das Ergebnis entspricht der Vergabe von alt="", was vertretbar sind, da die Bilder eher schmückend sind und nicht Information transportieren.
Bürgerservice, Aktuelles Verwaltung und Rat hat nichts mit deim Bildinhalt zu tun - zudem wird dieser Text noch mal im title Bürgerservice, Aktuelles Verwaltung und Rat wiederholt. Nichts davon kommt allerdings beim Screenreader-Nutzer an, da der Bereich mit aria-hidden=true versteckt ist.
Vergl. Prüfschritt 1.1.1b.
Vergl. Prüfschritt 1.1.1b.
Vergl. Prüfschritt 1.1.1b.
Auf Startseite keine h1 vergeben - Hierarchie ansonsten unproblematisch.
Vergl. aber Hinweis und Bewertung zur Darstellung der Suchergebnisse (die alternativ zum Listen-Markup auch mit h3 ausgezeichet sein könnten).
Anreißer-Texte unter dem Reiter "Veranstaltungen" sind nicht semantisch mit dem geeigenten p-Element ausgezeichnet.
Der Text "23 Suchergebnisse" sowie die einzelnen Anreißertexte der Suchergebnisse sind nicht mit dem geeigenten p-Element ausgezeichnet. Besser wäre wohl noch Auszeichnung als Liste - vergl. Prüfschritt 1.3.1b
br Elemente für Zeilenumbrüche in der rechten Spalte.
Die Inhalte der Tabpanels (#role="tablist"#) stehen ohne CSS nicht direkt hinter den entsprechenden Tab-Bezeichnungen "Aktuelles", "Verkehrshinweise" etc. Siehe Bewertung in Prüfschritt 2.4.3a "Schlüssige Reihenfolge der Tastaturbedienung".
"Stadt der Generationen. Aktiv im Grünen leben." Könnte ebensogut als Text umgesetzt werden, ist aber evtl. als Logobestandteil zu akzepireren (aber in getrennter Datei).
Angebot mit Sprunglinks und Landmark-Rollen gut gegliedert.
Zur Seitenleiste springen ist nicht besonders klar - da denken viel Nutzer wohl eher an die leistenartige Hauptnavigation. Besser wäre wohl Zum Schnellzugriff springen.
Siehe allgemeine Anmerkung.
Siehe allgemeine Anmerkung.
Siehe allgemeine Anmerkung.
