首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

模拟按钮的可访问性

为了创建更加漂亮的按钮,我们在项目实践中经常使用A、SPAN等元素模拟按钮,而不是使用更合语义的input[button]或者button元素。...使用这种方法我们可以快速的创建各浏览器表现一致的按钮,免受各种bug困扰,但同时也带来了可访问性问题。...可能无法获得焦点 之所以是“可能”,是因为如果我们使用的是A元素,那么这个“假”按钮是可以获得焦点的,但如果我们使用的span等其他不可聚焦元素,辅助工具用户就很难去发现这个按钮。...无法获得准确的语义和指令 模拟按钮只是披上了按钮的外衣,辅助工具获得的信息仍然是它们真实面目。...虽然点击一个链接时,通常链接会将我们带至其他地方,但使用辅助工具的用户仍然能够感知到这里是可以点击的(而且功能性链接在现代交互中使用的越来越广泛)。如果使用的是其他元素,就没有那么幸运了。

88730
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    在 Flutter 中创建可拖动的浮动操作按钮

    本教程有一个示例,说明您需要做什么才能创建浮动操作按钮,只要它位于父小部件内,就可以将其拖动到屏幕周围的任何位置。 创建可拖动的浮动操作按钮 我们将为这样的小部件创建一个类。...我们需要处理的第一件事是使按钮可跟随指针拖动的能力。可以使用的小部件之一是Listener,它能够检测指针移动事件并提供移动细节。基本上,按钮需要包装为Listener....一个浮动的动作按钮通常可以在点击时执行一个动作,所以我们添加一个名为onPressed( VoidCallback) 的参数作为参数。...下面是用于创建可拖动浮动操作按钮的类。它有一些参数,包括child(要设置为按钮的小部件)、initialOffset(移动前的初始偏移量)和onPressed(单击按钮时调用的回调)。...一个简单的圆形小部件作为child参数传递,这意味着它成为可拖动的按钮。您可以为按钮使用任何小部件,包括 Flutter 的FloatingActionButton小部件。

    5.7K10

    Js+Css做一个可弹起压下效果的按钮

    好几天没写js和css了,昨天看一个大神的博客的时候无意中看到他的一个效果做的很不错,思来想去觉得自己做一个会比较好,毕竟,本来就是一个学习的过程! 效果: ? 我们今天做一个这样的按钮!...我首先说一下我的思路,我刚开时看到的时候在想,无非就是画一个背景阴影,然后利用js改变阴影的宽度,但是这样有一个问题就是上面的字体不会改变,我开始是做成了这样的: ?...这里很明显就看出来了是有问题的,上面的字体没有改变位置,说明我的思路是不对的,然后我在想,那么既然不改变阴影的宽度,只能是改变按钮本身的位置了,但是他在页面上怎么改变按钮的位置呢?...给他一个相对固定的位置不就行了吗?于是就想到最外侧加一个div就可以了! 源码: 的没有什么新技术,只是一些不是很常用的css,加阴影的关键字: box-shadow 这个关键字可以直接打扫W3Cschool里面看详解,这里就不班门弄斧了!

    1.7K20

    Excel实战技巧65: 制作漂亮的用户窗体按钮——当鼠标移动到按钮上时高亮显示

    在很多场合,我们都能看到这样的效果,当鼠标移动到某个元素上面时,该元素会变成另外一种颜色,达到强调的效果。...下面,我们来实现当鼠标移动到用户窗体按钮上时,会使用颜色高亮显示,让用户窗体更生动,如下图1所示。 ? 其实,你在图1中看到的按钮并不是用户窗体内置的传统命令按钮,而是使用图像控件来制作的。...复制一个刚才绘制的图像控件,如下图6所示。 ? 这个图像将代码鼠标不在按钮上时的状态。...编写代码 使用MouseMove事件来响应鼠标的动作,这个事件当鼠标移动到特定控件中时,执行其中的代码。...但是,如果用户将鼠标放置在除这两个按钮之外的其他地方时,我们不希望这两个按钮显示绿色,因此要使用用户窗体的MouseMove事件: Private SubUserForm_MouseMove(ByVal

    8.6K20

    开发中使用throttle和debounce

    前言 不管是WEB还是Android或者是iOS开发中 我们都会有这样的问题 按钮点击时 连续点击只让第一次生效 搜索时文本不断变化导致调用多次接口 上面的两个问题解决后能大大提升用户体验 解决它们就用到了...iOS(OC/Swift) MessageThrottle Swift可以用RxSwift 如果项目中已经用到 或者想用RxSwift的话就选择第二种方式 如果项目不想引用太多东西 或者项目用的OC...RxSwift虽然只支持iOS8之后的系统 但是现在基本只需适配iOS8以后了 所以不用担忧 RxSwift和RxJava以及RxJS 语法基本都相似 这真的就是learn once, apply everywhere...; ---- MTPerformModeFirstly 如果连续点击按钮 每5s的第一次生效 MTPerformModeLast 如果连续点击按钮 每5s的最后一次生效 MTPerformModeDebounce...的示例做了同样的事 可以对比一下 RxSwift实例 根据用户输入的名字变化 更新头像 _ = self.usernameTextField.rx.text.orEmpty .debounce(

    1.7K51

    RxSwift 系列(一) -- Observables

    为什么使用RxSwift? 我们编写的代码绝大多数都涉及对外部事件的响应。当用户点击操作时,我们需要编写一个@IBAction事件来响应。我们需要观察通知,以检测键盘何时改变位置。...当网络请求响应数据时,我们必须提供闭包来执行。我们使用KVO来检测变量的变化。所有这些不同的系统使我们的代码增加了不必要地复杂。如果有一个一致的系统来处理我们的所有的调用/响应代码,难道不是更好吗?...RxSwift是用于大多数主要语言和平台的响应扩展(即Rx)的正式实现。...概念 每一个Observable的实例都是一个序列 Observable序列相比于Swift序列的关键优势点在于它能够异步地接收元素。这是RxSwift精髓所在,其他的一切都扩展了这个概念。...observableType.subscribe(_:)方法等效于Sequence.makeIterator() ObservableType.subscribe(_:)接收一个观察者ObserverType参数,它将被订阅自动接收由可观察到的序列事件和元素

    1.1K70

    Klee:用 C++ 实现数据驱动开发

    头像使用 URL 异步下载,需考虑潜在的 cell 复用问题。状态圆点的颜色、下载按钮的文案及禁用态应当随着下载任务的状态实时更新。...布局方面:需要适配不同尺寸的屏幕,头像和按钮分居左右,剩余空间留给名字和作品列表。 功能方面:点击按钮会使得下载状态发生流转,执行下载操作并更新圆点及下载按钮,并在下载完成/失败后再次触发更新。...Value 可以隐式转换为 Reactive 使用,此时写接口被隐藏,但依赖方仍能观察到数据的变化。...---- 与 RxSwift 的对比 同为 Native 数据驱动开发框架,Klee 从设计思路上与主流的 RxSwift 等框架有所不同。...实践表明,开发同一个功能,代码量大约只有传统开发方式的 60%,且具备更好的可读性和可复用性。 待框架经过更大规模的实际检验,同时 API 保持稳定后,再进行对外开源。

    2.4K30

    RxSwift 系列(三) -- Combination Operators

    RxSwift 系列(三) -- Combination Operators 前言 本篇文章将要学习如何将多个Observables组合成一个Observable。...Combination Operators在RxSwift中的实现有五种: startWith merge zip combineLatest switchLatest startWith 在Observable...subject2.onNext("③") zip 将多个Observable(注意:必须是要成对)组合成单个Observable,当有事件到达时,会在每个序列中对应的索引上对应的元素发出。...(ps:之前版本的RxSwift好像最多只能组合8个Observable)更多详情 let disposeBag = DisposeBag() let subject1 = PublishSubject...,因此不会打印,让我们看看打印结果: A--1 B--2 combineLatest 当一个项目由两个Observables发射时,通过一个指定的功能将每个Observable观察到的最新项目组合起来,

    86570

    iOS - RxSwift 项目实战记录

    ,而恰巧RxSwift已经出来有一些时间了,语法也基本上稳定,遂只身前来试探试探这RxSwift,接着就做了个小Demo,有兴趣的同学可以瞧一瞧~ Exhibition 结构 . ├── Controller...这个库规定的协议,可以按住Commond键+单击左键进入相应的文件进行查看 extension LXFNetworkTool: TargetType { /// baseURL 统一基本的URL...var method: Moya.Method { return .get } /// 请求参数(会在请求时进行编码) var parameters...,不过这就失去了使用RxSwift的意义。...section,所以这个方法可实现,也可以不实现,默认返回的就是1,这给我们带来的一个迷惑点:【tableView是由row来组成的】,不知道在坐的各位中有没有是这么想的呢??

    2.9K41

    自己写的一个分享按钮的插件(可扩展,内附开发制作流程)

    (demo演示)   既然要做成插件,那可制定性肯定要强,不能定死,比如不能把显示个数定死,不能把分享按钮排序定死等等(不过有些东西还是要定死的,太灵活了也就成不了插件了)。...HTML制定好规范后,就可以开始写css样式了,需要注意的是,为了减少http的请求,按钮的图片我是用css sprites拼接在一起了,如   同时我也制作了32*32的大图标版本,当然你也可以制作其他尺寸的...接下来,如果掌握了这个,操作起来就简单了,我们只需要对每个按钮绑定一个点击事件,然后调转到制定的链接,就一切OK了。...第二个数组就是对应各自的中文名称,用于显示前台每个按钮的title,如:分享到腾讯微博、分享到新浪微博等。   因为js没有多维数组的概念,所以我就定义了2数组。...,执行到这句代码后,你会发现页面上按钮的样式都出来了。

    57310

    【iOS】RxSwift官方Example4--Github注册(MVVM)

    前言 这一篇,是一个仿Github注册的表单页面。官方针对这个例子,介绍了用RxSwift实现MVVM,一个是使用Driver 序列(针对UI界面的),另一个是Observable 序列。...其实就是一个很经典的注册表单界面: 输入用户名,检验用户名是否存在 输入密码,检验密码长度 输入确认密码,检验与上次输入的密码是否一致 注册按钮,当所有输入内容合法时,才能点击 MVVM的优点 以下摘自百度百科...视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。 可重用性。...开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xml代码。 可测试。...Driver Driver是RxSwift专门用于处理UI流的,相比Observable,它有以下特点: 不会发出Error 在主线程执行 自动添加 shareReplayLatestWhileConnected

    80640

    干货 | 深入浅出Apple响应式框架Combine

    Apple目前内置了50多种Operators,尽管这样,它仍然比Rxswift少,这里有一份Combine和RxSwift的操作符对比RxSwift to Combine Cheatsheet。...3.2 实战 实现一个简单登录注册的UI,如下所示: ? 界面很简单,就是用户名,密码,确认密码三个输入框以及同意隐私协议开关按钮和注册按钮。...来给定一个简单的验证规则: 1)当用户输入登录名称大于等于6位; 2)密码和确认密码相等并且至少为6位; 3)用户同意隐私协议; 同时满足上述三个条件时注册按钮才点击可用,我们使用Combine来实现注册校验逻辑...四、性能表现 RxSwift已在开源社区广泛应用,Apple本身推出的Combine的性能表现如何呢?我们使用Will Combine kill RxSwift?...可以看到Combine的性能惊人,比RxSwift好的不止一个等级。

    4.2K31

    社会交互时的脑网络变化可反映社会网络结构

    社会关系的破坏会对人的思想和感受有显著的影响,因此,为了探究社会网络变化以及社会疼痛如何引起大脑网络变化,研究利用获取的80名男性青少年的fMRI数据,发现了社会排斥时心理系统网络的连接数量的增加。...图1.任务和分析范式概述,在进行功能磁共振成像扫描时,参与者进行cyberball游戏,用来模拟被社会排斥。...并接着计算对应大脑系统的脑网络连通性,最后,探究每个个体的自我网络密度和他们的大脑连接之间的关系。 ? 图2.社会排斥时大脑的功能连接(A), 社会包容(B),社会排斥和社会包容之间的差异(C)....涵盖13个系统的全脑264个节点,全脑分析结果:默认模式系统的脑网络在社会排斥时连接数显著增加,对于与社会疼痛系统重合的唾液系统,在社会排斥时的连接无变化。...特别是,连通性分析强调了心理系统在应对社会突出事件时的基本重要性,它指出了一个参与者的社会网络结构提供了社会排斥对社会认知脑网络的影响的关键信息。

    1.1K60

    关于 RxSwift 的一点理解

    但是到底什么是 RxSwift, 这里有很好的定义: RxSwift 是由可被观察的事件的异步队列和可操作的功能性的运算符组成的库,并且他可以由调度者通过参数的方式进行调度...你将会从 RxSwift 中最基本的功能开始,然后循序渐进的由中级到高级。花一些时间去广泛的理解里面的概念,这样以来读完本书后你就会精通 RxSwift 额思想和使用。...> 这里打个比方一个按钮我点击了就会触发一个时间 那么我每点击一次就会生成一个 Action 我们用一个管道去装在这些 Action,每加一个 Action 就会把他放管道里面,我们可以理解为管道里面流动的...和键盘的弹出和收起动画之间的关系 从网上下载大图片 往硬盘里面存数据 播放视频 以上的所有东西看似是发生在同一时刻其实真的是吗?...您假定您总是在循环的开始时遍历整个集合。

    58240
    领券