Wikipedia:Pedoman gaya/Aksesibilitas: Perbedaan antara revisi

Dari Wikipedia bahasa Indonesia, ensiklopedia bebas
Jelajahi riwayat secara interaktif
← Revisi sebelumnyaRevisi selanjutnya →
Konten dihapus Konten ditambahkan
VisualTeks wiki
Aldnonymous (bicara | kontrib)
Peninjau
14.150 suntingan
Tidak ada ringkasan suntingan
Baris 21: Baris 21:
Judul bagian harus dibuat bertingkat secara berurutan, dimulai dengan tingkat 2 (<code>==</code>), kemudian tingkat 3 (<code>===</code>) 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.
Judul bagian harus dibuat bertingkat secara berurutan, dimulai dengan tingkat 2 (<code>==</code>), kemudian tingkat 3 (<code>===</code>) 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 {{t|TOC limit}}.
Jangan menggunakan judul bagian semu menggunakan huruf cetak tebal ataupun tanda titik koma. [[:en:Screen reader|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 {{t|TOC limit}}.


{| class="wikitable"
{| class="wikitable"
Baris 84: Baris 84:
Dalam suatu artikel, jangan menggunakan [[:en:strikethrough|"garis coret tengah"]] untuk menghapus teks yang tidak disetujui. Lebih baik diberi komentar dengan <nowiki>"<!--" and "-->"</nowiki> 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).
Dalam suatu artikel, jangan menggunakan [[:en:strikethrough|"garis coret tengah"]] untuk menghapus teks yang tidak disetujui. Lebih baik diberi komentar dengan <nowiki>"<!--" and "-->"</nowiki> 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).


Pembaca layar tanpa dukungan Unicode umumnya membaca suatu karakter di luar [[Latin-1]] dan [[Windows-1252]] sebagai "tanda tanya", dan bahkan dalam [[:en:JAWS (screen reader)|JAWS]], pembaca layar paling populer, karakter-karakter Unicode sangat sulit dibaca dengan benar.
{: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 [[:en:JAWS (screen reader)|JAWS]], pembaca layar paling populer, karakter-karakter Unicode sangat sulit dibaca dengan benar.
# 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.
# 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.
# Jangan menggunakan simbol yang tak terlafalkan sepertu ♥ (simbol "hati"); sebaliknya, gunakan gambar dengan teks alt.<ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F26.html| title = F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information| work = Techniques for WCAG 2.0 | accessdate=1 January 2011|publisher = [[W3C]]}}</ref>
# Jangan menggunakan simbol yang tak terlafalkan sepertu ♥ (simbol "hati"); sebaliknya, gunakan gambar dengan teks alt.<ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F26.html| title = F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information| work = Techniques for WCAG 2.0 | accessdate=1 January 2011|publisher = [[W3C]]}}</ref>
Baris 113: Baris 113:
== Pranala ==
== Pranala ==


# Buatlah pemerian pranala yang baik, khususnya untuk pranala luar (hindari "[[klik di sini]]!", "[http://example.com/ ini]").<ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G91.html | title = G91: Providing link text that describes the purpose of a link| work = Techniques for WCAG 2.0 | accessdate = 1 January 2011| publisher = [[W3C]]}}</ref><ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F84 | title = F84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text| work = Techniques for WCAG 2.0 | publisher = [[W3C]] | accessdate = 1 January 2011}}</ref>
# Buatlah pemerian pranala yang baik, khususnya untuk pranala luar (hindari pranala bertulisan hanya "''klik di sini''!", "[http://example.com/ ini]").<ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G91.html | title = G91: Providing link text that describes the purpose of a link| work = Techniques for WCAG 2.0 | accessdate = 1 January 2011| publisher = [[W3C]]}}</ref><ref>{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F84 | title = F84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text| work = Techniques for WCAG 2.0 | publisher = [[W3C]] | accessdate = 1 January 2011}}</ref>
# 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 [[:en:screen reader|pembaca layar]], dan biasanya dibaca sebagai "tanda tanya".
# 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 [[:en:screen reader|pembaca layar]], dan biasanya dibaca sebagai "tanda tanya".


Baris 129: Baris 129:
-->
-->
'''Warna''' paling banyak dijumpai dalam artikel-artikel Wikipedia di dalam [[:en:Wikipedia:Template namespace|templat]] dan [[:en:Wikipedia:How to use tables|tabel]]. Untuk melihat warna-warna yang tersedia, lihat [[Daftar warna]]. Untuk bantuan teknis penggunaan warna, lihat [[:en:Help:Using colours|Bantuan:Penggunaan warna]].
'''Warna''' paling banyak dijumpai dalam artikel-artikel Wikipedia di dalam [[:en:Wikipedia:Template namespace|templat]] dan [[:en:Wikipedia:How to use tables|tabel]]. Untuk melihat warna-warna yang tersedia, lihat [[Daftar warna]]. Untuk bantuan teknis penggunaan warna, lihat [[:en:Help:Using colours|Bantuan:Penggunaan warna]].

⚫
<!--
Artikel-artikel yang menggunakan warna harus tetap mempertimbangkan aksesibilitas<!--, sebagai berikut::
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 [[#Teks|"simbol yang dapat diakses"]] cocok untuk suatu label catatan, atau [[:en:Wikipedia:Footnotes|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.
* Ensure that color is not the only method used to convey important information. Especially, do not use colored text or background unless its status is also indicated using another method such as an [[#Text|accessible symbol]] matched to a legend, or [[Wikipedia:Footnotes|footnote labels]]. Otherwise, [[blindness|blind]] users or readers accessing Wikipedia through a printout or device without a color screen will not receive that information.
* Sebuah pranala harus dapat dikenali jelas sebagai suatu pranala oleh para pembaca.
* Links should clearly be identifiable as a link to our readers.
* Some readers of Wikipedia are partially or fully [[color blindness|color blind]]. Ensure the contrast of the text with its background reaches at least [[WCAG|WCAG 2.0's]] AA level, and AAA level when feasible. Here is a selection of tools that can be used to check that the contrast is correct:
<!--* Some readers of Wikipedia are partially or fully [[color blindness|color blind]]. Ensure the contrast of the text with its background reaches at least [[WCAG|WCAG 2.0's]] AA level, and AAA level when feasible. Here is a selection of tools that can be used to check that the contrast is correct:
** The [http://www.paciellogroup.com/resources/contrastAnalyser#download Color Contrast Analyser] enables you to pick colors on the page, and review their contrast thoroughly. However, be sure to only use the up-to-date "luminosity" algorithm, and not the "color brightness/difference" which is outdated.
** The [http://www.paciellogroup.com/resources/contrastAnalyser#download Color Contrast Analyser] enables you to pick colors on the page, and review their contrast thoroughly. However, be sure to only use the up-to-date "luminosity" algorithm, and not the "color brightness/difference" which is outdated.
** You can also use [http://snook.ca/technical/colour_contrast/colour.html Snook's color contrast tool], which is entirely up-to-date.
** You can also use [http://snook.ca/technical/colour_contrast/colour.html Snook's color contrast tool], which is entirely up-to-date.
Baris 141: Baris 141:
** [http://colorbrewer2.org/ Color Brewer 2.0] provides safe color schemes for maps and detailed explanations.
** [http://colorbrewer2.org/ Color Brewer 2.0] provides safe color schemes for maps and detailed explanations.
** [http://colorfilter.wickline.org/?j=1;t=a Colorfilter.wickline.org] or [http://www.vischeck.com/vischeck/vischeckURL.php vischeck.com] are tools for simulating color blind vision.
** [http://colorfilter.wickline.org/?j=1;t=a Colorfilter.wickline.org] or [http://www.vischeck.com/vischeck/vischeckURL.php vischeck.com] are tools for simulating color blind vision.
* If an article overuses colors, and you don't know how to fix it yourself, you can ask for help from other editors. Place ({{Tl|Overcolored}} or {{tl|Overcoloured}}) on the top of the article:
* If an article overuses colors, and you don't know how to fix it yourself, you can ask for help from other editors. Place ({{Tl|Overcolored}} atau {{tl|Overcoloured}}) pada awal artikel:
{{Overcolored}}
{{Overcolored}}
⚫
-->

== Elemen blok ==
== Elemen blok ==
=== Daftar ===
=== Daftar ===
<!--{{see also|Wikipedia:Lists#List styles|l1=Lists: List styles}}
<!--{{see also|Wikipedia:Lists#List styles|l1=Lists: List styles}}-->
{{shortcut|WP:LISTGAP|WP:LISTGAPS}}
{{shortcut|WP:LISTGAP|WP:LISTGAPS}}

⚫
-->
Jangan memisahkan butir-butir isi dalam daftar, termasuk butir isi dalam suatu [[:en:definition list|daftar definisi]] (suatu daftar yang dibuat dengan pengarahan tanda titik koma dan titik dua) atau suatu [[:en:unordered list|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.
Jangan memisahkan butir-butir isi dalam daftar, termasuk butir isi dalam suatu [[:en:definition list|daftar definisi]] (suatu daftar yang dibuat dengan pengarahan tanda titik koma dan titik dua) atau suatu [[:en:unordered list|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 ====
==== Indentasi ====
<!--{{see also|Wikipedia:Indentation|l1=Indentation}}
<!--{{see also|Wikipedia:Indentation|l1=Indentation}}-->
{{shortcut|WP:INDENTGAP|WP:INDENTGAPS}}-->
{{shortcut|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.<!-- This is not ideal for accessibility nor semantics, but is currently in wide practice. Blank lines should not be used between indented lines as they are currently rendered as the end of a list and the start of a new one. If a space is needed, insert an extra line consisting of the same number of colons.
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.<!-- This is not ideal for accessibility nor semantics, but is currently in wide practice. Blank lines should not be used between indented lines as they are currently rendered as the end of a list and the start of a new one. If a space is needed, insert an extra line consisting of the same number of colons.
-->
-->
Baris 161: Baris 161:
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 [[WP:HTML|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:
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 [[WP:HTML|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:


<pre>* Mawar putih
<pre>* Bunga putih
* Mawar kuning
* Bunga kuning


* Mawar pink
* Bunga rosa


* Mawar merah
* Bunga merah
</pre>
</pre>
Perangkat lunak itu akan menekan baris kosong sehingga tampak sebagai berikut:
software itu akan menekan baris kosong sehingga tampak sebagai berikut:
* Mawar putih
* Bunga putih
* Mawar kuning
* Bunga kuning


* Mawar pink
* Bunga rosa


* Mawar merah
* Bunga merah


tetapi akan dibaca oleh pembaca layar sebagai: "Daftar terdiri dari of 2 butir isi: (bullet) Mawar putih, (bullet) Mawar kuning, daftar berakhir. Daftar terdiri satu butir isi: (bullet) Mawar pink, daftar berakhir. Daftar terdiri satu butir isi: (bullet) Mawar merah, akhir daftar."
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 (<nowiki><br></nowiki>). Gunakan satu dari metode-metode berikut.
Jangan memisahkan butir-butir isi dengan baris pemisah (<nowiki><br></nowiki>). Gunakan satu dari metode-metode berikut.
Baris 243: Baris 243:


; Keterangan ( <code>|+</code> ): Suatu keterangan adalah judul tabel, menyatakan hakikatnya.<ref name="H39" group="WCAG-TECH">[http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H39 H39: Using caption elements to associate data table captions with data tables], A accessibility level.</ref>
; Keterangan ( <code>|+</code> ): Suatu keterangan adalah judul tabel, menyatakan hakikatnya.<ref name="H39" group="WCAG-TECH">[http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H39 H39: Using caption elements to associate data table captions with data tables], A accessibility level.</ref>
; Judul baris & kolom (<code> ! </code>): Seperti keterangan, ini membantu presentasi informasi dalam struktur logis bagi pembaca.<ref group="WCAG-TECH">{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H51 | title = H51: Using table markup to present tabular information| accessdate = 1 January 2011| publisher = [[W3C]]}}</ref> <!--The headers help screen readers render header information about data cells. For example, header information is spoken prior to the cell data, or header information is provided on request.<ref>{{Cite web | url = http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TH | title= Table cells: The TH and TD elements | work = Techniques for WCAG 2.0 | publisher = [[W3C]] | accessdate = 1 January 2011}}</ref>
; Judul baris & kolom (<code> ! </code>): Seperti keterangan, ini membantu presentasi informasi dalam struktur logis bagi pembaca.<ref group="WCAG-TECH">{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H51 | title = H51: Using table markup to present tabular information| accessdate = 1 January 2011| publisher = [[W3C]]}}</ref> 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.<ref>{{Cite web | url = http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TH | title= Table cells: The TH and TD elements | work = Techniques for WCAG 2.0 | publisher = [[W3C]] | accessdate = 1 January 2011}}</ref>
; Scope of headers (<code> ! scope="col" | and ! scope="row" | </code>): This clearly identifies headers as either row headers or column headers. Headers can now be associated to corresponding cells.<ref name="H63" group="WCAG-TECH">{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H63.html | title = H63: Using the scope attribute to associate header cells and data cells in data tables| work = Techniques for WCAG 2.0 | accessdate = 1 January 2011| publisher = [[W3C]]}}</ref>
; "''Scope''" untuk judul bagian (<code> ! scope="col" | dan ! scope="row" | </code>): Ini jelas mengidentifikasi judul-judul bagian baik judul baris maupun judul kolom. Judul-judul ini sekarang dapat dikaitkan ke sel-sel yang berhubungan.<ref name="H63" group="WCAG-TECH">{{Cite web | url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H63.html | title = H63: Using the scope attribute to associate header cells and data cells in data tables| work = Techniques for WCAG 2.0 | accessdate = 1 January 2011| publisher = [[W3C]]}}</ref>


[[Wikipedia:Manual of Style/Accessibility/Data tables tutorial]] provides detailed requirements about:
[[:en:Wikipedia:Manual of Style/Accessibility/Data tables tutorial|"Tutorial tabel" (dalam bahasa Inggris)]] memuat persyaratan-persyaratan detail mengenai:
# Pemberian keterangan tabel yang benar
# Correct table captions
# Struktur judul bagian yang benar
# Correct headers structure
# Images and color
# Gambar dan warna
# Penghindaran tabel bertumpuk
# Avoiding nested tables


==== Layout tables ====
==== Tata letak tabel ====
{{shortcut|WP:LTAB}}
{{shortcut|WP:LTAB}}
Avoid using tables for layout purposes only. The best option is to use [[HTML]]'s <code>&lt;div&gt;</code> blocks and style attributes because they provide flexibility.
Hindari penggunakan tabel hanya untuk memperbaiki tata letak. Pilihan terbaik adalah menggunakan kode-kode [[HTML]] <code>&lt;div&gt;</code> untuk atribut blok dan gaya karena memberikan fleksibilitas yang luas.
⚫
<!--

For simple layouts tables can be an option. Especially if the only point of the table is to get a floating effect, then <code>align="right"</code> etc. will work with some browsers [[#Users with limited CSS/JavaScript support|not supporting CSS]] at all. This is in fact a verbose approximation of <code>&lt;div&gt;</code> plus CSS, and not the design sin known as (nested) "table layout".
For simple layouts tables can be an option. Especially if the only point of the table is to get a floating effect, then <code>align="right"</code> etc. will work with some browsers [[#Users with limited CSS/JavaScript support|not supporting CSS]] at all. This is in fact a verbose approximation of <code>&lt;div&gt;</code> plus CSS, and not the design sin known as (nested) "table layout".


However, to avoid accessibility barriers, when using tables for layout purposes do not use any caption, row, or column headers, and also no <code>summary</code> attribute. These structural table elements should be used only for data tables. Do not use structural elements for presentation purposes, use style sheets. For Wiki table markup this means to avoid "!" (= &lt;th&gt; in XHTML) in such cases:
However, to avoid accessibility barriers, when using tables for layout purposes do not use any caption, row, or column headers, and also no <code>summary</code> attribute. These structural table elements should be used only for data tables. Do not use structural elements for presentation purposes, use style sheets. For Wiki table markup this means to avoid "!" (= &lt;th&gt; in XHTML) in such cases:
⚫
-->

<pre>
<pre>
{| class="toccolours" style="width:94%"
{| class="toccolours" style="width:94%"
| style="text-align: center; background-color: #ccf;" | '''Title'''
| style="text-align: center; background-color: #ccf;" | '''Judul'''
|-
|-
| [normal cell] || [normal cell]
| [sel normal] || [sel normal]
|-
|-
| [normal cell] || [normal cell]
| [sel normal] || [sel normal]
|}
|}
</pre>
</pre>

⚫
-->
== Gambar ==
== Gambar ==
<!--{{Shortcut|WP:ACCIM}}
{{Shortcut|WP:ACCIM}}
{{Further|Wikipedia:Alternative text for images|Wikipedia:Manual of Style#Images|Wikipedia:Image use policy#Size}}
<!--{{Further|Wikipedia:Alternative text for images|Wikipedia:Manual of Style#Images|Wikipedia:Image use policy#Size}}
-->
-->
# Gambar-gambar seharusnya diberi [[:en:alt attribute|atribut alt]], sekalipun gambar kosong, yang berfungsi sebagai pengganti untuk gambar bagi para tunanetra, laba-laba pencari, dan pengguna non-visual lain.<!-- If additional alt text is added it should be succinct, or should refer the reader to the caption or adjacent text: see [[WP:ALT]] for more information.-->
# Gambar-gambar seharusnya diberi [[:en:alt attribute|atribut alt]], sekalipun gambar kosong, yang berfungsi sebagai pengganti untuk gambar bagi para tunanetra, laba-laba pencari, dan pengguna non-visual lain.<!-- If additional alt text is added it should be succinct, or should refer the reader to the caption or adjacent text: see [[WP:ALT]] for more information.-->
# Dalam [[:en:Wikipedia:Manual of Style/Captions#Special situations|kebanyakan kasus]], gambar-gambar perlu memuat suatu [[:en:Wikipedia:Manual of Style/Captions|keterangan (''caption'')]]<!--, either using the built in image syntax or a secondary line of text. The caption should concisely describe the meaning of the image, the essential information it is trying to convey.
# Dalam [[:en:Wikipedia:Manual of Style/Captions#Special situations|kebanyakan kasus]], gambar-gambar perlu memuat suatu [[:en:Wikipedia:Manual of Style/Captions|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.<!--
# Where possible, any charts or diagrams should have a text equivalent, or should be well-described so that users who are unable to see the image can gain some understanding of the concept.
# Where possible, any charts or diagrams should have a text equivalent, or should be well-described so that users who are unable to see the image can gain some understanding of the concept.
# Detailed image descriptions, where not appropriate for an article, should be placed on the image description page, with a note saying that activating the image link will lead to a more detailed description.
# Detailed image descriptions, where not appropriate for an article, should be placed on the image description page, with a note saying that activating the image link will lead to a more detailed description.
Baris 301: Baris 301:
=== Audio ===
=== Audio ===
Subtitle untuk percakapan, lirik lagu, dialog, dan sebagainya,<ref>{{Cite web| url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G158 | title = Providing an alternative for time-based media for audio-only content| work = Techniques for WCAG 2.0 | publisher = [[W3C]]| accessdate = 1 January 2011}}</ref> dapat dengan mudah ditambahkan pada berkas audio. Metodenya mirip dengan untuk video: [[:commons:Commons:Video#Subtitles and closed captioning]].
Subtitle untuk percakapan, lirik lagu, dialog, dan sebagainya,<ref>{{Cite web| url = http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G158 | title = Providing an alternative for time-based media for audio-only content| work = Techniques for WCAG 2.0 | publisher = [[W3C]]| accessdate = 1 January 2011}}</ref> dapat dengan mudah ditambahkan pada berkas audio. Metodenya mirip dengan untuk video: [[:commons:Commons:Video#Subtitles and closed captioning]].

<!--
== Pilihan gaya dan markup ==
== Pilihan gaya dan markup ==


Baris 308: Baris 308:
=== Best practice: Use ''Wikimarkup'' and CSS classes in preference to alternatives ===
=== Best practice: Use ''Wikimarkup'' and CSS classes in preference to alternatives ===


In general, styles for tables and other block-level elements should be set using CSS classes, not with inline style attributes. The site-wide CSS in [[MediaWiki:Common.css]] is more carefully tested to ensure accessibility (e.g. sufficient color contrast) and compatibility with a wide range of browsers. Moreover, it allows for users with very specific needs to change the color schemes in their own style sheet ([[Special:MyPage/skin.css]], or their browser's style sheet). For example, a style sheet at [[Wikipedia:Style sheets for visually impaired users]] provides higher contrast backgrounds for navboxes. The problem is that when the default site-wide classes are overridden, it makes it far more difficult for an individual to choose his/her own theme.
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. <!--Moreover, it allows for users with very specific needs to change the color schemes in their own style sheet ([[Special:MyPage/skin.css]], or their browser's style sheet). For example, a style sheet at [[Wikipedia:Style sheets for visually impaired users]] provides higher contrast backgrounds for navboxes. The problem is that when the default site-wide classes are overridden, it makes it far more difficult for an individual to choose his/her own theme.


It also creates a greater degree of professionalism by ensuring a consistent appearance between articles, and conformance to a style guide.
It also creates a greater degree of professionalism by ensuring a consistent appearance between articles, and conformance to a style guide.
Baris 315: Baris 315:


In general, articles should use [[wikimarkup]] in preference to the limited set of allowed HTML elements. In particular, do not use the HTML style tags {{tag|i|o}} and {{tag|b|o}} to format text; it is preferable to use Wiki markup '''<nowiki>''</nowiki>''' or '''<nowiki>'''</nowiki>''', or logical style tags. Of course there are natural exceptions: it may be beneficial to use {{tag|u|o}} tags to indicate something like an example of an unclickable link. The {{tag|font|o}} tag should also be avoided in article text; use logical style tags like {{tag|em|o}}, {{tag|code|o}}, or {{tag|strong|o}} to emphasise semantic differences. Use the {{tag|small|o}} semantic tag and the {{tl|big}} template to change font size, rather than setting it explicitly with the <code>font-size=</code> style attribute.
In general, articles should use [[wikimarkup]] in preference to the limited set of allowed HTML elements. In particular, do not use the HTML style tags {{tag|i|o}} and {{tag|b|o}} to format text; it is preferable to use Wiki markup '''<nowiki>''</nowiki>''' or '''<nowiki>'''</nowiki>''', or logical style tags. Of course there are natural exceptions: it may be beneficial to use {{tag|u|o}} tags to indicate something like an example of an unclickable link. The {{tag|font|o}} tag should also be avoided in article text; use logical style tags like {{tag|em|o}}, {{tag|code|o}}, or {{tag|strong|o}} to emphasise semantic differences. Use the {{tag|small|o}} semantic tag and the {{tl|big}} template to change font size, rather than setting it explicitly with the <code>font-size=</code> style attribute.
-->

=== Users with limited CSS or JavaScript support {{anchor|Scrolling and collapsible sections}} ===
=== Pengguna dengan dukungan CSS atau JavaScript yang terbatas {{anchor|Scrolling and collapsible sections}} ===
{{anchor|Users with limited CSS/JavaScript support}}<!--Old name, misusing slash; may be linked to from somewhere.-->
{{anchor|Users with limited CSS/JavaScript support}}<!--Old name, misusing slash; may be linked to from somewhere.-->
<!--{{seealso|Wikipedia:Manual of Style#Scrolling lists and collapsible content}}
<!--{{seealso|Wikipedia:Manual of Style#Scrolling lists and collapsible content}}


Wikipedia articles should be accessible to readers using browsers and devices which have limited or no support for [[JavaScript]] or [[Cascading Style Sheets]]. At the same time, it is recognised that it is impossible to provide the same quality of appearance to such users without unnecessarily avoiding features that would benefit users with more capable browsers. As such, features which would cause content to be hidden or corrupted when CSS or JavaScript is unavailable must not be used. This includes techniques such as the [[Wikipedia:HiddenStructure|hiddenStructure]] method for hiding table content—which produces incomprehensible output without CSS—and some implementations of the NavFrame collapsing code—which can make content inaccessible without JavaScript support. However, consideration for users without CSS or JavaScript should extend mainly to making sure that their reading experience is ''possible''; it is recognised that it will inevitably be ''inferior''.
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. <!--This includes techniques such as the [[Wikipedia:HiddenStructure|hiddenStructure]] method for hiding table content—which produces incomprehensible output without CSS—and some implementations of the NavFrame collapsing code—which can make content inaccessible without JavaScript support. However, consideration for users without CSS or JavaScript should extend mainly to making sure that their reading experience is ''possible''; it is recognised that it will inevitably be ''inferior''.


To accommodate these considerations, test any potentially disruptive changes with JavaScript or CSS disabled. In Firefox or Chrome, this can be done easily with the Web Developer extension; JavaScript can be disabled in IE in the "Options" screen. Be particularly careful with inline CSS effects, which are not supported by several browsers, media, and XHTML versions.
To accommodate these considerations, test any potentially disruptive changes with JavaScript or CSS disabled. In Firefox or Chrome, this can be done easily with the Web Developer extension; JavaScript can be disabled in IE in the "Options" screen. Be particularly careful with inline CSS effects, which are not supported by several browsers, media, and XHTML versions.

Revisi per 24 Desember 2014 21.23

Halaman ini merupakan pedoman di Wikipedia bahasa Indonesia.
Galat: tidak ada pintasan yang ditentukan |msg= parameter tidak ditentukan.
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.
Pedoman gaya
Format
Gambar
Isi
Legal
Penamaan
Penyerapan
Tata letak
Menurut bidang topik
Pedoman terkait

Aksesibilitas web adalah tujuan untuk membuat suatu halaman web lebih mudah dibaca dan ditelusuri. 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 Wikipedia:Pedoman tata letak dan Wikipedia: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]
<small>==Sub-sub-section==</small> [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

Pintasan

Dalam suatu artikel, jangan menggunakan "garis coret tengah" untuk menghapus teks yang tidak disetujui. Lebih baik diberi komentar dengan "<!--" and "-->" 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.[1]
  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 {{†}}; lebih lanjut lihatlah Category:Image insertion templates.

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

Pintasan

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.[2] 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").[3][4]
  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

Pintasan

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.

Elemen blok

Daftar

Pintasan

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

Pintasan

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 (<br>). Gunakan satu dari metode-metode berikut.

Daftar vertikal tanpa bullet
Pintasan

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 <br />, 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

Pintasan

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

Pintasan
{|
|+ [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.[WCAG-TECH 1]
Judul baris & kolom ( ! )
Seperti keterangan, ini membantu presentasi informasi dalam struktur logis bagi pembaca.[WCAG-TECH 2] 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.[5]
"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.[WCAG-TECH 3]

"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

Pintasan

Hindari penggunakan tabel hanya untuk memperbaiki tata letak. Pilihan terbaik adalah menggunakan kode-kode HTML <div> untuk atribut blok dan gaya karena memberikan fleksibilitas yang luas. 

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

Gambar

Pintasan
  1. Gambar-gambar seharusnya diberi atribut alt, sekalipun gambar kosong, yang berfungsi sebagai pengganti untuk gambar bagi para tunanetra, laba-laba 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 <math>.

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),[6] atau
  • dilengkapi dengan fungsi-fungsi kontrol (stop, pause, play).[7]

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,[8] dapat dengan mudah ditambahkan pada berkas audio. Metodenya mirip dengan untuk video: commons:Commons:Video#Subtitles and closed captioning.

Pilihan gaya dan markup

Pintasan

Best practice: Use Wikimarkup and CSS classes in preference to alternatives

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

Lihat pula


Referensi

Khusus

  1. ^ "F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information". Techniques for WCAG 2.0. W3C. Diakses tanggal 1 January 2011. 
  2. ^ H58: Using language attributes to identify changes in the human language, Techniques for WCAG 2.0, W3C, accessibility level: AA.
  3. ^ "G91: Providing link text that describes the purpose of a link". Techniques for WCAG 2.0. W3C. Diakses tanggal 1 January 2011. 
  4. ^ "F84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text". Techniques for WCAG 2.0. W3C. Diakses tanggal 1 January 2011. 
  5. ^ "Table cells: The TH and TD elements". Techniques for WCAG 2.0. W3C. Diakses tanggal 1 January 2011. 
  6. ^ "Setting animated gif images to stop blinking after n cycles (within 5 seconds)". Techniques for WCAG 2.0. W3C. Diakses tanggal 1 January 2011. 
  7. ^ "Allowing the content to be paused and restarted from where it was paused". Techniques for WCAG 2.0. W3C. Diakses tanggal 1 January 2011. 
  8. ^ "Providing an alternative for time-based media for audio-only content". Techniques for WCAG 2.0. W3C. Diakses tanggal 1 January 2011. 

Umum

Teknis

  1. ^ H39: Using caption elements to associate data table captions with data tables, A accessibility level.
  2. ^ "H51: Using table markup to present tabular information". W3C. Diakses tanggal 1 January 2011. 
  3. ^ "H63: Using the scope attribute to associate header cells and data cells in data tables". Techniques for WCAG 2.0. W3C. Diakses tanggal 1 January 2011. 

Pranala luar

Diperoleh dari "https://wiki-indonesia.club/w/index.php?title=Wikipedia:Pedoman_gaya/Aksesibilitas&oldid=8339545"