Di sebagian besar contoh, dan dokumentasi yang saya temukan online (mis. https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions) cara terbaik untuk menerapkan bagian yang dapat diciutkan adalah dengan menggunakan dua elemen berbeda.

<p class="button">
    <button id="button1" class="buttonControl" aria-controls="t1" aria-expanded="false"><span>Show</span> Topic 1</button>
</p>

<div id="t1" class="topic" role="region" tabindex="-1" >
    Topic 1 is all about being Topic 1 and may or may not have anything to do with other topics.
</div>

Bagaimanapun, dalam kasus saya, wilayah tersebut harus diciutkan ketika klik terjadi pada bagian itu sendiri. Pertanyaan saya adalah bagaimana menerapkan fungsi ini dengan cara yang ramah aksesibilitas.

Perbarui

Saya membuat contoh, agar lebih jelas apa yang ingin saya dapatkan. Pertimbangkan paragraf ini:

<p>This paragraph contains the first two lines of a bigger section ...</p>

Ketika pengguna mengklik paragraf ini, kontennya akan berubah menjadi sebagai berikut:

<p>This paragraph contains the first two lines of a bigger section, when it gets clicked the whole document is rendered... if it gets clicked again it gets collapsed.</p>
1
Bruno 21 Januari 2020, 14:17

2 jawaban

Jawaban Terbaik

Penafian: Sayangnya, tidak ada cara yang rapi untuk melakukan ini (menurut saya) tanpa pembaca layar membaca ulang sesuatu, tetapi saya yakin di bawah ini adalah kompromi terbaik. Juga harap dicatat saya belum menguji di bawah ini jadi saya mungkin membuat kesalahan.

Prinsipnya tidak benar-benar berubah, Anda memerlukan 'tombol' (dalam arti paling longgar) dan bagian yang mengembang.

Jadi Anda akan menyusun HTML Anda mirip dengan yang berikut: -

<p role="button" tabindex="0" aria-controls="t1" aria-expanded="false" aria-labelledby="button-text" onclick="toggle()">
    <span class="inline" id="button-text">the first part of the snippet
        <span class="hide-when-expanded" aria-hidden="true">...</span>
        <span class="visually-hidden" aria-hidden="false">(click to expand snippet)</span>
    </span>
    <span class="the-hidden-part-of-the-text" id="t1" style="display:none"> and this is the second hidden part</span>
</p>

Penjelasan

Seluruh paragraf diperlakukan seperti tombol oleh pembaca layar role="button" dan tabindex="0" ditambahkan untuk membuatnya dapat difokuskan.

Saya menambahkan handler onclick untuk demonstrasi tetapi jelas Anda harus melakukan ini dengan penyeleksi untuk fungsi 'toggle'.

Di dalam blok teks pertama (terlihat saat diciutkan) saya menambahkan tiga titik untuk menandakan ada lebih banyak yang bisa dibaca untuk pengguna yang bisa melihat dan menyembunyikannya dari pembaca layar.

Saya juga menambahkan beberapa teks yang tersembunyi secara visual (lihat CSS yang tersembunyi secara visual di bagian bawah jawaban ini untuk CSS) untuk menjelaskan bahwa ada lebih banyak konten yang tersedia untuk pengguna pembaca layar.

Akhirnya saya menambahkan bagian berikutnya dari teks dalam <span> terpisah yang disembunyikan.

Untuk menampilkan konten kita kemudian mengubah di atas menjadi seperti berikut:-

<p role="button" tabindex="0" aria-controls="t1" aria-expanded="true" aria-labelledby="button-text" onclick="toggle()">
        <span class="inline" id="button-text">the first part of the snippet
            <span class="hide-when-expanded" aria-hidden="true" style="display:none">...</span>
            <span class="visually-hidden" aria-hidden="true">(click to expand snippet)</span>
        </span>
        <span class="the-hidden-part-of-the-text" id="t1" style="display:inline-block"> and this is the second hidden part</span>
 </p> 

Kami mengubah aria-expanded menjadi 'true' untuk elemen induk.

Kami menyembunyikan tiga titik dan penjelasan pembaca layar.

Kami menunjukkan rentang akhir dengan teks tambahan.

Penting

Seperti yang saya katakan ini tidak diuji, Anda mungkin menemukan bahwa Anda perlu memindahkan aria-controls="t1" aria-expanded="false" ke paragraf pertama.

Anda mungkin juga menemukan bahwa Anda tidak memerlukan aria-labelledby jika memang demikian (atau sama sekali) yang ada, sehingga 'tombol' yang kami buat dapat dibaca dengan benar tetapi karena ini adalah struktur yang tidak biasa, mungkin tidak diperlukan.

Penting agar seluruh paragraf dapat diklik sehingga dapat ditutup dengan mudah.

Anda harus bermain dengan gaya untuk memastikan bahwa tidak ada jarak yang tidak biasa, dll.

Anda mungkin mendengar sedikit jeda antara bagian pertama dan bagian kedua, pembaca layar tertentu melakukan ini saat menghadapi beberapa rentang, tidak ada yang dapat kami lakukan untuk itu tetapi sebenarnya ini memudahkan untuk mengetahui di mana konten tambahan dimulai jika ini adalah kasus.

Saya mencoba ini dengan aria-live di wilayah untuk mencoba dan menyederhanakannya, jika Anda mempertimbangkannya, tetapi itu tidak memberikan perilaku yang baik karena itu berarti Anda harus menjelaskan bahwa wilayah itu dapat diklik.

mungkin gunakan cara tombol yang diterima untuk meluaskan karena cara ini terasa berantakan. Anda selalu dapat memposisikan tombol setelah teks secara visual menggunakan CSS.

CSS tersembunyi secara visual visual

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

EDIT - opsi alternatif

Kita bisa membuat ini lebih sederhana.

<p>the first part of the snippet 
    <span class="hide-when-expanded" aria-hidden="true">...</span>
    <span class="visually-hidden"> and this is the second hidden part</span>
</p>

Dalam contoh di atas, kami mengikuti prinsip yang sama (menyembunyikan tiga titik saat terbuka) namun kami membiarkan semua konten dapat diakses setiap saat oleh pengguna pembaca layar.

Maka yang perlu kita lakukan adalah menghapus kelas visually-hidden pada perluasan untuk pengguna yang dapat melihat.

Karena pengguna pembaca layar dapat melompat ke bagian berikutnya dengan mudah, ini mungkin pilihan yang jauh lebih baik karena satu-satunya alasan untuk menyembunyikan konten dan memperluasnya adalah untuk daya tarik visual.

Ini menghilangkan semua masalah dengan menggunakan aria untuk beralih.

Satu-satunya hal yang perlu Anda pikirkan adalah pengguna keyboard yang tidak menggunakan pembaca layar, tanpa membingungkan pengguna pembaca layar (yaitu, sakelar Anda adalah aria-hidden).

1
Graham Ritchie 21 Januari 2020, 15:26

Saya sedang mempertimbangkan pendekatan di bawah ini:

<div aria-expanded={String(isExpanded)} id="myAbstract" onClick={toggle}>
  <input 
    type="checkbox" 
    name="" 
    aria-controls="myAbstract"
    aria-label={(isExpanded ? 'Collapse' : 'Expand') + ' the abstract'}
    role="button"
    checked={isExpanded}
    onChange={toggleAbstract}
  />
  {isExpanded && ? fullText : text}
</div>

Kotak centang diposisikan absolut, dan tersembunyi secara visual (opacity: 0) tetapi masih dapat difokuskan; sehingga pengguna dapat memeriksanya menggunakan keyboard. Juga, fokus pemilih css harus memungkinkan saya untuk menata paragraf secara berbeda ketika kotak centang difokuskan.

0
Bruno 21 Januari 2020, 15:12