辅助功能，第3部分：ARIA

最新推荐文章于 2024-07-27 17:39:19 发布

daique1908

最新推荐文章于 2024-07-27 17:39:19 发布

阅读量151

点赞数

文章标签： python java html web javascript ViewUI

在本系列的上一篇文章中，我们研究了可访问性的第一个原则：确保内容必须以用户易于理解的格式提供。如果用户使用辅助技术，则使之成为可能的一种方法是使这些技术更易于解析和理解您的网站及其内容。在本文中，我们将重点介绍一种特定的执行方式：ARIA。

WAI-ARIA（Web可访问性计划—可访问的富Internet应用程序）或ARIA是一种W3C协议，可改善您的网站与辅助技术的交互。它以多种方式执行此操作：

提供一种声明页面结构的方法（例如，标记页面部分的目的或角色，例如导航，搜索，主要内容等）。
通过声明交互式控件（例如，启用/禁用，隐藏，必填字段）的“状态”，提高交互式控件（如树形菜单，拖放，滑块，排序控件等）的可访问性。
提供一种声明内容可以动态更新的区域的方式（称为实时区域 ），以便可以引起用户的注意。

旧版浏览器在这里不会出现问题：大多数现代浏览器和屏幕阅读器都支持ARIA，而其余的则不存在兼容性问题。

在本系列文章中，我们将重点介绍上述要点中的第一个，将元素的角色声明为页面结构的一部分。

的角色

如果可以通过编程确定页面的结构，并且可以识别网页的每个“区域”（例如站点的导航，主要内容，侧边栏等），那么辅助技术可以更好地将结构呈现给用户。例如，如果屏幕阅读器知道主要内容在哪里，“跳至内容”链接（我们将在下一篇文章中介绍）可能会过时。但是，HTML无法提供识别页面上区域目的的方法。这是ARIA角色介入的地方。

第二十十三个主题的屏幕快照，其中突出显示了ARIA地标Banner Navigation Main Complementary和Contentinfo

ARIA角色只是一个标识元素用途的属性值。最直接的示例是搜索表单：

<form role="search"> 
    ... 
</form>

角色“搜索”将此<form>标识为用于搜索站点内容的表单，并且该屏幕阅读器能够识别出知道用户要搜索内容的位置的屏幕阅读器。例如，某些屏幕阅读器会提供快捷键，以跳至搜索表单。同样，对页面结构的了解使辅助技术可以生成有意义的页面“树”。例如，JAWS屏幕阅读器使用分号键在这些角色之间跳转，从而使用户可以在站点的区域（标题，导航，主要内容等）之间快速跳转。

这种类型的属性称为“ 文档地标角色” ，可用值包括：

旗帜

与网站有关的内容，例如网站名称和/或公司徽标。在大多数主题中，此信息位于header.php ，并使用以下角色标记用于包装网站标题，说明和徽标的元素：

<div id="branding" role="banner"> 

    <p class="site-title">
        <a href="<?php echo esc_url( home_url( '/' ) );?>">
            <?php echo get_bloginfo('name'); ?> 
        </a>
    </p> 
    
    <p class="site-description">
        <?php echo get_bloginfo( 'description' );?>
    </p> 
    
</div>

主要

页面的主要内容。这只能在网页上出现一次。每个主题都会有所不同，但是相关的模板文件通常包括：

index.php
single.php
page.php

例如，您的“主循环”可能看起来像：

<div id="main" class="hfeed" role="main"> 

    <?php if ( have_posts() ) : ?> 
    
        <?php while ( have_posts() ) : the_post(); ?> 
        
            //The loop content 
            
        <?php endwhile; ?> 
            
    <?php endif; ?> 
    
</div>

您的页面模板可能类似于：

<div id="main" role="main"> 

    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 
    
        <h1 class="entry-title"> <?php the_title(); ?> </h1> 
        
        <div class="entry-content"> 
            
            <?php the_content(); ?> 
        </div> 
    
    </div> 
    
</div>

搜索

这可以识别您网站上的搜索表单，并且可以多次使用。大多数主题不会将搜索表单“硬编码”到其主题中，而是依赖于窗口小部件化的区域，用户可以在其中添加搜索窗口小部件。在这种情况下（并假设您正在运行WP 3.6或更高版本），您无需执行任何操作：WordPress的默认搜索表单已经适当地添加了搜索角色。此外，它也以可访问的方式处理表单标签和提交按钮。

如果您在主题中对搜索表单进行了硬编码，请确保使用get_search_form() （请参见codex ）。最后，如果您要求主题更改默认的搜索表单，则可以创建一个名为searchform.php的模板文件，但请确保添加搜索角色。默认的搜索表单模板是：

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>"> 

    <label> 
        <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ); ?></span> 
        <input type="search" class="search-field" placeholder="Search &hellip;" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ); ?>" /> 
    </label> 

    <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" /> 

</form>

文章

这标识了一条孤立的有意义的独立内容。一个很好的例子是出现在“帖子”页面上的博客帖子。同样，每个评论都可以视为“文章”。它也可以嵌套：例如，评论（文章）可以放在博客文章（文章）中。

<?php while ( have_posts() ) : the_post(); ?> 

    <article id="post-<?php the_ID(); ?>" <?php post_class();?> role="article"> 
    
        //Post title / excerpt... 
        
    </article> 
    
<?php endwhile; ?>

补充

这标识了被描述为“主要内容的支持内容”的区域。在WordPress上下文中，这可以理解为任何侧边栏。因此，您的sidebar.php模板可能类似于：

<div class="sidebar" role="complementary"> 
    
    <?php if ( is_active_sidebar( 'right-sidebar' ) ){ 
    
        dynamic_sidebar( 'right-sidebar' ); 
        
    } ?> 
    
</div>

内容信息

通常用于标识页脚。正式描述为：

较大的可感知区域，其中包含有关父文档的信息。

例如，它可以包括脚注，版权，指向隐私声明的链接等。但是，它通常用于标记页面的页脚，而不管其内容如何。 Firefox，Safari和Chrome自动将contentinfo角色分配给<footer>标签：

<body> 
    ... 
    <footer role="contentinfo"> 
        //Footer 
    </footer> 
    
    <?php wp_footer(); ?> 
    
</body>

ARIA和HTML5

尽管它不断增加，但屏幕阅读器对HTML5的支持却有所不同。另一方面，对ARIA地标的支持通常要好得多。因此，尽管越来越多的浏览器将语义HTML5标签自动映射到其适当的角色，但是明确声明该角色仍然是一个好主意。但是，应注意不要更改语义元素的本机“角色”。例如，您应该避免做类似的事情：

<h1 role="button">Click Me!</h1>

以下是一些HTML5元素及其隐式ARIA角色的列表。

HTML5元素	隐含的ARIA标志性作用	其他注意事项
`<header>`	`role="banner"`	横幅只能有一个实例
`<nav>`	`role="navigation"`
`<main>`	`role="main"`	应该只有一个main实例
`<article>`	`role="article"`
`<aside>`	`role="complementary"`
`<footer>`	`role="contentinfo"`	应该只有一个contentinfo实例
`<button>`	`role="button"`

使用HTML5时，应该使用二十个主题中使用的HTML5 Shiv v3.6之类的脚本来为旧版浏览器提供支持。

结论

声明ARIA角色是一种非常简单的方法，可以帮助辅助技术的用户解释您网站的布局并找到他们想要的内容。在本系列的下一部分中，我们将研究确保主题可操作的原则。粗略地说，这表明用户应该能够轻松，安全地浏览您的网站。

翻译自: https://code.tutsplus.com/tutorials/accessibility-part-3-aria--cms-21793

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
辅助功能，第3部分：ARIA

在本系列的上一篇文章中，我们研究了可访问性的第一个原则：确保内容必须以用户易于理解的格式提供。如果用户使用辅助技术，则使之成为可能的一种方法是使这些技术更易于解析和理解您的网站及其内容。在本文中，我们将重点介绍一种特定的执行方式：ARIA。 WAI-ARIA（Web可访问性计划—可访问的富Internet应用程序）或ARIA是一种W3C协议，可改善您的网站与辅助技术的交互。它以多种方...
复制链接

扫一扫