Saltar Navegación

Manual de Lineamientos de Contenido e Imagen de sitios web de la Universidad de Costa Rica

Antecedentes

La Oficina de Comunicación Institucional (OCI) es la entidad encargada de administrar el sitio web oficial de la Universidad de Costa Rica. En 1998, la Rectoría le encomendó a la OCI (antigua ODI la responsabilidad de diseñar un portal web. Anteriormente, el Centro de Informática había creado una página electrónica en la cual se encontraba un listado de los sitios universitarios, así como los enlaces de algunos servicios. 
En el 2000, la ODI publicó un nuevo sitio electrónico para la UCR. Esto fue posible gracias al trabajo de una comisión institucional coordinada por la ODI e integrada por funcionarios de las vicerrectorías, la Rectoría, la Oficina de Planificación y el Centro de Informática.
El sitio web oficial de la Universidad de Costa Rica es el principal medio electrónico de comunicación para difundir el quehacer universitario en los campos de docencia, investigación, acción social y administración. Igualmente, a través de esta página, se brinda información  actualizada sobre los eventos que se realizarán en la Institución. 

Lineamientos de contenido

Los sitios web deben contar con una persona (docente o administrativa) encargada. La persona responsable de la aplicación debe darle seguimiento al mantenimiento y la actualización regularmente. 

Las páginas web de la Universidad de Costa Rica deben ser cuidadosas con la escritura de sus textos, estos deben respetar la ortografía y presentar un lenguaje apropiado que refleje el nivel de educación superior. 

  • Además, para cumplir con las políticas institucionales de información y comunicación, como hacer uso del lenguaje inclusivo de género.
  • Se aconseja incluir una versión en inglés de cada sitio o ofrecer una opción que traduzca automáticamente el contenido. 
  • Cada sitio web debe tener un medio para contactar a la administración del sitio. Puede ser un formulario de contacto o las direcciones de correo electrónico de los encargados.
  • Cada página web debe señalar los medios disponibles para contactar a la unidad que representa: dirección de correo electrónico, teléfono o dirección física.
  • Las unidades que posean instalaciones físicas deben adjuntar en su sitio web una imagen de la edificación o del lugar del campus universitario en el cual se encuentran. 
  • Es imprescindible que toda web despliegue el nombre completo de la Universidad de Costa Rica. Para esto, se utiliza alguna de las firma oficiales de la UCR, la cual, al mismo tiempo, funciona como enlace al sitio principal de la Institución: https://www.ucr.ac.cr/

Se puede utilizar cualquiera de las firmas oficiales de la UCR mencionadas en la sección “Línea gráfica” . Dichas firmas se encuentran disponibles en el archivo digital que la OCI facilita por medio de su sitio oci.ucr.ac.cr 

  • El título en la barra del navegador de cada página debe describir el contenido del sitio; por ejemplo, el nombre completo de la unidad a la que corresponde. 
  • Todo sitio debe presentar el texto de derechos reservados de la Universidad de Costa Rica y el año en curso. 
  • La web debe mostrar la última fecha de actualización, sobre todo si su contenido no se actualiza con frecuencia.
  • Cuando un sitio contiene un espacio de noticias, agenda o programación se debe actualizar con regularidad (en general, diaria o semanalmente), según el período que se propuso desde el principio. De no ser así, es mejor prescindir de ese espacio y activarlo, nuevamente, cuando exista información pertinente y el modo de mantenerla al día.
  • Los sitios de unidades académicas deben tener los planes de estudios de las carreras que imparten y los títulos que otorgan. 
  • Cuando se está diseñando el sitio, es importante asumir el punto de vista del usuario meta. Se debe suministrar información relevante y aprovechar las características únicas de internet, por ejemplo: la posibilidad de acceder remotamente a la información. De este modo, se le evita al usuario el tener que trasladarse, físicamente, a la Universidad para evacuar posibles dudar y realizar consultas o tareas. 

Los datos relacionados con la historia de una entidad, los antecedentes, la misión y visión son parte importante del contenido de un sitio. Sin embargo, el usuario no necesita, precisamente, consultarla al ingresar a la web. Por el contrario, sí existe información más útil para el usuario como fechas de actividades, noticias, documentación de interés, etc. Este tipo de textos deben tener un lugar más destacado y ser, fácilmente, accesibles. 

Accesibilidad

De acuerdo con el “Lineamiento CI-10-2025”, los sitio web institucionales deben:

  • Cumplir como mínimo con el nivel AA de WCAG 2.2.
  • Incorporar tecnologías de asistencia y ARIA desde la fase de desarrollo.
  • Utilizar encabezados jerárquicos (H1, H2, H3) que reflejen la estructura lógica del
  • contenido.
  • Evitar texto en imágenes; siempre usar texto real con alt-text descriptivo.
  • Incluir en cada sitio un apartado de accesibilidad con:
    • Nivel de cumplimiento alcanzado.
    • Persona de contacto para consultas.
    • Mecanismos para recibir retroalimentación.
  • Realizar pruebas de accesibilidad antes de cada despliegue y como mínimo una vez al
  • año.
  • Diseñar interfaces responsivas y móviles.
  • Mantener las condiciones de accesibilidad en contenido y estructura durante todo el ciclo de vida del sistema

Referencia rápida de pautas AA

  • 1.1.1 - Contenido no textual [A]

    acceder al criterio de éxito 1.1.1 enlace externo (en ingles)

    Perceptible

    Detalle
    Alternativas textuales

    Cualquier contenido "no textual" que sea relevante para comprender la información, debe incluir una descripción de texto alternativo (visible o no) para identificar el contenido (incluido el captcha, por ejemplo).

    Palabras clave: gdpr, rnbd, descripción, contenido, SEO

    Automatizable

    Recomendaciones

    Labels para gráficas de datos Enlace con transcripción para los audios luego del enlace al audio Texto alt en imágenes

    aria-describedby para texto descriptivo largo aria-label y aria-labelledby en elementos que requieren descripción y no son imágenes, como controles de entrada Declarar imágenes decorativas con CSS o con alt nulo y sin title. Usar popovers en vez de tooltips (title) para enlaces que solo muestran ícono o imagen.

  • 1.2.1 - Sólo audio o sólo video (pregrabado) [A]

    acceder al criterio de éxito 1.2.1 enlace externo (en ingles)

    Perceptible

    Detalle
    Medios tempodependientes

    Se debe proporcionar una de las siguientes alternativas para el contenido presentado:

    Sólo audio: proporcione transcripción de texto descriptivo

    Sólo video: proporcione una transcripción de texto descriptivo y / o una pista descriptiva de audio que se pueda habilitar

    Palabras clave: transcripción

    Recomendaciones
    • Apoyarse en IAs para generar transcripciones

  • 1.2.2 - Subtítulos (pregrabados) [A]

    acceder al criterio de éxito 1.2.2 enlace externo (en ingles)

    Perceptible

    Detalle
    Medios tempodependientes

    Cualquier contenido pregrabado que contenga una pista de audio (ya sea sólo de audio o video) debe tener subtítulos.

    Palabras clave: subtítulos

    Recomentaciones

    Apoyarse en IAs para generar transcripciones

  • 1.2.3 - Audiodescripción o Medio Alternativo (pregrabados) [A]

    acceder al criterio de éxito 1.2.3 enlace externo (en ingles)

    Perceptible

    Detalle
    Medios tempodependientes

    Se debe proporcionar una audiodescripción o una transcripción textual descriptiva para todo el contenido de video pregrabado.

    Nota: si se proporciona una audiodescripción, se cumplirá el criterio 1.2.5 (AA). Si se proporciona una transcripción textual descriptiva, se cumplirá el criterio 1.2.8 (AAA).

    Palabras clave: descripción de audio, transcripción

    Recomendaciones

    Apoyarse en IAs para generar transcripciones

  • 1.2.4 - Subtítulos (en vivo) [AA]

    acceder al criterio de éxito 1.2.4 enlace externo (en ingles)

    Perceptible

    Detalle
    Medios tempodependientes

    Cualquier contenido en vivo que contenga una pista de audio (ya sea sólo de audio o video) debe tener subtítulo.

    Palabras clave: subtítulos

    Recomendaciones

    Apoyarse en IAs para generar transcripciones

  • 1.2.5 - Audiodescripción (pregrabada) [AA]

    acceder al criterio de éxito 1.2.5 enlace externo (en ingles)

    Perceptible

    Detalle
    Medios tempodependientes

    Se debe proporcionar una audiodescripción para todo el contenido de video pregrabado.

    Nota: ver junto con el criterio 1.2.7 (AAA).

    Información: al cumplir con este criterio, también se cumplirá el criterio 1.2.3 (A).

    Palabras clave: descripción de audio

    Recomendaciones

    Apoyarse en IAs para generar transcripciones

  • 1.2.6 - Lengua de señas (pregrabado) [AAA]

    acceder al criterio de éxito 1.2.6 enlace externo (en ingles)

    Perceptible

    Detalle
    Medios tempodependientes

    Cualquier contenido pregrabado que contenga una pista de audio (ya sea de audio o video solamente) debe traducirse a la lengua de señas (respectivo de su país de origen).

    Palabras clave: lengua de señas, língua gestual, libras, lgm, lsa, lga, lgc, asl, bsl

    Recomendaciones

  • 1.2.7 - Descripción de audio ampliada (pregrabada) [AAA]

    acceder al criterio de éxito 1.2.7 enlace externo (en ingles)

    Perceptible

    Detalle
    Medios tempodependientes

    Si no es posible mantener una pista de descripción de audio junto con el audio original del video (ejemplo: líneas superpuestas), se debe proporcionar una alternativa que permita pausar el video, reproducir la descripción de audio y luego reanudar el video.

    Nota: ver junto con el criterio 1.2.5 (AA).

    Palabras clave: descripción de audio

    Recomendaciones

    Apoyarse en IAs para generar transcripciones

  • 1.2.8 - Medios alternativos (pregrabados) [AAA]

    acceder al criterio de éxito 1.2.8 enlace externo (en ingles)

    Perceptible

    Detalle
    Medios tempodependientes

    Se debe proporcionar una transcripción de texto descriptivo para todo el contenido de video pregrabado.

    Información: al cumplir con este criterio, también se cumplirá el criterio 1.2.3 (A).

    Palabras clave: transcripción

    Recomendaciones

    Apoyarse en IAs para generar transcripciones

  • 1.2.9 - Solo audio (en vivo) [AAA]

    acceder al criterio de éxito 1.2.9 enlace externo (en ingles)

    Perceptible

    Detalle
    Medios tempodependientes

    Cualquier contenido de audio que se transmita en vivo debe tener una transcripción de texto descriptivo.

    Sugerencia: la transcripción en este caso se proporciona por operadores capacitados (estenotipistas) debido a una mayor asertividad. Los servicios automatizados no cumplen satisfactoriamente los criterios.

    Palabras clave: estructura, arquitectura informacional, semántica, contenido, SEO

    Recomendaciones

    Apoyarse en IAs para generar transcripciones

  • 1.3.1 - Información y relaciones [A]

    acceder al criterio de éxito 1.3.1 enlace externo (en ingles)

    Perceptible

    Detalle
    Adaptable

    La organización estructural de una pantalla debe construirse de tal manera que su arquitectura de información tenga sentido tanto para quienes ven como para quienes escuchan el contenido.

    Sugerencia: el desafío aquí es proporcionar experiencias equivalentes relacionadas con los contextos visuales y auditivos.

    Palabras clave: estructura, arquitectura informacional, semántica, contenido, SEO

    Automatizable

    Recomendaciones

    Usar roles aria:

    • role="banner"
    • role="search"
    • role="navigation"
    • role="form"
    • role="main"
    • role="region"
    • role="complementary"
    • role="contentinfo"

    Usar HTML semántico aria-labelledby Para identificar regiones que no tienen heading Identificar íconos tipo Font con role="img" Identificar encabezados con pre-título y bajada como áreas

  • 1.3.2 - Secuencia significativa [A]

    acceder al criterio de éxito 1.3.2 enlace externo (en ingles)

    Perceptible

    Detalle
    Adaptable

    Cualquiera que sea el método de interacción, la presentación de información en la pantalla siempre debe tener una secuencia lógica.

    Sugerencia: el contenido responsivo no debe afectar la comprensión de la información, independientemente del tamaño de la pantalla.

    Nota: ver junto con el criterio 2.4.3 (A).

    Palabras clave: sensible

    Recomendaciones
    • Se utilizan etiquetas semánticas para organizar los contenidos:
      , 
    • Se evita cambiar el orden de los elementos usando CSS.
    • El sitio se puede leer sin CSS o Javascript disponibles y se mantiene el mismo orden lógico de lectura.
    • Se mantiene un orden lógico de navegación usando el teclado y siguiendo estándares de comportamiento de teclas.
    • Tooltips al lado de textos relevantes.

  • 1.3.3 - Características sensoriales [A]

    acceder al criterio de éxito 1.3.3 enlace externo (en ingles)

    Perceptible

    Detalle
    Adaptable

    Cualquier tipo de instrucción o dirección no debe depender de un formato específico, ubicación espacial, sonido o cualquier otra característica sensorial.

    Ejemplo: evite expresiones como "haga clic en el botón de abajo" o "haga clic en el botón verde" o "cuando escuche un pitido, seleccione una opción".

    Palabras clave: sonar, color, formulario, función, posición

  • WCAG 2.1

    1.3.4 - Orientación [AA]

    acceder al criterio de éxito 1.3.4 enlace externo (en ingles)

    Perceptible

    Detalle
    Adaptable

    Ninguna funcionalidad debe depender de una orientación de pantalla específica (ejemplo: girar el teléfono horizontalmente), a menos que sea esencial para realizar la función.

    Palabras clave: orientación, sensible

    Automatizable

  • WCAG 2.1

    1.3.5 - Identificar el objetivo de entrada [AA]

    acceder al criterio de éxito 1.3.5 enlace externo (en ingles)

    Perceptible

    Detalle
    Adaptable

    Las personas deben tener claro qué completar en los campos del formulario.

    Sugerencia: En un campo que le pide que complete el correo electrónico, debe quedar claro qué correo electrónico debe completarse (personal, comercial, etc).

    Nota: ver junto con los criterios 2.4.6 (AA) y 3.3.2 (A).

    Palabras clave: claridad, transparência, gdpr, rnbd

    Automatizable

  • WCAG 2.1

    1.3.6 - Identificar el
    objetivo [AAA]

    acceder al criterio de éxito 1.3.6 enlace externo (en ingles)

    Perceptible

    Detalle
    Adaptable

    El uso de símbolos y elementos fácilmente identificables en una interfaz es un comienzo, pero no garantiza que todos comprendan la información. Habilitar personalizaciones (ejemplo: una persona que cierra un anuncio o reduce la cantidad de información en la pantalla) aumenta la capacidad cognitiva de algunas personas (consulte los criterios completos).

    Palabras clave: affordance, capacidad, personalización

  • 1.4.1 - Uso de colores [A]

    acceder al criterio de éxito 1.4.1 enlace externo (en ingles)

    Perceptible

    Detalle
    Distinguible

    Los colores no deben usarse como la única forma de transmitir contenido o distinguir elementos visuales.

    Sugerencia: un mensaje de error en un formulario debe tener un icono de alerta, un mensaje claro que le indique cómo corregir el error y también un color que resalte la información (y no solo el cambio de color).

    Palabras clave: color, claridad

    Recomendaciones

    Los mensajes de error con color se complementan con indicaciones por medio de tooltips y símbolos de advertencia Las categorías que usan color se referencian también por nombre.

  • 1.4.2 - Control de audio [A]

    acceder al criterio de éxito 1.4.2 enlace externo (en ingles)

    Perceptible

    Detalle
    Distinguible

    Se debe proporcionar una forma sencilla de pausar, silenciar o ajustar el volumen de cualquier audio que se reproduzca automáticamente durante más de 3 segundos en la interfaz.

    Palabras clave: tiempo, control

    Automatizable

  • 1.4.3 - Contraste (mínimo) [AA]

    acceder al criterio de éxito 1.4.3 enlace externo (en ingles)

    Perceptible

    Detalle
    Distinguible

    Los textos deben tener una relación de contraste entre el primer plano y el fondo de al menos 4.5:1 (consulte los criterios completos).

    Nota: si el tamaño de fuente del texto es de al menos "18 puntos" o "14 puntos en negrita", la relación de contraste puede ser de 3:1.

    Palabras clave: contraste, color

    Automatizable

  • 1.4.4 - Cambiar el tamaño del texto [AA]

    acceder al criterio de éxito 1.4.4 enlace externo (en ingles)

    Perceptible

    Detalle
    Distinguible

    Al hacer zoom hasta un 200% en la pantalla, la receptividad de los textos presentados debe ocurrir para que su lectura y legibilidad sean adecuadas sin ninguna interrupción en la presentación de la información.

    Nota: ver junto con el criterio 1.4.10 (AA).

    Palabras clave: sensible

    Automatizable

  • 1.4.5 - Imágenes de texto [AA]

    acceder al criterio de éxito 1.4.5 enlace externo (en ingles)

    Perceptible

    Detalle
    Distinguible

    Cualquier extracto en pantalla que pueda mostrarse en formato de texto estilizado (ejemplo: una cita de una oración de un autor específico o el título de una sesión), no debe presentarse en formato de imagen, a menos que pueda ser personalizado por la persona.

    Nota: ver junto con el criterio 1.4.9 (AAA).

    Palabras clave: personalización, semántica, texto

  • 1.4.6 - Contraste (mejorado) [AAA]

    acceder al criterio de éxito 1.4.6 enlace externo (en ingles)

    Perceptible

    Detalle
    Distinguible

    Los textos deben tener una relación de contraste entre el primer plano y el fondo de al menos 7:1 (consulte los criterios completos).

    Nota: si el tamaño de fuente del texto es de al menos "18 puntos" o "14 puntos en negrita", la relación de contraste puede ser de 4,5:1.

    Palabras clave: contraste, color

    Automatizable

  • 1.4.7 - Sonido de fondo bajo o nulo [AAA]

    acceder al criterio de éxito 1.4.7 enlace externo (en ingles)

    Perceptible

    Detalle
    Distinguible

    Cualquier tipo de sonido que no sea la voz principal en un audio o video debe ser bajo, inexistente o tener un tipo de control simple que permita apagarlo.

    Palabras clave: sonar, control

  • 1.4.8 - Presentación visual [AAA]

    acceder al criterio de éxito 1.4.8 enlace externo (en ingles)

    Perceptible

    Detalle
    Distinguible

    Proporcionar controles específicos para permitir el control de la presentación de información en pantalla sin comprometer su legibilidad.

    Sugerencia: Debería ser posible ajustar los colores entre el primer plano y el fondo, mantener el ancho de los párrafos hasta 80 caracteres o permitir el ajuste de su espaciado.

    Palabras clave: personalización, sensible, texto

  • 1.4.9 - Imágenes de texto (sin excepción) [AAA]

    acceder al criterio de éxito 1.4.9 enlace externo (en ingles)

    Perceptible

    Detalle
    Distinguible

    Las imágenes de texto se permiten solo en los casos en que estas imágenes son decorativas y no son esenciales para comprender el contenido.

    Sugerencia: las marcas y los logotipos son ejemplos de excepción a la regla.

    Información: al cumplir este criterio, también se cumplirá el criterio 1.4.5 (AA).

    Palabras clave: personalización, semántica, texto

  • WCAG 2.1

    1.4.10 - Reflujo [AA]

    acceder al criterio de éxito 1.4.10 enlace externo (en ingles)

    Perceptible

    Detalle
    Distinguible

    Al hacer zoom hasta un 400% en la pantalla, la información presentada debe responder para que no se produzca el desplazamiento horizontal. Los elementos deben adaptarse a la pantalla hasta el punto de evitar el desplazamiento vertical y horizontal.

    Nota: ver junto con el criterio 1.4.5 (AA).

    Palabras clave: sensible

    Automatizable

  • WCAG 2.1

    1.4.11 - Contraste no
    textual Contrast [AA]

    acceder al criterio de éxito 1.4.11 enlace externo (en ingles)

    Perceptible

    Detalle
    Distinguible

    Los componentes de la interfaz (ejemplo: botones) y las imágenes esenciales para comprender el contenido deben tener una relación de contraste entre el primer plano y el fondo de al menos 3:1.

    Nota: ver junto con los criterios 1.4.3 (AA) y 1.4.6 (AAA).

    Palabras clave: contraste, color, imagenes, gráficos

  • WCAG 2.1

    1.4.12 - Espaciado de
    texto [AA]

    acceder al criterio de éxito 1.4.12 enlace externo (en ingles)

    Perceptible

    Detalle
    Distinguible

    Siempre que las personas realicen ajustes y redimensionen (por su cuenta) los textos de un contenido a algunos valores específicos (ver criterios completos), no debería haber pérdida de legibilidad de la información presentada.

    Nota: ver junto con el criterio 1.4.8 (AAA).

    Palabras clave: personalización, sensible, texto

    Automatizable

  • WCAG 2.1

    1.4.13 - Contenido al pasar el mouse o teclado o al hacer foco [AA]

    acceder al criterio de éxito 1.4.13 enlace externo (en ingles)

    Perceptible

    Detalle
    Distinguible

    El contenido adicional (ejemplo: información sobre herramientas o submenú) no debe activarse con el foco solo con el mouse (mouseover) o el teclado. Si esto ocurre, se deben cumplir ciertas condiciones (consulte los criterios completos).

    Palabras clave: mouse, teclado, interacción

  • 2.1.1 - Teclado [A]

    acceder al criterio de éxito 2.1.1 enlace externo (en ingles)

    Operable

    Detalle
    Accesible por teclado

    Toda la funcionalidad debe activarse a través del teclado, a menos que la funcionalidad no permita el control solo con el teclado.

    Sugerencia: el criterio también cumple con los teclados bluetooth configurados en dispositivos móviles (ver 2.5.6).

    Nota: ver junto con los criterios 2.1.2 (A) y 2.1.3 (AAA).

    Palabras clave: teclado, interacción

    Automatizable

  • 2.1.2 - Sin bloqueo de teclado [A]

    acceder al criterio de éxito 2.1.2 enlace externo (en ingles)

    Operable

    Detalle
    Accesible por teclado

    Al interactuar a través del teclado, la navegación a través de todos los elementos en los que se puede hacer clic debe ocurrir sin ningún bloqueo o interrupción.

    Sugerencia: los elementos "en los que no se puede hacer clic" se activan mediante combinaciones de teclas específicas cuando el lector de pantalla está habilitado.

    Palabras clave: teclado, interacción

  • 2.1.3 - Teclado (sin excepción) [AAA]

    acceder al criterio de éxito 2.1.3 enlace externo (en ingles)

    Operable

    Detalle
    Accesible por teclado

    Todas las funciones deben activarse a través del teclado, sin excepción.

    Información: al cumplir con este criterio, también se cumplirá el criterio 2.1.1 (A).

    Palabras clave: teclado, interacción

    Automatizable

  • WCAG 2.1

    2.1.4 - Métodos abreviados de teclado por carácter [A]

    acceder al criterio de éxito 2.1.4 enlace externo (en ingles)

    Operable

    Detalle
    Accesible por teclado

    Debe evitarse la creación de atajos de teclado utilizando solo caracteres simples (por ejemplo: letras o números) que pueden entrar en conflicto con los atajos existentes en el sistema. Si esto ocurre, se deben cumplir ciertas condiciones (consulte los criterios completos).

    Palabras clave: teclado, interacción

  • 2.2.1 - Ajustable por límite de tiempo [A]

    acceder al criterio de éxito 2.2.1 enlace externo (en ingles)

    Operable

    Detalle
    Tiempo suficiente

    Si se define una función que requiere tiempo para ejecutarse y no es imprescindible (obligatorio desde un punto de vista legal), también se debe incluir una opción para apagarla o una opción para expandirla.

    Nota: ver junto con los criterios 2.2.6 (AAA) y 3.2.1 (A).

    Palabras clave: tiempo, control

    Automatizable

  • 2.2.2 - Pausar, detener u ocultar [A]

    acceder al criterio de éxito 2.2.2 enlace externo (en ingles)

    Operable

    Detalle
    Tiempo suficiente

    Cualquier elemento de la pantalla que tenga movimiento automático o parpadeo y que dure más de 5 segundos, debe tener un tipo de control donde la persona que lo usa pueda pausar, detener u ocultar.

    Nota: ver junto con el criterio 2.3.3 (AAA), que se refiere exclusivamente a los desencadenantes provocados por personas.

    Palabras clave: movimiento, control

  • 2.2.3 - Sin límite de tiempo [AAA]

    acceder al criterio de éxito 2.2.3 enlace externo (en ingles)

    Operable

    Detalle
    Tiempo suficiente

    Ninguna funcionalidad en pantalla debe tener ningún tipo de ejecución tras su cumplimiento en un cierto período de tiempo.

    Sugerencia: Los eventos en tiempo real son excepciones.

    Palabras clave: tiempo, control

  • 2.2.4 - Interrupciones [AAA]

    acceder al criterio de éxito 2.2.4 enlace externo (en ingles)

    Operable

    Detalle
    Tiempo suficiente

    Cualquier tipo de interrupción (ejemplo: mensajes de alerta en un chat) que pueda confundir a alguien, debe tener una opción que permita su desconexión o postergación, salvo que se trate de una emergencia que preserve la salud, seguridad o propiedad de la persona.

    Palabras clave: interrupción, control

    Automatizable

  • 2.2.5 - Nueva autenticación [AAA]

    acceder al criterio de éxito 2.2.5 enlace externo (en ingles)

    Operable

    Detalle
    Tiempo suficiente

    Cuando caduca una sesión autenticada, cualquier persona que haya iniciado sesión debe poder continuar con su actividad, sin pérdida de datos, al realizar una nueva autenticación en el entorno.

    Palabras clave: autenticación , almacenamiento, gdpr, rnbd

  • WCAG 2.1

    2.2.6 - Límites de tiempo [AAA]

    acceder al criterio de éxito 2.2.6 enlace externo (en ingles)

    Operable

    Detalle
    Tiempo suficiente

    Si hay inactividad (menos de 20 horas) y esto da como resultado la pérdida de datos previamente llenados, se debe enviar un mensaje en la pantalla informando a la persona que estos datos se perderán.

    Nota: ver junto con el criterio 2.2.1 (A).

    Palabras clave: autenticación, tiempo, almacenamiento, gdpr, rnbd

  • 2.3.1 - Tres destellos o por debajo del límite [A]

    acceder al criterio de éxito 2.3.1 enlace externo (en ingles)

    Operable

    Detalle
    Convulsiones y reacciones físicas

    Ningún contenido de la página debe parpadear más de 3 veces por segundo, a menos que los flashes tengan poco contraste o poco rojo (consulte los criterios completos).

    Nota: ver junto con el criterio 2.3.2 (AAA).

    Palabras clave: contraste, animación, movimiento

  • 2.3.2 - Tres destellos [AAA]

    acceder al criterio de éxito 2.3.2 enlace externo (en ingles)

    Operable

    Detalle
    Convulsiones y reacciones físicas

    Ningún contenido de la página debe parpadear más de 3 veces por segundo, sin excepción (consulte los criterios completos).

    Información: al cumplir con este criterio, también se cumplirá el criterio 2.3.1 (A).

    Palabras clave: animación, movimiento

  • WCAG 2.1

    2.3.3 - Animaciones de interacción [AAA]

    acceder al criterio de éxito 2.3.3 enlace externo (en ingles)

    Operable

    Detalle
    Convulsiones y reacciones físicas

    Cualquier tipo de animación interactiva (no imprescindible) y desencadenada por la persona (ejemplo: scroll con efecto de paralaje) debe tener una forma sencilla de desactivarse.

    Nota: ver junto con el criterio 2.2.2 (A), que se refiere exclusivamente a la activación automática.

    Palabras clave: movimiento, control, interacción

  • 2.4.1 - Ignorar bloques [A]

    acceder al criterio de éxito 2.4.1 enlace externo (en ingles)

    Operable

    Detalle
    Navegable

    Se debe proporcionar un tipo de control para que las personas puedan ignorar cierto contenido repetitivo (ejemplo: un menú de navegación).

    Sugerencia: este es un criterio exclusivo para las personas que usan el teclado.

    Nota: ver junto con los criterios 1.3.1 (A), 2.4.2 (A) y 2.4.10 (AAA).

    Palabras clave: teclado, semántica, interacción

    Automatizable

  • 2.4.2 - Página de título [A]

    acceder al criterio de éxito 2.4.2 enlace externo (en ingles)

    Operable

    Detalle
    Navegable

    Todas las pantallas deben tener un título principal y describir claramente su propósito.

    Nota: Este es el título que aparece en la pestaña de una página en el navegador (no el título de nivel 1 en el contenido principal).

    Palabras clave: contenido, SEO, claridad

    Automatizable

  • 2.4.3 - Orden de enfoque [A]

    acceder al criterio de éxito 2.4.3 enlace externo (en ingles)

    Operable

    Detalle
    Navegable

    La interacción de los elementos enfocables en la pantalla debe ser siempre secuencial y lógica según el contenido presentado.

    Nota: ver junto con el criterio 1.3.2 (A).

    Palabras clave: teclado, interacción

  • 2.4.4 - Objeto del enlace
    (en contexto)[A]

    acceder al criterio de éxito 2.4.4 enlace externo (en ingles)

    Operable

    Detalle
    Navegable

    El propósito de un enlace debe determinarse a partir del texto del propio enlace o del contexto que lo rodea.

    Sugerencia: el criterio también se aplica a los botones o iconos en los que se puede hacer clic.

    Nota: ver junto con el criterio 2.4.9 (AAA).

    Palabras clave: link, contenido, SEO

    Automatizable

  • 2.4.5 - Varias formas [AA]

    acceder al criterio de éxito 2.4.5 enlace externo (en ingles)

    Operable

    Detalle
    Navegable

    Las personas siempre deben tener más de una opción para encontrar un contenido en particular.

    Ejemplo: se puede acceder al mismo contenido a través de un menú de navegación o también a través de un campo de búsqueda.

    Palabras clave: contenido, SEO, interacción

  • 2.4.6 - Encabezados y etiquetas [AA]

    acceder al criterio de éxito 2.4.6 enlace externo (en ingles)

    Operable

    Detalle
    Navegable

    Todos los títulos (diferentes niveles) y etiquetas (campos de formularios) deben describir claramente el propósito de los contenidos o agrupaciones en los elementos de la pantalla, sin ambigüedad en su comprensión.

    Nota: ver junto con los criterios 1.3.1 (A), 1.3.5 (AA), 2.4.2 (A), 2.5.3 (A), 3.3.2 (A) y 4.1.2 (A).

    Palabras clave: contenido, SEO, claridad, gdpr, rnbd

    Automatizable

  • 2.4.7 - Foco visible [AA]

    acceder al criterio de éxito 2.4.7 enlace externo (en ingles)

    Operable

    Detalle
    Navegable

    Al interactuar con el teclado, cualquier persona debería poder identificar su ubicación espacial en la pantalla a través de un enfoque (visible) que identifique su ubicación.

    Nota: ver junto con los criterios 2.4.11 (AA), 2.4.12 (AAA) y 2.4.13 (AAA).

    Palabras clave: teclado, interacción, visual

    Automatizable

  • 2.4.8 - Ubicación [AAA]

    acceder al criterio de éxito 2.4.8 enlace externo (en ingles)

    Operable

    Detalle
    Navegable

    Cualquiera debería poder ubicarse u orientarse fácilmente en cualquier parte de la pantalla o en un conjunto de pantallas.

    Ejemplo: la aplicación de una "ruta de navegación" cumple este criterio.

    Palabras clave: contenido, claridad, localización

  • 2.4.9 - Propósito del enlace (solo enlace) [AAA]

    acceder al criterio de éxito 2.4.9 enlace externo (en ingles)

    Operable

    Detalle
    Navegable

    El propósito de un enlace debe determinarse a partir del texto del propio enlace.

    Sugerencia: el criterio también se aplica a los botones o iconos en los que se puede hacer clic.

    Nota: ver junto con el criterio 2.4.4 (A).

    Palabras clave: link, contenido, SEO

    Automatizable

  • 2.4.10 - Encabezados de
    sección Headings [AAA]

    acceder al criterio de éxito 2.4.10 enlace externo (en ingles)

    Operable

    Detalle
    Navegable

    Siempre que el contenido de la pantalla se divida en secciones, estas deben tener títulos claros, con niveles de jerarquía bien definidos, que faciliten la identificación de áreas.

    Nota: ver junto con el criterio 4.1.2 (A), que se refiere exclusivamente a la semántica del código.

    Palabras clave: contenido, SEO, claridad

  • WCAG 2.2

    2.4.11 - Foco no
    oscurecido (mínimo) [AA]

    acceder al criterio de éxito 2.4.11 enlace externo (en ingles)

    Operable

    Detalle
    Navegable

    Cuando se muestra un foco visible en algún elemento de la interfaz, no se puede ocultar por completo debido a otros componentes de la interfaz (ejemplo: un pie de página fijo cubre parcialmente este elemento).

    Palabras clave: teclado, interacción, visual

  • WCAG 2.2

    2.4.12 - Foco no
    oscurecido (mejorado) [AAA]

    acceder al criterio de éxito 2.4.12 enlace externo (en ingles)

    Operable

    Detalle
    Navegable

    Cuando el foco visible se muestra en algún elemento de la interfaz, no se puede ocultar debido a los otros componentes de la interfaz (ejemplo: un pie de página fijo cubre completamente este elemento).

    Información: al cumplir este criterio, también se cumplirá el criterio 2.4.11.

    Palabras clave: contenido, documento

  • WCAG 2.2

    2.4.13 - Aspecto del foco [AAA]

    acceder al criterio de éxito 2.4.13 enlace externo (en ingles)

    Operable

    Detalle
    Navegable

    Cuando se muestra el foco visible, debe tener 2 píxeles de ancho, debe haber un espaciado mínimo entre el contenido y la relación de contraste con las áreas adyacentes debe ser suficiente (ver criterio completo).

    Información: al cumplir este criterio, también se cumplirá el criterio 2.4.7.

    Palabras clave: teclado, interacción, visual

  • WCAG 2.1

    2.5.1 - Gestos de disparo [A]

    acceder al criterio de éxito 2.5.1 enlace externo (en ingles)

    Operable

    Detalle
    Modalidades de Entrada

    Cualquier funcionalidad que requiera que se active una ruta táctil (ejemplo: arrastrar con el dedo en una pantalla táctil) también necesita un método alternativo que facilite la interacción de quienes no pueden realizar el gesto (ver criterios completos).

    Palabras clave: tocar, interacción, alternativa

  • WCAG 2.1

    2.5.2 - Cancelación de puntero o de la activación [A]

    acceder al criterio de éxito 2.5.2 enlace externo (en ingles)

    Operable

    Detalle
    Modalidades de Entrada

    Es posible que haya un clic o toque accidental en un determinado componente y si la persona lo nota (antes de soltar el botón pulsado o tocado), debe tener una forma de cancelar la activación accidental.

    Nota: se recomienda una lectura completa del criterio.

    Palabras clave: tocar, interacción, cancelación, alternativa

  • WCAG 2.1

    2.5.3 - Etiqueta de nombre accesible [A]

    acceder al criterio de éxito 2.5.3 enlace externo (en ingles)

    Operable

    Detalle
    Modalidades de Entrada

    Las etiquetas de los botones, los íconos accionables o cualquier control interactivo deben tener una descripción significativa tanto para quienes ven como para quienes acaban de escuchar la información.

    Ejemplo: en un botón, cuya etiqueta visible es "comprar ahora", su forma audible puede ser similar a "comprar ahora el producto XYZ".

    Palabras clave: contenido, claridad

    Automatizable

  • WCAG 2.1

    2.5.4 - Actuacion por movimiento [A]

    acceder al criterio de éxito 2.5.4 enlace externo (en ingles)

    Operable

    Detalle
    Modalidades de Entrada

    Si hay una función que requiere que el dispositivo se mueva (ejemplo: "agitar para deshacer"), se debe ofrecer una forma de habilitarlo para que se apague para evitar una activación accidental. Si esta función es imprescindible, se debe ofrecer una activación alternativa.

    Palabras clave: interacción, alternativa

  • WCAG 2.1

    2.5.5 - Tamaño del área en la que se puede hacer clic (mejorado) [AAA]

    acceder al criterio de éxito 2.5.5 enlace externo (en ingles)

    Operable

    Detalle
    Modalidades de Entrada

    El tamaño de las áreas en las que se puede hacer clic o tocar debe tener una separación mínima de 44x44 píxeles, a menos que esta área esté en una oración ubicada en un bloque de texto.

    Información: al cumplir este criterio, también se cumplirá el criterio 2.5.8.

    Palabras clave: visual, interacción, espaciado

  • WCAG 2.1

    2.5.6 - Mecanismos de entrada simultánea [AAA]

    acceder al criterio de éxito 2.5.6 enlace externo (en ingles)

    Operable

    Detalle
    Modalidades de Entrada

    La funcionalidad nativa en un dispositivo móvil y con una interfaz táctil no debe verse comprometida cuando la persona utiliza un periférico no nativo (por ejemplo: un teclado o mouse bluetooth). Las funcionalidades deben poder utilizarse incluso en este escenario.

    Palabras clave: interacción, alternativa

  • WCAG 2.2

    2.5.7 - Movimientos de arrastre [AA]

    acceder al criterio de éxito 2.5.7 enlace externo (en ingles)

    Operable

    Detalle
    Modalidades de Entrada

    Cualquier funcionalidad que dependa de un movimiento de arrastrar y soltar también debe recibir un método de uso alternativo para que la operación también se lleve a cabo haciendo clic o tocando.

    Palabras clave: interacción, alternativa, control

  • WCAG 2.2

    2.5.8 - Tamaño del área en la que se puede hacer clic (mínimo) [AA]

    acceder al criterio de éxito 2.5.8 enlace externo (en ingles)

    Operable

    Detalle
    Modalidades de Entrada

    El tamaño de las áreas en las que se puede hacer clic o tocar debe tener una separación mínima de 24x24 píxeles. El área puede ser más pequeña en algunos casos, como cuando hay un espacio de al menos 24 píxeles para las áreas activas adyacentes.

    Nota: ver junto con el criterio 2.5.5 (AAA).

    Palabras clave: visual, interacción, espaciado

  • 3.1.1 - Idioma de la página [A]

    acceder al criterio de éxito 3.1.1 enlace externo (en ingles)

    Comprensible

    Detalle
    Legible

    Declarar correctamente el idioma de la pantalla hace que los lectores de pantalla usen una entonación correcta para citar el contenido. Declararlos siempre.

    Nota: ver junto con los criterios 3.1.2 (AA) y 3.1.6 (AAA).

    Palabras clave: contenido, internacionalización

    Automatizable

  • 3.1.2 - Idioma de las partes [AA]

    acceder al criterio de éxito 3.1.2 enlace externo (en ingles)

    Comprensible

    Detalle
    Legible

    El idioma de una palabra o frase en particular que contenga un idioma diferente al original en la pantalla, debe estar definido e identificado correctamente para que también se produzca la entonación correcta y la pronunciación adecuada a través de lectores de pantalla.

    Nota: ver junto con los criterios 3.1.1 (A) y 3.1.6 (AAA).

    Palabras clave: contenido, internacionalización

    Automatizable

  • 3.1.3 - Palabras inusuales [AAA]

    acceder al criterio de éxito 3.1.3 enlace externo (en ingles)

    Comprensible

    Detalle
    Legible

    El uso de jerga, metáforas y figuras retóricas puede ser un obstáculo para la comprensión de la información, en este sentido se debe proporcionar una forma de traducción o explicación de la información (ejemplo: enlace para acceder a un glosario).

    Palabras clave: contenido, comprensión

  • 3.1.4 - Abreviaturas [AAA]

    acceder al criterio de éxito 3.1.4 enlace externo (en ingles)

    Comprensible

    Detalle
    Legible

    Una abreviatura o acrónimo no siempre es comprensible para todas las personas, en este sentido, se debe proporcionar una forma de identificar su significado real (ejemplo: enlace para acceder a una tabla "desde-hasta").

    Palabras clave: contenido, comprensión

  • 3.1.5 - Nivel de lectura [AAA]

    acceder al criterio de éxito 3.1.5 enlace externo (en ingles)

    Comprensible

    Detalle
    Legible

    Si un determinado contenido es tan complejo que una persona con educación primaria completa * no es capaz de entenderlo, será necesario revisarlo o utilizar contenido complementario que facilite su comprensión.

    Nota: *basado en niveles internacionales (UNESCO)

    Palabras clave: contenido, comprensión

  • 3.1.6 - Pronunciación [AAA]

    acceder al criterio de éxito 3.1.6 enlace externo (en ingles)

    Comprensible

    Detalle
    Legible

    Las palabras regionales específicas y los nombres propios a menudo tienen promociones específicas. Debe proporcionarse una forma que permita la correcta comprensión de la pronunciación en algunos casos.

    Nota: ver junto con los criterios 3.1.1 (A) y 3.1.2 (AA).

    Palabras clave: contenido, comprensión

  • 3.2.1 - En Foco [A]

    acceder al criterio de éxito 3.2.1 enlace externo (en ingles)

    Comprensible

    Detalle
    Predecible

    No se deben producir cambios contextuales que puedan desorientar a alguien desde el foco en cualquier elemento de la interfaz (ejemplo: abrir una ventana modal), sin confirmación directa (ejemplo: un botón de confirmación).

    Nota: ver junto con los criterios 3.2.2 (A) y 3.2.5 (AAA).

    Palabras clave: interacción, previsibilidad

  • 3.2.2 - Campo de entrada (Input) [A]

    acceder al criterio de éxito 3.2.2 enlace externo (en ingles)

    Comprensible

    Detalle
    Predecible

    No deben ocurrir cambios contextuales que puedan desorientar a alguien cuando hay una interacción en un campo de entrada de datos (ejemplo: elementos de formulario), sin confirmación directa (ejemplo: un botón de confirmación).

    Nota: ver junto con los criterios 3.2.1 (A) y 3.2.5 (AAA).

    Palabras clave: interacción, previsibilidad

  • 3.2.3 Navegación consistente [AA]

    acceder al criterio de éxito 3.2.3 enlace externo (en ingles)

    Comprensible

    Detalle
    Predecible

    Se debe mantener la coherencia en cuanto al formato de presentación, interacción y ubicación en pantalla, siempre que los mismos elementos (ejemplo: un campo de búsqueda) se muestren en diferentes pantallas que formen parte de la misma aplicación (sitio web o app).

    Nota: ver junto con el criterio 3.2.4 (AA).

    Palabras clave: consistencia

  • 3.2.4 - Identificación coherente [AA]

    acceder al criterio de éxito 3.2.4 enlace externo (en ingles)

    Comprensible

    Detalle
    Predecible

    Se debe mantener la consistencia con respecto a diferentes formatos de elementos, pero que tienen la misma funcionalidad (ejemplo: un icono y un botón para descargar algo), aumentando la capacidad cognitiva de algunas personas.

    Nota: ver junto con el criterio 3.2.3 (AA).

    Palabras clave: consistencia

  • 3.2.5 - Cambio bajo pedido [AAA]

    acceder al criterio de éxito 3.2.5 enlace externo (en ingles)

    Comprensible

    Detalle
    Predecible

    Cualquier cambio de contexto que pueda desorientar a las personas, solo debe ocurrir cuando lo solicite la persona que lo utiliza (ejemplo: un botón para confirmar una acción).

    Información: ver junto con los criterios 3.2.1 (A) y 3.2.2 (A).

    Palabras clave: interacción, previsibilidad

    Automatizable

  • WCAG 2.2

    3.2.6 - Ayuda
    consistente [A]

    acceder al criterio de éxito 3.2.6 enlace externo (en ingles)

    Comprensible

    Detalle
    Predecible

    Si se proporcionan algunas opciones de ayuda en una pantalla (ejemplo: datos de contacto humano), este mismo formato debe ser el mismo en todas las demás pantallas donde se proporciona ayuda.

    Nota: ver junto con el criterio 3.3.5 (AAA), que se refiere exclusivamente a una ayuda contextualizada en texto.

    Palabras clave: ayuda, contacto

  • 3.3.1 - Identificación de errores [A]

    acceder al criterio de éxito 3.3.1 enlace externo (en ingles)

    Comprensible

    Detalle
    Entrada de datos asistida

    Siempre que se muestre un mensaje de error, debe identificar claramente qué elemento generó el error de forma visual y audible (ejemplo: cambio de color en el elemento + un icono de alerta + un mensaje de texto).

    Nota: ver junto con el criterio 3.3.3 (AA).

    Palabras clave: ayuda, error, claridad

  • 3.3.2 - Etiquetas e instrucciones [A]

    acceder al criterio de éxito 3.3.2 enlace externo (en ingles)

    Comprensible

    Detalle
    Entrada de datos asistida

    Todas las etiquetas deben describir de forma clara e inequívoca el propósito de los campos del formulario.

    Sugerencia: incluya instrucciones y consejos para completar los campos, siempre que sea posible.

    Nota: ver junto con los criterios 1.3.1 (A), 1.3.5 (AA), 2.4.6 (A), 2.5.3 (A). 3.3.5 (AAA) y 4.1.2 (A).

    Palabras clave: contenido, SEO, claridad, prevención, gdpr, rnbd

  • 3.3.3 - Error sugerido [AA]

    acceder al criterio de éxito 3.3.3 enlace externo (en ingles)

    Comprensible

    Detalle
    Entrada de datos asistida

    Siempre que se muestre un mensaje de error, también debe dar consejos sobre cómo resolver el error (no basta con indicar que se ha producido un error).

    Nota: ver junto con el criterio 3.3.1 (A).

    Palabras clave: ayuda, error, claridad

  • 3.3.4 - Prevención de errores (legales, financieros, de datos) [AA]

    acceder al criterio de éxito 3.3.4 enlace externo (en ingles)

    Comprensible

    Detalle
    Entrada de datos asistida

    Se deberá aportar un formulario de confirmación de datos o la posibilidad de cancelar el envío, siempre que los campos del formulario requieran la cumplimentación de datos que impliquen responsabilidad legal, económica o contengan datos sensibles.

    Nota: ver junto con el criterio 3.3.6 (AAA).

    Palabras clave: prevención, error, claridad, gdpr, rnbd

  • 3.3.5 - Ayuda [AAA]

    acceder al criterio de éxito 3.3.5 enlace externo (en ingles)

    Comprensible

    Detalle
    Entrada de datos asistida

    Debe proporcionarse una forma sencilla de obtener ayuda "contextualizada" con la información que se muestra en la pantalla.

    Ejemplo: una descripción emergente informativa o una tabla con información adicional.

    Nota: ver junto con los criterios 3.2.6 (A) y 3.3.2 (A).

    Palabras clave: contenido, SEO, claridad, prevención, ayuda

  • 3.3.6 - Prevención de errores (todos) [AAA]

    acceder al criterio de éxito 3.3.6 enlace externo (en ingles)

    Comprensible

    Detalle
    Entrada de datos asistida

    Se debe proporcionar un formulario de confirmación de datos o la posibilidad de cancelar el envío, siempre que los campos del formulario requieran el llenado de datos (cualquier tipo de datos).

    Nota: al cumplir este criterio, también se cumplirá el criterio 3.3.4 (AA).

    Palabras clave: prevención, error, claridad, gdpr, rnbd

  • WCAG 2.2

    3.3.7 - Entrada
    redundante [A]

    acceder al criterio de éxito 3.3.7 enlace externo (en ingles)

    Comprensible

    Detalle
    Entrada de datos asistida

    Al completar un formulario dividido en etapas, los datos ingresados ​​deben solicitarse solo una vez durante el proceso, a menos que sea imprescindible (ejemplo: volver a ingresar una contraseña para su confirmación).

    Nota: se recomienda una lectura completa del criterio.

    Palabras clave: redundancia, prevención, claridad, gdpr, rnbd

  • WCAG 2.2

    3.3.8 - Autenticación accesible (mínimo) [AA]

    acceder al criterio de éxito 3.3.8 enlace externo (en ingles)

    Comprensible

    Detalle
    Entrada de datos asistida

    Las funciones que facilitan la escritura de contraseñas en los campos de inicio de sesión (ejemplo: posibilidad de copiar y pegar) no deben eliminarse sin que exista una justificación coherente para su eliminación.

    Nota: se recomienda una lectura completa del criterio.

    Palabras clave: ayuda, claridad, interacción

  • WCAG 2.2

    3.3.9 - Autenticación accesible (mejorado) [AAA]

    acceder al criterio de éxito 3.3.9 enlace externo (en ingles)

    Comprensible

    Detalle
    Entrada de datos asistida

    El criterio 3.3.8 permite algunas excepciones. En este caso, no hay excepciones.

    Nota: se recomienda una lectura completa del criterio.

    Información: al cumplir con este criterio, también se cumplirá el criterio 3.3.8 (AA).

    Palabras clave: ayuda, claridad, interacción

  • 4.1.1 - Análisis (código) [ELIMINADO]

    acceder al criterio de éxito 4.1.1 enlace externo (en ingles)

    Este criterio ha sido eliminado de WCAG 2.2. En el pasado, tenía sentido que existiera para garantizar la aplicación adecuada de HTML en las tecnologías de asistencia, pero hoy en día se ha vuelto redundante debido a las actualizaciones tecnológicas. Consulte el criterio completo para obtener más información.

    Nota: La numeración aún no ha cambiado.

    Palabras clave: semántica, código

  • 4.1.2 - Nombre, función, valor [A]

    acceder al criterio de éxito 4.1.2 enlace externo (en ingles)

    Robusto

    Detalle
    Compatible

    Toda la tecnología de asistencia hace uso de las propiedades de nombre, función y valor para identificar correctamente los elementos estandarizados de HTML. Cualquier componente personalizado también debe traer estas marcas de manera adecuada.

    Nota para el "dev": Las técnicas WAI-ARIA se utilizan bien en este criterio.

    Palabras clave: semántica, código, claridad

    Automatizable

  • WCAG 2.1

    4.1.3 - Mensajes de
    estado Messages [AA]

    acceder al criterio de éxito 4.1.3 enlace externo (en ingles)

    Robusto

    Detalle
    Compatible

    Cualquier tipo de mensaje que sea resultado de una acción o que informe el avance de un proceso y que sea relevante para la persona, debe transmitirse sin un cambio de contexto (foco) en la pantalla.

    Nota: se recomienda una lectura completa de los criterios para identificar ejemplos y casos de uso.

    Palabras clave: ayuda, claridad, interacción


última actualización en 13/05/2026

Referencia

Guía WCAG en español. Por Marcelo Sales.

Web Content Accessibility Guidelines (WCAG)enlace externo (en ingles) se desarrolla a través del proceso W3C en cooperación con individuos y organizaciones de todo el mundo, con el objetivo de proporcionar un estándar compartido único para la accesibilidad del contenido web que satisfaga las necesidades de individuos, organizaciones y gobiernos a nivel internacional.


Línea gráfica

Sitio web UCR

Todas las páginas web de la UCR deben respetar los elementos de identidad planteados en el Manual de Identidad Visual de la UCR. 

Se debe tener presente que esta es una aplicación de video por lo que se deben usar imágenes trabajadas en formato RGB. 

Los objetivos de la línea gráfica son dos: primero, promover que los sitios web de la UCR posean un diseño gráfico profesional y; segundo, establecer y mantener la consistencia visual entre las web de las unidades y la página de la UCR. 

El sitio principal de la Universidad de Costa Rica ha sido diseñado bajo principios de orden, usabilidad, limpieza visual y calidad gráfica. Por esta razón, se espera que la red de sitios de la UCR respete, también, dichas características y cuente, además, con diseños atractivos e innovadores, acordes con las tendencias actuales de composición de los sitios web de universidades internacionales en las cuales se reconoce la importancia del internet como el medio de comunicación de mayor crecimiento e impacto en la actualidad. 

La línea gráfica de los sitios UCR promueve el uso mesurado de efectos especiales, tales como: gradientes, sombras, embozados y texturas fotorrealistas. Se recomienda crear interfaces con diseños planos que enfaticen los contenidos y la tipografía por encima de la decoración sin objetivo funcional. 

Además, las animaciones innecesarias deben evitarse. Si se utilizan, deberán ser funcionales, contribuir a la estética general y ayudar a realzar la calidad gráfica del sitio. 

En este sentido, un menú deslizante puede mejorar la funcionalidad si se implementa correctamente y ofrece opciones que no saturen la vista normal del sitio. En cambio, un dibujo animado de “adorno” puede ser un distractor y retardar la descarga. De igual manera, el empleo de archivos de audio o multimedia debe ser mesurado.

Colores y fuentes tipográficas

La paleta de color disponible para desarrollo de sitios web se encuentra definida en el Manual de Identidad Visual. 

Los colores deben estar en formato RGB para web y, como base, se usan las tonalidades celeste UCR y blanco, con acentos azul UCR. 

Las tipografías base son, también, las que están definidas en el Manual de Identidad Visual. En aplicaciones web se recomienda usar la letra Arial por ser legible y más compatible con distintos navegadores.
 

Fondo del sitio

El fondo de los sitios debe ser gris claro uniforme (R 230 G 230 B 230), sin gradientes ni otras tonalidades que rompan con la armonía de la paleta oficial. Si se requiere utilizar otro color, este debe ser valorado y aprobado por la ODI.

Pie

El pie de los sitios debe ser de color gris oscuro uniforme (R 102 G 102 B 102). Su objetivo es dar un cierre visual a la página web. 

Pie de página

Se recomienda que el pie posea una altura no menor a 60 pixeles y que esta se extienda hasta el final de la pantalla, si es necesario. La tipografía debe ser de color

Cintillo

El cintillo web es un área común que deben implementar todos los sitios de la Universidad de Costa Rica. La finalidad de este elemento es identificar a las unidades como parte de la UCR y de la red de sitios institucionales. El cintillo, además, ayuda a proyectar una imagen unificada y coherente. 

cintillo

En cintillo se ubica en la parte superior del diseño, es de color celeste UCR (# 00c0f3), azul UCR (#005da4) o blanco. Si se requiere otro color, este deber ser valorado por la ODI, con base en la paleta oficial. Además, no se permite el uso de gradientes u otros efectos. 

cintillo

Al lado izquierdo del cintillo se ubica la firma horizontal en una o dos líneas a color (también puede ser en blanco cuando esta se utiliza sobre fondos oscuros). Igualmente, puede usarse la firma tipográfica en blanco o en negro.

cintillo

El cintillo con firma en una línea no puede ser menor a 56 pixeles de alto. Si se usa la firma horizontal en dos líneas, esta debe colocarse en un tamaño mayor, por tanto, el alto mínimo del cintillo será 108 pixeles. 

cintillo

La firma en una línea mide, mínimo, 50 pixeles de alto y se deja un margen, mínimo, de 3 pixeles a cada lado. Por su parte, la firma horizontal posee un alto, mínimo, de 78 pixeles y se deja un margen, mínimo, de 15 pixeles en cada extremo.

El cintillo puede contener menús u otros elementos como textbox, dropdown o enlaces, en color blanco o negro (según se facilite la legibilidad sobre el fondo). Deben evitarse otros colores para no desviar la atención del contenido del sitio. 

cintillo

El cintillo puede incluir el identificador compuesto de la unidad o tener un solo logo a la derecha (sin agregar otros enlaces o elementos interactivos). Si no se colocan identificadores en él, se recomienda colocarlos en un banner que se ubicado en el pie de página o abajo del cintillo. 

Es necesario recordar que la imagen de la firma debe tener un enlace al sitio principal de la UCR.

Uso de imágenes

  • Las imágenes a usar en el sitio deben reflejar calidad y profesionalismo. Contarán con un buen encuadre, iluminación y enfoque apropiados. Además, los temas representados en las imágenes deben reflejar los valores universitarios, y la identidad de prestigio de la UCR.
  • Idealmente las imágenes serán realizadas por profesionales en fotografía, diseño gráfico o publicidad.
  • Se debe evitar el uso de imágenes de “stock“. Si es necesario utilizarlas, se debe evitar que éstas representen culturas o ambientes que identifiquen erróneamente el ambiente nacional y/o el universitario de nuestra institución (por ejemplo, uso de toga y birrete en graduaciones si la UCR no lo utiliza.).

Estandarización de estructura del sitio

Las unidades de la Universidad de Costa Rica, ya sean académicas, centros e institutos de investigación, o administrativas, a menudo tienen un conjunto básico de información que se requiere publicar en sus sitios web, muy similar entre ellas. Los públicos de estos sitios se beneficiarían de encontrar organizada de manera similar esta información entre estos sitios web, de forma que al navegar entre ellos no requieran buscar el mismo tipo de información en ubicaciones o formatos completamente distintos. Es por esto que se requiere crear un estándar para menú principal, así como para algunos tipos de información repetida.

Para determinar que información común comparten las distintas unidades se observó cuales entradas de menú eran las más comunes, y que información se suele colocar en las páginas de entrada de los distintos sitios. Usando como base el diseño del menú principal del sitio www.ucr.ac.cr se presenta a continuación el formato que se requiere implementar por parte de las unidades para cumplir con estos objetivos.

Menú para unidades académicas

El primer nivel de entradas de menú para unidades académicas, debería tener una estructura similar a la del sitio principal de la UCR: 

  • Estudiantes
  • Docencia
  • Investigación
  • Acción Social
  • Relaciones Externas
  • Organización
  • Quienes Somos

Las entradas recomendadas para el segundo nivel en este menú son:

  • Estudiantes
    • Carreras, títulos y énfasis
    • Perfil del estudiante y del egresado
    • Bolsa de empleo
    • Asociación de estudiantes
    • Guía de horarios
    • Oferta de asistencias
    • Posgrados
    • TCU
  • Docencia
    • Profesorado
    • Investigación
    • Proyectos de investigación
    • Revistas
    • Publicaciones
  • Acción Social
    • Proyectos de acción social
    • Relaciones Externas
    • Convalidaciones
    • Organización
    • Acreditación 
    • Comisiones de la unidad
  • Quienes somos
    • Misión y visión
    • Historia
    • Contáctenos 
    • Reglamentos normativos
    • Filosofía de las carreras
    • Directorio