Aksesibilitas, Bagian 2: dipahami

() translation by (you can also view the original English article)

Prinsip ini menyatakan bahwa semua konten harus dalam format (atau tersedia berdasarkan permintaan dalam format) yang dapat segera dipahami oleh pengguna. Kata lain, website Anda harus dirancang sedemikian rupa sehingga siapa pun dapat 'membaca' konten, tanpa cacat apapun yang mereka miliki. Banyak pengguna dengan cacat akan menggunakan teknologi bantu; misalnya orang-orang dengan gangguan visual dapat menggunakan screen-reader yang membaca apa yang muncul di layar, atau konverter teks-to-braille. Tujuan kemudian adalah untuk memfasilitasi teknologi bantu ini.

Harap diingat bahwa panduan di sini tidak lengkap, jadi Anda harus selalu merujuk ke panduan aksesibilitas konten Web.

Menyediakan teks alternatif untuk Gambar (1.1)

Gunakan Alt Tag untuk gambar

Ini mungkin adalah saran yang paling umum untuk meningkatkan aksesibilitas. Jika situs web Anda berisi gambar, maka ini diabaikan oleh scren-reader kecuali Anda menggunakan alt tag.

Perhatikan bahwa Deskripsi alt tidak selalu mungkin gambaran apa foto tersebut, melainkan apa gambar adalah mencoba untuk sampaikan. Alt tag mengatakan kata-kata apa yang Anda coba untuk mengatakan dengan gambar.

Sementara nasihat ini terutama cocok untuk editor, aku mengangkat itu di sini karena tema pengembang akan sering memberikan logo daripada teks untuk menyampaikan nama website atau perusahaan. Dalam contoh ini, mungkin yang terbaik untuk menggunakan nama situs (get_bloginfo('name')) sebagai alternatif Deskripsi:

1	echo '<p class="site-title"><a href="' . esc_url( home_url( '/' ) ) . '"><img id="logo" alt="'.esc_attr(get_bloginfo('name')).'" src="' . $logo . '">' . get_bloginfo('name') . '</a></p>';

Alt Tag tidak boleh digunakan untuk gambar murni dekoratif, sebaliknya Anda pada dasarnya memaksa pengguna untuk menyaring informasi yang berlebihan dan tidak perlu.

Memberikan alternatif untuk captcha

Jika plugin Anda menciptakan fprm, Anda mungkin memerlukan semacam konfirmasi bahwa itu sedang diakses oleh seseorang daripada komputer. Jika Anda memutuskan untuk menyediakan pengguna dengan gambar atau klip audio, yang mereka harus kemudian menafsirkan, Anda harus menjelaskan hal ini, dalam teks, dan memberikan alternatif bentuk CAPTCHA untuk mengakomodasi berbagai Cacat.

Memastikan konten dapat dilihat (1,4)

Jangan hanya mengandalkan pada posisi, warna atau bentuk untuk menyampaikan makna

Pedoman ini sebagian besar akan berlaku untuk pengembang plugin, tapi juga dapat berlaku untuk tema. Jika warna, bentuk dan posisi yang digunakan untuk menyampaikan makna yang tidak dilihat dari teks, arti itu hilang pada pengguna yang buta warna atau buta.

Misalnya, contoh mungkin form kontak tombol bergantung pada ikon dari Font Awesome font ikon populer:

1	<button><span class="fa fa-envelope fa-lg"></span></button>
2	<button><span class="fa fa-times fa-lg"></span></button>

Tujuan dari tombol ini mudah jelas untuk pengguna terlihat, tetapi bagi mereka yang bergantung pada screen reader tidak ada indikasi petunjuk tombolnya melakukan apa. Jika, untuk tujuan desain, Anda ingin menghindari menggunakan teks, Anda harus menentukan label menggunakan atribut aria-label.

1	<button aria-label="Email">
2	<span class="fa fa-envelope fa-lg"></span>
3	</button>

Ini adalah salah satu contoh ARIA protokol, yang kita akan membahas secara lebih rinci dalam artikel berikutnya.

Pastikan ada cukup kontras antara teks dan latar belakang

Ini adalah persyaratan yang hampir jelas. Bahkan untuk orang yang baik melihat, sebuah situs web dengan kontras yang rendah antara teks dan latar belakang sulit untuk membaca dan dapat menyebabkan ketegangan mata. Untuk orang-orang dengan gangguan penglihatan, gelar yang lebih besar dari kontras diperlukan, itulah sebabnya WCAG menyatakan bahwa warna latar belakang dan teks harus memiliki rasio kontras 4.5:1.

