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

Web内容的无障碍性(3):ARIA角色Roles值示与aria-*属性值列表说明

上篇《Web内容的无障碍性(2):实现WAI-ARIA无障碍网页及注意实现》,知识讲解ARIA相关的知识及使用,但是ARIA角色值与属性值都非常多,除了几个简单,基本是处于懵逼状态。...本文对几年前张鑫旭老师的《WAI-ARIA无障碍网页应用属性完全展》的属性表的简化增补版本ARIA 角色值分类列表角色以有意义的方式指示元素的类型。...button表示按钮大家都懂的,没啥好说的checkbox表示复选框同样,大家都懂的,没啥好说的combobox表示下拉列表框grid表示网格gridcell表示网格单元类似于table & table-cellgroup...该属性可以避免辅助工具在区域内容更新完毕前不断即时提醒使用者。aria-controls字符串。空格分隔的id属性值列表。该属性定义了元素间不能通过文档结构决定的关联关系。...aria-required字符串。元素值是否必需。默认为false, 表示元素值可以为空;true表示元素值是必需的。多半用在表单控件中。对应HTML5中required属性。

2K20

W3C无障碍组件创作实践中文版发布

左图这种情况是视障人士最最经常遇到的“典型障碍问题”之一: 页面中存在“未加标签”元素,这会导致非常严重的体验问题——读屏用户无从得知相应元素是什么,可能导致完全无法使用相应功能; 界面上的所有有价值的信息未以正确的方式传达给读屏用户...这些问题大量存在于各类移动端应用中,造成视障用户难以顺畅使用相关功能。...适配键盘交互在平时开发过程中是非常容易忽略的一环,缺少良好键盘交互适配的组件/功能,意味着它们也将键盘使用者拒之门外。...而良好的键盘支持,不仅仅对视障人士使用电脑至关重要,对于提升普通人使用电脑的效率也非常显著。 如何写无障碍组件的代码? 要实现这样的代码效果,就不得不提到“语义化”和“WAI-ARIA”了。...如果你是 开发者 ‍,我建议你通读全文,特别是当你处于听说过 WAI-ARIA 角色、属性、状态却不知道应该如何使用,这份文档或许能解答你很多疑惑。

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

    服务网格和微服务架构的关系:理解服务网格在微服务架构中的角色和作用

    摘要 各位技术探索者,猫头虎博主今天带来了一篇关于微服务和服务网格的深度探讨。在微服务大行其道的今天,服务网格逐渐成为了云原生领域中不可或缺的一部分。但服务网格和微服务到底有何关联?...本文将详细解析二者的关系,以及服务网格在微服务架构中的关键作用。对于关心微服务、服务网格、云原生技术 的读者,本篇文章绝对是你的不二之选!...微服务架构简介 微服务架构是一种将单一应用程序划分为一组小的服务的方法,每个服务都运行在其自己的进程中,并通过轻量级的方式(如HTTP的RESTful API)进行通信。...服务网格的定义 服务网格是一个专门为微服务应用设计的基础设施层,它使得服务到服务的通信快速、可靠且安全。 2.1 服务网格的核心功能 流量管理:如路由、负载均衡和故障恢复。...服务网格在微服务架构中的角色 3.1 解决微服务的挑战 微服务虽然带来了许多优势,但也引入了一些新的挑战,如服务发现、负载均衡和断路器模式。服务网格通过提供这些功能,帮助企业更容易地采纳微服务。

    22810

    什么是服务网格?在微服务体系中又是如何使用的?

    有一位粉丝问私信问我的面试题,他说“什么是服务网格”? 服务网格这个概念出来很久了,从 2017 年被提出来,到 2018 年正式爆发,很多云厂商和互联网企业都在纷纷向服务网格靠拢。...Service Mesh,我们通常把他称为第三代微服务架构,既然是第三代,那么意味着他是在原来的微服务架构下做的升级。...所以,在第一代微服务架构中,每个微服务除了要实现业务逻辑以外,还需要解决上下游寻址、通讯、以及容错等问题。...在第二代微服务架构中,负责业务开发的小伙伴不仅仅需要关注业务逻辑,还需要花大量精力去处理微服务中的一些基础性配置工作,虽然 Spring Cloud 已经尽可能去完成了这些事情,但对于开发人员来说,学习...之所以我们称 Service Mesh 为服务网格,是因为在大规模微服务架构中,每个服务的通信都是由 SideCar 来代理的,各个服务之间的通信拓扑图,看起来就像一个网格形状。

    3.4K21

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

    尽管 WAI-ARIA 属性和辅助技术使用"row" 和 "column" 的术语,描述和呈现 grid 角色元素的逻辑结构,但是在元素上使用 grid 角色,并不需要将其视觉呈现实现为表格。...尽管数据网格和布局栅格使用相同的ARIA角色、状态和属性,它们内容和目的中的不同是考虑键盘交互设计的重要因素。为了强调这些因素,以下两节分别介绍了数据网格和数据栅格的键盘交互模式。...如果在用户界面中有一个元素是网格的标签,在网格元素上设置 aria-labelledby 属性,该属性的值指向该标签元素。否则,使用 aria-label为网格元素指定一个标签。...NOTE 如果具有 grid 角色的元素是HTML table 元素,那么不必为行和单元格使用ARIA角色,因为HTML元素暗含了ARIA语义。例如,HTMLTR 具有隐含的ARIA角色 row。...当一组控件在视觉上呈现为一个组合,可以使用 toolbar 角色来告知屏幕阅读器用户分组的呈现和目的。组合控件到工具栏,在键盘交互中是一个减少Tab停留数量的有效方式。

    6.2K50

    在Java中如何高效判断数组中是否包含某个元素

    原文作者:Hollis_Chuang 原文地址:http://www.hollischuang.com/archives/1269 如何检查一个数组(无序)是否包含一个特定的值?...这是一个在Java中经常用到的并且非常有用的操作。同时,这个问题在Stack Overflow中也是一个非常热门的问题。...在投票比较高的几个答案中给出了几种不同的方法,但是他们的时间复杂度也是各不相同的。本文将分析几种常见用法及其时间成本。...许多开发人员为了方便,都使用第一种方法,但是他的效率也相对较低。因为将数组压入Collection类型中,首先要将数组元素遍历一遍,然后再使用集合类做其他操作。...35183useLoop: 3218useArrayBinary: 14useArrayUtils: 3125 其实,如果查看ArrayUtils.contains的源码可以发现,他判断一个元素是否包含在数组中其实也是使用循环判断的方式

    5.2K10

    在 Java 中如何使用 transient

    A:当对象被序列化时(写入字节序列到目标文件)时,transient阻止实例中那些用此关键字声明的变量持久化;当对象被反序列化时(从源文件读取字节序列进行重构),这样的实例变量值不会被持久化和恢复。...例如,当反序列化对象——数据流(例如,文件)可能不存在时,原因是你的对象中存在类型为java.io.InputStream的变量,序列化时这些变量引用的输入流无法被打开。...transient使用介绍 Q:如何使用transient? A:包含实例变量声明中的transient修饰符。片段1提供了小的演示。 ? ? ?...片段1:序列化和反序列化ClassLib对象 片段1中声明ClassLib和TransDemo类。...类中的成员变量和transient Q:类中的成员变量中可以使用transient吗? A:问题答案请看片段2 ? 片段2:序列化和反序列化Foo对象 片段2有点类似片段1。

    6K20

    在Scrapy中如何使用aiohttp?

    特别是当你使用的是Scrapy,那么这个问题变得尤为麻烦。 我们一般在Scrapy的下载器中间件里面设置爬虫的代理,但问题来了,在下载器中间件里面,你怎么发起网络请求?...为了避免这种混乱,在下载器中间件里面获取代理IP当然是最好的,但又不能用requests,应该如何是好呢?...实际上,我们可以在Scrapy里面,使用aiohttp,这样既能拿到代理IP,又能不阻塞整个爬虫。...为了说明如何编写代码,我们用Scrapy创建一个示例爬虫。...在等待第一页返回的过程中,第二个延迟请求完成并返回,于是Scrapy去请求正式网址的第二页…… 总之,从Scrapy打印出的信息可以看出,现在Scrapy与aiohttp协同工作,异步机制正常运转。

    6.5K20

    在 ES 中如何使用排序

    在 Elasticsearch 中,排序是一项重要的功能,它允许我们按照特定的字段或条件对搜索结果进行排序。通过合理使用排序,我们可以更方便地找到所需的信息。...最常见的方式是在查询请求中使用`sort`参数。我们可以指定要排序的字段,并指定升序或降序排序。...例如,我们可以设置排序的权重,以确定不同字段在排序中的重要性。 在实际应用中,排序的使用需要考虑以下几个因素: 1. 用户需求:了解用户对搜索结果的期望排序方式,以便提供最相关和有用的结果。 2....为了获得最佳的排序效果,我们还可以采取以下措施: 1.选择合适的字段类型:根据数据的特点选择合适的字段类型,例如,数值类型的字段在排序时效率更 高。...总之,ES 中的排序功能为我们提供了强大的工具,使我们能够根据各种需求对搜索结果进行灵活的排序。通过合理使用排序,我们可以提高搜索的效率和准确性,为用户提供更好的体验。

    84010

    在HTML中如何使用CSS?

    2.3 链接式 在实际的网页设计中,链接式 CSS 用法是最常用的,也是效果最好的。...链接式 CSS 使用时需要在 标记中使用 标记,通过 标记的相关属性指明外部 CSS 文件的路径,以方便找到其中定义的 CSS 样式并运用在当前网页元素上。...使用链接式 CSS,可以在设计整个网站时,将多个页面都会用到的 CSS 样式定义在一个或多个 文件中,然后在需要用到该样式的 HTML 网页中通过 标记链接这些 文件,通过链接式 CSS 可以降低整个网站的页面代码冗余并提高网站的可维护性...例如,可以在 文件中不写任何 CSS 代码,只写 ,这样所有导入或链接到该 CSS 文件的 HTML 页面都可以使用 中定义的所有样式效果。...这时解决 CSS 冲突你就要了解在 HTML 中使用 CSS 的优先级规则: 内联式 > 内嵌式 > 外部样式; 在多个样式中,后出现的样式的优先级高于先出现的样式; 在样式中,选择器的优先级: 样式

    8.5K100

    在Python中如何使用Elasticsearch?

    来源:Python程序员 ID:pythonbuluo 在这篇文章中,我将讨论Elasticsearch以及如何将其整合到不同的Python应用程序中。 什么是ElasticSearch?...RDBMS概念中索引相当于一个数据库,因此不要将它与你在RDBMS中学习的典型索引概念混淆。使用PostMan来运行REST API。...不过,你可以使用ElasticSearch的Python库专注于主要任务,而不必担心如何创建请求。 通过pip安装它,然后你可以在你的Python程序中访问它。...我们的目标是访问在线食谱并将它们存储在Elasticsearch中以用于搜索和分析。我们将首先从Allrecipes中获取数据并将其存储在ES中。...我使用Chrome,借助名为ElasticSearch Toolbox的工具使用ES数据查看器来查看数据。 在我们继续之前,让我们在calories字段中发送一个字符串,看看它是如何发生的。

    8K30

    如何使用JavaScript向现有SVG中添加元素?

    在日常开发中,特别是前端开发中,我们经常会遇到需要动态修改页面内容的场景。比如在一个已经存在的SVG图形中,想要通过JavaScript添加新的图形元素。...动态向SVG中添加元素的实际应用场景 假设我们正在开发一个数据可视化的应用程序,其中的图表是用SVG绘制的。现在我们需要根据用户的操作动态地在现有的SVG图表中添加新的数据点或者线段。...因此,在创建新的SVG元素时,我们必须指定这个命名空间。 设置属性:新创建的SVG元素需要设置一些属性,比如路径、颜色、线宽等。...将新元素添加到SVG中:最后一步就是将新创建的SVG元素添加到我们选中的SVG元素中,使其显示在页面上。...结束 通过以上步骤,我们可以很容易地使用JavaScript向现有的SVG中动态添加新元素。这种方法非常适合用于需要动态生成或更新图形内容的场景。

    17410

    【python自动化】Playwright基础教程(三)定位操作

    按alt文本定位元素-get_by_alt_text() 使用频率:★☆☆☆☆ 释义:按alt属性的文本进行定位元素。...按标签定位元素-get_by_label() 使用频率:★☆☆☆☆ 释义:允许按关联 or aria-labelledby 元素的文本或 aria-label 属性查找输入元素。...角色属性定位-get_by_role() 使用频率:★★☆☆☆ 释义:通过ARIA角色、ARIA属性和可访问名称定位元素 网页代码: Sign up 在执行操作之前立即解析为元素,因此实际上可以在不同的 DOM 元素上对同一定位器执行一系列操作。...has_text: 匹配包含指定文本的元素,这些元素可能包含在子元素或后代元素中。传递 [string] 时,匹配不区分大小写并搜索子字符串。

    1.7K61

    在 Python 中如何使用 format 函数?

    前言 在Python中,format()函数是一种强大且灵活的字符串格式化工具。它可以让我们根据需要动态地生成字符串,插入变量值和其他元素。...本文将介绍format()函数的基本用法,并提供一些示例代码帮助你更好地理解和使用这个函数。 format() 函数的基本用法 format()函数是通过在字符串中插入占位符来实现字符串格式化的。...占位符使用一对花括号{}表示,可以在{}中指定要插入的内容。...下面是一个使用关键字参数的示例: formatted_string = "Name: {name}, Age: {age}".format(name="Alice", age=25) 在上面的示例中,name...我们学习了如何使用占位符插入值,并可以使用格式说明符指定插入值的格式。我们还了解了如何使用位置参数和关键字参数来指定要插入的值,以及如何使用特殊的格式化选项来格式化数字。

    1K50

    在XCode中如何使用高级查询

    对于一个框架来说,仅有基本的CURD不行,NewLife.XCode同时还提供了一个非常宽松的方式来使用高级查询,以满足各种复杂的查询需求。...XCode不支持多表关联(v7开始测底不支持,以前的支持太鸡肋,几乎从未使用),这种涉及多表关联的查询,就需要子查询来代替了,看看SearchWhere: image.png image.png 可以看到...在各个小片段上使用MakeCondition格式化数据,保证这些代码能根据当前数据库生成相应的语句,使得系统能支持多数据库。比如时间日期类型,在MSSQL是单引号边界,在Access是井号边界。...NewLife.XCode下载地址:http://XCode.codeplex.com 没有很完整的教程,只有本博客中的点点滴滴!

    5K60
    领券