29
May
08

Web Accessibility

Pada hari Senin lalu (05/26), kami sekantor mendapatkan training selama satu jam mengenai Web Accessibility. Training ini diberikan ke seluruh anggota team (bahkan juga Marketing), agar kami bisa lebih mengenal lebih dalam dan bisa mengaplikasikannya pada project dengan lebih baik lagi. Kalau yang biasanya tau mungkin hanya beberapa orang, sekarang semuanya tahu.

Seperti layaknya kalau dapat pelajaran di kuliah, aku membuat sedikit note dari training ini, dan aku membuatnya dalam point-point agar lebih mudah dimengerti dan diingat. Here are they :

Web Accessibility adalah kemampuan untuk membuat website agar dapat diakses oleh siapapun dalam kondisi apapun (disability).

Disability ini mencakup:

  1. Screen display yang kecil (biasanya ada pada HP, Web-TV, Kioks)
  2. Bandwith kecil sehingga image lama ke download
  3. Kondisi lingkungan sekitar yang berisik sehingga susah mendengarkan audio yang ditampilkan
  4. Screen-glare, kondisi dimana kita tidak bisa melihat screen dengan baik (biasanya karena kita duduk di tempat yang silau karena cahaya matahari atau lampu)
  5. Akses bahasa dan tingkat literasi yang berbeda

Web accessibility ini dibagi menjadi 3 tingkatan/ priority berdasarkan dari checkpoint yang ada :

  1. Priority 1
    A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents.
  2. Priority 2
    A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents.
  3. Priority 3
    A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.

Sekarang bagaimana sajakah cara yang dapat dilakukan untuk mendapatkan website yang accessible :

PRIORITY I

a.  Memberikan beberapa alternatif untuk content auditory dan visual:

  • Animasi dan Image : Menggunakan Alt attribute untuk mendeskripsikan fungsi atai keterangan dari setiap visual
  • Multimedia (video) : Memberikan caption atau transkrip audio dan deskripsi dari video
    Dengan beberapa pilihan ini, user yang tidak dapat membuka image/ animasi/ mutimedia karena bandwith yang kecil dapat tetap mendapatkan informasi yang ada.

b. Jangan menggunakan warna sebagai petunjuk
Pastikan bahwa teks dan grafik yang ditampilkan dapat dimengerti walaupun user melihatnya dalam kondisi without color.  Contohnya apabila dalam sebuah form input, jangan memberikan perintah : “Please select an item from those listed in green.” Dianjurkan untuk memberikan perintah menggunakan style effect (bold, italic, etc)

c. Data tables
Identify row dan column headers. Contohnya : dalam HTML gunakan TD dan TH

d. Form : Pergunakan label secara jelas.
Example:
<LABEL for=”firstname”>
First name: <INPUT type=”text” id=”firstname” tabindex=”1″>
</LABEL>

e. Pastikan bahwa page dapat diakses meskipun teknologi yang paling baru belum di support atau bahkan tidak diaktifkan

f. Pastikan bahwa document masih bisa dibaca tanpa CSS (render html document tanpa CSS file)

g. Scripts, applets, & plug-ins.
Buatlah content alternatif apabila feature tidak dapat diakses atau diaktifkan. Misalnya : jangan gunakan ‘javascript’ sebagai link target, apabila terpaksa harus menggunakan javascript, gunakan  server-side script atau page alternatif lain yang dapat diakses

h. Frames : Hindari penggunaan elemen Frame

PRIORITY II

a. Image

  • Untuk memberikan keterangan warna, gunakan kode angka instead of names. Contoh : gunakan h1 {color: #808000}, daripada h1 {color: red}
  • Pastikan warna foreground dan background mempunyai kontras yang jelas. Berikan penjelasan dengan jelas untuk keduanya. Untuk infomasi yang lebih detail tentang warna dan kontras please check http://www.lighthouse.org/accessibility/effective-color-contrast/

b. Gunakan markup dan style sheets

  • Mark up documents dengan menggunakan structural elements (p, strong, blockquote)
  • Gunakan headings, lists, dan consistent structure untuk Page organization.
  • Gunakan CSS untuk layout dan style (dibandingkan menggunakan elements and attributes presentation). Misalnya : gunakan CSS ‘font’ daripada HTML <FONT> element
  • Gunakan markup language yang ada menggunakan daripada image. Misalnya : ©™ ®
  • Gunakan relative daripada absolute units. Misalnya gunakan ’em’daripada ‘pt’ or ‘px’

c. Data Tables:
Jangan mempergunakan table dalam layout. Atau kalau terpaksa harus menggunakan table, berikan alternatif lain yang sama. Detail bisa dilihat di  http://www.webaim.org/techniques/tables/

d. Pastikan object yang moving, blinking, scrolling, atau auto-updating dapat di pause atau di stop

e. Hindari movement dalam pages.
Apabila dalam page terdapat moving content, berikan alternatif mekanisme dalam script atau applet untuk freeze motion or updates.

f. Do not create periodically auto-refreshing pages.

Note: The BLINK and MARQUEE elements sangat tidak dianjurkan

g. Berikan mekanisme navigasi yang jelas, berikan penjelasan bagi target setiap link (jangan hanya ditulis : Click Here)

h. Berikan info general tentang keseluruhan isi website (ex: site map atau table of contents)

PRIORITY III

a. Provide summaries for tables.
For example, in HTML, use the “summary” attribute of the TABLE element.

b. Provide abbreviations for header labels.
For example, in HTML, use the “abbr” attribute on the TH element.

c. Pada fitur Search, berikan beberapa macam tipe pencarian untuk skill levels dan preferences yang berbeda

d. Teks

  • Untuk memberikan keterangan warna, gunakan kode angka instead of names. Contoh : gunakan h1 {color: #808000}, daripada h1 {color: red}
  • Pastikan warna foreground dan background mempunyai kontras yang jelas. Berikan penjelasan dengan jelas untuk keduanya. Untuk infomasi yang lebih detail tentang warna dan kontras please check http://www.lighthouse.org/accessibility/effective-color-contrast/

VALIDASI

Setelah kita menggunakan berbagai macam cara pada website kita, maka tugas terakhir adalah mengetesnya dengan tools otomatis dan human review. Dibutuhkan dua komponen untuk mengetest, karena tools otomatis memang cepat dan detail, tetapi tetap tidak dapat mengidentifikasan semua issue accessibility yang ada. Tools yang dapat kita pergunakan :

Advertisements

0 Responses to “Web Accessibility”



  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: