---
title: "Accessibility In Screen Controls"
slug: "accessibility-in-screen-controls"
updated: 2025-12-19T00:44:22Z
published: 2025-12-19T00:44:22Z
canonical: "docs.processmaker.com/accessibility-in-screen-controls"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.processmaker.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Accessibility In Screen Controls

Screen controls available in the ProcessMaker Platform include several accessibility settings that help ensure compliance with ADA and WCAG guidelines. These settings include:

- **ARIA Labels:** Provide descriptive labels for screen readers to improve usability for visually impaired users.
- **Keyboard Focus Order:** Define the navigation order for users who rely on keyboard input (e.g., using the Tab key).
- **Mobile Responsiveness:** Ensure controls adapt to various screen sizes and devices for consistent user experience.
- **Custom Appearance (CSS):** Apply custom styles to enhance readability, visual contrast, or meet branding requirements.
- **Color Scheme:** Customize colors for individual controls to ensure sufficient contrast and improve visual accessibility. This allows designers to align components with WCAG contrast ratio requirements at a granular level.

These settings are available within the **Design**, **Advanced**, and **Accessibility** panels of each control’s configuration. A brief description of each setting is provided below. For detailed information on how these settings apply to specific controls, refer to the [individual control documentation linked in this list](/v1/docs/screen-controls).

### Design Panel Settings

Select a text and background color for the control:

#### **Text Color**

Select the text color that displays for this control. Optionally, click the **Clear Color Selection** option to remove the selected color.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/6daaa65a-a8f6-4533-8269-070275a823a2.png)

#### **Background Color**

Select the background color that displays for this control. Optionally, click the **Clear Color Selection** option to remove the selected color.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/4d73c3f1-30ae-4404-8c8c-93ba1be59713.png)

### Advanced Panel Settings

Configure the following advanced control settings:

#### **Device Visibility**

Select on which device types this control displays:

- **Desktop:** The control displays only on desktop devices. Enable the **Show for Desktop** toggle key.
- **Mobile:** The control displays only on mobile devices. Enable the **Show for Mobile** toggle key.
- **Both:** The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/0a9ce525-c41d-4c1d-9af1-8dc4a750311b.png)

#### **CSS Selector Name**

Enter the value to represent this control in custom CSS syntax when in [Custom CSS](/v1/docs/custom-css#add-custom-css-to-a-processmaker-screen) mode. As a best practice, use the same **CSS Selector Name** value on different controls of the same type to apply the same custom CSS style to all those controls.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/09a68f2c-6572-4322-b573-1dbd9c8f74ef.png)

Then, use this name in the [Custom CSS](/v1/docs/custom-css#apply-css-to-specific-processmaker-screen-controls) feature to apply CSS styling to this control as follows:

```plaintext
[selector='Submit Form'] {
    color: blueviolet;
}
```

See the following best practices regarding custom CSS in Screens:

- [Editing a CSS name to represent this control in custom CSS syntax](/v1/docs/screen-design-best-practices#css-selector-naming-best-practice)
- [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings)

### Accessibility Panel Settings

The **Accessibility** panel centralizes settings that enhance screen-reader compatibility and overall usability. ARIA Label setting persists through import, copy/paste, versioning, and upgrades, supporting a more inclusive and standards-aligned Screen Builder experience.

#### **Aria Label**

Enter the string that provides a text alternative to this control for the following purposes:

- Assistive technology, such as screen readers, read the **Aria Label** setting value.
- This control has a visual indication of its purpose, such as a control that uses a graphic instead of text, but still needs to clarify that purpose for anyone who cannot access the visual indication.

The **Aria Label** setting value replaces the **Label** setting value. For example, if a control has both a **Label** setting value and an **Aria Label** setting value, assistive technology only uses the **Aria Label** setting value.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/e57a1afe-a372-4838-be7c-e913c0b12ebc.png)

#### **Tab Order**

Tab order determines the sequential navigation order to navigate a Screen's controls using a keyboard interface. Assistive technology users often use a keyboard for navigation.

[See best practices for setting the tab order for a Screen's controls](/v1/docs/screen-design-best-practices#tab-order-for-keyboard-navigation).

Enter the number for the sequential keyboard navigation order that this control takes focus amongst other controls in this Screen.

![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/40fdd541-aa62-4d05-a8c2-0b74e126ce12.png)