Rumah >hujung hadapan web >html tutorial >Memahami Kebolehcapaian: Bahagian 5
Memahami Kebolehcapaian: Bahagian 5
- PHPzasal
- 2023-08-31 20:33:02861semak imbas
Ini adalah prinsip terakhir yang ingin kita bincangkan. Secara umum, ia menyatakan bahawa kandungan dan navigasi laman web mestilah mudah difahami. Walaupun tanggungjawab untuk melaksanakan banyak pengesyoran ini terletak pada "pengguna akhir" pemalam atau tema (atau sesiapa sahaja yang menerbitkan kandungan), terdapat beberapa pengesyoran yang boleh dilaksanakan oleh pembangun pemalam dan tema ini.
Boleh dibaca (3.1)
Garis panduan pertama menyatakan bahawa kandungan harus "boleh dibaca dan mudah difahami." Kebanyakan cadangan berkaitan dengan tahap bacaan kandungan dan penggunaan perkataan, singkatan dan akronim yang tidak biasa, yang tidak berkaitan dengan pembangun.
Satu cadangan yang boleh kami laksanakan ialah bahasa manusia halaman web harus boleh dikenal pasti secara pengaturcaraan. Untuk melakukan ini, bahasa hendaklah dinyatakan pada elemen melalui atribut lang. Selain itu, atribut dir harus digunakan untuk menunjukkan sama ada kandungan adalah kanan ke kiri. lang 属性在 元素上指定语言。此外，应使用 dir 属性来指示内容是否从右到左。
WordPress 通过提供 language_attributes() 来简化此操作，它会打印所需的属性。在主题的 header.php 中：
<html <?php language_attributes(); ?>>
language_attributes() 函数设置网站的语言，并在必要时设置方向，并过滤输出，允许插件（例如多语言插件）根据需要更改属性。
可预测 (3.2)
第二条准则指出，网站应该以可预测的方式呈现和运行。通过确保主题的 HTML 标记结构良好且符合逻辑，可以实现许多建议。除此之外，还有大量的“不要做”的建议——建议不要进行破坏网页自然和逻辑行为的更改。
焦点行为
我们在本系列的第四篇文章（“可操作”）中提到不使用 tabindex。此建议在此基础上声明，当某个项目获得焦点时，不应将其视为触发页面状态的某些更改。
例如，接收焦点的表单按钮不应导致该表单提交，接收焦点的链接不应导致该链接被激活。这并不是说当相应的项目获得焦点时，工具提示或导航菜单的子菜单不应出现。这些例子并不构成状态的改变。粗略地说，您可以将获得焦点的项目与悬停在其上的项目等同起来。
不要妨碍焦点
您应该避免从接收焦点的元素上移除焦点。例如，您绝对不应该执行以下操作：
$('a').on('focus',function(){ $(this).blur(); });
在需要用户输入时帮助用户 (3.3)
确保识别错误
默认情况下，与主题开发人员相关的唯一表单是登录/注册、搜索和评论表单。其中，主题开发人员通常只关注后两者。由于搜索表单永远不会导致“错误”，因此我们本节重点关注评论表单。
WordPress 在通知用户错误以及确切地告知他们错误是什么方面做得非常好。然而，它是通过允许用户离开原始页面并向他们呈现“死胡同”错误页面来实现这一点的。
如果用户返回到原始页面，表单将失去焦点，他们将不得不再次找到它。更好的解决方案是阻止用户在正确填写表单之前提交表单。但是，在执行此操作时，必须向用户传达输入的值无效的信息，否则您实际上已经将他们困住了。
有大量可用的客户端验证脚本，并且构建您自己的简单验证脚本也非常容易。重要的是：
- 用户离开具有无效值的字段（或尝试提交表单）后出现的错误消息应传达存在错误以及错误所在的位置（即标识字段）。
- 应使用 ARIA 属性将错误消息识别为警报：
role="alert"。 - 在适当的情况下，错误消息应尽可能明确地告知用户输入的值未被接受的原因。
这是一个简单的示例，基于 WebAIM 自己的可访问表单验证示例（我鼓励您阅读），如果名称字段为空，它会添加一条错误消息。
jQuery(document).ready(function($) {
$('#author').on( 'blur', function( e ){
var value = $(this).val();
if( !value ){
if( $('#author-error').length > 0 ){
$('#author-error').remove();
}
$( '<p id="author-error" class="alert alert-error" role="alert"></p>' )
.insertAfter( $('#author') )
.text( 'Name field error: Please provide a name' );
}else if( $('#author-error').length > 0 ){
$('#author-error').remove();
}
});
});
WebAIM 示例还可以防止用户使字段无效，并将他们返回到字段以更正错误。如果您这样做，我建议您在值为空时不要将用户返回到该字段，否则您会让那些意外给予字段焦点但无意的用户感到沮丧提交表格。
正如本系列前面所述，您不应仅依靠颜色或位置来传达含义。在这种情况下，错误消息应该从文本中明显看出，它们相关的字段也应该如此。
提供标签
主题只能使用 comment_form()
language_attributes() yang mencetak atribut yang diperlukan. Dalam header.php tema anda:
<form>
<label for="fname">First name</label>
<input name="" type="text" id="fname" aria-describedby="fname-description">
<p id="fname-description">A bit of instructions for this field linked with aria-describedby. </p>
</form>
Fungsi
language_attributes() menetapkan bahasa dan, jika perlu, orientasi tapak web dan menapis output, membenarkan pemalam (seperti pemalam berbilang bahasa) menukar atribut mengikut keperluan. Boleh diramal (3.2)🎜 🎜Garis panduan kedua menyatakan bahawa tapak web harus kelihatan dan berkelakuan dengan cara yang boleh diramal. Banyak pengesyoran boleh dilaksanakan dengan memastikan penanda HTML tema anda tersusun dengan baik dan logik. Selain itu, terdapat banyak nasihat "jangan"—pengesyoran terhadap membuat perubahan yang melanggar tingkah laku semula jadi dan logik halaman web. 🎜
Tingkah laku fokus
🎜Kami menyebut tidak menggunakantabindex dalam artikel keempat dalam siri ini ("Boleh Ditindaklanjuti"). Pengesyoran ini dibina berdasarkan perkara ini dengan menyatakan bahawa apabila item mendapat tumpuan, ia tidak boleh dianggap mencetuskan beberapa perubahan dalam keadaan halaman. 🎜
🎜Sebagai contoh, butang borang yang menerima fokus tidak seharusnya menyebabkan borang diserahkan, dan pautan yang menerima fokus tidak seharusnya menyebabkan pautan diaktifkan. Ini bukan bermaksud bahawa petua alat atau submenu menu navigasi tidak sepatutnya muncul apabila item yang sepadan menerima fokus. Contoh-contoh ini tidak membentuk perubahan status. Secara kasarnya, anda boleh menyamakan item yang mempunyai fokus dengan item yang dilegarkan. 🎜
Jangan sekat fokus
🎜Anda harus mengelak mengalih keluar fokus daripada elemen yang menerima fokus. Sebagai contoh, anda tidak boleh melakukan perkara berikut: 🎜 rrreee 🎜Bantu pengguna apabila input pengguna diperlukan (3.3)🎜Pastikan ralat dikenali
🎜Secara lalai, satu-satunya borang yang berkaitan dengan pembangun tema ialah borang log masuk/pendaftaran, carian dan ulasan. Daripada jumlah ini, pembangun tema biasanya hanya menumpukan pada dua yang terakhir. Memandangkan carian untuk borang tidak pernah menghasilkan "ralat", kami memfokuskan bahagian ini pada borang ulasan. 🎜 🎜WordPress melakukan tugas yang baik untuk memberitahu pengguna tentang ralat dan memberitahu mereka dengan tepat apakah ralat itu. Walau bagaimanapun, ia melakukan ini dengan membenarkan pengguna menavigasi keluar dari halaman asal dan membentangkan mereka dengan halaman ralat "jalan buntu". 🎜 🎜🎜🎜Jika pengguna kembali kepada asal Halaman, borang akan hilang fokus dan mereka perlu mencarinya semula. Penyelesaian yang lebih baik ialah menghalang pengguna daripada menghantar borang sebelum mengisinya dengan betul. Walau bagaimanapun, apabila melakukan ini, anda mesti memberitahu pengguna bahawa nilai yang dimasukkan adalah tidak sah, jika tidak, anda telah memerangkap mereka dengan berkesan. 🎜
🎜Terdapat banyak skrip pengesahan pihak pelanggan yang tersedia, dan sangat mudah untuk membina skrip pengesahan ringkas anda sendiri. Yang penting: 🎜
- Mesej ralat yang muncul selepas pengguna meninggalkan medan dengan nilai tidak sah (atau cuba menyerahkan borang) harus memberitahu bahawa ralat wujud dan di mana ia berada (iaitu, medan pengenalan).
- Mesej ralat harus dikenal pasti sebagai makluman menggunakan atribut ARIA:
role="alert". - Jika sesuai, mesej ralat harus memberitahu pengguna sejelas mungkin mengapa nilai yang dimasukkan tidak diterima.
Sediakan tag
🎜Tema hanya boleh menggunakancomment_form() untuk memaparkan borang ulasan dan ini mengendalikan teg dengan cara yang boleh diakses. Begitu juga, borang carian lalai tidak memerlukan kerja lanjut. Walau bagaimanapun, apabila menyesuaikan atau mereka bentuk borang ini, anda hendaklah: 🎜
🎜Pastikan label sentiasa kelihatan🎜
🎜Label mesti kelihatan pada setiap masa. Secara khusus, ini bermakna bahawa ruang letak tidak membentuk teg dan tidak boleh digunakan sebagai carian. Terdapat beberapa sebab untuk ini: 🎜
- 对屏幕阅读器的支持不一致。
- 占位符通常采用柔和的颜色，可能难以阅读。
- 由于当字段获得焦点时占位符会消失，因此可能会给有认知障碍的人带来可用性问题。
在适当的情况下提供进一步说明
如果表单字段需要进一步的说明，可以在字段之后提供这些说明，但仍然使用 aria-scribedby 属性显式链接到该字段。该属性引用的元素的内容在field的标签后面读出。
以 W3C 网站为例：
<form>
<label for="fname">First name</label>
<input name="" type="text" id="fname" aria-describedby="fname-description">
<p id="fname-description">A bit of instructions for this field linked with aria-describedby. </p>
</form>
但是，您应该注意，屏幕阅读器对此的支持并不一致。
确定必填字段
必填字段应使用 aria-required="true" 属性进行标记。由 comment_form() 生成的默认 WordPress 评论表单已处理此问题，因此您需要在此处执行任何操作。但是，如果您选择自定义评论表单，则应该注意这一点。
结论
本文总结了我们关于 W3C 可访问性原则的粗略主题开发人员指南以及如何实施这些原则。在本系列的最后一篇文章中，我们将研究一些简单的方法，以进一步推动并积极鼓励和帮助我们的主题（或插件）的最终用户生成可访问的内容。
Atas ialah kandungan terperinci Memahami Kebolehcapaian: Bahagian 5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!