如果我想让我的网站跨平台兼容(PC,iPHONE其他手机,PDA)和Accessible(兼容屏幕阅读器),我应该避免使用JavaScript,jQuery,flash,Ajax,Silverlight吗?
我应该只使用带服务器端语言的xhtml css来获得更广泛的可访问性吗?
对于PC pr MAC我首先为Firefox做了一切,所以对于移动应该选择哪种浏览器?
什么是最好的方法是让屏幕阅读器类型的辅助设备以富有洞察力的方式宣布部分?
理想情况下,<h1>有没有一种方法可以标记<section>可以实现此目的的实际标记,而不是将此作业传递给子标记?
如果a <article>被分解为<section>s,则认为<section>s不适合联合,但它们仍应在文档结构中具有自己的固有身份.我们作为HTML作者如何记录这一点?
示例:给出此树:
Article: A review of the iPad
section: brief preamble, statement of goals
section: aesthetics
section: performance
section: target market
section: wrap up
Run Code Online (Sandbox Code Playgroud)
我们如何标记<section>s以使辅助设备能够从<section>标签中获取部分焦点?
这是HTML中的一个例子:
<!DOCTYPE html>
<html>
<head> <!-- meta data and css --> </head>
<body>
<article>
<h1>An article about markup!</h1>
<section id="examele_1">
<h1>Example 1</h1>
</section>
<section class="example 2">
<h1>Example 2</h1>
</section>
<section data-subject="Example 3">
<h1>Example 3</h1>
</section>
</article>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
那么:示例1到3中的任何一个都是不错的选择,还是有更好的选择?
一位同事向我推荐了http://access.aol.com/dhtml-style-guide-working-group/#menu,但我不确定那里的信息是最新的(或过期的!) . 我也尝试过http://www.w3.org/TR/wai-aria/(以及其他一些网站!),但没有看到任何可以回答我的具体问题的内容。
我正在一个网站上工作,其中小部件将焦点放在水平链接列表中的项目上。我想确保允许用户使用 Tab 键定位到菜单的开头,然后使用左右箭头键(而不是 Tab 键)来浏览各个列表项仍然是一种很好的做法。我可以想象有些用户会更喜欢/更轻松地使用每种方法。我想提一下,我已经在屏幕阅读器上测试了该网站,并且它确实口头确认了每个项目。
在此先感谢您的帮助!
在Web应用程序中,我具有具有以下结构的事物列表:
如您所见,当我们列出项目(用户,角色或基本上任何东西)时,我们在右侧有一些关联的操作,以黄色突出显示。在这种情况下,所有项目都有一个Delete选项。
但是,如果我运行ADA遵从性工具,则会收到警告,提示:
警告:确保指向不同HREF的链接使用不同的链接文本。
解决此问题的正确方法是什么,因为所有Delete链接显然都指向不同的链接(例如:)javascript:Delete(123)。我知道这只是一个警告,我可以忽略,但是修复它可能会很好。
我不想将链接文本更改为,Delete XYZ因为这将是多余的,而且可能也不适合屏幕。
我正在使用Firefox的辅助功能评估工具栏进行测试。
编辑:当使用屏幕阅读器,标签顺序Administrator,Delete,Advisor,Delete,Instructor,Delete,...作为项目也带你到其中的每一项细节/编辑链接。我不是可访问性方面的专家,但是它看起来已经很多余了,因为它已经在阅读每个项目之前了Delete。
所以这似乎是一个非常简单的问题,但我无法理解。我有以下 HTML:
<h2>word 1 - <strong> word 2 </strong></h2>
Run Code Online (Sandbox Code Playgroud)
我知道这在语义上是不正确的,我不应该有一个strong内部标题,但由于设计要求,我需要加粗第二个词而不是第一个。
我试图确保这些文本仍然可以访问,但是当我使用屏幕阅读器时,它给了我奇怪的读数。我猜这是因为<strong>标签内的<h2>标签。
有谁知道更好的方法来做到这一点?我错过了什么吗?
编辑:抱歉,您说得对,“奇怪的读数”并没有说太多。当我将鼠标悬停在标题上时,它会显示单词 1,而我必须将鼠标悬停在单词 2 上才能将其显示在阅读器中,所需的行为是:悬停标题并阅读单词 1 和 2。
编辑 2:使用<span>和<b>标签产生相同的行为
我试图让屏幕阅读器(NVDA)读取我的货币价值(美元)47.49美元作为"47美元49美分",但屏幕阅读器读取我的货币值为"美元4749".
<div class="perVendorCarDetails">
<span class="carCurrencySymbol">$</span>
<span class="carPriceDollar">38</span>
<span class="carPriceDot">.</span>
<span class="carPriceCents">57</span>
</div>
Run Code Online (Sandbox Code Playgroud) 如果aria标签的内容发生更改,是否可以使屏幕阅读器重新读取select元素?
我做了一个简单的代码段,我知道我没有遵循大多数咏叹调惯例,以表明我的意思。
如果打开屏幕阅读器并单击div,它将读取标签“ unchecked”(如果未按下),标签将更新,但屏幕阅读器将保持沉默。尽管单击并再次打开它会读取新标签。
这是使屏幕阅读器读取更新的正确方法,还是我不知道的另一种方法?
let toggleSwitch = document.querySelector('.toggle-switch');
toggleSwitch.addEventListener("keyup", function(e) {
let code = (e.keyCode ? e.keyCode : e.which);
if (code == 32) {
let nextState = toggleSwitch.getAttribute('aria-label') == 'unchecked' ? 'checked' : 'unchecked';
toggleSwitch.setAttribute('aria-label', nextState);
}
})Run Code Online (Sandbox Code Playgroud)
.toggle-switch {
width: 50px;
height: 50px;
}
.toggle-switch[aria-label="unchecked"] {
background: red;
}
.toggle-switch[aria-label="checked"] {
background: green;
}Run Code Online (Sandbox Code Playgroud)
Press space to change state
<div class="toggle-switch" tabindex="0" aria-label="unchecked"></div>Run Code Online (Sandbox Code Playgroud)
谢谢你的帮助。
当谈到可访问性时,通常的做法是不使用占位符代替标签,因为在字段中输入内容时,占位符会消失。但是,如果我的占位符之后充当视觉标签怎么办?
在这种情况下只使用占位符代替实际的标签仍然可以吗?如果是这样,我还需要用 aria-label 来标记它吗?
label accessibility placeholder screen-readers ada-compliance
我正在尝试确定用于标题(书籍、电影、歌曲等)的 HTML 的最佳实践。我想弄清楚 an<em>是正确的,还是斜体的<span>,还是其他的。<em>根据 HTML 规范或惯例,使用标签/元素作为标题在语义上是否正确?
例如,这里是一本书的书评摘录:“Reaching & Teaching Them All”,我想知道如何标记书名本身:
“与学生的初次会面是给人留下良好第一印象的关键,并提供让孩子放心的重要机会。通过在早期接触中精心安排您与学生的关系,您可以创造一个更好的学习环境,这将有助于鼓励倾听和学习。接触和教学他们都提出了获得和保持学生注意力和兴趣的各种方法,包括讲故事、玩游戏、拥抱肢体语言以及使用幽默和讽刺。”
我正在使用旁白,我试图让它将数字作为单个数字读取,例如,如果我输入了 2000,旁白会读出“2000”。我希望所需的行为读出“两个零零零”。
我当前的输入元素看起来像这样
<input class="some-class" id="some-id" name="some-name"
type="text">
Run Code Online (Sandbox Code Playgroud)
我曾尝试将 type 属性设置为type="number",type="tel"并添加一个等于 的样式属性style="speak:spell-out",但它们都不起作用。
当我用空格分隔数字时,就像value="2 0 0 0"它的工作一样,但是当然,您不能指望用户这样做。
我知道可能有一种方法可以使用 javascript 来做到这一点,但由于业务需求,该解决方案不能在浏览器中包含 javascript。
有什么建议?
screen-readers ×10
html ×7
javascript ×3
wai-aria ×2
ajax ×1
focus ×1
html5 ×1
jquery ×1
label ×1
navigation ×1
placeholder ×1
price ×1