Bedienbarkeit: Barrierefreiheit, Teil 4

Im Großen und Ganzen ist dies der Grundsatz, dass Ihre Website sicher sein muss, damit alle Benutzer navigieren können. Dazu gehören Richtlinien für den Zugriff auf die gesamte Website nur über die Tastatur. Darüber hinaus sollte die Art und Weise, wie Ihre Website auf Benutzereingaben (über die Tastatur oder auf andere Weise) reagiert, vorhersehbar, klar und sicher sein.

Dieser letzte Punkt bezieht sich hauptsächlich darauf, sicherzustellen, dass alle Funktionen auf der Website, die Anfälle verursachen können, standardmäßig deaktiviert sind und Benutzer gewarnt werden, bevor sie sie aktivieren. Das Prinzip bietet auch Richtlinien, um Benutzern „genügend Zeit“ für die Erledigung von Aufgaben zu geben, aber darauf gehen wir hier nicht ein.

Tastatur-Barrierefreiheit (2.1)

Die Möglichkeit, auf Ihrer Website nur mit der Tastatur zu navigieren und sie zu nutzen, ist einer der wichtigsten Aspekte der Barrierefreiheit. Blinde Benutzer verlassen sich fast ausschließlich auf die Tastatur, während motorisch eingeschränkte Benutzer möglicherweise Schwierigkeiten bei der Steuerung der Maus haben und daher auch auf den Zugriff über die Tastatur angewiesen sind. Manche Menschen benutzen ihre Hände möglicherweise weniger oder gar nicht und verlassen sich stattdessen auf eine größere Tastatur, einen Mundstift, einen Kopfstift, einen einzelnen Schalter oder einen Sip 'n' Puff.

Anweisungen für diese Geräte finden Sie auf der WebAIM-Website, sie wandeln jedoch Benutzereingaben im Wesentlichen in Tastaturanschläge um. Wenn Ihre Website nicht über eine Tastatur zugänglich ist, ist Ihre Website für alle Benutzer, die auf diese Geräte angewiesen sind, nicht verfügbar.

Glücklicherweise ist es relativ einfach, die Tastatur Ihres Themes oder Plugins zugänglich zu machen. Hier sind einige wichtige Punkte:

Stellen Sie sicher, dass das gesamte Menü über die Tastatur zugänglich ist

Bei vielen Themes muss man mit der Maus über einen Menüpunkt fahren, um Untermenüs anzuzeigen. Das ist in Ordnung, aber normalerweise wird das Untermenü nicht angezeigt, wenn das übergeordnete Menüelement den Fokus erhält (im Gegensatz zum Schweben). Wenn Sie :hover 的任何相关规则并将其应用到 :focus kopieren, haben Sie schon die halbe Miete: Die Untermenüpunkte erscheinen als Benutzerregisterkarten im gesamten Menü. Sobald der Benutzer jedoch zum Untermenü wechselt, verliert das übergeordnete Menü den Fokus und das Untermenü verschwindet. Dies kann mit JavaScript korrigiert werden. Im nächsten Artikel dieser Reihe wird dies ausführlich beschrieben und erläutert, wie Nicht-JavaScript-Fallbacks bereitgestellt werden.

Legen Sie Benutzer nicht in eine Falle

Sie müssen nichts tun, um die „native“ Formulareingabe (Auswahl, Eingabe, Radio usw.) über die Tastatur zugänglich zu machen. Wenn jedoch ein Aspekt der Seite (einschließlich eines Formularfelds) den Fokus erhält, muss er nur mit der Tastatur wegbewegt werden, andernfalls bleibt der Benutzer praktisch hängen. Dies ist normalerweise das Standardverhalten, daher sollten Sie es vermeiden, es zu überschreiben.

Machen Sie die Navigation einfach und klar (2.4)

Der Leitfaden enthält zwei Arten von Vorschlägen: Er macht deutlich, wo sich der Benutzer gerade befindet, und erleichtert ihm, dorthin zu gelangen, wo er hin möchte.

Zur Befolgung der Ratschläge gehört dazu, das zu tun, was viele Themes bereits tun: ein einheitliches Navigationsmenü auf allen Seiten zu haben, die aktuelle Seite hervorzuheben und es Benutzern zu ermöglichen, schnell zu erkennen, wo sie sich auf der Website befinden (z. B. mithilfe von Breadcrumbs).

Stil: Richtiger Fokus

Ein wichtiger Aspekt beim Surfen im Internet mit der Tastatur ist die Möglichkeit, genau zu sehen, was gerade fokussiert ist. Das Element, das gerade den Fokus erhält, sollte klar erkennbar und vom Rest der Seite unterscheidbar sein. Daher sollten Sie

