首页
学习
活动
专区
圈层
工具
发布

简单了解下无障碍设计模式

应避免使用以下声音: 通过屏幕阅读器播放不必要的声音,例如打开网页时自动播放的背景音乐。如果有背景音乐,请确保用户可以安全的暂停或停止背景音乐。...正确示例 滑块值和滑块控件非常接近。 错误示例 滑块值和滑块控件之间的距离太远。对于放大了屏幕的用户,如果不在滑块和值之间来回浏览的话,可能不能同时看到滑块和值。...用户也可以在屏幕上向前或向后滑动来移动焦点,来从上到下线性地阅读页面。这允许用户在某些元素上进行训练。在 TalkBack 中,这称为线性导航。...用户可以在 “通过触摸浏览” 和 “线性导航” 模式之间切换。当页面使用合适的语义化标签时,一些无障碍技术允许用户在页面的这些标记(例如标题)之间导航。...错误示例 当把重要的操作嵌入到其他内容中时,就不清楚什么是页面中最重要的元素。 焦点顺序 输入焦点应该按照视觉布局的顺序排列,从屏幕顶部到底部。它应该从最重要的项目到最不重要的项目进行遍历。

6.2K40

10-移动端开发教程-移动端事件

PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能...:用户双击手机页面的时候,浏览器会智能的缩放当前页面到原始大小。 ​...最基本的touch事件包括4个事件: touchstart: 当在屏幕上按下手指时触发 touchmove: 当在屏幕上移动手指时触发 touchend: 当在屏幕上抬起手指时触发...因为双击缩放检测的存在,在移动设备屏幕上点击操作的事件执行顺序: touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件,可以调用 event.preventDefault...移动端点击穿透问题 如果某个返回按钮的位置,恰好在要返回的这个页面的带有href属性的a标签的范围内,在点击返回按钮后,页面快速切换到有a标签的页面,300ms后触发了click事件,从而触发了a标签的意外跳转

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

    10-移动端开发教程-移动端事件

    PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能...:用户双击手机页面的时候,浏览器会智能的缩放当前页面到原始大小。 ​...最基本的touch事件包括4个事件: touchstart: 当在屏幕上按下手指时触发 touchmove: 当在屏幕上移动手指时触发 touchend: 当在屏幕上抬起手指时触发 touchcancel...因为双击缩放检测的存在,在移动设备屏幕上点击操作的事件执行顺序: touchstart(瞬间触发) → touchend → click(200-300ms延迟) 如果你使用了触摸事件,可以调用 event.preventDefault...移动端点击穿透问题 如果某个返回按钮的位置,恰好在要返回的这个页面的带有href属性的a标签的范围内,在点击返回按钮后,页面快速切换到有a标签的页面,300ms后触发了click事件,从而触发了a标签的意外跳转

    7.8K80

    写一个H5图片预览组件

    主要用到的事件如下: onPinch(e) 双指缩放时触发,e.zoom为缩放倍数 onMultipointStart(e) 多点触摸时触发 onPressMove(e) 手指按下并移动时触发,e.deltaX..., e.deltaY为两个方向上移动的距离 onTouchEnd(e) 触摸停止时触发 <AlloyFinger onPinch={this.onPinch} onPressMove={this.onPressMove...需要注意的是这里的zoom是相对于每一次缩放手势开始时的放大倍数,因此需要监听onMultipointStart事件,在开始缩放时记录下原始的scale值。...改变图片translate属性就可以了,另外在onTouchEnd判断一下图片有没有被移出屏幕,我们要保持图片最大程度地填充屏幕空间。...时判断当前手指移动的距离是否足够大,判断是否切换到下一张图片。

    1.6K11

    2019-面向小白的微信小程序-视频教学-基础

    学前准备 具有以下技术铺垫来学小程序效果最佳 html css JavaScript es6 vue 移动端布局能力 rem、vw、等 1. 微信小程序课程介绍 本章节B站视频链接 2....小程序结构目录 本章节B站视频链接 小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。...否 组件生命周期函数,在组件实例进入页面节点树时执行,参见 组件生命周期 ready Function 否 组件生命周期函数,在组件布局完成后执行,参见 组件生命周期 moved Function 否...组件生命周期函数,在组件实例被移动到节点树另一个位置时执行,参见 组件生命周期 detached Function 否 组件生命周期函数,在组件实例被从页面节点树移除时执行,参见 组件生命周期 12.6...function 页面滚动触发事件的处理函数 onResize function 页面尺寸改变时触发,详见 响应显示区域变化 onTabItemTap function 当前是 tab 页时,点击 tab

    38710

    程序员理想显示器配置方案(已解决!)

    作者:John Sonmez怎样的屏幕配置才能打造最优编程工作站?...但:如果屏幕过大导致查看边缘区域时需要扭动脖子——这就成了负面因素如果使用曲面超宽显示器来获得更多空间——也可能伴随缺点如果拼接过多独立显示器——光标在屏幕间移动会变得麻烦那么最佳平衡点在哪里?...推荐配置方案为程序员打造理想工作环境时,这套显示器配置满足所有需求:中央主显示器:27英寸2560×1440分辨率(1440p/QHD/2K),置于视线焦点中心两侧辅助显示器:两台27英寸LG DualUp...竖屏(16:18比例),稍向内倾斜该配置的优势1440p分辨率在臂长距离内无需缩放即可清晰显示所有内容,提供适中且不过高的主工作区。...虽然4K缩放后显示效果更优,但并非所有软件都支持缩放,可能导致显示混乱。1440p在27英寸显示器上空间适中、显示效果良好,且无需担心缩放不一致问题。竖屏显示器虽能增加空间,但不必追求最大化。

    32310

    HarmonyOS 开发实践 —— 基于XComponent的视频播放器高性能体验

    配置AVPlayer的datasrc属性,在datasrc的回调函数中,通过fs.readSync传入沙箱文件的readFd,将沙箱文件的数据写入内存buffer,沙箱文件大小为0时开启网络下载,当pos...(表示填写的数据在资源文件中的位置)小于沙箱文件100kb时,再次开启网络下载进而实现分段下载,该回调函数在AVPlayer解析数据时触发,在边下边播的场景中,会不断触发该回调。...//    // - pos,number类型,表示填写的数据在资源文件中的位置,可选,当fileSize设置为-1时,该参数禁止被使用。   ...this.ScalingFlag}场景七:视频滑动调整音量、亮度方案添加视频音量,亮度滑块进度条。将音量,屏幕的亮度和滑块的value实现双向绑定。...滑动手势结束,AVPlayer根据最终的seektime进行seek。拖动滑块时,滑块移动中,根据滑块value值调用fetchFrameByTime生成pixelMap,实现进度预览。

    67020

    wx小程序--基础知识

    事实上,应用号并非微信首创,之前百度推出过应用号,搜狐推出过快站,但腾讯将这件事情做成功的概率却是最大 2.2....微信小程序对于创业者的优势 1、APP流量成本的急剧攀升 2、移动互联网格局基本已定,用户主要需求场景已被巨头把持 3、面向所有产品对用户时间的竞争 2.3....详见 Page.onPullDownRefresh onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px。...注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。 9.2....可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层 exit 退出小程序,target="miniProgram"时生效 10.6. video 视频。

    2K30

    【Android】WebView 应用模版 ( WebView 设置 | 设置 WebSettings | 启用调试模式 | 设置 WebChromeClient )

    通过双指捏合手势也可以进行缩放。启用内置缩放控件可以提高用户的体验,使其更容易在移动设备上浏览网页。...Viewport 元标记是指在 HTML 页面中的 标签,可以设置网页在移动端设备上的显示方式和缩放比例。...使用场景 : 如果您的 网页在宽屏幕上显示得很好,但在狭窄屏幕上缩放过大或过小,您可以启用此选项。...// 设置页面自适应 // Viewport 元标记是指在 HTML 页面中的 标签 , 可以设置网页在移动端设备上的显示方式和缩放比例 // 设置是否支持...在宽视图端口模式下,WebView 会将页面缩小到适应屏幕的宽度。 这意味着用户在浏览网页时无需进行横向滚动,但可能会使网页缩小得过多,影响可读性。

    3.9K20

    fullPage.js全屏滚动插件

    如果你要制作一个全屏的网页,使用这个插件在合适不过,如QQ浏览器官方网站 直接下载 使用方法 1.引入fullpage.css文件 <link rel="stylesheet" type="text...}); 4.参数设置 传递对象形式 参数 说明 resize (true/false)字体是否随着窗口缩放而缩放 slidesColor 设置背景颜色 anchors (array)定义锚链接...是否显示左右滑块的项目导航 slidesNavPosition (string)左右滑块的项目导航的位置,可选 top 或 bottom controlArrowColor (string) 左右滑块的箭头的背景颜色...是滚动到的“页面”的序号,从1开始计算;direction 判断往上滚动还是往下滚动,值是 up 或 down。...afterRender 页面结构生成后的回调函数,或者说页面初始化完成后的回调函数 afterSlideLoad 滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink

    17.9K20

    cocos creator基本操作

    通过标签移除子节点 this.node.destroy();//销毁节点 this.node.isValid;//判定节点是否可用 this.node.removeChild(newNode);//移除节点中指定的子节点...);//递归查找自身及所有子节点中指定类型的组件 3.获取节点位置,设置节点 var a = node.getPositionX();或 getPositionY() //获取节点的X轴或Y轴坐标 var...; //(function(){},间隔时间,次数,多久后开始) this.unscheduleAllCallbacks(this);//停止某组件的所有计时器 //自定义定时器执行内容(相比常规使用的定时器优势是...',移入节点'mouseenter',节点中移动'mousemove',移出节点'mouseleave,'松开鼠标'mouseup' var a = event.getScrollY();//获取滚轮滚动的...Y 轴距离,只有滚动时才有效 var a = event.getLocation();//获取鼠标位置对象,对象包含 x 和 y 属性 输入框监听:获得焦点'editing-did-began',文字变化

    2.9K31

    【Flutter 实战】1.20版本更新及新增组件

    新的滑块在设计时考虑到了更好的可访问性:轨道更高,滑块带有阴影,并且值指示器具有新的形状和改进的文本缩放支持。...onChanged:滑块值改变时回调。 ? 看看 Flutter 1.20 版本以前的样式(我的珍藏): ? 明显的感觉就是滑块轨道变粗了,滑块变的更有立体感(加了阴影)了。...对于从右到左(RTL)的语言,此方向是相反的。 2:滑块(Thumb),位置指示器,可以沿着轨道移动,显示其位置的选定值。 3:标签(label),显示与滑块的位置相对应的特定数字值。...4:刻度指示器(Tick mark),表示用户可以将滑块移动到的预定值。...如下的案例,子组件为 Table,Table 尺寸大于屏幕,必须将constrained设置为 false 以便将其绘制为完整尺寸。超出的屏幕尺寸可以平移到视图中。

    6K10

    BetterDisplay Pro for Mac(虚拟显示器软件)

    BetterDisplay for Mac是一款功能强大的显示器管理工具,可用于在 Mac 创建虚拟高分辨率显示器然后以屏幕镜像形式输出到物理低分辨率显示器。...• 发挥 XDR 或 HDR 显示器的全部亮度潜力!    • 通过滑块和本机或自定义键盘快捷键通过软件和硬件 (DDC) 控制更改显示器的亮度、音量和颜色!   ...• 通过流将您的显示内容(真实或虚拟)重定向到另一个屏幕。    • 如果您近距离使用大电视,请将电视的下半部分用作宽屏显示器(偏心流式传输)。    • 缩放 Sidecar 分辨率。   ...• 更好的缩放质量(系统偏好»辅助功能»缩放)或即使在 1080p 显示器上也能获得高质量的屏幕截图    • 通过菜单栏中的滑块(或子菜单)轻松更改真实和虚拟显示器的分辨率。   ...• 可快速访问的刷新率和屏幕旋转菜单。    • 简化镜像集的创建。    • 使用应用程序菜单轻松地相对于彼此移动显示。    • 快速指定一个显示器为主显示器。

    2.1K20

    BetterDisplay Pro Mac(显示器管理工具)v1.4.7激活版

    图片BetterDisplay Pro Mac(显示器管理工具)BetterDisplay Pro功能特色• 将您的内部和本机连接的外部显示器转换为 Apple Silicon 上平滑缩放的 HiDPI...• 发挥 XDR 或 HDR 显示器的全部亮度潜力!• 通过滑块和本机或自定义键盘快捷键通过软件和硬件 (DDC) 控制更改显示器的亮度、音量和颜色!...• 通过流将您的显示内容(真实或虚拟)重定向到另一个屏幕。• 如果您近距离使用大电视,请将电视的下半部分用作宽屏显示器(偏心流式传输)。• 缩放 Sidecar 分辨率。...• 更好的缩放质量(系统偏好»辅助功能»缩放)或即使在 1080p 显示器上也能获得高质量的屏幕截图• 通过菜单栏中的滑块(或子菜单)轻松更改真实和虚拟显示器的分辨率。...• 可快速访问的刷新率和屏幕旋转菜单。• 简化镜像集的创建。(临)• 使用应用程序菜单轻松地相对于彼此移动显示。• 快速指定一个显示器为主显示器。• 将假人与显示器相关联以进行自动连接/断开连接。

    2.2K50

    BetterDisplay Pro for Mac(虚拟显示器软件)

    它可以让您将显示器转换为完全可缩放的屏幕,允许亮度控制,提供 XDR/HDR 升级(兼容显示器上超过 100% 的额外亮度),完全调光为黑色,帮助您为 Mac 创建和管理虚拟显示器(假人),创建显示器的画中画窗口...• 发挥 XDR 或 HDR 显示器的全部亮度潜力! • 通过滑块和本机或自定义键盘快捷键通过软件和硬件 (DDC) 控制更改显示器的亮度、音量和颜色!...• 通过流将您的显示内容(真实或虚拟)重定向到另一个屏幕。 • 如果您近距离使用大电视,请将电视的下半部分用作宽屏显示器(偏心流式传输)。 • 缩放 Sidecar 分辨率。...• 更好的缩放质量(系统偏好»辅助功能»缩放)或即使在 1080p 显示器上也能获得高质量的屏幕截图 • 通过菜单栏中的滑块(或子菜单)轻松更改真实和虚拟显示器的分辨率。...• 可快速访问的刷新率和屏幕旋转菜单。 • 简化镜像集的创建。 • 使用应用程序菜单轻松地相对于彼此移动显示。 • 快速指定一个显示器为主显示器。

    1.7K30

    BetterDisplay Pro for Mac(虚拟显示器软件)

    BetterDisplay for Mac是一款功能强大的显示器管理工具,可用于在 Mac 创建虚拟高分辨率显示器然后以屏幕镜像形式输出到物理低分辨率显示器。...• 发挥 XDR 或 HDR 显示器的全部亮度潜力!     • 通过滑块和本机或自定义键盘快捷键通过软件和硬件 (DDC) 控制更改显示器的亮度、音量和颜色!    ...• 通过流将您的显示内容(真实或虚拟)重定向到另一个屏幕。     • 如果您近距离使用大电视,请将电视的下半部分用作宽屏显示器(偏心流式传输)。     • 缩放 Sidecar 分辨率。    ...• 更好的缩放质量(系统偏好»辅助功能»缩放)或即使在 1080p 显示器上也能获得高质量的屏幕截图     • 通过菜单栏中的滑块(或子菜单)轻松更改真实和虚拟显示器的分辨率。    ...• 可快速访问的刷新率和屏幕旋转菜单。     • 简化镜像集的创建。     • 使用应用程序菜单轻松地相对于彼此移动显示。     • 快速指定一个显示器为主显示器。

    3.7K20

    Android多点触控技术实战,自由地对图片进行缩放和移动

    ; /** * 记录当前图片的高度,图片被缩放时,这个值会一起变动 */ private float currentBitmapHeight; /** * 记录上次手指移动时的横坐标...translateX = totalTranslateX * scaledRatio + centerPointX * (1 - scaledRatio); // 进行边界检查,保证图片缩放后在水平方向上不会偏移出屏幕...translateY = totalTranslateY * scaledRatio + centerPointY * (1 - scaledRatio); // 进行边界检查,保证图片缩放后在垂直方向上不会偏移出屏幕...如果图片的宽度大于屏幕的宽度,或者图片的高度大于屏幕的高度,则将图片进行等比例压缩,让图片的的宽或高正好等同于屏幕的宽或高,保证在初始化状态下图片一定能完整地显示出来。...然后当只有一个手指按在屏幕上时,就把当前状态置为移动状态,之后会对手指的移动距离进行计算,并处理了边界检查的工作,以防止图片偏移出屏幕。

    2.5K50

    BetterDisplay Pro for Mac(虚拟显示器软件)

    BetterDisplay for Mac是一款功能强大的显示器管理工具,可用于在 Mac 创建虚拟高分辨率显示器然后以屏幕镜像形式输出到物理低分辨率显示器。...• 发挥 XDR 或 HDR 显示器的全部亮度潜力!    • 通过滑块和本机或自定义键盘快捷键通过软件和硬件 (DDC) 控制更改显示器的亮度、音量和颜色!   ...• 通过流将您的显示内容(真实或虚拟)重定向到另一个屏幕。    • 如果您近距离使用大电视,请将电视的下半部分用作宽屏显示器(偏心流式传输)。    • 缩放 Sidecar 分辨率。   ...• 更好的缩放质量(系统偏好»辅助功能»缩放)或即使在 1080p 显示器上也能获得高质量的屏幕截图    • 通过菜单栏中的滑块(或子菜单)轻松更改真实和虚拟显示器的分辨率。   ...• 可快速访问的刷新率和屏幕旋转菜单。    • 简化镜像集的创建。    • 使用应用程序菜单轻松地相对于彼此移动显示。    • 快速指定一个显示器为主显示器。

    1.8K10
    领券