初学者指南咏叹调无障碍 - raybet平台,雷竞技苹果下载官方版,reybet雷竞技下载

跳到内容< / >

得到HubSpot的免费< / >< / div >

网站所有者了解ARIA可访问性

理想情况下，互联网应该适合每个人。但是一些残疾用户，特别是那些依赖屏幕阅读器和那些不能使用鼠标的人，无法使用网站上的某些功能。< / p >< !--more-->

这个问题?超文本标记语言< / >。< / p >< p >超文本标记语言的早期版本——HTML4——缺少语义描述某些用户界面小部件的标记，如滑块、菜单和进度条。因此，开发人员需要使用类似于 " div "< / >创建这些小部件。虽然对于能够查看屏幕的用户来说，它们看起来很好，但对于不能查看屏幕的用户来说，它们就是个问题。< / p >< p >< !--HubSpot Call-to-Action Code -->

由于代码没有提供足够的信息来描述标记中的这些小部件，因此无法使用辅助技术。这就是艾瑞亚的切入点< / p >< p >ARIA允许web作者以辅助技术能够理解的方式描述用户界面组件，这使得辅助技术用户能够访问这些组件。< / p >< p >下面我们将仔细看看ARIA是什么，以及它如何帮助改进网页可及性< / >。< / p >

咏叹调是什么?

ARIA——可访问的富Internet应用程序的缩写——是一组角色、状态和属性，可以添加到HTML中来描述普通用户界面元素的含义和目的，这些元素在HTML中没有语义标记。通过以这种方式补充HTML, ARIA属性使使用辅助技术的人们更容易访问web内容和应用程序。< / p >< p >例如，ARIA提供了像“复选框”和“菜单”这样的角色来描述所显示的小部件类型。ARIA还提供属性来描述小部件所处的状态，如复选框的“已选中”或菜单的“haspopup”。< / p >< p >由于ARIA控制辅助技术用户的非视觉体验的呈现，因此万维网无障碍计划(WAI)< / >在功能上，ARIA角色、状态和属性就像用于辅助技术的CSS。< / p >< p >现在我们理解了ARIA是什么，让我们看看如何使用ARIA 使您的站点的底层HTML更容易访问< / >。< / p >

咏叹调易访问性指导方针

在使用ARIA之前，一定要花点时间理解和应用下面的ARIA可访问性指导原则。这些是基于WAI的可访问的富互联网应用程序工作组提供的指导方针创作实践1.2规范< / >。< / p >

1.可用时使用本地HTML元素。

ARIA被设计用来填补HTML4的空白。然而，后来在HTML5中添加了许多语义标签。Web作者应该始终倾向于使用正确的语义HTML元素，而不是使用ARIA角色、状态或属性。< / p >< p >例如，web作者应该使用HTML5的

元素，而不是添加ARIA role= " navigation "到div元素。< / p >

2.满足用户对给定ARIA角色的期望。

第一条指导原则很简单:如果您使用ARIA角色，您需要确保它的行为与用户期望的一样。例如，如果添加

元素并将其ARIA角色定义为“button”，则需要合并所需的JavaScript以提供按钮所需的键盘交互。< / p >

3.使用ARIA来添加而不是删除可访问的语义。

辅助技术需要特定的信息来派生用户界面元素的含义和目的。这一信息称为可访问性语义。< / p >< p >如果操作正确，ARIA将提供可访问性语义。如果做错了，它会覆盖可访问性语义。< / p >< p >ARIA可以通过两种方式提供所需的信息:隐藏原始内容或为其添加意义。例如，假设您有一个带有几个菜单项的导航菜单。这些条目每个都代表并链接到站点上的一个重要页面，这样用户就可以点击其中的一个条目——比如“关于”——并被带到相应的页面。< / p >< p >在HTML中，这些导航项将是anchor或元素。但是为了向辅助技术以及那些使用辅助技术的人传达这些是菜单项而不是链接，您需要添加ARIA角色“menuitem”。这将掩盖原来的语义，以便让辅助技术用户更容易访问HTML。< / p >< p >ARIA还可以增强原始内容，以辅助技术能够理解的方式描述用户界面组件。例如，aria-expanded属性表示菜单不仅仅是一个菜单，而是一个可扩展的菜单。< / p >< p >咏叹调的力量也是它的危险。当不正确地使用ARIA时，Web作者可以重写可访问性语义。例如，如果一个web作者创建了一个表元素，然后向其添加ARIA角色“log”，辅助技术用户将不能将其视为一个表。< / p >

咏叹调的可访问性的例子

WAI为在HTML中使用ARIA提供了一整套web标准。有许多角色、状态和属性可用于定义可访问的用户界面元素，包括:< / p >

警报和消息对话框李< / >

面包屑李< / >

旋转木马李< / >

菜单、菜单栏或菜单按钮李< / >

