/* * ACCESSIBILITAT. Capa a part, carregada DESPRÉS d'estils.css. * * Va en un fitxer seu i no dins d'estils.css per dues raons: estils.css és * compartit i el toquem tots dos, i així es pot veure d'un cop d'ull què costa * exactament fer el joc accessible. Si un dia s'integra, es fon a mà. * * Dues parts, i la separació importa: * * SEMPRE correccions que no es veuen fins que no fas servir el teclat o * un lector de pantalla. No tenen interruptor perquè no hi ha res * a decidir: no canvien el disseny. * INTERRUPTOR correccions que sí que es veuen. Al prototip van darrere d'un * commutador per poder ensenyar l'abans i el després de costat. * ATENCIÓ: dues d'aquestes (contrast i icones) són requisits de * nivell A i AA i al producte final han d'anar SEMPRE ENCESES. * L'interruptor és un aparell de demostració, no la solució. * * Referència: WCAG 2.1 AA, que per a l'ACC no és una recomanació sinó * obligació legal (EN 301 549 i RD 1112/2018, sector públic). */ /* ============================================================ PART 1 · SEMPRE ============================================================ */ /* Text només per al lector de pantalla. Ni `display:none` ni `visibility` servirien: totes dues el treuen també de l'arbre d'accessibilitat. */ .nomes-lector{ position:absolute!important;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px; } /* FOCUS VISIBLE (WCAG 2.4.7 i 2.4.11). estils.css només en posa als `button`, i el negre sobre el vermell del menú es queda a 2,97:1, just per sota del mínim. Amb doble anell, negre a dins i blanc a fora, es veu sobre qualsevol dels dos fons del joc sense haver de saber quin hi ha a sota. */ /* SENSE `border-radius` aquí. N'hi havia 3px, per als elements que no en tenen cap de propi, i com que aquest selector guanya a `.pastilla` convertia els botons en rectangles de cantons quadrats en arribar-hi amb el tabulador. Trobat el 14/09 amb el «Comença» de la pantalla d'inici: radi 40 amb el ratolí i radi 3 amb el teclat. L'anell segueix el radi de cada element. */ a:focus-visible, input:focus-visible, [tabindex]:focus-visible, button:focus-visible{ outline:3px solid #141414;outline-offset:2px; box-shadow:0 0 0 6px rgba(255,255,255,.95); } /* Sobre les dues pantalles vermelles, l'anell s'inverteix. */ .menu-obert a:focus-visible, .menu-obert input:focus-visible, .menu-obert button:focus-visible, .vel button:focus-visible{ outline-color:#fff;box-shadow:0 0 0 6px rgba(0,0,0,.55); } /* Les entrades del menú que no porten enlloc. Un enllaç que no fa res no pot seguir anunciant-se com a enllaç: `aria-disabled` ho diu, i aquí es veu. */ .menu-obert a[aria-disabled="true"]{cursor:default} /* ELS DOS CONTENIDORS QUE REBEN EL FOCUS no han de pintar l'anell: no són controls, només són on aterra el focus quan s'obre una capa perquè el lector de pantalla l'anunciï. L'anell d'un contenidor, a més, seria un rectangle al voltant de tota la pantalla. Els controls de dins el continuen pintant. */ #vel:focus, #desenllac:focus, #learning:focus, /* El títol de cada pantalla és el mateix cas: hi aterra el focus en canviar de pantalla perquè el lector el digui, però no es pot prémer. */ .titol-pantalla:focus{outline:none;box-shadow:none} /* El camp d'escriure NO es fa visible aquí a posta, encara que seria el lloc. Els navegadors fan que qualsevol camp de text compleixi `:focus-visible` sempre que rep el focus, també quan l'hi posa el JavaScript, i el joc l'hi posa a cada intent: la caixa apareixeria a mitja partida jugant amb el dit. Es fa visible amb l'interruptor `data-a11y-camp`, més avall. */ /* ---------- Contrast reforçat (WCAG 1.4.3 i 1.4.11) · SEMPRE ---------- Cinc parells fallen la ràtio mínima. Cap correcció canvia el to: només l'enfosqueix el mínim per arribar al llindar. Mesurat, no a ull. Del 14/09 va sense interruptor. Era la Decisió 2 de l'auditoria i el que deia la capçalera d'aquest fitxer des del primer dia: el nivell AA es compleix o no en l'estat per defecte, i un interruptor pot servir per apagar, mai per encendre. Es queda escrit aquí, i no fos amb estils.css, perquè es continuï veient d'un cop d'ull què costa el contrast. */ :root{ /* El 16/09 la paleta del tauler canvia (verd, vermell i gris nous, text fosc en comptes de blanc) i el fons passa de lila a gris. Recalculat tot: --present ja NO cal corregir-lo. Es corregia perquè el text de la casella era blanc (2,49:1). Ara el text és #333 i el #D1CBC7 del Figma dona 7,87:1 tot sol. --apagat segueix fent falta, i més que abans: el #808080 que demana el Figma dona 3,95:1 sobre blanc i només 2,83:1 sobre el gris nou del fons, quan el mínim per a text és 4,5:1. El #5b5b61 en dona 6,74 i 4,82. */ --apagat:#5b5b61; } /* LA CASELLA BUIDA, PITJOR QUE ABANS. Del 16/09 és `#DADADA` i el fons de la pantalla acaba en aquest mateix gris: a la part baixa del tauler la casella buida i el fons són EL MATEIX COLOR, 1,00:1. Amb el blau eren 1,66:1. Cap gris clar no ho arregla: contra un fons gris clar, el més fosc que es pot provar sense sortir de la gamma es queda a 1,7:1. La sortida, ara sí, és la que ja deia aquesta nota: vora o trama, que no toquen el color. Queda a la llista d'obertes, i ara és el forat més gros que hi ha. */ /* El text fosc a la casella ara el posa estils.css per a TOTES les caselles, que és el que demana el Figma del 16/09, o sigui que aquí no cal repetir-ho. */ /* Punts del carrusel i estrelles buides: són controls i indicadors, i a 1,6:1 sobre blanc pràcticament no s'hi veuen. */ .punts button{background:#757575} /* 3,30:1 sobre el gris nou; el #8a8a93 d'abans hi queia a 2,45 */ /* LES ESTRELLES BUIDES ESTAN EN CONFLICTE OBERT, no tocar sense parlar-ho. Aquest #7f88b5 és una correcció nostra de contrast, i és el que la Berta veu quan diu «massa fosques les estrelles quan no estan plenes» (15/09). Ella demana el #CBD0E6 del Figma, que sobre el gris nou dona 1,10:1 quan l'1.4.11 en demana 3. Es queda la correcció fins que ella decideixi, perquè desfer-la ens treu d'AA; la sortida probable és la mateixa que la casella buida: vora en comptes de color. */ .estrelles i{background:#7f88b5} /* 2,47:1 sobre el gris nou */ /* El distintiu «pendent» i la lletra petita del menú anaven al 75% d'opacitat sobre vermell: 4,02:1 a cos 9,5. */ .menu-obert a[data-pendent]::after{opacity:1;font-size:10.5px} .menu-obert a small{color:#fff} /* El botó Resol està desactivat fins que la fila és plena, o sigui que el 35% d'opacitat és l'estat NORMAL del botó durant mitja partida. */ .pastilla:disabled{opacity:.6} /* ---------- Les icones als estats, TRETES el 14/09 ---------- Hi havia una marca petita a cada casella (●, ◐, ✕) perquè els tres estats no es distingissin només pel color, que és el criteri 1.4.1 de WCAG, nivell A. Direcció les va fer treure el 14/09: embrutaven el tauler. O sigui que ara els tres estats es distingeixen NOMÉS PEL COLOR. Qui no els distingeix té la llegenda a sobre del tauler i, amb lector de pantalla, cada intent s'anuncia amb l'estat dit en paraules, que això no s'ha tocat. Però l'1.4.1 no queda cobert per a qui hi veu i no distingeix el vermell del gris. Torna a la llista d'obertes: si s'ha de complir sense marques dins de la casella, la sortida és la forma (una vora, un cantó) o una trama. */ /* ---------- Zoom i mida de text (WCAG 1.4.4) · SEMPRE, 21/09 ---------- Quan l'usuari amplia la pàgina i el marc ja no hi cap d'alt (`ZOOM_MIN` a main.js), la pàgina fa scroll en vertical. En la resta de casos no hi ha `.desborda` i tot queda com estava, amb el `clip` del body. El `clip` del body no es treu a les palpentes. Hi és perquè `transform:scale()` encongeix el dibuix però no la caixa: el marc ocupa 800 px d'alt i 360 d'ample encara que es vegi més petit, i el navegador podia desplaçar aquella diferència invisible tot sol (la creu del menú se n'anava fora, 16/09). Per això aquí els marges negatius retallen la caixa fins a la mida que es veu: l'scroll que queda és el de debò, el que tapa el contingut, i no n'hi ha cap de latent. */ html.desborda body{overflow-x:clip;overflow-y:visible} html.desborda .app{ align-self:center; margin-bottom:calc(800px * (var(--zoom,1) - 1)); margin-left:calc(180px * (var(--zoom,1) - 1)); margin-right:calc(180px * (var(--zoom,1) - 1)); } /* ============================================================ PART 2 · AMB INTERRUPTOR Dos aparells de demostració, per ensenyar l'abans i el després en una revisió. No són al menú del joc: hi eren i en van sortir el 14/09, quan direcció va demanar treure el «mode accessibilitat». Es queden al panell del visor, que és on es fan les revisions. ============================================================ */ /* ---------- Text més gran (WCAG 1.4.4) ---------- El marc és de 360 x 800 clavats i tot va en píxels: apujar la mida de lletra del navegador no fa absolutament res. Això no ho arregla del tot (vegeu l'informe), però ensenya què passa amb un 20% més de cos. */ :root[data-a11y-text="si"]{--fa:1.2} :root[data-a11y-text="si"] body{overflow:auto} /* xarxa de seguretat si sobreïx */ :root[data-a11y-text="si"] .casella{font-size:calc(20px * var(--fa))} :root[data-a11y-text="si"] .comptador{font-size:calc(13px * var(--fa))} :root[data-a11y-text="si"] .avis{font-size:calc(14px * var(--fa))} :root[data-a11y-text="si"] .bafa p{font-size:calc(20px * var(--fa));line-height:1.25} :root[data-a11y-text="si"] .bafa .transicio{font-size:calc(14px * var(--fa))} :root[data-a11y-text="si"] .bafa .ratxa{font-size:calc(14px * var(--fa))} :root[data-a11y-text="si"] .bloc-intro h1{font-size:calc(24px * var(--fa))} :root[data-a11y-text="si"] .bloc-intro p{font-size:calc(18px * var(--fa))} :root[data-a11y-text="si"] .bloc-punts h1{font-size:calc(32px * var(--fa))} :root[data-a11y-text="si"] .punts-total{font-size:calc(24px * var(--fa))} :root[data-a11y-text="si"] .menu-obert a{font-size:calc(18px * var(--fa))} :root[data-a11y-text="si"] .pantalla.onb .llegenda{font-size:calc(13px * var(--fa))} /* Les bafarades tenen alçada fixa perquè el SVG del fons hi va encaixat. Com que el fons s'estira al 100%, deixar-les créixer no les trenca: les tallava el text, no el dibuix. */ :root[data-a11y-text="si"] .bafa{height:auto!important;min-height:126px} :root[data-a11y-text="si"] .bafa.b3{min-height:198px} /* La b4 sí que s'ha d'arrapar al contingut: amb el mínim de 126 px acabava a y544 i s'hi menjava la llegenda de sota. Amb dues línies en fa 88. */ :root[data-a11y-text="si"] .bafa.b4{min-height:0} /* Els botons van a amplades fixes del Figma i amb el cos apujat sobreeixien. Es treu la caixa alta: sense VERSALETES i amb menys interlletratge, el mateix text ocupa menys i a més es llegeix millor. Text en caixa alta i molt espaiat és de les coses que més costen a qui té dislèxia o baixa visió. */ :root[data-a11y-text="si"] .pastilla{ font-size:15.5px;letter-spacing:.01em;text-transform:none; line-height:1.15;padding:10px 14px;min-height:52px; } /* La tercera instrucció és la pantalla més plena de totes: dues bafarades, la llegenda de quatre estats i el botó. Amb el text un 20% més gran no hi cabia, i entre la primera bafarada (que acaba a y330) i la segona hi havia 88 px buits. La segona puja i la llegenda baixa: així queden 25 px lliures abans del botó «Ves al joc», que comença a y657. */ :root[data-a11y-text="si"] .bafa.b4{top:396px} :root[data-a11y-text="si"] .pantalla.onb .llegenda{top:520px;gap:6px} :root[data-a11y-text="si"] .pantalla.onb .mostra{width:21px;height:21px;font-size:12px} /* ---------- Camp d'escriptura visible ---------- Ara mateix s'escriu en un `input` d'1 x 1 px amb opacitat 0, i el que escrius només surt al tauler. Qui fa servir un lector de pantalla no rep res del que ha escrit, i qui va amb teclat no veu on té el focus. El camp visible és el patró estàndard: la caixa de text mana, i el tauler és la representació visual del que hi ha a dins. */ :root[data-a11y-camp="si"] .camp-ocult{ opacity:1;pointer-events:auto; left:16px;right:16px;top:604px;width:auto;height:44px;padding:0 12px; font:500 18px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:.14em;color:var(--tinta); border:1.5px solid var(--marc);border-radius:8px;background:#fff; } :root[data-a11y-camp="si"] .etiqueta-camp{ position:absolute;left:16px;top:586px;font-size:12.5px;color:var(--apagat); } /* Mentre hi ha una capa oberta el camp i la seva etiqueta desapareixen, igual que ja hi desapareixen l'avís i el botó Resol. */ :root[data-a11y-camp="si"] .pantalla.joc.amb-capa .camp-ocult, :root[data-a11y-camp="si"] .pantalla.joc.amb-capa .etiqueta-camp{display:none} .etiqueta-camp{display:none} :root[data-a11y-camp="si"] .etiqueta-camp{display:block} /* Les bafarades amb en Claudi a sobre. AQUÍ ÉS ON EL TEXT GRAN XOCA AMB EL DISSENY, i val la pena mirar-s'ho perquè és el resum de tot l'informe. Al Figma la bafarada és una caixa d'alçada fixa amb el robot dibuixat a sobre, tapant-ne el cantó de baix: bonic, i funciona mentre el text hi càpiga. Amb un 20% més de cos, el text arriba fins on hi ha el robot i queda tapat. Aquí es baixa el robot i es puja la caixa, però són números apedaçats: la solució de debò és que la bafarada sigui un contenidor que creix i que el robot es col·loqui RESPECTE D'ELLA, no contra el marc. */ :root[data-a11y-text="si"] .bafa.b5{min-height:150.5px} :root[data-a11y-text="si"] #learning .claudi-cap{top:400px} :root[data-a11y-text="si"] #pista .claudi-cap{top:400px} :root[data-a11y-text="si"] #desenllac.guanyada .claudi-cap{top:349px} :root[data-a11y-text="si"] #desenllac.perduda .bafa{top:165px} :root[data-a11y-text="si"] #desenllac.perduda .claudi-cap{top:362px}