Ogled vira Testwiki:Slogovni priročnik/Dostopnost

{{MoS guideline|WP:DOSTOP|WP:ACCESS|WP:DOSTOPNOST}}
{{Nutshell|Strani Wikipedije naj bi bile enostavne za navigacijo in branje tudi za ljudem s posebnimi potrebami.}}
{{Slogovne smernice|content}}
[[Spletna dostopnost]] si prizadeva za enostavno navigacijo in branje spletnih strani. Čeprav je ta cilj predvsem namenjen pomoči [[Invalidnost|ljudem s posebnimi potrebami]], je lahko v pomoč vsem bralcem. Naš cilj je upoštevanje smernic za dostopnost spletnih vsebin po standardu WCAG 2.1 (angl. [[Web Content Accessibility Guidelines]] 2.1).{{Efn|Prejšnja različica, WCAG 2.0, je tudi [[International Organization for Standardization|ISO]] standard, ISO/IEC 40500:2012.}} na podlagi katerih temeljijo naslednji predlogi. Strani, ki sledijo tem smernicam, so lažje berljive in jih lahko urejajo vsi.

== Struktura članka ==
Standardizirana struktura člankov izboljšuje dostopnost, saj uporabnikom omogoča, da pričakujejo vsebino na določenem delu strani. Na primer, če slepi uporabnik išče povezave razločitvenih strani in jih na vrhu strani ne najde, bo vedel, da jih ni in mu ni treba prebrati cele strani, da bi to ugotovil.

Standardizirana struktura člankov je uveljavljena praksa na Wikipediji, zato je treba le slediti smernicam v [[wikipedija:Slogovni priročnik/Postavitev]] in {{Povezava razdelka|Wikipedija:Slogovni priročnik/Uvodni razdelek|Elementi}}.

=== Naslovi ===
{{Bližnjica|WP:DOBERNASLOV|WP:SLABNASLOV|WP:PROSTORPODNASLOVOM}}
Naslovi morajo biti opisni in v doslednem vrstnem redu, kot je opredeljeno v [[Wikipedija:VRSTNIRED|slogovnem priročniku]].

Naslove gnezdite zaporedno - začnite z 2. nivojem (<code>==</code>), nato s 3. nivojem (<code>===</code>) in tako naprej. (Nivo 1 je samodejno ustvarjen naslov strani.) Ne preskakujte zaporedja zaradi poudarjanja; to ni namen naslovov.

Zaradi berljivosti za urednike s slabim vidom – le v [[Pomoč:Wikibesedilo|urejevalniku kode]] – se pod vsakim naslovom lahko doda ena prazna vrstica, vendar ne več kot ena; več kot ena prazna vrstica pod naslovom poglavja povzroči, da bo na izpisani strani viden dodaten prostor. Razmisliti je treba tudi o tem, kako se lahko ena sama prazna vrstica pod naslovi poglavij članka vidi na majhnem zaslonu, saj mnogi uredniki uporabljajo mobilne naprave za urejanje in ena prazna vrstica pod naslovom lahko dejansko zmanjša berljivost takšnim urednikom.

{| class="wikitable"
|+ style="padding-top: 10px;" |Primeri pravilne in nepravilne uporabe ugnezdenih naslovov
! scope="col" style="background: PaleGreen;" | Pravilno
! scope="col" style="background: Pink;" | Naključno/kaotično
! scope="col" style="background: Pink;" | Preskakovanje nivojev 
|- style="vertical-align: top;"
| style="width: 33%;" |
<poem>
''[Uvod članka tukaj]''
<code>==Poglavje==</code> ''[nivo 2]''
<code>===Podpoglavje===</code> ''[3]''
<code>==Poglavje==</code> ''[2]''
<code>===Podpoglavje===</code> ''[3]''
<code>====Podpodpoglavje====</code> ''[4]''
<code>==Poglavje==</code> ''[2]''</poem>
| style="width: 33%;" |
<poem>
''[Uvod članka tukaj]''
<code>====Poglavje'''?'''====</code> ''[4]''
<code>===Poglavje'''?'''===</code> ''[3]''
<code>==Poglavje'''?'''==</code> ''[2]''
<code>==Poglavje'''?'''==</code> ''[2]''
<code>====Poglavje'''?'''====</code> ''[4]''
<code>===Poglavje'''?'''===</code> ''[3]''</poem>
| style="width: 33%;" |
<poem>
''[Uvod članka tukaj]''
''[Nivo-2 poglavje manjka tukaj]''
<code>===Poglavje'''?'''===</code> ''[3]''
<code>==Poglavje==</code> ''[2]''
''[Nivo-3 podpoglavje manjka tukaj]''
<code>====Podpoglavje'''?'''====</code> ''[4]''
<code>==Poglavje==</code> ''[2]''</poem>
|}

{{Bližnjica|WP:NAVIDEZNINASLOV}}
{{Anchor|Pseudo-headings|Navidezni naslov}}

Ne ustvarjajte navideznih naslovov s podpičjem (rezervirano za [[WP:DEFLIST|opisne sezname]]) in izogibajte se uporabi oznak za poudarjanje. Bralniki zaslona in druga podporna tehnologija lahko za navigacijo uporabljajo samo naslove, ki imajo vsebujejo oznake za naslov. Če želite zmanjšati velikost kazala vsebine (TOC), uporabite {{Tl|TOC limit}}. V primerih, ko {{Tl|TOC limit}} ni mogoče uporabiti zaradi naslovov nižjega nivoja drugje v članku, potem uporaba krepke pisave za pod-pod-podnaslove uporabnikom bralnikov zaslona povzroči nezadovoljstvo. Sploh uporaba navideznega naslova pomeni, da ste izčrpali vse druge možnosti. Mišljeno je kot redkost.

{| class="wikitable"
|+ style="padding-top: 10px;" | Zgledi sprejemljive in nepravilne uporabe navideznih naslovov in seznamov opisov
|-
! scope="col" style="background: PaleGreen;" | Sprejemljivo
! scope="col" style="background: Pink;" | Nepravilno 
|- style="vertical-align: top;"
| style="width: 50%;" |
<poem>
''[Uvod članka tukaj]''
<code>==Poglavje==</code> ''[nivo 2]''
<code>===Podpoglavje===</code> ''[3]''
<code><nowiki>'''Navidezni naslov'''</nowiki></code>
<code>==Poglavje==</code> ''[2]''
<code>===Podpoglavje===</code> ''[3]''
<code>====Podpodpoglavje====</code> ''[4]''
<code><nowiki>;Izraz, ki mu sledi</nowiki></code>
<code><nowiki>:vsaj ena definicija ali vsaj en element opisnega seznama</nowiki></code>
<code><nowiki>:in dodatni opcijski elementi, ki tvorijo seznam</nowiki></code>
</poem>
| style="width: 50%;" |<poem>
''[Uvod članka tukaj]''
<code>==Poglavje==</code> ''[nivo 2]''
<code>===Podpoglavje===</code> ''[3]''
<code><nowiki>;Navidezni naslov</nowiki></code>
<code>==Poglavje==</code> ''[2]''
<code>===Podpoglavje===</code> ''[3]''
<code><nowiki><small>==Podpodpoglavje==</small></nowiki></code> ''[2]''</poem>
|}

