Mar*_*arc 11 css html5 accessibility semantic-markup wai-aria
我有一个类似下面的网页:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<header>
<span>Logo</span>
<nav>Navigation</nav>
</header>
<main>
<h1>Page heading</h1>
<div>
Page content
</div>
</main>
<footer>
Content information
</footer>
</body>
</html>
页面结构类似于当前HTML5草案中的一个示例:http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element,我认为它是语义正确.
现在我想使用CSS设置此文档的样式.我想成为顶部的页眉和底部的页脚,当然,这很容易实现.在标题内部,我想将徽标放在右侧,并在中心导航,这也没关系(例如,使用灵活的盒子布局模型,这是现代浏览器支持的一种或另一种方式,或者使用花车).
当我想将主要的内容标题(h1元素)放在标题的左侧时,我的问题就开始了.我可以使用position:absolute,但是这样的布局不是很灵活,并且只要标题或标题的大小发生变化就会中断.建议的CSS网格布局http://www.w3.org/TR/css3-grid-layout/可能能够完全符合我的要求,但据我所知,它仅在IE 10中得到支持(不知何故) .
一个简单而有效的解决方案是简单地重构我的页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div>
<h1 id="heading">Page heading</h1>
<header>
<span>Logo</span>
<nav>Navigation</nav>
</header>
</div>
<main aria-labelledby="heading">
<div>
Page content
</div>
</main>
<footer>
Content information
</footer>
</body>
</html>
然而,这个解决方案虽然易于布局,但它的完整语义只能通过aria-*属性表达,并且似乎违背了HTML5语义的精神(特别是主要元素).
虽然我的示例页面可能很简单,但您可以轻松想象一个更复杂的页面,其中更多元素的视觉位置与HTML5标记的流顺序的顺序不同(并且嵌套以便灵活的框布局顺序属性赢得还不够.你会如何解决这个问题？用非语义元素(例如div)重写HTML5标记,使其更多地与视觉布局相对应,然后尽可能用新结构通过语义元素(例如页脚或主要元素)交换非语义元素？
我遇到了和你一样的难题,我很欣赏这种挫败感.我会尝试一个否定的答案,因为我觉得这两个积极的答案(说你可以实现两个目的)都忽视了这一点.
首先,我看到它的方式,你的主要困难是CSS不能将元素移动到新容器.这两个答案分为两类:
一些是超特定的黑客(主观上讲)涉及浮动,负边距和/或绝对定位,其可以将一个项目呈现在其容器之外.这些可能是有效的,但仅限于非常具体的情况.随着您的需求增长,维护变得困难,并且需要设置一个相当大的思维上限来解决您之前错过的每个新需求或边缘情况.@jennifit的答案试图让你朝着这个方向前进.我相信,这是那些努力遵循语义HTML5精神的人所采取的正常路线,这是令人钦佩的.但这可能是一个泥潭,让你开始准确地询问你是谁维持你的语义纯度？它适用于搜索引擎,屏幕阅读器还是易于维护？在下一次分类之后我会回到这里.
有些是实用的理性化,声称在语义上是等同的,但实际上是不同的语义.在我看来,这些实际上是语义黑客攻击.@ volker-e的回答就是这个例子.他是对的,这是一个可行的替代标记 - 但是,它不等于相同的语义.在h2所属main作为一个h1-它是没有意义的网页的标题中移动它.事实上,你说你的标题与你的主要内容无关.在某些方面,这比使用您想要使用的div更糟糕,因为您通过将页眉和网站标题分组为相同的语义重要来制作错误的语义关系header.语义上无意义的容器,比如div,对于header和main,其实在我看来少倔强.
所以,回到我所说的关于你保持语义纯洁性的内容,这是真正的哲学问题.通常存在一种明显,有效且可维护的解决方案,而没有对现有语义元素或css"技巧" 进行合理化的误用.在你的情况下,如果一个项目在语义上是一个孩子,但在某种程度上不是一个孩子,答案是你已经提出的一个问题:
用非语义元素(例如div)重写HTML5标记,使其更多地与视觉布局相对应,然后尽可能用新结构通过[sic]语义元素(例如页脚或主要)交换非语义元素.
无论你是纯粹的语义纯度,这都是正确的做法
唯一的另一个可能的答案是,如果您认为HTML语义非常重要,那就是接受分层HTML语义对您的布局施加的限制.问题是,CSS中没有办法重新创建布局层次结构.在此之前,您必须接受HTML既是表示语言又是语义语言,因此,语义总是"更好"和"更糟".在许多(如果不是大多数)布局中,真正美丽或丰富或完美的语义将是无法实现的.