1. 首页
  2. css

CSS列表中的导航:是或不是

如果你到处搜索是否应该使用列表作为网站导航的标记,你会发现没有争论。每篇文章都建议你应该这样做。您阅读的绝大多数教程都会使用列表进行导航。您看到的绝大多数模板都将使用列表进行导航。但这种无处不在的标记模式绝对正确吗?让我们看看。注意:在这篇文章发表后,一定要查看我们了解到的所有这些信息的包装文章。
您今天可能会看到的内容

Or if pre-HTML5, there would be no 标记,而不是使用Alternative: Listless Nav
An Old Battle
2005: Bruce Lawson does actual research with screen readers. The conclusion was that lists are best, but it was being compared against marking up lists in tables, so that makes sense.
2007: I posted about listless navigation and Dustin Brewer strongly disagreed that this should ever be used. Dustin\”s article talks about semantics, accessibility, and screen readers, but has no research and doesn\”t explain why the listless navigation is un-semantic or would present screen reader problems. Enter Reinhard Stebner
In January 2011, Reinhard spoke at a Refresh event in Baltimore and apparently made a HUGE impression on the audience. He is completely blind, and talks about markup accessibility.
Reinhard suggests not using lists for navigation, and instead using divs and spans.
Leah Vogely was at the event and writes:
I think everyone in the room scratched their heads when this was said. One of the first things you\”re taught about coding is how to structure a navigation and this is normally done with an unordered list. This list structure, however, is not conducive to the screen reader\”s logic. The span tag is not recognized by the screen reader, so it is one of the ways you can simplify your content for accessibility.
Another attendee writes:
Divs and spans are the way to go as they\”re invisible to screen readers. Stebner was tabbing through the far too many lists on mica.edu and they gave no clue as to where he was on the page and no information other than \”List, 10 items. List, 6 items…\” With divs and spans, the content is immediately available to the screen readers.
Jim Doran was also there:
Putting a navigation structure, which is just a collection of hyperlinks, in a list is supposed to allow screen readers to pause between each link instead of reading all the links as a sentence. Semantically, this makes sense. We use HTML to apply meaningful mark-up to content – making things lists seems like a good ides. Yet, there\”s no easy way to identify a list as a set of links, so a page with 12 sets of links can be very confusing. He demonstrated this with Jaws.
We touched on ARIA as a way to help deal with some of this, and instead of using lists for links, he would like to see more 和标记。
Reinhard Stebner说得非常清楚。他将JAWS用作屏幕阅读器,而列表中的导航则让他更难阅读。标签,我相信这会让语义的争论停止。如果你在标记导航,把它放在一个标签里。代替HTML5,或者如果你只是必须使用一个不同的包装元素,你有ARIA角色:**5***属性通过CSS链接。
So
你怎么看?无意义的追求?值得讨论?
就我个人而言,我已经有很长一段时间没有名单了。直到我看到一些可靠的研究表明这是愚蠢的,我坚持下去。像往常一样,最好的办法是从像Reinhard这样的屏幕阅读器用户那里获取更多信息。
如果我们继续使用列表,为什么它总是一个无序的列表?我记得Ryan Singer有一次发疯了。我们非常谨慎地选择了名单的顺序,这不合理吗?
在这篇文章发表后,一定要查看我们对所有这些的了解

CSS列表中的导航:是或不是 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%88%97%e8%a1%a8%e4%b8%ad%e7%9a%84%e5%af%bc%e8%88%aa%ef%bc%9a%e6%98%af%e6%88%96%e4%b8%8d%e6%98%af/