=== Plavajoči elementi<span class="anchor" id="FLOAT"></span> ===
{{Bližnjica|WP:DOSTOP#FLOAT}}
V wikikodi morajo biti lebdeči elementi (vključno s slikami) umeščeni {{Em|znotraj}} poglavja, ki mu pripadajo; slike ne postavljajte na konec prejšnjega poglavja. (Odvisno od platforme, "zlaganje" več slik  poleg relativno majhne količine besedila lahko povzroči, da je določena slika potisnjena navzdol v naslednje poglavje. Vendar to ni težava dostopnosti, saj bralniki zaslona vedno preberejo <code>alt=</code> vsake slike iz mesta, kjer je slika ''kodirana''.)

=== Resolucija ===
{{Bližnjica|WP:RESOL}}

Članki v Wikipediji morajo biti dostopni bralcem, ki uporabljajo naprave z majhnimi zasloni, kot so mobilne naprave, ali bralcem, ki uporabljajo monitorje z nizko ločljivostjo. Na namizju je včasih nastane težava v člankih, ki imajo več slik na obeh straneh zaslona; čeprav bo običajno posledica nižje ločljivosti razteg odstavkov navpično, ter premik slik narazen v tej smeri; pazite, da ne dodate slik ali druge plavajoče vsebine na obe strani zaslona hkrati. Težave lahko povzročijo tudi velike tabele in slike; včasih je vodoravno drsenje neizogibno, vendar razmislite o prestrukturiranju širokih tabel tako, da se razširijo navpično namesto vodoravno.

== Besedilo ==
{{Bližnjica|WP:BREZPREČRTAVANJA|WP:BREZSIMBOLOV}}
{{See also|Wikipedija:Slogovni priročnik/Oblikovanje besedila}}
Večina [[Bralnik zaslona|bralnikov zaslona]] privzeto ne označuje atributov predstavitvenega besedila (krepko, ležeče, podčrtano, monospace, prečrtano) ali celo semantičnih atributov besedila (poudarek, pomembnost, brisanje besedila), zato se prečrtano besedilo bere normalno skupaj z vsem drugim besedilom. (Urednikom, ki uporabljajo bralnike zaslona in sodelujejo v razpravah o pravilih v Wikipediji in brisanju, svetujemo, da pri tem vklopijo obvestila o atributih besedila, saj se prečrtano besedilo pogosto pojavi v internih razpravah Wikipedije.)

Ker bralniki zaslona običajno ne upoštevajo prečrtanega besedila, bo njegova uporaba v člankih (npr. za prikaz sprememb v analizi besedila) povzročila težave z dostopnostjo in popolno zmedo, če bo to edina uporabljena oznaka. To velja za elemente {{Tag|s|o}} in {{Tag|del|o}} (skupaj z njihovimi ustreznimi {{Tag|ins|o}}, ki so običajno vizualno upodobljeni kot podčrtani), kot tudi za predloge, ki jih uporabljajo. Ne uporabljajte prečrtanega besedila, da bi nasprotovali vsebini, za katero menite, da je neprimerna ali nepravilna. Namesto tega ga komentirajte z <code><nowiki><!--</nowiki></code> in <code><nowiki>--></nowiki></code>, ga v celoti odstranite ali uporabite [[wikipedija:Splošne predloge|medvrstično predlogo za čiščenje]] in izpostavite zadevo na pogovorni strani.

Bralniki zaslona imajo različno podporo za znake izven [[latinica-1|Latin-1]] in [[Windows-1252]] in ni varno predvidevati, kako bo kateri koli znak v teh obsegih izgovorjen. Če jih bralnik zaslona ali sintetizator govora ne prepozna, se lahko izgovorijo kot vprašaj ali v celoti izpustijo iz govornega izhoda.
# Zagotovite [[prečrkovanje]] celotnega besedila v nelatiničnem pisnem sistemu, kjer so nelatinični znaki pomembni v izvirnem kontekstu, kot so imena, kraji, stvari itd. Ta funkcionalnost je na voljo v predlogah, ki označujejo jezike nelatinične pisave, najdete pa jo lahko tudi v predlogah, kot je {{Tl|transl}}; te predloge imajo tudi druge prednosti v zvezi z dostopnostjo(glejte [[#Drugi jeziki|poglavje »Drugi jeziki«]] spodaj).
# Ne uporabljajte morda neizgovorljivih simbolov, kot je ♥ ([[Srce (simbol)|simbol srca]]); namesto tega uporabite slike z nadomestnim besedilom.<ref>{{Navedi splet|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|website=Techniques for WCAG 2.0|accessdate=1 January 2011|publisher=[[World Wide Web Consortium]]}}</ref>
# Simboli, ki povzročajo težave bralnikom zaslona, imajo morda že ustvarjene predloge za ustvarjanje slike in nadomestnega besedila. Primer je predloga bodala {{Tl|†}} (za več glejte [[:Kategorija:Predloge za vstavitev slike]]).

Zaporedje znakov mora zadostovati za posredovanje pomena besedila; zanašanje na "posebne simbole", ki jih je mogoče razlikovati samo po lastnostih CSS ali wiki oznaki, ni sprejemljivo.

{{Bližnjica|WP:BREZTOOLTIPS}}
Ne uporabljajte tehnik, ki za posredovanje informacij zahtevajo interakcijo, kot so namigi orodij ali katero koli drugo besedilo, ki lebdi. Okrajšave so izvzete, zato se lahko predloga {{Tlx|abbr}} (ovitek za element {{Tag|abbr|o}}) uporabi za označevanje dolge oblike okrajšave (vključno z akronimom ali začetnico).

V stavek ne vstavljajte prelomov vrstic, saj je to težje urejati z bralnikom zaslona. Stavku lahko sledi enojen prelom vrstice, kar lahko pomaga nekaterim urednikom.

=== Velikost pisave ===
{{Bližnjica|WP:SMALL|WP:SMALLTEXT}}
Pomanjšanje ali povečanje velikosti pisave je treba uporabljati zmerno in se običajno izvede z avtomatiziranimi elementi, kot so naslovi, glave tabel in standardizirane predloge. Spremembe velikosti so podane kot {{Em|procenti}} prvotne velikosti pisave in ne kot absolutna velikost v pikslih ali velikosti pik. Relativne velikosti povečujejo dostopnost slabovidnim uporabnikom, saj jim omogočajo, da v nastavitvah brskalnika nastavijo veliko (oz. večjo) privzeto velikost pisave. Absolutne velikosti uporabnikom onemogočajo takšno možnost.

Izogibajte se uporabi manjših velikosti pisave znotraj elementov strani, ki že uporabljajo manjšo velikost pisave, kot je večina besedila v [[wikipedija:Slogovni priročnik/Infopolja|infopoljih]], [[wikipedija:Predloge po meri|navigacijskih poljih]] in [[wikipedija:Slogovni priročnik/Postavitev|poglavjih s sklici]].{{Efn|Splošna velikost pisave  za infopolja in navigacijska polja je 88% privzete velikosti strani. Splošna velikost pisave za poglavja s sklici je 90% oprivzete velikosti strani.Dodatne vrednosti lahko najdete na strani [[MediaWiki:Common.css]].}} To pomeni, da se oznake {{Tag|small}} in predlogi, kot sta {{Tlx|small}} in {{Tlx|smalldiv}}, ne bi smeli uporabljati za golo besedilo znotraj teh elementov. V nobenem primeru ne sme končna velikost pisave katerega koli besedila pasti pod približno 85 % privzete velikosti pisave strani. Upoštevajte, da ima oznaka HTML {{Tag|small}} semantični pomen [[Drobni tisk|drobnega tiska]] ali stranskih komentarjev;<ref>https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-small-element</ref> ne uporabljajte ga za stilske spremembe.<!-- Replicated at Wikipedia:Manual_of_Style/Text_formatting#Font_size -->

== Drugi jeziki ==
{{Bližnjica|WP:DRUGIJEZIK|WP:JEZIK}}
{{See also|Wikipedija:Slogovni priročnik/Oblikovanje besedila#Tuji izrazi|Wikipedija:Slogovni priročnik/Povezovanje#Medjezikovne povezave}}

Neslovenske besede ali besedne zveze, je treba zapisati s pomočjo predloge {{Tl|jezik}}, ki uporablja jezikovne kode [[ISO 639]]:

{{Tlx|jezik|fr|Assemblée nationale}}

ki se izpiše kot:

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

ali {{Tlx|jezik-fr|Assemblée nationale}}

ki se izpiše kot:

{{Jezik-fr|Assemblée nationale}}.

{{Strong|Razlaga}}: {{Tnull|jezik}} omogoča, da sintetizatorji govora pravilno izgovorijo besedilo v ustreznem jeziku.<ref>[http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H58 H58: Using language attributes to identify changes in the human language], Techniques for WCAG 2.0, W3C, accessibility level: AA.</ref> Uporablja se tudi za druge namene; za razširjen seznam prednosti glejte {{Povezava razdelka|Predloga:Jezik/dok|Razlaga}}.

Ni nujno niti zaželeno, da te konstrukcije zavijate v oznake za ležečo pisavo; predloga {{Tlx|jezik}} samodejno uporablja ležečo pisavo. Če besedilo ne sme biti zapisano ležeče, na primer imena krajev ali ljudi, je mogoče dodati {{Koda|<nowiki>italic=no</nowiki>}}, da prekličete privzeto vedenje.{{Efn|Nadaljnje informacije o uporabi so na voljo v dokumentaciji predloge {{tl|jezik}}.}}

Upoštevajte, da naj bi bi pri {{Strong|[[prečrkovanje|prečrkovanju]] raje uporabili predlogo {{tl|transl}}}}, za izgovorjavo pa {{Tl|IPA}}, {{Tl|respell}} ali podobno predlogo. {{Tl|PIE}} je namenjena [[Indoevropski prajezik|indoevropskemu prajeziku]].

Wikipedia ima tudi številne [[:Kategorija:Večjezične podporne predloge|jezikovno specifične predloge]], kot sta {{Tl|jezik-zh}} in {{Tl|nihongo}}, ki urednikom nudijo jezikovno specifične parametre, kot je možnost vnosa različnih načinov transkripcije. Čeprav vsak jezik nima svoje predloge, je morda bolje uporabiti te predloge, namesto zlaganja več primerkov predlog {{Tl|jezik}} in {{Tl|transl}}.

== Povezave ==

# Ustvarite dobre opise povezav, zlasti za zunanje povezave (izogibajte se "[[kliknite tukaj]]!", "[http://example.com/ temu]").<ref>{{Navedi splet|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|website=Techniques for WCAG 2.0|accessdate=1 January 2011|publisher=[[World Wide Web Consortium]]}}</ref><ref>{{Navedi splet|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|website=Techniques for WCAG 2.0|publisher=[[World Wide Web Consortium]]|accessdate=1 January 2011}}</ref>
# Za ikone ne uporabljajte znakov [[Unicode]]; namesto tega uporabite ikono z alt besedilom. Na primer, znak kot je »→«, nekateri [[bralnik zaslona|bralniki zaslona]] ne morejo reproducirati v uporabno besedilo.
# Uporabite [[Predloga:Vidno sidro]], kjer označevanje cilja pomaga slabovidnim, da lažje najdejo ciljno povezavo na ciljni strani. <!-- {{discuss|Accessibility issue: Use of Visible Anchors to help the partially sighted}} -->

== Barva ==
{{Bližnjica|WP:BARVA|WP:KONTRAST}}
[[Slika:Example_of_team_color_problem_on_Clive_Churchill_article.png|thumb|alt=Dva posnetka zaslona istega uporabniškega vmesnika z veliko besedila. Zgornji uporablja rdečo, zeleno in modro barvo, medtem ko spodnji  uporablja skoraj enako barvo za rdečo in zeleno, kar povzroči, da rdeče besedilo skoraj izgine na zelenem ozadju.|Posnetka zaslona, ki prikazujeta učinke rdeče/zelene barvne slepote na berljivost]]

'''Barve''' se v člankih Wikipedije najpogosteje uporabljajo znotraj [[Wikipedija:Imenski prostor predlog|predlog]] in [[Wikipedija:Slogovni priročnik/Tabele|tabel]]. {{Crossreference|printworthy=y|Za tehnično pomoč kako uporabljati barve, glejte [[Pomoč:Uporaba barv]].}}

Članki (in druge strani), ki uporabljajo barve, morajo upoštevati dostopnost na sledeč način:

* Poskrbite, da barva ni edina metoda, ki se uporablja za prinašanje pomembnih informacij. Zlasti ne uporabljajte obarvanega besedila ali ozadja, razen če je njegov status označen tudi z uporabo druge metode, kot je [[Wikipedija:Slogovni priročnik/Dostopnost#Besedilo|dostopni simbol]], ki se ujema z legendo, ali s [[Pomoč:Sklici na koncu besedila|sklici na koncu besedila]]. V nasprotnem primeru slepi uporabniki ali bralci, ki do Wikipedije dostopajo prek tiskanih strani ali naprave brez barvnega zaslona, teh informacij ne bodo imeli.
* Povezave morajo biti našim bralcem jasno prepoznavne kot povezave.
* Nekateri bralci Wikipedije so delno ali popolnoma [[Barvna slepota|barvno slepi]] ali slabovidni. Poskrbite, da bo kontrast med besedilom in ozadjem dosegel vsaj raven AA po [[Smernice za dostopnost spletne vsebine|Smernicah za dostopnost spletne vsebine]] (WCAG) 2.0 in raven AAA, kadar je to izvedljivo (glejte [https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html »Understanding SC 1.4.3: Contrast (Minimum)«] WCAG). Če želite uporabiti poimenovane barve CSS za besedilo na belem ozadju, glejte za priporočene barve na strani [[Wikipedija:Slogovni priročnik/Dostopnost/Barve CSS za besedilo na belem]]. Za druge namene je tu izbor orodij, ki jih lahko uporabite za preverjanje pravilnega kontrasta:
** Za preverjanje barvnih kontrastov lahko uporabite nekaj spletnih orodij, vključno s spletnim [https://webaim.org/resources/contrastchecker/ contrast checker] [[WebAIM]] ali spletnim mestom [https://whocanuse.com/ WhoCanUse] ali [https://snook.ca/technical/colour_contrast/colour.html Snook's Color Contrast Check].
*** Na spletu obstaja več drugih orodij, vendar preverite, ali so posodobljena, preden jih uporabite. Nekatera orodja temeljijo na algoritmu WCAG 1.0, medtem ko je zdaj referenčni algoritem WCAG 2.0. Če orodje izrecno ne omenja, da temelji na WCAG 2.0, domnevajte, da je zastarelo.
** Oblikovalska skupina Wikimedia Foundation [https://design.wikimedia.org/style-guide/visual-style_colors.html je pripravila barvno paleto], kjer so označene barve usklajene s stopnjo AA. Uporablja se za vse elemente uporabniškega vmesnika na vseh izdelkih in v glavnih temah Wikimedia na namizju in mobilnih napravah. Vendar pa pri tem ne upošteva besedil povezav.
** Tabela na strani [[Wikipedija:Slogovni priročnik/Dostopnost/Barve]] prikazuje rezultate za 14 odtenkov najtemnejšega ali najsvetlejšega ozadja, ki ustreza standardu AAA glede na črno besedilo, belo besedilo,  besedila povezav in obiskana besedila povezav.
** Google Chrome ima [https://a11ywins.tumblr.com/post/167324368213/google-chromes-color-contrast-debugger razhroščevalnik barvnega kontrasta], ki vključuje vizualni vodnik in izbirnik barv.
** Prenosljiva programska oprema [https://www.tpgi.com/color-contrast-checker/ Color Contrast Analyzer] vam omogoča, da izberete barve na strani in natančno pregledate njihov kontrast. Vendar pa se prepričajte, da uporabljate le posodobljen algoritem "svetilnosti" in ne zastareli algoritem "barvna svetlost/razlika".
* Dodatna orodja se lahko uporabijo za izdelavo grafikonov in barvnih shem za zemljevide ipd. Ta orodja niso natančna sredstva za pregled dostopnosti kontrasta, vendar so lahko v pomoč pri določenih nalogah.
** [https://paletton.com/ Paletton] (prej Color Scheme Designer) pomaga izbrati dober nabor barv za grafikon.
** [https://colorbrewer2.org/ Color Brewer 2.0] nudi varne barvne sheme za zemljevide in podrobne razlage.
** [https://personal.sron.nl/~pault/#fig:scheme_light Svetlo kakovostna barvna shema] zagotavlja niz devetih barv, ki delujejo za barvno slepe uporabnike in s črnimi labelami.
** Obstaja nekaj orodij za simulacijo barvno slepega vida: [https://www.toptal.com/designers/colorfilter Toptal ColorFilter] (analiza spletne strani) in [https://www.color-blindness.com/coblis-color-blindness-simulator/ Coblis Color-blindness Simulator] (analiza lokalne datoteke). Obstajajo tudi razširitve brskalnika za analizo spletnih strani: [https://addons.mozilla.org/en-US/firefox/addon/nocoffee/ NoCoffee] (Firefox)
** Zelo preprosto odprtokodno orodje, ki je lahko v pomoč pri izbiri kontrastnih barv, je [https://colororacle.org/ Color Oracle], »brezplačni simulator barvne slepote za Windows, Mac in Linux«. Omogoča ogled vsega, kar je na vašem zaslonu, tako kot bi ga videl nekdo z eno od treh vrst barvne slepote ali v sivinah.
* Če članek prekomerno uporablja barve in ne veste, kako to popraviti, lahko zaprosite za pomoč druge urednike. Na vrh članka postavite predlogo {{Tl|Overcolored}}.
{{WCAG_web_safe_contrast_ratio.svg}}

== Elementi blokov ==

=== Seznami ===
{{Bližnjica|WP:MEŠANJEZAMIKOV}}
{{see also|Pomoč:Seznam|Wikipedija:Slogovni priročnik/Seznami#Slogi seznama}}

Ne ločujte elementov seznama tako, da med njimi puščate prazne vrstice ali prelome stolpcev tabele. To vključuje elemente v [[Opisni seznam|opisnem seznamu]] (ki je narejen s pomišljajem ali dvopičjem na začetku, kar je tudi način oblikovanja večine pogovorov na pogovornih straneh) ter v [[Seznam (HTML)|urejenem]] ali [[Neurejen seznam|neurejenem seznamu]]. Seznami so namenjeni združevanju elementov, ki spadajo skupaj, vendar bo [[MediaWiki]] prazno vrstico razumel kot konec enega seznama in začetek novega. Prekomerni dvojni prelomi vrstic motijo tudi [[Bralnik zaslona|bralnike zaslona]], ki sporočijo več seznamov, čeprav je bil predviden le eden, kar lahko zmede uporabnike teh programov. Takšno nepravilno oblikovanje lahko tudi več kot potroji čas, potreben za branje seznama.

Prav tako ne preklapljajte med različnimi začetnimi označevalci seznamov (dvopičji, zvezdicami ali hash znaki) v enem seznamu. Ko odgovarjate na objavo, ki se začne z mešanico dvopičij, zvezdic ter včasih z hash znaki, je treba kopirati isto zaporedje teh znakov, kot je bilo uporabljeno zgoraj, in dodati še en tak znak. Druga možnost je, da preprosto prenehate z zamikom in začnete novo razpravo (tj. nov seznam HTML).

Na primer, v razpravi je najboljša praksa da naredite {{Kljukica}} tole:

<syntaxhighlight lang="wikitext">
* Podpiram. Ta ideja mi je všeč. —Uporabnik:Zgled
** Vprašanje: Kaj ti je všeč glede te ideje?? —Uporabnik:Zgled2
*** Izgleda, da ustreza smernicam Wikipedije. —Uporabnik:Zgled
</syntaxhighlight>

ali {{Kljukica}} v razpravi brez vrstične oznake:

<syntaxhighlight lang="wikitext">
: Podpiram. Ta ideja mi je všeč. —Uporabnik:Zgled
:: Vprašanje: Kaj ti je všeč glede te ideje? —Uporabnik:Zgled2
::: Izgleda, da ustreza smernicam Wikipedije. —Uporabnik:Zgled
</syntaxhighlight>

To {{Kljukica}} je tudi sprejemljiva praksa (da preprečite vrstično oznako pri odgovoru):

<syntaxhighlight lang="wikitext">
* Podpiram. Ta ideja mi je všeč. —Uporabnik:Zgled
*: Vprašanje: Kaj ti je všeč glede te ideje? —Uporabnik:Zgled2
*:: Izgleda, da ustreza smernicam Wikipedije. —Uporabnik:Zgled
</syntaxhighlight>

Ampak {{Križec}} ne storite tega (preklopite s seznama z vrstičnimi oznakami na opisni seznam):

<syntaxhighlight lang="wikitext">
* Podpiram. Ta ideja mi je všeč. —Uporabnik:Zgled
:: Vprašanje: Kaj ti je všeč glede te ideje? —Uporabnik:Zgled2 
</syntaxhighlight>

niti {{Križec}} to (preklopite s seznama z vrstičnimi oznakami na opisni seznam):

<syntaxhighlight lang="wikitext">
* Podpiram. Ta ideja mi je všeč. —Uporabnik:Zgled
:* Vprašanje: Kaj ti je všeč glede te ideje? —Uporabnik:Zgled2 
</syntaxhighlight>

niti {{Križec}} to (pustite prazne vrstice med elementi seznama):

<syntaxhighlight lang="wikitext">
* Podpiram. Ta ideja mi je všeč.. —User:Example

** Vprašanje: Kaj ti je všeč glede te ideje? —Uporabnik:Zgled2
</syntaxhighlight>

niti {{Križec}} to (preskok več kot ene ravni):

<syntaxhighlight lang="wikitext">
* Podpiram. Ta ideja mi je všeč. —User:Example
*** Vprašanje: Kaj ti je všeč glede te ideje? —Uporabnik:Zgled2
</syntaxhighlight>

To se na splošno odsvetuje {{xmark|color=yellow}}:

<syntaxhighlight lang="wikitext">
: Podpiram. Ta ideja mi je všeč. —Uporabnik:Zgled
:* Vprašanje: Kaj ti je všeč glede te ideje? —Uporabnik:Zgled2 
</syntaxhighlight>
Dodajanje nepotrebnega vrstičnega znaka povečuje zapletenost seznama in povečuje verjetnost, da bodo ljudje v odgovorih uporabili napačne ravni zamikov.

==== Več odstavkov znotraj seznama elementov ====

Običajna oznaka seznama MediaWiki je na žalost nezdružljiva z običajno oznako odstavka MediaWiki.

Če želite v element seznama postaviti več odstavkov, {{Kljukica}} jih ločite s {{Tlx|pb}}:

<syntaxhighlight lang="wikitext">
* To je en element.{{pb}}To je še en odstavek znotraj tega elementa.
* To je drug element.
</syntaxhighlight>

Tudi to se lahko stori {{Kljukica}} tudi z eksplicitno oznako HTML za odstavke (upoštevajte zaključno oznako <code><nowiki></p></nowiki></code>):

<syntaxhighlight lang="wikitext">
* To je en element.<p>To je še en odstavek znotraj tega elementa.</p>
* To je drug element.
</syntaxhighlight>

V obeh primerih je to treba storiti {{Kljukica}} v eni vrstici kode. Vendar pa lahko po želji uporabite trik, da vstavite prelom vrstice v obliki HTML komentarja (ki se ne izpiše kot prelom vrstice), da bolje ločite odstavke v v urejevalniku kode:

<syntaxhighlight lang="wikitext">
* To je en element.<!--
--><p>To je še en odstavek znotraj tega elementa.</p>
* To je drug element.
</syntaxhighlight>

To tehniko je mogoče uporabiti {{Kljukica}} pri različnih oblikah vključevanja blokov znotraj elementa v seznamu (ker so elementi seznama tehnično blokovni elementi, ki lahko vsebujejo druge blokovne elemente):

<syntaxhighlight lang="wikitext">
* To je en element.<!--
--><p>To je še en odstavek znotraj tega elementa, in nekoga bomo citirali:</p><!--
-->{{talk quote block|Predstavljajte si svet, v katerem ima vsaka oseba na planetu brezplačen dostop do vseh človeških spoznanj.|Jimbo}}<!--
--><p>To je zaključni odstavek znotraj istega elementa seznama.</p>
* To je drug element.
</syntaxhighlight>
Bodite pozorni, da vsake predloge ni mogoče uporabiti na ta način (npr. nekatere predloge za citate temeljijo na tabelah in razčlenjevalnik MediaWiki ne bo obravnaval takšno označevanje kot del elementa seznama).

Ne {{Križec}} uporabljajte prelome vrstic za simulacijo odstavkov, ker imajo drugačno semantiko:

<syntaxhighlight lang="wikitext">
* To je en element.<br>To je isti odstavek, s prelomom vrstice pred njim.
* To je drug element.
</syntaxhighlight>
Oznake za prelom vrstic so namenjene uporabi {{Em|znotraj}} odstavka, na primer vrstic pesmi ali bloka izvorne kode.

Vsekakor ne {{Križec}} poskušajte uporabiti dvopičja za usklajevanje ravni zamika, saj (kot je omenjeno zgoraj) to ustvari tri ločene sezname:

<syntaxhighlight lang="wikitext">
* To je en element.
: To je povsem ločen seznam.
* To je tretji seznam.
</syntaxhighlight>

Lahko pa tudi {{Kljukica}} uporabite eno od [[predloga:HTML seznami|predlog HTML seznamov]], da zagotovite združevanje. To je najbolj uporabno za vključitevanje blokovnih elementov v sezname, kot je oblikovana koda:

<syntaxhighlight lang="wikitext">
{{bulleted list
|1=To je en element:
<pre>
Tu je nekaj kode.
</pre>
To je še vedno isti element.
|2=To je drugi element.
}}
</syntaxhighlight>
Toda ta tehnika se ne uporablja na pogovornih straneh.

==== Zamik ====
{{Bližnjica|WP:ZAMIKVRZEL}}

Dostopen pristop k zamikanju večvrstičnih vsebin je predloga {{Tlx|block indent}}, ki za zamikanje gradiva uporablja [[CSS]]. Za posamezne vrstice obstajajo različne predloge, vključno z {{Tlx|in5}} (univerzalna predloga z enakim imenom na vseh straneh Wikimedia); te vključujejo zamike z različnimi znaki za presledke. Za vizualno zamikanje ne zlorabljajte elementa {{Tag|blockquote}} ali predlog, ki ga uporabljajo (kot je {{Tlx|blockquote}} {{Okr|AKA|also known as}} {{Tlx|quote}}); namenjeni so samo za neposredno citiranje gradiva. Za takšne primere je na voljo alternativa {{Tlx|block indent}}, ki je brez narekovajev.

Dvopičje (<code>:</code>) na začetku vrstice v razčlenjevalniku MediaWiki označuje to vrstico kot {{Tag|dd|o}} del elementa HTML [[Element HTML|opisnega seznama]] ({{Tag|dl|o}}).{{Efn|[[opisni seznam|Opisne sezname]] HTML so v preteklosti imenovali ''seznami definicij'' in ''seznami pojasnil''. Strukture <code><nowiki><dl><dt>...</dt><dd>...</dd></dl></nowiki></code> so enake; spremenila se je le terminologija med različnimi HTML verzijami.}} V večini spletnih brskalnikov je vizualni učinek zamik vrstice. Uporablja se na primer za označevanje odgovorov v razpravah na pogovornih straneh. Vendar to označevanje samo po sebi ne vsebuje potrebnega elementa {{Tag|dt|o}} (izraz) opisnega seznama, na katerega se nanaša {{Tag|dd|o}} (opis/definicija). Pri pregledu izvorne kode poslane brskalniku se lahko vidi, da to povzroča neveljaven HTML (tj. neuspešno preverjanje veljavnosti<ref>{{Navedi splet|url=https://validator.w3.org/|title=Markup Validation Service: Check the markup (HTML, XHTML, …) of Web documents|website=validator.w3.org|publisher=[[World Wide Web Consortium]]|date=2017|accessdate=December 13, 2017}} The validator failure reported is "<strong>Error</strong>: Element <code>dl</code> is missing a required child element."</ref>). Rezultat je, da bodo pripomočki za pomoč uporabnikom, kot so bralniki zaslona, napovedali opisni seznam, ki ne obstaja, kar bo zmedlo vsakega obiskovalca, ki ni vajen neveljavnih oznak v Wikipediji. To ni idealno za dostopnost, semantiko ali ponovno uporabo, vendar se trenutno pogosto uporablja, kljub težavam, ki jih povzroča uporabnikom bralnikov zaslona.

{{Strong|Med vrstice besedila, ki so zamaknjene z dvopičjem {{em|ni}} dovoljeno puščati praznih vrstic}}{{Spaced en dash}}to se še posebej nanaša na vsebino članka. Programska oprema to tolmači kot konec seznama in začetek novega.

Če je potreben prostor, obstajata dva pristopa, ki bosta imela različne rezultate za bralnike zaslona:

Prva možnost je, da dodate prazno vrstico z enakim številom dvopičij kot tistih pred besedilom nad in pod prazno vrstico. To je primerno, ko dva urednika dajeta komentarje takoj drug za drugim na isti ravni zamika. Na primer:

<pre>
: Popolnoma se strinjam. —Uporabnik:Zgled
:
: Nisem prepričan. Je na voljo kakšen boljši vir? –Uporabnik:Zgled22
</pre>

To bo bralniku zaslona povedalo, da gre za dva elementa seznama (prazen element bo prezrt).

Drugi pristop, ko je gradivo mišljeno kot samostojen komentar (ali druga postavka seznama, npr. v besedilu članka), je uporaba oznake za nov odstavek v isti vrstici (glejte prejšnji razdelek za napredne tehnike vključevanja kompleksnih vsebinskih blokov):

<pre>
: Besedilo tukaj.{{pb}}Več besedila. —Uporabnik:Zgled3
</pre>

Da prikažete matematično formulo ali izraz v svoji vrstici, priporočamo uporabo oznake <code><nowiki><math display="block">1 + 1 = 2</math></nowiki></code> namesto <code><nowiki>:<math>1 + 1 = 2</math></nowiki></code>.

==== Navpični seznami ====

===== Navpični seznami z oznakami =====

{{Bližnjica|WP:VRZELSEZNAM}}
Pri navpičnih seznamih z oznakami ne ločujte elementov tako, da med njimi pustite prazne vrstice. Namesto tega uporabite [[#Več odstavkov znotraj seznama elementov|predlogo pb ali HTML oznako <nowiki><p></nowiki>]].

Težava s praznimi vrsticami je v tem, da če so elementi seznama ločeni z več kot enim prelomom vrstice, se seznam [[WP:HTML|HTML]] konča pred prelomom vrstice, po prelomu vrstice pa se odpre drug seznam HTML. To dejansko razdeli tisto, kar je videti kot en seznam, na več manjših seznamov za tiste, ki uporabljajo [[Bralnik zaslona|bralnike zaslona]]. Na primer za kodo:

<pre>* Bela vrtnica
* Rumena vrtnica

* Roza vrtnica

* Rdeča vrtnica
</pre>
programska oprema delno zatre presledke med vrsticami in zato izgleda takole:

* Bela vrtnica
* Rumena vrtnica

* Rožnata vrtnica

* Rdeča vrtnica

vendar ga bo bralnik zaslona prebral kot: "Seznam 2 elementov: (oznaka) Bela vrtnica, (oznaka) Rumena vrtnica, konec seznama. Seznam 1 elementa: (oznaka) Roza vrtnica, konec seznama. Seznam 1 elementa: (oznaka) Rdeča vrtnica, konec seznama."

{{anchor|nobreaks|Nobreaks|Brezprelomov}}{{Bližnjica|WP:NOBR|WP:BREZPRELOMOV}}
Ne ločujte elementov seznama s prelomi vrstic ({{Tag|br|s}}). Uporabite {{Tl|plainlist}} / {{Tl|unbulleted list}}, če želite, da seznam ostane navpičen; ali razmislite o {{Tl|flatlist}} / {{Tl|hlist}}, če bi bil seznam bolje prikazan vodoravno (v vrstici), kot je opisano v naslednjih dveh razdelkih.

===== <span id="Unbulleted (vertical) lists"></span>Navpični seznami brez oznak =====

<!-- This Anchor tag serves to provide a permanent target for incoming section links. Please do not move it out of the section heading, even though it disrupts edit summary generation (you can manually fix the edit summary before saving your changes). Please do not modify it, even if you modify the section title. It is always best to anchor an old section header that has been changed so that links to it won't be broken. See [[Template:Anchor]] for details. (This text: [[Template:Anchor comment]]) -->
{{Bližnjica|WP:NAVADNISEZNAM|WP:NAVPSEZNAM|WP:PLAINLIST}}

Za sezname brez oznak, ki potekajo navzdol po strani, sta za izboljšanje dostopnosti in semantičnega pomena na voljo predlogi {{Tl|plainlist}} in {{Tl|unbulleted list}} s katerima označite tisto, kar je očitno seznam, namesto da vključite {{Tag|br|single}} prelome vrstic, ki jih ne bi smeli uporabljati – glej zgoraj. Razlika med njima je samo v wikioznaki, uporabljeni za ustvarjanje seznama. Upoštevajte, da ker gre za predloge, kjer besedilo vsakega elementa seznama ne sme vsebovati simbola pokončnice (<code>|</code>), razen če je nadomeščen z <code><nowiki>{{!}}</nowiki></code> ali je vključen znotraj oznak {{Tag|nowiki}}. Prav tako ne sme vsebovati znaka enačaja (<code>=</code>), razen če je nadomeščen z <code><nowiki>{{=}}</nowiki></code> ali vsebovan v {{Tag|nowiki}}, čeprav lahko to zaobidete s poimenovanjem parametrov (<code>|1=</code>, <code>|2=</code> itd.). Če vam bo to povzročalo prevelike težave, lahko uporabite varianto s {{Tl|endplainlist}}. Znotraj sklica boste namesto tega morda potrebovali {{Tl|unbulleted list citebundle}}.
<div style="display:flex;flex-flow:row wrap;justify-content:space-evenly">
{| class="wikitable plainrowheaders"
|+ Primer navadnega seznama (plainlist)
! scope="col" style="width:11.7em;" | Wikibesedilo
! scope="col" style="width:11.7em;" | Izpis
|-
! scope="row" | <pre style="line-height:1.2em;">{{plainlist |
* Bela vrtnica
* Rumena vrtnica
* Roza vrtnica
* Rdeča vrtnica
}}</pre>
| {{plainlist |
* Bela vrtnica
* Rumena vrtnica
* Roza vrtnica
* Rdeča vrtnica
}}
|}
{| class="wikitable plainrowheaders"
|+ Primer seznama brez oznak (unbulleted list)
! scope="col" style="width:11.7em;" | Wikibesedilo
! scope="col" | Izpis
|-
! scope="row" | <pre style="line-height:1.2em;">{{unbulleted list
| Bela vrtnica
| Rumena vrtnica
| Roza vrtnica
| Rdeča vrtnica
}}</pre>
| {{unbulleted list
| Bela vrtnica
| Rumena vrtnica
| Roza vrtnica
| Rdeča vrtnica
}}
|}
</div>

Druga možnost je, da so v predlogah, kot so [[Wikipedija:Navigacijske predloge|navpolja]] in podobno, ali katerem koli ustreznem kontejnerju, taki seznami oblikovani z razredom "<code>plainlist</code>", na naslednji način:

{{Plainlist|
* <code><nowiki>| listclass = plainlist</nowiki></code> ali
* <code><nowiki>| bodyclass = plainlist</nowiki></code>
}}

V [[wikipedija:Slogovni priročnik/Infopolja|infopoljih]] lahko uporabite:

{{Plainlist|
* <code><nowiki>| rowclass = plainlist</nowiki></code> ali
* <code><nowiki>| bodyclass = plainlist</nowiki></code>
}}

==== Vodoravni seznami ====
{{Bližnjica|WP:VODORSEZNAM|WP:HLIST}}

Za sezname, ki tečejo čez stran in v enojnih vrsticah [[Wikipedija:Slogovni priročnik/Infopolja|infopolj]] in drugih tabelah, sta na voljo predlogi {{tl|flatlist}} in {{tl|hlist}} (za "vodoravni seznam"), ki izboljšujeta dostopnost in semantični pomen. Ta funkcionalnost uporablja pravilno HTML označevanje za vsak element seznama, namesto da vključuje znake, ki jih na primer slepi uporabnik s pomočjo programske opreme slišijo kot "pika mačka pika pes pika konj pika...". Predloge se med seboj razlikujejo le v wiki-oznakah namenjenih kreaciji seznama. Bodite pozorni, da morate pri vključitvi besedila v ti (ali katero koli drugo) predlogi znak pokončnice ({{pipe}}) zamenjati z {{tn|!}}.

<!-- The following examples deliberately wrap the list over two lines to show the position of the list separator.
Please don't widen them. -->
<div style="display:flex;flex-flow:row wrap;justify-content:space-evenly">
{| class="wikitable plainrowheaders"
|+ Zgled za flatlist
! scope="col"| Wikibesedilo
! scope="col"| Izpis
|-
! scope="row"| <pre style="line-height:1.2em;">{{flatlist |
* Bela vrtnica
* Rdeča vrtnica
** Roza vrtnica
* Rumena vrtnica
}}</pre>
| {{flatlist |
* Bela vrtnica
* Rdeča vrtnica
** Roza vrtnica
* Rumena vrtnica
}}
|}
{| class="wikitable plainrowheaders"
|+ Zgled za vodorovni seznam (hlist)
! scope="col"| Wikibesedilo
! scope="col"| Izpis
|-
! scope="row"| <pre style="line-height:1.2em;">{{hlist
| Bela vrtnica
| Rdeča vrtnica
| Roza vrtnica
| Rumena vrtnica
}}</pre>
| {{hlist
| Bela vrtnica
| Rdeča vrtnica
| Roza vrtnica
| Rumena vrtnica
}}
|}
</div>

Druga možnost je, da so v predlogah, kot so [[Wikipedija:Navigacijske predloge|navpolja]] in podobno, ali katerem koli ustreznem kontejnerju, taki seznami oblikovani z razredom "<code>hlist</code>", na naslednji način:

{{Plainlist|
* <code><nowiki>| listclass = hlist</nowiki></code> ali
* <code><nowiki>| bodyclass = hlist</nowiki></code>
}}

V [[wikipedija:Slogovni priročnik/Infopolja|infopoljih]] lahko uporabite:

{{Plainlist|
* <code><nowiki>| rowclass = hlist</nowiki></code> ali
* <code><nowiki>| bodyclass = hlist</nowiki></code>
}}

==== Seznam naslovov ====

Nepravilna uporaba podpičja za poudarjanje "lažnega naslova" pred seznamom (slika 1) ustvari [[#WP:VRZELSEZNAM|vrzel v seznamu]]. Vrstica s podpičjem je opisni seznam z enim elementom brez opisne vsebine, ki mu sledi drugi seznam.

Namesto tega uporabite oznako za naslov (slika 2).

<div role="figure" style="display: inline-block; margin: 0 1em; width: 13em;">
<strong>{{Križec}} 1. Nepravilno</strong>
<syntaxhighlight lang="wikitext">
; Žlahtni plini
* Helij
* Neon
* Argon
* Kripton
* Ksenon
* Radon
</syntaxhighlight>
</div>

<div role="figure" style="display: inline-block; margin: 0 1em; width: 13em;">
<strong>{{Kljukica}}2. Naslov</strong>
<syntaxhighlight lang="wikitext">
== Žlahtni plini ==
* Helij
* Neon
* Argon
* Kripton
* Ksenon
* Radon
</syntaxhighlight>
</div>

=== Tabele ===
{{Bližnjica|WP:DTAB||WP:PTAB}}

Bralniki zaslona in druga orodja za brskanje po spletu uporabljajo posebne oznake za tabele, ki uporabnikom pomagajo navigirati po podatkih, ki jih vsebujejo.

Uporabite pravilno sintakso za wikitabele, da izkoristite vse razpoložljive funkcije. Za več informacij o posebni sintaksi, ki se uporablja za tabele, glejte [[meta:Help:Tables]]. Za ustvarjanje semantičnega pomena (npr. spreminjanje barve ozadja) ne uporabljajte izključno le oblikovanja, bodisi iz CSS ali trdo kodiranih slogov.

Številna [[wikipedija:Predloge po meri|navigacijska polja]] in [[wikipedija:Slogovni priročnik/Infopolja|infopolja]] so izdelana s pomočjo tabel.

Izogibajte se uporabi {{Tag|br|s}} ali {{Tag|hr|s}} v sosednjih celicah za posnemanje vizualne vrstice, ki se ne odraža v strukturi tabele HTML. To predstavlja težavo za uporabnike bralnikov zaslona, ki tabele berejo celico za celico, vrstico HTML za vrstico HTML, ne pa vizualno vrstico za vizualno vrstico.

==== Podatkovne tabele ====
{{Glavni|Wikipedija:Slogovni priročnik/Dostopnost/Vodnik za podatkovne tabele}}

<syntaxhighlight lang="wikitext">
{|
|+ [napis]
|-
! scope="col" | [glava stolpca 1]
! scope="col" | [glava stolpca 2]
! scope="col" | [glava stolpca 3]
|-
! scope="row" | [glava vrstice 1]
| [običajna celica 1,2] || [običajna celica 1,3]
|-
! scope="row" | [glava vrstice 2]
| [običajna celica 2,2] || [običajna celica 2,3]
...
|}
</syntaxhighlight>

; Napis ( <code>|+</code> )
: Napis je naslov tabele, ki opisuje njeno vsebino.<ref name="H39">[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> Podatkovne tabele bi morale vedno vsebovati napis.
; Glave vrstic in stolpcev (<code> ! </code> )
: Tako kot napis tudi glave pomagajo obiskovalcem predstaviti informacije v logični strukturi.<ref>{{Navedi splet|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=[[World Wide Web Consortium]]}}</ref> Glave pomagajo bralnikom zaslona prikazati informacije o naslovih podatkovnih celicah. Informacije v glavi so na primer izgovorjene pred podatki v celici ali pa so informacije v glavi na voljo na zahtevo.<ref>{{Navedi splet|url=http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TH|title=Table cells: The TH and TD elements|website=Techniques for WCAG 2.0|publisher=[[World Wide Web Consortium]]|accessdate=1 January 2011}}</ref> Ker se lahko glava vrstice in glava stolpca izgovorita pred podatki v vsaki celici pri navigaciji v načinu tabele, je pomembno, da glave stolpcev in vrstic ''enolično identificirajo'' stolpec oziroma vrstico.<ref name="jaws">{{Navedi splet|title=Tables with JAWS|url=https://www.freedomscientific.com/SurfsUp/Tables.htm|publisher=Freedom Scientific|accessdate=18 February 2021}}</ref>
; Obseg glav (<code>! scope="col" |</code> in <code>! scope="row" |</code>)
: To jasno identificira glave kot glave vrstic ali kot glave stolpcev. Glave se lahko tako povežejo z ustreznimi celicami.<ref name="H63">{{Navedi splet|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|website=Techniques for WCAG 2.0|accessdate=1 January 2011|publisher=[[World Wide Web Consortium]]}}</ref>

[[Wikipedija:Slogovni priročnik/Dostopnost/Vodnik za podatkovne tabele]] vsebuje podrobne zahteve o:
# Pravilni napisi tabel
# Pravilna struktura glav
# Kompleksne tabele
# Slike in barve
# Izogibanje gnezdenim tabelam

==== Razporeditvene tabele ====
{{Bližnjica|WP:LTAB||WP:RTAB}}

Izogibajte se uporabi tabel za vizualno pozicioniranje vsebine, ki ni tabularne narave. Podatkovne tabele nudijo dodatne informacije in metode navigacije, ki lahko zmedejo, če vsebina nima logičnih vrstičnih in stolpčnih povezav. Namesto tega uporabite semantično ustrezne elemente ali <code>&#x3C;div&#x3E;</code> in atribute <code>style</code>.

Ko uporabljate tabelo za pozicioniranje vsebine, ki ni tabularne narave, pomagajte bralnikom zaslona, da jo prepoznajo kot tabelo postavitve in ne podatkovno tabelo. V tabeli nastavite atribut <code>role="presentation"</code> in ne nastavite nobenega atributa <code>summary</code>. Ne uporabljajte elementov <code>&#x3C;caption&#x3E;</code> ali <code>&#x3C;th&#x3E;</code> znotraj tabele ali znotraj katere koli gnezdene tabele. Pri označevanju tabele v wiki kodi to pomeni, da se izognite uporab <code>|+</code> ali <code>!</code> predpone. Poskrbite, da je vrstni red branja vsebine pravilen. Vizualne učinke, kot je centriranje ali krepka pisava, je  lahko dosežete s stilskimi slogi ali semantičnimi elementi. Na primer:

<syntaxhighlight lang="wikitext">
{| role="presentation" class="toccolors" style="width:94%"
|-
| colspan="2" style="text-align: center; background-color: #ccf;" | <strong>Pomembno besedilo</strong>
|-
| Hitra || rjava lisica
|-
| skoči čez || lenega psa.
|}
</syntaxhighlight>

== Slike ==
{{Bližnjica|WP:DOSTOPNESLIKE}}

# Slike in ikone, ki niso zgolj okrasne, morajo vsebovati [[atribut alt]], ki deluje kot nadomestek za sliko za slepe bralce, iskalnike in druge nevizualne uporabnike. Če je dodano dodatno alternativno besedilo ("alt text"), naj bo to jedrnato ali naj bralca usmerja na napis ali besedilni del. Za več informacij glejte [[WP:ALT]].
# V večini primerov naj slike vsebujejo [[Wikipedija:Slogovni priročnik/Napisi|napis]] z uporabo vgrajene sintakse za slike. Napis naj jedrnato opiše pomen slike in bistvene informacije.
# Izogibajte se uporabi slik namesto [[WP:PTAB|tabel ali grafov]]. Kjer je mogoče, naj imajo vsi grafi ali diagrami besedilni ekvivalent ali pa naj bodo dobro opisani, da uporabniki, ki ne morejo videti slike, lahko pridobijo neko razumevanje koncepta.
# Izogibajte se postavljanju besedila med dvema slikama ali, razen če je popolnoma nujno potrebno, uporabi fiksnih velikosti slik.
# Izogibajte se nepremišljenemu ustvarjanju [[WP:GALERIJA|galerij]], saj lahko velikost zaslona in oblikovanje brskalnika vplivata na dostopnost za nekatere bralce zaradi fragmentiranega prikazovanja slik. Članki z velikim številom slik lahko presegajo časovno omejitev na mobilnih različicah Wikipedije. Idealno bi bilo, da stran ne vsebuje več kot 100 slik (ne glede na to, kako majhne so). Za več informacij si glejte [[mediawikiwiki:Recommendations for mobile friendly articles on Wikimedia wikis#Limit number of images in a page|MediaWiki:Limit number of images in a page]].
# Izogibajte se sklicevanju na slike v besedilu kot na tiste, ki so na levi ali desni strani. Postavitev slik se lahko razlikuje za obiskovalce mobilnih spletnih mest in za obiskovalce, ki jim strani berejo pomožni programi za dostopnost. Namesto tega uporabite napise, da identificirate slike.
# Podrobni opisi slik, ki niso primeri za objavo v članku, naj bodo umeščeni na opisni strani slike, s pripisom, da bo aktivacija povezave slike privedla do bolj podrobnega opisa. 
# Slike naj bodo znotraj poglavja, s katerim so povezane (po naslovu in morebitnih [[Wikipedija:HATNOTE|opozorilih]]), ne pa v samem naslovu ali na koncu prejšnjega poglavja. S tem se zagotovi, da bodo bralniki zaslona in mobilno spletno mesto prebrali in  pravilno prikazali sliko (in njeno besedilno alternativo) v ustreznem poglavju.

== Animacije, video in avdio vsebine ==
{{Bližnjica|WP:ANIMACIJA}}

=== Animacije ===
Da bi bila animacija ([[GIF]] – Graphics Interchange Format) dostopna:
* Ne sme trajati dlje kot pet sekund (zaradi česar je to zgolj dekorativni element)<ref>{{Navedi splet|url=http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G152|title=Setting animated gif images to stop blinking after n cycles (within 5 seconds)|website=Techniques for WCAG 2.0|accessdate=1 January 2011|publisher=[[World Wide Web Consortium]]}}</ref> ali
* Mora biti opremljena s funkcijami upravljanja (ustavitev, premor, predvajanje)<ref>{{Navedi splet|url=http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G4|title=Allowing the content to be paused and restarted from where it was paused|accessdate=1 January 2011|website=Techniques for WCAG 2.0|publisher=[[World Wide Web Consortium]]}}</ref>

To zahteva pretvorbo GIF-ov z animacijami, daljšimi od petih sekund, v video (če želite izvedeti kako, glejte navodila [//commons.wikimedia.org/w/index.php?title=Help_talk:Converting_video&oldid=39737985#Converting_an_animated_GIF za pretvorbo animiranih GIF-ov v Theora OGG]).

Poleg tega animacije {{Em|ne smejo}} povzročiti več kot treh utripov v katerem koli obdobju ene sekunde. Znano je, da vsebina, ki utripa več kot to omejitev, povzroča napade.<ref name="wcag 2.0 gl2.3">{{Navedi splet|url=http://www.w3.org/TR/2008/REC-WCAG20-20081211/#seizure-does-not-violate|title=Guideline 2.3 Seizures: Do not design content in a way that is known to cause seizures.|date=11 December 2008|website=Web Content Accessibility Guidelines (WCAG) 2.0|publisher=[[World Wide Web Consortium]]|accessdate=28 May 2015}}</ref>

=== Video ===
Videoposnetku je mogoče dodati podnapise v obliki sinhroniziranih besedil. Obstaja ustrezna stran s pomočjo na [[:commons:Commons:Video#Subtitles and closed captioning]]. Podnapisi so namenjeni transkripciji govora.

Obstaja potreba po podnaslavljanju za gluhe in naglušne<ref>{{Navedi splet|title=Podnaslavljanje za gluhe in naglušne|url=https://www.rtvslo.si/|website=rtvslo.si|accessdate=2023-07-12|language=sl}}</ref>. Na žalost, od novembra 2012 ta funkcionalnost ni omogočena, glej [[bugzilla:41694]]. Takšno podnaslavljanje je namenjeno gledanju namesto branju podnapisov in zagotavljajo besedilno različico vseh pomembnih informacij, posredovanih prek zvoka. Lahko vključujejo lahko dialoge, zvoke (naravne in umetne), okolje in ozadje, dejanja in izraze ljudi in živali, besedilo ali grafiko.<ref>{{Navedi splet|url=http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G69|title=Providing an alternative for time based media|website=Techniques for WCAG 2.0|accessdate=1 January 2011|publisher=[[W3C]]}}</ref> Za njihovo ustvarjanje si je treba ogledati vodnike zunaj Wikipedije.<ref>Please see: [https://web.archive.org/web/20120504142732/http://main.wgbh.org/wgbh/pages/mag/services/captioning/faq/sugg-styles-conv-faq.html A quick and basic reference for closed captions], [http://www.cab-acr.ca/english/social/captioning/captioning.pdf a detailed reference (PDF)] and [https://dcmp.org/learn/captioningkey a list of best practices for closed captions].</ref>

Besedilna različica videoposnetka bi bila potrebna tudi za slepe, vendar od novembra 2012 ni več priročnega načina za zagotavljanje nadomestnega besedila za videoposnetke.

=== Avdio ===

Podnapise za govor, besedilo, dialog itd.<ref>{{Navedi splet|url=http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G158|title=Providing an alternative for time-based media for audio-only content|website=Techniques for WCAG 2.0|publisher=[[World Wide Web Consortium]]|accessdate=1 January 2011}}</ref> je zvočnim datotekam mogoče preprosto dodati. Metoda je podobna kot pri videoposnetku: [[:commons:Commons:Video#Subtitles and closed captioning]].

== Slogi in možnosti označevanja ==
{{Bližnjica|WP:ODSTOPANJA}}

=== Najboljša praksa: wiki oznake in razredi CSS ===
Na splošno naj bodo slogi za tabele in druge elemente na ravni bloka nastavljeni z uporabo CSS razredov in ne z vgrajenimi atributi za slog. CSS celotnega [[MediaWiki:Common.css]] je skrbno preizkušen, da se zagotovi dostopnost (npr. zadosten barvni kontrast) in združljivost s različnimi brskalniki. Poleg tega omogoča uporabnikom s posebnimi potrebami, da spremenijo barvne sheme v svojem lastnem slogovnem listu ([[Posebno:MojaStran/skin.css]] ali slogu svojega brskalnika). Na primer, slogovni list  na strani [[Wikipedija:Slogovne tabele za slabovidne uporabnike]] zagotavlja visokokontrastna ozadja za [[wikipedija:Predloge po meri|navigacijska polja]]. Težava nastane, ko se privzeti razredi  razveljavijo, saj to močno otežuje možnost posameznika, da izbere svojo temo.

Glede dostopnost, se odstopanja od standardnih konvencij lahko tolerirajo, [[Wikipedija:Slogovni priročnik/Dostopnost#Barva|če so še vedno dostopna]]. Če neka predloga ali določena barvna shema odstopa od standarda, morajo njeni avtorji zagotoviti, da izpolnjuje zahteve dostopnosti, na primer zagotavljanje barvnega kontrasta. Na primer, [[wikipedija:Slogovni priročnik/Infopolja|infopolje]] in [[Wikipedija:Navigacijske predloge|navigacijsko polje]], ki se nanašata na športno ekipo, lahko uporabljata barvno shemo rumene in rdeče barve, da se ujemata z barvami ekipe. V tem primeru temno rdeče povezave na svetlo rumenem ozadju zagotavljajo zadostno kontrastnost barv, medtem ko bela na rumeni ali črna na rdeči pa ne.

Na splošno morajo članki uporabljati [[wiki oznake]] namesto omejenega nabora [[meta:Help:HTML_in_wikitext#Permitted_HTML|dovoljenih elementov HTML]]. Zlasti ne uporabljajte slogovnih elementov HTML {{Tag|i|o}} in {{Tag|b|o}} za oblikovanje besedila; raje uporabite wiki-oznako <code><nowiki>''</nowiki></code> ali <code><nowiki>'''</nowiki></code> za čisto tipografsko ležečo ali krepko pisavo, za pomenske razlike pa uporabite predloge ali elemente za [[Semantični HTML|semantične oznake]]. V besedilu članka se je treba izogibati tudi elementu {{Tag|font|o}}; po potrebi uporabite predloge kot so {{Tlx|em}}, {{Tlx|code}}, {{Tlx|var}} in naše druge [[:Kategorija:Semantične označevalne predloge|semantične označevalne predloge]], da poudarite logične razlike in ne le vizualnih. Uporabite predloge {{Tl|resize}}, {{Tl|small}} in {{Tl|big}}, če želite spremeniti velikost pisave, namesto da jo eksplicitno nastavite z atributi sloga CSS, kot je <code>font-size</code>, ali z zastarelimi elementi sloga, kot je {{Tag|big|o}}. Seveda obstajajo izjeme; npr. uporaba elementa {{Tag|u}} lahko koristi pri označevanju nečesa, na kar ni mogoče klikniti, vendar se podčrtavanje običajno [[Wikipedija:Slogovni priročnik/Oblikovanje besedila#Kako ne uporabiti poudarka|ne uporablja v besedilu članka]].

=== Uporabniki z omejeno podporo za CSS ali JavaScript ===
{{Bližnjica|WP:PRECOLLAPSE|WP:SAMODEJNOSTRNJENO}}

Samodejno strnjenih (predhodno strnjenih) elementov naj se ne bi uporabljali za skrivanje vsebine v glavnem delu članka.

Članki na Wikipediji bi morali biti dostopni bralcem, ki uporabljajo brskalnike in naprave, ki imajo omejeno ali so brez podpore za [[JavaScript]] ali [[CSS]], kar se v spletnem razvoju imenuje "[[postopno izboljševanje]]". Pomnite, da se vsebina Wikipedije lahko prosto ponovno uporablja na načine, ki jih ne moremo predvideti, prav tako pa lahko do nje dostopate neposredno prek starejših brskalnikov. Hkrati se priznava, da je da je nemogoče zagotoviti enako kakovostno izkušnjo takšnim uporabnikom, ne da bi se po nepotrebnem izogibali funkcijam, ki bi koristile uporabnikom z zmogljivejšimi brskalniki. Funkcij, zaradi katerih bi bila vsebina skrita ali poškodovana, ko CSS ali JavaScript nista na voljo, se zato ne sme uporabljati. Vendar bi morali uporabnikom, ki nimajo CSS ali JavaScript, predvsem zagotoviti, da je njihova bralna izkušnja {{Em|mogoča}}; znano je, da bo neizogibno {{Em|slabše kakovosti}}.

Upoštevajte, da mobilne različice spletnega mesta ne podpirajo strnjevanja, zato bo vsa strnjena vsebina samodejno razkrita.

Če želite upoštevati te pomisleke, preizkusite morebitne moteče spremembe z onemogočenim JavaScriptom ali CSS. V Firefoxu ali Chromu je to mogoče enostavno narediti z razširitvijo Web Developer; JavaScript lahko onemogočite v drugih brskalnikih na zaslonu »Možnosti«. Bodite še posebej previdni pri učinkih CSS v vrstici, ki jih ne podpira več brskalnikov, medijev in različic XHTML.

== Glej tudi ==

* [[usability:Accessibility Initiative|Usability:Accessibility Initiative]] (na Wikimediji)
* [[Pobuda za spletno dostopnost|Web Accessibility Initiative]] (WAI)
* [[wikipedija:Preverljivost|Wikipedia:Preverljivost#Dostopnost]]
* [[wikipedia:Uporaba JAWS|Wikipedija:Uporaba JAWS]]
* [[wikipedija:Mobilni dostop|Pomoč:Mobilni dostop]]

== Opombe ==
<references group="lower-alpha" responsive="1"></references>

== Sklici ==
{{Reflist}}

== Nadaljnje branje ==

* {{Navedi knjigo|first=Joe|last=Clark|year=2003|title=Building Accessible Websites|edition=|publisher=New Riders Press|location=|isbn=0-7357-1150-X|url=http://www.joeclark.org/book/|accessdate=1 January 2011|ref=none}}
* {{Navedi splet|first=Mark|last=Pilgrim|title=Dive Into Accessibility: 30 days to a more accessible web site|year=2002|url=http://diveintoaccessibility.info|archiveurl=https://web.archive.org/web/20171005130529/http://diveintoaccessibility.info/|archivedate=5 October 2017|ref=none}}
* {{Navedi knjigo|last=Patrick J. Lynch|last2=Sarah Horton|year=2016|title=Web Style Guide|publisher=Yale University Press|pages=|isbn=978-0-300-21165-8|oclc=1004033147|url=https://books.google.com/books?id=EY_BDAAAQBAJ&pg=PP1}}

== Zunanje povezave ==

* [https://design.wikimedia.org/style-guide/ The Wikimedia Design Style Guide]
* [[mw:Recommendations_for_mobile_friendly_articles_on_Wikimedia_wikis|Recommendations for mobile friendly articles on Wikimedia wikis]]
* [http://www.w3.org/WAI/quicktips/ 10 Quick Tips to Make Accessible Web Sites], from WAI
* [http://colorfilter.wickline.org/ Colorblind web page filter]
*[https://webstyleguide.com/wsg3/8-typography/3-legibility.html Legibility], from  Web Style Guide, 3rd Edition
* [http://www.w3.org/WAI/intro/components.php Essential Components of Web Accessibility], from WAI
* [http://www.w3.org/WAI/intro/accessibility.php Introduction to Web Accessibility], from [[Web Accessibility Initiative|WAI]]
* [https://phabricator.wikimedia.org/tag/accessibility/ Known and tracked MediaWiki accessibility issues]

{{Pravila in smernice}}
{{Slogovni priročnik}}

[[Kategorija:Dostopnost v Wikipediji| ]]
[[Kategorija:Slogovni priročnik Wikipedije (dostopnost)]]