WordPress.org

Make WordPress Core

Opened 7 weeks ago

Last modified 10 days ago

#54079 new enhancement

Remove "role" attribute on HTML5 elements with a default landmark role.

Reported by: costdev Owned by:
Milestone: 5.9 Priority: normal
Severity: normal Version:
Component: General Keywords: has-patch needs-refresh 2nd-opinion
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:

  1. form defaults to role="form" when it has an accessible name using aria-labelledby, aria-label or title attributes. In the codebase, all instances of form that have a role use role="search". As this isn't the default landmark, I left form out of this search.
  2. 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">

Related tickets: #48920, #54054.

Attachments (1)

54079.diff (25.8 KB) - added by costdev 7 weeks ago.

Download all attachments as: .zip

Change History (8)

@costdev
7 weeks ago

This ticket was mentioned in Slack in #accessibility by costdev. View the logs.


7 weeks ago

#2 @mukesh27
7 weeks ago

  • Keywords needs-refresh added

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

footer[role="contentinfo"] {
	border-top: 1px solid #ededed;
	clear: both;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	max-width: 960px;
	max-width: 68.571428571rem;
	margin-top: 24px;
	margin-top: 1.714285714rem;
	margin-left: auto;
	margin-right: auto;
	padding: 24px 0;
	padding: 1.714285714rem 0;
}
footer[role="contentinfo"] a {
	color: #686868;
}
footer[role="contentinfo"] a:hover {
	color: #21759b;
}

#3 @costdev
7 weeks ago

Excellent point @mukesh27!

Per W3C:

<footer>

contentinfo when in context of the
body element. The footer element is
not a contentinfo 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?

Last edited 7 weeks ago by costdev (previous) (diff)

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


4 weeks ago

#5 @ryokuhi
4 weeks 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 @costdev
4 weeks ago

@ryokuhi Thanks for reviewing the ticket today! :)

That's right, only the role attribute in default themes needs to be addressed.

#7 @costdev
10 days ago

  • Focuses css added
  • Keywords 2nd-opinion added
Note: See TracTickets for help on using tickets.