英文:
Using multiple, named section landmarks within main - beneficial or superfluous?
问题
作为一个不使用屏幕阅读器的用户,我觉得给页面添加命名节区会提升导航的便利性,也会加强现有的标题结构。通过屏幕阅读器快捷键(比如在NVDA中按 'd' 键),可以快速地在地标之间循环切换,为页面提供一个很好的摘要。
示例1展示了一个英国政府页面(显然必须具有高度可访问性),其中主要内容位于一个包含多个包含标题和列表的 <section>
标签的 <main>
标签中。
截图显示了一个显示地标的覆盖层 - 你可以看到搜索栏有自己的地标,然而后续的节区却没有(当然也可以通过其他方式导航到它们)。
如果我通过屏幕阅读器导航到这个页面,需要花费很长时间来在标题列表之间切换(也许我不知道有跳过这些的方法?)。
示例2展示了相同的网站,但使用了具有aria-label的命名区域,这意味着可以使用地标导航到每个节区 - 屏幕阅读器(例如NVDA)会读出 "Topics region Topics heading level 2",这似乎有些多余,但似乎能使导航更灵活,或者至少能够审核/总结一个网站。
我的问题是示例2是否有益处,或者反过来说,可能会对可访问性体验产生负面影响?
感谢任何想法。
示例1
示例2
英文:
As a non-screenreader user, I feel like adding named sections to a page would increase ease-of-navigation as would bolster any existing heading structures. Landmarks can be quickly cycled through via keyboard by screenreader shortcuts e.g. 'd' in NVDA, providing a good summary of a page.
Example 1 shows a UK government page (which obviously must be highly accessible), where the main content is in a <main>
tag containing multiple <section>
tags containing headings and lists.
The screenshot shows an overlay showing the landmarks - one can see that the search bar has its own landmark, however subsequent sections don't (they can be navigated to by other means, of course).
If I navigate this via screen reader, it takes a long time to tab or cycle through the lists of headings (maybe there is a way to skip these that I'm unaware of?)
Example 2 shows the same site but with named regions (via aria-label) which means that each section can be navigated to using landmarks - a screenreader (NVDA for example) reads out "Topics region Topics heading level 2", which does seem superfluous but does seem to make navigation more agile or atleast being able to audit/summarise a site.
My question is whether example 2 is beneficial or, on the flipside, perhaps even detrimental to the a11y experience?
Any thoughts appreciated
Example 1
Example 2
答案1
得分: 0
示例2更好,因为屏幕阅读器可以通过“地标”进行导航。除非有太多
我对
aria-label
感到惊讶。没有标签,
https://w3c.github.io/html-aria/#el-section
HTML元素:
role=region 如果section元素具有可访问名称
否则,role=generic
如果用户无法从中受益,为什么要费心设置
如果我通过屏幕阅读器导航,通过选项卡或循环浏览标题列表需要很长时间(也许有一种我不知道的跳过这些的方法?)
有很多
元素,如果你使用H键导航,那么浏览所有标题(h1、h2、h3、h4等)会花费一些时间。然而,你也可以通过特定的标题级别进行导航,使用1、2、3等。所以如果你想跳过所有的
元素,你可以使用2来快速跳到每个
之前的所有
元素。
英文:
Example 2 is better because of the additional way a screen reader can navigate (by landmark). There is no drawback to example 2 unless there are so many <section> elements that it defeats the purpose of having just a "handful" of landmarks to make it quick to jump to part of the page.
I'm surprised the <section> elements don't have an aria-label
. Without the label, the <section> is not considered a landmark.
https://w3c.github.io/html-aria/#el-section
> HTML element: <section>
>
> role=region if the section element has an accessible name
>
>Otherwise, role=generic
Why go to the trouble of having a <section> if the user can't benefit from it?
> If I navigate this via screen reader, it takes a long time to tab or cycle through the lists of headings (maybe there is a way to skip these that I'm unaware of?)
There are lots of <h3> elements and if you are navigating using the <kbd>H</kbd> key, then yes it'll take a while to go through all the headings (h1, h2, h3, h4, etc). However, you can also navigate by specific heading levels using <kbd>1</kbd>, <kbd>2</kbd>, <kbd>3</kbd>, etc. So if you want to skip over all the <h3> elements, you can navigate with <kbd>2</kbd> to quickly jump to each <h2> before all the <h3>'s.
之前的所有
元素。
英文:
Example 2 is better because of the additional way a screen reader can navigate (by landmark). There is no drawback to example 2 unless there are so many <section> elements that it defeats the purpose of having just a "handful" of landmarks to make it quick to jump to part of the page.
I'm surprised the <section> elements don't have an aria-label
. Without the label, the <section> is not considered a landmark.
https://w3c.github.io/html-aria/#el-section
> HTML element: <section>
>
> role=region if the section element has an accessible name
>
>Otherwise, role=generic
Why go to the trouble of having a <section> if the user can't benefit from it?
> If I navigate this via screen reader, it takes a long time to tab or cycle through the lists of headings (maybe there is a way to skip these that I'm unaware of?)
There are lots of <h3> elements and if you are navigating using the <kbd>H</kbd> key, then yes it'll take a while to go through all the headings (h1, h2, h3, h4, etc). However, you can also navigate by specific heading levels using <kbd>1</kbd>, <kbd>2</kbd>, <kbd>3</kbd>, etc. So if you want to skip over all the <h3> elements, you can navigate with <kbd>2</kbd> to quickly jump to each <h2> before all the <h3>'s.
英文:
Example 2 is better because of the additional way a screen reader can navigate (by landmark). There is no drawback to example 2 unless there are so many <section> elements that it defeats the purpose of having just a "handful" of landmarks to make it quick to jump to part of the page.
I'm surprised the <section> elements don't have an aria-label
. Without the label, the <section> is not considered a landmark.
https://w3c.github.io/html-aria/#el-section
> HTML element: <section>
>
> role=region if the section element has an accessible name
>
>Otherwise, role=generic
Why go to the trouble of having a <section> if the user can't benefit from it?
> If I navigate this via screen reader, it takes a long time to tab or cycle through the lists of headings (maybe there is a way to skip these that I'm unaware of?)
There are lots of <h3> elements and if you are navigating using the <kbd>H</kbd> key, then yes it'll take a while to go through all the headings (h1, h2, h3, h4, etc). However, you can also navigate by specific heading levels using <kbd>1</kbd>, <kbd>2</kbd>, <kbd>3</kbd>, etc. So if you want to skip over all the <h3> elements, you can navigate with <kbd>2</kbd> to quickly jump to each <h2> before all the <h3>'s.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论