Accessibility specialists

Accordion test scenarios

These test scenarios are designed to be human readable by using Gherkin syntax. Almost all of them are automated behind the scenes using JavaScript and Playwright, which you can see in the GitHub repo.

Sections: the scenarios are grouped by the same themes as the accessibility requirements in the component documentation, so each section here matches a section there.

Tags: marked by an @ symbol, tags are a way to group related tests. For example, by component name, whether it's an automated or manual test, and the WCAG level and success criterion number.

Steps: every scenario is written with the same shared set of Given, When and Then steps. See the full list of test steps for what each one does.

View accessibility requirements

Adaptability

View accessibility requirements: Adaptability

@accordion @adaptability

Feature: Accordion — Adaptability

Helping people by honouring user preferences and by allowing adaptations to content presentation and time limits

User story:

As a person who needs to adjust the way content is presented, or to adjust timings I want components that my tools can interpret and adjust so that I can navigate, understand, and operate the interface reliably using the technology that supports me.

Background:

Given I load the sample "https://tetralogical.com/resources/accessible-components-library/accordion/examples/default.html"

1.3.4 Orientation

@1.3.4 @aa @automatic

Rule: 1.3.4 Orientation, Level AA

Scenario: Content is not restricted to a single orientation, unless it's essential

When I switch to landscape mode

And I view the rendered ".tl-accordion"

Then it should not lose any content or functionality

1.4.4 Resize Text

@1.4.4 @aa @automatic

Rule: 1.4.4 Resize Text, Level AA

Scenario: Text can scale up to 200% without loss of content or functionality

When I zoom in the browser to 200%

And I view the rendered ".tl-accordion"

Then it should not lose any content or functionality

1.4.10 Reflow

@1.4.10 @aa @automatic

Rule: 1.4.10 Reflow, Level AA

Scenario: Content reflows without horizontal scrolling at 320px wide

When I view the rendered ".tl-accordion"

And I set the viewport to 320px wide

Then it should reflow without requiring horizontal scrolling

@1.4.10 @aa @automatic

Rule: 1.4.10 Reflow, Level AA

Scenario: The accordion reflows without horizontal scrolling at 320px wide, with every section expanded

When I click on ".tl-accordion__toggle-all"

And I view the rendered ".tl-accordion"

And I set the viewport to 320px wide

Then it should reflow without requiring horizontal scrolling

1.4.12 Text Spacing

@1.4.12 @aa @automatic

Rule: 1.4.12 Text Spacing, Level AA

Scenario: No loss of content occurs when line, letter or word spacing is increased

When I view the rendered ".tl-accordion"

And I increase the line height to 1.5 times the font size

And I increase the spacing following paragraphs to 2 times the font size

And I increase the letter spacing to 0.12 times the font size

And I increase the word spacing to 0.16 times the font size

Then it should not lose any content or functionality

1.4.8 Visual Presentation

@1.4.8 @aaa @automatic

Rule: 1.4.8 Visual Presentation, Level AAA

Scenario: Content adjusts as expected when people apply their preferences for text colour, width, alignment, spacing, and size

When I view the rendered ".tl-accordion"

And I apply a custom foreground and background colour using a user stylesheet

And I apply a custom max-width using a user stylesheet

And I apply a custom text-alignment using a user stylesheet

And I apply a custom line height using a user stylesheet

And I apply a custom font size of 200% using a user stylesheet

Then it should not lose any content or functionality

Recommendations

@recommendation @automatic

Rule: Recommendation

Scenario: Content and information remain visible and understandable when using high contrast themes

When I enable "forced colors" mode

And I view the rendered ".tl-accordion"

Then it should not lose any content or functionality

@recommendation @automatic

Rule: Recommendation

Scenario: Collapsed sections are shown when the page is printed, without the Show all sections button

When I preview the page for printing

And I inspect "#accordion-content-2" in the DOM

Then it should have the CSS property "content-visibility" with the value "visible"

And it should have the CSS property "display" with the value "block"

When I inspect ".tl-accordion__toggle-all" in the DOM

Then it should have the CSS property "display" with the value "none"

Animation and movement

View accessibility requirements: Animation and movement

@accordion @animation-and-movement

Feature: Accordion — Animation and movement

Helping people to limit animation or reduce motion within content

No component-specific requirements

Assistive technologies and semantics

View accessibility requirements: Assistive technologies and semantics

@accordion @assistive-technologies-and-semantics

Feature: Accordion — Assistive technologies and semantics

Helping people who use a screen reader or other assistive tech by using appropriate code

User story:

