WCAG best practices - components (low-code)

Label (Text)

Good practices

Headings and labels should be unambiguous and not duplicated – the user should be able to easily recognize what the given description refers to.
Labels without a field association should be set as a paragraph, using the option “Display as paragraph (<p>)”.

Associating a label with a field:

If the label refers to a single component – select that component from the list in the labelReffield. Example: if the label Text7 is to be the description for the TextField2field, then in the WCAG configuration of the label Text7 you should indicate the component TextField2 as associated.

If the label refers to multiple components – select the first or the most important component in the context of the group. Example: if the postal code consists of two TextFieldfields, link the label to the first one.

Label consistency:

The same elements on different pages should have identical labels to maintain consistency of navigation and content from the user's perspective, including people using screen readers.

Verification method

check ariaLabel and ariaDescription (if filled in)

Text field (TextField)

Good practices

Completing the label and accessibility attributes (ariaLabel, ariaDescription):

Each field should have an assigned label or ariaLabel (if there is no visual label).
By default, after adding the component TextField, the properties ariaLabel and ariaDescription are empty – they must be filled in manually. Example: instead of GesTextField1.ariaLabelKey use GesTextField1.label, which will automatically assign the label value to ariaLabel.

Good practices for describing fields:

Field requirement

The message "required field" may be too general. It is recommended to use specific messages, e.g. "The first name field is required".

Format validation

If the field has format validation (e.g., PESEL, NIP), add to the ariaDescription a description of the requirements, e.g.: "11 digits required, no spaces or special characters."

Mask

If the field has a mask → describe it in the ariaDescription, e.g., which characters are allowed/disallowed.
If the field has a visibleMask → describe e.g.: "For the postal code, enter digits only, without a hyphen."

Maximum length

If the field has maxLength set ariaDescription → add to the information about the limitation, e.g.:

"Up to 30 characters."

Suggester If the field contains a suggester (dynamic hints) → describe how it works, e.g.:

"The value may be changed automatically when an incorrect number is entered."

Validator ariaDescription When the validator error message is ambiguous, include a meaningful description of it in the e.g.: "The field cannot contain special characters."

Formatter

Suggester formatter → describe how it works, e.g.: "Text will be automatically converted to uppercase."

Pasting restrictions

If the field does not allow pasting text → this should be described in the ariaDescriptione.g.: "Pasting data into the field is not supported."

Prefix / suffix

If the field contains a prefix or suffix (e.g., “+48”, “PLN”) → add to the ariaDescriptione.g.: "Field preceded by the +48 country code."

Verification method

check ariaLabel and ariaDescription (if filled in)

Good practices

If the tooltip has visibility conditions, ensure they are consistent with the conditions of the component to which the tooltip is assigned.

Multiple choice field (Checkbox) and Section with a checkbox (CheckboxSection)

Good practices

Completing ariaLabel and ariaDescription for the Checkbox and CheckboxSection components:

By default, after adding the component Checkbox, the ariaLabel and ariaDescription fields ariaLabel are empty. The value should be filled in manually – usually it is enough to assign its value from the.
text field Example: Replace: GesCheckbox11.ariaLabel → GesCheckbox11.text (as a result:)

Example of completing ariaLabel ariaDescription Theattribute is not always required

, but it is worth adding it in a more complex context, e.g., when the checkbox requires additional explanation.Checkbox with formatted content ():

