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.
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.
Add this attribute
Description
Name
tabindex
Value
0
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.
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.
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.
role="button"
Defines a clickable element that triggers an action when activated by the user.
See how it works
Add this attribute
Description
Name
role
Value
button
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.
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.
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.
Add this attribute
Description
Name
aria-roledescription
Value
open-modal-trigger
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".
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.
Add this attribute
Description
Name
aria-controls
Value
UNIQUE_ID
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.
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.
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.
aria-expanded="true | false"
Indicates if the element that a trigger controls (defined via aria-controls) is expanded or collapsed.
See how it works
Add this attribute
Description
Name
aria-expanded
Value
true | false
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.
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.
This attribute is updated automatically by fs-a11y when the modal opens / closes.
aria-haspopup="dialog"
Indicates that the element controlled by the trigger (the modal) is a dialog.
See how it works
Add this attribute
Description
Name
aria-haspopup
Value
dialog
Indicates that the element controlled by the trigger (the modal) is a dialog.
Applied to:
- Open triggers.
- Close triggers.
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.
Add this attribute
Description
Name
role
Value
dialog
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
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.
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.
aria-modal="true"
Tells users that the modal dialog must be closed to interact with other content.
See how it works
Add this attribute
Description
Name
aria-modal
Value
true
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
Applied to:
- Modal
How does fs-a11y implement this?
This attribute is added automatically by fs-modal to the modal element.
aria-labelledby="LABEL_ID"
Gives more context to an element by pointing to another element that explains it.
See how it works
Add this attribute
Description
Name
aria-labelledby
Value
LABEL_ID
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.
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.
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
Add this attribute
Description
Name
aria-label
Value
LABEL_TEXT
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".
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
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
