展开

关键词

aria-required属性学习笔记

attribute can be used with any typical HTML form element; it is not limited to elements that have an ARIA role assigned. aria-required属性用于表明在一个form被提交之后,form里包含的某个元素需要用户输入。 该属性不仅限于具有ARIA role属性赋值的元素,任何form内能够包含的典型element都能够维护该属性。 HTML5 now has the required attribute, but aria-required is still useful for user agents that do not yet 虽然HTML5现在已经支持原生的required属性了,但是对于那些尚无法支持HTML5的user agent来说,aria-required仍然非常有用。

19110

【译】W3C WAI-ARIA最佳实践 -- 表单

选中后,复选框元素状态 aria-checked 设置为 true。如果未选中,它的状态 aria-checked 设置为 false。 radiogroup 使用 aria-labelledby 索引一个可见标签,或者使用 aria-label 指定一个标签。 具有 aria-orientation and aria-valuetext 属性的滑块示例 : 三个恒温控制滑块,使用 aria-orientation 和 aria-valuetext。 如果滑块具有可视的标签,那么滑块元素通过 aria-labelledby 引用,否则滑块元素上设置 aria-label 标签。 但是,无障碍名称也可以使用 aria-describedby 或 aria-label 提供。如果按钮有功能描述,则将按钮元素的 aria-describedby 的值设置为包含描述的元素的ID。

