Aksesibilitas

Memungkinkan halaman Anda merespons berbagai ukuran layar hanyalah salah satu cara untuk memastikan situs Anda dapat diakses oleh sebanyak mungkin orang. Pertimbangkan beberapa faktor lain yang harus Anda perhatikan.

Gangguan penglihatan warna

Orang yang berbeda mempersepsikan warna secara berbeda. Orang dengan protanopia tidak melihat merah sebagai warna yang berbeda. Dengan deuteranopia, warna hijau tidak ada. Bagi penderita tritanopia, warnanya biru.

Beberapa alat dapat memberi Anda gambaran umum tentang tampilan skema warna Anda bagi orang-orang dengan berbagai jenis penglihatan warna.

Tab Aksesibilitas Firefox menyertakan drop-down berlabel Simulasikan dengan daftar opsi.

Di Chrome DevTools, tab rendering memungkinkan Anda menyimulasikan gangguan penglihatan.

Itu adalah alat khusus browser. Anda juga dapat mengemulasikan berbagai jenis penglihatan di tingkat sistem operasi.

Di Mac, buka:

1. Preferensi Sistem
2. Aksesibilitas
3. Display
4. Filter Warna
5. Mengaktifkan Filter Warna

Pilih salah satu opsi.

Secara umum, sebaiknya jangan hanya mengandalkan warna untuk membedakan elemen yang berbeda. Misalnya, Anda dapat—dan harus—membuat link Anda memiliki warna yang berbeda dengan teks di sekitarnya. Namun, Anda juga harus menerapkan beberapa indikator gaya lainnya seperti menggarisbawahi atau menebalkan tautan.

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

Kontras warna

Beberapa kombinasi warna dapat menimbulkan masalah. Jika tidak ada cukup kontras antara warna latar depan dan warna latar belakang, teks akan sulit dibaca. Kontras warna yang buruk adalah salah satu masalah aksesibilitas paling umum di web, tetapi untungnya, masalah ini dapat Anda temukan sejak awal dalam proses desain.

Berikut beberapa alat yang dapat Anda gunakan untuk menguji rasio kontras warna teks dan latar belakang:

• 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 Edge Microsoft, Anda dapat menguji kontras warna teks menggunakan pemilih warna.

Sebaiknya selalu deklarasikan color dan background-color bersama-sama di CSS Anda. Jangan menganggap bahwa warna latar belakang akan menjadi default browser. Pengguna dapat dan memang mengubah warna yang digunakan oleh browser mereka.

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

Kontras tinggi

Beberapa orang menyetel sistem operasi mereka untuk menggunakan mode kontras tinggi. Anda dapat mencobanya di sistem operasi Anda.

Di Mac, buka:

1. Preferensi Sistem
2. Aksesibilitas
3. Display

Pilih opsi untuk meningkatkan kontras.

Ada fitur media untuk mendeteksi apakah seseorang telah 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.

Orang-orang juga dapat menyetel preferensi di sistem operasi mereka untuk menggunakan warna terbalik.

Di Mac, buka:

1. Preferensi Sistem
2. Aksesibilitas
3. Display

Pilih opsi untuk membalikkan warna.

Pastikan situs Anda tetap masuk akal bagi seseorang yang menjelajah dengan warna terbalik. Perhatikan bayangan kotak—bayangan ini mungkin perlu disesuaikan saat warna dibalik.

Ukuran font

Warna bukan satu-satunya hal yang dapat disesuaikan orang di browser mereka, mereka juga dapat menyesuaikan ukuran font default. Seiring menurunnya penglihatan mereka, mereka mungkin menyesuaikan ukuran font default di browser atau sistem operasi mereka, sehingga ukuran font akan bertambah seiring berjalannya waktu.

Anda dapat merespons setelan ini dengan menggunakan ukuran font relatif. Hindari penggunaan satuan 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 membuka halaman web dengan memperbesar tampilan. Apakah situs Anda masih berfungsi jika ukuran font default diperbesar 200%? Bagaimana dengan 400%?

Seseorang yang membuka situs Anda di komputer desktop dengan ukuran font yang diperbesar hingga 400% akan mendapatkan tata letak yang sama dengan seseorang yang membuka situs Anda di perangkat layar kecil.

Navigasi keyboard

