- From: Benjamin Love <benjamin.james.love@gmail.com>
- Date: Wed, 10 Jul 2024 06:40:13 -0700
- To: Bernat Lleonart <bernat.lleonart@proton.me>
- Cc: Bernat Lleonart <bernat.lleonart@protonmail.ch>, "w3c-wai-ig@w3.org" <w3c-wai-ig@w3.org>
- Message-ID: <CAEdsBL3KkwAngJ49jPv0jvZx8UAFkTJ8RYHYBVNnxv3ZKvoKtw@mail.gmail.com>
Hi, Thanks for sharing. Based on this, I would agree with your implemented approach from a general usability question. Of course, given diversity of abilities/preferences, certain users may prefer alternative implementations, but overall I don’t believe there’s any glaring usability issues this design would create. Have fun with the project! Ben On Wed, Jul 10, 2024 at 12:31 AM Bernat Lleonart <bernat.lleonart@proton.me> wrote: > Hi, > > What I'm building is a page for an item in an archaeological museum's > collection. > This is the code I have (the content inside every div.accordion-content > can be any kind of element). Inside <h2>Resources</h2> there is a nested > accordion. > > <h1>Name of the object in the collection</h1> > > <div class="accordion"> > <h2 class="accordion-header" id="tab0-0"> > <button type="button" aria-expanded="false" > aria-controls="panel0-0">Technical information</button> > </h2> > <div class="accordion-content" id="panel0-0" aria-hidden="true" > aria-labelledby="tab0-0"> > <p>lorem ipsum…</p> > </div> > <h2 class="accordion-header" id="tab0-1"> > <button type="button" aria-expanded="false" > aria-controls="panel0-1">Related content</button> > </h2> > <div class="accordion-content" id="panel0-1" aria-hidden="true" > aria-labelledby="tab0-1"> > <p>Related content…</p> > <ul> > <li>Related content…</li> > <li>Related content…</li> > <li>Related content…</li> > </ul> > </div> > <h2 class="accordion-header" id="tab0-2"> > <button type="button" aria-expanded="false" > aria-controls="panel0-2">Resources</button> > </h2> > <div class="accordion-content" id="panel0-2" aria-hidden="true" > aria-labelledby="tab0-2"> > <div class="accordion"> > <h3 class="accordion-header" id="tab2-0"> > <button type="button" aria-expanded="false" > aria-controls="panel2-0">Audiovisual Material</button> > </h3> > <div class="accordion-content" id="panel2-0" > aria-hidden="true" aria-labelledby="tab2-0"> > <h4>Activities</h4> > <ul> > <li> > <a href="#">Activity 1</a> > </li> > <li> > <a href="#">Activity 2</a> > </li> > <li> > <a href="#">Activity 3</a> > </li> > </ul> > <h4>Learning Material</h4> > <ul> > <li> > <a href="#">Learning Material 1</a> > </li> > <li> > <a href="#">Learning Material 2</a> > </li> > <li> > <a href="#">Learning Material 3</a> > </li> > </ul> > </div> > <h3 class="accordion-header" id="tab2-1"> > <button type="button" aria-expanded="false" > aria-controls="panel2-1">3D Objects</button> > </h3> > <div class="accordion-content" id="panel2-1" > aria-hidden="true" aria-labelledby="tab2-1"> > <p>Lorem ipsum dolor sit amet consectetur, adipisicing > elit. Temporibus odio veniam architecto unde quis distinctio, vitae nam > consequatur ipsum, porro enim quaerat atque, facere debitis velit assumenda > adipisci tempora quasi?</p> > </div> > <h3 class="accordion-header" id="tab2-2"> > <button type="button" aria-expanded="false" > aria-controls="panel2-2">PDFs</button> > </h3> > <div class="accordion-content" id="panel2-2" > aria-hidden="true" aria-labelledby="tab2-2"> > <ul> > <li> > <a href="#">PDF 1</a> > </li> > <li> > <a href="#">PDF 2</a> > </li> > <li> > <a href="#">PDF 3</a> > </li> > </ul> > </div> > </div> > </div> > <h2 class="accordion-header" id="tab0-3"> > <button type="button" aria-expanded="false" > aria-controls="panel0-3">Restoration</button> > </h2> > <div class="accordion-content" id="panel0-3" aria-hidden="true" > aria-labelledby="tab0-3"> > <p>Lorem ipsum dolor sit amet consectetur adipisicing elit…</p> > <ul> > <li>Lorem ipsum dolor…</li> > <li>Lorem ipsum dolor…</li> > <li>Lorem ipsum dolor…</li> > </ul> > </div> > <h2 class="accordion-header" id="tab0-4"> > <button type="button" aria-expanded="false" > aria-controls="panel0-4">Bibliography</button> > </h2> > <div class="accordion-content" id="panel0-4" aria-hidden="true" > aria-labelledby="tab0-4"> > <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae > quas consectetur fugit necessitatibus fuga? Ex itaque repudiandae > voluptate. Iure quisquam molestiae quas officia magni voluptatem > praesentium minus necessitatibus. Velit, laboriosam?</p> > <ul> > <li>Lorem ipsum dolor sit amet consectetur adipisicing > elit</li> > <li>Eum, quibusdam neque molestias, delectus enim nesciunt et > nisi</li> > <li>Odio natus placeat possimus laudantium</li> > <li>Lorem ipsum dolor sit amet consectetur adipisicing > elit</li> > <li>Odio natus placeat possimus laudantium</li> > </ul> > </div> > </div> > > The use of accordions is a design decision, as the content inside each > "accordion-content" can be pretty long. > > Thanks for your indications. > > -- > Bernat Lleonart > > Enviat amb el correu segur de Proton Mail <https://proton.me/>. > > El dimarts, 9 de juliol 2024 a les 14:41, Benjamin Love < > benjamin.james.love@gmail.com> va escriure: > > Maybe describe (if you are unable to link to) the project. > > I’ve never been a fan of projects that mix headings with collapse/expand > of sectioned content. Of course, there are some cases where this feature > can be useful. The code snippet provided is too stripped down to suggest > the purpose of collapse feature. To Adam’s comments, it suggests an > uncommon or unlikely scenario. > > Are you creating a long form publication as single webpage application? > You should keep in mind if you’re nesting headings inside your > expand/collapse region, user will not have access to the heading > structure/outline those nested sections when they are hidden, which may or > may not be a barrier depending on the type of reading scenario this > application is promoting. > > Ben > > On Mon, Jul 8, 2024 at 8:19 PM Bernat Lleonart < > bernat.lleonart@protonmail.ch> wrote: > >> 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> 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/>. >>> >> >> >
Received on Wednesday, 10 July 2024 13:40:29 UTC