Tinjauan Blog RudyAzhar.com

Diperbarui 12 November 2017 oleh Dani Iswara

Setelah sedikit revisi kontras warna, blog Rudy Azhar siap ditinjau. Situs ini dikelola oleh Bang Rudy Azhar, pria yang tinggal di Medan – Sumatera Utara. Tampilan blog bermesin WordPress ini dimodifikasi sedemikian rupa dari tema ‘Neoclassical XL’. Memakai tipe dokumen XHTML 1.0 ‘Transitional’ dan beberapa fitur CSS3. Versi bergerak/mobil memakai pengaya (dalam hal ini ‘plugin’) MobilePress. Belum ada versi cetak atau moda ‘print’-nya.

Saya salut dengan pelbagai usaha keras Bang Rudy merombak tampilan dan fungsi blognya. Mulai dari penyederhanaan di beberapa sisi halaman, logo baru, hingga akhirnya melepas emotikon Kaskus.

Tinjauan ini sengaja dilakukan dengan kondisi tampilan gambar dinonaktifkan untuk memudahkan evaluasi aksesibilitas Web.

Sekilas pandang

Memberikan pengalaman atau ‘user experience’ yang tidak jauh berbeda antara versi desktop dan bergerak. Mempermudah ‘learning curve’ bagi pengguna dan pengunjung baru.

Logo judul blog memang tidak tampak saat tampilan gambar dinonaktifkan. Menurut saya, tidak terlalu bermasalah dari sisi fungsi. Masih ada tautan ‘Home’ untuk kembali ke halaman depan.

“Ini blog tentang apa? Mana ‘tagline’ atau deskripsi singkatnya?” Mungkin begitulah pendapat umum para pengunjung barunya. Di kode sumber ada baris

<div id="tagline">hanya blog untuk tempat berbagi</div>

Entah apakah tag <div> benar-benar dibutuhkan di sini.

Masalah klasik WordPress

Di beberapa tinjauan sebelumnya sempat saya singgung tentang atribut title yang relatif duplikatif. Hanya berisi teks yang serupa dengan teks ‘anchor’ atau sekadar pengulangannya. Ini masalah kronis di beberapa templat bermesin WordPress. Klasik dan kronis karena sistem ‘core’ WorPress itu sendiri penyebabnya. Silakan membaca ‘Web accessibility and title attribute of WordPress blog‘ (Dani Iswara .com). Di WordPress, solusinya memakai ‘plugin’ sejenis ‘remove title attribute’. Hati-hati memakainya.

Masalah klasik tombol ‘reply’ akan dibahas di subtopik khusus di bawah.

Kolom komentar

Di sini akan disorot tentang salah eja, peluang penambahan beberapa aksen tertentu, dan urutan ‘tasking’ terkait komentar yang kurang logis.

Kalimat “Apa yang ingin Kamu Tulis!”, sepertinya kurang tepat nada dan huruf kapitalnya, Bang. Baris kalimat “Nama (jangan terlalu Panjang!)(wajib)”, mestinya bisa diperingkas pemakaian tanda kurungnya.

Lihat kalimat berikut ini:

Jika Artikel diatas ada yang ingin Anda tanggapi dan Kritik, Silahkan Anda Tulis pada Kotak Komentar yang telah disediakan dibawah ini, mohon tidak mencantumkan link-link yang bersifat Advertising karena sistem komentar pada blog ini adalah No Follow. Terima Kasih

hanya ada satu titik. Saran saya, disesuaikan menjadi seperti di bawah ini:

Jika artikel di atas ada yang ingin Anda tanggapi dan kritik, silakan tulis pada kotak komentar yang telah disediakan di bawah ini. Mohon tidak mencantumkan tautan/’link’ yang bersifat iklan karena sistem komentar pada blog ini adalah ‘no follow’. Terima kasih.

Ada juga kalimat “hidup sehar dengan Nutrisi”. Ayo, di mana itu?
Salah eja sederhana yang lain, misalnya: Tagg.

Hal redaksional berupa salah eja mungkin sepele. Tapi ini bisa menunjukkan keseriusan seseorang terhadap detail sekecil apapun. Profesionalitas? Bukankah bisnis juga membutuhkan kesungguhan, Bang? :)

Baris deteksi peramban dan sistem operasi, misal menggunakan GNU IceCat 3.6.8 pada Arch Linux, masih berpeluang diberi aksen tertentu via CSS. Jika memakai ‘plugin’ WP-UserAgent, ada tag ‘custom’ yang bisa dipakai, lalu tambahkan ‘class’ tertentu.

Tombol ‘reply’ kurang logis. Jika diklik, langsung melompat ke kolom isian komentar. Padahal pengunjung baru mungkin belum mengisi kotak isian identitas. Solusinya saat ini, urutan kotak isian komentar diubah. Tag textarea mendahului input lainnya. Silakan baca tulisan lawas di Dani Iswara .Net berjudul The lack of WordPress threaded comments.

Urutan tidak logis ini terjadi juga pada penempatan kotak isian untuk berlangganan balasan komentar via surat elektronik/surel. Sebaiknya pilihan itu ditempatkan sebelum tombol ‘kirim komentar’. Kalimatnya bisa lebih informatif jika seperti ini: “Notify me of followup all comments via e-mail”. Tergantung juga pada fungsi yang ditawarkan oleh fitur tambahan atau ‘plugin’ masing-masing.

Struktur, fungsi, dan semantik

Bukan hanya yang tampak oleh mata, bagian yang terdengar telinga pun ikut dievaluasi. Kode sumber XHTML dan CSS juga tidak luput ditelisik.

Blog rudyazhar.com belum memiliki menu ‘skip to main content’. Tidak ditemukan fitur kotak pencarian. Fitur langganan tulisan terbaru via surel juga belum ada. Mungkin Bang Rudy punya alasan tersendiri untuk hal-hal tersebut.

Judul tulisan di halaman tunggal/’single post’ tidak berupa tautan yang bisa diklik. Perlu tidaknya, ini memang menimbulkan perdebatan. Pendapat saya untuk hal ini bisa dilihat di tulisan ‘Another reason for self linking post title‘ (Dani Iswara .com). Intinya, tautan aktif atau ‘self-linking’ di judul tulisan itu masih perlu. Tapi tidak untuk ‘self-linking’ di konten yang cenderung mengecoh pengguna!

Tag <label> tidak disertakan mendampingi textarea. Ini terkait semantik dan aksesibilitas bagi pengguna pembaca layar komputer/’screen reader’. Untuk pengingat, logika sederhananya, jika tag input diberi label, mengapa textarea tidak?

Di mana lokasi label untuk tiap tag input identitas pengomentar? Ada pertentangan antara kebergunaan dan aksesibilitas di sini. Label di kanan ‘input’ tampak lebih nyaman dilihat mata. Tapi, lebih aksesibel dan logis jika label terbaca lebih dulu oleh pembaca layar komputer. Pernah saya tulis di ‘Label left align followed by input field’ (Dani Iswara .Net).

Beberapa bentuk ‘listing’ yang memakai CSS list-style-image seperti di halaman arsip blog rudyazhar.com berpeluang kehilangan kebergunaan struktur ketika gambar tidak ditampilkan.

Bagaimana dengan tanda baca titik dan koma di akhir tiap tag li, perlukah? Setelah meninjau Odiogo—suatu layanan ‘podcast’ gratis, saya menganggap tanda baca jeda itu perlu. Lengkapnya ada di ‘Accessibility review of Odiogo‘ (Dani Iswara .com).

Halaman 404 cukup informatif. Judulnya OOPs! Lookout for that banana peel!. Tampak biasa saja? Jika bukan singkatan, mengapa kata “OOPs” ada huruf kapitalnya? Silakan membaca pendapat saya di Aksesibilitas Web Huruf Kapital (Dani Iswara .com).
Di halaman tersebut saya juga menemukan kalimat Try searching using the form in the sidebar. Bang Rudy mungkin lupa mengeditnya.

Identifikasi bahasa belum disertakan di deklarasi

<html xmlns="http://www.w3.org/1999/xhtml" lang="...?">

Ini berguna bagi pembaca layar komputer untuk mengidentifikasi dialek bahasa konten.

Ada duplikasi tag

<meta name="generator" content="WordPress 3.0.1" />

Terkait dengan keamanan, ada yang menyarankan untuk menghilangkan tampilan informasi versi ini.

Apakah bagian/elemen <div class="navigation"> akan dimanfaatkan, atau lupa dihapus?

Elemen .yellow yang memuat info Gravatar sebaiknya dibuat sama lebar dengan kolom isian komentar. Misal pengaturan padding:12px dan width:97% mungkin membantu. Beberapa cara penulisan CSS masih berpeluang diringkas.

Entah apakah tag <div> yang cenderung ‘div-itis’—‘infeksi’ div—di ‘threaded comment’ memang dibutuhkan. Akan menjadi ‘article-itis’ di HTML5?

Untuk aksesibilitas Web yang maksimal, fitur ‘javascript’ onmousedown pada “kutip” sebaiknya disertai onkeydown bagi pengguna papan ketik (‘keyboard’, ‘keypad’).

Perkakas penguji aksesibilitas semiotomatis achecker.ca memberi peringatan sejenis ini, Repair: Replace your b (bold) elements with em or strong. Saya tidak setuju sepenuhnya karena belum menemukan sumber tepercaya terkait rekomendasi dimaksud untuk tipe dokumen XHTML. Pemakaian tag ini terkait juga dengan tag XHTML di kolom komentar (Dani Iswara .com). Mana yang sudah dianggap usang/’deprecated’, mana yang didefinisikan ulang di HTML5. Layak menjadi perhatian bagi yang berminat mengganti doctype blognya. Atau, serahkan pada ‘plugin’ dan pengaturan functions.php saja?

Tinjauan ini disesuaikan dengan Evaluasi Weblog Mandiri versi saya (Dani Iswara .com).

Silakan koreksi dan tambahannya.