Auditar mi web gratis

El método

Cómo se realiza la auditoría

Publicado entero, incluida la lista de comprobaciones. Si quieres ejecutarlo tú, puedes. Lo que se compra es que lo ejecute alguien que lo ha hecho antes y sepa qué mirar cuando algo no encaja.

37

comprobaciones

19

requieren una persona

4

principios WCAG

WCAG 2.2 nivel AA

Estructura

Cómo se organiza

La auditoría se estructura según los cuatro principios de las WCAG, no según una lista inventada por Uxerfy. El entregable tiene que encajar con la norma sobre la que te preguntará tu asesoría jurídica, un pliego de contratación o un auditor externo.

  1. 01

    Perceptible

    Si la información llega a quien no puede verla, la ve mal o no distingue los colores con los que está dibujada. Lo que solo existe como imagen, como color o con un contraste demasiado débil es contenido que parte de tus clientes no tiene.

    • ¿Cada imagen, icono y control lleva un texto alternativo que dice lo que significa, no lo que parece?
    • ¿La página sigue teniendo sentido en una columna a 320 px y con el texto al 200 %?
    • ¿Hay información que dependa solo del color o esté por debajo de 4,5:1?
  2. 02

    Operable

    Si la página se puede usar sin ratón. El acceso por teclado es el principio que más rompen las librerías de componentes modernas, y el que peor detectan las herramientas automáticas: un desplegable que atrapa el foco pasa todos los escáneres y falla con todos los usuarios de teclado.

    • ¿Se puede completar cada acción de la página solo con teclado, en un orden lógico?
    • ¿El elemento con foco está siempre visible, sin quedar tapado por una cabecera fija o un banner de cookies?
    • ¿Se puede llegar al contenido principal sin tabular por toda la navegación?
  3. 03

    Comprensible

    Si la página se comporta de forma predecible y explica cómo recuperarse. Casi todo el coste está en los formularios: un error que solo se anuncia en rojo, una etiqueta que desaparece al escribir, una sesión que caduca sin aviso en mitad del pago.

    • Cuando un formulario se envía mal, ¿el error se anuncia a la tecnología de apoyo y dice cómo corregirlo?
    • ¿Cada campo tiene una etiqueta asociada en el código, no solo colocada cerca?
    • ¿Algo cambia la página de forma inesperada al recibir foco o datos?
  4. 04

    Robusto

    Si la tecnología de apoyo puede saber qué es cada control, en qué estado está y cuándo ha cambiado algo. Aquí fallan los componentes a medida: un div con aspecto de botón es un botón para todos menos para quien no puede verlo.

    • ¿Cada control expone un nombre, un rol y su estado actual?
    • Cuando el contenido cambia sin recargar la página, ¿se anuncia el cambio?
    • ¿El ARIA de la página describe lo que hay de verdad, o lo que alguien esperaba que hubiera?

Evidencia

Automático y manual

18/37

Automático

Detectado por herramientas a partir del código de la página. Reproducible, rápido y ciego a todo lo que depende de la interacción, del orden o de lo que un lector de pantalla anuncia de verdad.

19/37

Manual

Encontrado por una persona que usa la página con teclado y lector de pantalla. Más lento, no reproducible con un script, y la única forma de encontrar la mayoría de barreras graves.

Lista

La lista completa

Cada comprobación indica la pregunta, qué cuesta cuando falla, cómo probarlo y el criterio de éxito al que corresponde.

Las comprobaciones se publican en inglés, el idioma de trabajo de la norma.

01

Perceptible

The cheapest findings in an audit live here, and so do some of the most expensive. Alternative text is a fifteen-minute fix; a design system whose entire palette sits at 3.9:1 is a quarter of work.

