标签: screen-readers

避免按钮内出现屏幕阅读器文本

我想在 Jaws 读取时忽略按钮内的文本,我的代码是:

<span style="display:none;" id="text1">Hai</span>
<button aria-labelledby="text1"><span>firstbutton</span></button>
Run Code Online (Sandbox Code Playgroud)

但《大白鲨》读作“海”第一个按钮

提前致谢

google-chrome screen-readers wai-aria

5
推荐指数
1
解决办法
2584
查看次数

使用 JAWS 屏幕阅读器的 Angular(单页应用程序)中的“同一页面链接”问题

我正在 Angular 应用程序中进行一些 JAWS 可访问性测试,并遇到了一个有趣的问题。

JAWS 将指向其他视图的导航菜单链接视为指向同一页面的链接,因此在宣布链接名称之前会说“同一页面链接”。

然而,对于用户(无论是否有视力)来说,这些链接似乎不是同一页面,因为会出现一个新视图。

例如:

<a href="#">Home</a>
<a href="#/Transactions">Transactions</a>
Run Code Online (Sandbox Code Playgroud)

当 JAWS 读取此内容时,它会显示“同一页面链接:主页,同一页面链接事务”,但事务实际上是完全不同的视图。

有什么方法可以调整我的代码以使 JAWS 认为这不是同一页面链接?

accessibility screen-readers angularjs

5
推荐指数
1
解决办法
2373
查看次数

如果删除 HTML 元素,焦点应该设置在哪里?

我有这样的 HTML(简化):

<ul>
  <li><a id="1" onclick="removeItself(1)" href="#">first</a></li>
  <li><a id="2" onclick="removeItself(2)" href="#">second</a></li>
</ul>
<input type="text"></input>
Run Code Online (Sandbox Code Playgroud)

如果点击其中一个链接,它将被删除。就我而言,删除后,整个列表将再次呈现。

有很多问题,但一般是如果具有焦点的元素被删除,在哪里设置焦点?

例如,如果第二个列表元素被删除或所有元素都被删除,焦点应该设置在哪里?

在这种情况下,什么解决方案可以通过网络访问?将焦点始终设置在列表中的第一项是否可以接受,但如果删除所有项目以将焦点设置到下一个(输入)或上一个元素?

在 IE 中,焦点将被重置,并且将从页面的开头开始。

html internet-explorer accessibility focus screen-readers

5
推荐指数
1
解决办法
1633
查看次数

HTML 可访问性,是否允许空元素?

简单的问题。有人告诉我,例如,使用这个

<span class="fa-stack fa-lg">
  <i class="fa fa-cloud fa-stack-2x"></i>
  <i class="fa fa-cog fa-stack-1x"></i>
</span>
Run Code Online (Sandbox Code Playgroud)

(这将导致中心有一个齿轮的云),对于正确可访问的 html 是禁止的,因为这两个<i>标签是空的。

但是,如果不借助图像,如何才能做到这一点呢?我的目标是在页面中实现尽可能少的图像,这只能通过字体图标来实现。

html accessibility screen-readers

5
推荐指数
2
解决办法
6003
查看次数

NVDA 没有读取跨度中的 aria-label - 还有什么选择?

我对可访问性问题相当陌生,我正在尝试在 NVDA 中读取 aria 标签。

这是我的 HTML:

    <div class="myClass">
          <input type="checkbox" name="mycheckbox" id="toggle" onclick="togglelongText()"aria-label="tldr">
          <label for="toggle" aria-label="tldr"><span class="active" aria-label="tldr">tl;dr</span>
          <span class="toggleshape"></span><span class="inactive" aria-hidden="true">tl;dr</span></label>
    </div>
Run Code Online (Sandbox Code Playgroud)

无法在 Windows 上的 NVDA 上读取标签,并且我发现如果元素位于 div 或 span 内,则不会始终成功:

https://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_an_invisible_label

有哪些替代方案?你能帮我吗?

谢谢,

问候,

P。

编辑:

我做了一些返工,我设法让 aria 标签仅部分工作,因为它现在显示为“tl;dr”。已在 Windows 7 上使用 Chrome 54、IE 11 和 Firefox 49 对此进行了测试,所有版本都存在相同的问题。这是修改后的代码:

<div class="myClass">
    <input type="checkbox" tabindex="0" name="mycheckbox" id="toggle" onclick="toggleLongText()" 
     aria-label="TL;DR switch">
    <label for="toggle" aria-label="TL;DR switch"><span class="active" tabindex="0" 
     aria-label="TL;DR switch">tl;dr</span><span class="toggleshape"></span>
     <span class="inactive">tl;dr</span></label>
</div>
Run Code Online (Sandbox Code Playgroud)

你能帮我吗?

screen-readers nvda

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

VoiceOver 大写的小词被读为缩写

我有以下标题

<h1>ADD MONEY</h1>
Run Code Online (Sandbox Code Playgroud)

它被 VoiceOver 读为

加钱

