Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accordion Example: Restructure to remove dl element #815

Closed
2 tasks done
mcking65 opened this issue Aug 1, 2018 · 3 comments
Closed
2 tasks done

Accordion Example: Restructure to remove dl element #815

mcking65 opened this issue Aug 1, 2018 · 3 comments
Assignees
Labels
enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy Example Page Related to a page containing an example implementation of a pattern

Comments

@mcking65
Copy link
Contributor

mcking65 commented Aug 1, 2018

As discussed in w3c/html-aria#110, due to a recent change, the ARIA in HTML spec does not currently allow role presentation on dl, heading on dt, or region on dd. As a result, the accordion example does not validate.

While the APG TF would like to see the ARIA in HTML spec changed to allow retrofitting of existing content, it does agree that an accordion can be made using less ARIA markup with a different set of HTML elements and that doing so would better illustrate appropriate use of ARIA. This issue calls for the accordion example to be changed to use a div for the container, heading elements for the headings, and section elements for the panels. This will also mean that a note should be added to state that if the author does not want the panels to be landmark regions, that the section elements should be replaced with div elements.

To-do

  • Land commit to fix accordion structure
  • Remove validation override for dl/dt/dd from .vnurc
@mcking65 mcking65 added enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy Example Page Related to a page containing an example implementation of a pattern labels Aug 1, 2018
@mcking65 mcking65 added this to the 1.1 APG Release 3 milestone Aug 1, 2018
@LaurenceRLewis
Copy link

LaurenceRLewis commented Aug 3, 2018

‘if the author does not want the panels to be landmark regions, that the section elements should be replaced with div elements.’.

As the region is only announced, or displayed in the Regions dialog, when the accordion section is expanded—what accessibility issues would this cause? If negligible would it need the div option?

@accdc
Copy link

accdc commented Aug 3, 2018

I'm not clear on the use of section and how this relates to the ARIA Accordion design pattern. As far as I understand we are not, and should not be, saying that within the APG that authors have to use specific HTML elements to achieve proper ARIA usage, because it's impossible to predict how authors will have to implement ARIA in all cases.

For example, what if an author has to create an accordion that does not use section elements and they cannot. How will this pattern show the proper syntax of ARIA usage to make this accessible?

The role=region aspect is important in this latter case, and also when dealing with nested accordions. Omiting the use of regions in such cases makes it impossible to reliably identify proper nesting structures and associated boundaries.

@LaurenceRLewis
Copy link

LaurenceRLewis commented Aug 4, 2018

In case it helps I set up an accordion with different design patterns.

https://www.a11ycats.com.au/aria-testing/

Update: The div section in this is not constructed as I wanted. I'll update and post when completed. sorry about that.

nschonni added a commit to nschonni/aria-practices that referenced this issue Aug 14, 2018
nschonni added a commit to nschonni/aria-practices that referenced this issue Aug 14, 2018
mcking65 pushed a commit that referenced this issue Aug 15, 2018
* chore: VNU globbing, Ensure all html files are checked.
* chore: Bump vnu-jar to 18.7.23
* chore: Ignore current vnu failures in accordion and menubar

Related to #815 #822
mcking65 added a commit that referenced this issue Sep 24, 2018
…ve focus styling

To resolve issue #815:
1. Replace `dl` with `div`
2. Replace `dt` with `h3`
3. Replace `dd` with `div`
4. Update documentation tables.

Also:
1. Improve visual focus styling so it is more apparent that arrow keys move focus from header to header.
2. Add accessibility features section that describes the focus styling.
michael-n-cooper pushed a commit that referenced this issue Sep 24, 2018
Accordion Example: Restructure to use `div` instead of `dl` and improve focus styling

To resolve issue #815:
1. Replace `dl` with `div`
2. Replace `dt` with `h3`
3. Replace `dd` with `div`
4. Update documentation tables.

Also:
1. Improve visual focus styling so it is more apparent that arrow keys move focus from header to header.
2. Add accessibility features section that describes the focus styling.
spectranaut pushed a commit to bocoup/aria-practices that referenced this issue Sep 27, 2018
…ve focus styling

To resolve issue w3c#815:
1. Replace `dl` with `div`
2. Replace `dt` with `h3`
3. Replace `dd` with `div`
4. Update documentation tables.

Also:
1. Improve visual focus styling so it is more apparent that arrow keys move focus from header to header.
2. Add accessibility features section that describes the focus styling.
spectranaut pushed a commit to bocoup/aria-practices that referenced this issue Sep 28, 2018
…ve focus styling

To resolve issue w3c#815:
1. Replace `dl` with `div`
2. Replace `dt` with `h3`
3. Replace `dd` with `div`
4. Update documentation tables.

Also:
1. Improve visual focus styling so it is more apparent that arrow keys move focus from header to header.
2. Add accessibility features section that describes the focus styling.
mcking65 pushed a commit that referenced this issue Oct 1, 2018
For issue #815, remove the exclusions in the VNU configuration that permitted accordion-related roles on `dl`, `dt`, and `dt`.
michael-n-cooper pushed a commit that referenced this issue Oct 1, 2018
VNU config:  Remove exclusions for accordion (pull #902)

For issue #815, remove the exclusions in the VNU configuration that permitted accordion-related roles on `dl`, `dt`, and `dt`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy Example Page Related to a page containing an example implementation of a pattern
Development

No branches or pull requests

4 participants