18 KiB
Membuat Halaman Web yang Dapat Diakses
Sketchnote oleh Tomomi Imura
Kuis Sebelum Kuliah
Kekuatan Web terletak pada universalitasnya. Akses oleh semua orang tanpa memandang disabilitas adalah aspek yang esensial.
- Sir Timothy Berners-Lee, Direktur W3C dan penemu World Wide Web
Kutipan ini dengan sempurna menyoroti pentingnya menciptakan situs web yang dapat diakses. Aplikasi yang tidak dapat diakses oleh semua orang secara definisi bersifat eksklusif. Sebagai pengembang web, kita harus selalu memikirkan aksesibilitas. Dengan fokus ini sejak awal, Anda akan berada di jalur yang benar untuk memastikan semua orang dapat mengakses halaman yang Anda buat. Dalam pelajaran ini, Anda akan mempelajari alat-alat yang dapat membantu memastikan aset web Anda dapat diakses dan bagaimana membangun dengan mempertimbangkan aksesibilitas.
Anda dapat mengikuti pelajaran ini di Microsoft Learn!
Alat yang Digunakan
Pembaca Layar
Salah satu alat aksesibilitas yang paling dikenal adalah pembaca layar.
Pembaca layar adalah klien yang umum digunakan oleh mereka yang memiliki gangguan penglihatan. Saat kita menghabiskan waktu untuk memastikan browser menyampaikan informasi yang ingin kita bagikan, kita juga harus memastikan pembaca layar melakukan hal yang sama.
Secara dasar, pembaca layar akan membaca halaman dari atas ke bawah secara audio. Jika halaman Anda hanya berisi teks, pembaca akan menyampaikan informasi dengan cara yang mirip dengan browser. Tentu saja, halaman web jarang hanya berisi teks; mereka akan berisi tautan, grafik, warna, dan komponen visual lainnya. Perhatian harus diberikan untuk memastikan informasi ini dibaca dengan benar oleh pembaca layar.
Setiap pengembang web harus membiasakan diri dengan pembaca layar. Seperti yang disorot di atas, ini adalah klien yang akan digunakan oleh pengguna Anda. Sama seperti Anda terbiasa dengan cara kerja browser, Anda juga harus mempelajari cara kerja pembaca layar. Untungnya, pembaca layar sudah terintegrasi di sebagian besar sistem operasi.
Beberapa browser juga memiliki alat bawaan dan ekstensi yang dapat membaca teks dengan keras atau bahkan menyediakan beberapa fitur navigasi dasar, seperti alat aksesibilitas di browser Edge. Alat-alat ini juga penting untuk aksesibilitas, tetapi berfungsi sangat berbeda dari pembaca layar dan tidak boleh disalahartikan sebagai alat pengujian pembaca layar.
✅ Cobalah pembaca layar dan pembaca teks di browser. Di Windows, Narrator sudah termasuk secara default, dan JAWS serta NVDA juga dapat diinstal. Di macOS dan iOS, VoiceOver sudah terpasang secara default.
Zoom
Alat lain yang sering digunakan oleh orang dengan gangguan penglihatan adalah fitur zoom. Jenis zoom yang paling dasar adalah zoom statis, yang dikontrol melalui Control + tanda plus (+) atau dengan menurunkan resolusi layar. Jenis zoom ini menyebabkan seluruh halaman diubah ukurannya, sehingga menggunakan desain responsif penting untuk memberikan pengalaman pengguna yang baik pada tingkat zoom yang lebih tinggi.
Jenis zoom lainnya mengandalkan perangkat lunak khusus untuk memperbesar satu area layar dan menggeser, seperti menggunakan kaca pembesar sungguhan. Di Windows, Magnifier sudah terpasang, dan ZoomText adalah perangkat lunak pembesaran pihak ketiga dengan lebih banyak fitur dan basis pengguna yang lebih besar. Baik macOS maupun iOS memiliki perangkat lunak pembesaran bawaan yang disebut Zoom.
Pemeriksa Kontras
Warna pada situs web perlu dipilih dengan hati-hati untuk memenuhi kebutuhan pengguna buta warna atau orang yang kesulitan melihat warna dengan kontras rendah.
✅ Uji situs web favorit Anda untuk penggunaan warna dengan ekstensi browser seperti pemeriksa warna WCAG. Apa yang Anda pelajari?
Lighthouse
Di area alat pengembang browser Anda, Anda akan menemukan alat Lighthouse. Alat ini penting untuk mendapatkan pandangan awal tentang aksesibilitas (serta analisis lainnya) dari sebuah situs web. Meskipun penting untuk tidak hanya mengandalkan Lighthouse, skor 100% sangat membantu sebagai dasar.
✅ Temukan Lighthouse di panel alat pengembang browser Anda dan lakukan analisis pada situs apa pun. Apa yang Anda temukan?
Merancang untuk Aksesibilitas
Aksesibilitas adalah topik yang relatif besar. Untuk membantu Anda, tersedia banyak sumber daya.
Meskipun kita tidak akan dapat mencakup setiap aspek dalam menciptakan situs yang dapat diakses, di bawah ini adalah beberapa prinsip inti yang ingin Anda terapkan. Merancang halaman yang dapat diakses sejak awal selalu lebih mudah daripada memperbaiki halaman yang sudah ada agar dapat diakses.
Prinsip Tampilan yang Baik
Palet Warna yang Aman
Orang melihat dunia dengan cara yang berbeda, termasuk dalam hal warna. Saat memilih skema warna untuk situs Anda, pastikan skema tersebut dapat diakses oleh semua orang. Salah satu alat hebat untuk menghasilkan palet warna adalah Color Safe.
✅ Identifikasi situs web yang sangat bermasalah dalam penggunaan warnanya. Mengapa?
Gunakan HTML yang Tepat
Dengan CSS dan JavaScript, dimungkinkan untuk membuat elemen apa pun terlihat seperti kontrol jenis apa pun. <span> dapat digunakan untuk membuat <button>, dan <b> dapat menjadi hyperlink. Meskipun ini mungkin dianggap lebih mudah untuk diatur gaya, ini tidak menyampaikan apa pun kepada pembaca layar. Gunakan HTML yang sesuai saat membuat kontrol pada halaman. Jika Anda ingin membuat hyperlink, gunakan <a>. Menggunakan HTML yang benar untuk kontrol yang benar disebut menggunakan Semantic HTML.
✅ Kunjungi situs web apa pun dan lihat apakah desainer dan pengembang menggunakan HTML dengan benar. Bisakah Anda menemukan tombol yang seharusnya menjadi tautan? Petunjuk: klik kanan dan pilih 'View Page Source' di browser Anda untuk melihat kode dasarnya.
Buat Hierarki Judul yang Deskriptif
Pengguna pembaca layar sangat bergantung pada judul untuk menemukan informasi dan menavigasi halaman. Menulis konten judul yang deskriptif dan menggunakan tag judul semantik penting untuk menciptakan situs yang mudah dinavigasi bagi pengguna pembaca layar.
Gunakan Petunjuk Visual yang Baik
CSS menawarkan kontrol penuh atas tampilan elemen apa pun di halaman. Anda dapat membuat kotak teks tanpa garis luar atau hyperlink tanpa garis bawah. Sayangnya, menghapus petunjuk tersebut dapat menyulitkan seseorang yang bergantung padanya untuk mengenali jenis kontrol.
Pentingnya Teks Tautan
Hyperlink adalah inti dari navigasi web. Oleh karena itu, memastikan pembaca layar dapat membaca tautan dengan benar memungkinkan semua pengguna menavigasi situs Anda.
Pembaca Layar dan Tautan
Seperti yang Anda harapkan, pembaca layar membaca teks tautan dengan cara yang sama seperti membaca teks lain di halaman. Dengan pemikiran ini, teks yang ditunjukkan di bawah ini mungkin terasa dapat diterima.
Penguin kecil, kadang-kadang dikenal sebagai penguin peri, adalah penguin terkecil di dunia. Klik di sini untuk informasi lebih lanjut.
Penguin kecil, kadang-kadang dikenal sebagai penguin peri, adalah penguin terkecil di dunia. Kunjungi https://en.wikipedia.org/wiki/Little_penguin untuk informasi lebih lanjut.
CATATAN Seperti yang akan Anda baca, Anda seharusnya tidak pernah membuat tautan seperti di atas.
Ingat, pembaca layar adalah antarmuka yang berbeda dari browser dengan serangkaian fitur yang berbeda.
Masalah dengan Menggunakan URL
Pembaca layar membaca teks. Jika URL muncul dalam teks, pembaca layar akan membaca URL tersebut. Secara umum, URL tidak menyampaikan informasi yang bermakna, dan dapat terdengar mengganggu. Anda mungkin pernah mengalaminya jika ponsel Anda pernah membaca pesan teks dengan URL secara audio.
Masalah dengan "klik di sini"
Pembaca layar juga memiliki kemampuan untuk hanya membaca hyperlink di halaman, seperti cara seseorang yang dapat melihat akan memindai halaman untuk mencari tautan. Jika teks tautan selalu "klik di sini", semua yang akan didengar pengguna adalah "klik di sini, klik di sini, klik di sini, klik di sini, klik di sini, ..." Semua tautan sekarang tidak dapat dibedakan satu sama lain.
Teks Tautan yang Baik
Teks tautan yang baik secara singkat menggambarkan apa yang ada di sisi lain tautan. Dalam contoh di atas yang membahas penguin kecil, tautan tersebut mengarah ke halaman Wikipedia tentang spesies tersebut. Frasa penguin kecil akan menjadi teks tautan yang sempurna karena ini menjelaskan dengan jelas apa yang akan dipelajari seseorang jika mereka mengklik tautan tersebut - penguin kecil.
Penguin kecil, kadang-kadang dikenal sebagai penguin peri, adalah penguin terkecil di dunia.
✅ Jelajahi web selama beberapa menit untuk menemukan halaman yang menggunakan strategi tautan yang tidak jelas. Bandingkan dengan situs lain yang memiliki tautan lebih baik. Apa yang Anda pelajari?
Catatan Mesin Pencari
Sebagai bonus tambahan untuk memastikan situs Anda dapat diakses oleh semua orang, Anda juga akan membantu mesin pencari menavigasi situs Anda. Mesin pencari menggunakan teks tautan untuk mempelajari topik halaman. Jadi menggunakan teks tautan yang baik membantu semua orang!
ARIA
Bayangkan halaman berikut:
| Produk | Deskripsi | Pesan |
|---|---|---|
| Widget | Deskripsi | Pesan |
| Super widget | Deskripsi | Pesan |
Dalam contoh ini, menduplikasi teks deskripsi dan pesan masuk akal bagi seseorang yang menggunakan browser. Namun, seseorang yang menggunakan pembaca layar hanya akan mendengar kata deskripsi dan pesan diulang tanpa konteks.
Untuk mendukung jenis skenario ini, HTML mendukung serangkaian atribut yang dikenal sebagai Accessible Rich Internet Applications (ARIA). Atribut ini memungkinkan Anda memberikan informasi tambahan kepada pembaca layar.
CATATAN: Seperti banyak aspek HTML, dukungan browser dan pembaca layar dapat bervariasi. Namun, sebagian besar klien utama mendukung atribut ARIA.
Anda dapat menggunakan aria-label untuk menjelaskan tautan ketika format halaman tidak memungkinkan Anda melakukannya. Deskripsi untuk widget dapat diatur sebagai
<a href="#" aria-label="Widget description">description</a>
✅ Secara umum, menggunakan markup Semantik seperti yang dijelaskan di atas lebih diutamakan daripada penggunaan ARIA, tetapi terkadang tidak ada padanan semantik untuk berbagai widget HTML. Contoh yang baik adalah Tree. Tidak ada padanan HTML untuk tree, jadi Anda mengidentifikasi <div> generik untuk elemen ini dengan peran dan nilai ARIA yang sesuai. Dokumentasi MDN tentang ARIA berisi informasi yang lebih berguna.
<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>
Gambar
Sudah jelas bahwa pembaca layar tidak dapat secara otomatis membaca apa yang ada dalam gambar. Memastikan gambar dapat diakses tidak memerlukan banyak usaha - itulah tujuan atribut alt. Semua gambar yang bermakna harus memiliki alt untuk menjelaskan apa yang mereka wakili.
Gambar yang hanya bersifat dekoratif harus memiliki atribut alt yang diatur ke string kosong: alt="". Ini mencegah pembaca layar mengumumkan gambar dekoratif secara tidak perlu.
✅ Seperti yang Anda duga, mesin pencari juga tidak dapat memahami apa yang ada dalam gambar. Mereka juga menggunakan teks alt. Jadi sekali lagi, memastikan halaman Anda dapat diakses memberikan bonus tambahan!
Keyboard
Beberapa pengguna tidak dapat menggunakan mouse atau trackpad, melainkan mengandalkan interaksi keyboard untuk berpindah dari satu elemen ke elemen lainnya. Penting bagi situs web Anda untuk menyajikan konten Anda dalam urutan yang logis sehingga pengguna keyboard dapat mengakses setiap elemen interaktif saat mereka bergerak ke bawah dokumen. Jika Anda membangun halaman web Anda dengan markup semantik dan menggunakan CSS untuk mengatur tata letak visualnya, situs Anda seharusnya dapat dinavigasi dengan keyboard, tetapi penting untuk menguji aspek ini secara manual. Pelajari lebih lanjut tentang strategi navigasi keyboard.
✅ Kunjungi situs web apa pun dan coba navigasikan hanya menggunakan keyboard Anda. Apa yang berhasil, apa yang tidak berhasil? Mengapa?
Ringkasan
Web yang hanya dapat diakses oleh sebagian orang bukanlah 'world-wide web' yang sesungguhnya. Cara terbaik untuk memastikan situs yang Anda buat dapat diakses adalah dengan mengintegrasikan praktik terbaik aksesibilitas sejak awal. Meskipun ada langkah tambahan yang terlibat, mengintegrasikan keterampilan ini ke dalam alur kerja Anda sekarang akan memastikan semua halaman yang Anda buat dapat diakses.
🚀 Tantangan
Ambil HTML ini dan tulis ulang agar seaksesibel mungkin, berdasarkan strategi yang telah Anda pelajari.
<!DOCTYPE html>
<html>
<head>
<title>
Example
</title>
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="site-header">
<p class="site-title">Turtle Ipsum</p>
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
</div>
<div class="main-nav">
<p class="nav-header">Resources</p>
<div class="nav-list">
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
</div>
</div>
<div class="main-content">
<div>
<p class="page-title">Welcome to Turtle Ipsum.
<a href="">Click here</a> to learn more.
</p>
<p class="article-text">
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</div>
<div class="footer">
<div class="footer-section">
<span class="button">Sign up for turtle news</span>
</div><div class="footer-section">
<p class="nav-header footer-title">
Internal Pages
</p>
<div class="nav-list">
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
</div>
</div>
<p class="footer-copyright">© 2016 Instrument</p>
</div>
</body>
</html>
Kuis Setelah Kuliah
Tinjauan & Studi Mandiri
Banyak pemerintah memiliki undang-undang terkait persyaratan aksesibilitas. Pelajari lebih lanjut tentang undang-undang aksesibilitas di negara asal Anda. Apa saja yang dicakup, dan apa yang tidak? Contohnya adalah situs web pemerintah ini.
Tugas
Analisis situs web yang tidak aksesibel
Kredit: Turtle Ipsum oleh Instrument
Penafian:
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI Co-op Translator. Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang berwenang. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemah manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.