Misalnya, pengguna yang perlu membaca perangkat lunak layar. Sebagai front-end, bagaimana kita bisa menanggungnya? Saya selalu ingin menulis artikel seperti itu sebelumnya, berbagi cara membuat halaman dengan aksesibilitas yang lebih baik. Rencana hari ini mencakup kombinasi standar HTML TA AG dan WCAG. Saya sarankan Anda menulis HTML Anda seperti ini sehingga kehidupan beberapa orang bisa lebih mudah.
Yang ingin saya bagikan hari ini adalah bagaimana menggunakan tag HTML kami untuk mencerminkan standar WCAG dan tujuan jaringan semantik:
Bahkan, ini tidak ada hubungannya dengan WCAG, tetapi untuk halaman dengan kompatibilitas yang lebih baik, terutama kompatibilitas mundur, saya sarankan Anda untuk menulisnya seperti ini:
<! Doctype html>
Koneksi internet hampir dapat dikatakan diimplementasikan menggunakan <a>, sebagai tag yang paling umum pada halaman. Bagaimana kita harus mengobatinya?
<a href = title = accessKey = m rel =Hidefocus> Tautan </a>
Juga sangat penting untuk menggunakan tag HTML dengan benar, yang kondusif untuk memahami struktur halaman pengguna perangkat lunak membaca layar. Terutama ketika menggunakan label seperti H1, H2, H3, dll., Penyalahgunaan dapat dengan mudah menyebabkan kebingungan struktural. Tentu saja, menggunakan tag umum dan kemudian menggunakan CSS untuk membuat kontras visual juga merupakan sesuatu yang dapat dikenali oleh orang biasa. Tapi bagaimana dengan pengguna perangkat lunak membaca layar. Tentu saja, di sini kita hanya perlu memperhatikan penggunaan tag halaman, dan hal terpenting tentang ABBR adalah menambahkan atribut judul untuk menggambarkan singkatan. Misalnya:
<ABBR title = pengembang web> wd </bbr>
Ketika ada paragraf besar kutipan, gunakan <Blockquote>, sementara kutipan inline menggunakan <cite> untuk membuat struktur Anda lebih mudah dibaca:
<BLOCKQUOTE> Saya selalu ingin menulis artikel seperti itu sebelumnya, berbagi cara membuat halaman dengan aksesibilitas yang lebih baik. Rencana hari ini mencakup kombinasi standar HTML TA AG dan WCAG. Saya sarankan Anda menulis HTML Anda seperti ini sehingga kehidupan beberapa orang bisa lebih mudah. </BLOCKQUOTE> <p> Kalimat A yang paling mengesankan adalah bahwa ketika Anda berada di depan, Anda harus memiliki cinta. Jangan gunakan tubuh yang menderu pada semua jenis orang kapan saja </cite>. </p>
Menulis sesuatu di atas kertas tidak dapat dilakukan seperti menulis sesuatu di komputer. Anda dapat menggunakan tombol Undo untuk menekannya, tetapi apa yang harus kami lakukan ketika kami ingin menekankan bahwa ada sesuatu yang dihapus? Itu untuk menggunakan tag <del>. Misalnya:
<del> Saat menyatakan penekanan pada HTML, silakan gunakan & lt; b & gt; Tag </el> Saat menyatakan penekanan pada HTML, silakan gunakan & lt; Strong & gt; menandai
Efeknya seperti ini:
Saat menekankan pada HTML, silakan gunakan tag <b>Saat menekankan pada HTML, silakan gunakan tag <strong>
Ketika saya mengambil pendatang baru untuk melakukan blog front-end Alipay tahun lalu, yang paling mengesankan saya adalah saya suka menggunakan <ll>. Pada saat itu, saya berpikir bahwa para siswa ini cukup baik dan memiliki pemahaman yang baik tentang semantik. Kami masih jarang menggunakan daftar definisi. Sebagai gantinya, gunakan dua Jenderal <ul> <Ol>. <DL> juga harus digunakan dengan hati -hati, yang terbaik adalah hanya menggunakan entri definitif tertentu, seperti contoh W3School, definisi kopi dan susu:
<DL> <DT> kopi </dt> <dd>- Minuman panas hitam </dd> <dt> susu </dt> <dd>- minuman dingin putih </dd> </ll>
Daftar, ini sangat akrab bagi setiap front-end. Karena struktur dapat diterapkan dengan sangat fleksibel, sering digunakan dalam navigasi, daftar, tab, dll. Tidak perlu mengatakan banyak tentang ini. Tetapi ada satu hal yang perlu dipahami. Jangan percaya bahwa <ul>/<Ol> adalah pengganti untuk <able>. Dalam tag HTML yang kami gunakan, masing -masing tag memiliki fungsinya sendiri, dan tidak ada yang menjadi pengganti siapa pun.
<Ol> <li> Kopi </li> <li> Teh </li> <li> Susu </li> </ol>
Jika itu adalah tabel, maka jangan gunakan paragraf sebagai gantinya, apalagi daftar. Kecuali itu mutlak diperlukan, dan mereka dapat dikonversi. Selain itu, ada beberapa poin yang perlu diperhatikan dalam tabel:
<Table Ringkasan = Status Blog Sofish> <Thead> <tr> <th> Tanggal </tr> <th> ip </t th> <th> pv </t th> </tr> </thead> <tbody> <td> <td> 2011.11 </td> <t/tdbody </tdbody> </td> <t/td> <t/td> <t/td> <t/td> <t/td> <t/tdoty </td> <t/
<code> mengacu pada teks kode komputer, sementara <pr Pre> mengacu pada teks yang diformat sebelumnya. <pe> adalah rentang yang lebih luas dan merupakan elemen bloky yang dapat digunakan untuk memformat berbagai teks, terutama kode. Tidak perlu memberi perhatian khusus saat menggunakannya, terutama penggunaan yang benar secara semantik, seperti tidak menggunakan <pe> bukan umum <p>.
<code> text-align: center </code> <pr Pre> {(1 * 102) + (9 * 101) + (3 * 100)} </pri>Di halaman web modern, sangat jarang menggunakan <br>. Ruang kosong di halaman web umumnya diimplementasikan menggunakan bantalan dan margin CSS. Ini lebih akurat dan lebih mudah dikendalikan. Penggunaan yang disarankan sekarang adalah dengan menggunakan paragraf umum <p> untuk membuat jeda garis sederhana alih -alih mengendalikan ruang putih halaman.
<p> Saya adalah paragraf. <Br /> Politik selalu memecahkan garis. </p>
<HR> memiliki efek semantik yang sangat baik. Tetapi efek visualnya sulit dikendalikan. Saya telah menulis artikel seperti itu sebelumnya tentang masalah di berbagai browser. Secara umum, jarang digunakan. Jika Anda menyediakan halaman terpisah khusus untuk pengguna perangkat lunak membaca layar, itu mungkin sangat bermanfaat.
<h3> Judul 1 </h3> <p> Lorem ipsum adalah ... </p> <hr /> <h3> Judul 2 </h3> <p> Ini adalah entri ... </p>
Faktanya, kedua tag <div>/<span> memiliki semantik, dan keduanya mendefinisikan bagian dalam dokumen. Ya, itu sebenarnya sama dengan <section> di HTML5. Hanya saja karena mesin pencari, mesin pencari berpikir mereka adalah label semantik, sehingga mereka menjadi label semantik. Penggunaan yang disarankan adalah mencoba menggunakan wadah lain sebagai bingkai halaman, seperti tata letak, menambahkan efek visual tambahan, daripada pengganti paragraf, dll.
<Div ID = Container> <Div ID = Content> </div> <Div ID = Sidebar> <ul> <li> <span> dewa </span>, oh my zsh </span> </li></ul> </div> </div>
Tag ini hampir dapat dikatakan sebagai tag paling penting dalam hierarki tag halaman. Kita dapat menggunakan struktur buku untuk mengilustrasikan tag -tag ini, dan ketika kita membangun halaman, kita juga harus memiliki pemikiran seperti itu:
Ya, tentu saja ada juga kutipan <BlockQuote>, kode yang disediakan dalam buku teknis <pra class = code>, daftar poin yang membutuhkan perhatian <ul>, tabel untuk perbandingan yang mudah, dll.
<h1> logo </h1> <h2> judul </h2> <div class = entri> <h3> ringkasan: </h3> <p> lorem ipsum adalah ... <em> tekankan </em> </p> </div>
<em> menekankan singkatan. Dan <strong> sangat menekankan. Banyak siswa yang baru memulai tidak akan dapat menggunakan label <em>, <strong>, <cite>, <i>, <b> dan <b> secara akurat. <i> dan <b> pada dasarnya ditinggalkan, setara dengan yang saat ini dan <strong>. Secara umum, urutan pentingnya konten adalah sebagai berikut: kuat> em ≈ mengutip.
<strong> Catatan: </strong> Jangan gunakan tag lama, seperti <cite> font, center </cite>, dll., Terutama <em> font </em>.
Bentuk item adalah tag yang relatif kompleks dalam HTML, dan ada banyak poin yang harus diperhatikan:
<Form Method = Post Action = http: //sofish.de> <fieldset> <Gegend> Formulir saya </legend> <label for = firstName>* nama depan: </label> <input type = Text ID = firstName/<label untuk = pidato> Katakan sesuatu: </label> <TextArea id iD = wicara/</Textare> </fieldset> </form>
Untuk gambar, orang buta tidak bisa melihatnya. Berikan alt untuk mewakili teks alternatif. Beri tahu mereka gambar seperti apa ini.
<img src = http: //sofish.de/favicon.ico alt = Happy favorit favicon/>
Cobalah untuk menghindari penggunaan kerangka kerja <iframe>, tetapi ketika Anda perlu menggunakannya, yang terbaik adalah memberikan atribut judul untuk menggambarkannya.
<iframe src = http: //sofish.de title = Happy Favorites/</fiframe>
Media juga merupakan format yang relatif kompleks, yang lebih merepotkan untuk diproses. Biasanya kita bisa melakukan ini:
<audio src = mozart.mp4> mozart 39 simfoni </udio>
Halaman harus berisi judul, dan setiap tag harus dikenali. Misalnya, ini tercermin dalam Alipay:
<title> Hubungi Me-Happiness Favorites </iteme>
Baiklah. Itu saja untuk saat ini. WCAG bukan hanya penggunaan tag HTML sederhana ini, dan halaman web semantik bukanlah sesuatu yang dapat ditulis dalam satu atau dua artikel. Tidak usah buru-buru. Mulailah dengan hal -hal yang paling umum dan kembangkan kebiasaan baik. Kembali ke kalimat di awal artikel, apakah Anda memiliki hati untuk menulis halaman yang sangat sulit digunakan?