Viquiprojecte:Adaptacions per al Mode Fosc
Objectiu[modifica]
Identificar i aplicar els canvis necessaris per implantar a la Viquipèdia el funcionament en mode fosc dels continguts.
Context: el mode fosc és cada vegada més popular en dispositius mòbils. Hi ha navegadors que ofereixen el canvi automàtic segons l'ambient detectat. Actualment està disponible per a usuaris registrats. La majoria d'editors usen la versió escriptori, mentre que més de la meitat dels lectors usen la versió mòbil. L'experiència dels lectors pot ser dolenta si els editors no comproven l'accessibilitat de les pàgines en mode fosc.
Proves[modifica]
- En versió mòbil (tant escriptori com dispositiu mòbil), en menú/configuració comproveu que teniu activat "advanced mode" i seleccioneu color/dark.
- En versió escriptori, activeu en menú_personal/beta l'opció "Accessibilitat en la lectura (Vector 2022)". Sota de la barra d'eines apareixerà un nou menú on podeu seleccionar "light" o "dark", només en articles.
- Per a activar el menú en totes les pàgines (usuari, edició, previsualització, etc.), copieu aquest codi en la vostra Especial:Pàgina personal/vector-2022.js.
Recomanacions generals[modifica]
Pàgina de referència de Mediawiki: mw:Recommendations for night mode compatibility on Wikimedia wikis.
- Qualsevol combinació de colors de text i fons, en mode clar o en mode fosc, ha de tenir un contrast mínim. La recomanació és 4.5:1 per a text normal i 3:1 per a traç gruixut (negreta no necessàriament negre). Vegeu les eines a Mediawiki, la comprovació periòdica de pàgines més vistes de la Viquipèdia que no passen el test de contrast en mode clar i en mode fosc, i Especial:LintErrors/night-mode-unaware-background-color (beta).
- Evitar definicions explícites de color en els articles. No es pot assumir que el que un veu ho vegi tothom igual. Per assegurar-ho, els colors haurien d'estar definits en plantilles amb els estils en el corresponent templatestyles.css i comprovant el test de contrast amb diferents temes.
- Sempre que sigui possible, useu colors predefinits. Vegeu Codex i en especial Color design tokens.
- Sempre que sigui possible, useu class d'àmbit interwiki, per exemple wikitable, infobox, ambox. Per a aquestes class el MediaWiki ja ofereix un disseny particular en mode fosc.
Origen i dades del canvi[modifica]
Loren ipsum
Tipus de canvis identificats i solució a aplicar[modifica]
| Canvi | Descripció | Acció | |
|---|---|---|---|
| Text en color | |||
| CSS background dins el text | |||
Llista de tasques[modifica]
Portada[modifica]
- Les descripcions dels projectes germans no passen el test de contrast.
- El text en el carrusel d'imatges no es pot llegir en versió escriptori fosc. En versió mòbil no es mostra. De moment no es fa res.
Revisar infotaules[modifica]
- El color d'enllaç a Wikidata no passava el test de contrast. Eliminat en Mòdul:Wikidades/proves, pendent de definir en templatestyles de Mòdul:Infobox i d'altres possibles plantilles.
Veure seguiment canvis a Inventari d'Infotaules.
Revisar plantilles d'avisos[modifica]
- Actualitzat Mòdul:Message box i creats els corresponents templatestyles.
- Pendent de migració de plantilles que no usen el mòdul.
- Al final, caldrà netejar les definicions mbox de MediaWiki:Common.css.
- Adaptar l'avís d'enllaç a una pàgina de desambiguació: MediaWiki:Gadget-bkl-check.js.
Imatges[modifica]
Les imatges vectorials (SVG i algunes PNG) amb traç monocolor fosc (normalment negre) sobre fons transparent no es veuen bé, o gens, amb el fons fosc, per exemple les signatures com Fitxer:Al Capone Signature.svg. La solució és afegir la class skin-invert que inverteix el color del traç segons el color de fons transparent. La sintaxi és [[Fitxer:Al Capone Signature.svg|class=skin-invert]].
- Canviat en icones d'infotaules revisades.
- Plantilla:xib-trans
- Mòdul:Dimensions
- Pendent de detectar altres casos.
Les imatges vectorials (SVG i algunes PNG) amb diversos colors sobre fons transparent poden no veure's bé perquè estaven pensades per anar sobre un fons blanc. En algunes infotaules que les recuperen de WD, per aconseguir una millor visualització en imatges de Logotips (P154) o Plànols (P3311) en mode fosc, cal fer una inversió de color (cas Tour de França) o posar-li un fons que permeti una bona visualització (cas Premier League). Amb el paràmetre v_<propietat>_fons=invert s'aconsegueix el primer cas, i amb v_<propietat>_fons=white s'aplica un fons a la imatge; (veure casos amb aquest tractament previst a llista d'infotaules).
Altres imatges amb format diferent de SVG no s'alteren al passar a mode fosc. Això no provoca problemes amb fotos o altres imatges on el 100% és contingut visual. Però les icones, gràfics o signatures amb un fons (blanc, habitualment) s'haurien de convertir a svg amb fons transparent per poder-les invertir en mode fosc amb la funcionalitat skin-invertit, explicat més amunt.
- Llista de signatures en articles VP que són imatges ≠ svg que s'haurien de migrar. Abans de dibuixar la versió svg, comproveu que no existeixi ja a Commons un .svg o bé, que es tracta d'un .png amb fons transparent que també funcionen. Tant si en feu una nova imatge com si la bescanvieu per altra, caldrà canviar el valor de la P109 a l'item de la persona.