As a person who uses assistive technology I want components that use semantic markup, roles, and states that my tools can interpret so that I can navigate, understand, and operate the interface reliably.

Background:

Given I load the sample "https://tetralogical.com/resources/accessible-components-library/accordion/examples/default.html"

1.3.2 Meaningful Sequence

@1.3.2 @a @automatic

Rule: 1.3.2 Meaningful Sequence, Level A

Scenario: The order of content in the accessibility tree matches the logical reading order

When I inspect "#accordion-content-1" in the DOM

Then it is positioned after the ".tl-accordion__section:nth-of-type(1) > button" element in the DOM

When I inspect ".tl-accordion__section:nth-of-type(2) > button" in the DOM

Then it is positioned after the "#accordion-content-1" element in the DOM

@1.3.2 @a @automatic

Rule: 1.3.2 Meaningful Sequence, Level A

Scenario: The Show all sections button comes before the sections it controls

When I inspect ".tl-accordion__section:nth-of-type(1) > button" in the DOM

Then it is positioned after the ".tl-accordion__toggle-all" element in the DOM

2.5.3 Label in Name

@2.5.3 @a @automatic

Rule: 2.5.3 Label in Name, Level A

Scenario Outline: Each trigger has an accessible name that matches or includes the visible label

When I view the rendered "<element>"

Then it should have an accessible name which contains the visible label "<label>"

Examples:

elementlabel
.tl-accordion__section:nth-of-type(1) > buttonWhat is an accessibility audit?
.tl-accordion__section:nth-of-type(2) > buttonHow long does an audit take?
.tl-accordion__section:nth-of-type(3) > buttonWhat do we get at the end?

@2.5.3 @a @automatic

Rule: 2.5.3 Label in Name, Level A

Scenario: The Show all sections button has an accessible name that matches or includes the visible label

When I view the rendered ".tl-accordion__toggle-all"

Then it should have an accessible name which contains the visible label "Show all sections"

4.1.2 Name, Role, Value

@4.1.2 @a @automatic

Rule: 4.1.2 Name, Role, Value, Level A

Scenario: Each trigger has an accessible name and a role of button

When I inspect ".tl-accordion__section:nth-of-type(1) > button" in the Accessibility Tree

Then it should have an accessible name

And its accessible name should be "What is an accessibility audit?"

And it should have an accessible role of "button"

And it should use the tag "button"

@4.1.2 @a @automatic

Rule: 4.1.2 Name, Role, Value, Level A

Scenario: The Show all sections button has an accessible name and a role of button

When I inspect ".tl-accordion__toggle-all" in the Accessibility Tree

Then it should have an accessible name

And its accessible name should be "Show all sections"

And it should have an accessible role of "button"

And it should use the tag "button"

@4.1.2 @a @automatic

Rule: 4.1.2 Name, Role, Value, Level A

Scenario: The one-at-a-time variant opens with its first section expanded, and the rest collapsed

Given I load the sample "https://tetralogical.com/resources/accessible-components-library/accordion/examples/one-at-a-time.html"

When I inspect ".tl-accordion__section:nth-of-type(1) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "true"

When I inspect "#accordion-one-at-a-time-content-1" in the DOM

Then it should not have the attribute "hidden"

When I inspect ".tl-accordion__section:nth-of-type(2) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

When I inspect ".tl-accordion__section:nth-of-type(3) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

When I inspect "#accordion-one-at-a-time-content-3" in the DOM

Then it should have the attribute "hidden"

@4.1.2 @a @automatic

Rule: 4.1.2 Name, Role, Value, Level A

Scenario: In the one-at-a-time variant, opening one section collapses the section which was already open

Given I load the sample "https://tetralogical.com/resources/accessible-components-library/accordion/examples/one-at-a-time.html"

When I click on ".tl-accordion__section:nth-of-type(2) > button"

And I inspect ".tl-accordion__section:nth-of-type(2) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "true"

When I inspect ".tl-accordion__section:nth-of-type(1) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

When I inspect "#accordion-one-at-a-time-content-1" in the DOM

Then it should have the attribute "hidden"

@4.1.2 @a @automatic

Rule: 4.1.2 Name, Role, Value, Level A

Scenario: An accordion opens with every section collapsed

When I inspect ".tl-accordion__section:nth-of-type(1) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

When I inspect ".tl-accordion__section:nth-of-type(2) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

When I inspect ".tl-accordion__section:nth-of-type(3) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

When I inspect "#accordion-content-1" in the DOM

Then it should have the attribute "hidden"

@4.1.2 @a @automatic

Rule: 4.1.2 Name, Role, Value, Level A

