操作性：アクセシビリティその4-htmlチュートリアル-php.cn

操作性：アクセシビリティその4

大まかに言えば、これはあなたのウェブサイトが すべてのユーザーが 安全にナビゲートできる必要があるという原則です。これには、キーボードのみを使用して Web サイト全体にアクセスするためのガイドラインが含まれます。さらに、Web サイトがユーザー入力 (キーボードまたはその他の手段による) に応答する方法は、予測可能で明確かつ安全である必要があります。

この最後の点は主に、Web サイト上の発作を引き起こす可能性のある機能をデフォルトで無効にし、有効にする前にユーザーに警告することを意味します。この原則は、タスクを完了するためにユーザーに「十分な時間」を提供するためのガイドラインも提供しますが、ここではそれについては触れません。

キーボードアクセシビリティ (2.1)

キーボードのみを使用して Web サイトに移動して使用できることは、アクセシビリティの最も重要な側面の 1 つです。視覚障害のあるユーザーはほぼ完全にキーボードに依存していますが、運動障害のあるユーザーはマウスの制御が難しいため、キーボードによるアクセスにも依存している可能性があります。手をあまり使わないか、まったく使わず、代わりに大きなキーボード、マウススティック、ヘッドスティック、単一のスイッチ、または一口吸うことに頼っている人もいます。

これらのデバイスの説明は WebAIM Web サイトで見つけることができますが、基本的にはユーザー入力をキーボードストロークに変換します。キーボードから Web サイトにアクセスできない場合、これらのデバイスを使用するすべてのユーザーは Web サイトを利用できなくなります。

幸いなことに、テーマまたはプラグインのキーボードにアクセスできるようにするのは比較的簡単です。ここではいくつかの重要なポイントを示します:

メニュー全体がキーボードからアクセスできることを確認してください

多くのテーマは、サブメニューを表示するためにメニュー項目の上にマウスを置くことに依存しています。これは問題ありませんが、通常、親メニュー項目が (ホバリングではなく) フォーカスを取得すると、サブメニューが

not 表示されます。 :hover に関連するルールをコピーして :focus に適用すると、戦いは半分になります。サブメニュー項目がメニュー全体のユーザータブとして表示されます。ただし、ユーザーがサブメニューに切り替えると、親メニューはフォーカスを失い、サブメニューは消えます。これは JavaScript を使用して修正できます。このシリーズの次の記事では、これと JavaScript 以外のフォールバックを提供する方法について詳しく説明します。

ユーザーを「罠」にしないでください

「ネイティブ」フォーム入力 (選択、入力、ラジオなど) キーボードにアクセスできるようにするために何もする必要はありません。ただし、ページのいずれかの側面 (フォームフィールドを含む) にフォーカスが当たった場合は、

キーボードだけを使用してその要素を移動する必要があります。そうしないと、ユーザーは実質的にスタックしてしまいます。通常、これはデフォルトの動作であるため、オーバーライドしないようにする必要があります。ナビゲーションをシンプルかつ明確にする (2.4)

ガイドには 2 種類の提案があります。ユーザーが現在どこにいるのかを明確にすることと、ユーザーが行きたい場所に簡単に到達できるようにすることです。

これを行う際のアドバイスに従うことには、多くのテーマが既に行っていること、つまりページ間で一貫したナビゲーションメニューを表示すること、現在のページを強調表示すること、ユーザーがサイト上のどこにいるかをすぐに判断できるようにすること (ブレッドクラムの使用など) を実行することが含まれます。

スタイル: 適切な焦点

キーボードを使用して Web を閲覧できるようにする上で重要なのは、現在どのコンテンツに注目しているかを正確に確認できることです。現在フォーカスを受けている要素は、ページの残りの部分と明確に区別でき、区別できる必要があります。したがって、代替スタイルを提供する場合を除き、

outline:none;

は避けてください: リーリーフォーカス順序とタブインデックス

キーボードアクセシビリティのもう 1 つの重要な部分は、Tab キーが予測どおりに自然に動作することです。たとえば、現在フォーカスがフォームフィールドにある場合、次のタブでそのフォームの次のフィールドに移動したいとします。 Tab キーを押すとページ上でフォーカスが不規則に上下に移動する場合、これはユーザーにとってイライラしたり方向感覚を失ったりする可能性があります。

tabindex の使用を避ける

: tabindex 属性を使用すると、Tab キーを使用して要素にアクセスする順序を変更できます。ただし、このシリーズの記事 2 の DOM 構造に関するアドバイスに従う場合、タブの順序はページの「自然な」順序を反映する必要があります。 tabindex にも用途はありますが、その用途は限られており、不十分なサイト構造を「修正」するために使用すると、さらなる問題が発生する可能性があります。最善のアプローチは、tabindex の使用を避け、代わりにテーマで論理 DOM 構造を生成し、CSS を使用して視覚的なプレゼンテーションを変更することです。「続きを読む」または「続きを読む」は避けてください

スクリーンリーダーのユーザーはリンク間を移動して、その間のテキストをスキップすることが多く、各リンクでスクリーンリーダーは「リンク [リンクテキスト]」と読み上げます。したがって、「続きを読むためのリンク」、「ここをクリックするためのリンク」、または「続きを読むためのリンク」という言葉が繰り返し聞こえるのは、こうしたユーザーにとって非常に役に立ちません。この場合、リンクにコンテキストを追加すると、単に投稿のタイトルが提供されます。したがって、「続きを読む」の代わりに「続きを読む[投稿タイトル]」となります。

