Weiter zum Hauptteil der Seite
Inqbus Inclusive Design

Titel wird geladen.

Der Inhalt wurde leider zurück gezogen

Unser Beispiel


Wichtige Hinweise

Ein einbettendes Formular

Wie auch bei der Texteingabe muss der Datumsbereich Teil eines Formulars mit Button sein.

Tastatursteuerung

Da der nicht sehende Nutzer nicht weiß, dass sich ein klickbares Popup öffnet, muss eine Texteingabe per Tastatur möglich sein. Dafür muss der Nutzer das Format kennen, welches hier sowohl als Aria-Label als auch als Platzhalter hinterlegt sind.

Fokus und Hover

Für den schlecht sehenden Nutzer muss im Popup der aktuell makierte Bereich hervorgehoben sein. Das gilt sowohl für den bereits gewählten Wert als auch für den Wert, auf dem der Fokus oder MouseOver liegt

Eindeutige Felder

Durch die Trennung des Start- und Endwertes ist es für den Nutzer leichter beide einzugeben und zu identifizieren.

Umsetzung als Komponente

Das entscheidende für die Barrierefreiheit ist das Template der Komponente

<label>{{ label }}</label><br/>
<label for="start_input" :aria-label="'Startdatum wählen ' + format">Von: </label>
<datepicker v-model="value_start" :placeholder="'Datum wählen ' + format"
        :key="'datepicker_start'"
        :monday-first="true" :language="lang" input-class="date_input" calender-class="calender_input"
        :format="format" :typeable="true" id="start_input"></datepicker>
<label for="end_input" :aria-label="'Enddatum wählen ' + format">Bis:</label>
<datepicker v-model="value_end" :placeholder="'Datum wählen ' + format"
        :key="'datepicker_end'"
        :monday-first="true" :language="lang" input-class="date_input" calender-class="calender_input"
        :format="format" :typeable="true" id="end_input"></datepicker>
<button type="button" class="button" @click="reset()" aria-label="Zurück setzen für die Datumsfelder">Zurück setzen </button>

Das Beispiel zeigt im wesentlichen, dass die Labels und der Button mit Aria-Texten ergänzt worden. Für den Datepicker selber :typeable="true" entscheidend, damit eine Tastatureingabe möglich ist.