小编Sim*_*son的帖子

我们现在正在办公室进行一些讨论,讨论如何使用CSS在页面上直观地重新排序元素.

在一个非常基础的层面上,我们团队的一名成员希望像这样构建HTML(此请求仅基于设计视角)

<div class="secondary-content">
    <h2>Secondary content heading</h2>
    <p>This is the secondary content</p>
</div>
<div class="main-content">
    <h1>Main heading</h1>
    <p>This is the main content</p>
</div>

然后使用CSS在视觉上放置main-contentdiv secondary-content.

现在,我不要求帮助我们如何在技术上实现这一点,但更多的我在寻找证据来支持我们的论点不应该做的.

作为前端开发者,我的初衷是关于可访问性

1. 屏幕阅读器/辅助技术将secondary-content首先出现.对我来说,这类似于打开一本书,从第4章开始,然后回去阅读第1,2,3,5,6章等
2. 页面的标题结构将脱节(H2之前的H2等)
3. 如果有任何内容secondary-content需要信息main-content才能被理解,那么对于使用CSS关闭/辅助技术等的用户来说会很困惑

然而,业务人员的真正热门按钮是Google/SEO.因此,有没有人知道任何好的论点/文章,为什么以错误的结构方式编写HTML会对我们的SEO产生负面影响？

首先,我已经看过上一个问题,但遗憾的是它似乎没有提供任何解决方案(除了JS,我担心这是一个非首发)

我的页面顶部有一些跳过链接...

<ul>
<li class="skip-link"><a href="#mainContent" accesskey="S"><span>Skip to main content</span></a></li>
<li class="skip-link"><a href="#main-navigation" accesskey="N"><span>Skip to main navigation</span></a></li>
</ul>

还有下来......

<div id="mainContent"></div>

这是一个空的div纯粹作为一个锚点.

链接激活后,一切似乎都能正常工作; 在视觉上页面向下跳转,焦点转移到#mainContent之后的第一个链接.

但是在Chrome(版本12.0.742.91)中,虽然页面在视觉上向下移动,但焦点却没有,这意味着在激活访问键之后,再次跳转只会将您跳回到页面顶部并返回到访问链接.

我有一个与IE相同的问题,它被归结为一个已知的怪癖,并通过设置一个特定的宽度到目标元素来修复.但是,这似乎不适用于Chrome.我还尝试在#mainContent div中添加一个tab-able元素,在#mainContent div中添加任何类型的内容,以及各种浮动/宽度/高度变化,似乎没有什么可以修复它.

有没有人与Chrome有任何类似的问题或知道修复？

在此先感谢大家

西蒙