Applied Accessibility

 Applied Accessibility

*alt= membantu kasus gambar gagal dimuat atau tidak dapat dilihat oleh pengguna. Mesin pencari juga menggunakannya untuk memahami apa yg terkandung dalam gambar untuk memasukkannya ke dalam hasil pencarian. Contoh:

<img src="importantLogo.jpeg" alt="Company logo">

Org dgn gangguan penglihatan mengandalkan pembaca layar utk mengubah konten web menjadi antarmuka audio. teks alt yg baik memberikan deskripsi yg singkat tentang gambar kepada pembaca.

*Bila gambar sudah dijelaskan dgn konten teks atau tdk menambah makna pada halaman, atribut img tetap diperlukan alt. Tetapi dapat disetel ke sting kosong. Contoh:

<img src="visualDecoration.jpeg" alt="">

*Setuap halaman harus memiliki satu( dan hanya satu) elemen h1, yaitu topik utama dlm konten anda. Judul ini dan judul lainnya digunakan sebagian mesin pencari utk memahami topik utama.

*Tag main,  header, footer, nav, article, & section.

-main= utk konten utama.

-article= utk membungkus konten yg independen/ mendiri

Menentukan apakah konten dapat berdiri sendiri biasanya merupakan keputusan yang sulit, tetapi Anda dapat menggunakan beberapa pengujian sederhana. Tanyakan kepada diri Anda sendiri jika Anda menghapus semua konteks di sekitarnya, apakah konten tersebut masih masuk akal? Demikian pula, untuk teks, apakah konten tersebut akan tetap relevan jika ada dalam umpan RSS?

articleuntuk konten mandiri, dansectionuntuk mengelompokkan konten yang terkait secara tematis. Keduanya dapat digunakan dalam satu sama lain, sesuai kebutuhan. Misalnya, jika sebuah buku adalah article, maka setiap bab adalah section. Jika tidak ada hubungan antara kelompok konten, maka gunakan div.

<div>- grup konten <section>- grup konten terkait <article>- grup konten independen dan mandiri.

*header.  Tag ini digunakan untuk membungkus informasi pengantar atau tautan navigasi untuk tag induknya dan berfungsi dengan baik di sekitar konten yang diulang di bagian atas pada beberapa halaman.

Catatan: Tag headerini dimaksudkan untuk digunakan dalam bodytag dokumen HTML Anda. Tag ini berbeda dengan headelemen yang berisi judul halaman, informasi meta, dsb. Contoh:

<header>

      <h1>Training with Camper Cat</h1>

      </header>

*navadalah item HTML5 lain dengan fitur penanda tertanam untuk memudahkan navigasi pembaca layar. Tag ini dimaksudkan untuk membungkus tautan navigasi utama di halaman Anda.

Jika terdapat tautan situs yang berulang di bagian bawah halaman, Anda tidak perlu menandainya dengan navtag. Menggunakan footer.




*Mirip dengan headerdan nav, footerelemen ini memiliki fitur penanda bawaan yang memungkinkan perangkat bantu menavigasi ke sana dengan cepat. Fitur ini terutama digunakan untuk memuat informasi hak cipta atau tautan ke dokumen terkait yang biasanya berada di bagian bawah halaman. Contoh:

<footer>&copy; 2018 Camper Cat</footer>

*audiomemberikan makna semantik saat membungkus konten aliran suara atau audio dalam markup anda.

Tag audiomendukung controlsatribut tersebut. Ini menunjukkan kontrol putar, jeda, dan kontrol lainnya yang default pada browser, dan mendukung fungsionalitas keyboard. Ini adalah atribut boolean, yang berarti tidak memerlukan nilai, keberadaannya pada tag mengaktifkan pengaturan. Contoh: 

<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg">
  <source src="audio/meow.ogg" type="audio/ogg">
</audio>

*figureelemen dan figcaption. Jika digunakan bersama-sama, item-item ini membungkus representasi visual (seperti gambar, diagram, atau bagan) beserta keterangannya. Contoh:

<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>

*Tag labelmembungkus teks untuk item kontrol formulir tertentu, biasanya nama atau label untuk suatu pilihan. Ini mengikat makna pada item dan membuat formulir lebih mudah dibaca. Atribut forpada labeltag secara eksplisit

 mengaitkannya labeldengan kontrol formulir dan digunakan oleh pembaca layar.

Anda mempelajari tentang tombol radio dan labelnya dalam pelajaran di bagian HTML Dasar. Dalam pelajaran tersebut, kami membungkus elemen input tombol radio di dalam labelelemen bersama dengan teks label agar teks tersebut dapat diklik. Cara lain untuk mencapainya adalah dengan menggunakan foratribut, seperti yang dijelaskan dalam pelajaran ini.

