Tuntutan untuk desain web semakin mencakup peningkatan aksesibilitas web. Tetapi bukankah mengoptimalkan situs untuk semua browser utama dengan kompatibilitas beberapa perangkat cukup? Anda dapat dengan mudah mengukur kinerja situs web Anda, aksesibilitas, praktik terbaik, dan SEO menggunakan Google Lighthouse. Jadi mengapa aksesibilitas penting?

Menurut CDC (Pusat Pengendalian dan Pencegahan Penyakit), lebih dari 60 juta orang Amerika hidup dengan disabilitas. Mengikuti Panduan Aksesibilitas Konten Web, Anda dapat memperkenalkan beberapa pertimbangan awal yang akan berkontribusi untuk membuat situs web yang dapat diakses. Inilah semua yang Anda butuhkan untuk memulai aksesibilitas web menggunakan HTML dan CSS.

HTML Terstruktur Dengan Semantik yang Tepat

Saat membuat situs web menarik secara visual, pengguna teknologi bantu tidak perlu bingung. Meskipun banyak sistem manajemen konten seperti WordPress menerapkan HTML, Anda bertanggung jawab untuk memeriksa ulang dan mengonfirmasi bahwa itu diterapkan dengan benar.

Misalnya,

Baca lebih lajut: Contoh Kode HTML Sederhana yang Dapat Anda Pelajari dalam 10 Menit

HTML semantik lebih mudah dikembangkan karena Anda akan mendapatkan fungsionalitas tambahan bersamanya. Ini bekerja luar biasa di ponsel. Juga, ketika Anda memberi arti penting pada kata kunci yang dibungkus di dalamnya

atau tag, ini membantu dalam SEO.

Konten Terstruktur untuk Pengguna Pembaca Layar

Berikut adalah contoh HTML semantik baik vs. buruk.

HTML semantik yang bagus
Judul saya

Inilah cara Anda dapat membuat situs web yang dapat diakses menggunakan HTML dan CSS

Judul kedua saya

HTML semantik buruk
Judul saya

Inilah cara Anda dapat membuat situs web yang dapat diakses menggunakan HTML dan CSS

Kasing pertama cukup mudah dinavigasi untuk pembaca layar. Ini akan membaca tajuk yang memberitahukan tentang tajuk dan paragraf. Ini akan berhenti sejenak setelah setiap elemen. Anda dapat melewati beberapa judul atau kembali ke sebelumnya menggunakan Enter/Return. Anda juga dapat membentuk daftar isi dengan menggunakan tag header.

Saat Anda menulis HTML presentasi alih-alih HTML semantik (dalam kasus kedua), baris terputus secara tidak perlu dan menghasilkan pengalaman buruk. Ini seperti menyiapkan balok raksasa yang jauh lebih sulit untuk mengalir dan dimanipulasi karena tidak ada pemilih potensial.

Bahasa dan Tata Letak untuk Situs Web yang Dapat Diakses

Anda harus menggunakan bahasa yang tepat dengan akronim dan singkatan yang diperluas. Jika memungkinkan, cobalah untuk menghindari tanda hubung dengan menulis 9-5 -> 9 hingga 5. Sebelumnya tabel HTML digunakan untuk membuat tata letak halaman. Itu digunakan untuk menghambat pembacaan yang benar karena tabel bersarang yang membentuk tata letak yang cukup kompleks. Berikut adalah struktur situs web modern:

Ini headernya



Konten halaman utama

mengandung artikel

Judul artikel

konten artikel



Catatan kaki situs web

Jadi, seperti yang Anda lihat, tata letak ini ramah pembaca layar. Markup dapat dimengerti dengan kode yang jelas dan ringkas. Selain itu, mudah dirawat dan membutuhkan lebih sedikit bandwidth saat mengunduh. Pastikan Anda telah menempatkan kode sumber secara logis; itu akan membuat semua perbedaan.

Pertimbangkan kembali Kontrol UI, Tabel, dan Teks Alt

Paling umum, kontrol UI adalah tombol, formulir, dan kontrol tautan dari dokumen web Anda. Aturan praktisnya adalah mereka dapat dimanipulasi oleh keyboard. Mereka memiliki beberapa gaya default (mungkin berbeda di browser yang berbeda) di mana Anda dapat melompat ke opsi lain menggunakan tombol tab dan tekan Enter/Kembali untuk mencapai kesimpulan. Anda dapat mengelola label teks dengan menambahkan teks jangkar yang khas dan bermakna alih-alih "klik di sini".

Untuk membuat tabel yang dapat diakses, tambahkan header tabel

dan tentukan baris atau kolom menggunakan atribut scope. Selain itu, Anda dapat menggunakan atau atribut ringkasan untuk memberi pembaca layar gambaran umum singkat tentang isi tabel.

