[wp-trac] [WordPress Trac] #54079: Remove "role" attribute on HTML5 elements with a default landmark role.

[WordPress Trac]

#54079: Remove "role" attribute on HTML5 elements with a default landmark role.
---------------------------------------------+-----------------------------
 Reporter:  costdev                          |      Owner:  (none)
     Type:  enhancement                      |     Status:  new
 Priority:  normal                           |  Milestone:  Awaiting Review
Component:  General                          |    Version:
 Severity:  normal                           |   Keywords:  has-patch
  Focuses:  accessibility, coding-standards  |
---------------------------------------------+-----------------------------
 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
 [https://make.wordpress.org/themes/handbook/review/accessibility/required
 /#aria-landmark-roles required role attributes] and [https://www.w3.org/TR
 /wai-aria-practices/examples/landmarks/HTML5.html 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.

 {{{#!diff
 # 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/54079>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform