首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >可访问性-提醒用户注意按钮内的动态文本更改。

可访问性-提醒用户注意按钮内的动态文本更改。
EN

Stack Overflow用户
提问于 2018-06-07 09:23:45
回答 2查看 2.4K关注 0票数 4

我正在努力提高按钮的可访问性,该按钮可以测试连接。如果连接成功,则按钮文本更改为“成功”。如果没有,则改为“不工作”。它们看起来是这样的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<button aria-label="success">Success!</button>

<button aria-label="failure">Not Working</button>

我试图找到一种方法来提醒用户按钮的内容变化。到目前为止,我已经添加了aria标签来读取“成功”或“不工作”标题,但是只有当用户选项卡/移动离开按钮,然后在状态改变后再回到它上,这些标签才会被读取给用户。

我还尝试用<span>将按钮的文本包装为role=“警报”,希望能通知用户文本已经更改,但也没有任何结果:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<button aria-label="failure"><span role="alert">Not Working</span></button>

我也尝试过将按钮包装在<div aria-live="polite"/>中,但我怀疑这不起作用,因为没有向页面添加新元素,而是元素的内容发生了变化。

什么是提醒用户动态变化的文本内容的好方法?

谢谢!

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-12 13:33:31

你已经接近你的尝试了。您可以使用aria-live,这是最合适的解决方案。您不必向DOM中添加元素才能使aria-live工作。如果使用默认的aria-relevant值,则更改元素的文本就足够了。(如果不指定aria-relevant,则会得到默认值为“加法文本”。)

但是,您必须将aria-live放在正在更改的元素上。在这种情况下,按钮本身。我试过以下几种方法,效果很好:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  <button onclick="myclick6()">change it</button>
  <button id='livebutton' aria-live="polite">Success!</button>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    function myclick6() {
      document.getElementById("livebutton").innerHTML = "Not Working";
    }
票数 5
EN

Stack Overflow用户

发布于 2018-06-08 05:35:19

只需创建简单的div与显示无。

<div id="dynamicText" aria-hidden="true" aria-live="assertive" style="display:none"></div>

之后,动态地追加上述div中的值。

