Berita Platform: Menggunakan: terlihat fokus, Jenis Huruf Baru BBC, DOM Bayangan Deklaratif, A11Y dan Placeholder

Ada banyak sekali aksesibilitas dalam berita minggu ini, mulai dari nuansa penggunaan :focus-visible dan input, hingga tipografi yang dapat diakses dan bug Safari dengan :display: contents . Plus, potongan untuk komponen web tanpa tulang yang mendukung enkapsulasi gaya.

Sekarang mungkin saat yang tepat untuk mulai menggunakan: fokus-terlihat

CSS: pseudo-class :focus-visible :focus sebagai cara baru untuk membuat indikator fokus khusus untuk pengguna keyboard. Chrome baru-baru ini beralih dari :focus ke :focus-visible di lembar gaya agen pengguna dan, sebagai akibat dari perubahan tersebut, cincin fokus default tidak lagi ditampilkan saat pengguna mengeklik atau mengetuk tombol.

Saat beralih dari :focus ke :focus-visible , pertimbangkan kompatibilitas mundur. Indikator fokus keyboard Anda harus terlihat jelas di semua browser, bukan hanya yang mendukung :focus-visible . Jika Anda hanya bergaya :focus-visible , browser yang tidak mendukung akan menampilkan cincin fokus default yang, bergantung pada desain Anda, " mungkin tidak cukup jelas atau tidak terlihat sama sekali ".

 button { background: white; } button:focus-visible { outline: none; background: #ffdd00; /* gold */ }

Cara yang baik untuk mulai menggunakan :focus-visible hari ini adalah dengan menentukan gaya fokus dalam :focus dan kemudian segera membatalkan gaya yang sama dalam aturan :focus:not(:focus-visible) . Memang ini bukan pola yang paling elegan dan intuitif, tetapi berfungsi dengan baik di semua browser:

  • Browser yang tidak mendukung :focus-visible menggunakan gaya fokus yang ditentukan dalam aturan :focus dan mengabaikan sepenuhnya aturan gaya kedua (karena :focus-visible tidak mereka ketahui).
  • Dalam browser yang melakukan dukungan :focus-visible , aturan gaya kedua beralih gaya fokus didefinisikan dalam :focus aturan jika :focus-visible negara tidak aktif juga. Dengan kata lain, gaya fokus yang ditentukan dalam aturan :focus hanya berlaku jika :focus-visible juga aktif.
 button:focus { outline: none; background: #ffdd00; /* gold */ } button:focus:not(:focus-visible) { background: white; /* undo gold */ }

BBC menciptakan jenis huruf yang lebih mudah diakses

BBC membuat jenis huruf khusus mereka sendiri yang disebut Reith (dinamai menurut nama pendiri BBC Sir John Reith). Tujuan mereka adalah membuat font yang mendukung banyak bahasa dan lebih mudah dibaca, terutama pada perangkat kecil. Font tersebut diuji dengan kelompok pengguna dengan kemampuan campuran (disleksia dan gangguan penglihatan) dan di berbagai ukuran layar.

Kami [BBC] menggunakan Helvetica atau Arial. Kami juga memiliki Gill Sans sebagai jenis huruf perusahaan. Tipografi ini dirancang seratus tahun yang lalu untuk halaman cetak [dan] tidak berfungsi dengan baik pada layar digital modern saat ini.

Reith Sans terlihat digunakan di BBC Sport

Catatan: Jika Anda ingin memeriksa Reith Sans dan Reith Serif di Wakamai Fondue , Anda dapat dengan cepat mengakses URL file WOFF2 di bagian "Semua font di halaman" dari panel Font di inspektur DOM Firefox di situs web BBC.

display: contents masih tidak dapat diakses di Safari

Tampilan CSS display: contents nilai konten telah didukung di browser sejak 2018 . Elemen dengan nilai ini " tidak menghasilkan kotak apa pun " dan secara efektif diganti oleh turunannya. Ini sangat berguna dalam tata letak flex dan grid, di mana nilai contents dapat digunakan untuk "mempromosikan" elemen bersarang yang lebih dalam ke item flex / grid sambil mempertahankan struktur dokumen semantik.

Sumber: Manuel Rego Casasnovas

Sayangnya, fitur ini awalnya dikirimkan dengan bug implementasi yang menghapus elemen dari pohon aksesibilitas browser. Misalnya, menerapkan display: contents ke <ul> mengakibatkan elemen tersebut tidak lagi disebutkan oleh pembaca layar. Sejak saat itu, bug ini telah diperbaiki di Firefox dan Chrome ( dalam versi terbaru ).

Lihat di CodePen

Di Chrome dan Firefox, pembaca layar memberi tahu pengguna bahwa "Utama, navigasi" berisi "daftar, 2 item". Di Safari, bagian terakhir hilang karena elemen <ul> dan <li> tidak ada di pohon aksesibilitas. Hingga Apple memperbaiki bug ini di Safari , berhati-hatilah saat menggunakan nilai contents pada elemen semantik dan uji di pembaca layar untuk mengonfirmasi bahwa halaman Anda juga dapat diakses di Safari.

Setel opacity saat mengganti warna teks placeholder

Pakar aksesibilitas merekomendasikan untuk menghindari placeholder jika memungkinkan karena mereka bisa bingung untuk teks yang sudah terisi sebelumnya dan menghilang saat pengguna mulai memasukkan nilai. Namun, banyak situs web (termasuk Wikipedia dan GOV.UK) menggunakan placeholder dalam formulir web sederhana yang hanya berisi satu bidang masukan, seperti bidang pencarian.

Formulir berlangganan buletin CSS-Tricks menggunakan placeholder di bidang email

Placeholder dapat diberi gaya melalui pseudo-element ::placeholder Jika desain Anda meminta warna kustom untuk teks placeholder, pastikan untuk menentukan color dan opacity . Yang terakhir ini diperlukan untuk Firefox, yang menerapkan opacity: 0.54 to ::placeholder secara default. Jika Anda tidak mengganti nilai ini, teks placeholder Anda mungkin kurang kontras di Firefox.

 .search-field::placeholder { color: #727272; opacity: 1; /* needed for Firefox */ }
Teks placeholder di situs web eBay lebih ringan di Firefox dan tidak memenuhi persyaratan kontras minimum 4,5: 1

Shadow DOM deklaratif dapat membantu mempopulerkan enkapsulasi gaya

Salah satu fitur utama shadow DOM adalah enkapsulasi gaya, di mana aturan gaya halaman luar tidak cocok dengan elemen di dalam pohon bayangan, dan sebaliknya. Untuk menggunakan fitur ini, Anda perlu melampirkan shadow DOM tree ke sebuah elemen (biasanya elemen kustom, seperti <my-element> ) dan menyalin template elemen (biasanya dari <template> di DOM) ke shadow DOM elemen yang baru dibuat.

Langkah-langkah ini hanya dapat dilakukan di JavaScript. Jika Anda hanya tertarik dengan enkapsulasi gaya dan tidak memerlukan fungsionalitas dinamis untuk elemen Anda, berikut adalah jumlah minimum JavaScript yang diperlukan untuk membuat elemen khusus dengan shadow DOM:

 customElements.define( "my-element", class extends HTMLElement { constructor() { super(); // find <template id="my-template"> in the DOM let template = document.getElementById("my-template"); // make a copy of the template contents… let content = template.content.cloneNode(true); // …and inject it into <my-element>'s shadow DOM this.attachShadow({ mode: "open" }).appendChild(content); } } );

Untuk contoh enkapsulasi gaya, lihat elemen <media-object> Miriam Suzanne di CodePen . Gaya cakupan terletak di elemen <template> di panel HTML. Perhatikan bagaimana kode CSS ini dapat menggunakan pemilih sederhana, seperti article , yang hanya cocok dengan elemen di dalam shadow DOM <media-object>

JavaScript mungkin segera tidak lagi diperlukan untuk membuat jenis enkapsulasi gaya ini di browser modern. Awal pekan ini, Chrome menjadi browser pertama yang mengirimkan proposal DOM Bayangan Deklaratif Google. Jika menjadi standar, fitur ini juga akan memungkinkan penggunaan Shadow DOM dalam kombinasi dengan rendering sisi server.


Posting Berita Platform: Menggunakan: fokus-terlihat, Jenis Huruf Baru BBC, DOMS Bayangan Deklaratif, A11Y dan Placeholder muncul pertama kali di CSS-Tricks .

Anda dapat mendukung CSS-Tricks dengan menjadi Supporter MVP .

April 16, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *