商务网站内容维护和管理的范围,蒙牛网站建设报价情况,做地方门户网站的资质,怎么在网上卖东西视频请务必确保所有用户都可以访问您的网站#xff0c;包括使用屏幕阅读器等辅助技术的用户。 一种方法是使用 ARIA 地标角色来帮助屏幕阅读器用户轻松浏览您的网站。使用地标角色还有其他好处#xff0c;例如改进 HTML 的语义并更轻松地设置网站样式。在这篇博文中#xff0c;我…请务必确保所有用户都可以访问您的网站包括使用屏幕阅读器等辅助技术的用户。 一种方法是使用 ARIA 地标角色来帮助屏幕阅读器用户轻松浏览您的网站。使用地标角色还有其他好处例如改进 HTML 的语义并更轻松地设置网站样式。在这篇博文中我们将通过一个简单的例子仔细研究这些地标以及如何在您的网站上使用它们。
什么是 HTML 地标角色
地标在可访问的富 Internet 应用程序 ARIA 规范中定义为用户可能希望快速访问的页面区域。虽然没有说这是专门针对屏幕阅读器用户的但他们是一组特别有用的用户。ARIA 规范中定义了八个具有里程碑意义的角色
bannernavigationsearchmainregioncomplementaryformcontentinfo
为元素分配特定角色的一种方法是使用元素上的属性。例如
div classbanner rolebanner/div虽然在某些情况下您可能需要显式设置元素的角色但某些 HTML 元素已经具有与之关联的角色。在这篇文章的其余部分我们将遵循 ARIA 的第一条规则如下所示 如果可以将本机 HTML 元素或属性与已内置的语义和行为一起使用而不是重新调整元素的用途并添加 ARIA角色、状态或属性以使其可访问那么请这样做。 如何使用地标角色
为了说明 HTML 地标的工作原理我们将构建一个基本的网页该网页将改善屏幕阅读器用户的用户体验和页面的可访问性。我们不会编写任何 CSS而是专注于编写干净的语义 HTML。
将以下 HTML 保存到名为的文件中然后在您喜欢的浏览器中打开它。
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /titleMr. Pineapples Pizzeria/title/headbody/body
/html您应该在浏览器选项卡中看到一个标题为“菠萝先生的比萨饼店”的空白页面。对于每个地标我们将添加适当的 HTML 并检查可访问性树以查看其变化情况。
banner地标
横幅地标用于标识网页的标题该标题通常包含网站的徽标、导航和搜索输入。当 header 元素未用作 main 元素或其他分段元素的子元素时会为其分配角色。
让我们通过在我们的页面中添加一个横幅地标来看看它是什么样子的。
bodyheadera classlogo href/span classvisually-hiddenMr. Pineapples Pizzeria/span/a/header
/body刷新页面并打开开发人员工具。根据您的浏览器访问辅助功能树的方式会有所不同。您可以点击以下链接了解更多信息
Firefox火狐浏览器Chromium (Edge, Chrome, Arc)在 Safari 中打开开发人员工具称为 Web 检查器。在“元素”选项卡中选择一个元素。在最右侧选择“节点”选项卡然后展开“辅助功能”部分 从屏幕截图中可以看出选中元素后角色显示为 .我们有一个良好的开端 注意Firefox 开发者工具的辅助功能检查器不会显示该元素的适当角色。相反它将所有这些元素的角色显示为“地标”。此问题已得到解决并将在 Firefox 114 中登陆。如果您使用的是面向开发人员的 Firefox则该问题已经得到解决。 navigation地标
地标用于标识一组链接这些链接可帮助用户浏览网页或相关网页。这可以包括侧边栏导航、网站的主导航或页面页脚中的一组相关链接等内容。
如前所述在页眉中找到的常见元素之一是网站的主要导航。让我们在页面中添加一个
nav aria-labelPrimaryullia aria-currentpage href/Home/a/lilia href/menuOur pizzas/a/lilia href/contactGet in touch/a/li/ul
/nav在这里我们使用 nav 元素元素因为它隐式具有角色。由于一个页面可以有多个导航元素因此唯一地标识每个地标非常重要。为此我们使用该属性并将导航地标命名为“Primary”。 注意当屏幕阅读器描述上述导航地标时它会显示“主要导航”。这就是值中不包含“导航”一词的原因。 如果检查该元素您会注意到两件事该元素被标识为导航地标并公开了我们使用 .
search地标
该角色用于对一组相关元素进行分组这些元素共同提供了一种搜索网站的方法。使用此角色的最常见方法是通过窗体。
form namesite-search action/search methodget rolesearchlabel forqueryFind your perfect pizza/labelinput typesearch idquery namequery /
/form在这里我们遇到了第一个实例我们需要显式地为元素分配角色。由于没有具有隐式搜索角色的本机 HTML 元素因此在此示例中我们将该角色分配给 form 元素。 随着引入新的 HTML 元素这种情况将发生变化我们将在本文后面讨论。
如果使用开发人员工具检查表单元素您将看到它正确地将地标标识为搜索地标
main地标
我们现在走出了标题进入了页面的主要内容。这引入了下一个地标恰如其分地命名为 .需要注意的是一个页面只能有一个 main 元素。 现在在开发人员工具中选择元素将正确识别我们的主要内容。
region地标
我们的主要内容可以由不同类型的内容或地区组成幸运的是这其中有一个作用。这个角色很有趣;从技术上讲有一个 HTML 元素的隐式作用是 但所讨论的元素笼罩在一些争议中。
我所指的元素是 section 元素或者有些人称之为另一个名称。引起争议的原因是当像下面的例子一样使用时它没有任何语义意义
sectionh2Our pizzas/h2ulliMargherita with pineapple/liliVeggie with pineapple/liliMeaty with pineapple/li/ul
/section使用开发人员工具检查它还将显示它未被标识为区域导航地标 那么我们如何将其变成一个区域呢我们可以通过使用 aria-labelledby 属性将标题元素与部分相关联来做到这一点。这有两个目的它将该部分变成区域导航地标然后标题为该区域提供唯一名称。
在极少数情况下如果没有与元素关联的标题您还可以使用该属性来实现相同的最终结果。让我们更新前面的代码来做到这一点
section aria-labelledbyour-pizzas-headingh2 idour-pizzas-headingOur pizzas/h2pAll our pizzas come with the best pizza topping in the world. Pineapple!/pulliMargherita with pineapple/liliVeggie with pineapple/liliMeaty with pineapple/li/ul
/section现在检查元素时它将被正确标识为区域地标并显示从标题元素继承的名称 在这个阶段重申使用地标的原因很重要。地标旨在标识用户最有可能感兴趣并希望导航到的页面的关键区域。因此在决定页面的哪些区域应突出显示为地标时请注意。
complementary地标
地标旨在识别与主要内容相辅相成的内容同时在与主要内容分离时仍然有意义。这可能包括相关文章、演出时间或天气信息等内容。对于我们的页面我们将链接到一些很棒的披萨食谱。
这一次我们确实有一个原生的 HTML 元素我们可以将其用作我们的补充地标
aside aria-labelledbypizza-recipe-headingh3 idpizza-recipe-headingMake your own pie!/h3pBelow is a list of our favorite pizza recipes./pullia href/mushroom-pizzaThe shroom/a/lilia href/smokey-joeSmokey Joe/a/lilia href/fromageFromage/a/li/ul
/asideaside元素具有互补的隐含作用因此是满足我们需求的完美选择。由于一个页面上可以有多个互补区域因此我们必须以唯一和描述性的方式命名每个区域。我们可以通过将标题元素与属性相关联或在元素上使用来实现这一点。
在开发人员工具中检查该元素将显示它被标识为互补的导航地标角色并从关联的标题元素继承其名称。
form地标
乍一看这似乎是显而易见的如果不是因为与该元素所讨论的内容类似的重要细微差别那将是如此。让我们在我们的页面上添加一个时事通讯订阅表格。
div classnewsletterh3Subscribe to Mr. Pineapples newsletter/h3pIn our newsletter, you can expect even more wonderful pizza recipes, allfeaturing the versatile pineapple./pform namenewsletter action/subscribe typepostlabel foremailPlease provide your email address/labelinput typeemail idemail nameemail /button typesubmitPineapple Me /button/form
/div如果检查 form 元素您可能会失望地发现它没有被标识为窗体地标而是一个通用部分 什么给了与前面的元素一样您需要将标题元素与表单关联或使用属性。我们已经有一个描述性标题所以我们需要做的就是将标题与表单相关联。
div classnewsletterh3 idnewsletter-subscribe-form-headingSubscribe to Mr. Pineapples newsletter/h3pIn our newsletter, you can expect even more wonderful pizza recipes, allfeaturing the versatile pineapple./pformaria-labelledbynewsletter-subscribe-form-headingnamenewsletteraction/subscribetypepostlabel foremailPlease provide your email address/labelinput typeemail idemail nameemail /button typesubmitPineapple Me /button/form
/div完成这些更改后检查表单元素将产生预期结果
contentinfo 地标
地标用于标识有关网页的信息例如版权信息或隐私声明的链接。最常见的用例是页面的页脚。在这里我们有一个原生的 HTML 元素来救援。
footerpCopyright copy; Mr. Pineapples Pizzeria - 2023/p
/footer与元素一样重要的是footer元素不要位于元素或其他剖面元素内。如果是这样它将不具有 的隐式作用。看到我们的元素是元素的直接后代在开发人员工具中检查它将产生预期的结果。
新的搜索 HTML 元素
我们现在已经涵盖了所有具有里程碑意义的角色对于每个里程碑我们都有一个可以使用的原生 HTML 元素。当然我们必须为 和 地标做一些额外的工作但我们从来不需要显式使用该属性。
但是等等地标呢我们必须在表单上使用该属性。的你抓住了我但我确实提到过我会在帖子后面给你一个惊喜。随着新的 search 元素的引入必须将角色显式分配给表单的日子即将结束。那么我们该如何使用它呢让我们更新前面的搜索地标以使用新元素
searchform namesite-search action/search methodget rolesearchlabel forqueryFind your perfect pizza/labelinput typesearch idquery namequery //form
/search不过这是处于最前沿的生活所以如果你今天2023 年初检查该元素你会发现它在可访问性树中显示为被忽略。 这就是我将该属性保留在嵌套元素上的原因。一旦浏览器和屏幕阅读器开始实现该元素表单上将不再需要该属性。曾经有一段时间该元素也存在同样的问题主要是由于 Internet Explorer 中缺乏支持因此需要显式添加到该元素中。
现在我们可以退后一步看看我们共同构建的光荣的可访问性树 这是一件美丽的事情不是吗
在 Chrome 浏览器中启用完整的辅助功能树
请注意在 Chromium 浏览器中显示此树是一项试验性功能。在开发工具中选择辅助功能选项卡后你会看到 启用全页面辅助功能树 条目左侧有一个未选中的复选框。 选中该复选框时将显示一条通知要求你重新加载 DevTools。单击该按钮并重新加载 DevTools 后你将在“元素”面板的右上角看到一个新图标。单击此图标将显示完整的辅助功能树。
总结
HTML 地标是使屏幕阅读器用户更易于访问网页的重要工具。通过在网页上定义地标您可以帮助用户更轻松地导航并快速找到他们需要的信息。请记住尽可能使用适当的 HTML 元素并清楚地标记您的地标以便用户知道它们的用途。