Hal ini tidak segera jelas apa yang rasio yang terlihat seperti atau berarti, tetapi ada berbagai tool yang membantu Anda memeriksa rasio:

Teks yang lebih besar memiliki persyaratan lebih rendah dari 3:1, dan logo, teks yang dekorasi murni atau tidak terlihat, dan 'disabled' teks/tombol tidak memiliki persyaratan kontras.

Meskipun tema yang paling menawarkan pengguna kemampuan untuk menyesuaikan warna yang digunakan di situs web, itu adalah ide yang baik untuk memastikan bahwa setidaknya warna default (atau tersedia 'palet') memenuhi persyaratan minimum kontras. Kemudian dalam seri ini kita akan melihat membangun fitur ke dalam tema Anda yang memperingatkan pengguna jika mereka yang memilih warna dengan kurangnya kontras.

Menghindari latar belakang putih

Dyslexia British Association merekomendasikan menghindari murni putih latar belakang untuk teks dan sebaliknya menggunakan warna off-putih, krim atau warna pastel yang lembut. Alasan di balik ini adalah bahwa kecerahan halaman putih dapat 'mempesona' pembaca.

Bagi mereka yang menderita Sindrom kepekaan Scotopic (atau Irlen syndrome), kontras terlalu tinggi antara latar belakang dan teks dapat memperburuk gejala seperti:

teks yang muncul untuk bergerak pada halaman (naik, jatuh, aduk, goyang, dll.)
"kehilangan" konten teks dan hanya melihat sungai putih melalui teks
teks yang muncul kabur

Gejala-gejala ini membuat membaca sulit dan tidak nyaman, dan dapat menyebabkan kelelahan mata, ketegangan mata, kantuk, dan sakit kepala.

Dalam bagian sebelumnya, saran terbaik adalah untuk memastikan kontras, tapi tidak terlalu banyak kontras. Sebagai preferensi dengan bervariasi antara individu, cukup apa yang merupakan "terlalu" akan ke penilaian pribadi.

Mengatur struktur halaman Anda (1.3)

Tata letak yang terstruktur, dengan menggunakan sesuai judul, membuatnya lebih mudah bagi pengguna untuk memahami informasi yang disajikan kepada mereka. Pengguna screen reader mengandalkan agak pada struktur 'sensible' untuk membantu mereka menemukan jalan mereka di halaman.

Struktur tema Layout Anda

Cara cepat untuk tes ini adalah untuk melihat tema Anda dengan CSS dan JavaScript dinonaktifkan. Cara yang lebih baik adalah dengan menggunakan Lynx yang berbasis teks browser. Jika situs Anda struktur menyebabkan konten yang muncul dalam mode tidak teratur sekali maka akan sulit bagi pengguna yang menggunakan Lynx atau teknologi bantu lain untuk membaca situs web Anda. Karena pengguna mengandalkan teknologi tersebut tidak memiliki keuntungan bahwa CSS dan JavaScript membawa dalam membantu orientasi pada halaman, dan aliran konten, sangat penting bahwa benar membaca urutan jelas tanpa mereka.

Ini cukup sederhana untuk mencapai: memastikan HTML mark-up mencerminkan urutan visual yang dimaksudkan. Ini sangat alami, dan jika Anda menemukan bahwa situs web Anda tidak bagus dibaca tanpa CSS, maka Anda mungkin sengaja menyimpang itu. Sebagai aturan umum website Anda harus mengikuti pola:

Judul
Navigasi
Konten utama
Konten Side
Footer

Menggunakan header yang tepat

Yang satu ini cukup mudah untuk mendapatkan yang tepat. Aturan sangat sederhana:

Penggunaan <h*>tag hanya untuk header — bukan hanya untuk menerapkan style tertentu untuk beberapa teks.
Mesin pencari dan screen-reader menggunakan header tag untuk struktur halaman Anda, jadi berpikir tentang bagaimana Anda menggunakan mereka. Mereka harus mencerminkan struktur halaman.
Menggunakannya dalam rangka:<h3>harus bersarang di dalam<h2>dan<h2>di dalam<h1>. (Ini mengikuti dari (2)).