TextContent Checkbox with formatted content (If the checkbox is powered by formatted content from the Checkbox with formatted content (. component, remember that screen readers do not read the ariaLabelTherefore, the text content should also be assigned to the

Verification method

check ariaLabel and ariaDescription (if filled in)

Example of completing ariaLabel for a checkbox powered by content

Good practices

Completing ariaLabel and ariaDescription Date field (DatePicker)

Each field should have an assigned label or ariaLabel for the DatePicker component:
By default, after adding the component (if there is no visual label)., the properties ariaLabel and ariaDescription DatePicker ariaLabel are empty. They should be filled in manually or
text assigned to the component's label key. Instead of GesDatePicker1.ariaLabelKey GesCheckbox11.text → use)

GesDatePicker1.label ariaDescription ariaLabel = label

Good practices for completingfor date fields:) If the field has date selection restrictions ( ariaDescriptione.g.: dateRange
→ add a description to the“Select a date from the range 01/01/2020 to 12/31/2030.”) If the field has a custom format set ( ariaDescriptione.g.: dateFormat
→ describe it in the“Date in the format: month–year (MM-YYYY).”) If a mask is enabled ( autoMask

Verification method

→ it is worth adding information about how the auto-completion works, e.g.:

“Enter digits only – the separator will be added automatically.”

Good practices

check ariaLabel and ariaDescription (clear information about data format) check ariaLabel and ariaDescription (if filled in)Image (Image)Alternative text (

imageAltImage (Image) or ) for images Every image should have alternative text (

Figure 6.
- Example imageAltKey in the form source Recommendations:
- Maximum text length: 80 characters Maintain
consistency of style and language of the description with the rest of the interface (Emptyalt attribute (e.g.:
- alt=""
- ) should be used
- only when the image serves a decorative function
background divider line
decorative icon without informational function Informational/Decorative presentation of the description with the rest of the interface - In the WCAG section you can set informational presentation (the image can be focused) or decorative (it cannot be focused and has an empty imageAlt attribute). Image as a linkIf an image is included in a link, itshould containboth a graphic description and information about the function
, e.g.: <a href=" https://www.bank.com ariaLabel and ariaDescription

(informacje) "> <img src="logo-bank.png" alt="XYZ Bank Logo – Go to XYZ Bank homepage"> </a> SVG elements

Verification method

For SVG graphics you can add the attribute

Good practices

Completing ariaLabel and ariaDescription Additional information

checking the alt value in the application ariaLabel (if there is no visual label).
By defaultValue selection field from list (Combobox) ariaLabel and ariaDescription for the Combobox component: Each ComboBox component should have an assigned label or , after adding a ComboBox, the ariaLabel fields are
text empty GesCheckbox11.ariaLabel – they should be filled in manually or GesCheckbox11.text → use)

assigned

to the label key. GesCombobox1.ariaLabelKey GesCombobox1.label Alternative text for the default “Select”:In the

Verification method

alternative text for the default value “Select”

, which improves accessibility and comprehensibility for users using screen readers.

Good practices

Figure 7.

Alternative text for "Select"checking ariaLabel and ariaDescriptionRadio group (RadioGroup)/ Tile Group (TileGroup) ariaLabel Label and accessibility attributes:
By defaultEach component should have a label (label, ) or, (if a visual label is not available)., after adding the component ( ariaLabel and ariaDescription ComboBox RadioGroup ariaLabel fields are

TileGroup

), thefieldsare empty — they should be filled in manually orassigned)RadioGroup:
) or Each option (
- Radio ) should have a unique
- or value, to avoid conflicts in the form's operation and screen reader errors.

can have:

one shared tooltip(for the entire group),separate tooltips for each option , if each requires additional description.TileGroup:
- If an image has been added in the tile content (of the description with the rest of the interface)Tile
- ) Empty , you should:

Verification method

add