vermeiden, es sei denn, Sie bieten einen alternativen Stil an:

a:focus{ 
    outline: none; 
    background: #ee7b00; 
    color: #fff; 
}

outline:none;Fokusreihenfolge und Tabindex

Ein weiterer wichtiger Teil der Tastaturzugänglichkeit ist, dass sich die Tabulatortaste vorhersehbar und natürlich verhält. Wenn der Fokus beispielsweise gerade auf einem Formularfeld liegt, möchte ich, dass die nächste Registerkarte mich zum nächsten Feld in diesem Formular führt. Dies kann für Benutzer frustrierend und verwirrend sein, wenn das Drücken der Tab-Taste dazu führt, dass der Fokus auf der Seite unregelmäßig nach oben und unten springt.

Vermeiden Sie die Verwendung von tabindex

: Mit dem tabindex-Attribut können Sie die Reihenfolge ändern, in der auf Elemente über die Tabulatortaste zugegriffen wird. Wenn Sie jedoch den Ratschlägen zur DOM-Struktur in Artikel 2 dieser Serie folgen, sollte die Tab-Reihenfolge die „natürliche“ Reihenfolge der Seite widerspiegeln. Tabindex hat zwar seine Einsatzmöglichkeiten, diese sind jedoch rar gesät, und seine Verwendung zum „Reparieren“ einer schlechten Site-Struktur kann zu weiteren Problemen führen. Der beste Ansatz besteht darin, die Verwendung von tabindex zu vermeiden und stattdessen Ihr Theme die logische DOM-Struktur generieren zu lassen und CSS zu verwenden, um die visuelle Darstellung zu ändern. Vermeiden Sie „mehr lesen“ oder „weiterlesen“

Screenreader-Benutzer springen häufig zwischen Links und überspringen den Text dazwischen, und bei jedem Link liest der Screenreader „Link [Linktext]“. Daher ist es für diese Benutzer sehr wenig hilfreich, wenn sie wiederholt „Link zum Weiterlesen“, „Link zum Klicken hier“ oder „Link zum Weiterlesen“ hören. In diesem Fall liefert das Hinzufügen von Kontext zum Link lediglich den Titel des Beitrags. Anstelle von „Weiterlesen“ haben wir also „Weiterlesen [Beitragstitel]“.

Um dies in einem WordPress-Theme zu tun, verbinden wir einfach den

-Filter und hängen unseren „Weiterlesen“-Link an:

//Adds "continue reading X" link 
function mytheme_continue_reading_link() { 
    return '<p class="read-more">' 
        . sprintf( 
            __( '<a href="%s">Continue reading %s</a>', 'mytheme' ), 
            esc_url( get_permalink() ), 
            esc_html( get_the_title() ) 
        ) 
        .'</p>'; 
        
} 
        
    
//Replaces "[...]" (appended to automatically generated excerpts) with an ellipsis and mytheme_continue_reading_link(). 
function mytheme_auto_excerpt_more( $more ) { 
    return ' &hellip;' . mytheme_continue_reading_link(); 
} 
add_filter( 'excerpt_more', 'mytheme_auto_excerpt_more' );

excerpt_moreDies liefert den richtigen Kontext für den Link „Weiterlesen“. Es könnten jedoch einige Verbesserungen vorgenommen werden.

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

这意味着我们不能使用 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></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。该链接应位于页面的最顶部，紧邻 标签下方。在大多数主题中，这将是 header.php 文件：

</head> 

<body> 

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

这里唯一需要注意的是：

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

关于 (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 */ 
}

确保网站导航安全 (2.3)

最后，请注意，有些人容易患光敏性癫痫发作。这可能是由闪烁或闪光效果引起的。去年 12 月，杰夫·钱德勒 (Jeff Chandler) 在一名访客警告杰夫·钱德勒 (Jeff Chandler) 取消了 WP Tavern 的“雪”效果可能引发癫痫发作后。

这不仅限于癫痫发作，它还可能引发某些人的偏头痛或惊恐发作。它也不限于雪花效果 - 视频、轮播或音频文件自动播放也可以触发这些效果。

Während dies größtenteils eine redaktionelle Entscheidung ist und es als Entwickler nicht unsere Aufgabe ist, die automatische Wiedergabe zu blockieren, können wir sie zumindest verhindern, indem wir sie standardmäßig deaktivieren. Jeff erwähnte in seinem Artikel, dass er kein Plugin finden konnte, das einen „Schnee“-Effekt bietet, mit dem Besucher selbst spielen können.

Das obige ist der detaillierte Inhalt vonBedienbarkeit: Barrierefreiheit, Teil 4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!