Scenario: Opening one section leaves the others as they were

When I click on ".tl-accordion__section:nth-of-type(1) > button"

And I click on ".tl-accordion__section:nth-of-type(2) > button"

And I inspect ".tl-accordion__section:nth-of-type(1) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "true"

When I inspect ".tl-accordion__section:nth-of-type(2) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "true"

When I inspect "#accordion-content-1" in the DOM

Then it should not have the attribute "hidden"

@4.1.2 @a @automatic

Rule: 4.1.2 Name, Role, Value, Level A

Scenario: The Show all sections button expands every section, and its name and state change to Hide all sections, expanded

When I click on ".tl-accordion__toggle-all"

And I inspect ".tl-accordion__section:nth-of-type(1) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "true"

When I inspect ".tl-accordion__section:nth-of-type(2) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "true"

When I inspect ".tl-accordion__section:nth-of-type(3) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "true"

When I inspect "#accordion-content-3" in the DOM

Then it should not have the attribute "hidden"

When I inspect ".tl-accordion__toggle-all" in the Accessibility Tree

Then its accessible name should be "Hide all sections"

When I inspect ".tl-accordion__toggle-all" in the DOM

Then it should have the attribute "aria-expanded" with the value "true"

@4.1.2 @a @automatic

Rule: 4.1.2 Name, Role, Value, Level A

Scenario: The Show all sections button only changes to Hide all sections once every section is open

When I click on ".tl-accordion__section:nth-of-type(2) > button"

And I inspect ".tl-accordion__toggle-all" in the Accessibility Tree

Then its accessible name should be "Show all sections"

When I inspect ".tl-accordion__toggle-all" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

When I click on ".tl-accordion__section:nth-of-type(1) > button"

And I click on ".tl-accordion__section:nth-of-type(3) > button"

And I inspect ".tl-accordion__toggle-all" in the Accessibility Tree

Then its accessible name should be "Hide all sections"

When I inspect ".tl-accordion__toggle-all" in the DOM

Then it should have the attribute "aria-expanded" with the value "true"

When I click on ".tl-accordion__section:nth-of-type(2) > button"

And I inspect ".tl-accordion__toggle-all" in the Accessibility Tree

Then its accessible name should be "Show all sections"

When I inspect ".tl-accordion__toggle-all" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

@4.1.2 @a @automatic

Rule: 4.1.2 Name, Role, Value, Level A

Scenario: The Hide all sections button collapses every section, and its name and state change back to Show all sections, collapsed

When I click on ".tl-accordion__toggle-all"

And I click on ".tl-accordion__toggle-all"

And I inspect ".tl-accordion__section:nth-of-type(1) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

When I inspect ".tl-accordion__section:nth-of-type(2) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

When I inspect ".tl-accordion__section:nth-of-type(3) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

When I inspect "#accordion-content-1" in the DOM

Then it should have the attribute "hidden"

When I inspect ".tl-accordion__toggle-all" in the Accessibility Tree

Then its accessible name should be "Show all sections"

When I inspect ".tl-accordion__toggle-all" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

@4.1.2 @a @automatic

Rule: 4.1.2 Name, Role, Value, Level A

Scenario: The expanded or collapsed state of the Show all sections button is conveyed to screen readers

When I inspect ".tl-accordion__toggle-all" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

When I click on ".tl-accordion__toggle-all"

And I inspect ".tl-accordion__toggle-all" in the DOM

Then it should have the attribute "aria-expanded" with the value "true"

Recommendations

@recommendation @automatic

Rule: Recommendation

Scenario: The trigger is associated with the content it controls, using the aria-controls attribute

When I inspect ".tl-accordion__section:nth-of-type(1) > button" in the DOM

Then it should have the attribute "aria-controls" with the value "accordion-content-1"

When I inspect "#accordion-content-1" in the DOM

Then it should have the attribute "id" with the value "accordion-content-1"

@recommendation @automatic

Rule: Recommendation

Scenario: The Show all sections button is associated with every section it controls, using the aria-controls attribute

When I inspect ".tl-accordion__toggle-all" in the DOM

Then it should have the attribute "aria-controls" with the value "accordion-content-1 accordion-content-2 accordion-content-3"

@recommendation @automatic

Rule: Recommendation

Scenario Outline: Markup can be parsed without errors

Given I load the sample "https://tetralogical.com/resources/accessible-components-library/accordion/examples/<variant>.html"

When I inspect ".tl-accordion" in the DOM

Then it should use valid HTML with no parsing errors

Examples:

variant
default
one-at-a-time

Colour and contrast

View accessibility requirements: Colour and contrast

@accordion @colour-and-contrast

Feature: Accordion — Colour and contrast

Helping people who struggle with colour perception or low vision

User story:

As a person with low vision or colour vision deficiency I want components with sufficient contrast and that don't rely solely on colour so that I can perceive and understand all content and interface elements.

Background:

Given I load the sample "https://tetralogical.com/resources/accessible-components-library/accordion/examples/default.html"

1.4.3 Contrast (Minimum)

@1.4.3 @aa @automatic

Rule: 1.4.3 Contrast (Minimum), Level AA

Scenario: A collapsed trigger has a contrast ratio of at least 4.5:1 against the background

When I view the rendered ".tl-accordion__section:nth-of-type(2) > button"

Then its text should have a contrast ratio of "4.5" against its background

@1.4.3 @aa @automatic

Rule: 1.4.3 Contrast (Minimum), Level AA

Scenario: An expanded trigger and its content have a contrast ratio of at least 4.5:1 against the background

When I click on ".tl-accordion__section:nth-of-type(1) > button"

And I view the rendered ".tl-accordion__section:nth-of-type(1) > button"

Then its text should have a contrast ratio of "4.5" against its background

When I view the rendered "#accordion-content-1 p"

Then its text should have a contrast ratio of "4.5" against its background

@1.4.3 @aa @automatic @darkmode

Rule: 1.4.3 Contrast (Minimum), Level AA

Scenario: Darkmode: An expanded trigger and its content have a contrast ratio of at least 4.5:1 against the background

When I click on ".tl-accordion__section:nth-of-type(1) > button"

And I view the rendered ".tl-accordion__section:nth-of-type(1) > button"

And I enable "dark" mode

Then its text should have a contrast ratio of "4.5" against its background

When I view the rendered "#accordion-content-1 p"

Then its text should have a contrast ratio of "4.5" against its background

@1.4.3 @aa @automatic

Rule: 1.4.3 Contrast (Minimum), Level AA

Scenario: The Show all sections button has a contrast ratio of at least 4.5:1 against the background

When I view the rendered ".tl-accordion__toggle-all"

Then its text should have a contrast ratio of "4.5" against its background

@1.4.3 @aa @automatic @darkmode

Rule: 1.4.3 Contrast (Minimum), Level AA

Scenario: Darkmode: The Show all sections button has a contrast ratio of at least 4.5:1 against the background

When I view the rendered ".tl-accordion__toggle-all"

And I enable "dark" mode

Then its text should have a contrast ratio of "4.5" against its background

1.4.11 Non-text Contrast

@1.4.11 @aa @automatic

Rule: 1.4.11 Non-text Contrast, Level AA

Scenario: The icon which indicates the state of a section has a contrast ratio of at least 3:1 against the background

When I view the rendered ".tl-accordion__section:nth-of-type(2) > button svg"

Then its text should have a contrast ratio of "3" against its background

@1.4.11 @aa @automatic @darkmode

Rule: 1.4.11 Non-text Contrast, Level AA

Scenario: Darkmode: The icon which indicates the state of a section has a contrast ratio of at least 3:1 against the background

When I view the rendered ".tl-accordion__section:nth-of-type(2) > button svg"

And I enable "dark" mode

Then its text should have a contrast ratio of "3" against its background

@1.4.11 @aa @automatic

Rule: 1.4.11 Non-text Contrast, Level AA

Scenario: The Show all sections button's icon has a contrast ratio of at least 3:1 against the background

When I view the rendered ".tl-accordion__toggle-all svg"

Then its text should have a contrast ratio of "3" against its background

@1.4.11 @aa @automatic @darkmode

Rule: 1.4.11 Non-text Contrast, Level AA

Scenario: Darkmode: The Show all sections button's icon has a contrast ratio of at least 3:1 against the background

When I view the rendered ".tl-accordion__toggle-all svg"

And I enable "dark" mode

Then its text should have a contrast ratio of "3" against its background

@1.4.11 @aa @automatic

Rule: 1.4.11 Non-text Contrast, Level AA

Scenario: The custom focus style of a trigger has a contrast ratio of at least 3:1 against the background

When I focus ".tl-accordion__section:nth-of-type(1) > button" using a keyboard

Then it should have a visible focus indicator

And the focus indicator should have a contrast ratio of 3:1 against its background

@1.4.11 @aa @automatic

Rule: 1.4.11 Non-text Contrast, Level AA

Scenario: The custom focus style of the Show all sections button has a contrast ratio of at least 3:1 against the background

When I focus ".tl-accordion__toggle-all" using a keyboard

