Accessibility (a11y) Documentation

  • What accessibility information should be more explicitly called out on the Paragon documentation website (e.g., aria attributes, etc.).


ActionRow

no a11y attributes

Alert

Accessibility attributes

Attribute

Description

Attribute

Description

role="alert" editable

Used to communicate an important and usually time-sensitive message to the user.

Accessible text

Element

Text

Element

Text

Close button

Dismiss

Alert.Link

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Enter

Triggers the button <Alert.Link /> action.

Shift+Tab

Moves focus to the next focusable element.

AlertModal

Accessibility attributes

Attribute

Description

Attribute

Description

role="dialog" editable

Used to mark up an HTML-based application dialog that separates content or UI from the rest of the web application or page.

aria-label editable

Defines a string value that labels an interactive element.

aria-hidden

Indicates whether the element is exposed to an accessibility API.

Keyboard support

Key

Description

Key

Description

Escape

Closes the modal window.

Annotation

no a11y attributes

Avatar

Accessibility attributes

Attribute

Description

Attribute

Description

alt editable

Used to provide alternative text for an image.

AvatarButton

Accessibility attributes

Attribute

Description

Attribute

Description

type="button" editable

Indicates that the element is a button.

alt (Icon)

Used to provide alternative text for an image.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Shift+Tab

Moves focus to the next focusable element.

Space

Triggers the button action.

Enter

Triggers the button action.

Badge

no a11y attributes

Breadcrumbs

Accessibility attributes

Attribute

Description

Attribute

Description

aria-label editable

Defines a string value that labels an interactive element.

role="presentation"

Indicates that the element should not be considered part of the available semantics.

aria-current

Used to indicate the current element or page in the navigation context.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Shift+Tab

Moves focus to the next focusable element.

Enter

Triggers the button action.

Bubble

no a11y attributes

Button

Accessibility attributes

Attribute

Description

Attribute

Description

type="button" editable

Indicates that the element is a button.

aria-label editable

Defines a string value that labels an interactive element.

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Shift+Tab

Moves focus to the next focusable element.

Enter

Triggers the button action.

Space

Triggers the button action.

ButtonGroup

Accessibility attributes

Attribute

Description

Attribute

Description

role="group" editable

Used to create a group of elements that are visually and functionally related together.

aria-label editable

Defines a string value that labels an interactive element.

role="toolbar" editable

Indicates that a certain element is a toolbar.

Card

Card.ImageCap

Accessibility attributes

Attribute

Description

Attribute

Description

alt editable

Used to provide alternative text for an image.

loading="eager"

Is used to tell the browser to download the image immediately, without waiting for the entire page to be fully loaded.

CardCarusel

Accessible text

Element

Text

Element

Text

Next button

Scroll to next

Previous button

Scroll to previous

Clickable card

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Shift+Tab

Moves focus to the next focusable element.

CardCarousel (Navigation arrows)

Keyboard support

Key

Description

Key

Description

Tab

Moves focus to the next focusable element.

Shift+Tab

Moves focus to the next focusable element.

Enter

Triggers the button action.

Space

Triggers the button action.

CardCarousel (Cards inside the carousel)

Keyboard support

Key

Description

Key

Description

Tab+RightArrow

Moves focus to the next carousel element.

Tab+LeftArrow

Moves focus to the next carousel element.

Carousel

Accessibility attributes

Attribute

Description

Attribute

Description