visually-hidden tests.

Voorbeeld

Paragraaf

Visueel voorbeeld

HTML-voorbeeld

                    
<p class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

div

Visueel voorbeeld

HTML-voorbeeld

                    
<div class="visually-hidden">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

buttons

Visueel voorbeeld

Button states:

Input type = button states:

Link <a> as a button states:

Submit-button <button type="submit"> states:

Input type = submit <input type="submit">:

Input type = submit <input type="submit">:

Button reset <button type="reset">:

Input type = reset <input type="reset">:

Secundaire button-variant

Button states:

Input type = button states:

Link <a> as a button:

Submit-button <button type="submit">:

Input type = submit <input type="submit">:

Button reset <button type="reset">:

Input type = reset <input type="reset">:

Different types of buttons

Call to action button-variant

Button states:

Input type = button states:

Link <a> as a button:

Submit-button <button type="submit">:

Input type = submit <input type="submit">:

Button reset <button type="reset">:

Input type = reset <input type="reset">:

HTML-voorbeeld

                    
<div class="button-container">
    <button class="visually-hidden">Button primary</button>
    <button class="visually-hidden" disabled>Button disabled</button>
    <button class="hover visually-hidden">Button hover</button>
    <button class="focus visually-hidden">Button focus</button>
    <button class="active visually-hidden">Button active/on mouse down</button>
    <button class="primary selected visually-hidden">Button selected</button>
    <button class="icon icon-close visually-hidden">Icon button</button>
    <button class="visually-hidden"><span class="icon icon-close visually-hidden"></span>Icon with text button</button>
</div>

<h4>Input type = button states:</h4>
<div class="button-container">
    <input type="button" value="Button primary" class="visually-hidden">
    <input type="button" value="Button disabled" disabled class="visually-hidden">
    <input type="button" value="Button hover" class="hover visually-hidden">
    <input type="button" value="Button focus" class="focus visually-hidden">
    <input type="button" value="Button active/on mouse down" class="active visually-hidden">
    <input type="button" value="Button selected" class="selected visually-hidden">
</div>

<h4>Link <a> as a button states:</h4>
<div class="button-container">
    <a href="" class="button visually-hidden">Button primary</a>
    <a href="" class="button disabled visually-hidden">Button disabled</a>
    <a href="" class="button hover visually-hidden">Button hover</a>
    <a href="" class="button focus visually-hidden">Button focus</a>
    <a href="" class="button active visually-hidden">Button active/on mouse down</a>
    <a href="" class="button selected visually-hidden">Button selected</a>
    <a href="" class="button icon icon-close visually-hidden">Icon button</a>
    <a href="" class="button visually-hidden"><span class="icon icon-close"></span>Icon with text button</a>
</div>

<h4>Submit-button <button type="submit"> states:</h4>
<div class="button-container">
    <button type="submit" class="visually-hidden">Button primary</button>
    <button type="submit" disabled class="visually-hidden">Button disabled</button>
    <button type="submit" class="hover visually-hidden">Button hover</button>
    <button type="submit" class="focus visually-hidden">Button focus</button>
    <button type="submit" class="active visually-hidden">Button active/on mouse down</button>
    <button type="submit" class="selected visually-hidden">Button selected</button>
    <button type="submit" class="icon icon-close visually-hidden">Icon button</button>
    <button type="submit" class="visually-hidden"><span class="icon icon-close"></span>Icon with text button</button>
</div>

<h4>Input type = submit <input type="submit">:</h4>
<div class="button-container">
    <input type="submit" value="Input" class="visually-hidden">
    <input type="submit" value="Input disabled" disabled class="visually-hidden">
</div>

<h4>Input type = submit <input type="submit">:</h4>
<div class="button-container">
    <input type="submit" value="Input" class="visually-hidden">
    <input type="submit" value="Input disabled" class="visually-hidden" disabled>
    <input type="submit" class="hover visually-hidden" value="Input hover">
    <input type="submit" class="focus visually-hidden" value="Input focus">
    <input type="submit" class="active visually-hidden" value="Input active">
    <input type="submit" class="selected visually-hidden" value="Input selected">
</div>

<h4>Button reset <button type="reset">:</h4>
<div class="button-container">
    <button type="reset" class="visually-hidden">Button primary</button>
    <button type="reset" class="visually-hidden" disabled>Button disabled</button>
    <button type="reset" class="hover visually-hidden">Button hover</button>
    <button type="reset" class="focus visually-hidden">Button focus</button>
    <button type="reset" class="active visually-hidden">Button active/on mouse down</button>
    <button type="reset" class="selected visually-hidden">Button selected</button>
    <button type="reset" class="icon icon-close visually-hidden">Icon button</button>
    <button type="reset" class="visually-hidden"><span class="icon icon-close"></span>Icon with text button</button>
</div>