80230
  • 广告
    关闭

    腾讯云前端性能优化大赛

    首屏耗时优化比拼,赢千元大奖

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

    【译】W3C WAI-ARIA最佳实践 -- 控件

    示例使用计算属性的文件目录树视图示例:一个文件选择树,示范浏览器支持基于DOM 结构自动计算的 aria-level, aria-posinset 和aria-setsize 属性。 使用声明属性的文件目录树视图示例: 文件选择树,示范如何明确地定义 aria-level, aria-posinset 和 aria-setsize 的值。 使用计算属性的导航树视图示例: 一个树结构,提供一组网页的导航并示范浏览器支持基于DOM 结构自动计算的 aria-level, aria-posinset和 aria-setsize 属性。 使用声明属性的导航树视图示例: 一个树结构,提供一组网页的导航并示范如何明确地定义 aria-level, aria-posinset 和 aria-setsize 的值。 如果由于用户移动焦点或滚动树结构引起的动态加载,DOM中不存在完整的可用节点集合,每个节点拥有指定值的 aria-level, aria-setsize和 aria-posinset。

    42730

    【译】W3C WAI-ARIA最佳实践 -- 布局

    navigation界标区域使用 aria-label 或 aria-labelledby 标记。当前页面的链接的 aria-current 属性设置为 page。 aria-colcount 或 aria-rowcount 分别设置为列或行的总数。aria-colindex 或 aria-rowindex 设置为单元格在行或列中的位置。 NOTE 如果具有 grid 角色的元素是HTML table 元素,那么不必为行和单元格使用ARIA角色,因为HTML元素暗含了ARIA语义。例如,HTMLTR 具有隐含的ARIA角色 row。 如果通过aria-owns属性将行或列包含在网格中,它们将在网格元素的DOM后代之后呈现给辅助技术,除非DOM后代也被包含在给 aria-owns 属性中。 如果工具栏有可视的标签,它被工具栏元素上的 aria-labelledby 引用。否则,工具栏元素具有由 aria-label提供的标签。

    1.1K50

    WAI-ARIA无障碍网页应用属性完全展示

    一、你至少应该知道ARIA是什么东西!WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。 因此,才需要ARIA.三、ARIA是个非主流,咱不鸟!ARIA是非主流吗?真是睡在冻床上不知冷热啊。 ARIA规范一直在更新维护,浏览器方面IE8+以及其他所有现代浏览器都都已支持ARIA, 几乎可以说是全方位支持。 哎呀哎呀,聪明好学的你可能希望知道这里aria-hidden, aria-labelledby是啥意思。 ^_^下面三个表,依次为:ARIA role属性值表、ARIA属性表、ARIA状态属性表。

    58740

    fitbit aria体脂秤二次开发遇到的问题 原

    所以希望用fitbit aria实现多人称重 或 多物称重的二次开发不可实现。除非所有称重物品的重量差在某一个小范围内。

    50640

    写前端代码时请多为残障人士思考之『Accessibility』

    aria-disabled (state)•aria-expanded (state)•aria-haspopup•aria-hidden (state)•aria-invalid (state)•aria-label •aria-level•aria-multiline•aria-multiselectable•aria-orientation•aria-pressed (state)•aria-readonly•aria-required •aria-selected (state)•aria-sort•aria-valuemax•aria-valuemin•aria-valuenow•aria-valuetext2.实时区域属性•aria-atomic •aria-busy (state)•aria-live•aria-relevant3.拖放属性•aria-dropeffect•aria-grabbed (state)4.关系属性•aria-activedescendant •aria-controls•aria-describedby•aria-flowto•aria-labelledby•aria-owns•aria-posinset•aria-setsize焦点管理(

    32420

    Naikon APT组织分析

    感染链研究过程中发现几种不同的感染链用于传播Aria-body。 Aria-body RAT分析下载的有效负载是一个自制RAT,称为Aria-body,有32位和64位两种。 散列函数相似XsFunction和Aria-body加载程序都使用相同的哈希算法djb2。在XsFunction中,该函数的名称为XS02,在Aria-body中,其名称为AzManager。? 代码相似Aria-body后门中的某些功能与旧XsFunction后门中的功能相同。? 附录Aria-body支持命令集??DGA?

    31110

    搭建一个自己的私有云 + 离线下载站

    Google Cloud Platform 缺只允许使用 ssh 登陆,虽然可以使用 sudo 来使用 root 权限,但发现最后还是有一些问题,就是 aria 下载的文件都是 root 用户,root -0.3.0.ziprm -rf aria-ng-0.3.0.zip配置域名及 SSL 证书阿里有提供免费的 SSL 证书,打开阿里云官网 -> 管理控制台 -> 左侧的安全(云盾) -> CA 证书服务 证书配置这样基本就完成了,但打开 aria 后发现,无法链接上 aria,原因是因为我们配置了 https 证书,但没有告诉 aria ,下面我们修改 aria 的配置: cd ~.aria2.sh 证书pem路径# 在 RPC 服务中启用 SSLTLS 加密时的私钥文件(.key)rpc-private-key=你的 aria 证书key路径 aria + kodcloud 权限问题aria 是以 也就是说 aria 下载的文件, kodcloud 只有可读的权限,无法进行删除,修改等操作。

    6.3K51

    高级 Vue 组件模式 (6)

    增强组件内容目标之前的五篇文章中,switch 组件一直是被视为内部组件存在的,细心的读者应该会发现,这个组件除了帮我们提供开关的交互以外,还会根据当前 toggle 的开关状态,为 button 元素增加 aria-expanded 我们期望能够显示地声明当前的元素是一个 toggler 职能的组件或者元素,这个组件或者元素,可以根据当前 toggle 组件的开关状态,动态地更新它本身的 aria-expanded 属性,以便针对无障碍访问提供适配 `, true); } else { el.removeAttribute(`aria-expanded`, false); }}这个指令函数很简单,就是通过传入指令的表达式的值来判定,是否在当前元素上增加一个 aria-expanded 属性。 为了尽可能地使指令保证灵活性,我们期望可以自定义无障碍属性 aria 的后缀名称,比如叫做 aria-on,这里我们可以通过 arg 这个参数轻松实现,改版如下: export default function

    22020

    SVG fallback 及可读性

    这里面有两点值得注意,1,aria标签;2. alt标签的alternative text3.2.1 ARIA标签ARIA是无障碍的一个建议标准,如果要对读屏软件友好,我们需要对图形添加一些无障碍的属性 role=group或 role=img指定角色,然后在选择对应的属性进行文字注释,比如上图用到了 aria-labelledby。 其中较为常用的标签有以下几种:属性适用场景aria-hidden用于无实际意义的图片,告诉读屏器可以不读此处内容aria-label用于不可见的文字标签aria-labelledby用于可见的文字标签aria-describedby 用于较长的文字描述这里要注意的是,aria-label与aria-labelledby是一对相爱相杀的怨侣,在W3C中,对他们两个的适用范围有着严格的规定:If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label.

    24430

    京喜小程序首页无障碍优化实践

    aria-disabled=true表示表单禁止输入、aria-hidden=true 表示元素会被读屏软件忽略。 在商品卡片最外层标签加上 aria-role=button,还可以通过 aria-label 标签,将商品信息进行整合,精简描述,缩短商品名字的朗读时间,让障碍用户获得更好的体验。 隐藏元素读取上文提到商品卡片的无障碍优化可通过 aria-role=button 和 aria-label 来实现。 aria-role=button 读取差异安卓:读作“描述+按钮+子元素文本描述”,需借助 aria-hidden=true 隐藏子元素文本描述,避免信息重复朗读。iOS:有两种情况。 小程序无障碍展望—小程序基础库自 2.7.1 起,支持部分 ARIA 标签,但是仍有部分属性和 role 在小程序中不生效,希望未来可以支持所有的 ARIA 标签,给障碍用户带来更好的体验。

    16320

    动手练一练,做一个现代化、响应式的后台管理首页

    ARIA 属性,是网页无障访问的属性,方便读屏设备让其理解用途。 this.setAttribute(aria-expanded, false) : this.setAttribute(aria-expanded, true); this.getAttribute(aria-label this.setAttribute(aria-expanded, false) : this.setAttribute(aria-expanded, true); this.getAttribute(aria-label this.setAttribute(aria-expend,false) : this.setAttribute(aria-expanded,true); this.getAttribute(aria-label this.setAttribute(aria-expended,false) : this.setAttribute(aria-expended,true); this.getAttribute(aria-label

    15500

    关于 Web 可访问性的神话

    No ARIA > Bad ARIA在所有无障碍专家开始哭脏和咒骂我的名字之前,让我澄清一些事情:没有ARIA比坏ARIA更好。ARIA 并非所有浏览器屏幕读取器都支持,它应该是最后的手段。 例如,有些小部件和模式(例如,选项卡面板再次)无法使用语义元素完成,在这些情况下,ARIA 是必须的。 没有ARIA>坏ARIA的神话误解是,它忽略了方程式的一个重要部分:好ARIA将走向何方?答案其实很简单:Good ARIA > No ARIA > Bad ARIA我们都同意坏的ARIA是坏的。 但是没有ARIA也不是理想的:提供不良体验(坏ARIA)的解决方案不应该提供低于标准的体验(没有ARIA)。也应该有好的经验!如果一个孩子正在学习骑自行车,挣扎和跌倒,我们不会告诉他们,停止! (picture: Tatiana Syrikova)No ARIA > bad ARIA 延续了虚假的二分法。

    1220

    动手练一练,做一个现代化、响应式的后台管理首页

    ARIA 属性,是网页无障访问的属性,方便读屏设备理解其用途。 this.setAttribute(aria-expanded, false) : this.setAttribute(aria-expanded, true); this.getAttribute(aria-label this.setAttribute(aria-label, expand menu) : this.setAttribute(aria-label, collapse menu); body.classList.toggle this.setAttribute(aria-expanded, false) : this.setAttribute(aria-expanded, true); this.getAttribute(aria-label this.setAttribute(aria-label, close menu) : this.setAttribute(aria-label, open menu); body.classList.toggle

    20200

    动手练一练,做一个响应式的后台管理面板

    ARIA 属性,是网页无障访问的属性,方便读屏设备理解其用途。 this.setAttribute(aria-expanded, false) : this.setAttribute(aria-expanded, true); this.getAttribute(aria-label this.setAttribute(aria-label, expand menu) : this.setAttribute(aria-label, collapse menu); body.classList.toggle this.setAttribute(aria-expanded, false) : this.setAttribute(aria-expanded, true); this.getAttribute(aria-label this.setAttribute(aria-label, close menu) : this.setAttribute(aria-label, open menu); body.classList.toggle

    27610

    bootstrap 模态框 弹出框

    button.btn.btn-primary btn-lg data-toggle=modal data-target=#myModaldiv.modal fade id=myModal tabindex=-1 role=dialog aria-labelledby =myModalLabel aria-hidden=true 使用模态窗口,您需要有某种触发器。 aria-labelledby=myModalLabel,该属性引用模态框的标题。 属性 aria-hidden=true 用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上)。

    58540

    高级 Angular 组件模式 (7)

    Directives 因为父组件会提供所有相关的 UI 元素(比如这里的 button),所以 toggle 组件的开发者可能无法满足组件使用者的一些附加需求,比如,在一个自定义的开关控制元素上增加 aria 实现我们通过实现一个 指令来负责向组件使用者提供的自定义元素增加 role=switch 和 aria-pressed 属性。 这个 指令拥有一个 input 属性(并与 组件共享),该属性将决定 aria-pressed 属性的值是 true 还是 false。 是很有必要的,而 hooks 这个概念,一般情况下,都会是相对简单的,比如生命周期 hook、调用过程 hook、自定义属性 hook 等,在这里,我们通过 Directive 为自定义开关元素增加 aria

    28120

    Vue 3 高阶指南之 Proxy

    (obj, prop, newval) { let oldval = obj; if (prop === selected) { if (oldval) { oldval.setAttribute(aria-selected , false); } if (newval) { newval.setAttribute(aria-selected, true); } } 默认行为是存储被传入 setter 函数的属性值 obj return true; } }); let i1 = view.selected = document.getElementById(item-1); console.log(i1.getAttribute(aria-selected )); true let i2 = view.selected = document.getElementById(item-2); console.log(i1.getAttribute(aria-selected )); false console.log(i2.getAttribute(aria-selected)); true ?

    32030

    20个为前端开发者准备的文档和指南5

    Periodic Table of ARIA 1.0 Roles & Attributes(ARIA1.0角色和属性周期表)它被分成了两页——我原本设想把它作为这个列表的第21个——文档上详细的记载了ARIA ARIA Examples(ARIA实例)由Heydon Pickering使用不同的示例为ARIA各个功能编译的HTML示例演示。演示和代码分为9个不同的示例。 它对每一个想要实现高级ARIA功能的人来说是一个很好的出发点。?9.

    47370

    扫码关注云+社区

    领取腾讯云代金券