WebAIM - Web Accessibility In Mind

E-mail List Archives

Seeking best practice on heading & landmarks in single-page web apps

for

From: a.james@soton.ac.uk
Date: Nov 21, 2018 5:32AM

Hello!



I am working on a couple of projects to improve the accessibility of
single-page web apps and I am looking for some best practice on the use of
headings and landmarks. These UIs don't fit the usual hierarchical structure
of text headings that is usually presented in documentation as the UI is
made up of panels.



For example, one project offers similar tools to PowerPoint. So far we have
implement landmark regions and kept heading tags to match the text content
on the screen. This means there can be a toolbar and other functions in the
region before you get to a heading. We have received testing feedback from
screen reader users requesting more headings to aid navigation through the
panels which would require implementing hidden headings at the top of each
landmark region. I know from discussions on this forum earlier this year,
screen reader survey, testing etc that navigating by headings is more
familiar to users than landmarks. But I am reluctant to implement headings
purely navigation that could also overload the screen reader user.



So I have been looking at popular, well-known single-page apps replicating
desktop applications (Apple, Google, Microsoft etc) to see what heading
structure would be familiar to users and I have been surprised to find that
these apps are generally only using h1s and landmark regions are not widely
used either. Does anyone have examples of good practice to help with
navigating through apps like this or some advice?



Thanks!



Abi James

Research Fellow, Accessibility Team,

University of Southampton