#54079 closed enhancement (fixed)
Remove "role" attribute on HTML5 elements with a default landmark role.
Reported by: | costdev | Owned by: | hellofromTonya |
---|---|---|---|
Milestone: | 5.9 | Priority: | normal |
Severity: | normal | Version: | |
Component: | Bundled Theme | Keywords: | has-patch has-dev-note |
Focuses: | accessibility, css, coding-standards | Cc: |
Description
With IE11 no longer supported, the primary problem with assistive technology support for native HTML5 elements no longer applies.
This ticket proposes to remove the role
attribute from the following HTML5 elements with default landmark roles, per formerly required role attributes and W3C.
A search through the codebase revealed the following:
Notes:
form
defaults torole="form"
when it has an accessible name usingaria-labelledby
,aria-label
ortitle
attributes. In the codebase, all instances ofform
that have a role userole="search"
. As this isn't the default landmark, I leftform
out of this search.section
doesn't exist in the codebase, so I excluded it from this search.
# Query: (<)(aside|footer|header|main|nav)(<?php)?(.*)?(\\?>)?([^>]+)(role=)(.*)(>) # Flags: RegExp # ContextLines: 1 50 results - 50 files src/wp-content/themes/twentyeleven/footer.php: - 15: <footer id="colophon" role="contentinfo"> src/wp-content/themes/twentyeleven/header.php: - 79: <header id="branding" role="banner"> src/wp-content/themes/twentyfifteen/404.php: - 13: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentyfifteen/archive.php: - 22: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentyfifteen/footer.php: - 15: <footer id="colophon" class="site-footer" role="contentinfo"> src/wp-content/themes/twentyfifteen/header.php: - 30: <header id="masthead" class="site-header" role="banner"> src/wp-content/themes/twentyfifteen/image.php: - 13: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentyfifteen/index.php: - 20: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentyfifteen/page.php: - 17: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentyfifteen/search.php: - 13: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentyfifteen/single.php: - 13: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentyfourteen/footer.php: - 15: <footer id="colophon" class="site-footer" role="contentinfo"> src/wp-content/themes/twentyfourteen/header.php: - 44: <header id="masthead" class="site-header" role="banner"> src/wp-content/themes/twentynineteen/template-parts/footer/footer-widgets.php: - 12: <aside class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Footer', 'twentynineteen' ); ?>"> src/wp-content/themes/twentyseventeen/404.php: - 17: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentyseventeen/archive.php: - 27: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentyseventeen/footer.php: - 19: <footer id="colophon" class="site-footer" role="contentinfo"> src/wp-content/themes/twentyseventeen/front-page.php: - 18: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentyseventeen/header.php: - 30: <header id="masthead" class="site-header" role="banner"> src/wp-content/themes/twentyseventeen/index.php: - 32: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentyseventeen/page.php: - 22: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentyseventeen/search.php: - 31: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentyseventeen/sidebar.php: - 18: <aside id="secondary" class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Blog Sidebar', 'twentyseventeen' ); ?>"> src/wp-content/themes/twentyseventeen/single.php: - 17: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentyseventeen/template-parts/footer/footer-widgets.php: - 18: <aside class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Footer', 'twentyseventeen' ); ?>"> src/wp-content/themes/twentysixteen/404.php: - 13: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentysixteen/archive.php: - 22: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentysixteen/footer.php: - 15: <footer id="colophon" class="site-footer" role="contentinfo"> src/wp-content/themes/twentysixteen/header.php: - 30: <header id="masthead" class="site-header" role="banner"> src/wp-content/themes/twentysixteen/image.php: - 13: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentysixteen/index.php: - 20: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentysixteen/page.php: - 17: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentysixteen/search.php: - 13: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentysixteen/sidebar-content-bottom.php: - 16: <aside id="content-bottom-widgets" class="content-bottom-widgets" role="complementary"> src/wp-content/themes/twentysixteen/sidebar.php: - 12: <aside id="secondary" class="sidebar widget-area" role="complementary"> src/wp-content/themes/twentysixteen/single.php: - 13: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentythirteen/footer.php: - 14: <footer id="colophon" class="site-footer" role="contentinfo"> src/wp-content/themes/twentythirteen/header.php: - 36: <header id="masthead" class="site-header" role="banner"> src/wp-content/themes/twentytwelve/footer.php: - 13: <footer id="colophon" role="contentinfo"> src/wp-content/themes/twentytwelve/header.php: - 37: <header id="masthead" class="site-header" role="banner"> src/wp-content/themes/twentytwenty/404.php: - 13: <main id="site-content" role="main"> src/wp-content/themes/twentytwenty/footer.php: - 15: <footer id="site-footer" role="contentinfo" class="header-footer-group"> src/wp-content/themes/twentytwenty/header.php: - 33: <header id="site-header" class="header-footer-group" role="banner"> src/wp-content/themes/twentytwenty/index.php: - 20: <main id="site-content" role="main"> src/wp-content/themes/twentytwenty/singular.php: - 15: <main id="site-content" role="main"> src/wp-content/themes/twentytwenty/template-parts/footer-menus-widgets.php: - 89: <aside class="footer-widgets-outer-wrapper" role="complementary"> src/wp-content/themes/twentytwenty/templates/template-cover.php: - 14: <main id="site-content" role="main"> src/wp-content/themes/twentytwentyone/footer.php: - 21: <footer id="colophon" class="site-footer" role="contentinfo"> src/wp-content/themes/twentytwentyone/header.php: - 32: <main id="main" class="site-main" role="main"> src/wp-content/themes/twentytwentyone/template-parts/header/site-header.php: - 16: <header id="masthead" class="<?php echo esc_attr( $wrapper_classes ); ?>" role="banner">
Attachments (3)
Change History (25)
This ticket was mentioned in Slack in #accessibility by costdev. View the logs.
3 years ago
#3
@
3 years ago
Excellent point @mukesh27!
Per W3C:
<footer>
contentinfo
when in context of the
body
element. Thefooter
element is
not acontentinfo
landmark when it is
a descendant of the following HTML
sectioning elements:
article
aside
main
nav
section
As "context of the body element" can mean inside any number of non-sectioning elements, we can't use body > footer
as the selector, as child themes may add one or more wrappers to contain some content and the footer
but still use the base styling referenced above.
To avoid having a selector like this:
*:not(article):not(aside):not(main):not(nav):not(section) > footer { /* Rules */ }
I think we could just add a .contentinfo
class on the relevant footer
elements in this theme, and adjust the CSS selectors accordingly:
footer.contentinfo { /* Rules */ } footer.contentinfo a { /* Rules */ } footer.contentinfo a:hover { /* Rules */ }
The likelihood of a child theme or plugin having other footer
elements with a .contentinfo
class seems very low, whereas something more general like .primary
or similar feels a bit risky. This way, the update shouldn't unintentionally affect other footer
elements.
However, it's possible that sites that use this theme have custom styles that target footer[role="contentinfo"]
. I don't think there's anything we can do about that - the custom styles would need to be updated.
What are your thoughts?
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
3 years ago
#5
@
3 years ago
- Milestone changed from Awaiting Review to 5.9
Hello @costdev, and thanks for your patience!
We reviewed the ticket today during the weekly Accessibility Team's bug-scrub.
Can you confirm that, with role="navigation"
being addressed in #54054, the only thing that has to be addressed is the use of the role
attribute in default themes?
#6
@
3 years ago
@ryokuhi Thanks for reviewing the ticket today! :)
That's right, only the role
attribute in default themes needs to be addressed.
This ticket was mentioned in Slack in #accessibility by alexstine. View the logs.
3 years ago
#9
@
3 years ago
As a second person checking, I could not find any issues; where I focused on core themes, and a general search in the rest of the repo (CSS/JS), I could only find the same [role="contentinfo"]
in "twentytwelve/style.css"; everything else didn't seem to be affected by this patch (e.g. role=separator
and section[role="banner"]
).
This ticket was mentioned in Slack in #core-themes by costdev. View the logs.
3 years ago
This ticket was mentioned in Slack in #core by costdev. View the logs.
3 years ago
#12
@
3 years ago
- Component changed from General to Bundled Theme
Child themes can replace the stylesheet or footer template without editing the other. So keeping the role for Twenty Twelve would be safer.
If adding the class (without removing the role), the three styles could cover both situations:
footer[role="contentinfo"], footer.contentinfo { ... footer[role="contentinfo"] a, footer.contentinfo a { ... footer[role="contentinfo"] a:hover, footer.contentinfo a:hover {
Then someone could simply revise the footer template in a child theme without needing to edit in two places.
This ticket was mentioned in Slack in #core by audrasjb. View the logs.
3 years ago
@
3 years ago
Option 2 - Keep role="contentinfo"
for Twenty Twelve footer
and add contentinfo
class with CSS selector adjustments.
#14
@
3 years ago
- Keywords needs-refresh 2nd-opinion removed
Patch refreshed with two options:
- 54079.1 - Keep
role="contentinfo"
for Twenty Twelvefooter
. - 54079.2 - The same as above, but also add
class="contentinfo"
along with adjustments to Twenty Twelve'sstyle.css
. The intention here would be to phase out the targeting offooter[role="contentinfo"]
by child themes, who will hopefully opt for thefooter.contentinfo
class selector instead.
I don't have a preference between the patches. We have to keep the role="contentinfo"
on the Twenty Twelve footer
, so I'm happy for either a Component Maintainer or Committer to make the final call on which of the two latest patches is the better choice.
#15
@
3 years ago
Pinging Component Maintainers @desrosj and @ianbelanger to notify that this is now ready for final review after great feedback including from the Accessibility and CSS teams.
This ticket was mentioned in Slack in #accessibility by craigfrancis. View the logs.
3 years ago
#17
@
3 years ago
I think that the first option is the best choice.
Mostly because Twenty Twelve is pretty old, and maintenance or creation of new child themes off it is probably uncommon at this point - so the imagined "phase out" will, frankly, be unlikely to happen.
It's also not fool proof; a child theme that replaces the footer but inherits the style sheet won't inherit the changed styles, so there is a definite possibility that the style sheet change will break some sites.
#18
@
3 years ago
Thanks for your feedback @joedolson!
I agree with you that the first option is the better one.
The patch is ready for commit
when someone has time.
#22
@
3 years ago
- Keywords has-dev-note added; commit removed
Bundled themes update note:
https://make.wordpress.org/core/2022/01/05/bundled-theme-updates-with-wordpress-5-9/
Hi, @costdev thanks for the ticket and patch.
I think we have to update CSS if any it uses the
role
selector. In my quick search, I found below 1 instance.https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentytwelve/style.css#L678