Bagaimana untuk menyediakan teks yang boleh diakses dalam HTML untuk pengguna pembaca skrin?

Question

Saya mempunyai tapak web yang mempunyai div berwarna dengan nombor padanya, contohnya blok merah dengan nombor 2 di dalamnya. Warna penting untuk pemahaman. Seorang pengguna buta menghantar e-mel kepada saya dan bertanya sama ada saya boleh meminta pembaca skrin membaca "2 merah".

Saya cuba menambahkannya sebagai alt="2 merah" tetapi dia berkata ia tidak melakukan apa-apa. Dia fikir ini mungkin hanya membaca tag alt imej.

Adakah terdapat cara yang baik untuk melakukan ini, yang berfungsi dengan elemen div?

Answer 1

EDIT 2020: Pada masa ini display:none 或 visibility:hidden nampaknya secara amnya menyebabkan kandungan tidak dapat dilihat secara visual dan dengan pembaca skrin (diuji dengan NVDA dalam Firefox dan Chrome), jadi kenyataan di bawah adalah tidak sah. Pada masa ini, mengalihkan kandungan dari skrin nampaknya satu-satunya cara untuk menyampaikan kandungan kepada pengguna pembaca skrin, lihat juga jadual berikut: http://stevefaulkner.github.io/HTML5accessibility/tests/hidden-2016.html

---

Melainkan dinyatakan sebaliknya dalam jawapan yang diterima, sekurang-kurangnya Chromevox¹ dan NVDA² juga akan membaca elemen dengan atribut display:none 或 visibility:hidden CSS 属性的元素，如果设置了 aria-hidden=false CSS jika aria-hidden=false ditetapkan. Walau bagaimanapun, ini pada masa ini hanya dalam Chrome (65) dan bukan dalam Firefox atau Edge (berdasarkan ujian saya).

Jadi (pada masa ini hanya boleh dilakukan dalam Chrome), anda juga boleh melakukan ini:

<h1 aria-hidden="false" style="display: none;">仅供屏幕阅读器使用的标题</h1>
<h1 aria-hidden="false" style="visibility: hidden;">仅供屏幕阅读器使用的第二个标题</h1>
<h1 aria-hidden="true">仅供屏幕使用的标题</h1>

Tempat Chromevox dan NVDA akan membaca pengepala pertama dan kedua. Lihat juga: https://jsfiddle.net/4y3g6zr8/6/

Jika semua penyemak imbas bersetuju dengan tingkah laku ini, ia akan menjadi penyelesaian yang lebih bersih daripada semua helah CSS yang dicadangkan dalam penyelesaian lain.

^{1_{Chromevox https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn} 2_{NVDA https://www.nvaccess.org/}}

Answer 2

Mengenai teks alt, anda betul, ia hanya berfungsi dengan imej. Tetapi anda boleh menggunakan label aria untuk menggantikan atribut alt unsur bukan imej, seperti ini:

Penyelesaian berkesan

ARIA tag ★ ★ ★ ★ ★ ★

Atribut

aria-label（不要与aria-labelledby混淆，后者从另一个元素的文本中提取可访问名称）用于为元素添加屏幕外描述性内容，类似于alt= menambah kandungan deskriptif luar skrin pada imej dan digunakan apabila imej tidak dapat dipaparkan.

Perbezaan dengan

ialah aria-label boleh digunakan pada elemen bukan imej.

<div aria-label="测试A"><p aria-hidden="true">测试B</p></div>
<!--
     结果（屏幕阅读器）：测试A
     结果（常规）：测试B
-->

Tambah atribut aria-hidden untuk menyembunyikan teks dalam.

Kedudukan + Pangkas + Lipat ★ ★ ★ ★

.screenreader {
    position: absolute !important; /* 脱离文档流 */
    height: 1px; width: 1px; /* 几乎折叠 */
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* 仅IE 7+支持不带逗号的clip */
    clip: rect(1px, 1px, 1px, 1px); /* 其他所有浏览器 */
}

Pangkas digunakan untuk menyembunyikan sepenuhnya elemen 1px x 1px yang masih boleh dilihat pada skrin.

Kedudukan ★ ★ ★

.screenreader {
    position: absolute;
    left:-9999px;
}

<div>星期三<span class="screenreader">，2014年9月24日</span></div>

Inden ★

.screenreader {
    text-indent: -5000px;
}

Nilai lekukan sebenar tidak penting selagi ia melebihi skop susun atur halaman. Contoh mengalihkan kandungan 5,000 piksel ke kiri.

Penyelesaian ini hanya berfungsi untuk blok teks yang lengkap. Ia tidak berfungsi dengan baik dengan sauh, borang, bahasa kanan ke kiri atau teks sebaris tertentu yang dicampur dengan teks lain.

Tidak berfungsi

keterlihatan: tersembunyi; dan/atau paparan:tiada;

Gaya ini akan menyembunyikan teks, menjadikannya tidak kelihatan kepada semua pengguna. Teks dialih keluar daripada aliran visual halaman dan diabaikan oleh pembaca skrin. Jika anda mahu kandungan dibaca oleh pembaca skrin, jangan gunakan CSS ini. Walau bagaimanapun, gunakannya jika anda mahu kandungan tidak boleh dibaca oleh pembaca skrin.

lebar:0px;tinggi:0px

Sama seperti di atas, memandangkan elemen tanpa ketinggian atau lebar dialih keluar daripada aliran halaman, kebanyakan pembaca skrin akan mengabaikan kandungan ini. Lebar dan ketinggian HTML mungkin menghasilkan hasil yang sama. Jika anda mahu kandungan dibaca oleh pembaca skrin, jangan tetapkan saiz kandungan kepada 0 piksel.

Maklumat lanjut:

• Pusat Kurang Upaya WebAIM
• Emulator Pembaca Skrin Mozilla Taring