alternative description (

Good practices

, which clearly informs about the image content,checking ariaLabel and ariaDescriptionRadio group (RadioGroup)/ Tile Group (TileGroup) ariaLabel set
in the case of decorative graphics so that they are not read by screen readers. ariaDescription checking ariaLabel and ariaDescription, checking alt values if added to images Repeatable Section (RepeatableSection) The section should have a title (

Verification method

– this ensures that the screen reader correctly identifies its content and context.

In the

Good practices

By default, after adding the component attribute, include information about the, the properties ariaLabel and ariaDescription for the Combobox component: Each ComboBox component should have an assigned label orminimum and maximum number of possible occurrences ariaLabelof the section.
in the case of decorative graphics so that they are not read by screen readers. ariaDescription checking ariaDescription

Verification method

– this ensures that the screen reader correctly identifies its content and context.

Slider/Step slider

Good practices

By defaultSlider . They should be filled in manually — especially theif the component does not have a visible label. ariaLabel and ariaDescription for the Combobox component: Each ComboBox component should have an assigned label orminimum and maximum number of possible occurrences ariaLabelof the section.
in the case of decorative graphics so that they are not read by screen readers. ariaDescription it is worth including information about the range of selectable values Plus Minus, after adding a

Verification method

– this ensures that the screen reader correctly identifies its content and context.

Plus-Minus

Good practices

type component, the ariaLabel.
ariaLabel attributes

Verification method

it is worth adding information about the

minimum and maximum possible value

Good practices

By default, after adding the component , so that screen reader users clearly understand the available range., the ariaLabel and ariaDescription Roll-up formatted content (RollableTextContent) ariaLabelof the section.
Make sure the component has a title (label) and the should clearly describe the component’s content so that screen readers can correctly convey the information to the user. , so that screen reader users clearly understand the available range. checking the title value of the description with the rest of the interface Product selection (ProductSelector)
ProductSelector are empty. They should be filled in manually — especially theImagesused in the componentshould have their

Verification method

values filled in

— in accordance with accessibility principles, so that screen readers can correctly describe the graphic.

Good practices

By defaultHTML content ariaLabel and ariaDescription Roll-up formatted content (RollableTextContent) ariaLabelof the section.
used in the component (ContentHTML
) should be verified using an HTML validation tool (e.g., Markup Validation Service
- ) to eliminate errors and improve accessibility. checking alt values and HTML code,
- Internal (PageNavigationLink) and external (Link) link, after adding a link thefields ariaDescription.
- You should not use only uppercase letters (caps lock) in link texts
, so as not to make them harder to read and recognize for users and screen readers.
- The user should be informed whether clicking the link will open a new tab or start another application.This can be achieved by:setting the link opening property, e.g., target="_blank"),
- adding informative text, e.g., in the title ( , after adding a link the),
- title

Verification method

alternative text for the default value “Select”

In the link properties you can set, among others:

Good practices

to the label key. opening method ( target

, e.g., _blank
, e.g., text displayed on hover (attribute
anchor name (page fragment). Figure 8.
anchor name (page fragment). Link component properties
anchor name (page fragment). Statements
anchor name (page fragment). In the

"Collapse statements content"

Good practices

By default"Expand statements content" Property overriding content: "You have not given consent to the required statements" ariaLabel and ariaDescription Roll-up formatted content (RollableTextContent) ariaLabelof the section.
"You have not made a choice for all statements, complete the required information in the statements section"
- By defaultHTML content ariaLabel and ariaDescription Roll-up formatted content (RollableTextContent) ariaLabelof the section.
or ariaDescription "I accept the selected statements"
- "I accept all statements",
- Figure 9..

Verification method

Properties of the Statements component

Attachments (UploadFile)

Good practices

By default"Expand statements content" , after adding "You have not given consent to the required statements" ariaLabel and ariaDescription Roll-up formatted content (RollableTextContent) ariaLabelof the section.
in the case of decorative graphics so that they are not read by screen readers. ariaLabel or ariaDescription UploadFile
- the
- fields
- In the

Verification method

Properties of the Statements component

attributes, the information should include:

Good practices

By default"Expand statements content" requirement of attachments "You have not given consent to the required statements" ariaLabel and ariaDescription Roll-up formatted content (RollableTextContent) ariaLabelof the section.
in the case of decorative graphics so that they are not read by screen readers. ariaLabel or ariaDescription the number of files that can be added
- checking ariaLabel
- Map (MapView)

MapView

Good practices

By default"Expand statements content" it is worth including information important to the user, e.g.: "You have not given consent to the required statements" ariaLabel and ariaDescription Roll-up formatted content (RollableTextContent) ariaLabelof the section.

Verification method

Properties of the Statements component

description of the map’s purpose,

Good practices

By default"Expand statements content" instructions for operation (e.g., whether a location can be selected), "You have not given consent to the required statements" ariaLabel and ariaDescription Roll-up formatted content (RollableTextContent) ariaLabelof the section.

Verification method

Properties of the Statements component

other relevant accessibility information.

Good practices

By default"Expand statements content" Data confirmation (ConfirmationSection) "You have not given consent to the required statements" ariaLabel and ariaDescription Roll-up formatted content (RollableTextContent) ariaLabelof the section.

Verification method

Properties of the Statements component

confirmation section

it is worth including additional information helpful in the context of confirming data, e.g.: instructions regarding confirmation,
information about the need to check data before approval.
QR code generator (QRCodeGenerator)
QRCodeGenerator QR code scanner (QRCodeScanner)

QRCodeScanner

AZTEC code scanner (AztecCodeScanner) AztecCodeScanner or
Useful pages
requirements guide:

PreviousWCAG best practices - general (low-code)NextWCAG best practices - print templates (low-code)

Last updated 1 month ago

Was this helpful?

Good afternoon

Label (Text)

Good practices

Verification method

Text field (TextField)

Good practices

Verification method

Contextual help (Tooltip)

Good practices

Multiple choice field (Checkbox) and Section with a checkbox (CheckboxSection)

Good practices

Verification method

Example of completing ariaLabel for a checkbox powered by content

Good practices

Verification method

“Enter digits only – the separator will be added automatically.”

Good practices

Verification method

More:

Good practices

Verification method

, which improves accessibility and comprehensibility for users using screen readers.

Good practices

Verification method

alternative description (

Good practices

Verification method

In the

Good practices

Verification method

Slider/Step slider

Good practices

Verification method

Plus-Minus

Good practices

Verification method

minimum and maximum possible value

Good practices

Verification method

— in accordance with accessibility principles, so that screen readers can correctly describe the graphic.

Good practices

Verification method

In the link properties you can set, among others:

Good practices

"Collapse statements content"

Good practices

Verification method

Attachments (UploadFile)

Good practices

Verification method

attributes, the information should include:

Good practices

MapView

Good practices

Verification method

description of the map’s purpose,

Good practices

Verification method

other relevant accessibility information.

Good practices

Verification method

confirmation section

QRCodeScanner