Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-4041

Mark up or identify structural elements of an app

    XMLWordPrintable

Details

    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.

      Checklists

        Acceptance criteria

        Attachments

          Issue Links

            Activity

              People

                Unassigned Unassigned
                ahietala Antti Hietala
                Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                  Created:
                  Updated:

                  Checklists

                    Task DoD

                    Time Tracking

                      Estimated:
                      Original Estimate - 2d
                      2d
                      Remaining:
                      Remaining Estimate - 2d
                      2d
                      Logged:
                      Time Spent - Not Specified
                      Not Specified