Satu pertanyaan yang sering ditanyakan adalah: judul situs saya harus di dalam<h1>Tag? Rekomendasi W3C menunjukkan bahwa meskipun ada beberapa kasus dimana ini akan menjadi hal yang berlaku untuk melakukan, dalam konteks WordPress Tema, mungkin yang terbaik untuk tidak menggunakan<h1>Tag untuk judul situs. Ada beberapa alasan:

Judul situs harus dimasukkan dalam<title>Tag. Sementara ini sering diabaikan dan agak jelek untuk pengguna visual, itu adalah hal pertama yang dibaca oleh screen reader. Oleh karena itu membungkus judul situs<h1>memberi berlebihan menonjol untuk pembaca layar pengguna, sementara membuat judul lebih jelas bagi pengguna terlihat dapat dicapai tanpa penggunaan header tag.
Header tag yang digunakan untuk mengelola informasi. Judul situs Anda tidak berguna untuk tujuan seperti itu.

Terlepas dari apa yang Anda memutuskan, header berikutnya pada halaman Anda harus duduk di bawah ini. Jadi, artikel dalam "The Loop" atau judul halaman Anda harus memiliki<h2>Tag jika Anda menggunakan<h1>Tag untuk judul situs Anda, dan<h1>Tag sebaliknya.

Setelah isi posting, tema yang paling akan menampilkan komentar posting. Sangat wajar untuk memiliki "Komentar" heading, karena itu istirahat logis dari konten, tapi sebagai yang berhubungkait dengan isi post, heading level harus mencerminkan hal ini. Hal yang paling logis untuk dilakukan adalah untuk memiliki header "Komentar" satu tingkat di bawah judul post.

Berikut adalah potongan dari single.php:

<div id="content" role="main"> 
    
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 
    
        <h1 class="entry-title"> <?php the_title(); ?> </h1> 
    
        <div class="entry-content"> 
            <?php the_content(); ?> 
        </div><!--.entry-content--> 
    
        <?php comments_template(); ?> 
    
    </div> 
    
</div>

Dalam contoh saya telah menggunakan<h1>Tag untuk judul post, jadi template Komentar (comments.php) kemudian mungkin terlihat seperti:

<div id="comments"> 

    <h2 class="comments-title"> 
        <?php printf( _n( 'One Comment on %2$s', '%1$s Comments on %2$s', get_comments_number(), 'mytheme' ), number_format_i18n( get_comments_number() ), get_the_title() ); ?> 
    </h2> 
    
    //... 
    
</div>

Memastikan situs Anda juga menanggapi peningkatan ukuran teks (1,4)

Beberapa pengguna yang memiliki keterbatasan visual ringan dapat mengandalkan memperbesar ukuran font daripada teknologi bantu seperti layar kaca pembesar. Dalam pandangan ini, pedoman WCAG menentukan bahwa situs Anda tidak boleh "berantakan" ketika teks diperbesar hingga 200%. "Berantakan" di sini berarti teks menghilang, bertabrakan, meluap dari wadah yang, atau lebih umumnya tata letak situs telah terganggu sehingga sulit atau membingungkan untuk dibaca.

Menggunakan ukuran Font yang relatif

Karena browser modern telah menjadi lebih baik dalam mengubah ukuran teks, menggunakan ukuran font relatif ini tidak sepenting dulu (walaupun IE9 tidak mengubah ukuran font yang didefinisikan dalam piksel). Terlepas dari itu, masih disarankan untuk menggunakan ukuran font relatif (persentase, ems atau rems). Rem unit alamat beberapa masalah dengan em unit- dan meskipun hanya diperkenalkan dengan CSS3, Anda dapat menggunakannya dengan cara yang kompatibel dengan browser legacy. Rincian tentang bagaimana menerapkan relatif font yang sedikit keluar dari ruang lingkup, tapi Anda dapat mengetahui lebih lanjut di sini:

Gunakan Fluid layout

Namun, mengubah ukuran teks dapat menyebabkan masalah tata letak. Teks mungkin didorong keluar layar, memaksa pengguna untuk scroll, atau teks mungkin keluar dari kontainer, berpotensi menjadi teks lain, membuat bagian halaman web terbaca. Ini mana tata letak yang responsif (atau fluid) dapat membantu. "Responsif" situs yang dirancang untuk beradaptasi ke perangkat apa pun mereka sedang dilihat di; dengan demikian mereka jarang menggunakan fixed piksel/lebar atau ukuran font. Akibatnya, situs tersebut biasanya berperilaku baik ketika mengubah ukuran font: tata letaknya tidak berantakan.

