[wp-trac] [WordPress Trac] #31450: Add landmark roles to WordPress admin areas
WordPress Trac
noreply at wordpress.org
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
More information about the wp-trac
mailing list