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.

Sign up for GitHub

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

Jump to bottom

Consider making tabs <section> into <div> #1339

Closed
hannalaakso opened this issue May 13, 2019 · 0 comments · Fixed by #1746
Closed

Consider making tabs <section> into <div> #1339

hannalaakso opened this issue May 13, 2019 · 0 comments · Fixed by #1746
Labels
accessibility

Comments

@hannalaakso
Copy link
Member

On encountering <section> in tabs, HTML validator gives the following warning:

Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

if it doesn't contain a heading.

According to the HTML specs

Each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.

We should consider making this element a <div>.
@hannalaakso hannalaakso added the awaiting triage Needs triaging by team label May 13, 2019
@kellylee-gds kellylee-gds added Effort: days and removed awaiting triage Needs triaging by team labels May 15, 2019
@timpaul timpaul mentioned this issue Aug 28, 2019
Closed
25 tasks
NickColley added a commit that referenced this issue Feb 25, 2020
@NickColley
Use generic div element for tabspanel
b933920 
Sections when they have an accessible name create landmarks.

> The use of region landmarks should be limited, as too many landmarks can dilute their usefulness in quickly navigating to important areas of a page. If you find there are many landmarks, especially generic regions existing in a single page, then the page’s structure should be reexamined.

- https://www.scottohara.me/blog/2018/03/03/landmarks.html

Also, when the component has not be enhanced these sections do not have
accessible names so it means they are the equivalent of a div already.

When they're enhanced they're given a role of tabpanel, so they're no
longer a section.

Given this I'm not sure it was ever useful and by making them generic
divs we can avoid HTML validators warning about this component.

Closes #1339
@NickColley NickColley mentioned this issue Feb 25, 2020
Merged
NickColley added a commit that referenced this issue Feb 26, 2020
@NickColley
Use generic div element for tabspanel
4b5a54f 
Sections when they have an accessible name create landmarks.

> The use of region landmarks should be limited, as too many landmarks can dilute their usefulness in quickly navigating to important areas of a page. If you find there are many landmarks, especially generic regions existing in a single page, then the page’s structure should be reexamined.

- https://www.scottohara.me/blog/2018/03/03/landmarks.html

Also, when the component has not be enhanced these sections do not have
accessible names so it means they are the equivalent of a div already.

When they're enhanced they're given a role of tabpanel, so they're no
longer a section.

Given this I'm not sure it was ever useful and by making them generic
divs we can avoid HTML validators warning about this component.

Closes #1339
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
accessibility
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Use generic div element for tabspanel alphagov/govuk-frontend
3 participants
@NickColley @hannalaakso @kellylee-gds