Then it should have a visible focus indicator

And the focus indicator should have a contrast ratio of 3:1 against its background

1.4.6 Contrast (Enhanced)

@1.4.6 @aaa @automatic

Rule: 1.4.6 Contrast (Enhanced), Level AAA

Scenario: An expanded trigger and its content have a contrast ratio of at least 7:1 against the background

When I click on ".tl-accordion__section:nth-of-type(1) > button"

And I view the rendered ".tl-accordion__section:nth-of-type(1) > button"

Then its text should have a contrast ratio of "7" against its background

When I view the rendered "#accordion-content-1 p"

Then its text should have a contrast ratio of "7" against its background

@1.4.6 @aaa @automatic @darkmode

Rule: 1.4.6 Contrast (Enhanced), Level AAA

Scenario: Darkmode: An expanded trigger and its content have a contrast ratio of at least 7:1 against the background

When I click on ".tl-accordion__section:nth-of-type(1) > button"

And I view the rendered ".tl-accordion__section:nth-of-type(1) > button"

And I enable "dark" mode

Then its text should have a contrast ratio of "7" against its background

When I view the rendered "#accordion-content-1 p"

Then its text should have a contrast ratio of "7" against its background

@1.4.6 @aaa @automatic

Rule: 1.4.6 Contrast (Enhanced), Level AAA

Scenario: The Show all sections button has a contrast ratio of at least 7:1 against the background

When I view the rendered ".tl-accordion__toggle-all"

Then its text should have a contrast ratio of "7" against its background

Consistency and predictability

View accessibility requirements: Consistency and predictability

@accordion @consistency-and-predictability

Feature: Accordion — Consistency and predictability

Helping people by keeping functionality and content consistent and predictable

User story:

As a person who benefits from consistent and predictable interfaces I want components that behave in expected ways and don't cause unexpected changes so that I can navigate and interact with confidence.

Background:

Given I load the sample "https://tetralogical.com/resources/accessible-components-library/accordion/examples/default.html"

3.2.1 On Focus

@3.2.1 @a @automatic

Rule: 3.2.1 On Focus, Level A

Scenario: A trigger does not initiate a change of context when it receives keyboard focus

When I focus ".tl-accordion__section:nth-of-type(1) > button" using a keyboard

Then it should NOT navigate to a new page

When I inspect ".tl-accordion__section:nth-of-type(1) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

@3.2.1 @a @automatic

Rule: 3.2.1 On Focus, Level A

Scenario: The Show all sections button does not initiate a change of context when it receives keyboard focus

When I focus ".tl-accordion__toggle-all" using a keyboard

Then it should NOT navigate to a new page

When I inspect ".tl-accordion__section:nth-of-type(1) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

3.2.2 On Input

@3.2.2 @a @automatic

Rule: 3.2.2 On Input, Level A

Scenario: Expanding a section does not result in an unexpected change of context

When I focus ".tl-accordion__section:nth-of-type(2) > button"

And I press the "Enter" key once

Then it should NOT navigate to a new page

And ".tl-accordion__section:nth-of-type(2) > button" should be focused

When I inspect ".tl-accordion__section:nth-of-type(2) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "true"

@3.2.2 @a @automatic

Rule: 3.2.2 On Input, Level A

Scenario: Collapsing a section does not result in an unexpected change of context

Given I load the sample "https://tetralogical.com/resources/accessible-components-library/accordion/examples/one-at-a-time.html"

When I focus ".tl-accordion__section:nth-of-type(1) > button"

And I press the "Enter" key once

Then it should NOT navigate to a new page

And ".tl-accordion__section:nth-of-type(1) > button" should be focused

When I inspect ".tl-accordion__section:nth-of-type(1) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

@3.2.2 @a @automatic

Rule: 3.2.2 On Input, Level A

Scenario: Showing and hiding every section does not result in an unexpected change of context

When I focus ".tl-accordion__toggle-all"

And I press the "Enter" key once

Then it should NOT navigate to a new page

And ".tl-accordion__toggle-all" should be focused

When I press the "Enter" key once

Then it should NOT navigate to a new page

And ".tl-accordion__toggle-all" should be focused

Recommendations

@recommendation @automatic

Rule: Recommendation

Scenario: The chevron icon is inside each trigger, before its label

When I inspect ".tl-accordion__section:nth-of-type(1) > button svg" in the DOM

Then it should be nested within the ".tl-accordion__section:nth-of-type(1) > button" element

And it should use the tag "svg"

@recommendation @automatic

Rule: Recommendation

Scenario: The chevron icon is inside the Show all sections button, before its label