El fallo más comúnThe commonest failure is alternative text that describes the file rather than the function — "icon-arrow-right.svg", or a product photo whose alt is the SKU. The attribute is present, the scanner passes, and the information is still missing.

  1. 01.01 Does every meaningful image carry alternative text that conveys what it means in context? En parte
    Por qué importa
    The same photograph needs different alternative text on a product page and in a blog post. An empty alt on a meaningful image removes it entirely for a screen reader user; a filename as alt is read out character by character.
    Cómo se prueba
    Turn off images in the browser. Read the page. Anything you no longer understand is an alt text problem.
    Criterio
    1.1.1 Non-text Content · Nivel A
  2. 01.02 Are decorative images hidden from assistive technology rather than described? En parte
    Por qué importa
    A decorative flourish announced as "image" interrupts the reading of the sentence it was meant to decorate.
    Cómo se prueba
    Check that purely decorative images have alt="" and that CSS background images carry no information.
    Criterio
    1.1.1 Non-text Content · Nivel A
  3. 01.03 Does the heading structure describe the page, with no skipped levels? Sí
    Por qué importa
    Screen reader users navigate by heading before they read. A page with one h1 and then h4s is a page they have to read linearly, which most will not do.
    Cómo se prueba
    List the headings in order. Read only that list. Does it read as an outline of the page?
    Criterio
    1.3.1 Info and Relationships · Nivel A
  4. 01.04 Are lists, tables and groups marked up as what they are? En parte
    Por qué importa
    A table of prices built from divs is a wall of unrelated numbers when the row and column headers are not associated.
    Cómo se prueba
    Inspect the markup. A visual table needs th, scope and a caption; a visual list needs ul or ol.
    Criterio
    1.3.1 Info and Relationships · Nivel A
  5. 01.05 Do form fields declare their purpose so a browser can fill them in? Sí
    Por qué importa
    Autocomplete is an accessibility feature before it is a convenience: it removes the typing burden for people with motor or cognitive disabilities.
    Cómo se prueba
    Check name, email, address and payment fields for the correct autocomplete token.
    Criterio
    1.3.5 Identify Input Purpose · Nivel AA
  6. 01.06 Is any information conveyed by colour alone? No — requiere una persona
    Por qué importa
    A required field marked only in red, a chart whose series are only distinguishable by hue, a link that differs from body text only in colour — none of these reach someone who cannot distinguish the colours.
    Cómo se prueba
    View the page in greyscale. Anything you can no longer tell apart is a failure.
    Criterio
    1.4.1 Use of Color · Nivel A
  7. 01.07 Does text meet 4.5:1, and large text 3:1, against its actual background? En parte
    Por qué importa
    This is the single most common failure on the web, and the one most often introduced by a brand palette signed off without anyone measuring it.
    Cómo se prueba
    Measure the computed colours, not the design file. Include text over images, over gradients, and in hover and disabled states.
    Criterio
    1.4.3 Contrast (Minimum) · Nivel AA
  8. 01.08 Does the page reflow to one column at 320px without horizontal scrolling? No — requiere una persona
    Por qué importa
    This is the criterion that covers someone zoomed to 400% on a desktop, not just someone on a phone. A fixed-width table or a sticky sidebar breaks it.
    Cómo se prueba
    Set the browser to 1280px wide and zoom to 400%. Scroll in both directions.
    Criterio
    1.4.10 Reflow · Nivel AA
  9. 01.09 Do interface controls and meaningful graphics meet 3:1 against their surroundings? En parte
    Por qué importa
    An input border at 1.5:1 is invisible to a lot of people. The field is there; the fact that it is a field is not.
    Cómo se prueba
    Measure input borders, toggle states, icon-only buttons, focus indicators and chart elements.
    Criterio
    1.4.11 Non-text Contrast · Nivel AA
  10. 01.10 Does the layout survive increased text spacing? No — requiere una persona
    Por qué importa
    People with dyslexia often apply a spacing stylesheet. If the page clips or overlaps, the content is lost.
    Cómo se prueba
    Apply line-height 1.5, paragraph spacing 2em, letter spacing 0.12em, word spacing 0.16em. Nothing may be cut off.
    Criterio
    1.4.12 Text Spacing · Nivel AA
  11. 01.11 Can content that appears on hover or focus be dismissed and hovered over? No — requiere una persona
    Por qué importa
    A tooltip that vanishes when you move towards it is unreadable to anyone using magnification.
    Cómo se prueba
    Hover a tooltip, then move the pointer onto it. Press Escape. Both must work.
    Criterio
    1.4.13 Content on Hover or Focus · Nivel AA
02

Operable

This is the half of the audit that no scanner performs, and the half where the findings that end in complaints are found. Everything here is discovered by a person with their hands on a keyboard.

