RE: Aria role="heading" and aria-level inside buttons

Bernat,

 

The typical accordion pattern involves several heading-buttons at the same level each with associated content, but only one of the heading-buttons is expanded at one time … the rationale for this is is that it allows people to focus on one topic at a time without being overwhelmed by a wall of text … 

 

a disclosure on the other hand is a single heading-button or show/hide that rather than being a member of a whole widget like the heading-buttons in an accordion is a member of another widget. 

 

Furthermore, the expand/collapse state of each heading-button needs to be made available programmatically as does the relationship between a heading-button and the content whose visibility is being toggled. 

 

The ARIA authoring practices Guide example provides the appropriate code.

 

If I understand your code snippet below correctly, there are a series of nested heading-buttons  of which only the last has any associated content? 

 

I can’t think of a situation in which that would be required or appropriate, and certainly cannot recall an instance of such a pattern in the 27 years I have been using the web. 

 

sounds like you need to make a case for chucking this plugin?

 

Cheers,

Adam 

 

 

From: Bernat Lleonart <bernat.lleonart@protonmail.ch> 
Sent: Tuesday, July 9, 2024 1:19 PM
To: Benjamin Love <benjamin.james.love@gmail.com>
Cc: Bernat Lleonart <bernat.lleonart@proton.me>; w3c-wai-ig@w3.org
Subject: Re: Aria role="heading" and aria-level inside buttons

 

Hi,

 

I'm using headings because there are accordions nested inside other accordions. Finally I've followed this structure:

 

<h1>Main title</h1>

<div class="accordion">

    <h2 class="accordion-header">

        <button type="button">Heading 2</button>

    </h2>

    <div class="accordion-content">

        <div class="accordion">

            <h3 class="accordion-header">

                <button type="button">Heading 3</button>

            </h3>

            <div class="accordion-content">

                <h4>Heading 4</h4>

                <p>Lorem ipsum dolor sit amet.</p>

                <h4>Heading 4</h4>

                <p>Lorem ipsum dolor sit amet.</p>

            </div>

        </div>

    </div>

</div>

 

Thanks.

 

--

Bernat Lleonart

 

Enviat amb el correu segur de Proton Mail <https://proton.me/> . 

 

El dimarts, 9 de juliol 2024 a les 02:57, Benjamin Love <benjamin.james.love@gmail.com> va escriure:



What is motivating you to use headings in this context?

 

Headings are meaningful labels noting divisions in blocks of content (often when there is no other reliable structural logic in place to signal such divisions). In other words, what is telling you to introduce a heading structure?

 

I do not have access to the specific build, but for example, if this was a “list” of entries that did not include multi-sectioned subcontent within the expanded region, than adding in the functional element (button in this case) is a meaningful enough marker/label… I think.

 

If your expanded region content contains “subsections” requiring headings, however, I would apply H2 and position the collapse / expand functional element (button) after/within heading.

 

This sounds like it is about selecting an appropriate plugin to support the function. I would go with bootstrap or something akin. All the requirements are “out of the box.”

 

I’d have to see the code, but if there’s a reliable pattern, you can use JS to iterate over the plugin’s output to “re-construct.” It looks like it uses class @accordion-header to mark button labels. I would use JS to copy button text to a new header element (h2), insert a new button (removing old) inside new heading and apply an aria-controls to each button pointing to unique identifier of the container it toggles??? Maybe?

 

Again, another plugin??? But maybe that’s not possible.

 

On Sat, Jul 6, 2024 at 11:24 PM Bernat Lleonart <bernat.lleonart@proton.me <mailto:bernat.lleonart@proton.me> > wrote:

Hi

 

I have this markup, and although the validator doesn't show any error, I'd like to know if it would create any problem to users with assistive technologies:

 

<h1>Main heading</h1>

<button><span role="heading" aria-level="2">Button with heading 2</span></button>

<button><span role="heading" aria-level="3">Button with heading 3</span></button>

<h4>Heading 4</h4>

 

The validator outline shows that headings 2 and 3 are being skipped.

 

Any help will be really appreciated.

 

Thanks.

 

--

Bernat Lleonart

 

Enviat amb el correu segur de Proton Mail <https://proton.me/> .