When I inspect ".tl-accordion__toggle-all span" in the DOM

Then it is positioned after the ".tl-accordion__toggle-all svg" element in the DOM

And it should be nested within the ".tl-accordion__toggle-all" element

@recommendation @automatic

Rule: Recommendation

Scenario Outline: The down pointing chevron is to the left of each trigger's label

When I view the rendered "<element> svg"

Then it should be to the left of the text in the "<element>" element

Examples:

element
.tl-accordion__toggle-all
.tl-accordion__section:nth-of-type(1) > button
.tl-accordion__section:nth-of-type(2) > button
.tl-accordion__section:nth-of-type(3) > button

@recommendation @automatic

Rule: Recommendation

Scenario: In the one-at-a-time variant, activating the open section collapses it, leaving no section open

Given I load the sample "https://tetralogical.com/resources/accessible-components-library/accordion/examples/one-at-a-time.html"

When I click on ".tl-accordion__section:nth-of-type(1) > button"

And I inspect ".tl-accordion__section:nth-of-type(1) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

When I inspect "#accordion-one-at-a-time-content-1" in the DOM

Then it should have the attribute "hidden"

When I inspect ".tl-accordion__section:nth-of-type(2) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

Images and media

View accessibility requirements: Images and media

@accordion @images-and-media

Feature: Accordion — Images and media

Helping people to access (and remove distractions caused by) image, video and audio content

User story:

As a person who cannot see images I want appropriate text alternatives for images so that I can access the same information as everyone else.

Background:

Given I load the sample "https://tetralogical.com/resources/accessible-components-library/accordion/examples/default.html"

1.1.1 Non-text Content

@1.1.1 @a @automatic

Rule: 1.1.1 Non-text Content, Level A

Scenario: The icon is hidden from screen readers, because the trigger has a visible text label

When I inspect ".tl-accordion__section:nth-of-type(1) > button svg" in the DOM

Then it should have the attribute "aria-hidden" with the value "true"

When I inspect ".tl-accordion__section:nth-of-type(1) > button" in the Accessibility Tree

Then its accessible name should be "What is an accessibility audit?"

@1.1.1 @a @automatic

Rule: 1.1.1 Non-text Content, Level A

Scenario: The Show all sections button's icon is hidden from screen readers, because the button has a visible text label

When I inspect ".tl-accordion__toggle-all svg" in the DOM

Then it should have the attribute "aria-hidden" with the value "true"

When I inspect ".tl-accordion__toggle-all" in the Accessibility Tree

Then its accessible name should be "Show all sections"

@1.1.1 @a @automatic

Rule: 1.1.1 Non-text Content, Level A

Scenario: If a trigger uses an icon without a visible text label, the icon has a text description

When I view the rendered ".tl-accordion"

Then any icon should have a text description, or be hidden from assistive technologies

Input assistance

View accessibility requirements: Input assistance

@accordion @input-assistance

Feature: Accordion — Input assistance

Helping people to complete forms, enter data and pass authentication

No component-specific requirements

Keyboard

View accessibility requirements: Keyboard

@accordion @keyboard

Feature: Accordion — Keyboard

Helping people who use a keyboard

User story:

As a keyboard user I want components that follow a logical tab order and provide visible, predictable focus states so that I can move through the interface efficiently and operate every feature without using a mouse.

Background:

Given I load the sample "https://tetralogical.com/resources/accessible-components-library/accordion/examples/default.html"

2.1.1 Keyboard

@2.1.1 @a @automatic

Rule: 2.1.1 Keyboard, Level A

Scenario: A trigger can be focused using the Tab key

When I focus ".tl-accordion__section:nth-of-type(1) > button" using a keyboard

Then ".tl-accordion__section:nth-of-type(1) > button" should be focused

@2.1.1 @a @automatic

Rule: 2.1.1 Keyboard, Level A

Scenario: A trigger can be activated using the Enter key

When I focus ".tl-accordion__section:nth-of-type(2) > button"

And I press the "Enter" key once

And I inspect ".tl-accordion__section:nth-of-type(2) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "true"

When I press the "Enter" key once

And I inspect ".tl-accordion__section:nth-of-type(2) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

@2.1.1 @a @automatic

Rule: 2.1.1 Keyboard, Level A

Scenario: A trigger can be activated using the Space key

When I focus ".tl-accordion__section:nth-of-type(2) > button"

And I press the "Space" key once

And I inspect ".tl-accordion__section:nth-of-type(2) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "true"

When I press the "Space" key once

And I inspect ".tl-accordion__section:nth-of-type(2) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