<h4>Input type = reset <input type="reset">:</h4>
<div class="button-container">
    <input type="reset" value="Input" class="visually-hidden">
    <input type="reset" value="Input disabled" class="visually-hidden" disabled>
    <input type="reset" class="hover visually-hidden" value="Input hover">
    <input type="reset" class="focus visually-hidden" value="Input focus">
    <input type="reset" class="active visually-hidden" value="Input active">
    <input type="reset" class="selected visually-hidden" value="Input selected">
</div>

<h3>Secundaire button-variant</h3>
<button  class="ghost visually-hidden">Lorem ipsum</button>
<h4>Button states:</h4>
<div class="button-container">
    <button class="ghost visually-hidden">Button ghost</button>
    <button class="ghost visually-hidden" disabled>Button disabled</button>
    <button class="ghost hover visually-hidden">Button hover</button>
    <button class="ghost focus visually-hidden">Button focus</button>
    <button class="ghost active visually-hidden">Button active/on mouse down</button>
    <button class="ghost selected visually-hidden">Button selected</button>
    <button class="ghost icon icon-close visually-hidden">Icon button</button>
    <button class="ghost visually-hidden"><span class="icon icon-close"></span>Icon with text button</button>
</div>

<h4>Input type = button states:</h4>
<div class="button-container">
    <input type="button" value="Button primary" class="button ghost visually-hidden">
    <input type="button" value="Button disabled" class="button ghost visually-hidden" disabled>
    <input type="button" value="Button hover" class="button ghost hover visually-hidden">
    <input type="button" value="Button focus" class="button ghost focus visually-hidden">
    <input type="button" value="Button active/on mouse down" class="button ghost active visually-hidden">
    <input type="button" value="Button selected" class="button ghost selected visually-hidden">
</div>

<h4>Link <a> as a button:</h4>
<div class="button-container">
    <a href="#" class="button ghost visually-hidden">Button primary</a>
    <a href="#" class="button ghost disabled visually-hidden">Button disabled</a>
    <a href="#" class="button ghost hover visually-hidden">Button hover</a>
    <a href="#" class="button ghost focus visually-hidden">Button focus</a>
    <a href="#" class="button ghost active visually-hidden">Button active/on mouse down</a>
    <a href="#" class="button ghost selected visually-hidden">Button selected</a>
    <a href="#" class="button ghost icon icon-close visually-hidden">Icon button</a>
    <a href="#" class="button ghost visually-hidden"><span class="icon icon-close"></span>Icon with text button</a>
</div>

<h4>Submit-button <button type="submit">:</h4>
<div class="button-container">
    <button type="submit" class="ghost visually-hidden">Button primary</button>
    <button type="submit" class="ghost visually-hidden" disabled>Button disabled</button>
    <button type="submit" class="ghost hover visually-hidden">Button hover</button>
    <button type="submit" class="ghost focus visually-hidden">Button focus</button>
    <button type="submit" class="ghost active visually-hidden">Button active/on mouse down</button>
    <button type="submit" class="ghost selected visually-hidden">Button selected</button>
    <button type="submit" class="ghost icon icon-close visually-hidden">Icon button</button>
    <button type="submit" class="ghost visually-hidden"><span class="icon icon-close"></span>Icon with text button</button>
</div>

<h4>Input type = submit <input type="submit">:</h4>
<div class="button-container">
    <input type="submit" class="ghost visually-hidden" value="Input">
    <input type="submit" class="ghost visually-hidden" value="Input disabled" disabled>
    <input type="submit" class="ghost hover visually-hidden" value="Input hover">
    <input type="submit" class="ghost focus visually-hidden" value="Input focus">
    <input type="submit" class="ghost active visually-hidden" value="Input active">
    <input type="submit" class="ghost selected visually-hidden" value="Input selected">
</div>

<h4>Button reset <button type="reset">:</h4>
<div class="button-container">
    <button type="reset" class="ghost visually-hidden">Button ghost</button>
    <button type="reset" class="ghost visually-hidden" disabled>Button disabled</button>
    <button type="reset" class="ghost hover visually-hidden">Button hover</button>
    <button type="reset" class="ghost focus visually-hidden">Button focus</button>
    <button type="reset" class="ghost active visually-hidden">Button active/on mouse down</button>
    <button type="reset" class="ghost selected visually-hidden">Button selected</button>
    <button type="reset" class="ghost icon icon-close visually-hidden">Icon button</button>
    <button type="reset" class="ghost visually-hidden"><span class="icon icon-close"></span>Icon with text button</button>
</div>

<h4>Input type = reset <input type="reset">:</h4>
<div class="button-container">
    <input type="reset" class="ghost visually-hidden" value="Input">
    <input type="reset" class="ghost visually-hidden" value="Input disabled" disabled>
    <input type="reset" class="ghost hover visually-hidden" value="Input hover">
    <input type="reset" class="ghost focus visually-hidden" value="Input focus">
    <input type="reset" class="ghost active visually-hidden" value="Input active">
    <input type="reset" class="ghost selected visually-hidden" value="Input selected">
</div>

