Issues
2 of 2
Profile: My Profile popover: Ensure ARIA roles, states, and properties are valid
GENERAL
TESTING
GENERAL
TESTING
Description
Details
Priority
MinorAffects versions
Components
Assignee
UnassignedUnassignedReporter
Matthew JonesMatthew Jones
Details
Details
Priority
Affects versions
Components
Assignee
Unassigned
UnassignedReporter
Matthew Jones
Matthew JonesCreated April 19, 2018 at 7:36 AM
Updated September 17, 2024 at 7:46 PM
Activity
Mark GolbeckSeptember 12, 2024 at 7:39 PM
@Chris Knapp is this still an issue?
[Not fixed] - 3/13/2018
For example, all tabs (My Profile, Pictures, Connections, Messages, Search, Privacy and Preferences) under "Profile" page lacks "tab" implementation.Throughout the environment tab controls are implemented to present content. However, these tabpanels are constructed by placing a <role> of "tabpanel" on the containing <ul>, as well as a <role> of "tab" on each inner anchor. Implementing roles of "tabpanel" and "tab" imply that standard keyboard interaction (left and right arrow keys) should navigate the tab elements. However, this function is not provided and instead a keyboard user is forced to tab through the tab elements with the tab key. This is nonstandard interaction and can be quite confusing for screen-reader users.HTML:<ul role="tabpanel" class="nav nav-tabs"><li class="activeTab"><a href="#" role="tab" aria-controls="schedPanel" id="id5"><span>Upcoming</span></a></li>...OR<ul class="navIntraTool actionToolbar" role="menu"> <li role="menuitem" class="firstToolBarItem"><span> ... <a href="#" title="Go to Authoring Page" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('questionpool'),{'questionpool:j_id_jsp_274369455_7':'questionpool:j_id_jsp_274369455_7'},'');}return false">Assessments</a></span></li> <li role="menuitem"><span> <a href="#" title="Go to Assessment Type Page" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('questionpool'),{'questionpool:j_id_jsp_274369455_11':'questionpool:j_id_jsp_274369455_11'},'');}return false">Assessment Types</a> </span></li>
...The role of "tabpanel" and "tab" indicates standard keyboard interaction that is not currently provided. The user should be able to tab to the first tab in the tabpanel, and then navigate through the tabs with the left and right arrow. Developers are urged to review the following links regarding tabpanel implementation and keyboard navigability.https://www.w3.org/TR/wai-aria/#tabhttps://www.w3.org/TR/wai-aria/#tablisthttps://www.w3.org/TR/wai-aria/#tabpanelhttps://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel