The following content can only be created with additional HTML code in OPAL. It can't be created in ILIAS.

Buttons

The following criteria are taken from the checklist:
  • When clicking on control elements, their function is only executed when the mouse button is released. Otherwise the function can be aborted or undone.
  • Visible labels of control elements is at the same time included in the associated name for accessibility, which is defined via non-visible attributes such as `title` or `aria-label`.

People with motor impairments often have problems performing targeted movements. This means that functions can often be triggered unintentionally. Accordingly, there must be simple ways to cancel or revoke the functions of buttons. The visible name of control elements must also appear in the accessible name (e.g. via "title" or "aria-label"). This is important so that voice input users can name the correct term to activate the control element.

Also ensure sufficient contrast. You can find more information on this in the chapter on Color contrast .

Implementation of the criteria

HTML tags: <button>

Code example of a button 
                        
                            <button>Click me!</button>

Provide Clear Labels: The function of the button should be clearly communicated via its text label. If the button has no text (e.g., it's just an icon), use the title attribute to provide a screen-reader-friendly label. 

                          
                            <button title="Close"><img src="close-icon.png" alt=""></button>

Ensure Sufficient Contrast: The color of the button should have enough contrast with its background so that users who are color blind or visually impaired can see it clearly. 

                          
                            <button title="Download PDF"> Download </button>

BITV-Guidelines