Jump to content

Doporučení pro kompatibilitu nočního režimu na wikinách Wikimedie

From mediawiki.org
This page is a translated version of the page Recommendations for night mode compatibility on Wikimedia wikis and the translation is 100% complete.
Languages:
Viz též: Doporučení pro články na wikinách Wikimedie optimalizované pro mobilní zařízení

Umožnění uživatelům přepínat mezi standardním a nočním režimem je funkce, kterou používá mnoho webových stránek, mobilních zařízení atd. Dává uživateli větší kontrolu a usnadňuje čtení. Byl přidán do našeho softwaru jako součást projektu Čtení/Web/Přístupnost pro čtení .

Napříč wiki projekty Wikimediae probíhá úsilí o zavedení nočního režimu pro anonymní uživatele na desktopových i mobilních stránkách. Aplikace Wikipedie pro iOS a Android a přihlášení uživatelé vzhledů Vector 2022 a Minerva tyto možnosti již nějakou dobu mají.

Významnou překážkou implementace nočního režimu je způsob, jakým jsou šablony konstruovány a stylizovány. Další výzvou je použití explicitních barev, specifikovaných jako inline CSS styly v různých článcích.

Tyto problémy můžeme vyřešit zvýšením povědomí o nočním režimu mezi editory, zejména editory šablon. Je to proto, že šablony lze zahrnout do mnoha článků, a mají tak velký vliv na kompatibilitu s nočním režimem.

Následují obecná doporučení a pokyny, které by měli mít editoři na paměti při psaní článků a šablon.

Jak mohu na MediaWiki používat různá témata?

Ve výchozí nabídce Vektor (2022) Vzhled klikněte na tlačítko , známé také jako rozbalovací nabídka Vzhled, v pravém horním rohu obrazovky. Čtenář si může změnit velikost textu a šířku obsahu, ale jako experimentální funkci může nastavit hodnotu od Barva} do Automaticky, Světlá a také Tmavá, což ztmaví obrazovku. To lze také provést pomocí Nastavení v sekci Vzhled.

Prozatím můžete na konec libovolné URL přidat ?vectornightmode=1 (ve Vectoru 2022) nebo ?minervanightmode=1 (v Minervě) a zobrazit, jak se obsah aktuálně chová v nočním motivu. Noční režim můžete na naší testovací wiki povolit na https://test.m.wikipedia.org/wiki/Special:MobileOptions. Tento návod budeme aktualizovat s tím, jak se funkce bude vyvíjet.

Doporučení

Použijte doporučené HTML kódování pro popis vašich šablon

Noční režim bude dodáván se styly, které automaticky opraví známé univerzální problémy se šablonami. To je důležité pro projekty s menším počtem technických editorů. Z těchto stylů bude možné se odhlásit přidáním třídy notheme k příslušnému elementu nebo globálně (phab:T358071). Projekty, které tyto třídy nevyužívají, tuto funkci pravděpodobně získají později než ostatní.

Více informací: Použití standardizovaných názvů tříd v HTML kódu pro komponenty v šablonách napříč projekty

Používejte přístupné barvy, které projdou kontrolami WCAG AA

Mnoho barev používaných v denním režimu bylo historicky nepřístupných. Při výběru barev pro noční režim nezapomeňte zkontrolovat existující barvy pomocí kontroly kontrastu WebAIM. Zvažte prosím úpravu jasu, aby barvy byly průhledné. Zvažte instalaci rozšíření prohlížeče, jako je například nástroj WCAG Color Contrast (Chrome nebo Firefox), abyste si lépe uvědomili problémy s barevným kontrastem na vaší wiki.

Dobrý příklad

#ace 

@media screen {
	html.skin-theme-clientpref-night .element {
		background-color: #383838;
		color: #ace;
	}
}
Špatný příklad

#ace 

@media screen {
	html.skin-theme-clientpref-night .element {
		background-color: #666666;
		color: #ace;
	}
}

Cílový noční režim pomocí standardního mediálního dotazu a také HTML tříd

Standardní čitelná třída skin-theme-clientpref-night bude použita na element HTML, pokud bude povolen tmavý režim. Styly zaměřené na noční režim by však měly cílit i na preferenci barevného schéma, protože někteří uživatelé se k němu mohli přihlásit prostřednictvím svého operačního systému a přihlásit se k odběru těchto stylů prostřednictvím skin-theme-clientpref-os. Barevné schéma preferované cílením bude stylizovat obsah vhodný pro obě skupiny uživatelů.

