Nijmegen Component Library
You are viewing version 2 of the library, the latest version is

Switch 

<label class="check-switch" for="switch_1">
    Switch 1:
    <span class="switch-true">Ja</span>
    <input id="switch_1" data-check-switch="" role="switch" type="checkbox" aria-checked="false">
    <span class="switch-toggle" aria-hidden="true"></span>
    <span class="switch-false">Nee</span>
</label>

<label class="check-switch" for="switch_2">
    Switch 2:
    <span class="switch-true">Ja</span>
    <input id="switch_2" data-check-switch="" role="switch" type="checkbox" aria-checked="false">
    <span class="switch-toggle" aria-hidden="true"></span>
    <span class="switch-false">Nee</span>
</label>

Select

Based on a11y styled form components:
https://github.com/scottaohara/a11y_styled_form_controls

Using

To start using this component, some JavaScript is needed to initialize it.
Underneath is an example on how to achieve this and should be placed in the Additional component(s) script section as documented in How to use.

<script>
    var selector = '[data-check-switch]';
    var elList = document.querySelectorAll(selector);
    var i;
    for ( i = 0; i < elList.length; i++ ) {
        var a11ySwitch = new A11YswitchCheck();
        a11ySwitch.init( elList[i] );
    };

    $('.check-switch input').off('click').on('click', function() {
        $(this).attr('aria-checked', $(this).is(':checked'));
    });
</script>

Notes

  • The given label text should be descriptive enough for users using screen readers to understand what ticked/unticked (true/false) means.