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

Mark up or identify structural elements of an app

XMLWordPrintable

      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.

        Acceptance criteria

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

                Created:
                Updated:

                  Task DoD

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