Disclosure Native HTML Example

[j-mendez]

The example for the disclosure pattern at https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-faq/ uses custom html, css, and js to build the view. HTML has the disclosure pattern built in using

. The details element works with all browsers and provides the same functionality without needing extra javascript.

It would be better to display the native counter part on the example instead of using aria properties.

[j-mendez]

Link to the details HTML element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

[csarven]

See also #3046

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed Disclosure Native HTML Example.

The full IRC log of that discussion

<jugglinmike> Subtopic: Disclosure Native HTML Example
<jugglinmike> github: https://github.com//issues/2770
<jugglinmike> Matt_King: We've decided at some point that we would start including native HTML equivalents in APG, or at least talking about them
<jugglinmike> Matt_King: We haven't really set up any tracker for this work
<jugglinmike> Matt_King: Though I know there are some related issues...
<jugglinmike> Matt_King: For instance, #3046 https://github.com//issues/3046
<jugglinmike> Jem: This is a really big question, as Matt_King said. How are we going to harmonize our work with HTML?
<jugglinmike> Matt_King: We have said that we want to do this over time
<jugglinmike> Matt_King: After we did the site re-design, and back in our 2020 road-mapping, we said that the scope of the APG should include helping people understand how to do the same things with less ARIA, and to illustrate as well
<jugglinmike> Matt_King: We also included in that roadmap that we would take over the "using ARIA" document and help sunset that
<jugglinmike> Matt_King: There are these big piles of increased scope that we could do, but that we haven't put into milestones because they're big lifts without folks available to perform them
<jugglinmike> Matt_King: There's a project-management piece to this, as well--mapping out which we should do first, etc
<jugglinmike> Matt_King: ...and understanding "how do we even fit this in?" Like, do we add something to every pattern and also additional examples
<jugglinmike> Jem: I'd be interested in leading the project if there was another person to help me... We're out of time, though, so why don't we talk about this next week in a dedicated agenda item?
<jugglinmike> Matt_King: That sounds good
<jugglinmike> Zakim, end the meeting

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed Long term plans for HTML examples.

The full IRC log of that discussion

<jugglinmike> Topic: Long term plans for HTML examples
<jugglinmike> github: https://github.com//issues/2770
<jugglinmike> Matt_King: There are a couple of things we'd have to work out if we were going to start building native HTML examples that are equivalent to the current examples but that essentially avoid using ARIA as much as possible
<jugglinmike> Matt_King: That doesn't necessarily mean "zero" ARIA, but it means minimal ARIA and JavaScript
<jugglinmike> Matt_King: Some of them may end up being trivial. For the button, for example, it might not even be worth having a dedicated page at all
<jugglinmike> Matt_King: We definitely want to do this over time; this is part of our expanded mission
<jugglinmike> Matt_King: But what's the best way to fit it into the APG in a consistent manner?
<jugglinmike> Matt_King: Do we just want separate examples? Or do we want additional sections in the existing examples?
<jugglinmike> jongund: We generally want people to use native semantics.
<jugglinmike> jongund: A lot of people use "link" elements to create things that act like buttons.
<jugglinmike> jongund: We do it ourselves in two examples, but neither of them are something I think we want to promote. You should be using "button" elements
<jugglinmike> jongund: For us, I think we need more explanation about that
<jugglinmike> Matt_King: We do that to some extent. In the menu bar pattern, we say "the disclosure is the simpler pattern; only use menu bar if the following things are true [...]"
<jugglinmike> Matt_King: So we can steer people from one pattern to another. That part, we kind of already know how to do
<jugglinmike> Matt_King: We can follow that exact same kind of pattern--we have quite a few places where we definitely want to separate content, already
<jugglinmike> Matt_King: Across the board, it's better when we have exactly one example per page. Right now, though, we have three examples for the button. Separating them out would make this easier
<jugglinmike> Matt_King: We don't have that problem for disclosure, though, so starting out with disclosure might be easier, since it's already a separate page
<jugglinmike> Matt_King: That's one way we could do things at the level of the examples, but I'm kind of wondering if there's a way we can address this at the level of the patterns
<jugglinmike> Matt_King: We currently list two sets of requirements: keyboard requirements and role-stated requirements
<jugglinmike> Matt_King: Those are making assumptions, but they aren't maximizing the use of ARIA--that's for sure
<jugglinmike> Matt_King: If were were adding information about how to minimize the use of ARIA, it seems like we'd have to do that on all the pattern pages... And we'd want to do that in a really consistent way
<jugglinmike> jongund: It's a tough problem, architecturally at least
<jugglinmike> jongund: In general, we want to promote native semantics for HTML. But using native semantics doesn't necessarily mean you wouldn't use ARIA at all
<jugglinmike> jongund: It's not a question of "all ARIA or no ARIA"
<jugglinmike> jongund: What's the relationship between APG and the developing WAI tutorials?
<jugglinmike> Matt_King: We might just link to those tutorials
<jugglinmike> Matt_King: Maybe there isn't a single treatment for this topic; maybe it does need to be decided on a pattern-by-pattern basis
<jugglinmike> Matt_King: For some (like summary details and disclosure), we might just add a note to the examples which direct readers to the preferred approach...
<jugglinmike> Matt_King: I don't think we'll be doing this overnight; I think we'll do it bit-by-bit with tiny pull requests
<jugglinmike> Matt_King: Maybe someone should set up a project to review all of the patterns and decide how we'll approach this
<jugglinmike> jongund: Should we just start with disclosure since that's what this issue is about?
<jugglinmike> Matt_King: Well, there's some value in thinking about this holistically before moving in any particular direction so that we know we're approaching a complete solution
<jugglinmike> Matt_King: I don't know where this sits in the big picture of our overall roadmap
<jugglinmike> Matt_King: We're also considering refactoring the landmark examples, for instance
<jugglinmike> Matt_King: I think we need someone who has plenty of time and is ready to spend several months on it
<jugglinmike> jongund: It seems like at least for the disclosure, we could at least create an example that uses details-summary and show that you don't need to explicitly add these attributes and manage them
<OliverH5> Sorry but my connection keeps dropping out and I can barely hear full sentences, neither can I see the shared screen :/
<jugglinmike> Matt_King: We'd need a different kind of editorial copy in the example page, but we could work that out

[j-mendez]

The ARIA Authoring Practices (APG) Task Force just discussed Long term plans for HTML examples.

The full IRC log of that discussion

<jugglinmike> Topic: Long term plans for HTML examples
<jugglinmike> github: https://github.com//issues/2770
<jugglinmike> Matt_King: There are a couple of things we'd have to work out if we were going to start building native HTML examples that are equivalent to the current examples but that essentially avoid using ARIA as much as possible
<jugglinmike> Matt_King: That doesn't necessarily mean "zero" ARIA, but it means minimal ARIA and JavaScript
<jugglinmike> Matt_King: Some of them may end up being trivial. For the button, for example, it might not even be worth having a dedicated page at all
<jugglinmike> Matt_King: We definitely want to do this over time; this is part of our expanded mission
<jugglinmike> Matt_King: But what's the best way to fit it into the APG in a consistent manner?
<jugglinmike> Matt_King: Do we just want separate examples? Or do we want additional sections in the existing examples?
<jugglinmike> jongund: We generally want people to use native semantics.
<jugglinmike> jongund: A lot of people use "link" elements to create things that act like buttons.
<jugglinmike> jongund: We do it ourselves in two examples, but neither of them are something I think we want to promote. You should be using "button" elements
<jugglinmike> jongund: For us, I think we need more explanation about that
<jugglinmike> Matt_King: We do that to some extent. In the menu bar pattern, we say "the disclosure is the simpler pattern; only use menu bar if the following things are true [...]"
<jugglinmike> Matt_King: So we can steer people from one pattern to another. That part, we kind of already know how to do
<jugglinmike> Matt_King: We can follow that exact same kind of pattern--we have quite a few places where we definitely want to separate content, already
<jugglinmike> Matt_King: Across the board, it's better when we have exactly one example per page. Right now, though, we have three examples for the button. Separating them out would make this easier
<jugglinmike> Matt_King: We don't have that problem for disclosure, though, so starting out with disclosure might be easier, since it's already a separate page
<jugglinmike> Matt_King: That's one way we could do things at the level of the examples, but I'm kind of wondering if there's a way we can address this at the level of the patterns
<jugglinmike> Matt_King: We currently list two sets of requirements: keyboard requirements and role-stated requirements
<jugglinmike> Matt_King: Those are making assumptions, but they aren't maximizing the use of ARIA--that's for sure
<jugglinmike> Matt_King: If were were adding information about how to minimize the use of ARIA, it seems like we'd have to do that on all the pattern pages... And we'd want to do that in a really consistent way
<jugglinmike> jongund: It's a tough problem, architecturally at least
<jugglinmike> jongund: In general, we want to promote native semantics for HTML. But using native semantics doesn't necessarily mean you wouldn't use ARIA at all
<jugglinmike> jongund: It's not a question of "all ARIA or no ARIA"
<jugglinmike> jongund: What's the relationship between APG and the developing WAI tutorials?
<jugglinmike> Matt_King: We might just link to those tutorials
<jugglinmike> Matt_King: Maybe there isn't a single treatment for this topic; maybe it does need to be decided on a pattern-by-pattern basis
<jugglinmike> Matt_King: For some (like summary details and disclosure), we might just add a note to the examples which direct readers to the preferred approach...
<jugglinmike> Matt_King: I don't think we'll be doing this overnight; I think we'll do it bit-by-bit with tiny pull requests
<jugglinmike> Matt_King: Maybe someone should set up a project to review all of the patterns and decide how we'll approach this
<jugglinmike> jongund: Should we just start with disclosure since that's what this issue is about?
<jugglinmike> Matt_King: Well, there's some value in thinking about this holistically before moving in any particular direction so that we know we're approaching a complete solution
<jugglinmike> Matt_King: I don't know where this sits in the big picture of our overall roadmap
<jugglinmike> Matt_King: We're also considering refactoring the landmark examples, for instance
<jugglinmike> Matt_King: I think we need someone who has plenty of time and is ready to spend several months on it
<jugglinmike> jongund: It seems like at least for the disclosure, we could at least create an example that uses details-summary and show that you don't need to explicitly add these attributes and manage them
<OliverH5> Sorry but my connection keeps dropping out and I can barely hear full sentences, neither can I see the shared screen :/
<jugglinmike> Matt_King: We'd need a different kind of editorial copy in the example page, but we could work that out

I like how the aria usage is highlighted that it should be used carefully. @jugglinmike

[jugglinmike]

Glad to hear it, @j-mendez! Just to be clear: my handle appears in the IRC log because I served as scribe for this meeting. For each entry, the speaker's handle follows mine. You might find it easier to read this in the HTML form of the meeting as hosted by the W3C (just note how that page contains the full meeting minutes--not just those for this GitHub issue).