$(‘#dynamicText’).html(‘成功’);$(‘#dynamicText’).html(‘不工作’);

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50746970

复制
相关文章
模拟按钮的可访问性
为了创建更加漂亮的按钮,我们在项目实践中经常使用A、SPAN等元素模拟按钮,而不是使用更合语义的input[button]或者button元素。使用这种方法我们可以快速的创建各浏览器表现一致的按钮,免受各种bug困扰,但同时也带来了可访问性问题。
Jace
2018/08/01
8900
如何提高网站的可访问性?
关于可访问性的错误观念 可访问性影响所有用户,而不仅仅是那些有特定障碍的用户。接受这一点意味着实现可访问性就是建立压力案例。压力案例指的是影响任何一个人的任何医疗或任何情境状况,无论是什么场景时间点。一些常见的压力案例原因是:
lyb-geek
2018/12/11
1.5K0
关于 Web 可访问性的神话
网络可访问性是每个 Web 开发项目中的必去之处,但对于许多 Web 开发人员来说,它似乎仍是个谜。就像这是传奇的东西, 而不是工作所需的基本技能。
OwenZhang
2021/12/08
6720
关于 Web 可访问性的神话
WAI-ARIA 可访问性尝试
WAI-ARIA 的全称是 Web Accessibility Initiative – the Accessible Rich Internet Applications Suite。简而言之:我们使用这个标准定义的一些方式,来实现无障碍化,目的是为了让那些残障人士也可以顺利的访问我们的站点。
上山打老虎了
2022/06/15
4350
WAI-ARIA 可访问性尝试
可访问性测试(无障碍测试)
网络是向所有人开放的,作为一个测试者(也是人),我们有责任检查它是否对所有用户开放。反过来,这将为业务的成功做出很大贡献,因为我们努力让每个用户都能访问应用程序。
FunTester
2023/08/04
7970
可访问性测试(无障碍测试)
提升网站可访问性的CSS实践方法
随着互联网的不断发展,越来越多的人开始依赖于网络,如何让网站更加易于访问、易于阅读是一个至关重要的问题。本文将从多个方面介绍如何使用CSS来提升网站的可访问性。
很酷的站长
2023/10/07
2500
提升网站可访问性的CSS实践方法
.Net6种成员的可访问性
CLR术语 C#术语 描述 Private private 成员只能由定义类型或任何嵌套类型访问 Family protected 成员只能由定义类型,任何嵌套类型或者不管在任何程序集中声明的派生类型访问 Family  and  Assembly 不支持 成员只能由定义类型,任何嵌套类型或者同一程序集中定义的派生类型访问 Assembly internal 成员只能由定义程序集访问 Family or Assembly protected  internal 成员可由定义类型,任何嵌套类型,任何派生类或者
莫问今朝
2018/08/31
5920
10条提高网站可访问性的建议
我们收集了10条提高网站可访问性的建议以保证网站你的网站对任何人都是友好的,包括残疾人。
frontoldman
2019/09/02
1K0
10条提高网站可访问性的建议
10步大幅提升网站可访问性
10步大幅提升网站可访问性:1. 检查<title>标签;2. 提供文字替代方案;3. 检查表单;4. 使用heading做信息架构;5. 减少焦点劫持;6. 按Ctrl+或command+查看页面缩放;7. 添加landmark角色;8. 设置快捷键;9. 触发界面转换需设置焦点;10. 填写一个简单的链接到<body>之后作为第一个内容元素。
RP道貌不岸然
2017/11/22
1K0
10步大幅提升网站可访问性
如何测试你做的项目的可访问性
编者按:本文作者:安佳,360 搜索事业部的前端开发工程师,W3C CSS 工作组成员。
苏南
2020/12/16
1.9K0
如何测试你做的项目的可访问性
运营数据库系列之可访问性
这篇博客文章是CDP中Cloudera的运营数据库(OpDB)系列文章的一部分。每篇文章都会详细介绍新功能。从该系列的开头开始,请参阅CDP 中的 Operational Database 。
大数据杂货铺
2020/04/21
8750
运营数据库系列之可访问性
【CSS】更改用户界面样式 ③ ( 取消文本域拖拽 | 代码示例 )
在网页布局中 , 一般不会允许这种情况发生 , 任意拖拽文本域会影响网页的整体布局 ;
韩曙亮
2023/04/24
7870
【CSS】更改用户界面样式 ③ ( 取消文本域拖拽 | 代码示例 )
使用 CSS prefers-* 规范,提升网站的可访问性与健壮性
互联网发展到今天,对于我们的前端而言,我们的关注点不应该仅仅是我们产出的页面能不能用,也需要更多的去关注我们的页面好不好用,有没有照顾到更多的用户群体?
Sb_Coco
2021/06/08
6730
使用 CSS prefers-* 规范,提升网站的可访问性与健壮性
自己写的一个分享按钮的插件(可扩展,内附开发制作流程)
前几天由于工作需要制作一个分享按钮,考虑到后续其他项目可能也会用到,于是就打算写成插件化,正好也给我自己的插件jquery.hooray增加一个新的功能,为了不浪费大家时间,我先把demo放出来,如果觉得能用到,或者想学是怎么制作的,那就继续往下看。(demo演示)
胡尐睿丶
2022/03/23
5760
自己写的一个分享按钮的插件(可扩展,内附开发制作流程)
WPF 点击按钮时更改按钮样式界面效果的 XAML 实现方法
在 WPF 中按钮 Button 将会吃掉路由事件,此时的 EventTrigger 如果通过 RoutedEvent 是 MouseLeftButtonDown 那么将会拿不到路由事件,也就触发不了,因此样式将不会变更。简单的解决方法就是通过 VisualStateManager 配合 VisualState 来实现
林德熙
2020/08/31
4.3K0
CSS样式更改——文本Content
上篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈文本Content内容的基础用法。
前端皮皮
2020/11/26
1.7K0
前端Vue监听路由变化, 点击页面内按钮跳转菜单更改导航菜单选中状态
2、:key 阻止复用 vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可(Vue文档原话) 使用computed属性和Date()可以保证每一次的key都是不同的,这样就可以如愿刷新数据了。
江一铭
2022/06/17
5.9K0
前端Vue监听路由变化, 点击页面内按钮跳转菜单更改导航菜单选中状态
wordpress文章内添加按钮
谷腾堡编辑器自带,提取出平时使用经典编辑器方便使用。理论高版本的wordpress都可以用吧。字体颜色也可以更改,用到了再去谷腾堡拿吧!
AlexTao
2019/12/12
9820
oracle更改用户的密码
1、以system或者sys的身份登录。登录语句sqlplus system/psw@ora_name或者sqlplus sys/psw@ora_name as sysdba。
全栈程序员站长
2022/09/19
2.5K0
点击加载更多

相似问题

提醒用户注意错误的值

21

PHP - Facebook API:提醒用户注意更改...足够简单

12

更改html元素可访问性文本

28

创建提醒对话框时动态更改按钮文本

32

类内的可访问性

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文