# WCAG best practices - general (low-code)

{% hint style="info" %}
WCAG - Audit tab

[WCAG - Audit](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/tworzenie-formularza/zakladka-audyt-naruszenia-wcag/wcag-audyt)
{% endhint %}

{% hint style="info" %}
WCAG - The page contains a form

[WCAG - page as a form](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/tworzenie-formularza/zakladka-audyt-naruszenia-wcag/wcag-strona-jako-formularz)
{% endhint %}

## **Audit tab**

When modifying existing applications, pay attention to the **Audit**. (Unfortunately, at the moment only XML is checked - mainly labels. Errors in TextContent are not detected there, so when checking or modifying an application for WCAG, **do not** rely solely on the **Audit**).

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FMMTjkhpwoPTv0iEhjlXD%2Fimage2024-11-12_13-58-29(1).png?alt=media&#x26;token=162c8549-d14c-43d2-9ebc-64f95574b9a1" alt=""><figcaption><p><em><strong>Illustration 1.</strong> Sample list of WCAG violations</em></p></figcaption></figure>

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FL6QU0gHr7foAMUnYbHAL%2Fimage2024-11-12_13-59-33.png?alt=media&#x26;token=6559a4d7-c57d-4887-a404-9198324f4233" alt=""><figcaption><p><em><strong>Illustration 2.</strong> Example application without comments in the <strong>Audit</strong></em></p></figcaption></figure>

### **HTML - TextContents and custom components (CustomComponents)**