Dobrý příklad
Template:Example/styles.css
/* vynucený noční režim */
/* Poznámka: Pokud používáte proměnnou CSS, není nutné používat '@media screen' */
@media screen {
	html.skin-theme-clientpref-night .pane {
		background-color: black;
		color: white;
	}
}

/* automatický režim */
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .pane {
		background-color: black;
		color: white;
	}
}
Špatný příklad
Template:Example/styles.css
html.skin-theme-clientpref-night .pane {
	background-color: white;
	color: black;
}

Vyhněte se statickým hodnotám pro barvy pozadí a textu v textu

Četné šablony a články používají explicitní inline barvy, i když ve skutečnosti nejsou nutné. Při vytváření nových šablon nebo při kontrole stávajících šablon zvažte odstranění vložených barev pro pozadí nebo text. To umožní aktuálnímu vzhledu automaticky aplikovat styly na všechny prvky.

Pokud si prohlížíte článek v nočním režimu a všimnete si prvku, který se zdá být v konfliktu (např. jasně bílé pozadí tabulky), je to s největší pravděpodobností způsobeno barvou v textu zadanou pro tento prvek. Zvažte kontrolu článku nebo šablony, která tento prvek zobrazuje, a odstranění vložené barvy.

Pokud se domníváte, že určitý prvek by měl mít specifickou barvu, zvažte hledání vhodné CSS třídy (poskytované vzhledem), kterou lze na prvek použít a která by mu dodala výraznější barvu. Pokud taková třída CSS není k dispozici, zvažte kontaktování vývojářů vzhledu s žádostí o vytvoření nové třídy CSS.

Tam, kde chcete věci stylovat, se doporučuje použít stylový list (více informací viz Nápověda:TemplateStyles ) nebo proměnnou CSS.

Špatný příklad
Template:Example
<div class = "pane" style = "background-color: white; color: black;">Text</div>
Dobrý příklad
Template:Example
<templatestyles src="Template:Example/styles.css" />
<div class="pane">Text</div>
Template:Example/styles.css
@media screen {
	html.skin-theme-clientpref-night .pane { 
        background-color: black; 
        color: white; 
    }
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .pane { 
        background-color: black; 
        color: white; 
    }
}

Při definování pozadí vždy definujte barvu

Při definování barvy pozadí může být lákavé barvu nedefinovat, pokud je stejná jako barva textu článku. Pokud se však použijí různá témata, např. noční režim, může to mít nezamýšlené důsledky (např. bílý text na žlutém pozadí). Doporučuje se proto, abyste je vždy definovali společně. Pro pomoc editorům s identifikací stránek a šablon s tímto problémem je k dispozici pravidlo pro odstraňování vláken .

I při použití CSS proměnných je důležité explicitně definovat barvu podél pozadí, aby se předešlo předpokladům o kontextu, ve kterém je použita. Například šablona může být vložena do jiné šablony/tabulky, která definuje vlastní pozadí nebo barvy, nebo se na stránku mohou vztahovat globální styly, které mohou neúmyslně ovlivnit váš vlastní obsah.

Špatný příklad

Template:Example 

<div style="background-color: yellow; padding: 16px;">Text</div>

Dobrý příklad

Template:Example 

<div style="background-color: yellow; color: #333; padding: 16px;">Text</div>

Používejte CSS proměnné nebo CSS designové tokeny s záložním pozadím a textem, kde je to možné

Řešeno přes Phabricator
Úkol T360562
Vyřešeno
Řešeno přes Phabricator
Úkol T361934
Vyřešeno
Řešeno přes Phabricator
Úkol T368637
Otevřeno
Doporučení je aktuálně omezeno na použití uvnitř TemplateStyles (phab:T360562, phab:T361934).

Proměnné CSS lze definovat pouze uvnitř gadgetů a CSS webu, např. MediaWiki:Common.css.

Při používání designových tokenů je třeba mít na paměti, že stabilita v současné době není zaručena a může vyžadovat pozdější změny na základě phab:T340477.

Při použití inline stylů k úpravě textu nebo pozadí použijte CSS designový token, který je podporován daným vzhledem. Seznam designových tokenů naleznete v dokumentaci Codexu. Při použití proměnných CSS pro tokeny designu Codexu vždy zadejte záložní hodnotu pro vzhledy, kde proměnné CSS nejsou podporovány.

Můžete si také definovat vlastní CSS proměnné uvnitř gadgetu (například výchozí skrytý gadget nočního režimu na anglické Wikivoyage).

Špatný příklad 

<span style="font-size:0.95em; font-size:95%; color: #54595d;">A subscription is required to read this URL.</div>

Dobrý příklad