これを WordPress テーマで行うには、

excerpt_more

フィルターを接続し、「続きを読む」リンクを追加するだけです: リーリーこれにより、「続きを読む」リンクの正しいコンテキストが提供されます。ただし、いくつかの改善は可能です。

首先，添加文章标题通常会破坏主题的美感，并且对于有视力的用户来说，这是多余的，因为“阅读更多”链接相对于文章标题和摘录的位置将使上下文显而易见。为了解决这些问题，我们可以“隐藏”文章标题，但屏幕阅读器仍然会阅读它们。

这意味着我们不能使用 display:none 或visibility:hidden; 作为屏幕-读者了解这些属性并会忽略内容。相反，我们可以将文本放置在屏幕外或使用 clip 属性：

.screen-reader {
    position: absolute!important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

ログイン後にコピー

“屏幕阅读器类”有很多不同的示例；这个特定的类取自 Bootstrap 3。接下来，将适当的类添加到文章标题中，具体将上面的第 5 行替换为：

__( '<a href="%s">Continue reading <span class="screen-reader">%s</span></a>', 'mytheme' ),

ログイン後にコピー

其次，虽然这将为用户提供链接指向何处的指示，但他们仍然必须在到达帖子标题之前收听“链接继续阅读...”。理想情况下，您应该将冗余信息放在链接文本的末尾，或者从锚标记中完全省略它，以减少识别链接所需的时间。

对于屏幕阅读器用户来说，不在链接文本前面添加冗余信息的另一个好处是屏幕阅读器通常会在页面上生成链接列表。如果您的许多链接都以相同的文本开头，这可能会使找到所需链接变得更加困难，特别是如果您的联系页面的链接位于“H”下方，因为它显示“如何联系我们”。

正确使用 `<title>` 标签

应使用 <title> 标签来识别用户的当前位置。该信息由屏幕阅读器读出，并显示在搜索结果以及屏幕窗口和浏览器选项卡中。为了让用户轻松识别他们所在的位置（或搜索到的内容），此标题标签应包含页面的标题和网站名称。理想情况下，网站名称应该放在最后，这样使用屏幕阅读器的人就不必在每次页面加载时先听您网站的名称，然后才能听到页面标题。

标题标签可以添加到主题中：

<title><?php wp_title(); ?></title>

ログイン後にコピー

要添加网站标题：

/** * Append site title to page title */ 
function mytheme_wp_title( $title, $sep, $seplocation ){ 
    return $title . ' | ' . get_bloginfo('name'); 
} 
add_filter( 'wp_title', 'mytheme_wp_title', 10, 3 );

ログイン後にコピー

跳到内容

通常，网站会有一个通用的标题和导航菜单，除了突出显示用户当前位置之外，它们将保持完全相同。必须通过选项卡浏览所有这些链接，或者在每次页面加载时听屏幕阅读器重复它们，是乏味且令人沮丧的。我们这些拥有良好（足够）视力和运动技能的人可以立即跳转到内容，并且我们可以让那些没有良好视力和运动技能的人也能轻松完成此操作。

如果您在 WordPress 管理员中，并在页面加载后按 Tab，您会注意到顶部会出现一个链接，其中显示跳到主要内容 -left（如果再次按 Tab，将出现跳到工具栏链接）。该链接位于页面的最顶部，因此它是选项卡切换时获得焦点的第一个链接，也是屏幕阅读器读出的网站的第一个链接。通过该链接，用户可以直接跳转到主要内容，跳过中间所有不必要的链接和网站徽标。

创建跳转到内容是让您的网站更易于导航的好方法，而且非常简单，只需要少量 HTML 和一些 CSS。

首先是 HTML。该链接应位于页面的最顶部，紧邻 <body> 标签下方。在大多数主题中，这将是 header.php 文件：

</head> 

<body> 

    <a class="skip-link" href="#main">
        <?php _e( 'Skip to main content', 'mytheme' ); ?>
    </a> 
    
    //Rest of page content

ログイン後にコピー

这里唯一需要注意的是：

href 值，在本例中为“main”。这必须与包含页面内容的元素的 ID 匹配。
链接的类，我们将使用它来设置样式。

关于 (1)，您的循环将类似于：

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

    <?php if ( have_posts() ) : ?> 
    
        //The Loop
    
    <?php else: ?>
        
        //No posts found... display search
      
    <?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>

ログイン後にコピー

现在剩下的就是向链接添加一些样式。

首先，我们希望链接隐藏，但不对屏幕阅读器隐藏，因此我们会将链接放置在屏幕外，而不是使用 display:none（在这种情况下，屏幕阅读器会忽略它）。

其次，当它获得焦点时，我们希望使链接变得明显，因此很明显以前隐藏的链接现在可见并具有焦点。

.skip-link { 
    position: absolute; 
    left:6px; 
    top:-100px; /* position offscreen so it's not visible, but can receive focus*/ 
    z-index: 100000; /* Position above WordPress' toolbar */ 
    font-size: 1em; 
    font-weight: bold; 
    display: block; 
    background: #ee7b00; 
    color: white; /*Style the link so that's clear*/ 
    height: auto; 
    width: auto; 
    line-height: normal; 
    padding: 15px 25px; 
    text-decoration: none;
    -webkit-transition: top 1s ease-out; 
    transition: top 1s ease-out; 
} 

.skip-link:focus { 
    top: 5px; /* Move onto screen */ 
    -webkit-transition: right 0s; 
    transition: right 0s; /*Animate, to make its appearance obvious */ 
}

ログイン後にコピー