Accessibilitat

Els estàndards amb què s'ha construït el lloc, mesurats segons la WCAG 2.2 amb l'AA com a objectiu. El que segueix és el que fa realment el codi, inclòs l'únic punt on el verd de marca ha forçat un compromís honest.

Els estàndards

  1. Enllaç per ometre i regions de referència

    2.4.1 Bypass Blocks · A

    Un visitant amb teclat aterra primer en un enllaç Skip to content que salta per sobre de la interfície fins a la regió principal. La pàgina està construïda amb regions de referència reals: un main, elements de navegació etiquetats i un footer.

  2. Focus visible

    2.4.7 Focus Visible · AA

    Cada control es focalitza amb un anell verd de dos píxels situat a dos píxels de la vora, que es mostra per al focus de teclat i no per a un clic de ratolí.

  3. Mida de l'objectiu

    2.5.8 AA · 2.5.5 AAA

    Els controls tàctils principals (el dock de pestanyes, les files del full, les pastilles de crida a l'acció) fan de 44 a 48 píxels; el control de punter més petit encara supera els 24. Així, cada control compleix el mínim de l'AA, i els controls tàctils compleixen la mida AAA, més estricta.

  4. Moviment reduït

    2.3.3 · AAA

    Quan el sistema d'un visitant demana menys moviment, el lloc redueix cada animació i transició a una mica per sobre de zero, i converteix el desplaçament suau en un salt simple.

  5. Paritat de tema, sense flaix

    El clar i el fosc són tots dos de primera classe: cada superfície es dissenya en tots dos, i el tema es resol abans del primer pintat perquè un visitant en mode fosc mai no rebi un flaix blanc.

  6. El color no és l'únic senyal

    1.4.1 Use of Colour · A

    Els enllaços en la prosa dels articles estan subratllats, de manera que el seu significat mai no depèn només del verd.

El compromís del verd llegible

El verd de marca és un llima brillant, i el llima brillant no es llegeix com a text sobre blanc. Mesurat segons la WCAG, #6dc402 sobre blanc és d'uns 2,2:1, per sota fins i tot del llindar de 3:1 per al text gran. Per això existeix un segon token: --color-green-text rebaixa el verd fins a #5aa302, que supera el 3:1. Amb això n'hi ha prou per al text gran o en negreta, per als encapçalaments i per als accents d'interfície com l'anell de focus, i s'utilitza per a això, no per al text del cos.

Un enllaç verd Un enllaç verd
Un enllaç verd
Token Sobre blanc Sobre gairebé negre
--color-green
2.2:1 8.6:1
--color-green-text
3.2:1 6.0:1

Compleix l'AA Només text gran i interfície No arriba al llindar

La part honesta: a la mida de lectura del cos sobre un fons clar, un enllaç verd se situa a uns 3,2:1, per sobre del llindar del text gran però per sota del llindar de 4,5:1 per al text normal. El lloc accepta aquest compromís per conservar el seu únic color de marca, i el suavitza de dues maneres. Els enllaços dels articles estan subratllats, de manera que el color mai no és l'únic senyal; i el mode fosc ho resol del tot, on el mateix llima sobre gairebé negre es llegeix a uns 8,6:1. El text del cos, en si mateix, sempre és neutre, i sempre compleix.

Abast

Això cobreix el lloc web. L'aplicació de React Native i les plantilles de correu són superfícies pròpies, amb els seus propis estàndards, i no es documenten aquí.

Has vist alguna cosa que no quadra en aquesta pàgina? Escriu-me