Kebolehkendalian: Kebolehcapaian, Bahagian 4

Secara umum, ini adalah prinsip bahawa tapak web anda mesti selamat untuk semua pengguna menavigasi. Ini termasuk garis panduan untuk mengakses keseluruhan tapak web menggunakan papan kekunci anda sahaja. Selain itu, cara tapak web anda bertindak balas terhadap input pengguna (melalui papan kekunci atau cara lain) hendaklah boleh diramal, jelas dan selamat.

Perkara terakhir ini terutamanya merujuk kepada memastikan bahawa sebarang ciri pada tapak web yang boleh menyebabkan rampasan dilumpuhkan secara lalai dan pengguna diberi amaran sebelum mendayakannya. Prinsip ini juga menyediakan garis panduan untuk menyediakan pengguna "masa yang mencukupi" untuk menyelesaikan tugasan, tetapi kami tidak akan membincangkannya di sini.

Kebolehcapaian Papan Kekunci (2.1)

Mampu menavigasi dan menggunakan tapak web anda hanya menggunakan papan kekunci anda ialah salah satu aspek kebolehaksesan yang paling penting. Pengguna buta bergantung hampir sepenuhnya pada papan kekunci, manakala mereka yang mengalami kecacatan motor mungkin mengalami kesukaran mengawal tetikus dan oleh itu juga bergantung pada akses papan kekunci. Sesetengah orang mungkin menggunakan tangan mereka kurang atau tidak sama sekali, sebaliknya bergantung pada papan kekunci yang lebih besar, batang mulut, batang kepala, suis tunggal atau sedutan 'n'.

Anda boleh mendapatkan arahan untuk peranti ini di tapak web WebAIM, tetapi ia pada asasnya menukar input pengguna kepada pukulan papan kekunci. Jika tapak web anda tidak boleh diakses daripada papan kekunci, tapak web anda tidak akan tersedia kepada semua pengguna yang bergantung pada peranti ini.

Nasib baik, menjadikan tema atau papan kekunci pemalam anda boleh diakses adalah agak mudah. Berikut adalah beberapa perkara penting:

Pastikan keseluruhan menu boleh diakses melalui papan kekunci

Banyak tema bergantung pada menuding tetikus pada item menu untuk memaparkan sebarang submenu. Ini tidak mengapa, tetapi biasanya jika item menu induk mendapat fokus (berbanding dengan melayang), submenu akan tidak muncul. Jika anda menyalin sebarang peraturan yang berkaitan untuk :hover dan menerapkannya pada :focus, ini akan membawa anda separuh daripada pertempuran: item submenu akan muncul sebagai pilihan pengguna dalam keseluruhan menu Kad. Walau bagaimanapun, sebaik sahaja pengguna beralih ke submenu, menu induk hilang fokus dan submenu hilang. Ini boleh diperbetulkan menggunakan JavaScript. Artikel seterusnya dalam siri ini akan memperincikan perkara ini dan cara menyediakan sandaran bukan JavaScript. :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

Jangan "perangkap" pengguna

Anda tidak perlu melakukan apa-apa untuk menjadikan input borang "asli" (pilih, masukkan, radio, dll.) boleh diakses. Walau bagaimanapun, jika mana-mana aspek halaman (termasuk medan borang) mendapat tumpuan, ia 🎜mesti🎜 dialihkan menggunakan hanya papan kekunci, jika tidak, pengguna akan tersekat dengan berkesan. Ini biasanya tingkah laku lalai, jadi anda harus mengelak daripada mengatasinya. 🎜 🎜Jadikan navigasi mudah dan jelas (2.4)🎜 🎜Panduan ini mempunyai dua jenis cadangan: menjelaskan di mana pengguna berada pada masa ini dan menjadikannya lebih mudah untuk sampai ke tempat yang mereka mahu pergi. 🎜 🎜Sebahagian daripada mengikuti nasihat semasa melakukan perkara ini melibatkan melakukan perkara yang telah dilakukan oleh banyak tema: mempunyai menu navigasi yang konsisten merentas halaman, menyerlahkan halaman semasa dan membenarkan pengguna menentukan dengan cepat di mana mereka berada di tapak (mis. menggunakan serbuk roti 🎜 🎜). 🎜 🎜Gaya: Fokus yang betul🎜 🎜Satu bahagian penting untuk melayari web menggunakan papan kekunci anda ialah dapat melihat dengan tepat perkara yang sedang difokuskan. Elemen yang menerima fokus pada masa ini harus jelas berbeza dan boleh dibezakan daripada halaman lain. Oleh itu, anda harus mengelakkan outline:none; melainkan anda menyediakan penggayaan alternatif: 🎜

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

🎜Fokus pesanan dan Tabindex🎜 🎜Satu lagi bahagian penting kebolehcapaian papan kekunci ialah kekunci Tab berkelakuan secara boleh diramal dan secara semula jadi. Sebagai contoh, jika tumpuan adalah pada medan borang, saya mahu tab seterusnya membawa saya ke medan seterusnya dalam borang itu. Ini boleh mengecewakan dan mengelirukan pengguna jika menekan kekunci Tab menyebabkan tumpuan melonjak naik dan turun secara tidak menentu pada halaman. 🎜 🎜Elakkan menggunakan tabindex: Atribut tabindex membolehkan anda menukar susunan elemen diakses melalui kekunci tab. Walau bagaimanapun, jika anda mengikuti nasihat tentang struktur DOM dalam artikel 2 siri ini, susunan tab harus mencerminkan susunan "semula jadi" halaman. Walaupun tabindex mempunyai kegunaannya, mereka adalah sedikit dan jauh di antaranya, dan penggunaannya untuk "memperbaiki" struktur tapak yang lemah boleh menimbulkan lebih banyak masalah. Pendekatan terbaik adalah untuk mengelakkan penggunaan tabindex dan sebaliknya biarkan tema anda menjana struktur DOM logik dan menggunakan CSS untuk menukar persembahan visual. 🎜 🎜Elakkan "baca lagi" atau "teruskan membaca" 🎜 🎜Pengguna pembaca skrin selalunya akan melompat antara pautan, melangkau teks di antaranya dan pada setiap pautan pembaca skrin akan membaca "pautan [teks pautan]". Oleh itu, adalah sangat tidak membantu bagi pengguna ini jika mereka mendengar berulang kali "pautan untuk membaca lebih lanjut," "pautan untuk klik di sini" atau "pautan untuk meneruskan membaca." Dalam kes ini, menambah konteks pada pautan hanya menyediakan tajuk siaran. Jadi daripada "teruskan membaca," kami mempunyai "teruskan membaca [tajuk siaran]." 🎜 🎜Untuk melakukan ini dalam tema WordPress, kami hanya menyambungkan penapis excerpt_more dan menambah pautan "teruskan membaca" kami: 🎜

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

🎜Ini menyediakan konteks yang betul untuk pautan "Baca Lagi". Walau bagaimanapun, beberapa penambahbaikan boleh dilakukan. 🎜

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

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

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

Walaupun ini kebanyakannya keputusan editorial, dan sebagai pembangun bukan tugas kami untuk menyekat automain, kami sekurang-kurangnya boleh menghalangnya dengan melumpuhkannya secara lalai. Jeff menyebut dalam artikelnya bahawa dia tidak dapat mencari pemalam yang memberikan kesan "salji" yang boleh dimainkan oleh pelawat sendiri.

Atas ialah kandungan terperinci Kebolehkendalian: Kebolehcapaian, Bahagian 4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!