Aksesibilitas

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:

1. Preferensi Sistem
2. Aksesibilitas
3. Display
4. Filter Warna
5. 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:

1. Preferensi Sistem
2. Aksesibilitas
3. 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:

1. Preferensi Sistem
2. Aksesibilitas
3. 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