[MGNLUI-4041] Mark up or identify structural elements of an app Created: 21/Oct/16  Updated: 16/Dec/20

Status: Open
Project: Magnolia UI
Component/s: app, applauncher
Affects Version/s: 5.4.9
Fix Version/s: None

Type: Story Priority: Neutral
Reporter: Antti Hietala Assignee: Unassigned
Resolution: Unresolved Votes: 0
Labels: WAI-ARIA, accessibility
Remaining Estimate: 2d
Time Spent: Not Specified
Original Estimate: 2d

Attachments: PNG File app-path.png    
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Epic Link: Accessibility improvements

 Description   

Screen reader software analyses a web app's structure to give a visually impaired user an overview. The overview is basically a list of HTML elements that the user can navigate to quickly. The screen reader looks for these elements in the HTML:

  • Headings on the page. (Magnolia AdminCentral does not use headings in markup)
  • Anchors on the page (Magnolia AdminCentral does not use anchors in markup)
  • Links on the page. (Magnolia AdminCentral contains many links such as the app tiles in the app launcher.

Example: All apps have a status bar at the bottom that shows the current path. This element would be a good navigation target. But there is no way to navigate to the element by tabbing on the keyboard. The element has no heading, no anchor and is not a link. It's just a div without an id attribute. So unless you see it with your eyes you don't even know it's there.

Investigate ways to mark up structural elements in AdminCentral and in apps. Inject IDs, headings, anchors or instruct the screen reader to treat something as a link. This would enable to user to quickly navigate to key elements in the app. Don't go too far so that the list generated by the screen reader doesn't grow too long which would again slow down the usage.


Generated at Mon Feb 12 09:12:39 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.