DSO Component Library

Group Static: Static Infobutton 

<div class="form-group dso-static">
    <div class="dso-label-container">
        <label class="control-label">Kleur van object</label>
        <button type="button" class="btn dso-field-info-button">
            <span class="sr-only">
                Toelichting
            </span>
        </button>
    </div>
    <div class="dso-field-container">
        <p>Rood</p>
    </div>
</div>
 
<div class="form-group dso-static">
  <div class="dso-label-container">
    <label class="control-label">{{ label }}</label>
    {{#if infoText }}
      {{> '@form-field-info-button' }}
    {{/if}}
  </div>
  <div class="dso-field-container">
    <p>{{ value }}</p>
  </div>
  {{#if infoOpen }}
    {{> '@form-field-info' }}
  {{/if}}
</div>
 
label: Kleur van object
value: Rood
__title: Static infobutton
infoOpen: null
infoText: |
  Closed

There are no notes for this item.

WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141

The heading structure is not logically nested. This h4 element appears to be the primary document heading, so should be an h1 element.

<h4>Heading 4</h4>

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<label class="control-label">Kleur van object</label>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Group Static

NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

<button type="button" class="btn dso-field-info-button"> <span class="sr-only"> Toelichting </span> </button>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_1.G83,G84,G85

If an input error is automatically detected in this form, check that the item(s) in error are identified and the error(s) are described to the user in text.

<form class="form-horizontal"> <!-- Start: @group-static--default --> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> <!-- End: @group-static--default --><hr> <!-- Start: @group-static--static --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Static</h2> <p>Een static input kan informatie tonen die van belang is in een formulier zonder dat er een keuze gemaakt dient te worden.</p> </div> <div class="dso-example"> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> </div> </div> <!-- End: @group-static--static --><hr> <!-- Start: @group-static--static-infobutton --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Static infobutton</h2> </div> <div class="dso-example"> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> <button type="button" class="btn dso-field-info-button"> <span class="sr-only"> Toelichting </span> </button> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> </div> </div> <!-- End: @group-static--static-infobutton --><hr> <!-- Start: @group-static--static-infobutton-open --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Static infobutton uitgeklapt</h2> </div> <div class="dso-example"> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> <button type="button" class="btn dso-field-info-button dso-open"> <span class="sr-only"> Toelichting </span> </button> </div> <div class="dso-field-container"> <p>Rood</p> </div> <div class="dso-field-info"> <button type="button"> <span class="sr-only">Sluiten</span> </button> <div class="dso-rich-content"> <h4>Heading 4</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est. Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius. Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus. </p> </div> </div> </div> </div> </div> <!-- End: @group-static--static-infobutton-open --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_2.G131,G89,G184,H90

Check that descriptive labels or instructions (including for required fields) are provided for user input in this form.

<form class="form-horizontal"> <!-- Start: @group-static--default --> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> <!-- End: @group-static--default --><hr> <!-- Start: @group-static--static --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Static</h2> <p>Een static input kan informatie tonen die van belang is in een formulier zonder dat er een keuze gemaakt dient te worden.</p> </div> <div class="dso-example"> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> </div> </div> <!-- End: @group-static--static --><hr> <!-- Start: @group-static--static-infobutton --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Static infobutton</h2> </div> <div class="dso-example"> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> <button type="button" class="btn dso-field-info-button"> <span class="sr-only"> Toelichting </span> </button> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> </div> </div> <!-- End: @group-static--static-infobutton --><hr> <!-- Start: @group-static--static-infobutton-open --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Static infobutton uitgeklapt</h2> </div> <div class="dso-example"> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> <button type="button" class="btn dso-field-info-button dso-open"> <span class="sr-only"> Toelichting </span> </button> </div> <div class="dso-field-container"> <p>Rood</p> </div> <div class="dso-field-info"> <button type="button"> <span class="sr-only">Sluiten</span> </button> <div class="dso-rich-content"> <h4>Heading 4</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est. Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius. Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus. </p> </div> </div> </div> </div> </div> <!-- End: @group-static--static-infobutton-open --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_3.G177

Check that this form provides suggested corrections to errors in user input, unless it would jeopardize the security or purpose of the content.

<form class="form-horizontal"> <!-- Start: @group-static--default --> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> <!-- End: @group-static--default --><hr> <!-- Start: @group-static--static --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Static</h2> <p>Een static input kan informatie tonen die van belang is in een formulier zonder dat er een keuze gemaakt dient te worden.</p> </div> <div class="dso-example"> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> </div> </div> <!-- End: @group-static--static --><hr> <!-- Start: @group-static--static-infobutton --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Static infobutton</h2> </div> <div class="dso-example"> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> <button type="button" class="btn dso-field-info-button"> <span class="sr-only"> Toelichting </span> </button> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> </div> </div> <!-- End: @group-static--static-infobutton --><hr> <!-- Start: @group-static--static-infobutton-open --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Static infobutton uitgeklapt</h2> </div> <div class="dso-example"> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> <button type="button" class="btn dso-field-info-button dso-open"> <span class="sr-only"> Toelichting </span> </button> </div> <div class="dso-field-container"> <p>Rood</p> </div> <div class="dso-field-info"> <button type="button"> <span class="sr-only">Sluiten</span> </button> <div class="dso-rich-content"> <h4>Heading 4</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est. Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius. Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus. </p> </div> </div> </div> </div> </div> <!-- End: @group-static--static-infobutton-open --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_4.G98,G99,G155,G164,G168.LegalForms

If this form would bind a user to a financial or legal commitment, modify/delete user-controllable data, or submit test responses, ensure that submissions are either reversible, checked for input errors, and/or confirmed by the user.

<form class="form-horizontal"> <!-- Start: @group-static--default --> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> <!-- End: @group-static--default --><hr> <!-- Start: @group-static--static --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Static</h2> <p>Een static input kan informatie tonen die van belang is in een formulier zonder dat er een keuze gemaakt dient te worden.</p> </div> <div class="dso-example"> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> </div> </div> <!-- End: @group-static--static --><hr> <!-- Start: @group-static--static-infobutton --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Static infobutton</h2> </div> <div class="dso-example"> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> <button type="button" class="btn dso-field-info-button"> <span class="sr-only"> Toelichting </span> </button> </div> <div class="dso-field-container"> <p>Rood</p> </div> </div> </div> </div> <!-- End: @group-static--static-infobutton --><hr> <!-- Start: @group-static--static-infobutton-open --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Static infobutton uitgeklapt</h2> </div> <div class="dso-example"> <div class="form-group dso-static"> <div class="dso-label-container"> <label class="control-label">Kleur van object</label> <button type="button" class="btn dso-field-info-button dso-open"> <span class="sr-only"> Toelichting </span> </button> </div> <div class="dso-field-container"> <p>Rood</p> </div> <div class="dso-field-info"> <button type="button"> <span class="sr-only">Sluiten</span> </button> <div class="dso-rich-content"> <h4>Heading 4</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est. Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius. Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus. </p> </div> </div> </div> </div> </div> <!-- End: @group-static--static-infobutton-open --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>