KontenWeb: Accessibility

Cara Menggunakan Aria (Atribut HTML) - Secara garis besar aria merupakan sejumlah mekanisme yang dikembangkan oleh W3C untuk menambahkan label dan keterangan pada elemen html, menambahkan bantuan teks keterangan yang bisa diakses dengan tujuan membangun pohon aksesibilitas halaman web yang lebih ramah kepada pengguna. Tidak sampai disitu saja atribut aria juga dapat digunakan untuk membuat span tersembunyi pada suatu elemen html dan mengidentifikasi secara eksplisit elemen tersebut sehingga pembaca layar dapat menafsirkannya dengan benar.

Sekarang mari kita simak dasar-dasar cara penggunaan dan penerapan atribut aria pada html berikut ini;

Aria-label

Pada elemen html asli dan semantik bawaan, aria-label adalah aribut yang sama dengan atribut title, keduanya sama-sama dapat saling menggantikan satu sama lain. tetapi jika kamu ingin memunculkan isi label (teks bantu aria-label) ke permukaan maka dibutuhkan sedikit sentuhan css sehingga pengguna dapat melihatnya.

Contoh:
[code]<a href="https://www.blogger.com/" aria-label="Hi, link ini akan mengalihkan anda kehalaman blogger">Blogger</a>[/code]
Css Aria-label
[code type="CSS"][aria-label]:after{content:attr(aria-label);display:none;position:absolute;bottom: 120%;left:10px;pointer-events: none;padding:8px 10px;line-height:15px;white-space:nowrap;text-decoration:none;text-indent:0;overflow:visible;font-weight: normal;color:#3a3838;z-index:9999;background-color:#fff;border:1px solid #c1bfbf;border-bottom:2px solid #008066;-webkit-box-shadow:2px -3px 10px rgba(0,0,1);box-shadow:2px -3px 10px rgba(0,0,1)}
[aria-label]:hover:after,[aria-label]:focus:after{
display: block;}[/code]
Jika dilihat pada halaman yang nyata maka elemen <a> akan terlihat seperti gambar dibawah ini ketika pengguna mengarahkan mouse ke element tersebut.
Berbeda dengan atribut title="teks" yang tidak membutuhkan css untuk menampilkan teks bantu, tetapi dalam membangun pohon aksesibilitas atribut aria lebih efektif untuk memodifikasi cara elemen diterjemahkan. Secara umum aria-label digunakan pada elemen <a>, <input>, <img> dan <button>.

Aria-label dan Role="img"

Gambar Tunggal:
[code]<img src="image.png" aria-label="teks deskripsi" alt="alternatif teks"/>[/code]
Group:
[code]<div role="img" aria-label="deskripsi elemen">
  <img src="image.png" alt="alternatif teks"/>
  <img src="image.png" alt="alternatif teks"/>
  <img src="image.png" alt="alternatif teks"/>
</div>[/code]
Atau kamu dapat menggunakan aria-labelledby untuk melabeli elemen gabungan seperti atas, aria-labelledby memungkinkan kita menetapkan ID elemen lain dalam DOM sebagai label elemen. ini masih sama dengan penggunaan elemen label atau aria-label, kelebihannya aria-labelledby dapat digunakan pada sembarang elemen tidak hanya pada elemen yang bisa diberi label seperti yang dijelaskan pada bagian aria-label di paragraf atas bahkan lebih diutamakan dari atribut apapun yang ada pada elemen tersebut.

Untuk mendalami atribut aria pada html secara khusus kamu perlu melihat spesifikasi atribut aria di situs resmi aria yaitu w3.org.

Cara Meningkatkan Aksesibilitas Situs Web - Selain SEO, Aksesibilitas juga merupakan salah satu faktor kesuksesan situs web, meskipun secara garis besar aksesibilitas sebenarnya ditujukan untuk kemudahan akses pengguna, memaksimalkan ketersediaan situs dan kemudahan jangkauan kepada audiens yang lebih luas dengan disabilitas yang beragam.

Ada banyak alasan kenapa harus meningkatkan aksesibilitas situs web, tapi yang lebih logis bagi anda mungkin adalah masalah keterlihatan konten, audiens dengan penglihatan yang normal mungkin bisa menjangkau semua elemen di situs web, tetapi bagi mereka yang memiliki penglihatan yang kurang mungkin akan kesulitan menjangkau elemen yang tidak memiliki standar ukuran normal dan rasio kontras yang sangat rendah.

Maka dari itu inisiatif aksesibilitas menjadi sangat penting untuk diperhatikan dan dipertimbangkan sebaik-baiknya, dan berikut saya sajikan kiat-kiat meningkatkan aksesibilitas situs web.

01: Desain Responsive

Pastikan halaman web memiliki lebar dan nilai pixel css yang dapat secara otomatis menyesuaikan di banyak ukuran layar atau device (wajib).

02: Font Size (Ukuran Font)

Selain desain responsive font-size atau ukuran font adalah hal pertama yang harus dipertimbangkan untuk meningkatkan aksesibilitas website sehingga konten dapat dijangkau dengan mudah oleh banyak orang. Ukuran minimal font di situs web seharusnya tidak kurang dari 12px dan ukuran ideal font konten sebaiknya memiliki nilai sekitar 15 hingga 18px.

Tidak tanggung-tanggung, sakin pedulinya dengan standarisasi font web, lighthouse mengkategorikan masalah ini ke kategori SEO.

Praktek terbaik
  • Sedikitnya 60% teks pada halaman web harus memiliki nialai tidak kurang dari 12px, jika lebih kecil dari 12px biasanya teks akan sulit terbaca di perangkat seluler.
  • Bedakan antara teks bisa dengan anchor teks atau teks link dengan huruf tebal.

03: Meta Viewport

Pertama, pastikan halaman memiliki meta viewport dan menggunakan menggunakan tag meta viewport dengan benar.
[code]<meta content='width=device-width,initial-scale=1.0' name='viewport'/>[/code]
Praktek Terbaik

Hindari pengguanaan user-scalable="no" dan maximum-scale"1.0" pada meta viewport, karena itu akan menonaktifkan fitur pembesaran layar, sehingga pengguna tidak dapat mencubit layar untuk melihat konten halaman web dengan ukuran yang lebih kecil.

04: Rasio Kontras Foreground dan Background Yang Ideal

Rasio kontras foreground dan background yang tidak ideal atau kurang dari 4,5: 1 biasanya akan sering terlewatkan, hal itu dikarenakan rasio kontras warna teks (foreground) dan background yang kurang dari 4,5: 1 akan menjadi samar sehingga sulit terbaca.

Masalah ini sebenarnya sudah jelaskan pada artikel sebelumnya, tentang bagaiman mengatur rasio kontras foreground dan background dengan baik dan benar dan sesuai dengan pedoman WCAG (Web Content Accessibility Guidelines). Kamu mungkin perlu melihatnya pada tautan ini; WebPage Contrast Ratio.

05: Size Tap Targets

Kiat kelima untuk meningkatkan aksesibilitas situs web adalah dengan menetapkan ukuran ketuk elemen situs yang bisa di klik agar sesuai dengan ukuran jari seseoarang, atau setidaknya tidak kurang area ketuk 48 x 48px.

Jika elemen yang bisa di klik tidak memiliki nilai width dan height, kamu bisa menggunakan padding dan margin untuk membawa elemen ke area ketuk 48 x 48px. Lihat panduan untuk menyesuaikan size tap target. Selain meningkatkan aksesibilitas, size tap targets juga merupakan salah satu faktor SEO halaman web.

06: Teks Bantu (Atribut Title)

Gunakan atribut title atau atribut aria-label pada elemen non-teks seperti, gambar, tombol, elemen input dan sebagainya yang mendukung atribut title maupun atribut aria-label, hal itu akan sangat membantu pengguna memahami setiap elemen yang ada di situs web.
Menambahkan Teks Bantu Dengan Atribut Title
Menambahkan Teks Bantu Dengan Atribut Title

07. Gunakan Teks Alternatif

Alternatif teks perlu di tambahkan pada elemen gambar agar situs dapat divalidasi dengan baik, tidak hanya tujuan aksesibilitas, alternatif teks juga digunakan oleh mesin pencari untuk mengambil informasi halaman karena crawler tidak bisa membaca gambar.

Tidak hanya itu, teknologi seperti pembaca layar juga memanfaatkan teks alternatif untuk membacanya dengan keras kepada pengguna atau ketika gambar dinonaktifkan oleh pengguna teks alternatif akan ditampilkan sebagai gantinya.

08: Accesskey (Pintasan Keyboard Situs Web)

Tambahkan fitur pintasan keyboard di situs web, fitur aksesibilitas memang kurang atau tidak sering digunakan oleh pengguna, tetapi dalam keadaan tertentu mereka akan memerlukan atau menggunakan fitur accesskey (pintasan keyboard situs web) ini.

Kamu dapat mengambil referensi dari artikel dalam tautan ini (accesskey) untuk membuat/menambahkan pintasan keyboard di situs web.

Sedikitnya ada 30 lebih kiat meningkatkan aksesibilitas situs web, tetapi yang paling mendominasi adalah seperti yang telah saya jelaskan diatas, jika kamu ingin mempelajari lebih lanjut mengenai pohon aksesibilitas, kamu dapat mempelajarinya di situs w3c atau lebih sederhananya belajarlah mengaudit situs anda dengan alat open source lighthouse, disana kamu akan dikenalkan hal-hal apa saja yang mempengaruhi aksesibilitas situs web.

Optimalisasi Aksesibilitas Elemen Tabel HTML - Apa yang dimaskud dengan optimalisasi aksesibilitas elemen tabel html? Yang dimaksud dengan optimalisasi aksesibilitas elemen tabel (table) html adalah mengoptimalkan penggunaan atribut yang seharusnya ada pada table html seperti caption, row, column dll untuk mendefenisikan elemen tabel secara jelas kepada pengguna.

Sebagai contoh, sebagian besar pengguna mungkin memanfaatkan teknologi pembaca layar ketika mengakses halaman web anda, jika pada elemen tabel tidak terdapat atribut aksesibilitas seperti yang saya maksudkan diatas, maka pembaca layar tidak dapat mendefenisikan atau menyuarakan tabel data dengan baik kepada pengguna sehingga terkesan membingungkan.

Saya telah memperhatikan banyak situs web yang tidak peduli dengan accessibility website mereka, padahal terkadang pengunjung situs web sebagian kecilnya adalah orang dengan kebutuhan khusus.

Maka dari itu, sekarang pada artikel ini saya akan menjelaskan bagaimana seharusnya membuat table html agar memiliki aksesibilitas yang baik karena ini sangat berguna untuk semua kalangan pengguna.

Properti Wajib Table HTML

  • Elemen <table> html harus mengandung caption dan vealue yang mendefenisikan isi table data
  • Elemen <th> harus memiliki atribut scope
  • Semua elemen <th> dan elemen dengan role="columnheader" atau role="rowheader" harus memiliki sel data atau value yang terkait.

Praktek Terbaik

  • Elemen <th> tidak boleh menggunakan atribut header
  • Elemen <th> seharusnya hanya digunakan ketika ada satu baris dan satu kolom header
  • Elemen <th> pada header teble atau thead harus memiliki atribut scope="col"
  • Elemen <th> pada body table tbody harus memiliki atribut scope="row"
Perharikan contoh berikut ini;

Dari struktur html tabel diatas akan terlihat sperti berikut ini;
[code type="HTML"]<table class="data">
<caption>Greensprings Running Club Personal Bests</caption>
<thead>
 <tr><th scope="col">Name</th><th scope="col">1 mile</th><th scope="col">5 km</th><th scope="col">10 km</th></tr>
  </thead>
  <tbody>
 <tr><th scope="row">Mary</th><td>8:32</td><td>28:04</td><td>&nbsp;</td></tr>
 <tr><th scope="row">Betsy</th><td>7:43</td><td>26:47</td><td>&nbsp;</td></tr>
 <tr><th scope="row">Matt</th><td>7:55</td><td>27:29</td><td>&nbsp;</td></tr>
 <tr><th scope="row">Todd</th><td>7:01</td><td>24:21</td><td>&nbsp;</td></tr>
  </tbody>
</table>[/code]
Struktur elemen tabel tersebut sudah mengikuti kriteria pohon aksesibilitas dan ketentuan struktur html table data yang sebenarnya, tetapi saya menciptakan kekeliruan kecil disana, harus nya jika tidak ada data yang dilampirkan, elemen setidaknya berisi value misalnya; no data atau empty seperti berikut ini;
[code type="HTML"]<table class="data">
<caption>Teks Table Caption Disini </caption>
<thead>
 <tr><th scope="col">Name</th><th scope="col">1 mile</th><th scope="col">5 km</th><th scope="col">10 km</th></tr>
  </thead>
  <tbody>
 <tr><th scope="row">Mary</th><td>8:32</td><td>28:04</td><td>empty</td></tr>
 <tr><th scope="row">Betsy</th><td>7:43</td><td>26:47</td><td>empty</td></tr>
 <tr><th scope="row">Matt</th><td>7:55</td><td>27:29</td><td>no data</td></tr>
 <tr><th scope="row">Todd</th><td>7:01</td><td>24:21</td><td>empty</td></tr>
  </tbody>
</table>[/code]
Demikian saja artikel tentang pohon aksesibilitas yaitu "Optimalisasi Aksesibilitas Elemen Tabel HTML, Ada banyak faktor yang mempengaruhi pohon aksesibilitas situs web, jika kamu masih berkenan belajar lebih banyak tentang aksesibilitas silahkan lihat disini.

Menentukan Ukuran Tap Target Yang Ideal di Website Seluler - Apa yang dimaksud dengan tap target? Tap targets adalah area ketuk elemen interaktif situs web yang dapat diklik seperti tombol dan link, ukuran atau size tap target situs web yang ideal pada layar seluler adalah 48 x 48px, ketetapan size tap target tersebut sudah di perhitungkan oleh para ahli agar elemen interaktif pada halaman web cukup besar dan memiliki cukup ruang di sekitarnya, mudah untuk diklik tanpa tumpang tindih dengan elemen lain.

Ukuran tap target atau target sentuh minimum yang disarankan adalah sekitar 48 piksel di situs seluler dengan jarak pandang "viewport" yang ditetapkan dengan benar. Misalnya, meskipun sebuah ikon hanya memiliki lebar dan tinggi 24px, kamu dapat menggunakan bantalan tambahan seperti margin dan padding untuk membawa ukuran tap target ke 48px sehingga sesuai dengan area jari seseorang.
Sekarang bagaimana cara mengidentifikasi size tap target website? Untuk mengidentifikasi atau mengetahui size tap tab target website yang sudah ada, kita membutuhkan alat yang mampu dan terpercaya mengaudit situs web yaitu Lighthouse, kamu dapat menggunakan ekstensi Lighthouse Chrome atau bisa juga dengan menggunakan tool open source web.dev measure.
  1. Kunjungi https://web.dev/measure
  2. Tempelkan url situs, dan
  3. Klik Jalankan Audit, kemudian
  4. Setelah audit selesai dijalankan klik View Report untuk melihat laporan lengkap
Pada bagian bawah hasil laporan, di kategori SEO kamu dapat melihat apakah setiap elemen "tap targets" di situs anda 100% lulus audit atau tidak, jika tidak kamu juga dapat melihat secara rinci elemen interaktif mana saja yang tidak memenuhi syarat atau tidak memiliki ukuran yang tepat (tidak ideal).
Tap targets are not sized appropriately
Tap targets are not sized appropriately
Setelah mengetahui elemen interaktif mana saja yang tidak memiliki area ketuk yang sesuai maka akan lebih mudah untuk memperbaikinya (membuat ukuran tap target ke area 48px).

Contoh Memperbaiki Tap Target

Sebelum diperbaiki pengaturan pada css label di situs blog saya borisinil.blogspot.com adalah sebagai berikut.
[code type="CSS"].cloud-label-widget-content{text-align:left;overflow:hidden;}
.cloud-label-widget-content .label-size{float:left;display:block;padding:4px 5px;margin-right:2px;margin-bottom:2px;background-color:#008066;color:#fafafa;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
.cloud-label-widget-content .label-size a{color:#fafafa}
.cloud-label-widget-content .label-size:hover{background-color:#202020;}
.cloud-label-widget-content .label-size:active{top:1px;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;}[/code]
Karena pada css tombol cloud label tidak memiliki atribut height dan width maka untuk mencapai ukuran tap target hingga ke 48px saya menggunakan atau menambah nilai padding dan margin agar tombol menjadi lebih luas dan memiliki jarak 48px antar elemen interaktif (tombol cloud label).
[code type="CSS"].cloud-label-widget-content{text-align:left;overflow:hidden}
.cloud-label-widget-content .label-size{float:left;display:block;padding:5px;margin-right:3px;margin-bottom:3px;background-color:#008066;color:#fafafa;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}
.cloud-label-widget-content .label-size a{color:#fafafa}
.cloud-label-widget-content .label-size:hover{background-color:#202020}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%}[/code]

Memperbaiki Size Tap Target di Halaman Post

Pada halaman post (artikel), kesalahan ukuran tab target juga bisa saja terjadi, ada beberapa hal yang menjadi penyebabnya diantaranya adalah penyematan tautan link yang terlalu rapat dan antar baris teks tidak cukup tinggi atau line-height kurang dari 1.5em.

Jadi untuk mengatasi miss tap target halaman post pastikan post-body memiliki nilai tinggi baris (line-height) tidak kurang dari 1.5em dan hindari penyematan tautan yang terlalu rapat.

Saya fikir sampai disini saja penjelasan saya mengenai ukuran tap target yang ideal di website seluler, saya harap artikel ini sedikit dapat membantu anda dalam meningkatkan aksesibilitas dan SEO website seluler khusus nya menentukan ukuran tap target dengan tepat (mancapai area ketuk hingga 48px).

Cara Membuat Access Key (Keyboard Shortcuts Website) - Apa itu access key? Access key merupakan navigasi situs web melalui pintasan keyboard, bertujuan untuk memungkinkan pengguna menavigasi halaman dengan menggunakan pintasan keyboard (keyboard shortcuts). Selain itu menambahkan atau membuat accesskey di situs web juga bertujuan untuk meningkatkan aksesibilitas halaman situs web itu sendiri.

Contoh:

Halaman atau situs blog KontenWeb sudah dilengkapi dengan beberapa accesskey (pintasan keyboard), untuk melihat bagaimana kinerja accesskey yang admin terapkan silahkan tekan tombol Alt + P untuk Previous (ke halaman sebelumnya) atau tekan tombol Alt + N untuk Next (halaman selanjutnya) dan Alt + H untuk kembali ke Beranda situs (home) jika kamu menggunakan browser chrome, safari dan opera +15.

Jika menggunkan browser Firefox tekan tombol Alt + Shift + P untuk Previous, Alt + Shift + N untuk Next dan Alt + Shift + H untuk (Home).

Penggunaan accesskey website memang tidak begitu populer dikalangan pengguna, akan tetapi kita perlu menerapkan ini di beberapa bagian elemen guna meningkatkan aksesibilitas situs web yang kita kelola.

Cara Membuat Keyboard Shortcut Website

Sederhana, untuk membuat pintasan keyboard (accesskey) di halaman web kita hanya perlu menambahkan atribut accesskey="key" pada elemen link (<a>) dan elemen tombol (<button>) seperti contoh dibawah ini;
[code]<a accesskey='1' href='url'>Teks Link</a>[/code]
Atau pada elemen button
[code]<button accesskey="u">Teks Button</button>[/code]
Jika kamu berencana untuk membuat lebih banyak accesskey atau pintasan keyboard di halam web ada beberapa hal yang harus diperhatikan diantaranya;
  1. Nilai key akses harus unik dan tidak bertentangan dengan pintasan keyboard sistem atau pintasan keyboard browser.
  2. Tidak ada duplikat key akses pada satu halaman web, misal; jika pada link next post sudah menggunakan accesskey='n' maka pada halaman beranda kamu tidak dapat menggunakan nilai key 'n' untuk pintasan keyboard pada elemen pagenumb.
Himbauan: Dianjurkan untuk memberitahu pengguna bahwa ada accesskey, sehingga mereka mengetahui fungsionalitasnya. kamu dapat memberitahukan ini melalui atribut title atau dengan atribut aria-label.

Contoh:
[code]<a accesskey='n' href='url' title='Press Alt + N to open link'>Teks Link</a>[/code]
Ketika pengguna mengarahkan kusor ke elemen intektif (link atau button), teks bantu pada atribut title akan memberitahukan bahwa ada accesskey, jika sistem tidak memiliki teknologi untuk memberi tahu pengguna tentang fitur accesskey, dikhawatirkan navigasi accesskey justru membingungkan pengguna ketika secara tidak sengaja mengaktifkan accesskey (kunci akses), adapun terhadap accessibility halaman navigasi accesskey tetap memiliki niali plus. semoga bermanfaat dan selamat mencoba.

Rasio Kontras Teks dan Background Halaman Web - Yang saya maksud "rasio kontras teks (foreground) dan background webpage" adalah tingkat keterlihatan antara warna teks dan warna latar belakang (background) halaman website. Idealnya setiap halaman website harusnya memiliki nilai rasio kontras minimal 4,5: 1 untuk teks kecil dan 3: 1 untuk teks besar karena itu akan memberikan nilai/tingkat aksesibilitas yang cukup bagus pada halaman web tersebut sehingga pengguna dapat dengan mudah membaca semua elemen teks yang ada pada halaman web tersebut.

Sebaliknya jika rasio kontras antara teks dan background kurang dari 4,5 banding 1 maka akan sulit dibaca oleh kebanyakan pengguna. maka dari itu pada artikel ini saya akan menjelaskan tentang bagaimana cara menyesuikan rasio kontras yang ideal antara teks dan background halaman web agar mudah terbaca.

Mengetahui Skor Rasio Kontras Teks dan Background

Ini mudah dilakukan, anda hanya perlu meng-inspect halaman web anda memlaui browser chrome atau firefox di pc anda seperti contoh dibawah ini;
Jika nilai atau skor kontras yang ditampilkan adalah; skor anda < 4.5 atau (2.28 < 4,5) itu artinya rasio kontras antara teks dan background halaman web anda rendah, tentu saja aksesibilitas halaman anda juga rendah karena sebagian teks sulit dibaca oleh pengguna.

Kemudian untuk memperbaiki rasio kontras yang rendah itu diperlukan tindakan untuk merubah warna font atau merubah warna background yang ideal dan memiliki rasio kontras diatas 4,5 banding 1.  Agar tidak merusak atau merubah desain (pewarnaan) halaman web secara signifikan, saya menyarankan agar menggunakan tool penghitung rasio kontras teks (foreground) dan background dari WebAim untuk mendapatkan kode warna teks dan background yang sesuai dan memiliki nilai atau skor rasio kontras yang ideal di halaman web.

WebAim WCAG Contrast Checker

Penggunaan Tool WCAG Contrast Analyzer ini sangat sederhana tapi manfaatnya sangat luar biasa dalam meningkatkan aksesibilitas halaman web.
  1. Kunjungi https://webaim.org/resources/contrastchecker/
  2. Pada kolom Foreground Color tempelkan kode warna font web anda, dan
  3. Pada kolom Background Color tempelkan kode warna background web anda.
  4. Kemudian geser tuas Lightness pada tap background color dan perhatikan skor contrast ratio yang dihasilkan.
Lihat contoh gambar dibawah ini untuk lebih jelasnya;
WCAG Contrast checker
Before (Background and foreground colors do not have a sufficient contrast ratio)
WCAG Contrast Analyzer
After (Background and foreground colors have a sufficient contrast ratio)
Setelah mendapatkan skor rasio kontras diatas nilai 4.5:1 silahkan kopy code warna yang dihasilkan dan implementasikan kedalam template web anda.

Mendeteksi Secara Otomatis Masalah Aksesibilitas

Halaman web anda mungkin hanya terdapat sedikit atau sebagian elemen saja masalah aksesibilitas seperti rasio kontras teks (foreground) dan background. Jika tidak memungkinkan untuk memeriksanya secara manual dan satu persatu, maka cara terbaik untuk mendeteksi masalah aksesibilitas (contrast ratio issues) adalah dengan menggunakan extensi lighouse atau gunakan tool open source web.dev measure.

Dengan alat itu anda dapat mengetahui secara pasti elemen-elemen mana saja di halaman web yang mempunyai masalah aksesibilitas seperti contrast ratio issues dan lainnya. Cobalah dan periksa segera situs web anda, semoga artikel ini dapat membantu dalam mengatasi masalah aksesibilitas di halaman web anda.