pedoman Gaya/Aksesibilitas

Aksesibilitas web adalah tujuan untuk membuat suatu halaman web lebih mudah dibaca dan ditelusuri.

Halaman ini merupakan pedoman di Wiki bahasa Indonesia.
pedoman Gaya/Aksesibilitas
Isinya telah diterima luas oleh para pengguna dan dianggap sebagai standar yang harus diikuti oleh semua pengguna, meskipun sebaiknya dipahami dengan akal sehat, dan pengecualian dapat berlaku sewaktu-waktu. Segala penyuntingan substansial yang dilakukan di halaman ini harus menggambarkan konsensus. Jika Anda ragu, diskusikan terlebih dahulu di halaman pembicaraan.

Meskipun terutama dimaksudkan untuk membantu mereka yang mempunyai disabilitas, juga dapat memberi manfaat bagi semua pembaca. Pelaksanaannya mengacu kepada panduan WCAG 2.0 (yaitu ISO/IEC 40500:2012) yang menjadi dasar usulan-usulan berikut ini. Artikel-artikel yang mengikuti panduan ini akan lebih mudah dibaca dan disunting oleh siapa saja.

Struktur artikel

Suatu struktur artikel yang terstandardisasi akan meningkatkan aksesibilitas, karena memudahkan para pengguna untuk menemukan sebuah bagian isi pada lokasi halaman tertentu. Misalnya, seorang pengguna tunanetra mencari pranala disambiguasi. Jika ia tidak mendapatinya pada bagian awal halaman, ia akan tahu bahwa tidak ada disambiguasi dan tidak perlu membaca seluruh halaman untuk menemukan hal itu.

Standardisasi sudah merupakan kebiasaan pada Wikipedia, jadi panduan-panduan yang perlu diikuti hanyalah Wiki: Pedoman tata letak dan Wiki: Bagian pembuka.

Judul bagian

Judul-judul bagian harus jelas dan dalam urutan yang konsisten ("Lihat pula" - "Referensi" - "Pustaka tambahan" - "Pranala luar").

Judul bagian harus dibuat bertingkat secara berurutan, dimulai dengan tingkat 2 (==), kemudian tingkat 3 (===) dan seterusnya (tingkat 1 tidak digunakan, karena ini merupakan judul halaman yang otomatis dibuat), juga tidak boleh dipakai sembarang urutan (misalnya dipakai untuk penekanan, bukan sebagai judul bagian), maupuan tidak boleh diloncati urutannya.

Jangan menggunakan judul bagian semu menggunakan huruf cetak tebal ataupun tanda titik koma. Mesin pembaca layar dan jenis lain hanya dapat menggunakan judul bagian yang terformat dengan benar. Jika ingin mengurangi besarnya daftar isi (TOC), lebih baik menggunakan {{TOC limit}}.

Contoh penggunaan (dan penyalahgunaan) judul bagian
Benar Kacau Terloncati Semu

[Pembuka artikel]
==Bagian== [level 2]
===Sub-bagian=== [3]
==Bagian== [2]
===Sub-bagian=== [3]
====Sub-sub-bagian==== [4]
==Bagian== [2]

[Pembuka artikel]
====Bagian?==== [4]
===Bagian?=== [3]
==Bagian?== [2]
==Bagian?== [2]
====Bagian?==== [4]
===Bagian?=== [2]

[Pembuka artikel]
[Bagian tingkat-2 tidak ada]
===Bagian?=== [3]
==Bagian== [2]
[Sub-bagian tingkat-3 tidak ada]
====Sub-bagian?==== [4]
==Bagian== [2]

[Pembuka artikel]
==Bagian== [level 2]
===Sub-bagian=== [3]
'''Sub-bagian''' [Judul bagian semu]
==Bagian== [2]
===Sub-bagian=== [3]
;Sub-sub-bagian [Judul bagian semu]
==Bagian== [2]
==Sub-sub-section== [3]

Elemen terapung

Dalam wikicode, elemen terapung harus selalu ditempatkan di dalam bagiannya. Misalnya, suatu gambar dapat ditayangkan di bawah sebuah judul bagian karena elemen terapung lainnya mendorongnya ke bawah, sedangkan dalam wikisyntax ditempatkan pada permulaan halaman. Gambar-gambar itu harus disisipkan di dalam bagiannya.

Resolusi

Artikel-artikel Wikipedia seharusnya dapat diakses oleh para pembaca menggunakan perangkat berlayar sempit, atau pengguna layar dengan resolusi rendah. Resolusi terendah yang dianggap memadai tanpa mengganggu pengguna lain adalah 1024×768; semua artikel seharusnya kelihatan baik pada resolusi ini tanpa memerlukan scroll mendatar berlebihan. Hal ini kadangkala menjadi masalah pada artikel-artikel yang memuat gambar-gambar pada kedua sisi layar; meskipun resolusi yang lebih rendah cenderung merentangkan alinea-alinea secara vertikal, memindahkan gambar-gambar ke arah bawah atau atas, harap diperhatikan untuk tidak menambahkan gambar-gambar atau isi terapung lainnya pada kedua sisi layar secara bersamaan. Tabel-tabel dan gambar-gambar berukuran besar dapat juga menimbulkan persoalan; kadang-kadang penggeseran horisontal tidak dapat dihindarkan, tetapi pertimbangkan untuk mengatur kembali tabel-tabel yang lebar secara vertikal bukan secara horisontal.

Teks

  • WP:NOSTRIKE
  • WP:NOSYMBOLS

Dalam suatu artikel, jangan menggunakan "garis coret tengah" untuk menghapus teks yang tidak disetujui. Lebih baik diberi komentar dengan "" atau dihapus sama sekali. Secara otomatis, kebanyakan pembaca layar tidak mengindikasikan atribut presentasi teks (cetak tebal, cetak miring, garis bawah) atau bahkan atribut semantik teks (penekanan/emphasis, penting, penghapusan), sehingga teks yang dicoret tengah dibaca normal seperti teks lain. (Para penyunting yang berpartisipasi dalam debat kebijakan dan penghapusan pada Wikipedia dianjurkan untuk menyalakan penyuaraan atribut teks bilamana menerapkannya, mengingat pencoretan teks sangat umum terjadi pada diskusi internal Wikipedia).

{:en:Screen reader|Pembaca layar]] tanpa dukungan Unicode umumnya membaca suatu karakter di luar Latin-1 dan Windows-1252 sebagai "tanda tanya", dan bahkan dalam JAWS, pembaca layar paling populer, karakter-karakter Unicode sangat sulit dibaca dengan benar.

  1. Berikan "transliterasi" atau "alih aksara" untuk semua teks yang ditulis dalam sistem yang tidak menggunakan huruf Latin, tetapi karakter bukan Latin itu penting dalam konteks asalnya, misalnya, nama orang, tempat, benda, dsb.
  2. Jangan menggunakan simbol yang tak terlafalkan sepertu ♥ (simbol "hati"); sebaliknya, gunakan gambar dengan teks alt.
  3. Simbol-simbol yang menyebabkan masalah untuk pembaca layar bisa jadi sudah mempunyai templat yang dibuat untuk menghasilkan suatu gambar dan teks alt. Contohnya adalah {{}}.

Jangan menggunakan teknik-teknik yang membutuhkan interaksi untuk menyampaikan informasi, seperti tooltip atau teks "melayang" lainnya. Singkatan-singkatan tidak tercakup dalam persyaratan ini, sehingga templat {{abbr}} dapat digunakan untuk mengindikasikan bentuk kepanjangan dari suatu kata.

Jangan menyisipkan tanda baris baru di dalam suatu kaliman, karena ini akan menyulitkan penyuntingan dengan pembaca layar. Baris baru tunggal dapat diberikan di akhir suatu kalimat, yang dapat membantu para penyunting.