<h4>Different types of buttons</h4>
<div class="button-container">
    <button class="visually-hidden">Lorem ipsum</button>
    <input type="button" value="Lorem ipsum" class="visually-hidden">
    <a href="#" class="button visually-hidden">Lorem ipsum</a>
    <button type="submit" class="visually-hidden">Lorem ipsum</button>
    <input type="submit" value="Input" class="visually-hidden">
    <button type="reset" class="visually-hidden">Button primary</button>
    <input type="reset" value="Input" class="visually-hidden">
</div>

<h3>Call to action button-variant</h3>
<button  class="cta visually-hidden">Lorem ipsum</button>
<h4>Button states:</h4>
<div class="button-container">
    <button class="cta visually-hidden">Button cta</button>
    <button class="cta visually-hidden" disabled>Button disabled</button>
    <button class="cta hover visually-hidden">Button hover</button>
    <button class="cta focus visually-hidden">Button focus</button>
    <button class="cta active visually-hidden">Button active/on mouse down</button>
    <button class="cta selected visually-hidden">Button selected</button>
    <button class="cta icon icon-close visually-hidden">Icon button</button>
    <button class="cta visually-hidden"><span class="icon icon-close"></span>Icon with text button</button>
</div>

<h4>Input type = button states:</h4>
<div class="button-container">
    <input type="button" value="Button primary" class="button cta visually-hidden">
    <input type="button" value="Button disabled" class="button cta visually-hidden" disabled>
    <input type="button" value="Button hover" class="button cta hover visually-hidden">
    <input type="button" value="Button focus" class="button cta focus visually-hidden">
    <input type="button" value="Button active/on mouse down" class="button cta active visually-hidden">
    <input type="button" value="Button selected" class="button cta selected visually-hidden">
</div>

<h4>Link <a> as a button:</h4>
<div class="button-container">
    <a href="#" class="button cta visually-hidden">Button primary</a>
    <a href="#" class="button cta disabled visually-hidden">Button disabled</a>
    <a href="#" class="button cta hover visually-hidden">Button hover</a>
    <a href="#" class="button cta focus visually-hidden">Button focus</a>
    <a href="#" class="button cta active visually-hidden">Button active/on mouse down</a>
    <a href="#" class="button cta selected visually-hidden">Button selected</a>
    <a href="#" class="button cta icon icon-close visually-hidden">Icon button</a>
    <a href="#" class="button cta visually-hidden"><span class="icon icon-close"></span>Icon with text button</a>
</div>

<h4>Submit-button <button type="submit">:</h4>
<div class="button-container">
    <button type="submit" class="cta visually-hidden">Button primary</button>
    <button type="submit" class="cta visually-hidden" disabled>Button disabled</button>
    <button type="submit" class="cta hover visually-hidden">Button hover</button>
    <button type="submit" class="cta focus visually-hidden">Button focus</button>
    <button type="submit" class="cta active visually-hidden">Button active/on mouse down</button>
    <button type="submit" class="cta selected visually-hidden">Button selected</button>
    <button type="submit" class="cta icon icon-close visually-hidden">Icon button</button>
    <button type="submit" class="cta visually-hidden"><span class="icon icon-close"></span>Icon with text button</button>
</div>

<h4>Input type = submit <input type="submit">:</h4>
<div class="button-container">
    <input type="submit" class="cta visually-hidden" value="Input">
    <input type="submit" class="cta visually-hidden" value="Input disabled" disabled>
    <input type="submit" class="cta hover visually-hidden" value="Input hover">
    <input type="submit" class="cta focus visually-hidden" value="Input focus">
    <input type="submit" class="cta active visually-hidden" value="Input active">
    <input type="submit" class="cta selected visually-hidden" value="Input selected">
</div>

<h4>Button reset <button type="reset">:</h4>
<div class="button-container">
    <button type="reset" class="cta visually-hidden">Button cta</button>
    <button type="reset" class="cta visually-hidden" disabled>Button disabled</button>
    <button type="reset" class="cta hover visually-hidden">Button hover</button>
    <button type="reset" class="cta focus visually-hidden">Button focus</button>
    <button type="reset" class="cta active visually-hidden">Button active/on mouse down</button>
    <button type="reset" class="cta selected visually-hidden">Button selected</button>
    <button type="reset" class="cta icon icon-close visually-hidden">Icon button</button>
    <button type="reset" class="cta visually-hidden"><span class="icon icon-close"></span>Icon with text button</button>
</div>

<h4>Input type = reset <input type="reset">:</h4>
<div class="button-container">
    <input type="reset" class="cta visually-hidden" value="Input">
    <input type="reset" class="cta visually-hidden" value="Input disabled" disabled>
    <input type="reset" class="cta hover visually-hidden" value="Input hover">
    <input type="reset" class="cta focus visually-hidden" value="Input focus">
    <input type="reset" class="cta active visually-hidden" value="Input active">
    <input type="reset" class="cta selected visually-hidden" value="Input selected">
</div>
Terug naar het hoofdmenu