How to add an attribute:

close icon
Hey! Give us some feedback here.
Accessibility

Accessibility (a11y)

Ensures dynamic attributes like, aria-expanded, are properly updated and that non-interactive elements like <div> tags are keyboard actionable when required.

30,529,861

loads per month

Accessibility (a11y)
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script

No Attributes needed.

There are no fs-a11y attributes to apply to the page.

A11y seamlessly integrates with new component solutions launching next week.

What does Attributes A11y do?

Attributes A11y helps manage dynamic, or state based, accessibility attributes.

A11y will look for attributes, like aria-expanded, on the page and apply the required JavaScript to change its value.

A11y works with other Attributes solutions to make sure our components are accessible. Next week we launch modals, accordions, and other components.

Example using our new Modal solution

Below is documentation of everything A11y does when we use the Attributes Modal solution. We use fs-modal to explain what fs-a11y does.

navigator arrow

tabindex="0"

Ensures that an element is focusable in sequential keyboard navigation.
See how it works
see webflow attributes
Add this attribute
Description
Name
tabindex
copy icon
Value
0
copy icon
MDN docs
Ensures that an element is focusable in sequential keyboard navigation.

In this case, ensures that open/close triggers that are created using non-interactive tags like <div> are still keyboard-actionable.

Applied to:
- Open triggers.
- Close triggers.
How does fs-a11y implement this?
This attribute is added automatically by fs-modal to all the open and close triggers of a modal.

When used in conjunction with role=”button”, fs-a11y ensures that all non-interactive tags like <div> can be actioned using the Space and Enter keys.
navigator arrow

role="button"

Defines a clickable element that triggers an action when activated by the user.
See how it works
see webflow attributes
Add this attribute
Description
Name
role
copy icon
Value
button
copy icon
MDN docs
Defines a clickable element that triggers an action when activated by the user.

As the native <button> tag is not available to use in the Webflow Designer, this attribute ensures that screen readers don’t confuse the trigger for a navigation link when using Webflow’s Button component (the Button component is actually an <a> tag on the published page).

It also ensures that the triggers are correctly recognized by screen readers when they are non-interactive tags like a <div>.

Applied to:
- Open triggers.
- Close triggers.
How does fs-a11y implement this?
This attribute is added automatically by fs-modal to all the open and close triggers of a modal.

When used in conjunction with tabindex=”0”, fs-a11y ensures that all non-interactive tags like <div> can be actioned using the Space and Enter keys.
navigator arrow

aria-roledescription

Defines a more specific description of the role of an element.
See how it works
see webflow attributes
Add this attribute
Description
Name
aria-roledescription
copy icon
Value
open-modal-trigger
copy icon
MDN docs
Defines a more specific description of the role of an element. For example, role="button", which is added to the modal’s open/close triggers.

Applied to:

- Open triggers: description should be human-readable like aria-roledescription="open-modal-trigger".

- Close triggers: description should be human-readable like aria-roledescription="close-modal-trigger".
How does fs-a11y implement this?
This attribute is added automatically by fs-modal to all the open and close triggers of a modal, only if the user hasn’t defined them previously.
navigator arrow

aria-controls="UNIQUE_ID"

Identifies the target element that a trigger controls
See how it works
see webflow attributes
Add this attribute
Description
Name
aria-controls
copy icon
Value
UNIQUE_ID
copy icon
MDN docs
Identifies the target element that a trigger controls. Used to create a cause and effect relationship.

For example, the modal that is being opened/closed when clicking it.

Requires the target element (the modal) to have a unique ID.

Via this attribute, fs-a11y can observe the target element and update the aria-expanded attribute accordingly.

Applied to:
- Open triggers.
- Close triggers.
How does fs-a11y implement this?
This attribute is added automatically by fs-modal to all the open and close triggers of a modal.

fs-modal also ensures that the modals have a unique ID by generating a new one when there are duplicated IDs on a same page.
navigator arrow

aria-expanded="true | false"

Indicates if the element that a trigger controls (defined via aria-controls) is expanded or collapsed.
See how it works
see webflow attributes
Add this attribute
Description
Name
aria-expanded
copy icon
Value
true | false
copy icon
MDN docs
Indicates if the element that a trigger controls (defined via aria-controls) is expanded or collapsed.

For example, indicating if the modal is currently opened or closed.

Applied to:
- Open triggers.
- Close triggers.
How does fs-a11y implement this?
This attribute is added automatically by fs-modal to all the open and close triggers of a modal.

This attribute is updated automatically by fs-a11y when the modal opens / closes.
navigator arrow

aria-haspopup="dialog"

Indicates that the element controlled by the trigger (the modal) is a dialog.
See how it works
see webflow attributes
Add this attribute
Description
Name
aria-haspopup
copy icon
Value
dialog
copy icon
MDN docs
Indicates that the element controlled by the trigger (the modal) is a dialog.

Applied to:
- Open triggers.
- Close triggers.
How does fs-a11y implement this?
This attribute is added automatically by fs-modal to all the open and close triggers of a modal.
navigator arrow

role="dialog"

Defines an element that acts as a dialog. For example, a popup.
See how it works
see webflow attributes
Add this attribute
Description
Name
role
copy icon
Value
dialog
copy icon
MDN docs
Defines an element that acts as a dialog. For example, a popup.

Requires the element to have a label so screen readers can provide contextual information to the users. This can be achieved either by adding an aria-label attribute or an aria-labelledby attribute.

Applied to:
- Modal
How does fs-a11y implement this?
This attribute is added automatically by fs-modal to the modal element.

When used, fs-a11y ensures that the focus management requirements of a dialog are met:

- Automatically focuses the first focusable element in the modal.
- Traps the focus inside the modal.
- When closed, returns the focus back to the open trigger.
- Closes the modal when pressing the Esc key.
navigator arrow

aria-modal="true"

Tells users that the modal dialog must be closed to interact with other content.
See how it works
see webflow attributes
Add this attribute
Description
Name
aria-modal
copy icon
Value
true
copy icon
MDN docs
Tells users with assistive technologies that the ability to interact with, or access, other content on the page requires the modal dialog to be closed.

Applied to:
- Modal
How does fs-a11y implement this?
This attribute is added automatically by fs-modal to the modal element.
navigator arrow

aria-labelledby="LABEL_ID"

Gives more context to an element by pointing to another element that explains it.
See how it works
see webflow attributes
Add this attribute
Description
Name
aria-labelledby
copy icon
Value
LABEL_ID
copy icon
MDN docs
Gives more context to an element by pointing to another element that explains it. For example, a heading inside the modal.

The heading element has some content in it that provides context to the user.

Requires that element to have a unique ID.

Applied to:
- Modal, if aria-label is not set up.
navigator arrow

aria-label="LABEL_TEXT"

Used to give more context to the user when an element is announced by a screen reader
See how it works
see webflow attributes
Add this attribute
Description
Name
aria-label
copy icon
Value
LABEL_TEXT
copy icon
MDN docs
Adds a definition to an interactive element that will be read by screen readers.

Applied to:
- Modal, if aria-labelledby is not set up.
- Open and close triggers, if they don’t contain any readable text. For example, a button with just an X icon should have something like aria-label="Close the modal".

Developer documentation

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.