Collapsible containers HTML code not accessible and doesn't match the example

[giacomo-petri]

Describe the issue The HTML code section is poorly accessible (not operable neither via keyboard nor via AT) and doesn't match the example implementation semantic.

URL https://design-system.w3.org/components/collapsible-containers.html

Recommended solution Suggest to follow this implementation https://www.w3.org/WAI/ARIA/apg/example-index/accordion/accordion.html

[NicolaSaunders]

Hi @giacomo-petri

Are you able to provide any further details as to why you believe the collapsible containers component is poorly accessible? Is there a particular combination of browser and AT in which the component is not working?

The component has been through accessibility testing by the Digital Accessibility Centre and their report has not raised any issues.

The component in the design system does follow the keyboard support in the APG example. We have chosen not to use aria-controls because of inconsistencies in user agent support, but believe that this does not harm user experience.

[giacomo-petri]

Hi @NicolaSaunders,

I was referring to the snippet of code available at the end of the page:

<div class="component--collapsibles" data-component="collapsibles">
    <div>
        <h3 data-heading="collapsibles">AI KR (Artificial Intelligence Knowledge Representation) <span>Community group</span></h3>
        <div>
            <p>The overall goal/mission of this community group is to explore the requirements, best practices and implementation options for the conceptualization and specification of domain knowledge in AI.</p>
            <a href="path/to/page">Visit the AI KR Community Group</a>
        </div>
    </div>
    <div>
        <h3 data-heading="collapsibles">Web Payment Security <span>Interest group</span></h3>
        <div>
            <p>A brief description of what this group does.</p>
            <a href="path/to/page">Visit the Web Payment Security Interest Group</a>
        </div>
    </div>
    <div>
        <h3 data-heading="collapsibles">Publishing <span>Business group</span></h3>
        <div>
            <p>The Publishing Business Group fosters ongoing participation by members of the publishing industry and overall publishing ecosystem in the development of the Web for publishing, and serves as a conduit for feedback between the publishing ecosystem and W3C.</p>
            <a href="path/to/page">Visit the Publishing Business Group</a>
        </div>
    </div>
    <div>
        <h3 data-heading="collapsibles">Accessibility Education and Outreach Working Group (EOWG) <span>Working group</span></h3>
        <div>
            <p>The mission of the Accessibility Education and Outreach Working Group is to develop strategies and resources to promote awareness, understanding, implementation, and conformance testing for W3C accessibility standards; and to support the accessibility work of other W3C Groups.</p>
            <a href="path/to/page">Visit the Accessibility Education and Outreach Working Group</a>
        </div>
    </div>
</div>

It doesn't work and doesn't reflect the implementation provided in the example.

Would be great adding also the JavaScript snipper of code to let users understand how it works.

[NicolaSaunders]

Hi @giacomo-petri

The HTML snippet above is intended to be used in combination with the CSS and JS files that are part of the W3C Website templates bundle

Here is a link to the JavaScript file for the collapsibles component. This script will take the content inside elements with the data-heading data attribute and wrap it inside a button. It also gives the button the necessary aria-expanded attribute and handles the click event on the buttons.

I hope this helps?