Jangan sering menggunakan jenis huruf dengan ukuran yang lebih kecil. Hindari penggunaan huruf-huruf berukuran sangat kecil pada elemen-elemen yang telah menggunakan ukuran kecil, seperti kotak info, navbox, dan bagian referensi. Tidak boleh menggunakan huruf yang berukuran lebih kecil dari 85% ukuran huruf normal pada suatu halaman (atau 11px).

Bahasa-bahasa asing

Kata-kata atau frasa yang bukan termasuk bahasa Indonesia seharusnya dimasukkan dalam kode {{lang}}, yang menggunakan kode bahasa ISO 639, jadi:

{{lang|fr|Assemblée nationale}}

akan ditayangkan sebagai

Assemblée nationale.

Pertimbangan: Templat:Tnl memungkinkan speech synthesizer" (alat penyuara perkataan) untuk melafalkan teks dalam bahasa yang benar. Juga ada banyak penggunaan lain; lihat "Pertimbangan templat bahasa" (dalam bahasa Inggris) untuk daftar panjang manfaat-manfaatnya.

Pranala

  1. Buatlah pemerian pranala yang baik, khususnya untuk pranala luar (hindari pranala bertulisan hanya "klik di sini!", "ini").
  2. Jangan menggunakan karakter Unicode seperti ikon; sebaiknya gunakan ikon dengan teks alt. Misalnya, sebuah karakter seperti "→" tidak dapat direproduksi menjadi teks yang terbaca oleh sebuah pembaca layar, dan biasanya dibaca sebagai "tanda tanya".

Warna

pedoman Gaya/Aksesibilitas 
Sepasang tangkapan layar yang menunjukkan efek buta warna merah/hijau pada keterbacaan

Warna paling banyak dijumpai dalam artikel-artikel Wikipedia di dalam templat dan tabel. Untuk melihat warna-warna yang tersedia, lihat Daftar warna. Untuk bantuan teknis penggunaan warna, lihat Bantuan:Penggunaan warna.

Artikel-artikel yang menggunakan warna harus tetap mempertimbangkan aksesibilitas, sebagai berikut:

  • Pastikan bahwa pemberian warna bukanlah satu-satunya metode untuk menekankan pentingnya suatu informasi. Khususnya, jangan menggunakan teks atau latar belakang berwarna kecuali statusnya juga mengindikasikan penggunaan simbol-simbol lain seperti "simbol yang dapat diakses" cocok untuk suatu label catatan, atau catatan kaki. Kalau tidak, pengguna atau pembaca tunanetra yang mengakses Wikipedia melalui suatu hasil cetak atau alat tanpa layar berwarna tidak dapat menerima makna pewarnaan informasi itu.
  • Sebuah pranala harus dapat dikenali jelas sebagai suatu pranala oleh para pembaca.
  • Beberapa pembaca Wikipedia mungkin menderita buta warna total maupun parsial atau tunanetra. Pastikan kontras teks dengan latar belakang mencapai setidaknya pada level AA berdasarkan Panduan Aksesibilitas Konten Web (WCAG) 2.0, dan level AAA jika memungkinkan (lihat "Understanding SC 1.4.3: Contrast (Minimum)").

Elemen blok

Daftar

  • WP:LISTGAP
  • WP:LISTGAPS

Jangan memisahkan butir-butir isi dalam daftar, termasuk butir isi dalam suatu daftar definisi (suatu daftar yang dibuat dengan pengarahan tanda titik koma dan titik dua) atau suatu daftar tak teratur, dengan membiarkan batas baris kosong atau kolom tabular di antara isi, karena ini menyebabkan MediaWiki untuk mengakhiri suatu daftar dan memulai daftar baru. Hal ini menyebabkan pembaca layar mengira ada banyak daftar padahal hanya ada satu. Suatu daftar dimaksudkan untuk mengelompokkan elemen-elemen yang berjenis sama, dan memisahkan kelompok-kelompok ini akan mengacaukan pengguna pembaca layar. Format yang tidak tepat dapat menyebabkan lebih dari tiga kali lipat waktu yang dibutuhkan untuk membaca daftar.

Indentasi

  • WP:INDENTGAP
  • WP:INDENTGAPS

Tanda titik dua di awal baris memberi indent pada baris itu. Ini digunakan, misalnya, untuk mengindikasikan jawaban diskusi pada halaman pembicaraan. Indentasi ini diperoleh menggunakan daftar definisi HTML.

Daftar vertikal

Daftar vertikal dengan bullet

Untuk daftar vertikal dengan bullet, jangan memisahkan setiap butir isi dengan memberi baris kosong di antaranya. Jika setiap butir isi dalam daftar dipisahkan oleh satu atau lebih baris kosong, daftar HTML akan berakhir sebelum baris baru, dan daftar HTML lain akan dibuka setelah baris baru. Hal ini akan memisahkan satu daftar menjadi daftar-daftar kecil pada pembaca layar. Misalnya untuk pengkodean:

* Bunga putih * Bunga kuning  * Bunga rosa  * Bunga merah 

software itu akan menekan baris kosong sehingga tampak sebagai berikut:

  • Bunga putih
  • Bunga kuning
  • Bunga rosa
  • Bunga merah

tetapi akan dibaca oleh pembaca layar sebagai: "Daftar terdiri dari of 2 butir isi: (bullet) Bunga putih, (bullet) Bunga kuning, daftar berakhir. Daftar terdiri satu butir isi: (bullet) Bunga rosa, daftar berakhir. Daftar terdiri satu butir isi: (bullet) Bunga merah, daftar berakhir."

Jangan memisahkan butir-butir isi dengan baris pemisah (
). Gunakan satu dari metode-metode berikut.

Daftar vertikal tanpa bullet
  • WP:PLIST
  • WP:VLIST

Untuk daftar-daftar tanpa bullet yang berurutan turun pada halaman, tersedia templat {{plainlist}} dan {{unbulleted list}}, untuk meningkatkan aksesibilitas dan pengertian semantik dengan penandaan apa yang jelas merupakan daftar bukan yang menyertakan baris baru
, yang seharusnya tidak digunakan - lihat di atas. Alternatifnya, pada templat-templat seperti Navbox dan sejenisnya, atau wadah yang sesuai, daftar-daftar itu dapat diatur gayanya seperti kelas "plainlist", jadi:

    | listclass = plainlist atau
    | bodyclass = plainlist

Dalam kotak-kotak info:

    | rowclass = plainlist atau
    | bodyclass = plainlist

dapat digunakan. Lihat pula Manual gaya: Daftar § Daftar tanpa bulleted. Lihat WP:NAV untuk detail lebih lanjut mengenai templat Navigasi.

Daftar horisontal

  • WP:HLIST

Untuk daftar-daftar yang memakan lebih dari satu halaman, dan dalam baris-baris tunggal di dalam kotak-kotak info atau tabel lain, templat-templat {{flatlist}} dan {{hlist}} ("h[orizontal]list"; "daftar horisontal") tersedia untuk memperbaiki aksesibilitas dan pengertian semantik. Ciri ini menggunakan markup HTML yang benar untuk setiap butir isi, daripada menggunakan karakter bullet yang, misalnya, akan dibaca keras-keras (misalnya "titik kucing titik anjing titik kuda titik ...") oleh software pembantu bagi para tunanetra.

Alternatifnya, pada templat-templat seperti Navbox dan sejenisnya, atau wadah yang sesuai, daftar-daftar itu dapat diatur gayanya seperti kelas "hlist", jadi:

    | listclass = hlist atau
    | bodyclass = hlist

Dalam kotak-kotak info:

    | rowclass = hlist atau
    | bodyclass = hlist

dapat digunakan. Lihat WP:NAV untuk lebih jelasnya mengenai templat Navigasi.

Tabel

Pembaca layar atau alat browsing web yang lain dapat menggunakan tag tabel khusus untuk membantu pengguna menavigasi data di dalam tabel itu.

Tabel data

  • WP:DTAB
  • MOS:DTAB
{| |+ [teks keterangan] |- ! scope="col" | [judul kolom 1] ! scope="col" | [judul kolom 2] ! scope="col" | [judul kolom 3] |- ! scope="row" | [judul baris 1] | [sel normal 1,2] || [sel normal 1,3] |- ! scope="row" | [judul baris 2] | [sel normal 2,2] || [sel normal 2,3] ... |} 
    Keterangan ( |+ )
    Suatu keterangan adalah judul tabel, menyatakan hakikatnya.
    Judul baris & kolom ( ! )
    Seperti keterangan, ini membantu presentasi informasi dalam struktur logis bagi pembaca. Judul-judul bagian ini membantu pembaca layar untuk menafsirkan informasi judul itu secara tepat mengenai sel-sel data. Misalnya, informasi judul itu akan dibaca sebelum sel data, atau informasi judul itu dapat cepat diberikan jika diminta.
    "Scope" untuk judul bagian ( ! scope="col" | dan ! scope="row" | )
    Ini jelas mengidentifikasi judul-judul bagian baik judul baris maupun judul kolom. Judul-judul ini sekarang dapat dikaitkan ke sel-sel yang berhubungan.

"Tutorial tabel" (dalam bahasa Inggris) memuat persyaratan-persyaratan detail mengenai:

  1. Pemberian keterangan tabel yang benar
  2. Struktur judul bagian yang benar
  3. Gambar dan warna
  4. Penghindaran tabel bertumpuk

Tata letak tabel

  • WP:LTAB

Hindari penggunakan tabel hanya untuk memperbaiki tata letak. Pilihan terbaik adalah menggunakan kode-kode HTML

untuk atribut blok dan gaya karena memberikan fleksibilitas yang luas.

{| class="duhoc-id toccolours table-responsive" style="width:94%" | style="text-align: center; background-color: #ccf;" | '''Judul''' |- | [sel normal] || [sel normal] |- | [sel normal] || [sel normal] |} 

Gambar

  • WP:ACCIM
  1. Gambar-gambar seharusnya diberi atribut alt, sekalipun gambar kosong, yang berfungsi sebagai pengganti untuk gambar bagi para tunanetra, spider mesin pencari, dan pengguna non-visual lain.
  2. Dalam kebanyakan kasus, gambar-gambar perlu memuat suatu keterangan (caption), baik menggunakan sintaksis gambar yang sudah tersedia (built in) atau suatu baris sekunder dalam teks. Keterangan gambar harus secara singkat menjelaskan makna gambar, yaitu hanya informasi paling esensial saja.
  3. Panduan ini menyertakan teks alt untuk persamaan dengan format LaTeX dalam modus .

Animasi, video dan audio

Animasi

Agar dapat diakses, sebuah animasi (GIF – Graphics Interchange Format) seharusnya:

  • tidak melebihi 5 detik panjangnya (sehingga menjadi suatu elemen dekoratif murni), atau
  • dilengkapi dengan fungsi-fungsi kontrol (stop, pause, play).

Singkatnya, kebanyakan GIF animasi harus dikonversi menjadi video (mengenai caranya, lihat tutorial converting animated GIFs to Theora OGG).

Video

Subtitle dapat ditambahkan kepada video, dalam format teks yang diatur waktu. Ada halaman bantuan untuk ini pada commons:Commons:Video#Subtitles and closed captioning. Subtitle dimaksudkan untuk mentranskrip percakapan.

Audio