Teks alternatif memberikan informasi kontekstual gambar atau video ke perayap web dan pembaca layar. Jika gambar Anda untuk tujuan dekoratif, lebih baik biarkan tag alt kosong. Jika tidak, memberikan deskripsi rinci tentang gambar akan sangat membantu.

Dalam kebanyakan kasus, pembaca layar akan membacakan teks alt, nama file, dan atribut judul (Anda dapat melewatinya). Juga, jika Anda tidak ingin menggunakan teks alternatif atau ingin menambahkan label yang sama ke beberapa gambar, berikut ini tip singkatnya:

Sebuah bunga merah...

Anda menggunakan atribut aria-labelledby untuk merujuk ke id itu. Ini akan memungkinkan pembaca layar untuk menggunakan teks alternatif dalam bentuk paragraf itu.

CSS Standar untuk Aksesibilitas yang Lebih Baik

Menata fitur halaman yang dapat diakses berarti bahwa desain Anda harus berperilaku sesuai dengan konten inti halaman. Misalnya, untuk

,

, dan

elemen, CSS tipikal harus:

h1 {
ukuran font: 4rem;
}
hal, li {
ukuran font: 1.5rem;
warna biru;
}

Ukuran font, spasi huruf, keluarga font, dll., akan membantu dalam membaca yang nyaman. Judul harus menonjol dari teks isi (gaya default juga bagus). Selain itu, teks harus memiliki warna yang kontras dari latar belakang yang Anda pilih dengan CSS.

Menata Gaya Teks, Tautan, dan Label

Interaksi mikro dimungkinkan dengan CSS yang dapat diakses. Ini bisa sekecil menekankan teks untuk menyorot tautan dengan cara yang benar. Anda dapat menggunakan dan menandai secara khas. Anda dapat menambahkan garis bawah putus-putus menggunakan elemen.

Tautan standar harus digarisbawahi dengan warna default: biru dan tautan yang dikunjungi sebelumnya dengan warna default: ungu (Anda dapat menyesuaikannya).

Sebuah {
warna: #ff0000;
}
a: aktif {
warna: #000000;
warna-latar belakang: #a60000;
}
a: arahkan kursor, a: dikunjungi, a: fokus {
warna: #a60000;
dekorasi teks: tidak ada;
}

Jadi, dengan perubahan penunjuk tetikus, Anda harus menyorot teks yang difokuskan. Kursor penunjuk dan kerangka memainkan peran penting dalam aksesibilitas web.

Gunakan CSS untuk memberikan tampilan yang bersih pada elemen dan label formulir. Juga, putuskan status fokus/arahkan yang konsisten di sebagian besar browser. Ingatlah bahwa isyarat kecil ini membantu orang untuk memahami halaman web Anda.

Kontras Warna dan Menyembunyikan Nilai

Sesuaikan skema warna situs web sehingga warna latar depan (teks/gambar) kontras dengan warna latar belakang terutama karena lebih sulit bagi orang dengan gangguan penglihatan (mis., Buta warna) untuk membaca konten dengan baik. Anda dapat gunakan Pemeriksa Kontras Warna untuk mendapatkan skema warna yang layak sesuai dengan kriteria WCAG. Juga, coba tambahkan tanda markup (seperti tanda bintang) bersama dengan peringatan atau syarat dan ketentuan (bukan hanya tanda merah).

Pembaca layar tidak perlu khawatir sampai urutan kode sumber ditulis dengan baik. Cobalah untuk menghindari penggunaan properti display: none atau visibility: hidden karena menyembunyikan konten dari pembaca layar.

Permudah Mengganti Gaya

Poin kuncinya adalah tidak peduli seberapa baik Anda mendesain situs, pengguna memiliki berbagai alasan untuk mengganti gaya. Misalnya, mungkin ada yang menginginkan ukuran teks yang lebih besar atau ingin mengubah teks dan warna latar belakang agar mudah dibaca. Jadi area konten Anda harus dapat menanganinya sepenuhnya.

Penutup: Menggabungkan HTML dan CSS

Sekarang, Anda mengetahui dasar-dasar memulai dengan HTML semantik dan menulis kode sumber yang masuk akal dalam urutan yang benar untuk situs web yang dapat diakses. Fokus pada HTML dan lanjutkan ke pembuatan CSS yang dapat diakses setelah selesai.

Dengan menggunakan teknik di atas, Anda dapat meningkatkan pengalaman pengguna dan melayani audiens yang baik. Jadi, mulailah membuat situs web yang responsif dan mudah diakses.

Cara Membuat Website: Untuk Pemula

Hari ini saya akan memandu Anda melalui proses pembuatan website lengkap dari awal. Jangan khawatir jika ini terdengar sulit. Saya akan memandu Anda melalui setiap langkah.

Baca Selanjutnya

Tentang Penulis

Perluas untuk Membaca Cerita Lengkap