Tinjauan ‘Theme’ WordPress-Karya Cekerholic

Diperbarui 12 November 2017 oleh Dani Iswara

Kali ini ada permintaan tinjauan tema/'theme' WordPress dari Mas Aris pengelola blog Cekerholic. Sebelumnya, blog Mas Aris pernah saya tinjau di situs ini. Cek kembali Tinjauan Blog Cekerholic (Dani Iswara .com). Tema yang diajukan Mas Aris Mini Claw, juga mengusung HTML5 dan CSS3. Tampak sederhana, tapi ada beberapa ruang untuk perbaikan.

Karena memakai HTML5, peramban Google Chrome 5.0.375.127 di Linux Arch saya pakai untuk evaluasi, dibantu Firefox beserta beberapa pengayanya.

Evaluasi tampilan tanpa gambar

Tema blog ini tampak dioptimalkan untuk lebar/resolusi layar 1024 piksel. Saat diakses dengan jendela peramban berukuran lebar 900 piksel, tepi konten sebelah kiri (dari sudut pandang pengguna) terasa kurang 'whitespace'-nya. Serupa seperti blog.tempointeraktif.com.

Menu navigasi ada di paling atas berdampingan dengan fitur pencarian–yang disisipkan dalam tag nav. Tampilan menu kurang menonjol. Submenu Level 2 dan Level 3 di bawah menu Level 1 tampak tumpang tindih dengan kotak pencarian saat diakses tanpa gambar.

Bagian header diposisikan di bawah menu navigasi. Visual selanjutnya tampak 2 kolom. Satu kolom di sebelah kiri untuk konten utama. Satunya di sisi kanan serupa bilah sisi/'sidebar' yang dikenal sebagai elemen aside di HTML5.

Kombinasi warna akan dibahas tersendiri di subtopik selanjutnya.

Kontras warna

Di berkas CSS dinyatakan

body {background:transparent url("images/bg.png");color:#000305;...

Tanpa deklarasi warna latar yang tegas, hanya memakai transparan, menurut saya halaman Web berisiko menjadi tidak terbaca. Asumsinya, pengguna mungkin saja ada yang memakai pilihan warna latar sendiri di sisi peramban Webnya. Berpeluang bentrok dengan warna teks konten. Di sinilah fungsi peringatan properti color dan background-color saat validasi CSS. Kadang penggunaan deklarasi background-color atau deklarasi warna pada properti background terkesan boros atau remeh bagi sebagian pembuat desain blog sehingga jarang disertakan.

Kombinasi warna varian hitam/abu-abu memang agak berisiko. Pernah saya tulis di Inaccessibility of visually usable Website (Dani Iswara .com). Maksud hati ingin menonjolkan elemen yang lain, tapi bagian tertentu menjadi terlalu samar dibaca. Menurut penglihatan saya, warna abu-abu di kotak pencarian, 'post meta data', dan teks di kolom isian komentar memiliki kontras yang kurang.

Saya memakai peramban Web Firefox 3.6.8-1 di Linux Arch dengan pengaturan warna latar standar yaitu putih atau kode warna #fff. Dilakukan konfirmasi kontras warna dengan pengaya ('add-ons') 'WCAG Color Checker'. Hasilnya, kombinasi latar #fff dengan teks berwarna #999 dan #777 tidak sesuai dengan rekomendasi WCAG 2.0 Level AA.

Struktur dokumen, semantik, dan fungsi

Tag <label> tidak disertakan di struktur kotak pencarian dan kolom isian komentar (<textarea>). Tag ini bermanfaat bagi aksesibilitas pembaca layar komputer/'screen reader'.

Urutan judul, subjudul, dan anak subjudul tampak logis. Struktur 'headings' terdiri dari tag h1 hingga h3. Tidak seperti situs 'New York Times' yang memakai h1-h6!

Penggunaan tag <section>, <article>, dan <div> sudah baik menurut saya. Tag <section> difungsikan untuk bagian konten/komentar yang bisa berdiri sendiri.

Tag <article> untuk bagian konten yang berhubungan, punya sistem judul/subjudul/anak sub judul sendiri, dan bermakna lebih semantik. Sepertinya sudah tepat diaplikasikan di bagian 'posting', cerita, atau entri blog. Elemen article bisa diinterpretasikan sebagai suatu topik tersendiri jika didistribusikan via sindikasi konten.

Tag <div> dipakai jika tidak memenuhi kedua fungsi elemen di atas atau menyesuaikan dengan 'core' WordPress saat ini.

Apakah elemen <div style="clear:both"></div> di bilah sisi memang dibutuhkan?

Posisi elemen meta data tidak konsisten. Di halaman depan, meta data terletak di bawah ringkasan. Di tulisan tunggal/'single post', meta data ada di bawah judul tulisan. Dari sisi semantik, meta data masih termasuk dalam tag <header> di HTML5. Lebih semantik jika keterangan waktu publikasi pada meta data disajikan dengan tag <pubdate>, <time>, atau <datetime>.

Tag <small> versi HTML5 memungkinkan digunakan di elemen footer. Kecuali memang butuh kustomisasi sedemikian rupa.

Saat diakses tanpa gambar, tombol 'Click here to cancel reply' tampak terlalu dekat jaraknya dengan teks 'Beri Komentar' di sebelah kirinya.

Fungsi CSS focus tampak belum diimplementasikan. Sulit mengetahui posisi kursor jika halaman diakses hanya dengan papan ketik saja, tanpa tetikus.

Menu/tautan 'Return top' di bagian footer mestinya benar-benar kembali ke bagian paling atas halaman, termasuk menu navigasi. Saat uji coba ini, tautan itu hanya menuju ke bagian <header> atau #head.