Subtitle untuk percakapan, lirik lagu, dialog, dan sebagainya, dapat dengan mudah ditambahkan pada berkas audio. Metodenya mirip dengan untuk video: commons:Commons:Video#Subtitles and closed captioning.

Pilihan gaya dan markup

  • WP:Deviations

Praktik terbaik: Gunakan Wikimarkup dan kelas-kelas CSS daripada metode alternatif

Umumnya, gaya untuk tabel atau elemen tingkat blok lainnya harus diatur menggunakan kelas-kelas CSS, bukan dengan atribut gaya inline (dalam baris). CSS untuk seluruh situs dalam MediaWiki:Common.css telah dites lebih cermat untuk memastikan aksesibilitas (yaitu kontras warna yang cukup) dan kompatibilitas dengan berbagai browser.

Pengguna dengan dukungan CSS atau JavaScript yang terbatas

Artikel-artikel Wikipedia harus dapat diakses oleh para pembaca yang menggunakan browser atau alat-alat dengan dukungan terbatas atau tanpa dukungan untuk JavaScript atau Cascading Style Sheets. Namun, di sisi lain diakui tidak mungkin untuk memberikan mutu penampilan yang sama bagi para pengguna tersebut tanpa menghindari ciri-ciri yang bermanfaat bagi pengguna dengan browser yang lebih canggih. Jadi, hanya perlu dihindari penggunaan ciri-ciri yang menyebabkan isi menjadi tersembunyi atau kacau ketika tidak ada dukungan CSS atau JavaScript.

Lihat pula

Referensi

Khusus

Umum

Teknis

Pranala luar

Tags:

pedoman Gaya/Aksesibilitas Struktur artikelpedoman Gaya/Aksesibilitas Tekspedoman Gaya/Aksesibilitas Bahasa-bahasa asingpedoman Gaya/Aksesibilitas Pranalapedoman Gaya/Aksesibilitas Warnapedoman Gaya/Aksesibilitas Elemen blokpedoman Gaya/Aksesibilitas Gambarpedoman Gaya/Aksesibilitas Animasi, video dan audiopedoman Gaya/Aksesibilitas Pilihan gaya dan markuppedoman Gaya/Aksesibilitas Lihat pulapedoman Gaya/Aksesibilitas Referensipedoman Gaya/Aksesibilitas Pranala luarpedoman Gaya/AksesibilitasDisabilitasOrganisasi Internasional untuk Standardisasien:Web Content Accessibility Guidelines

🔥 Trending searches on Wiki Bahasa Indonesia:

Salahuddin AyyubiBabe CabiitaHukum di IndonesiaARantai makananV (penyanyi)Juventus F.C.ExhumaASDP Indonesia FerryLeluhurAri SigitKota BandungSapiDi Antara Dua CintaBasmalahMinal 'Aidin wal-FaizinOrganisasiKota BogorDompet elektronikSaldi IsraKim Jong-unBahasa IndonesiaSuku BaduiKebijakan moneterHybe CorporationNorthrop Grumman B-2 SpiritEdy RahmayadiMin Hee-jinSayuti MelikYouTubeTere LiyeAbdurrahman WahidAhmad YaniMohamad Tonny HarjonoSoehartoNarasiDaftar negara menurut jumlah pendudukDinamika sosialSuku DayakDanau TobaWings (perusahaan)Dekrit Presiden Republik Indonesia 1959ManajemenSydneyPerdagangan internasionalSerie AGlenn FredlyPiala FAAline AditaRatu TishaByeon Woo-seokPemilihan umum Presiden Indonesia 2024TokopediaLee Je-noSuku BetawiPSuhartoyoProvinsi di IndonesiaDaftar Badan Usaha Milik Negara di IndonesiaM. Naudi NurdikaSriwijayaAnimeBatikTertawan HatiMedianThailandBank sentralSejarah IndonesiaMalaysiaRendangTirto UtomoS.S. LazioSimbolKapitalisme0 (angka)FilipinaKoreaSiklus airHari Bumi🡆 More