可操作性：無障礙性，第四部分

從廣義上講，這是您的網站必須能夠安全性供所有用戶導航的原則。這包括僅使用鍵盤即可存取整個網站的準則。此外，您的網站響應用戶輸入（透過鍵盤或其他方式）的方式應該是可預測的、清晰的和安全的。

最後一點主要是指確保預設情況下停用網站上任何可能引起癲癇發作的功能，並在啟用之前向使用者發出警告。該原則也提供了為使用者提供「足夠的時間」來完成任務的指導原則，但我們在此不做介紹。

鍵盤輔助功能 (2.1)

僅使用鍵盤即可導航和使用您的網站是可訪問性最重要的方面之一。盲人使用者幾乎完全依賴鍵盤，而那些有運動障礙的使用者可能難以控制滑鼠，因此也依賴鍵盤存取。有些人可能很少或根本不使用雙手，而是依賴較大的鍵盤、口棒、頭棒、單開關或 Si​​p 'n' Puff。

您可以在 WebAIM 網站上找到這些裝置的說明，但它們本質上都是將使用者輸入轉換為鍵盤敲擊。如果您的網站無法透過鍵盤訪問，那麼所有依賴這些裝置的使用者將無法使用您的網站。

幸運的是，讓您的主題或外掛鍵盤可存取相對簡單。以下是一些要點：

確保可以透過鍵盤存取整個選單

許多主題依靠將滑鼠懸停在選單項目上來顯示任何子選單。這很好，但通常如果父選單項目獲得焦點（而不是懸停），則子選單將不會出現。如果您複製 :hover 的任何相關規則並將其套用到 :focus ，這將讓您成功一半：子選單項目將顯示為整個選單中的使用者標籤。但是，一旦使用者向下切換到子選單，父選單就會失去焦點，子選單也會消失。這可以使用 JavaScript 來修正。本系列的下一篇文章將詳細介紹這一點以及如何提供非 JavaScript 後備。

不要「陷阱」使用者

您不需要執行任何操作即可讓「本機」表單輸入（選擇、輸入、單選等）鍵盤可存取。但是，如果頁面的任何方面（包括表單欄位）獲得焦點，必須僅使用鍵盤即可將其移開，否則使用者實際上會陷入困境。這通常是預設行為，因此您應該避免覆寫它。

讓導航變得簡單明了（2.4）

該指南有兩種類型的建議：明確使用者目前所在的位置，以及更輕鬆地到達他們想去的地方。

在執行此操作時遵循建議的一部分涉及許多主題已經做的事情：跨頁面擁有一致的導航選單，突出顯示當前頁面，並允許用戶快速確定他們在網站上的位置（例如使用麵包屑） .

樣式：適當對焦

能夠使用鍵盤瀏覽網頁的關鍵部分是能夠準確地看到目前獲得焦點的內容。目前獲得焦點的元素應該明顯不同，並且可以與頁面的其餘部分區分開來。因此，您應該避免 outline:none; 除非您要提供替代樣式：

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

焦點順序和 Tabindex

鍵盤輔助功能的另一個重要部分是 Tab 鍵的行為可預測且自然。例如，如果焦點目前是表單字段，我希望下一個選項卡應該將我帶到該表單中的下一個字段。如果按 Tab 鍵導致焦點在頁面上不規則地上下跳躍，那麼這會讓使用者感到沮喪和迷失方向。

避免使用 tabindex：tabindex 屬性可讓您變更透過 Tab 鍵存取元素的順序。但是，如果您遵循本系列第 2 篇文章中有關 DOM 結構的建議，則 Tab 鍵順序應反映頁面的「自然」順序。雖然 tabindex 有它的用途，但這些用途很少，而且它用於「修補」不良站點結構可能會產生更多問題。最好的方法是避免使用 tabindex，而是讓您的主題產生邏輯 DOM 結構，並使用 CSS 來改變視覺呈現。

避免「閱讀更多」或「繼續閱讀」

螢幕閱讀器使用者經常會在連結之間跳轉，跳過其間的文本，並且在每個連結處螢幕閱讀器都會讀出「連結 [連結文字]」。因此，如果這些用戶反覆聽到“連結閱讀更多”、“連結點擊此處”或“連結繼續閱讀”，這對他們來說是非常沒有幫助的。在這種情況下，向連結添加上下文只需提供帖子的標題。因此，我們沒有“繼續閱讀”，而是“繼續閱讀[貼文標題]”。

要在 WordPress 主題中執行此操作，我們只需連接 excerpt_more 過濾器並附加我們的「繼續閱讀」連結：

//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' );

這為「閱讀更多」連結提供了正確的上下文。不過，還可以進行一些改進。

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

这意味着我们不能使用 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 的“雪”效果可能引发癫痫发作后。

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

雖然這主要是編輯的決定，並且作為開發者，阻止自動播放不是我們的工作，但我們至少可以透過預設為停用它來阻止它。 Jeff 在他的文章中提到，他找不到提供訪客自己可以玩的「雪」效果的插件。

以上是可操作性：無障礙性，第四部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！