我一直在使用Mac OSX的内置屏幕阅读器来测试我的网站,我知道它不是最好的,但它是我现在所拥有的.但我发现它并没有停留在元素的末尾......这是有道理的; 但我发现自己放置隐藏的时间来使事物变得可读:
<div class="breakdown">
<strong>35</strong> New<span class="visuallyhidden">.</span><br>
<strong>4</strong> Overdue<span class="visuallyhidden">.</span>
</div>
Run Code Online (Sandbox Code Playgroud)
我觉得这样做真的很脏,但是如果我不这样做,它要么破坏设计,要么用连续的句子来阅读,这是不可理解的.
有没有人有这样的经历提供?
所以我有一个表单,我将有与每个输入/元素相关的错误消息.我已经为<aside>标签提出了这个用法,并想知道人们的想法:
<section class="fieldrow" id="rowJobTitle">
<label for="txtJobTitle" id="lblJobTitle">
<span>Job title:</span>
</label>
<input type="text" id="txtJobTitle" name="txtJobTitle">
<aside id="errJobTitle" class="errormessage">
<span role="alert">Please tell us your job title.</span>
</aside>
</section>
Run Code Online (Sandbox Code Playgroud)
然后我将使用CSS来显示或隐藏<aside>错误,用一点JS来改变它.
我知道我可以使用跨度,并完成它,但是span标签没有语义价值,我读过的所有(简短和模糊)信息<aside>似乎都说没有问题,但我是希望我能得到一些确认,或者之前尝试过这个的人,并找到一个很好的理由不这样做.
谢谢,Si.
我希望有人可以使用几种不同的平板电脑进行测试,或者通过广泛的理论理解可以告诉我,我的常见平板电脑尺寸(取自:http://nmsdvid.com/snippets/)的查询是否有效.
我的主要观点是运营商(特别是针对4种不同设备中的一种)是否正确;
@media only screen and (
((min-device-width : 768px) and (max-device-width : 1024px)),
((min-device-width : 600px) and (max-device-width : 1024px)),
((min-device-width : 800px) and (max-device-width : 1080px)),
((min-device-width : 800px) and (max-device-width : 1280px))
) and (orientation : landscape) {
body{ background-color: pink; }
}
Run Code Online (Sandbox Code Playgroud) 我在页面上有元素,我想要动画来查看,但是在他们动画后,我想将它们的动画更多地推迟到CSS(通过改变类)...我发现Velocity留下我所有的动画style=标签中的属性使CSS转换不可能.
我在下面有一个解决方案,但重置CSS完成似乎不确定,我想知道是否有更好的方法来做到这一点?
// first use CSS to hide the element and squish it
$el.css({
width: 0,
left: "-10px",
opacity: 0,
marginRight: 0,
transition: "none"
})
// now animate the width and margin (do this first
// so there's a little gap between existing elements
// before we fade in new element.
.velocity({
width: width,
marginRight: margin
}, {
queue: false,
duration: 230
})
// then fade and move in the new element,
// but …Run Code Online (Sandbox Code Playgroud) css ×4
animation ×1
html ×1
html5 ×1
javascript ×1
jquery ×1
semantics ×1
tablet ×1
velocity.js ×1