Mengizinkan halaman Anda merespons berbagai ukuran layar hanyalah salah satu cara untuk memastikan situs Anda dapat diakses oleh sebanyak mungkin orang. Pertimbangkan beberapa faktor lain berikut yang harus Anda perhatikan.
Kekurangan penglihatan warna
Orang yang berbeda memiliki persepsi warna yang berbeda. Orang dengan protanopia tidak menganggap merah sebagai warna yang berbeda. Dengan deuteranopia, warna hijau hilang. Untuk orang dengan tritanopia, warnanya biru.
Beberapa alat dapat memberi Anda gambaran umum tentang bagaimana skema warna ditampilkan kepada orang-orang dengan berbagai jenis penglihatan warna.
Tab Aksesibilitas di Firefox menyertakan menu dropdown berlabel Simulasikan dengan daftar opsi.
Di Chrome DevTools, tab rendering memungkinkan Anda mengemulasi kekurangan penglihatan.
Alat tersebut khusus browser. Anda juga dapat mengemulasi jenis visi yang berbeda pada tingkat sistem operasi.
Di Mac, buka:
- Preferensi Sistem
- Aksesibilitas
- Display
- Filter Warna
- Mengaktifkan Filter Warna
Pilih salah satu opsi.
Secara umum, tidak baik hanya mengandalkan warna untuk membedakan antara elemen yang berbeda. Misalnya, Anda dapat—dan harus—membuat warna link yang berbeda dengan teks di sekitarnya. Namun, Anda juga harus menerapkan beberapa indikator gaya lainnya seperti menggarisbawahi link atau menebalkannya.
a { color: red; }
a { color: red; font-weight: bold; }
Kontras warna
Beberapa kombinasi warna dapat menyebabkan masalah. Jika warna latar depan dan warna latar belakang tidak cukup kontras, teks menjadi sulit dibaca. Kontras warna yang buruk adalah salah satu masalah aksesibilitas paling umum di web, tetapi untungnya, hal itu yang dapat Anda tangkap di awal proses desain.
Berikut adalah beberapa alat yang dapat Anda gunakan untuk menguji rasio kontras warna teks dan latar belakang:
- tota11y adalah bookmarklet yang dapat ditambahkan ke toolbar browser.
- VisBug adalah ekstensi browser yang tersedia untuk semua browser desktop utama.
- Pemeriksa Aksesibilitas Firefox dapat memeriksa masalah terkait kontras visual.
- Anda juga dapat menemukan dan memperbaiki teks kontras rendah dengan Chrome DevTools.
- Di browser Microsoft Edge, Anda dapat menguji kontras warna teks menggunakan pemilih warna.
Sebaiknya selalu deklarasikan color
dan background-color
secara bersamaan di CSS Anda. Jangan berasumsi bahwa warna latar belakang akan menjadi warna default browser. Pengguna dapat dan mengubah warna yang digunakan oleh browser mereka.
body { color: black; }
body { color: black; background-color: white; }
Berkontras tinggi
Beberapa orang menetapkan sistem operasi mereka untuk menggunakan mode kontras tinggi. Anda dapat mencobanya di sistem operasi Anda.
Di Mac, buka:
- Preferensi Sistem
- Aksesibilitas
- Display
Pilih opsi untuk meningkatkan kontras.
Ada fitur media untuk mendeteksi apakah seseorang sudah mengaktifkan mode kontras tinggi. Fitur media prefers-contrast
dapat dikueri untuk tiga nilai: no-preference
, less
, dan more
. Anda dapat menggunakan informasi ini untuk menyesuaikan palet warna situs Anda.
Pengguna juga dapat menyetel preferensi dalam sistem operasi mereka untuk menggunakan warna terbalik.
Di Mac, buka:
- Preferensi Sistem
- Aksesibilitas
- Display
Pilih opsi untuk melakukan inversi warna.
Pastikan situs Anda tetap masuk akal bagi seseorang yang menjelajah dengan warna terbalik. Hati-hati dengan bayangan kotak—bayangan ini mungkin perlu disesuaikan ketika warna diinversi.
Ukuran font
Warna bukan satu-satunya hal yang dapat disesuaikan orang di browser mereka, mereka juga dapat menyesuaikan ukuran font default. Ketika penglihatan mereka menurun, mereka mungkin menyesuaikan ukuran font {i>default<i} di {i>browser<i} atau sistem operasi mereka, dan kemudian meningkatkan jumlahnya.
Anda dapat merespons setelan ini menggunakan ukuran font relatif. Hindari penggunaan unit seperti px
. Sebagai gantinya, gunakan unit relatif seperti rem
atau ch
.
Coba ubah setelan ukuran teks default di browser Anda. Anda dapat melakukannya di preferensi browser. Atau, Anda dapat melakukannya saat Anda mengunjungi halaman web dengan memperbesarnya. Apakah situs Anda masih berfungsi jika ukuran font default ditingkatkan 200%? Bagaimana kalau 400%?
Seseorang yang mengunjungi situs Anda menggunakan komputer desktop yang ukuran fontnya dinaikkan hingga 400% akan memiliki tata letak yang sama seperti seseorang yang mengunjungi situs Anda di perangkat layar kecil.
Navigasi keyboard
Tidak semua orang menggunakan mouse atau trackpad untuk menavigasi laman web. Keyboard adalah cara lain untuk menjelajahi halaman, dengan tombol tab
yang sangat berguna. Pengguna dapat dengan cepat berpindah dari satu link atau kolom formulir ke link atau kolom berikutnya.
Link yang diberi gaya dengan class semu :hover
dan :focus
akan menampilkan gaya tersebut terlepas dari apakah seseorang menggunakan mouse, trackpad, atau keyboard. Gunakan class semu :focus-visible
untuk menata gaya link Anda hanya untuk navigasi keyboard. Anda dapat membuat gaya tersebut lebih terlihat.
a:focus,
a:hover {
outline: 1px dotted;
}
a:focus-visible {
outline: 3px solid;
}
Saat pengguna melakukan tab dari tautan ke tautan atau bidang formulir ke bidang formulir, elemen-elemen tersebut akan difokuskan sesuai urutan kemunculannya dalam struktur dokumen. Urutan ini juga harus sesuai dengan urutan visualnya.
Berhati-hatilah dengan properti order
CSS. Anda dapat menggunakannya bersama dengan {i>flexbox<i} dan {i>grid<i} untuk menempatkan elemen dalam urutan visual yang berbeda dengan urutannya di HTML. Fitur ini sangat canggih, tetapi dapat membingungkan pengguna saat menggunakan keyboard.
Uji halaman web Anda dengan menggunakan tombol tab
pada keyboard untuk memastikan urutan tab sesuai.
Di panel Aksesibilitas alat developer browser Firefox, ada opsi untuk Tampilkan Urutan Tabbing. Mengaktifkannya akan menempatkan angka pada setiap elemen yang dapat difokuskan.
Gerakan dikurangi
Animasi dan gerakan adalah cara yang sangat bagus untuk mewujudkan desain web. Tetapi bagi sebagian orang, gerakan ini bisa sangat membingungkan dan bahkan menyebabkan mual.
Ada kueri fitur yang menyampaikan apakah pengguna lebih menyukai gerakan yang lebih sedikit. Namanya prefers-reduced-motion
. Sertakan di mana pun Anda menggunakan transisi atau animasi CSS.
a:hover {
transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
}
Kueri media prefers-reduced-motion
khusus untuk gerakan di layar. Jika Anda menggunakan transisi pada warna elemen yang seharusnya tidak terpengaruh oleh prefers-reduced-motion
. Anda juga dapat menggunakan opasitas transisi dan memudar bersilang. Gerakan yang dikurangi bukan berarti tidak ada animasi.
Suara
Orang merasakan web secara berbeda. Tidak semua orang melihat situs Anda di layar. Teknologi pendukung seperti pembaca layar mengonversi output informasi ke layar menjadi kata-kata yang diucapkan.
{i>Screen reader<i} berfungsi dengan semua jenis aplikasi, termasuk {i>browser<i} web. Agar {i>browser<i} web dapat berkomunikasi secara bermanfaat dengan {i>screen reader<i}, perlu ada informasi semantik yang berguna di laman web yang sedang diakses.
Sebelumnya, Anda telah mempelajari bagaimana tombol khusus ikon harus menyertakan atribut untuk menentukan tujuan tombol bagi pengguna yang tidak melihat. Ini hanya salah satu contoh tentang pentingnya HTML dasar yang kuat.
Judul
Gunakan judul seperti <h1>
, <h2>
, <h3>
, dll. dengan bijak. {i>Screen reader<i} menggunakan {i>heading<i} ini untuk membuat garis besar dokumen Anda yang dapat dinavigasi dengan pintasan keyboard.
<div class="heading-main">Welcome to my page</div> <div class="heading-secondary">About me</div> <div class="heading-tertiary">My childhood</div> <div class="heading-secondary">About this website</div> <div class="heading-tertiary">How this site was built</div>
<h1>Welcome to my page</h1> <h2>About me</h2> <h3>My childhood</h3> <h2>About this website</h2> <h3>How this site was built</h3>
Struktur
Gunakan elemen tempat terkenal seperti <main>
, <nav>
, <aside>
, <header>
, dan <footer>
untuk menyusun konten halaman Anda. Pengguna pembaca layar dapat langsung melompat ke bangunan terkenal ini.
<div class="header">...</div> <div class="navigation">...</div> <div class="maincontent">...</div> <div class="sidebar">...</div> <div class="footer">...</div>
<header>...</header> <nav>...</nav> <main>...</main> <aside>...</aside> <footer>...</footer>
Formulir
Pastikan setiap kolom formulir memiliki elemen <label>
terkait. Anda dapat mengaitkan label dengan kolom formulir menggunakan atribut for
pada elemen <label>
dan atribut id
yang sesuai di kolom formulir.
<span class="formlabel">Your name</span> <input type="text">
<label for="name">Your name</label> <input id="name" type="text">
Gambar
Selalu berikan deskripsi teks untuk gambar menggunakan atribut alt
.
<img src="dog.jpg">
<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">
Jika gambar hanya berupa presentasi, Anda tetap harus menyertakan atribut alt
, tetapi dapat memberinya nilai kosong.
<img src="texture.png">
<img src="texture.png" alt="">
Jake Archibald memublikasikan artikel tentang menulis teks alt
yang bagus.
Link
Coba berikan teks deskriptif dalam link. Hindari menggunakan frasa seperti "klik di sini" atau "lainnya".
<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>
<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>
ARIA
Menggunakan HTML semantik yang masuk akal akan membuat laman web Anda lebih mudah diakses oleh teknologi alat bantu seperti pembaca layar dan juga ke keluaran audio lain seperti asisten suara.
Beberapa widget antarmuka yang tidak memiliki elemen HTML yang sesuai: carousel, tab, akordeon, dan sebagainya. Semuanya harus dibuat dari awal dengan kombinasi HTML, CSS, JavaScript, dan ARIA.
ARIA adalah singkatan dari Accessible Rich Internet Applications. Kosakatanya memungkinkan Anda memberikan informasi semantik jika tidak ada elemen HTML yang sesuai yang tersedia.
Jika Anda perlu membuat elemen antarmuka yang belum tersedia sebagai elemen HTML, biasakan diri Anda dengan ARIA.
Semakin banyak fungsi khusus yang Anda tambahkan dengan JavaScript, semakin Anda perlu memahami ARIA. Jika Anda tetap menggunakan elemen HTML asli, Anda mungkin tidak memerlukan ARIA.
Jika memungkinkan, uji dengan pengguna pembaca layar yang sebenarnya. Hal ini tidak hanya akan memberi Anda pemahaman yang lebih baik tentang bagaimana mereka menavigasi web, tetapi juga akan menghilangkan tebak-tebakan dalam mendesain dengan mempertimbangkan aksesibilitas.
Menguji dengan orang-orang yang sebenarnya adalah cara yang bagus untuk mengungkap asumsi yang mungkin Anda buat. Dalam modul berikutnya, Anda akan belajar tentang berbagai cara orang berinteraksi dengan {i>website<i} Anda—area lain di mana membuat asumsi terlalu mudah.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang aksesibilitas
Dengan CSS, developer dapat menimpa preferensi pengguna seperti ukuran font, dalam hal terburuk?
body { font-size: 12px; }
sudah cukup.Untuk menghindari menimpa preferensi ukuran {i>font<i} pengguna, gunakan?
px
.rem
.Semua orang di seluruh dunia menggunakan {i>mouse<i}.
Apa yang terjadi jika gambar dengan atribut alt kosong?