V tomto příkladu je použit návrhový token color-subtle, přičemž #54595d  se používá pouze jako záložní varianta, když proměnné CSS nejsou ve vzhledu k dispozici. Díky tomu mají vzhledy s nočním režimem informace potřebné k úpravě obsahu na vhodnou barvu. 

<!-- Vždy definujte záložní hodnotu CSS pro vzhledy, které nepodporují Codex, např. Monobook. -->
<span style="font-size:95%; color:var(--color-subtle, #54595d);">A subscription is required to read this URL.</div>

Přepsání stylů nočního režimu / vypnutí motivu nočního režimu

V aktuální implementaci služby Page Content Service (služba používaná mobilními aplikacemi k zobrazování článků) funguje noční režim tak, že přepíše barvy většiny prvků nočními styly pomocí vlastnosti CSS !important. Je to právě kvůli velkému počtu šablon a prvků, které specifikují inline styly. Ve webové verzi se to také děje v menší míře (primárně u prvků týkajících se infoboxů, navboxů a dalších běžných šablon).

Mohou nastat případy, kdy je odstranění barev neopodstatněné nebo kdy redaktoři s provedenou volbou nesouhlasí. V takových případech můžete do stylu elementu zahrnout třídu notheme, což zabrání přepsání jeho barvy (tj. úpravě tématu). Díky tomu bude obsah stylizován napříč tématy (např. noc/světlo/sépie) naprosto stejným způsobem.

Špatný příklad

V tomto příkladu bude motiv v aplikacích Wikimedie přepsán a všechny barvy budou v nočním režimu na počítači nebo mobilním webu invertovány: 

<div class="pane">Text</div>

Dobrý příklad

V tomto příkladu šablona explicitně požaduje, aby nebyla přepsána v aplikacích Wikimedie a barvy nebudou jinde invertovány: 

<div class="pane notheme mw-no-invert">Text</div>

Použití filtrů na tmavé obrázky s průhledným pozadím

Některé obrázky (například podpisy v infoboxech) bývají černé barvy s průhledným pozadím. V nočním režimu to má za následek nečitelné SVG obrázky, protože černý obsah bude na tmavém pozadí. Chcete-li to opravit, můžete použít invertní filtr CSS (pomocí třídy skin-invert nebo skin-invert-image). Pokud je k miniatuře přiložen popisek, měli byste použít třídu skin-invert-image, abyste zabránili invertování i popisku.

Důležité: Třída invert je určena pouze pro obrázky, které jsou zcela černé nebo tmavě šedé, jako jsou podpisy nebo černá loga. Tomuto přístupu je třeba se vyhnout v každém případě, kdy jsou v původním obrázku použity jiné barvy než černá, protože by to zkreslilo jakékoli sémantické použití barvy v originále. U některých obrázků je vhodnější přidat třídu notheme, aby vypadaly identicky jako v režimu Light.

Špatný příklad

V tomto příkladu to může vést k podpisu s černým inkoustem na černém pozadí. 

[[File:Tupac Shakur's signature.svg|thumb]]
[[File:Gas flare fr.svg|thumb|left|Éléments d'une torchère.|alt=Schéma. Le gaz est séparé du pétrole, déshumidifié, et envoyé vers la cheminée, il y a un allumeur au sommet.]]

Dobrý příklad

Zde jsou barvy invertovány, takže podpis se stane bílým. 

[[File:Tupac Shakur's signature.svg|thumb|class=skin-invert]]
[[File:Gas flare fr.svg|thumb|left|class=skin-invert-image|Éléments d'une torchère.|alt=Schéma. Le gaz est séparé du pétrole, déshumidifié, et envoyé vers la cheminée, il y a un allumeur au sommet.]]

Image appears as in light mode (with background).
[[File:Tupac Shakur's signature.svg|thumb|class=notheme]]

U šablon, které nemají možnost zadat hodnotu class, můžete použít značku <div>, která obklopí šablonu a třídu tam aplikuje. Například: 

<div class="skin-invert-image">
    {{multiple image|align=center|total_width=540
        |image1=...
    }}
</div>

Příklad galerie

Chcete-li invertovat všechny obrázky v galerii , můžete k tagu ‎<gallery> přidat třídu skin-invert nebo skin-invert-image, v závislosti na kontextu. (Pokud vaše galerie používá popisky, měli byste použít skin-invert-image, abyste zabránili invertování textu popisků.) 

<gallery class="skin-invert-image">
Tupac Shakur's signature.svg
Gas flare fr.svg|Éléments d'une torchère.|alt=Schéma. Le gaz est séparé du pétrole, déshumidifié, et envoyé vers la cheminée, il y a un allumeur au sommet.
</gallery>

Když skin-invert nefunguje

Některé snímky nebudou v nočním režimu snadno invertovatelné bez ztráty důležitých informací (například snímky s tmavým podkladem doprovázené jasnými barvami). V těchto případech je pravděpodobně nejlepší možností pro zachování původních barev obrazu poskytnout světlé pozadí, spíše než invertovat obrázek, aby byl viditelný v denním i nočním režimu.

Nepoužívejte background: none nebo background: transparent

Většinou jsou zbytečné a co je ještě horší, budou narušovat automatické opravy pro noční režim vašeho projektu. Tyto prvky by měly být v nezbytně nutném případě odstraněny nebo přesunuty do TemplateStyles, aby se předešlo problémům s barevným kontrastem v nočním motivu.

Špatný příklad 

<div style="background: transparent;">Text with transparent background</div>

Dobrý příklad

Pravidlo pozadí je zbytečné. 

<div>Text with transparent background</div>

Přijatelný příklad

Pokud je pozadí nezbytné, například pro tag div uzavírající soubor SVG s průhledným pozadím, definujte také color: inherit, abyste se vyhnuli chybám Lint souvisejícím s barvou pozadí . 

<div style="background: transparent; color: inherit;">[[File:Image with transparent background.svg]]</div>

Nepoužívejte funkci light-dark()

Funkce CSS light-dark() zatím není podporována všemi prohlížeči, které MediaWiki plánuje podporovat. Minimálně do roku 2028 se prosím vyhněte jejímu používání k definování barev tmavého režimu. Podrobnosti naleznete v seznamu kompatibility prohlížečů .

Rady pro editory, kteří vytvářejí alternativní šablony

Obecněji řečeno, chceme povzbudit editory, aby na šablony a články pohlíželi jako na agnostické, pokud jde o témata a styly. Kromě nočního režimu může existovat libovolný počet potenciálních barevných témat a mobilní aplikace Wikipedie (prostřednictvím služby Page Content Service) již nabízejí téma "sépie" a také "černé" téma určené pro úsporné OLED obrazovky.

Invertovat, či neinvertovat?

Invertování pomocí CSS filtrů nabízí rychlý způsob, jak převést obsah navržený ve světlém tématu na tmavší téma. I když tento přístup nemůžeme doporučit pro veškerý obsah , stále se jedná o užitečný nástroj, který lze často používat bezpečně a levně. Gadget nočního režimu na Wikipedii používá vlastnost filtru CSS invert pro stylování obsahu. Invertování barev elementu můžete zabránit přidáním třídy mw-no-invert. Třídu skin-invert můžete také použít k požadavku, aby software invertoval obsah, když je k dispozici.

Zvažte spíše vzory než barvy pozadí

Barvoslepí čtenáři mohou mít potíže s rozlišováním a rozpoznáváním malých barevných předmětů. V článcích zvažte použití vzorů spíše než barev, nebo v případě potřeby navíc k barvám. Ideálně tam, kde je vzor oddělený od textu. Zvažte použití monochromatických Vvzorů pozadí CSS a přečtěte si o tom, jak Trello zavedlo režim vhodný pro barvoslepé.

Špatný příklad

Template:Example/styles.css 

html.skin-theme-clientpref-night .ib-youtube-above {
	background-color: #B60000;
	color: white;
}

Dobrý příklad

Template:Example/styles.css 

@media screen {
	html.skin-theme-clientpref-night .ib-youtube-above {
		background-image: linear-gradient( 135deg, #ff1c00 25%, transparent 25% ), linear-gradient( 225deg, #ff1c00 25%, transparent 25% ), linear-gradient( 45deg, #ff1c00 25%, transparent 25% ), linear-gradient( 315deg, #ff1c00 25%, var( --background-color-base ) 25% );
		background-position: 8px 0, 8px 0, 0 0, 0 0;
		background-repeat: repeat-x;
		background-size: 8px 8px;
	}
}

Proč jsou odkazy v barevných tabulkách černé?

Pro editory je poměrně běžné vytvářet tabulky s barvami pozadí definovanými na řádcích nebo sloupcích. Pokud tabulka obsahuje odkazy, může to být problematické, protože výběr barev bude často přizpůsoben přístupnosti ve standardním motivu nebo přístupnost vůbec nezohlední.

Například odkazy v této tabulce jsou přístupné ve světlém motivu, ale ne v tmavém:

Listina Phab Popis
T360844 Odkazy v prvcích s barvou pozadí by měly být černé a podtržené, aby byly přístupné.
T357575 Stránky souborů nejsou kompatibilní s nočním režimem

Místo modrých odkazů v těchto tabulkách se takové odkazy zobrazí černě. Pokud toto chování nechcete, upravte prosím své tabulky tak, aby nepoužívaly vložené styly.

Více informací je na stránce phab:T371411.

Upozorňujeme, že toto chování platí pouze pro jmenný prostor článků. Pokud používáte tabulku s různě barevnými řádky v jiném jmenném prostoru, měli byste zvážit vytvoření šablony, která poskytuje podporu pro zajištění toho, aby odkazy splňovaly standardy barevného kontrastu WCAG AA. Pro vhodné stylování odkazů můžete použít Extension:TemplateStyles .

Ve vzácných případech může styl, který ztmavuje odkazy v barevných tabulkách, vést k tmavému textu na tmavém pozadí. Tomuto problému se dá předejít přidáním proměnné color: inherit do atributu style před jakékoli jiné definice barev nebo přidáním třídy notheme k elementu s inline stylem. Přesunutí barevných stylů do TemplateStyles také zabrání použití opravy černého odkazu.

Nepřidávejte prosím hacky, které zahrnují jakékoli nestandardní přístupy k řešení tohoto problému, například vložené komentáře. Mohlo by to narušit fungování dalších šablon vložených do vašeho elementu.

Mnoho odkazů ve standardním světlém tématu je již nepřístupných, protože výchozí barva odkazů pro vzhledy Wikimedie často není kompatibilní s žádnou vlastní barvou pozadí. Pokud se v tmavém motivu vyskytnou problémy související s tímto tématem, je vhodné zkontrolovat barevný kontrast ve standardním prostředí. Možná existuje dlouhodobý problém s přístupností, který čeká na řešení!

Zakázaný text nemusí nutně splňovat pokyny pro barevný kontrast

Od https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

Komponenty uživatelského rozhraní, které nejsou k dispozici pro interakci s uživatelem (např. zakázaný ovládací prvek v HTML), nemusí splňovat požadavky na kontrast. Neaktivní komponenta uživatelského rozhraní je viditelná, ale momentálně není funkční. Příkladem by mohlo být tlačítko pro odeslání ve spodní části formuláře, které je viditelné, ale nelze jej aktivovat, dokud nejsou vyplněna všechna povinná pole ve formuláři.

Stránka mi připadá v pořádku, i když nedodržuje tato pravidla. Proč?

Aby se snížilo množství počáteční práce potřebné k tomu, aby wikiny přijaly noční režim, mohla být na stránky prozatím aplikována různá zobecněná řešení, která jim pomohou splnit noční režim. Tyto styly budou nakonec odstraněny, jakmile se wikiny přizpůsobí novému tématu.

Tyto jsou uvedeny zde:

  • WikimediaMessages SiteAdminHelper - pomocník pro správu webu nabízí různé styly, které vylepšují podporu nočního režimu - to zahrnuje deaktivaci/aktualizaci pozadí a ohraničení v prvcích třídy .navbox, .infobox, .quotebox, .side-box, .metadata, .navigation-box a všech prvcích na hlavní stránce. Také vynucuje černou barvu textu na jakémkoli elementu, který definuje vložený styl s pravidlem pozadí. Všimněte si, že ačkoliv se tím opravuje velká většina problémů, také to způsobuje poškození některých prvků, zejména atributů stylu, které nastavují background: inherit a background: transparent.
  • Pravidla MediaWiki:Vector-2022.css / MediaWiki:Minerva.css – některé wikiny mohly přijmout zobecněná pravidla, která mění odkazy na černý podtržený text u libovolného prvku tabulky, který má vložené styly, jež aplikují pozadí. Například anglická Wikipedie.
  • Na šablonu, kterou si prohlížíte, již mohlo být použito lokální řešení. Nezapomeňte element zkontrolovat a podívat se na všechny související styly poskytované styly šablon , které mohou aplikovat specifická pravidla, když jsou v elementu HTML detekovány třídy motivů night.

Příklady

Následující tikety vysvětlují opravy různých jmenných prostorů/šablon a typů stránek, které byly použity v jednom projektu. Mohou být užitečné pro jiné projekty s podobnými šablonami nebo zastaralými kopiemi těchto šablon.

Nezapomeňte si prosím přečíst související diskusi – a pokud máte nějaké otázky, zeptejte se na ně, aby sdílení odborných znalostí mohlo být přínosem i pro další projekty.

Obecné problémy

Portály

  • Portál:Aktuální události T357717

Šablony / moduly

Zprávy

Zkontrolujte prosím následující zprávy na vaší wiki:

Retrieved from "https://www.mediawiki.org/w/index.php?title=Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis/cs&oldid=8487935"