表李< / >< / ul >< p >中可以找到上述任何元素的例子WAI创作实践1.2规范< / >。下面我们将关注三个元素:警告、按钮和列表框。第一个将展示如何使用ARIA角色。第二个将展示如何使用ARIA状态，第三个将展示如何使用ARIA属性。让我们看看下面的这些例子。< / p >
咏叹调作用的例子
在这个例子< / >由WAI提供的警报按钮——当点击时——会触发一条消息。< / p >< p >
在下面的HTML中，您可以看到按钮元素后面跟着一个div元素，其ARIA角色设置为“alert”。此角色将div元素标识为添加或更新警报内容的容器。< / p >< p >< / p >
```
<按钮type = "按钮" id = " alert-trigger " >
触发警报
< /按钮>
< div id =“例子”角色=“警报”> < / div >
< !——下面的script元素包含将被插入到alert元素中的内容。-->
< script type = " text /模板" id =“alert-template”>
< p > < span lang =“da”> Hej > < /跨度,你好,< span lang =“它”>再见< / span >, < span lang =“ja”>こんにちは< / span >, < span lang = "柯" >안녕跨度< / > < / p >
> < /脚本
```
咏叹调状态的例子
在这个例子< / >WAI提供的按钮是一个可以关闭或打开的可访问的切换按钮。当按下这个特定的示例按钮时，图标就会从“开启声音”变成“关闭声音”图标。< / p >< p >
在下面的HTML中，您可以看到正在使用ARIA角色和两个ARIA属性。ARIA角色将锚点元素标识为按钮小部件。因为它是一个切换按钮，它有一个咏叹调按下的状态。当按钮被关闭时，状态的值为false。当按钮被打开时，状态为true。< / p >< p >另一个aria属性—aria-hidden—应用于SVG文件。设置为“true”，隐藏的aria属性将删除SVG元素，这样屏幕阅读器就不会读取它。由于此图标纯粹是装饰，删除此元素可以改善辅助技术用户的体验。< / p >< p >< / p >
```
< p >
这
<问>
沉默的
< / q >
切换按钮使用
<代码>
一个
> < /代码
元素。
< / p >
< tabindex = " 0 "
角色= "按钮"
id =“切换”
aria-pressed = " false " >
沉默的
< svg aria-hidden = " true " focusable =“false”>
<使用xlink: href = "图片/ mute.svg # icon-sound " > < /使用>
< / svg >
< / >
```
ARIA属性示例
在这个例子< / >WAI提供的列表框是可滚动的，允许用户从一个选项列表中选择一个项目。< / p >< p >在下面的HTML中，您可以看到两个ARIA角色和一个ARIA属性。ARIA角色设置为“listbox”，将无序列表元素标识为具有列表框行为并包含列表框选项。每个列表项都有一个ARIA角色设置为“option”，它标识包含选项名称的每个可选元素。< / p >< p >一个ria-labelledby属性被设置为与包含listbox标签的span元素的id名称相同的值。这为辅助技术用户提供对象的可识别名称。< / p >< p >< / p >
```
< p >
选择你最喜欢的超铀元素(锕系或反锕系)。
< / p >
< div class = " listbox-area”>
< div >
< span id = " ss_elem " class = " listbox-label”>
超铀元素:
< / span >
< ul id = " ss_elem_list "
tabindex = " 0 "
角色= "列表框"
aria-labelledby = " ss_elem " >
<李id = =“选项”>“ss_elem_Np”作用
镎
李< / >
<李id = =“选项”>“ss_elem_Pu”作用
钚
李< / >
<李id = =“选项”>“ss_elem_Am”作用
镅
李< / >
<李id = =“选项”>“ss_elem_Cm”作用
锔
李< / >
<李id = =“选项”>“ss_elem_Bk”作用
锫
李< / >
<李id = =“选项”>“ss_elem_Cf”作用
锎
李< / >
<李id = =“选项”>“ss_elem_Es”作用
锿
李< / >
<李id = =“选项”>“ss_elem_Fm”作用
镄
李< / >
<李id = =“选项”>“ss_elem_Md”作用
钔
李< / >
<李id = =“选项”>“ss_elem_No”作用
锘
李< / >
<李id = =“选项”>“ss_elem_Lr”作用
铹
李< / >
<李id = =“选项”>“ss_elem_Rf”作用
Rutherfordium
李< / >
<李id = =“选项”>“ss_elem_Db”作用
钍
李< / >
<李id = =“选项”>“ss_elem_Sg”作用
Seaborgium
李< / >
<李id = =“选项”>“ss_elem_Bh”作用
Bohrium
李< / >
<李id = =“选项”>“ss_elem_Hs”作用
钅黑
李< / >
<李id = =“选项”>“ss_elem_Mt”作用
Meitnerium
李< / >
<李id = =“选项”>“ss_elem_Ds”作用
鐽
李< / >
<李id = =“选项”>“ss_elem_Rg”作用
Roentgenium
李< / >
<李id = =“选项”>“ss_elem_Cn”作用
Copernicium
李< / >
<李id = =“选项”>“ss_elem_Nh”作用
Nihonium
李< / >
<李id = =“选项”>“ss_elem_Fl”作用
Flerovium
李< / >
<李id = =“选项”>“ss_elem_Mc”作用
Moscovium
李< / >
<李id = =“选项”>“ss_elem_Lv”作用
Livermorium
李< / >
<李id = =“选项”>“ss_elem_Ts”作用
Tennessine
李< / >
<李id = =“选项”>“ss_elem_Og”作用
Oganesson
李< / >
< / ul >
< / div >
< / div >
```
使用ARIA添加必要的语义
理解并在标记中使用ARIA角色、状态和属性可以帮助您创建具有复杂用户界面元素的网站，所有用户(包括依赖屏幕阅读器的用户和不能使用鼠标的用户)都可以访问这些元素。一旦你掌握了ARIA的基本知识，你就可以开始学习其他的网页可及性的指导方针< / >使您的网站完全兼容。< / p >< p >< !--HubSpot Call-to-Action Code -->

最初发布于2021年3月22日上午7:00:00，更新于2021年3月22日< / p >

主题:< / p >网页可及性< / >< / div >

别忘了分享这篇文章!

相关文章