小编sim*_*.me的帖子

在屏幕阅读器中暂停可访问性

我一直在使用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)

我觉得这样做真的很脏,但是如果我不这样做,它要么破坏设计,要么用连续的句子来阅读,这是不可理解的.

有没有人有这样的经历提供?

html css accessibility screen-readers

9
推荐指数
2
解决办法
4051
查看次数

HTML aside标签:可以用于表单错误消息吗?

所以我有一个表单,我将有与每个输入/元素相关的错误消息.我已经为<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.

css error-handling html5 semantics

7
推荐指数
1
解决办法
1858
查看次数

常见平板电脑尺寸的CSS媒体查询

我希望有人可以使用几种不同的平板电脑进行测试,或者通过广泛的理论理解可以告诉我,我的常见平板电脑尺寸(取自: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 tablet media-queries

3
推荐指数
1
解决办法
9210
查看次数

Velocity.js在动画后清除默认值

我在页面上有元素,我想要动画来查看,但是在他们动画后,我想将它们的动画更多地推迟到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)

javascript css jquery animation velocity.js

2
推荐指数
1
解决办法
3532
查看次数