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.
Von links nach rechts: Safari (iOS), Internet Explorer und Chrome
- 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 eineBeziehung 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.