Pedoman WCAG merekomendasikan tidak hanya bahwa teks harus dapat diperbesar dengan hingga 200%, tetapi juga bahwa situs web dapat menampung ukuran teks meningkat. Desain web responsif dapat membantu bahwa karena:

layar diperbesar menyesuaikan ukuran viewport 'kecil'
elemen dipindahkan untuk menghilangkan horisontal scrolling
ukuran non-fixed mencegah tumpang tindih atau cut-off teks
gambar yang diubah ukurannya agar sesuai dengan ruang yang tersedia, dan tidak tumpang tindih dengan teks

Namun, sangat penting untuk dicatat bahwa desain responsif dan aksesibilitas tidak hal yang sama: meskipun mereka dapat saling melengkapi, mereka akhirnya memiliki tujuan yang berbeda. Sebuah situs yang responsif ini tidak selalu dapat diakses, dan sebaliknya.

Menggunakan Mark-Up dengan benar (1.3)

Hanya menggunakan tabel untuk mewakili Data

Penggunaan tabel sebagai tool bantu dalam tata letak halaman (semoga) adalah hal di masa lalu. Ada juga aksesibilitas yang berkaitan dengan konsekuensi untuk menyalahgunakan tabel. Tabel dimaksudkan untuk mewakili data atau informasi, dan dengan demikian baris dan kolom memiliki makna yang melekat, dan screen-reader menganggap ini ketika membaca data.

Sebagai contoh, Screen-reader, akan membaca nomor baris dan kolom sebelum membacakan isi sel. Karena posisi sel dalam tabel digunakan untuk semata-mata guna keperluan tidak relevan, informasi ini dapat membingungkan, atau setidaknya menjengkelkan: pengguna akhir sedang mengatakan ada beberapa struktur tabel, ketika benar-benar, tidak ada.

Penggunaan yang tepat dari tabel Mark-Up

Sebagian besar tema pengembang tidak perlu menghasilkan tabel (dan Kalendar posting WordPress sudah dapat diakses). Namun, plugin dapat menampilkan tabel melalui shortcode atau widget. Ada beberapa hal yang harus diperhatikan ketika memproduksi tabel mark-up:

Sebisa mungkin, menjaga tabel sederhana. Meskipun baris/kolom spanned telah mark-up standar selama bertahun-tahun, mereka tidak secara universal didukung oleh screen-reader.
Mana yang sesuai, menyediakan <caption>elemen di atas tabel, menjelaskan apa yang tabel tunjukan:
1

<table>
2

<caption> ... </caption>
3

...
4

</table>
Gunakan<th>untuk header tabel dan<td>untuk data tabel. <th>sel-sel tidak boleh kosong.
Menyediakan cakupan untuk <th>sel-sel, yang menunjukkan apakah sebuah baris atau kolom header: <th scope="col">atau <th scope="row">. Meskipun lingkup sering ditentukan oleh screen-reader, tidak ada salahnya untuk menjadi eksplisit.
Anda dapat menggunakan <thead>, <tbody>dan <tfoot>, tetapi mereka menawarkan tidak ada manfaat dalam hal aksesibilitas.

Menggunakan title atribut judul untuk menjelaskan singkatan yang digunakan dalam sel:

<table> 
    <caption> February 2014 </caption> 
    <thead> 
        <tr> 
            <th title="Monday" scope="col">M</th> 
            <th title="Tuesday" scope="col">T</th>
            <th title="Wednesday" scope="col">W</th> 
            <th title="Thursday" scope="col">T</th> 
            <th title="Friday" scope="col">F</th> 
            <th title="Saturday" scope="col">S</th> 
            <th title="Sunday" scope="col">S</th> 
        </tr> 
    </thead> 
    ... 
</table>

ARIA & Form

Accessible Rich Internet Applications (ARIA) atribut berguna dalam mengidentifikasi tujuan bagian tertentu dari halaman, setiap properti (misalnya pencantuman label diperlukan form masukan seperti) dan state (misalnya label tombol seperti dinonaktifkan). Menggunakan mereka dapat membantu teknologi bantu memahami situs web Anda lebih baik, dan jadi hadirkan halaman Anda lebih jelas kepada pengguna akhir. Kita akan melihat di ARIA dalam artikel berikutnya dalam seri ini. Kemudian dalam seri ini, kita juga akan membuat form mark-up yang benar, dan umpan balik yang dapat diakses.