Web Membutuhkan Native .visually-hidden

Salah satu artefak aksesibilitas web yang paling aneh bagi saya adalah .visually-hidden kelas utilitas. Anda mungkin juga mengetahuinya sebagai .sr-only (atau mungkin sebagai .screen-reader-text, .element-invisibleatau sejumlah nama lain sepanjang zaman).

Cara konvensional untuk menyembunyikan elemen termasuk gaya display: none atau visibility: hiddenatau menggunakan HTML‘S hidden atribut. Saat Anda menggunakan salah satu dari pendekatan ini, browser akan berasumsi tidak ada dimaksudkan untuk mengakses elemen tersebut, dan konten tersebut tidak akan terpapar ke teknologi pendukung. Ini membuat sedikit teka-teki: bagaimana jika Anda ingin untuk menyembunyikan sesuatu secara visual, tetapi tetap mengeksposnya ke teknologi pendukung seperti pembaca layar? Contohnya…

Masukkan .visually-hidden kelas utilitas, yang biasanya (membayangkan!) terlihat seperti:

.visually-hidden:not(:focus):not(:active) 
	border: 0;
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap; 
	width: 1px;

Saya telah meminjam seperangkat aturan khusus ini dari Kitty Giraudel’s .sr-only potongan. Aturan ini membuat elemen yang diterapkan tidak memakan ruang, tanpa memicu browser heuristik apa pun yang digunakan untuk mengecualikan elemen dari keluaran teknologi bantuan. Untuk mempelajari lebih lanjut tentang cara kerja gaya ini, saya sarankan untuk melihat uraian James Edwards tentang .visually-hidden.

Cuplikan gaya ini berfungsi dengan sangat baik, dan telah diulang dan diperiksa oleh praktisi aksesibilitas selama bertahun-tahun. Namun, itu akan menjadi kemenangan besar bagi web untuk memiliki penduduk asli HTML atau CSS teknik, tidak diperlukan copypasta, untuk menyembunyikan elemen secara visual sambil tetap mengeksposnya ke teknologi pendukung.

Masalah dengan Copypasta

Ini adalah Bundel Peretasan

Atau, setidaknya, itu terasa dengan cara itu.

Lagi pula, alasan utama untuk gaya ini adalah untuk membuat elemen disembunyikan sebanyak mungkin tanpa juga memicu heuristik browser untuk menyembunyikan elemen dari teknologi pendukung. Berbagai aturan masing-masing dapat menjadi titik kegagalan jika browser menyesuaikan heuristiknya, baik melalui keputusan sadar atau sebagai bug. Jika browser, misalnya, berhenti menampilkan konten yang dikaburkan oleh overflow: hidden untuk teknologi pendukung, aturan ini akan bersulang. Idealnya, browser tidak hanya merusak hal-hal seperti itu — menurut saya tidak ada kemungkinan besar hal ini akan terjadi — tetapi akan lebih aman untuk tidak terlalu mengandalkan regresi browser.

Cuplikan Mana yang Harus Anda Gunakan?

Seperti yang dicatat oleh teman saya Evan, tidak hanya ada satu set aturan yang tersembunyi secara visual di luar sana:

@ ben ada juga lebih dari satu copy-pasta ajaib yang beredar di luar sana, dan saya tidak pernah sepenuhnya yakin mana yang harus saya gunakan.

Evan (@darth_mall@notacult.social)

Ada banyak gaya yang tersembunyi secara visual selama bertahun-tahun. Beberapa ditanam di rumah, tidak diperiksa, dan rapuh, seperti yang saya temukan baru-baru ini yang sebagian besar bersandar color: transparent, yang akan diabaikan dalam mode warna paksa, menyebabkan teks tak terlihat menjadi terlihat lagi. Pendekatan lain dulunya biasa tetapi sekarang tidak dianjurkan — yaitu, pendekatan yang menempatkan konten sangat jauh dari layar dengan pemosisian absolut atau negatif besar text-indent. Hal ini tidak disarankan saat ini karena menyebabkan masalah untuk konten kanan-ke-kiri, orang yang menggunakan kaca pembesar layar, pengguna pembaca layar yang dapat melihat yang mendapat manfaat dari melihat kursor pembaca layar mereka, dan pengguna pembaca layar seluler yang mengandalkan sentuhan.

Sementara saat ini, praktisi aksesibilitas telah menggunakan pendekatan clip-paths-and-hidden-overflows yang diberikan di atas, masih ada iterasi dan variasi pada tema, semuanya berusaha untuk menangani keanehan atau konteks baru yang dihadapi di dunia nyata. Misalnya, gaya visual tersembunyi Kitty Giraudel sangat mirip dengan yang dibagikan oleh Scott O’Hara, kecuali bahwa Kitty juga menghilangkan batas, bantalan, dan margin elemen. Penambahan ini membuat gaya yang tersembunyi secara visual lebih kuat dalam skenario edge-casier seperti orang tua overflow: auto.

