Tri-State-Checkbox veröffentlicht in 2014zuletzt bearbeitet in
HTML-Beispiel mit der indeterminate
-Eigenschaft
Welches Gemuese essen Sie?
Hinweise
Wichtig: Das Ergebnis ist nicht barrierefrei, weil der Zwischenzustand "teilweise aktiviert" eine rein visuelle Vermittlung des Zustands ist. Browser stellen den Zwischenzustand außerdem unterschiedlich und manchmal gar nicht dar.
- Die Zuweisung der Semantik und die dynamische Steuerung erfolgt mit jQuery, d.h. jQuery muss eingebunden werden.
- Die Funktionalität ist für Maus und Tastatur gegeben. Das Fokus-Management wird durch ein
<input type="checkbox">
(und somit vom Browser frei Haus) geliefert. - Die Tri-State-Checkbox kann auch im Kontrastmodus bedient werden.
- Die Änderung des Kontextes bei der Bedienung der Optionen wird textlich angekündigt.
- Die Optionen (HTML-Checkboxen) erhalten eine Gruppenbeschriftung mit
aria-label
, um eine Beziehung zwischen Frage und Antworten herzustellen.
Weitere Links
- Zurück zu den Erläuterungen
- ARIA-Beispiel mit
role="checkbox"
undaria-checked
- Tri-State-Checkbox: Mit Tastatur und Screenreader bedienbar
- ARIA checkbox Role Example: Mixed State Checkbox with Grouping Label
HTML
<div class="tristate">
<p class="tristate-anweisung">Welches Gemuese essen Sie?</p>
<p class="tristate-checkbox" data-label="Ich esse alle Gemüsesorten"></p>
<div class="tristate-optionen">
<p><label><input type="checkbox" name="checkbox1" value="1" checked>Kartoffel</label></p>
<p><label><input type="checkbox" name="checkbox2" value="1" checked>Möhren</label></p>
<p><label><input type="checkbox" name="checkbox3" value="1" checked>Broccoli</label></p>
<p><label><input type="checkbox" name="checkbox4" value="1">Rosenkohl</label></p>
<p><label><input type="checkbox" name="checkbox5" value="1">Aubergine</label></p>
<p><label><input type="checkbox" name="checkbox6" value="1">Bohnen</label></p>
</div>
</div>
JavaScript (jQuery)
function tristateInit() {
var instructionClass = 'tristate-anweisung',
widgetClass = 'tristate-checkbox',
optionsClass = 'tristate-optionen';
$( '.tristate' ) .each( function() {
var $instruction = $( this ) .children( '.' + instructionClass ),
$options = $( this ) .children( '.' + optionsClass ) .find('p>label>input[type="checkbox"]' ),
$widget = $( this ) .children( '.' + widgetClass );
addInstructions( $instruction, $( this ) .children( '.' +optionsClass ) );
addTriStateCheckbox( $widget );
var $tristate = $widget .find( '[type="checkbox"], [role="checkbox"]' ),
tristateNewValue = checkOptions( $options );
addTriStateEvents( $tristate, $options );
setTriStateValue ( $tristate, tristateNewValue );
addOptionsEvents ( $tristate, $options );
})
}
function addInstructions( $instruction, $optionsGroup ) {
$optionsGroup .attr( 'aria-label', $instruction .text() );
$instruction .append( ' Wählen Sie alle oder keine Optionen mit dem ersten Kontrollkästchen aus. Wenn Sie einzelne Antworten mit den darauffolgenden Kontrollkästchen wählen, wird das erste Kontrollkästchen automatisch aktualisiert.' );
}
function addTriStateCheckbox( $widget ) {
var tristateLabel = $widget .attr( 'data-label' );
$widget .html( '<label><input type="checkbox">' + tristateLabel + '</label>' )
.removeAttr( 'data-label' );
}
function addTriStateEvents ( $tristate, $options ) {
$tristate .change( function() {
var tristateValue = $tristate .prop( 'checked' );
if ( tristateValue === true ) {
$options .prop( 'checked', true );
}
else {
$options .prop( 'checked', false );
}
$tristate .prop( 'indeterminate', false );
})
}
function addOptionsEvents ( $tristate, $options ) {
$options .change( function() {
var tristateNewValue = checkOptions( $options );
setTriStateValue ( $tristate, tristateNewValue );
});
}
function checkOptions( $options ) {
var all = 'true', none = 'true';
$options .each( function() {
if ( $( this ) .prop( 'checked' ) === true ) {
none = 'false';
}
else if ( $( this ) .prop( 'checked' ) === false ) {
all = 'false';
}
})
if (all == 'true' ) {
return 'true';
}
else if ( none == 'true' ) {
return 'false';
}
else {
return 'mixed';
}
}
function setTriStateValue ( $tristate, tristateNewValue ) {
if (tristateNewValue === 'true' ) {
$tristate .prop ({
'checked': true,
'indeterminate': false
});
}
else if (tristateNewValue === 'false' ) {
$tristate .prop ({
'checked': false,
'indeterminate': false
});
}
else if (tristateNewValue === 'mixed' ) {
$tristate .prop( 'indeterminate', true );
}
}
tristateInit();
CSS
.tristate-optionen{
margin-left:1.8em;
}
Der Beitrag Tri-State-Checkbox besteht aus folgenden einzelnen Webseiten:
- HTML-Beispiel mit der
indeterminate
-Eigenschaft (Aktuelle Seite)
- ARIA-Beispiel mit
role="checkbox"
undaria-checked
Um einen Zwischenzustand zwischen "aktiviert" und "nicht aktiviert" für eine Checkbox semantisch auszuzeichnen, muss mit
role="checkbox"
undaria-checked
gearbeitet werden.