El fallo más comúnThe commonest failure is a custom component — a dropdown, a modal, a carousel — that works perfectly with a mouse and is unreachable, or inescapable, with a keyboard. It ships because it was only ever tested with a mouse.

  1. 02.01 Can every action be completed using the keyboard alone? No — requiere una persona
    Por qué importa
    If a control cannot be reached or activated by keyboard, it does not exist for people who cannot use a pointer — and for many screen reader users, who operate by keyboard regardless of sight.
    Cómo se prueba
    Unplug the mouse. Complete the primary task. Tab, Shift+Tab, Enter, Space, arrows, Escape.
    Criterio
    2.1.1 Keyboard · Nivel A
  2. 02.02 Can focus always be moved away from a component? No — requiere una persona
    Por qué importa
    A focus trap ends the session. Not the task — the session. The only way out is to close the tab.
    Cómo se prueba
    Tab into every widget, especially modals, date pickers and embedded media, and tab back out.
    Criterio
    2.1.2 No Keyboard Trap · Nivel A
  3. 02.03 Is there a way to skip repeated blocks of content? En parte
    Por qué importa
    Without a skip link or proper landmarks, every page begins with the same forty tabs through the navigation.
    Cómo se prueba
    Load the page and press Tab once. A skip link should appear and work.
    Criterio
    2.4.1 Bypass Blocks · Nivel A
  4. 02.04 Does every page have a title that describes it? Sí
    Por qué importa
    The title is the first thing announced and the only thing distinguishing twelve open tabs.
    Cómo se prueba
    Read the titles across the site. Are they unique, and do they lead with the page rather than the brand?
    Criterio
    2.4.2 Page Titled · Nivel A
  5. 02.05 Does focus move in an order that matches the visual layout and preserves meaning? No — requiere una persona
    Por qué importa
    CSS can reorder content visually without reordering it in the DOM. The result is a tab sequence that jumps around the page.
    Cómo se prueba
    Tab through and watch the focus indicator. Does it move where you expect?
    Criterio
    2.4.3 Focus Order · Nivel A
  6. 02.06 Does every link say where it goes? Sí
    Por qué importa
    Screen reader users list links out of context. A page of "read more" is a page of identical links.
    Cómo se prueba
    Extract every link text into a list. Can you tell them apart?
    Criterio
    2.4.4 Link Purpose (In Context) · Nivel A
  7. 02.07 Is the focused element always visible? En parte
    Por qué importa
    A focus ring removed in CSS, or one drawn in a colour that disappears against a dark section, leaves keyboard users with no idea where they are.
    Cómo se prueba
    Tab the whole page and never lose sight of the indicator.
    Criterio
    2.4.7 Focus Visible · Nivel AA
  8. 02.08 Is the focused element ever hidden behind sticky content? No — requiere una persona
    Por qué importa
    New in WCAG 2.2, and extremely common: a sticky header or a cookie banner covers the element that just received focus.
    Cómo se prueba
    Tab down a long page with a sticky header. Watch for focus disappearing under it.
    Criterio
    2.4.11 Focus Not Obscured (Minimum) · Nivel AA
  9. 02.09 Does the accessible name of a control include its visible label? En parte
    Por qué importa
    Voice control users say what they see. If the button reads "Send" but its accessible name is "Submit form", saying "click Send" does nothing.
    Cómo se prueba
    Compare each control's visible text with its accessible name in the accessibility tree.
    Criterio
    2.5.3 Label in Name · Nivel A
  10. 02.10 Is there a single-pointer alternative to every drag action? No — requiere una persona
    Por qué importa
    New in WCAG 2.2. Reordering, sliders and drag-to-upload exclude anyone who cannot hold and drag precisely.
    Cómo se prueba
    For every drag interaction, find the click-only equivalent.
    Criterio
    2.5.7 Dragging Movements · Nivel AA
  11. 02.11 Are targets at least 24 by 24 CSS pixels, or adequately spaced? En parte
    Por qué importa
    New in WCAG 2.2. Icon-only buttons, close buttons and dense table actions are the usual failures.
    Cómo se prueba
    Measure the smallest interactive targets, especially on mobile layouts.
    Criterio
    2.5.8 Target Size (Minimum) · Nivel AA
  12. 02.12 Can moving, auto-updating or auto-playing content be paused? No — requiere una persona
    Por qué importa
    A carousel that advances on a timer is unusable for anyone who reads slowly, and a distraction for people with attention or vestibular conditions.
    Cómo se prueba
    Find every carousel, ticker and auto-playing video. Find the pause control.
    Criterio
    2.2.2 Pause, Stop, Hide · Nivel A
03

Comprensible

Forms are where this principle is won or lost, and forms are where the money is. A checkout that announces its errors properly converts better for everyone, not only for the people who need it to.

