Menyederhanakan Aksesibilitas Web

Diperbarui 24 Januari 2011 oleh Dani Iswara

Pengguna blog mungkin sering membaca tentang topik desain web yang baik. Saya akan coba menyederhanakannya dari sudut pandang aksesibilitas 'World Wide Web'. Selanjutnya akan saya sebut sebagai Web saja, dengan huruf kapital di awal, untuk mengacu ke pengertian yang lebih luas. Web dengan huruf kecil di awal untuk menyebut situs web, sebagai bagian dari Web. Beberapa editor mungkin menganggap Web dan web sebagai hal yang sama. Seperti halnya Internet (dengan huruf besar di awal) dan internet/intranet.

Kembali ke konsep desain situs web yang baik. Saya mengambil contoh 2 tulisan dari situs smashingmagazine.com dan psd.tutsplus.com. Kebetulan masing-masing tulisan tersebut ditulis oleh pengelola utama situsnya.

Tulisan pertama, 10 Principles Of Effective Web Design (smashingmagazine.com, 2008). Ditulis oleh Vitaly Friedman, kepala editor di situs bersangkutan. Dia menyebut hal-hal berikut–diringkas:

1. Don’t make users think.
   …the web-page should be obvious and self-explanatory…to make sure that the number of question marks is close to 0…
2. Don’t squander users’ patience.
   …The less action is required from users to test a service…Ideally remove all barriers, don’t require subscriptions or registrations first.
3. Manage to focus users’ attention.
   …Obviously, images are more eye-catching than the text — just as the sentences marked as bold are more attractive than plain text…the less thinking needs to happen behind the scenes, the better is the user experience which is the aim of usability in the first place.
4. Strive for feature exposure.
   Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc…On the contrary, such guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way…What matters is that the content is well-understood and visitors feel comfortable with the way they interact with the system.
5. Make use of effective writing.
   …use short and concise phrases (come to the point as quickly as possible), use scannable layout (categorize the content, use multiple heading levels, use visual elements and bulleted lists which break the flow of uniform text blocks), use plain and objective language…
6. Strive for simplicity.
   The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity.
7. Don’t be afraid of the white space.
   …Complex structures are harder to read, scan, analyze and work with. If you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better to use the whitespace solution…
8. Communicate effectively with a “visible language”.
   • Organize: provide the user with a clear and consistent conceptual structure…
   • Economize: do the most with the least amount of cues and visual elements. Four major points to be considered: simplicity, clarity, distinctiveness, and emphasis…
   • Communicate: match the presentation to the capabilities of the user. The user interface must keep in balance legibility, readability, typography, symbolism, multiple views, and color or texture in order to communicate successfully…
9. Conventions are our friends.
   Conventional design of site elements doesn’t result in a boring web site. In fact, conventions are very useful as they reduce the learning curve…Follow users’ expectations — understand what they’re expecting from a site navigation, text structure, search placement etc.
10. Test early, test often.
    …usability tests often provide crucial insights into significant problems and issues related to a given layout.

Tulisan kedua, 9 Essential Principles for Good Web Design (psd.tutsplus.com, 2007). Ditulis oleh Collis Ta’eed, pendiri situs bersangkutan.

1. Precedence (Guiding the Eye).
   Good Web design, perhaps even more than other type of design, is about information…I call this precedence, and it’s about how much visual weight different parts of your design have.
2. Spacing.
   …Line Spacing,…Padding,…White Space…
3. Navigation.
   …There are two aspects of navigation to keep in mind: Navigation — Where can you go?…Orientation — Where are you now?
4. Design to Build.
   …Can it actually be done?…What happens when a screen is resizes?…Are you doing anything that is technically difficult?…Could small changes in your design greatly simplify how you build it?…For large sites, particularly, can you simplify things?…
5. Typography.
   …Font Choices,…Font sizes,…Spacing,…Line Length,…Color,…Paragraphing.
6. Usability.
   …Adhering to Standards,…Think about what users will actually do,…Think about user tasks.
7. Alignment.
   …try to keep things consistently placed on a page. Aligning makes your design more ordered and digestible, as well as making it seem more polished.
8. Clarity (Sharpness).
   …it’s all about the pixels…Keep shape edges snapped to pixels…if you’re creating them in Photoshop…Make sure any text is created using the appropriate anti-aliasing setting…