When creating and modifying TextContents it is worth **checking the HTML using the validator:** [Markup Validation Service (HTML) – https://validator.w3.org/](https://validator.w3.org/)  ([additional information](http://wcag.stowarzyszenie.edu.pl/mod/page/view.php?id=149) ![(informacje)](https://wiki.consdata.pl/s/-rvpvnr/8703/51k4y0/_/images/icons/emoticons/information.svg))

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FYyCF6w61vcqtlnssTjSS%2Fimage2024-7-23_10-18-31.png?alt=media&#x26;token=77ab7e72-2492-40bb-a0d8-986c0bc0e5f7" alt="" width="563"><figcaption><p><em><strong>Illustration 3.</strong> Example of using the markup validator</em></p></figcaption></figure>

Pay attention to links (target), images (alt), lists and headings (maintaining the correct hierarchy).

### **AriaLabel and ariaDescription**

* **ariaLabel**  – The value of the component's label property.&#x20;
* **ariaDescription** – The value of the component's description property. This is a text verbally describing the component, read by screen readers. It most often constitutes an extended description of the field (e.g. contains the field mask, tooltip text not read by the screen reader, validator).&#x20;
* **By default ariaLabel are empty, they should be added according to the example.** (see **Text field (TextField)** and **Multiple choice field (Checkbox)** in the table below)<br>
* **ariaLabel should be added if the component has no association with a label.**
* Example of filling ariaLabel **ariaLabel** should be used on interactive elements of the page.

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FL7Egl9jEnWJehCw7Dt7Y%2Fimage2024-7-23_13-6-6.png?alt=media&#x26;token=b624b68c-4758-4d79-9497-d1064199eae0" alt=""><figcaption><p><em><strong>Illustration 4.</strong> Additional rules regarding ARIA usage</em> </p></figcaption></figure>

Additional information: [Using ARIA](https://www.w3.org/TR/using-aria/#notes2)![(informacje)](https://wiki.consdata.pl/s/-rvpvnr/8703/51k4y0/_/images/icons/emoticons/information.svg)&#x20;

### **Verification of ariaLabel and ariaDescription**

Ways of verification **ariaLabel** and **ariaDescription**:

* using **a screen reader** – you can check how attributes are read to the user. (Links to example screen readers are at the end of the documentation)
* using developer tools – **DevTools** – attributes **ariaLabel** and **ariaDescription** can be checked directly in the DOM structure, in the **Elements**.
* using a browser plugin e.g. [WAVE Evaluation Tool](https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US\&utm_source=ext_sidebar)

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2F1q1Eg31MRWfDpA0ZeaW4%2Fimage2024-7-23_10-30-50.png?alt=media&#x26;token=72ac4aea-c9b1-4141-8e3f-ace841e486d5" alt="" width="563"><figcaption><p><em><strong>Illustration 5.</strong> Attribute preview <strong><code>ariaLabel</code></strong></em> <em>and <strong><code>ariaDescription</code></strong> in  <strong>DevTools</strong></em></p></figcaption></figure>

### **Headings**

* **\<h1>**\
  Eximee Designer will by default have set **\<h1>** as the application title. Although using several headings **\<h1>** is allowed by HTML standards (as long as they are not nested), it is not considered good practice. Basically there should be one heading **\<h1>**&#x74;hat describes the main content of the page. When adding headings to an application it is best to start from level **\<h2>**.
* **Section headings -** each added section in the application may have its own heading. **Section within a section** will have the next heading level (aria-level) – this also applies to repeatable sections.&#x20;

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FNpnJWI8VNcLOm653hINO%2Fimage2025-5-7_12-29-59.png?alt=media&#x26;token=8d363884-5152-470e-93f2-3e4ffbfd3a49" alt=""><figcaption><p><em><strong>Illustration 6.</strong> Defining headings in Eximee Designer</em></p></figcaption></figure>

* Additional information: [\<h1>–\<h6>: The HTML Section Heading elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) ![(informacje)](https://wiki.consdata.pl/s/-rvpvnr/8703/51k4y0/_/images/icons/emoticons/information.svg)

### **Reusability of complex components (dynamic names)**

If a given **complex component** is used **multiple times** – e.g. in an application template or as part of another complex component - you can set **different values for ariaLabel and ariaDescription**, depending on the usage context.

For example: the field "**First name**" may have a different description for the applicant and another for the co-applicant.

To achieve this, in the **artifact containing the reused complex component** :

* Go to the **Translations**.
* For each field separately add appropriate translation keys **ariaLabel** and/or **ariaDescription**.\
  **Note: The key must be the full path to the field.**

Example:\
Field **Street** (GesTextField1), located in a complex component, was used twice in the application – assigned ids **GesComplexComponent2** and **GesComplexComponent3**.\
For each occurrence you can assign a different **ariaLabel**, e.g.:

* **GesComplexComponent2.GesTextField1.ariaLabel** : "**Street** **residence**"
* **GesComplexComponent3.GesTextField1.ariaLabel** : "**correspondence street**"

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FtI38ipsSe6IMHVXBq9Rn%2Fimage2024-7-23_8-48-25.png?alt=media&#x26;token=452acb46-b6a4-4e32-809e-90f37f785772" alt=""><figcaption><p><em><strong>Illustration 7.</strong> Defining <strong>ariaLabel</strong> for complex components</em></p></figcaption></figure>

#### Verification method

After focusing the field the reader should read the correct ariaLabel, i.e. "residence street" and "correspondence street"

### **Page as a form**

If the parameter is checked, the application page is assigned the role **`form`**. By default this parameter is enabled.&#x20;

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FWfcTFsCetnfOP9O82Qgr%2Fimage.png?alt=media&#x26;token=247ab169-bbd2-4ce6-99fc-448f5da0e5f8" alt=""><figcaption><p><em><strong>Illustration 8.</strong> "Page as a form" functionality</em></p></figcaption></figure>

### **Required/optional fields**

**Fields required to be filled should be marked** – add information about their requirement in the visual layer e.g. by adding "\*required field" or the symbol "\*". They should also  **visually differ** from optional fields so that the user can easily identify them.

### **Page title**

**The page title should clearly** **identify the current location,** without the need to read the page content.

### **Text as an image**

**Do not place text in the form of an image** (exception is a logo). ([additional information](https://wcag20.widzialni.org/grafiki-tekstowe,new,mg,165,172.html,73) ![(informacje)](https://wiki.consdata.pl/s/-rvpvnr/8703/51k4y0/_/images/icons/emoticons/information.svg))

### **Text resizing (custom style)**

* After increasing the text size by **200%** there must be no loss of readability or interface functionality. ([additional information](https://wcag20.widzialni.org/zmiana-rozmiaru-tekstu,new,mg,165,172.html,72) ![(informacje)](https://wiki.consdata.pl/s/-rvpvnr/8703/51k4y0/_/images/icons/emoticons/information.svg))
* Text should meet minimum spacing requirements to ensure readability:
  * line height: at least 1.5 times the font size
  * paragraph spacing: at least 2 times the font size
  * letter spacing: at least 0.12 times the font size
  * word spacing: at least 0.16 times the font size&#x20;
* All elements **must remain readable and visible** after applying the above parameters.

### **Special characters in content**

If special characters are used in the content, e.g. arrows serving a decorative function, they should be hidden from screen readers using the **aria-hidden**.\
Example: *\<span aria-hidden="true">→\</span> Continue*

### **Responsiveness**

**Content must be presented without loss of information or functionality on screens with a minimum width of 320 px and height of 256 px.**\
Additionally **horizontal scrolling must not occur**, except for two-dimensional content such as: tables, complex images, maps and charts.

### **High contrast**

All elements should be **visible and readable when high contrast mode is enabled.**\
Chrome extension: <https://chromewebstore.google.com/detail/wysoki-kontrast/djcfdncoelnlbldjfhinnjlhdjlikmph?hl=pl>

### **Navigation**

Navigation elements on subpages should be located in the same place, maintaining a consistent layout across all pages.

### **CSS - Hiding text from visual presentation + ignoring text by screen readers**&#x20;

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FeFKWXwCEVpPjn9LQ0ssW%2Fimage.png?alt=media&#x26;token=2740a30b-35b7-46c1-9276-76f69b468e52" alt="" width="563"><figcaption><p><em><strong>Illustration 9.</strong> Example of hiding layout elements using CSS</em></p></figcaption></figure>

Additional information: [CSS - Invisible Content Just for Screen Reader Users](https://webaim.org/techniques/css/invisiblecontent/)![(informacje)](https://wiki.consdata.pl/s/-rvpvnr/8703/51k4y0/_/images/icons/emoticons/information.svg)

**display:none or visibility: hidden → hiding text from everyone**

### **Summary**

The form should include a page with a summary of data – a so-called confirmation page – allowing the user to review them, go back to previous steps to make corrections and finally confirm the correctness of the data.