El fallo más comúnThe commonest failure is an error message that appears visually, in red, next to the field — and is never announced, never associated with the input, and never focused. The page looks like it is telling you; it is telling only some people.

  1. 03.01 Does the page declare its language? Sí
    Por qué importa
    Without it, a screen reader reads English with a Spanish voice, or the reverse. The content becomes unintelligible rather than merely accented.
    Cómo se prueba
    Check the lang attribute on html, and on any passage in another language.
    Criterio
    3.1.1 Language of Page · Nivel A
  2. 03.02 Does anything change the context when an element receives focus or input? No — requiere una persona
    Por qué importa
    A select that navigates on change, or a field that submits the form when it is filled, moves the page out from under someone who was only passing through.
    Cómo se prueba
    Tab through every control without activating it. Nothing should navigate, submit or open.
    Criterio
    3.2.1 On Focus / 3.2.2 On Input · Nivel A
  3. 03.03 Are navigation and repeated components consistent across pages? No — requiere una persona
    Por qué importa
    Someone who has learned where the search is should not have to learn again on the next page.
    Cómo se prueba
    Compare the order of navigation items and the naming of repeated controls across templates.
    Criterio
    3.2.3 Consistent Navigation / 3.2.4 Consistent Identification · Nivel AA
  4. 03.04 Is help available in the same place on every page that offers it? No — requiere una persona
    Por qué importa
    New in WCAG 2.2. A support link that moves between header, footer and a floating widget is a support link that cannot be relied on.
    Cómo se prueba
    Check that contact and help mechanisms appear in a consistent order across the site.
    Criterio
    3.2.6 Consistent Help · Nivel A
  5. 03.05 Does every field have a programmatically associated label? Sí
    Por qué importa
    A placeholder is not a label: it disappears on typing, usually fails contrast, and is not reliably announced.
    Cómo se prueba
    Check each input for a label element with a matching for, or an aria-label that says the same thing.
    Criterio
    3.3.2 Labels or Instructions · Nivel A
  6. 03.06 Are errors identified in text, associated with their field, and announced? No — requiere una persona
    Por qué importa
    Colour alone does not identify an error. Neither does a message that appears in the DOM without a live region or focus management.
    Cómo se prueba
    Submit the form wrong with a screen reader running. Was the error announced? Could you find the field it refers to?
    Criterio
    3.3.1 Error Identification · Nivel A
  7. 03.07 Does each error say how to fix it? No — requiere una persona
    Por qué importa
    "Invalid input" states a condition. The user needs the remedy — the expected format, the allowed range, the reason it was rejected.
    Cómo se prueba
    Submit every field wrong on purpose and read what comes back.
    Criterio
    3.3.3 Error Suggestion · Nivel AA
  8. 03.08 Can a transaction be reviewed, corrected or reversed before it commits? No — requiere una persona
    Por qué importa
    For anything financial, legal or data-destructive, a mistake made by someone using assistive technology must be as recoverable as anyone else's.
    Cómo se prueba
    Walk the checkout. Is there a review step, a confirmation, or an undo?
    Criterio
    3.3.4 Error Prevention (Legal, Financial, Data) · Nivel AA
  9. 03.09 Is information the user already entered ever asked for twice? No — requiere una persona
    Por qué importa
    New in WCAG 2.2. Re-typing an address in a multi-step checkout is a real barrier for people with motor and cognitive disabilities.
    Cómo se prueba
    Complete a multi-step flow. Note anything you are asked for a second time without it being pre-filled or selectable.
    Criterio
    3.3.7 Redundant Entry · Nivel A
  10. 03.10 Does authentication require a cognitive function test with no alternative? No — requiere una persona
    Por qué importa
    New in WCAG 2.2. Puzzles, transcription CAPTCHAs and "type the third character of your password" exclude people with cognitive disabilities. Pasting a password must not be blocked.
    Cómo se prueba
    Attempt to sign in using a password manager, with paste. Look for an alternative to any puzzle.
    Criterio
    3.3.8 Accessible Authentication (Minimum) · Nivel AA
04

Robusto

Short list, high stakes. Almost everything here concerns custom components, and almost every failure is introduced by a framework or a component library rather than written deliberately.