Mengingat bahwa terkadang kami masih menemukan keanehan yang perlu dipertanggungjawabkan, bagaimana kami tahu bahwa gaya tersembunyi secara visual yang telah ada di basis kode kami selama beberapa tahun (termasuk yang disediakan oleh perpustakaan pihak ketiga dan CSS kerangka kerja) apakah iterasi terbaru, terhebat, dan terkini? Bagaimana seharusnya praktisi aksesibilitas mengomunikasikan pembaruan bertahap ke komunitas webdev secara luas?

Yang Ingin Saya Lihat

Mengingat ada pasar untuk menyembunyikan konten secara visual sambil tetap mengeksposnya ke teknologi pendukung, web akan sangat diuntungkan dengan menyediakan spesifikasi asli CSS/HTML teknik yang tidak memerlukan penyalinan dan penempelan cuplikan ajaib. Dan untuk uang saya, pendekatan yang paling ingin saya lihat adalah…

display: visually-hidden;

… didefinisikan sebagai identik dengan display: nonekecuali bahwa gaya ini tidak mendiskualifikasi elemen dari paparan teknologi pendukung.

Di alam liar, ini mungkin akan mengarah pada deklarasi gaya seperti:

.skip-link:not(:focus):not(:active) 
	display: visually-hidden;

Dan saya pikir menggunakannya dengan Sass atau CSS bersarang akan terasa sangat bersih:

.skip-link 
	

	&:not(:focus):not(:active) 
		display: visually-hidden;
	

Tergantung seberapa dekat hipotesis ini display: visually-hidden cocok dengan perilaku dari display: noneini akan memiliki kaki lain di atas .visually-hidden gaya dalam teks yang disembunyikan dengan cara ini tidak akan muncul Ctrl+F pencarian dalam halaman atau ditambahkan ke papan klip, salah satunya mungkin tidak terduga dan tidak intuitif bagi pengguna yang dapat melihat.

Apa Pilihannya?

Dan mengapa saya berpikir display: visually-hidden adalah cara untuk pergi?

Ketika saya sudah ditanya tentang proposal untuk native visual-hidden di Twitter sebelumnyaSaya mendapatkan segudang implementasi potensial berbeda yang ingin dilihat orang.

Masukkan HTML!

Beberapa tanggapan yang saya dapatkan mengusulkan untuk menambahkan beberapa atribut atau nilai atribut baru HTML.

Dalam beberapa kasus, orang menyarankan untuk menambahkan nilai baru ke hidden atribut (mungkin sesuatu seperti hidden="visually"?), sejak hidden bukan lagi boolean sederhana. Saya pikir ini akan menjadi rute yang berbahaya untuk turun (dalam pikiran saya, benar-benar nonstarter), karena mode kegagalan untuk browser yang belum mengenali nilai baru adalah mengecualikan konten dari keluaran teknologi bantuan sama sekali.

Selain itu, pada masa-masa awal hidden atribut, banyak stylesheet menambahkan aturan ini untuk dapat mulai digunakan hidden lebih awal.

[hidden] 
	display: none;

Aturan ini masih ada di banyak situs, dan di CSS reset dan normalizer seperti normalize.css. Situs dengan aturan seperti ini akan tetap mencegah konten yang tersembunyi secara visual agar tidak terpapar teknologi pendukung.

Ini membawa kita ke poin yang lebih besar tentang memasukkan ini HTML: bahkan jika kita membuat sesuatu yang benar-benar baru visuallyhidden atribut, gaya default browser untuk HTML elemen dan atribut adalah luar biasa mudah untuk ditimpa. Yang diperlukan hanyalah pengembang yang bermaksud baik untuk menulis…

[visuallyhidden] 
	display: none;

…dan atributnya adalah bersulang untuk situs dengan cara yang akan dilewatkan oleh sebagian besar pengembang.

Kekhawatiran tambahan yang saya miliki tentang memasukkan ini HTML apakah itu:

• Itu tidak benar-benar memfasilitasi respons terhadap viewport atau ukuran kontainer tanpa JavaScript (Saya bisa melihat ingin menggunakan kueri media atau kueri wadah untuk menampilkan/menyembunyikan teks di dalam tombol ikon pada berbagai lebar viewport atau ukuran wadah, misalnya)
• Itu tidak benar-benar memfasilitasi respons terhadap keadaan seperti hover atau fokus tanpa JavaScript juga (pertimbangkan tautan lewati yang tersembunyi secara visual yang muncul saat menerima fokus keyboard)
• Gagasan tentang sesuatu yang “secara visual” disembunyikan adalah ide yang sangat presentasional, berpusat pada browser, dan saya tidak yakin seberapa baik semantik ini akan diterjemahkan ke agen pengguna lain.