@2.1.1 @a @automatic

Rule: 2.1.1 Keyboard, Level A

Scenario: The Show all sections button can be focused using the Tab key

When I focus ".tl-accordion__toggle-all" using a keyboard

Then ".tl-accordion__toggle-all" should be focused

@2.1.1 @a @automatic

Rule: 2.1.1 Keyboard, Level A

Scenario: The Show all sections button can be activated using the Enter key

When I focus ".tl-accordion__toggle-all"

And I press the "Enter" key once

And I inspect ".tl-accordion__section:nth-of-type(1) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "true"

When I press the "Enter" key once

And I inspect ".tl-accordion__section:nth-of-type(1) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

@2.1.1 @a @automatic

Rule: 2.1.1 Keyboard, Level A

Scenario: The Show all sections button can be activated using the Space key

When I focus ".tl-accordion__toggle-all"

And I press the "Space" key once

And I inspect ".tl-accordion__section:nth-of-type(3) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "true"

When I press the "Space" key once

And I inspect ".tl-accordion__section:nth-of-type(3) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

2.1.2 No Keyboard Trap

@2.1.2 @a @automatic

Rule: 2.1.2 No Keyboard Trap, Level A

Scenario: The accordion does not trap focus going forwards

When I focus ".tl-accordion__section:nth-of-type(3) > button"

And I press the "TAB" key once

Then the focus should not be on a ".tl-accordion__section > button" element

@2.1.2 @a @automatic

Rule: 2.1.2 No Keyboard Trap, Level A

Scenario: The accordion does not trap focus going backwards

When I focus ".tl-accordion__section:nth-of-type(1) > button"

And I hold the "SHIFT" key

And I press the "TAB" key once

Then the focus should not be on a ".tl-accordion__section > button" element

@2.1.2 @a @automatic

Rule: 2.1.2 No Keyboard Trap, Level A

Scenario: The accordion does not trap focus once every section is expanded

When I click on ".tl-accordion__toggle-all"

And I focus ".tl-accordion__section:nth-of-type(3) > button"

And I press the "TAB" key once

Then the focus should not be on a ".tl-accordion__section > button" element

2.4.3 Focus Order

@2.4.3 @a @automatic

Rule: 2.4.3 Focus Order, Level A

Scenario Outline: In the one-at-a-time variant, the triggers receive focus in a logical order

Given I load the sample "https://tetralogical.com/resources/accessible-components-library/accordion/examples/one-at-a-time.html"

When I focus "<element>"

And I press the "TAB" key once

Then "<next_element>" should be focused

Examples:

elementnext_element
.tl-accordion__section:nth-of-type(2) > button.tl-accordion__section:nth-of-type(3) > button

@2.4.3 @a @automatic

Rule: 2.4.3 Focus Order, Level A

Scenario: Focus moves into the expanded section before it reaches the next trigger

Given I load the sample "https://tetralogical.com/resources/accessible-components-library/accordion/examples/one-at-a-time.html"

When I focus ".tl-accordion__section:nth-of-type(1) > button"

And I press the "TAB" key once

Then "#accordion-one-at-a-time-content-1 .demo-link" should be focused

When I press the "TAB" key once

Then ".tl-accordion__section:nth-of-type(2) > button" should be focused

@2.4.3 @a @automatic

Rule: 2.4.3 Focus Order, Level A

Scenario: The content of a collapsed section is not in the tab order

Given I load the sample "https://tetralogical.com/resources/accessible-components-library/accordion/examples/one-at-a-time.html"

When I click on ".tl-accordion__section:nth-of-type(1) > button"

And I focus ".tl-accordion__section:nth-of-type(1) > button"

And I press the "TAB" key once

Then ".tl-accordion__section:nth-of-type(2) > button" should be focused

@2.4.3 @a @automatic

Rule: 2.4.3 Focus Order, Level A

Scenario Outline: The Show all sections button and the triggers receive focus in a logical order

When I focus "<element>"

And I press the "TAB" key once

Then "<next_element>" should be focused

Examples:

elementnext_element
.tl-accordion__toggle-all.tl-accordion__section:nth-of-type(1) > button
.tl-accordion__section:nth-of-type(1) > button.tl-accordion__section:nth-of-type(2) > button
.tl-accordion__section:nth-of-type(2) > button.tl-accordion__section:nth-of-type(3) > button

2.4.7 Focus Visible

@2.4.7 @aa @automatic

Rule: 2.4.7 Focus Visible, Level AA

Scenario: A trigger has a visible focus indicator when it receives keyboard focus