9. Consistency.
   …Everything should be themed to make your design coherent between pages and on the same page…is about being professional…

Web yang nyaman

Ada beberapa poin di atas yang senada. Kita lihat dengan 2 aspek besar, aksesibilitas dan kebergunaan atau 'usability'. Dalam bahasa yang lebih sederhana, kenyamanan. Nyaman bagi siapa saja? Kemudahan untuk dipakai dan dimengerti sesuai target pengguna. Keduanya nyaris tidak terpisahkan.

Kemudahan pakai, diantaranya:

1. gampang digunakan di pelbagai alat bantu teknologi. Misalnya peramban Web, pembaca layar komputer/'screen reader', peramban Web berbasis suara, berlayar sentuh, berlayar kecil, dan tanpa tetikus sekalipun.
2. mudah juga dipakai oleh seluas-luasnya pengunjung. Baik pengguna biasa, mesin telusur/pencari Internet, lanjut usia, hingga penyandang disabilitas. Kecuali menargetkan kelompok pengguna tertentu.
3. tetap ramah bagi pengguna dengan koneksi Internet terbatas dan lambat.
4. navigasi dan struktur antarmuka yang konsisten.
5. setelan huruf, kata, blok teks, kalimat, paragraf, lebar kolom, bahasa, gambar, objek lain, kombinasi warna/suara teks dan latar yang enak dinikmati (dan dipahami).
6. tombol-tombol yang tetap bisa dipakai walau tampilan gambar dan 'javascript' dimatikan.
7. punya versi cetak.

Kemudahan untuk dimengerti, diantaranya:

1. nama situs, alamat URL, 'favicon', logo, 'tagline', deskripsi, kategori, kumpulan tag, bisa langsung menggambarkan konten dan ciri khas atau keunikan tersendiri.
2. pemakaian teks spesial yang semantik. Susunan judul-subjudul yang sistematis, cetak tebal, miring, bentuk daftar, kuotasi, dan unsur semantik lain. Lebih mudah memahami konten. Termasuk bagi penyandang disabilitas yang hanya bisa mendengar.
3. teks bergaris bawah yang diharapkan bisa diklik. Bukan sekadar berbeda warna. Sangat bermanfaat bagi pengguna yang mengalami gangguan kontras warna hingga buta warna. Apalagi ditambah dengan teks 'anchor' yang deskriptif.
4. penjabaran singkatan dengan elemen (X)HTML seperti abbr title= dan/atau acronym title=. Perhatikan pemakaian singkatan bahasa Indonesia di konten. Sudahkah pembaca layar komputer memahaminya? Bahkan pengomentar blog pun bisa mendukung aksesibilitas Web (Dani Iswara .com).
5. urutan kolom isian yang logis. Terutama bagi pemakai papan ketik. Terkait pemakaian elemen tabindex.

Dengan perkembangan 'blogazine'–halaman web menyerupai majalah, sepintas beberapa konsep di atas akan tampak bertentangan. Terutama terkait konsistensi. Menurut saya, teratur tampak berbeda di tiap halaman juga disebut konsisten. :)

Perlukah versi 'mobile' atau layar kecil? Kini peramban Web versi desktop sudah mampu meyediakan fitur sejenis 'Safari Reader' (ekstensi 'Readability' di Firefox) untuk meningkatkan keterbacaan konten utama Web. Mestinya demikian juga dengan versi layar kecilnya. Harapan saya, peramban Web versi 'mobile' akan mampu menampilkan versi layar kecil otomatis.

Tiap peramban Web versi desktop juga sudah banyak yang memiliki fitur aksesibilitas. Dapat disetel sesuai kondisi pengguna dan penyandang disabilitas. Ada yang lebih suka membaca huruf serif, lainnya suka sans-serif. Ada yang lebih senang teks hitam di atas latar putih polos, kuning di atas hitam, atau bahkan mematikan CSS.

Ringkasan

Jadi, jika makin canggih alat bantu teknologi, makin mudah tugas pengelola Web menyajikan kontennya. Tapi karena beberapa alat bantu tersebut masih memiliki keterbatasan, penyaji konten Web mesti menyiasati dengan pelbagai rekomendasi dan petunjuk teknis WCAG 2.0 (w3.org). Panduan dan 'checklist' memang membantu. Tapi uji coba ke target pengguna akan sangat bermanfaat. :)