<div class="form-field" data-bsi-element="date-field" data-bsi-element-part="form-field" data-bsi-form-field-fixed-type="">
- <label class="label">Date</label>
- <input class="input" type="date" value="2009-11-13" required="" />
+ <label for="date" class="label">Date</label>
+ <input id="date" class="input" type="date" value="2009-11-13" required="" />
</div><div data-bsi-element="form-textarea" data-bsi-element-part="form-textarea" class="form-field form-element">
- <label class="label">Description</label>
- <textarea rows="5" cols="20" class="textarea" maxlength="500">Lorem ipsum</textarea>
+ <label for="textarea" class="label">Description</label>
+ <textarea id="textarea" rows="5" cols="20" class="textarea" maxlength="500">Lorem ipsum</textarea>
</div><div data-bsi-element="form-select" data-bsi-element-part="form-select" class="form-select form-element" data-bsi-value-list="Yes
No
Unsure" data-bsi-value="No">
- <label class="label">Decision</label>
+ <label for="select" class="label">Decision</label>
<div class="select-wrapper">
- <select size="1">
+ <select size="1" id="select">
<option>Yes</option>
<option selected="">No</option>
<option>Unsure</option>
@@ -4317,6 +4318,103 @@ Deleting or deprecating content elements) is a feasible option.
+
+5.1.3. Creating accessible designs
+
+To ensure accessibility in CX contents, several things should be taken into account when developing a design. They help to ensure that screen readers can read out the content in the best possible way and that people with impaired vision will not be disadvantaged.
+
+
+5.1.3.1. Layout
+
+
+-
+
All functionalities (form input fields and control elements) should be accessible and operable using the keyboard (tab key). It must also be possible to exit all elements using the keyboard so that the user can navigate through all content.
+
+-
+
Every website has a correct language declaration. If the main language of the page is English, all texts should be in English. If the intention is to insert text in another language, then this should be marked up accordingly with the lang attribute in the correct language.
+
+-
+
Enlargement is possible in the browser, both with "Zoom" and by setting a user-defined font size
+
+-
+
To ensure that screen readers interpret and parse all page content correctly, HTML elements of a website must be implemented in accordance with their W3C specifications. The W3C’s Markup Validation Services can be used to check whether the source code of a website complies with the W3C specifications.
+
+
+
+
+
+5.1.3.2. Styling
+
+
+-
+
The contrast ratio of the font color to the background color is at least 4.5:1
+
+-
+
The contrast ratio of the font color of large font and the background color is at least 3:1
+
+-
+
If color differentiation alone is used, e.g. for links in a text, the links have a contrast ratio to the surrounding continuous text of at least 3:1
+
+-
+
Each element must have a visible focus state that has a contrast ratio of 3:1 to the background or non-focused state
+
+-
+
No spaces to create spacing, but CSS instead
+
+
+
+
+
+5.1.3.3. Elements
+
+
+-
+
For information-bearing images, the alternative text must describe the visual information
+
+-
+
Headings are marked with the heading element (h1, h2, … , h6)
+
+-
+
The text size (font size) in web templates is defined in CSS in % or em
+
+-
+
Enumerations are formatted as lists (ul, ol, dl)
+
+-
+
Special text is formatted correctly, e.g. quotes as <blockquote> and <cite>
+
+-
+
Video content should have synchronous subtitles
+
+-
+
Data tables are formatted with the necessary markup, e.g. column, row and table headings are labeled and headings and summaries are present
+
+
+
+
+
+5.1.3.4. Forms
+
+
+-
+
Labels are present and meaningful. Labels and associated form input fields are logically linked (implementation with for attribute for label elements). The label should be present prior to the associated input field (exception: checkboxes, radio buttons).
+
+-
+
Form fields may have an additional information text to describe what input is expected. If, for example, a certain format is expected, this should be described (e.g. "Date format: DD.MM.YYYY"). This text should be placed in front of the input field.
+
+-
+
Mandatory fields should be marked (e.g. with *). The mandatory field star must not be integrated via CSS, it should be placed directly in the label. The required attribute should be added to the input element.
+
+-
+
A mandatory field explanation should be provided (e.g. "Please fill in all fields marked with *"). The information must appear before the first mandatory field.
+
+-
+
Error messages should appear directly below the relevant input field. They should have the attributes aria-live="assertive" (or aria-live="polite") and role="alert" so that they are read aloud by the screen reader as soon as they appear.
+
+
+
+
+