[wp-trac] [WordPress Trac] #31450: Add landmark roles to WordPress admin areas

Sun Mar 15 10:22:11 UTC 2015

#31450: Add landmark roles to WordPress admin areas
----------------------------+--------------------------------------------
 Reporter:  joedolson       |       Owner:  joedolson
     Type:  defect (bug)    |      Status:  assigned
 Priority:  high            |   Milestone:  4.2
Component:  Administration  |     Version:
 Severity:  normal          |  Resolution:
 Keywords:  has-patch       |     Focuses:  accessibility, administration
----------------------------+--------------------------------------------

Comment (by rianrietveld):

 Test results from the wapa11y test team on patch 31450.4

 '''Geof Collis''': JAWS 14.5 IE 11
 ARIA landmarks work great but I'm assuming there is nothing in the "main"
 area as it just goes into a navigation role.

 '''John Sexton''':

 Supernova V14 + IE11 + Win7
 Supernova found 6 landmarks through its list landmarks feature.
 main menu navigation: top of page
 navigation: 11 items
 main: top of main column, including top navigation
 navigation: joins top navigation
 top navigation toolbar navigation: 4 items
 content info: thank you message
 This only giving 4 effective landmark points:
 main menu navigation: which is top of page
 navigation: which is the main menu
 main + navigation + top navigation toolbar + navigation: top navigation
 content info: footer

 NVDA + IE11 + Win7
 Using the NVDA key D, & shift+D I can navigate to 4 points:
 main menu navigation: Top of page, where two skip links are.
 Navigation, where there are 11 list items
 main, this one gets confusing, as it reads: main landmark, navigation
 landmark, top navigation toolbar, navigation landmark list with 4 items
 ...
 content info: thank you message

 Suggestions:
 Remove main menu navigation as it is effectively top of page and most
 assistive technology includes controls for top of page.

 {{{
 <div id="adminmenumain"><!-- removed: role="navigation" aria-label="Main
 menu" -->
 }}}

 Change the first navigation to main menu navigation

 {{{
 <div id="adminmenuwrap" role="navigation" aria-label="Main menu"><!--
 added: aria-label="Main menu" -->
 }}}

 Move the main to the start of the main content area IE either the
 help/screen options links (as below) or the first heading.

 {{{
 <div id="wpcontent"><!-- remove:  role="main" -->
 <div id="wpbody-content" role="main" aria-label="Main content"
 tabindex="0"><!-- added: role="main" -->
 }}}

 Remove one of the second navigations leaving only one navigation for the
 top navigation toolbar

 {{{
 <div id="wpadminbar" class="nojq nojs"><!-- remove:  role="navigation" -->
 }}}

 '''Gabriela Nino de Rivera Torres'''
 Tools: VoiceOver+Safari 8.0.3 on Mac. FF+NVDA and Windows XP.

 Results:
 Navigation in both Safari and NVDA was confusing because the names of the
 roles don't give enough context to the user. In some cases like main or
 navigation it is really difficult to imagine were I'm heading if I click
 on those links. Most of the roles sent the user to the top of the page but
 there is not a role letting the user to go directly to the main content. I
 agree with John Sexton's suggestions and I would like to add to his list
 to change the name role for the footer (contentinfo) to something that
 will explain better the destination of the link like web site information
 or WordPress information, etc.

 Landmarks with Safari and VoiceOver:
 Using the rotor, I opened the list menu for landmarks. Here is the list of
 landmarks:
 (I tried to make a print screen of the list, but I could not use
 shift+command+4 while VoiceOver is on)

 Role -> destination
 Main menu navigation -> skip to main content link
 navigation -> dashboard
 main -> WordPress logo
 navigation -> somewhere at the top I think
 Top navigation toolbar. navigation (not sure where is this one coming
 from)
 content information -> footer information

 Landmarks with FF and NVDA: see image:
 [[Image(https://rrwd.files.wordpress.com/2015/03/landmarksmenunvda.png)]]

 Michelle DeYoung
 {{{
 62 <div id="wpwrap">
 63 <div id="adminmenumain" role="navigation" aria-label="Main menu">
 64 <a href="#wpbody-content" class="screen-reader-shortcut">Skip to main
 content</a>
 65 <a href="#wp-toolbar" class="screen-reader-shortcut">Skip to
 toolbar</a>
 66 <div id="adminmenuback"></div>
 67 <div id="adminmenuwrap" role="navigation">
 68 <ul id="adminmenu">
 }}}

 Remove this landmark role on line 67. Line 63 has a landmark role for the
 Main Menu Navigation already established.

 {{{
 102 </div>
 103 </div><div id="wpcontent" role="main">
 }}}

 Move Main Landmark role at line 103 to Line 133 and add it to the div
 element that has the aria-label of “Main content”

 {{{
 105 <div id="wpadminbar" class="nojq nojs" role="navigation">
 106 <div class="quicklinks" id="wp-toolbar" role="navigation" aria-
 label="Top navigation toolbar." tabindex="0">
 107 <ul id="wp-admin-bar-root-default" class="ab-top-menu">
 }}}

 Remove this landmark role on line 105. Line 106 already had the Top
 Navigation Toolbar established.

 {{{
 131 <div id="wpbody">
 132
 133 <div id="wpbody-content" role=”main” aria-label="Main content"
 tabindex="0">
 134 <div id="screen-meta" class="metabox-prefs" role=”navigation” aria-
 label="Contextual Help Tab”>
 135
 136 <div id="contextual-help-wrap" class="hidden" tabindex="-1" aria-
 label="Contextual Help Tab”>
 137 <div id="contextual-help-back"></div>
 138 <div id="contextual-help-columns">
 }}}

 Added role=”main” from Line 103 . The aria-label already was in the div
 element.
 Add the aria-label from Line 136. Also add the role=”navigation”.  One
 could argue that it might be suited for role=”complementary” as well.
 Move the aria-label to Line 134

 '''Note from Rian:'''
 Andrea fixed the double navigation landmark, Michele and Gabriele
 mentioned, in patch 31450.5.patch
 [[Image(https://cldup.com/WR6hVZvtef.png)]]

 '''Tobias Clemens Häcker:'''
 Tested with: Wave Toolbar 1.1.8, Browser Mozilla, Windows7

 The roles to navigation for the main content: role="main"
 and for the footer: role="contentinfo" are displayed correctly.
 In the end they add the voice output like "main content" but a more
 specific voice output that sums up the content of the area would be
 better. It works fine for navigation.
 Area roles are probably more relevant for SEO than for accessibility.

 '''Remarks Rian:'''

 The labeling is confusing. patch 5 is an improvent, but the content of the
 labels need to give more information about the context. Michelle, Gabriela
 and John gave some extra improvements.
 In the team we discussed if landmarks are used or not, because some
 testers never use landmarks.
 Does a screen reader user then actually know what it means when the
 landmarks are read out in the content.
 Like one tester mentioned, while testing something else: "I see in braille
 the text: "main content", and I can't figure out where that came from".

 @afercia found some statitics:
 http://webaim.org/projects/screenreadersurvey5/
 http://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/

--
Ticket URL: <https://core.trac.wordpress.org/ticket/31450#comment:26>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform