3 encabezado institucional - govimentumcms/govimentum_semilla GitHub Wiki

Un encabezado institucional para ubicar en un lugar visible el nombre de la Entidad, con el logo respectivo (en el caso que aplique), así mismo, ubicar un buscador, el mapa del sitio y los botones para acceder a las redes sociales de la Entidad.

1. El encabezado institucional a nivel de información debe cumplir con los siguientes requisitos:

  • Para el caso de las cabezas de sector
  • Escudo de Colombia alineado a la derecha, con la inscripción República de Colombia en la parte inferior del mismo.

  • Escudo de Bogotá y la marca o logo del plan de gobierno, debe estar alineado a la izquierda a la misma altura del escudo de Colombia.

  • El nombre de la cabeza de Sector, el cual se debe alinear centrado, siguiendo un lineamiento de estilo (Primera letra de cada palabra con mayúscula y las demás en minúscula).

  • Para el caso de entidades que dependen de la cabeza de sector
  • Logo de la Entidad, debe estar alineado a la izquierda. Adicionalmente debe de enlazar al home o página de inicio.

  • Escudo de Bogotá y la marca o logo del plan de gobierno, debe estar alineado a la derecha a la misma altura de la entidad.

  • El nombre de la entidad, se debe alinear centrado, siguiendo un lineamiento de estilo (primera letra de cada palabra con mayúscula y las demás en minúscula).

  • En el caso de la cabeza de sector como de las entidades, aplican los siguientes requisitos de información:
  • Botones para acceder a las redes sociales de la cabeza de sector o de la entidad (Facebook, Twitter, Google+, Instagram, rss). Se debe ubicar en una posición visible fácil de encontrar.

  • Un buscador que permita ingresar un criterio para realizar una búsqueda en el contenido de todas las secciones del Portal Web. Su ubicación debe ser en la parte superior derecha. Como resultado de la búsqueda se obtendrá un listado con los enlaces a la información que coincide con la consulta realizada. Así mismo, en la parte superior al resultado de la búsqueda se visualiza opciones para búsqueda avanzada que permitan filtran los contenidos del portal web por una palabra, frase y/o por tipo de contenido (noticias, eventos, institucional).

  • Mapa del sitio que permita acceder como mínimo a todas las secciones y subsecciones del portal web.

  • La barra de menú institucional, la cual como mínimo debe contener:

  • Home / Inicio

  • Transparencia, información que corresponde a la Entidad (según la Ley 1712 de 2014 - Decreto 0103 de 2015 - articulo 4) (misión, visión, funcionales, organigrama, directorio de funcionarios, normatividad y presupuesto)

  • Atención al ciudadano

  • La barra de menú será administrable y debe permitir que cada ítem tenga un tooltip y su respectiva etiqueta para facilitar la lectura del software empleado por las personas con deficiencia visual.

2. Toda la información contenida en el encabezado institucional debe poder ser administrable.

3. El encabezado institucional debe ser responsivo.

Accesibilidad Web

1. Factor perceptible:

  • Característica Alternativas textuales
  • Proporciona un medio de ignorar la imágenes correspondientes al diseño del sitio
  • Usa listas reales o las simula de manera correcta
  • Proporciona un texto alternativo para las imágenes de contenido
  • Proporciona un nombre que describe el propósito de los campos de entrada de datos
  • Buttons
  • Image buttons
  • Característica Adaptable
  • Relación entre: Información, Estructura, Comportamiento

DOCTYPE

  • Cuando la secuencia en que se presenta el contenido afecta su significado, se debe determinar por software la secuencia correcta de lectura.

  • Proporciona un mapa del sitio, por lo menos en modo textual (Información y relación).

  • Sigue estándares de diseño que permiten la ubicación intuitiva del contenido.

  • Proporciona otros medios visuales diferentes al color para transmitir la información ya se negrilla subrayado y otro. Uso de etiquetas: strong, em, ul

  • La presentación visual del texto e imágenes del texto proporcionan, una relación de contraste 3:5:1. Pruebas con Contrast Analyser 2,2

  • Todo el texto se puede ajustar hasta un 200% a excepción de subtítulos y las imágenes de texto. Control de Modificacion tamaño de fuente

  • Presenta contenido en imágenes de texto que puede ser reemplazado por texto para transmitir información. Utilización de CSS, reemplazando el fondo del texto o utilizando el atributo “ALT”

2. Factor operable:

  • Característica accesible por teclado
  • El foco del teclado debe poder moverse y salirse en cualquier punto de cualquier componente. Para cumplir con este conjunto de requisitos es necesario usar el atributo tabindex o el atributo accesskey en HTML, para poder salir del foco e ir rápidamente al siguiente elemento o localizar rápidamente un elemento definido. Cada elemento debe tener por lo menos uno de los 2 atributos.
  • Característica navegable
  • La pagina web debe tener un titulo que describa su tema o propósito. Título Descriptivo

  • Los componentes que pueden recibir el foco lo deben hacer en un orden que preserve su significado y operabilidad. Tabindex - ordenado

  • Los encabezados y etiquetas deben describir el tema o propósito atributo title=" "

  • El indicador del foco del teclado debe ser visible a:focus {color:blue;background: yellow}

3. Factor comprensible:

  • Característica legible
  • Proporciona detección por software del idioma en cada página web html lang="es"
  • Característica predecible
  • Cualquier componente de la página al recibir el foco no cambia el contenido de la página. Comportamiento del foco

  • El ingreso de información (formularios) no cambia el contenido de la página a menos que se advierta al usuario del cambio. Alertas

  • Navegación entre múltiples páginas aparecen en el mismo orden y posición. Menu Visible en todos las paginas del grupo

  • Los componentes que tienen la misma función en diferentes páginas deben identificarse de manera coherente. atributo title=""

  • Característica: Entrada de datos asistida
  • Presenta un texto de error en caso de entradas de información obligatoria no ingresada y/o que no cumple formatos o valores requeridos. role="alert"

  • Presenta etiquetas de texto instructivas en campos de ingreso de información por parte del usuario. placeholder=""

  • Permite al menos una de las siguientes acciones en caso de envío de información por parte del usuario para evitar errores: Reversión, Revisión y/o Confirmación antes de finalizar el envío. Confirmación de envío de datos.

4. Factor Robusto:

  • Característica compatible
  • En los contenidos implementados, los elementos están anidados con apertura y cierre de todas las etiquetas

  • En los contenidos implementados, los elementos no contienen atributos duplicados

  • En los contenidos implementados, los elementos no tienen ID repetidos Los contenidos implementados están empleados de acuerdo a su especificación (HTML)

  • Los componentes de la interfaz de usuario, el nombre y la función deben estar determinados por software, ademas Los estados, propiedades y valores que puedan ser asignados por el usuario deben ser especificados por software

⚠️ **GitHub.com Fallback** ⚠️