Accesibilidad como gate de release.

Norma y guía

El criterio normativo es WCAG 2.2 AA. Para patrones interactivos se usa la WAI-ARIA Authoring Practices Guide como guía de implementación; APG no reemplaza la norma ni la evaluación humana.

Criterios trazables

Mínimo v10

• WCAG 2.2 AA como baseline.
• Foco visible y orden lógico.
• Objetivos de 44 por 44 px como meta de diseño y mínimo WCAG 2.2 verificado.
• Contraste de texto y controles medido en tema claro y oscuro.
• prefers-reduced-motion y forced-colors respetados.
• Contenido usable con zoom, reflow y texto largo.
• Estados comunicados sin depender sólo del color.
• Fallback de tabla o texto para visualizaciones.

Salto al contenido y barra fija

SiteHeader y SiteChromeHeader entregan el enlace antes de la navegación. El main debe llevar id=contenido-principal, o el adaptador recibe su id mediante skipTargetId. Si la página entrega un salto propio, usa skipTargetId={false} para conservar un solo enlace desde el HTML inicial.

chrome.js conserva el salto propio, incluso si aparece después del main, y enfoca su destino al activarlo. Mide la altura real de la barra con ResizeObserver y ajusta scroll-padding-top con 8 px adicionales. El foco usa un anillo sólido y se mantiene visible durante el recorrido de teclado.

Contraste de texto, bordes y foco

La tabla por data-brand y tema mide texto, bordes, icono de cierre y foco sobre paper, paper-raised, paper-sunken y accent-soft. Texto normal requiere 4,5:1; bordes que identifican controles e indicadores de foco requieren 3:1. El verificador recalcula los valores sin redondear, rechaza pares ausentes o repetidos y coteja los colores con la evidencia DOM de la misma corrida.

ink-soft queda reservado para decoración. Separador y aviso del acceso utilizan ink-muted, igual que el icono de cierre. line identifica divisores decorativos; los bordes que permiten reconocer un campo utilizan line-control. La tabla y el verificador se conservan en tokens/v10/CONTRASTE.md y tokens/v10/verificar.py de la fuente del kit.

Tema inicial y decisión pendiente

El kit inicia en claro y ofrece un selector. theme-preference.js recupera sólo una elección light o dark válida en cis-style:theme; chrome.js guarda la nueva elección. No consulta prefers-color-scheme. Con almacenamiento inaccesible, la elección funciona durante la página y el inicio vuelve a claro.

La tabla de BW-11 verifica ambos temas. Seguir automáticamente el tema del sistema sigue siendo una decisión pendiente (SG-04, CX-122); completar el contraste no cambia la política de inicio.

Acento de la Compañía Chilena de Inteligencia de Datos

d

a

t

a

-

b

r

a

n

d

=

c

o

c

h

i

d

c

o

n

s

e

r

v

a

#

1

d

4

e

d

8

.

L

a

a

p

r

o

b

a

c

i

ó

n

g

e

n

e

r

a

l

d

e

l

2

0

2

6

-

1

0

-

0

5

c

u

e

n

t

a

c

o

m

o

c

o

n

f

i

r

m

a

c

i

ó

n

e

s

c

r

i

t

a

f

r

e

n

t

e

a

H

2

8

(

D

-

1

0

)

,

s

i

n

a

t

r

i

b

u

i

r

u

n

a

f

r

a

s

e

e

s

p

e

c

í

f

i

c

a

s

o

b

r

e

e

l

c

o

l

o

r

a

M

a

r

t

í

n

.

C

o

i

n

c

i

d

e

c

o

n

b

l

u

e

-

7

0

0

d

e

T

a

i

l

w

i

n

d

v

3

;

T

a

i

l

w

i

n

d

v

4

.

3

.

3

d

e

c

l

a

r

a

o

k

l

c

h

(

4

8

.

8

%

0

.

2

4

3

2

6

4

.

3

7

6

)

.

L

a

c

o

n

f

i

r

m

a

c

i

ó

n

y

l

a

s

f

u

e

n

t

e

s

p

r

i

m

a

r

i

a

s

e

s

t

á

n

e

n

t

o

k

e

n

s

/

v

1

0

/

R

E

A

D

M

E

.

m

d

d

e

l

a

f

u

e

n

t

e

d

e

l

k

i

t

.

Pruebas

Decisiones

Usa el identificador para confirmar, modificar o rechazar una regla.