J4 Issue ?
avatar zwiastunsw
zwiastunsw
14 Jun 2018

Accessibility problem:
The key area on the pages of the "manager" type is the search tools. However, they are not marked as a landmark in the page code. The toolkit has no label or heading. Screen reader users cannot quickly access the main workspace by navigating through landmarks. A person who uses only the keyboard also has difficulty accessing these tools.
Step to reproduce issue:

  1. Go to Article manager page of the Joomla 4 Backend.
  2. Inspect code. Use the developer's tools in your browser to explore the code.
  3. Keyboard access. Try to access the search tools only using the keyboard (use Tab key).
  4. Screen reader access. Use the screen reader to navigate through the page.
  • NVDA:
    -- use D key to navigate through landmarks
    -- use NVDA key+F7 to open a list of links, headings, form fields, buttons and landmarks for a user to navigate (NVDA key = Insert or CapsLock)
  • JAWS
    -- use R key to navigate through landmarks
    -- use Control+Insert+R to open a list of all landmarks for a user to navigate
  • VoiceOver (desktop)
    -- use Ctrl+Option+U to open Rotor, next use left or right arrows to navigate to the Landmarks menu.

Expected result: You have access to a variety of landmarks, including search landmark
Current result: If you are using a screen reader, you can only access two landmarks - banner and navigation, but no search landmark. If you only use the keyboard, you can access it, but you must press the Tab key several times (tools are accessible but difficult to use).

WCAG references

Success criteria:

  • 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
  • 2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
  • 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

Techniques:

ARIA11: Using ARIA landmarks to identify regions of a page
H69: Providing heading elements at the beginning of each section of content
G141: Organizing a page using headings
H42: Using h1-h6 to identify headings
H69: Providing heading elements at the beginning of each section of content

WAI-ARIA practices

4.3.8. Search: A search landmark contains a collection of items and objects that, as a whole, combine to create search functionality.

  • Use the search landmark instead of the form landmark when the form is used for search functionality.
  • If a page includes more than one search landmark, each should have a unique label...

Tutorials, articles:

Suggested solution

  • Correct the code of the search tools (path: layouts/joomla/searchtools). Use the role="search" attribute to indicate a landmark.
  • Add a heading or label 'Search Tools' to screen reader only. It will be used in a special menu and by a screen reader.
avatar zwiastunsw zwiastunsw - open - 14 Jun 2018
avatar joomla-cms-bot joomla-cms-bot - change - 14 Jun 2018
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 14 Jun 2018
avatar zwiastunsw zwiastunsw - change - 14 Jun 2018
The description was changed
avatar zwiastunsw zwiastunsw - edited - 14 Jun 2018
avatar brianteeman
brianteeman - comment - 14 Jun 2018

Correct the code of the search tools (path: layouts/joomla/searchtools). Use the role="search" attribute to indicate a landmark.

Pull request incoming

Add a heading or label 'Search Tools' to screen reader only. It will be used in a special menu and by a screen reader.

Not needed as the landmark will be recognised by screen readers

avatar zwiastunsw
zwiastunsw - comment - 14 Jun 2018

Not needed as the landmark will be recognised by screen readers

I agree. But if you want to create a special menu, you can use a label or a heading in it. Screen reader users can also navigate through the headings.

avatar brianteeman
brianteeman - comment - 14 Jun 2018

Any "special menu" should be able to read a landmark role by default but anyway there is already a label present

I have done a PR to add the search role #20754
And another PR to remove the incorrect toolbar role on the searchbox #20755

avatar franz-wohlkoenig franz-wohlkoenig - change - 14 Jun 2018
Category Accessibility Templates (admin)
avatar franz-wohlkoenig franz-wohlkoenig - change - 14 Jun 2018
Status New Discussion
avatar brianteeman brianteeman - change - 14 Jun 2018
Labels Added: J4 Issue
avatar brianteeman brianteeman - labeled - 14 Jun 2018
avatar brianteeman
brianteeman - comment - 14 Jun 2018

All done and merged

avatar brianteeman brianteeman - change - 14 Jun 2018
Status Discussion Closed
Closed_Date 0000-00-00 00:00:00 2018-06-14 16:28:25
Closed_By brianteeman
avatar brianteeman brianteeman - close - 14 Jun 2018

Add a Comment

Login with GitHub to post a comment