Nilai atribut forharus sama dengan nilai atribut idkontrol formulir. Berikut contohnya:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</form>

*Bungkus Tombol Radio dalam Elemen Fieldset untuk Aksesibilitas yang Lebih Baik. Contoh:

<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>




~Camper Cat ingin informasi tentang level ninja penggunanya saat mereka mendaftar ke milisnya. 

*HTML5 memperkenalkan opsi untuk menentukan datekolom. Bergantung pada dukungan browser, pemilih tanggal akan muncul di inputkolom saat difokuskan, yang memudahkan pengisian formulir bagi semua pengguna.

Camper Cat sedang menyiapkan turnamen Mortal Kombat dan ingin bertanya kepada para pesaingnya untuk melihat tanggal yang paling cocok.  Contoh:

<label for="input1">Enter a date:</label>

<input type="date" id="pickdate" name="date">

(milih tanggal jdi ga usah ngetik lgi tinggal pilih)

*timeelemen beserta datetimeatribut untuk membakukan waktu. timeElemen tersebut adalah elemen sebaris yang dapat membungkus tanggal atau waktu pada halaman. Atribut datetimemenyimpan format tanggal yang valid. Ini adalah nilai yang diakses oleh perangkat bantu. Ini membantu menghindari kebingungan dengan menyatakan versi waktu yang dibakukan, meskipun ditulis secara informal atau sehari-hari dalam teks. Contoh:

<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>

(13<sup>th</sup>= 13th (jdi th nya di atas kecil))

Berikut adalah contoh aturan CSS yang dapat melakukan hal ini:
.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}
Catatan: Pendekatan CSS berikut TIDAK akan melakukan hal yang sama:
display: none;atau visibility: hidden;menyembunyikan konten untuk semua orang, termasuk pengguna pembaca layar
Nilai nol untuk ukuran piksel, seperti width: 0px; height: 0px;menghapus elemen tersebut dari alur dokumen Anda, yang berarti pembaca layar akan mengabaikan nya.
*Kontras warna. Normal=4,5 banding 1, rasio ini dihitung dgn membandingkan nilai 
luminasi relatif 2 warna.1:1 utk warna yg sama (tdk ada kontras), sampai
21:1 utk warna putih terhadap hitam.

*tabindex jika berada pada tag, atribut tersebut menunjukkan bahwa elemen tersebut dapat difokuskan. Nilai (bilangan bulat yang positif, negatif, atau nol) menentukan perilakunya.
dapat diberikan ke elemen lain, seperti div, span, dan p
Catatan: Nilai negatif tabindex(biasanya -1) menunjukkan bahwa suatu elemen dapat difokuskan, tetapi tidak dapat dijangkau oleh keyboard. Metode ini umumnya digunakan untuk memfokuskan konten secara terprogram (seperti saat divdigunakan untuk jendela pop-up yang diaktifkan), dan berada di luar cakupan tantangan ini. Contoh:
<div tabindex="0">I need keyboard focus!</div>
*Tabindexjuga menentukan urutan tab elemen yang tepat. Hal ini tercapai jika nilai atribut ditetapkan ke angka positif 1 atau lebih tinggi.
Menetapkantabindex="1"akan membawa fokus keyboard ke elemen tersebut terlebih dahulu. Kemudian beralih melalui rangkaian tabindexnilai yang ditentukan (2, 3, dst.), sebelum beralih ke default dan tabindex="0"item.
Penting untuk diperhatikan bahwa saat urutan tab diatur dengan cara ini, urutan default (yang menggunakan sumber HTML) akan diganti. Hal ini dapat membingungkan pengguna yang berharap untuk memulai navigasi dari bagian atas halaman. Teknik ini mungkin diperlukan dalam beberapa situasi, tetapi dalam hal aksesibilitas, berhati-hatilah sebelum menerapkannya. Contoh:
<div tabindex="1">I get keyboard focus, and I get it first!</div>
* accesskeyatribut untuk menentukan tombol pintas guna mengaktifkan atau memfokuskan suatu elemen. Menambahkan accesskeyatribut dapat membuat navigasi lebih efisien bagi pengguna yang hanya menggunakan keyboard. Contoh:
<button accesskey="b">Important Button</button>
 <h2><a accesskey="c" id="second" href="#">Is Chuck Norris a Cat
 Person?</a></h2>

Subscribe to receive free email updates: