E-mail List Archives
Thread: Seeking best practice on heading & landmarks in single-page web apps
Number of posts in this thread: 3 (In chronological order)
From: a.james@soton.ac.uk
Date: Wed, Nov 21 2018 5:32AM
Subject: Seeking best practice on heading & landmarks in single-page web apps
No previous message | Next message →
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
From: glen walker
Date: Wed, Nov 21 2018 3:22PM
Subject: Re: Seeking best practice on heading & landmarks in single-page web apps
← Previous message | Next message →
> I am reluctant to implement headings [for] purely navigation [purposes]
I agree with you that visually hidden headings shouldn't be added just for
navigational purposes. If a heading is important, it should be there for
everyone.
If there are no logical places to put headings, then don't force them in.
If you have landmarks (with labels), even if they're not used, then it
sounds like your page organization is good. Navigating by landmarks, even
if not popular, is a very powerful tool. I don't think users appreciate
them enough, perhaps because they haven't been implemented well in the
past. I use them fairly often, but I know what they are. Casual web and
screen reader users might not be familiar with them.
Glen
From: a.james@soton.ac.uk
Date: Fri, Nov 23 2018 3:19AM
Subject: Re: Seeking best practice on heading & landmarks in single-page web apps
← Previous message | No next message
Thanks Glen. Do you have any examples of web applications that use landmarks
well or you think are easy to navigate?
Abi
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen
walker
Sent: 21 November 2018 22:23
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Seeking best practice on heading & landmarks in
single-page web apps
> I am reluctant to implement headings [for] purely navigation
> [purposes]
I agree with you that visually hidden headings shouldn't be added just for
navigational purposes. If a heading is important, it should be there for
everyone.
If there are no logical places to put headings, then don't force them in.
If you have landmarks (with labels), even if they're not used, then it
sounds like your page organization is good. Navigating by landmarks, even
if not popular, is a very powerful tool. I don't think users appreciate
them enough, perhaps because they haven't been implemented well in the past.
I use them fairly often, but I know what they are. Casual web and screen
reader users might not be familiar with them.
Glen
https://emea01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webai
m.org%2F&data=01%7C01%7Ca.james%40soton.ac.uk%7Cc1cc98c3125943fe898b08d6
500036f6%7C4a5378f929f44d3ebe89669d03ada9d8%7C1&sdata=3tlokUK%2BRIiWWkEF
d0L5TkFCJrRyF9aI6Mh7szAxwTk%3D&reserved=0
List archives at
https://emea01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org
%2Fdiscussion%2Farchives&data=01%7C01%7Ca.james%40soton.ac.uk%7Cc1cc98c3
125943fe898b08d6500036f6%7C4a5378f929f44d3ebe89669d03ada9d8%7C1&sdata=6%
2BOSk9rpLvKaB4LTM%2BLiXwntE67TDB6%2B74ZpeuxR7M8%3D&reserved=0