而如果我将文本更改为小写,它将正确读取为“加钱”。你有什么建议吗?我已经尝试过使用aria-labelledby没有运气!

html accessibility screen-readers voiceover wai-aria

5
推荐指数
1
解决办法
1741
查看次数

如何让 Mac Voiceover 将数字读取为数字而不是单个数字?

当我在 span 标签中呈现数字时,Mac Voiceover 正在读取单个数字而不是数字。例如,10 读作“一个零”而不是“十”。

我怎样才能让它读“十”而不是“一个零”?

我已经搜索了答案,但似乎大多数人都有相反的问题。像 speak 和 speak-as 这样的 CSS 属性似乎没有效果。

如果您想查看示例,请尝试加载以下笔并让 Mac Voiceover 读取它(要使用 Mac Voiceover,请使用 Command + f5)。

https://codepen.io/davescode/full/GeGLYv

或者从字面上看: <span>10</span>

macos accessibility screen-readers voiceover

5
推荐指数
1
解决办法
291
查看次数

如何向屏幕阅读器表明内容可内联编辑?

我的产品有一个我们想要显示默认值的区域(比如文档页面的名称),但是当用户关注它并点击空格键时,它变成了一个可编辑的字段。我们正在尝试编写可访问的代码,我想知道是否有人指导过如何使用屏幕阅读器向某人指示此内容是可编辑的?

我们目前在代码中处理它的方式是有一个带有名称的 div,当用户点击(或聚焦并点击空格键)时,它会变成一个输入。(他们可以点击回车或按钮进行保存。)我们可以利用这个或其他一些本地解决方案的 ARIA 值吗?

默认:

<div>Page title <button>Click to edit page title</button></div>
Run Code Online (Sandbox Code Playgroud)

编辑时:

<input maxlength="500" value="Page title" />
Run Code Online (Sandbox Code Playgroud)

我们现在没有保存按钮。您按 Enter 键或从输入中删除焦点,它会自动更新。

html accessibility screen-readers inline-editing

5
推荐指数
1
解决办法
598
查看次数

是否仍然如此,使用table + css为桌面浏览器制作交叉broswer布局比div + css更容易?

我的一个网页设计师的朋友仍然用桌子制作网站,但他非常好地使用CSS,我也很好地使用css但<div>我和布局的浏览器问题比我的朋友更多.

我给了我的朋友一些关于利弊的理由<table>.和朋友一起读我的整个讨论?

- 你的网站将有屏幕阅读器的问题

我的朋友 - 好的,但我没有收到任何客户的电话.

- 如果更改来自客户端,您将花费更多时间对布局进行任何更改

我的朋友 - 我不这么认为,但如果是,那么告诉我如何节省时间<div>

- 你的网站不适合搜索引擎.

我的朋友 - 这不是真的.我已经制作了很多网站,对于任何网站或客户都没有任何问题

- 布局是老方式,非w3c和非标准方式.

我的朋友 - 什么是旧的,什么是新的,谁是W3C我不知道,什么是标准?无论我在所有浏览器中制作什么,它对我来说都足够了,我的客户也不会为标准和W3C指南规则付费

- 您的网站无法在移动浏览器中使用

我的朋友 - 对我没问题,我的客户不关心手机

- 你的网站无法访问?

我的朋友 - 你的意思是什么?无论我做什么都适用于所有浏览器.我的客户从未询问过任何可访问性

- 将来你会得到更多的工作吗?

我的朋友 - 好吧,当客户不接受带桌子的网站时没问题,我将来会学习基于div的布局.

我的问题?

  • 是否仍然如此,使用table + css为桌面浏览器制作跨浏览器布局比+ css更容易 div
  • 如果客户不介意我使用DIV + CSS布局代替 <table>布局,开发人员有什么好处?

css xhtml accessibility screen-readers mobile-website

4
推荐指数
1
解决办法
227
查看次数

如何在一个句子中覆盖屏幕阅读器的单词发音,而不会在句子中间停顿?

假设我在HTML中有以下句子:

<p>Please enter your licence number</p>

屏幕阅读器错误地将"许可"一词称为"liss-ens"(语音拼写).它应该发音为"lice-ens"(拼音拼写).

我想通过向屏幕阅读器提供语音拼写来解决这个问题,同时让文本在视觉上显得相同.

我可以使用<span>s,aria-属性和样式如下:

<p>Please enter your <span aria-hidden="true">licence</span><span style="position: absolute; left: -10000em;">license</span> number</p>

这很好用,除了屏幕阅读器(我在MacOS上使用VoiceOver测试)在第一个跨度时暂停,迫使我按[VO] + [向右箭头]前进到下一个单词:

"请输入你的"...... [VO] + [右箭头] ..."lice-ens"... [VO] + [右箭头] ......"数字"

我希望屏幕阅读器能够顺利地读出句子而不会暂停.

这可能吗?或者我不应该试图控制这个?

html css accessibility screen-readers voiceover

4
推荐指数
1
解决办法
784
查看次数