從廣義上講，這是您的網站必須能夠安全供所有用戶導航的原則。這包括僅使用鍵盤即可訪問整個網站的準則。此外，您的網站響應用戶輸入（通過鍵盤或其他方式）的方式應該是可預測的、清晰的和安全的。
最后一點主要是指確保默認情況下禁用網站上任何可能引起癲癇發作的功能，并在啟用之前向用戶發出警告。該原則還提供了為用戶提供“足夠的時間”來完成任務的指導原則，但我們在此不做介紹。
鍵盤輔助功能 (2.1)
僅使用鍵盤即可導航和使用您的網站是可訪問性最重要的方面之一。盲人用戶幾乎完全依賴鍵盤，而那些有運動障礙的用戶可能難以控制鼠標，因此也依賴鍵盤訪問。有些人可能很少或根本不使用雙手，而是依賴較大的鍵盤、口棒、頭棒、單開關或 Sip ‘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 ' …' . 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><?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 */
}
登錄后復制
確保網站導航安全 (2.3)
最后，請注意，有些人容易患光敏性癲癇發作。這可能是由閃爍或閃光效果引起的。去年 12 月，杰夫·錢德勒 (Jeff Chandler) 在一名訪客警告杰夫·錢德勒 (Jeff Chandler) 取消了 WP Tavern 的“雪”效果可能引發癲癇發作后。
這不僅限于癲癇發作，它還可能引發某些人的偏頭痛或驚恐發作。它也不限于雪花效果 – 視頻、輪播或音頻文件自動播放也可以觸發這些效果。
雖然這主要是編輯的決定，并且作為開發者，阻止自動播放不是我們的工作，但我們至少可以通過默認禁用它來阻止它。 Jeff 在他的文章中提到，他找不到提供訪問者自己可以玩的“雪”效果的插件。
以上就是可操作性：無障礙性，第四部分的詳細內容，更多請關注www.92cms.cn其它相關文章！