Tidak semua orang menggunakan mouse atau trackpad untuk menavigasi halaman web. Keyboard adalah cara lain untuk menjelajahi halaman, dengan tombol tab yang sangat berguna. Pengguna dapat berpindah dengan cepat dari satu link atau kolom formulir ke link atau kolom formulir berikutnya.

Link yang diberi gaya dengan pseudo-class :hover dan :focus,akan menampilkan gaya tersebut terlepas dari apakah seseorang menggunakan mouse, trackpad, atau keyboard. Gunakan pseudo-class :focus-visible untuk menata gaya link 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 berpindah dari link ke link atau dari kolom formulir ke kolom formulir, elemen tersebut akan difokuskan sesuai urutan kemunculannya dalam struktur dokumen. Urutan ini juga harus sesuai dengan urutan visual.

Berhati-hatilah dengan properti CSS order. Anda dapat menggunakan ini bersama dengan flexbox dan petak untuk menempatkan elemen dalam urutan visual yang berbeda dengan urutannya dalam HTML. Fitur ini sangat berguna, tetapi dapat membingungkan orang yang menavigasi dengan keyboard.

Uji halaman web Anda dengan menggunakan tombol tab di keyboard untuk memastikan urutan tab masuk akal.

Di panel Aksesibilitas pada alat developer browser Firefox, ada opsi untuk Tampilkan Urutan Tab. Mengaktifkan opsi ini akan menampilkan angka di setiap elemen yang dapat difokuskan.

Pengurangan gerakan

Animasi dan gerakan adalah cara yang bagus untuk menghidupkan desain web. Namun, bagi sebagian orang, gerakan ini dapat sangat membingungkan dan bahkan menyebabkan mual.

Ada kueri fitur yang mengomunikasikan apakah pengguna lebih memilih gerakan yang lebih sedikit. Fitur ini disebut 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 melakukan transisi opasitas dan cross-fade. Pengurangan gerakan tidak berarti tidak ada animasi.

Suara

Orang-orang mengalami 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.

Pembaca layar berfungsi dengan semua jenis aplikasi, termasuk browser web. Agar browser web dapat berkomunikasi secara efektif dengan pembaca layar, harus ada informasi semantik yang berguna di halaman web yang diakses.

Sebelumnya, Anda telah mempelajari cara tombol hanya ikon harus menyertakan atribut untuk menentukan tujuan tombol bagi pengguna yang tidak dapat melihat. Ini hanyalah salah satu contoh pentingnya HTML dasar yang kuat.

Judul

Gunakan heading seperti <h1>, <h2>, <h3>, dll. dengan bijak. Pembaca layar menggunakan heading ini untuk membuat struktur dokumen Anda yang dapat dijelajahi 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 penanda seperti <main>, <nav>, <aside>, <header>, dan <footer> untuk menyusun konten halaman Anda. Pengguna pembaca layar kemudian dapat langsung membuka penanda 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 pada 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 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 untuk presentasi, Anda tetap harus menyertakan atribut alt, tetapi Anda dapat memberikan 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 penggunaan 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 halaman web Anda lebih mudah diakses oleh teknologi pendukung seperti pembaca layar dan juga output audio lainnya seperti asisten suara.

Beberapa widget antarmuka yang tidak memiliki elemen HTML yang sesuai, termasuk carousel, tab, dan akordeon. Komponen tersebut 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.

Jika Anda perlu membuat elemen antarmuka yang belum tersedia sebagai elemen HTML, pelajari ARIA.

Semakin banyak fungsi khusus yang Anda tambahkan dengan JavaScript, semakin Anda perlu memahami ARIA. Jika Anda menggunakan elemen HTML standar, Anda mungkin tidak memerlukan ARIA.

Jika memungkinkan, lakukan pengujian dengan pengguna pembaca layar sungguhan. Cara ini tidak hanya akan memberi Anda pemahaman yang lebih baik tentang cara mereka menjelajahi web, tetapi juga akan menghilangkan spekulasi dalam mendesain dengan mempertimbangkan aksesibilitas.

Menguji dengan orang sungguhan adalah cara yang bagus untuk mengungkap asumsi apa pun yang mungkin Anda buat. Pada modul berikutnya, Anda akan mempelajari berbagai cara orang berinteraksi dengan situs Anda—area lain yang sangat mudah membuat asumsi.

Uji pemahaman Anda

Uji pengetahuan Anda tentang aksesibilitas