El fallo más comúnThe commonest failure is ARIA applied as a decoration — aria-label on a div that is not focusable, role="button" without a keydown handler, aria-expanded that never changes. Incorrect ARIA is worse than none, because it makes a confident claim that turns out to be false.

  1. 04.01 Does every control expose a name, a role and its state? En parte
    Por qué importa
    A div styled as a button is announced as nothing. A toggle with no aria-pressed is announced without saying whether it is on.
    Cómo se prueba
    Open the accessibility tree and read every interactive element. Does each have a sensible name and role?
    Criterio
    4.1.2 Name, Role, Value · Nivel A
  2. 04.02 Are icon-only buttons named? Sí
    Por qué importa
    A close button with only an SVG inside is announced as "button", which tells someone nothing about what closes.
    Cómo se prueba
    List every control containing no text. Check each for an accessible name.
    Criterio
    4.1.2 Name, Role, Value · Nivel A
  3. 04.03 Are changes that happen without a page load announced? No — requiere una persona
    Por qué importa
    A cart total that updates, a search result count, a "saved" confirmation — all silent without a live region, so the user does not know their action worked.
    Cómo se prueba
    With a screen reader running, trigger every asynchronous update. Was anything said?
    Criterio
    4.1.3 Status Messages · Nivel AA
  4. 04.04 Does the ARIA describe what is actually on the page? En parte
    Por qué importa
    ARIA overrides native semantics. An incorrect role silently replaces a correct one, and the element becomes less accessible than the plain HTML it started as.
    Cómo se prueba
    Check every role, aria-expanded, aria-selected and aria-controls against the behaviour they claim, in every state.
    Criterio
    4.1.2 Name, Role, Value · Nivel A

Severidad

Cómo se ordenan los hallazgos

La severidad responde a qué le cuesta al que se topa con la barrera, nunca a lo difícil que es arreglarlo. Mezclar las dos cosas es como un cambio de CSS de una línea acaba por encima de un checkout que no se puede completar con teclado.

Crítico −12

Quien usa tecnología de apoyo no puede completar la tarea. Un checkout inalcanzable con teclado, un formulario cuyos errores nunca se anuncian, un diálogo que atrapa el foco. Es la categoría que acaba en una reclamación.

Grave −7

La tarea se puede completar, pero con dificultad, a ciegas o con suerte. Un campo sin etiqueta que se deduce por su posición, un foco que desaparece sobre un fondo, unos encabezados que impiden orientarse.

Moderado −3

Una barrera real para algunas personas en algunas condiciones. Un contraste que pasa en escritorio y falla en el móvil a pleno sol, un enlace que necesita la frase de alrededor, un objetivo de menos de 24 px.

Leve −1

Conviene arreglarlo con el archivo abierto. Texto alternativo redundante, una imagen decorativa sin ocultar, un atributo de idioma que falta en una cita.

Puntuación

La puntuación

Cada principio parte de 25 puntos y resta por cada comprobación que falla, según su severidad. La suma es la puntuación. Se publica la aritmética porque una cifra que el cliente no puede reproducir es una cifra que se le pide aceptar por fe, que es lo contrario de una auditoría.

Una comprobación que falla en muchos elementos es un hallazgo, no muchos. A partir de 10 instancias sube un nivel de severidad, pero nunca multiplica la deducción: una puntuación que se desploma con un fallo repetido deja de describir la página.

Esta puntuación es un indicador de evaluación interno de Uxerfy, basado en las comprobaciones incluidas en esta revisión. No es una certificación ni una declaración de conformidad con las WCAG.

Qué no mide

  • Conformidad. Es un indicador interno de Uxerfy basado en las comprobaciones de esta revisión, no una declaración de conformidad WCAG ni una certificación legal.

  • Todo lo que cubren las WCAG. Solo alrededor de un tercio de los criterios de WCAG 2.2 puede decidirse automáticamente; el resto necesita a una persona, y algunos, pruebas con usuarios con discapacidad.

  • Si las personas con discapacidad consiguen usar tu web. Eso requiere pruebas de usabilidad con esos usuarios, que son un encargo distinto de una auditoría.

  • La calidad del contenido: subtítulos que existen pero son erróneos, textos alternativos presentes pero inexactos, transcripciones automáticas sin revisar.

  • Nada que esté detrás de un login, un muro de pago o un bloqueo regional sin acceso facilitado a Uxerfy.

  • Aplicaciones móviles nativas, PDF y documentos, salvo que se incluyan expresamente en el alcance.

Empezar

El método es público. La diferencia es quién lo ejecuta sobre tu web y qué encuentra.

Auditar mi web gratis Ver un informe de ejemplo

Sergio Gualda · Barcelona, Spain