Dalam pikiran saya, jika kita akan memiliki pendekatan asli untuk menyembunyikan beberapa elemen secara visual, itu harus masuk CSS.

Buat yang Baru CSS Properti!

Saya pasti bisa hidup dengan ini!

Ini akan membutuhkan sedikit bikeshedding pada namanya, karena penamaan itu sulit, tetapi untuk tujuan artikel ini, katakanlah itu terlihat seperti:

element-visibility: visually-hidden;

Ini memberi kita sesuatu yang bisa kita gunakan bersama dengan semua kueri media, kueri kontainer, kelas semu, dan banyak lagi!

.skip-link:not(:focus):not(:active) 
	element-visibility: visually-hidden;


@media only screen and (max-width: 600px) 
	button.icon-button > span 
		element-visibility: visually-hidden;
	

Ini benar-benar langkah ke arah yang benar bagi saya!

Kelemahan dari properti baru seperti ini, bagaimanapun, adalah tidak sepenuhnya jelas bagi saya bagaimana hal ini akan diselesaikan:

element-visibility: visually-hidden;
display: none;

Apakah elemen tersebut masih tersembunyi dari teknologi pendukung karena display: none?

Atau bagaimana dengan ini?

element-visibility: visually-hidden;
display: block;

Apakah elemen tersebut akan disembunyikan secara visual di sini, atau akankah display: block sembunyikan itu? Bisakah kita mengartikulasikan mengapa perilaku itu seperti itu?

Saya yakin spesifikasinya akan sesuai dengan urutan prioritas di sini, tetapi saya tidak yakin bahwa prioritas dapat sepenuhnya intuitif bagi pengembang. Menurut pendapat saya, hal itu hanya meningkatkan risiko beberapa konten mungkin tidak terekspos ke teknologi pendukung yang seharusnya.

Saya pikir memperkenalkan properti baru juga disertai dengan biaya pendidikan. CSS sudah punya display, visibility, content-visibility, dan cara lain untuk menyembunyikan elemen, yang sudah merupakan kumpulan nama dan fungsi serupa yang membingungkan. Jika kita memperkenalkan properti baru, kita tidak hanya harus mengetahui bagaimana interaksinya dengan yang lain CSS cara untuk menyembunyikan sesuatu… kami juga menambah tumpukan yang membingungkan, yang menurut saya hanya akan membuat sayap ini CSS hanya saja kurang mudah didekati oleh pendatang baru.

Jika kita ingin menghindari menambahkan yang baru, namanya sama CSS properti ke tumpukan Dan kurangi berapa banyak properti lain yang dapat bertentangan dengan ini, maka menurut saya cara yang harus dilakukan adalah menambahkan nilai baru ke properti yang sudah ada. Karena menurut saya, fungsi yang ideal itu seperti display: none kecuali tanpa menyembunyikan konten dari teknologi bantu, baru display properti paling masuk akal bagi saya. Karena itu, display: visually-hidden!

Jalan di depan

Penambahan seperti ini akan melalui CSS Kelompok kerja. Kembali pada tahun 2016, Sara Soueidan mengajukan masalah yang merekomendasikan hal ini, tetapi percakapan tersebut tampaknya mandek. Jika sebuah display: visually-hidden tampaknya menarik bagi Anda, berikan acungan jempol dan pertimbangkan untuk berkontribusi dalam percakapan.

Jika display: visually-hidden pernah berhasil, menurut saya ada baiknya bersikap strategis tentang bagaimana kami mulai memasukkannya ke dalam situs kami (mengingat bahwa “selalu hijau” tidak berarti langsung tersedia). Demi uang saya, pendekatan yang paling sederhana dan paling kuat adalah dengan menambahkan aturan ke aturan kami yang sudah berfungsi .visually-hidden/.sr-only kelas:

.visually-hidden:not(:focus):not(:active) 
	
	display: visually-hidden;

	border: 0;
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap; 
	width: 1px;

…setidaknya sampai tumpukan browser kami mendukung nilai ini dengan andal selama beberapa waktu.

Kesimpulan

Selagi .visually-hidden/.sr-only gaya utilitas telah terbukti sangat berguna, web benar-benar akan mendapat manfaat dalam jangka panjang dari mengabadikan pendekatan asli ke dalam standar web. Aturan seperti itu akan lebih mudah untuk diajarkan dan lebih mudah untuk digabungkan CSSfitur responsif dan stateful. Ini juga akan mencegah munculnya pendekatan buatan sendiri yang belum diperiksa, dan itu akan memastikan bahwa pengembang tidak perlu memperbarui gaya proyek mereka setiap beberapa tahun ketika perbaikan ditemukan.

Lagi CSS Daftar Keinginan

Artikel ini sebagian terinspirasi oleh Dave Rupert CSS wishlist untuk tahun 2023. Beberapa orang lain telah mengeluarkannya sendiri CSS daftar keinginan, dan Anda harus membacanya!