When I focus ".tl-accordion__section:nth-of-type(1) > button" using a keyboard

Then it should have a visible focus indicator

@2.4.7 @aa @automatic

Rule: 2.4.7 Focus Visible, Level AA

Scenario: The Show all sections button has a visible focus indicator when it receives keyboard focus

When I focus ".tl-accordion__toggle-all" using a keyboard

Then it should have a visible focus indicator

2.4.11 Focus Not Obscured (Minimum)

@2.4.11 @aa @automatic

Rule: 2.4.11 Focus Not Obscured (Minimum), Level AA

Scenario Outline: The triggers and the Show all sections button are not fully hidden by other content when they receive keyboard focus

When I focus "<element>" using a keyboard

Then it should have a visible focus indicator

And its focus indicator should be at least partially visible

Examples:

element
.tl-accordion__toggle-all
.tl-accordion__section:nth-of-type(1) > button

2.1.3 Keyboard (No Exception)

@2.1.3 @aaa @automatic

Rule: 2.1.3 Keyboard (No Exception), Level AAA

Scenario: The accordion component is accessible by keyboard, with no exceptions

When I view the rendered ".tl-accordion"

Then every interactive control should be reachable using the keyboard

2.4.12 Focus Not Obscured (Enhanced)

@2.4.12 @aaa @automatic

Rule: 2.4.12 Focus Not Obscured (Enhanced), Level AAA

Scenario Outline: The triggers and the Show all sections button are fully visible when they receive keyboard focus

When I focus "<element>" using a keyboard

Then it should have a visible focus indicator

And its focus indicator should be fully visible

Examples:

element
.tl-accordion__toggle-all
.tl-accordion__section:nth-of-type(1) > button

2.4.13 Focus Appearance

@2.4.13 @aaa @automatic

Rule: 2.4.13 Focus Appearance, Level AAA

Scenario Outline: The custom focus style has a solid 2 pixel thick perimeter, or equivalent, and a contrast ratio of at least 3:1

When I focus "<element>" using a keyboard

Then it should have a visible focus indicator

And the focus indicator should have a contrast ratio of 3:1 against its background

And its focus indicator should have a minimum perimiter thickness of 2px

Examples:

element
.tl-accordion__toggle-all
.tl-accordion__section:nth-of-type(1) > button

Pointer and touch

View accessibility requirements: Pointer and touch

@accordion @pointer-and-touch

Feature: Accordion — Pointer and touch

Helping people use single pointer or touch interactions

User story:

As a person using touch or pointer input I want components with accessible gestures, adequate target sizes, and predictable interactions so that I can accurately interact with all functionality.

Background:

Given I load the sample "https://tetralogical.com/resources/accessible-components-library/accordion/examples/default.html"

2.5.2 Pointer Cancellation

@2.5.2 @a @automatic

Rule: 2.5.2 Pointer Cancellation, Level A

Scenario: A trigger is activated on the up event, not on the down event

When I press the mouse down on ".tl-accordion__section:nth-of-type(2) > button"

And I inspect ".tl-accordion__section:nth-of-type(2) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

When I inspect "#accordion-content-2" in the DOM

Then it should have the attribute "hidden"

@2.5.2 @a @automatic

Rule: 2.5.2 Pointer Cancellation, Level A

Scenario: The Show all sections button is activated on the up event, not on the down event

When I press the mouse down on ".tl-accordion__toggle-all"

And I inspect ".tl-accordion__section:nth-of-type(1) > button" in the DOM

Then it should have the attribute "aria-expanded" with the value "false"

When I inspect "#accordion-content-1" in the DOM

Then it should have the attribute "hidden"

2.5.8 Target Size (Minimum)

@2.5.8 @aa @automatic

Rule: 2.5.8 Target Size (Minimum), Level AA

Scenario Outline: The triggers and the Show all sections button have a target area size of at least 24 by 24 pixels

When I view the rendered "<element>"

Then it should have a width and height of at least 24px

Examples:

element
.tl-accordion__toggle-all
.tl-accordion__section:nth-of-type(1) > button

2.5.5 Target Size (Enhanced)

@2.5.5 @aaa @automatic

Rule: 2.5.5 Target Size (Enhanced), Level AAA

Scenario Outline: The triggers and the Show all sections button have a target area size of at least 44 by 44 pixels

When I view the rendered "<element>"

Then it should have a width and height of at least 44px

Examples:

element
.tl-accordion__toggle-all
.tl-accordion__section:nth-of-type(1) > button
Back to top

We like to listen

Wherever you are in your accessibility journey, get in touch if you have a project or idea.

hello@tetralogical.com