Unqork's Accessibility Rulebook

Unqork continuously makes improvements to the platform to help you build faster and smarter. However, Unqork also conducts regular audits to enhance inclusivity for your end-users. Unqork's audits involve using the previously mentioned tools and Express View tests. This is all part of Unqork's commitment to exceeding Level AA compliance as outlined in the WCAG 2.2 guide. This compliance helps Unqork meet the requirements set by the commissions and departments that enforce accessibility laws like the ADA (Americans with Disabilities Act) and AODA (Accessibility for Ontarians with Disabilities Act). As Unqork improves inclusiveness, you can take advantage of it in your accessible configurations.

You are responsible for keeping accessibility compliance in mind when designing, building, and testing your configurations. The Unqork components highlighted in this article have specialty settings to enable developers to build an application that meets these requirements and pass audits. Components not listed in this article might still be used in a compliant configuration, as not every element needs specialty settings to meet these requirements.

At the very least, end-users need to navigate your application with a keyboard and screen reader. End-users typically use the Tab key to navigate a webpage. And the screen reader must identify all fields, drop-down options, and image alternative and aria text. This section explores the different components that help make your applications more inclusive.

To take advantage of these new features, please contact your Unqork representative to enable these settings in your environment.

The following settings are available in most of Unqork’s UI input components:

Setting	Description
Aria	Use these settings to create ARIA (Accessible Rich Internet Applications) attributes to better support end-users who require screen readers to navigate your applications.
Aria Label	Use this field to define the component when a screen reader arrives at it on the front-end. This setting supports custom values and referencing ones from an existing library.
Aria Role	ARIA roles provide semantic meaning to content, letting screen readers and other accessibility tools present and support interaction with an element that is consistent with end-user expectations. ARIA roles are used to describe elements that do not exist in HTML or are not supported by the browser. This setting supports custom values and referencing ones from an existing library.
Autocomplete	Autocomplete detects end-user data saved in a browser and uses it to fill relevant fields. For example, in Express View, if there is a field labeled First Name, and an end-user clicks into the field, the end-user's browser autofill function suggests first names saved to the browser.
Autocomplete Value	When Autocomplete is enabled, the Autocomplete Value drop-down displays. Use this drop-down to select an ARIA role to better direct the autocomplete feature when an end-user clicks on a field. For example, selecting address-line1 helps the browser determine that the field should autofill with the first line of an address.
Input Behavior	Controls how end-users interact with the component on the front-end.
Enable User Input	Allow end-users to view and enter data in this field.
Disable User Input	Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a prohibited symbol.
Read Only - Legacy	Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None.
Read Only - Accessible	Makes the field non-editable and applies the readonly HTML attribute, which notifies screen readers that the field cannot be modified.
Hide From Screen Reader	Creators can enable this setting to prevent the screen reader technology used by an end-user from reading a specific target area. This functionality might be necessary in your design, or in response to an audit.
Announce Live Changes	Creators can select either Polite or Assertive to read updates only when the end-user is idle, or announce updates immediately, respectively.
Open Pop-Up on Click	Creators can now apply custom Aria attributes if the label, role, or setting does not exist to achieve the desired behavior.

Below is a list of components based on the accessibility settings they support:

Enable User Input, Disable User Input, Read Only - Legacy	Enable User Input, Disable User Input, Read Only - Legacy, Read Only - Accessible	Autocomplete	Aria Label (Supports Custom Values)	Aria Role (Supports Custom Values)	Hide From Screen Reader	Announce Live Changes	Opens Pop-Up on Click
Button	Address v1	Date Input	Button	Columns	Field Group	Columns	Button
Checkboxes	Address Search	Number	Columns	Field Group	HTML Element	Field Group
Data Grid	Date Input	Phone Number	Field Group	Panel	Image	HTML Element
Data Table	Email	Text Area	Image	Uniform Grid	Panel	Panel
Dropdown	Intl Phone Number	Text Field	Panel
File	Number		Uniform Grid
Map v2	Phone Number
Matrix	Text Area
Multi-Select Dropdown	Text Field
Navigation
Plaid
Protected Field
Radio Buttons
Rich Text Editor
Signature
Single Checkbox
Vega Chart