Acceso en el toolbar al aumento de tamaño de la fuente:

Para el cambio de tamaño de la fuente, el framework incluye 3 clases, las cuales son aplicadas al tag html del sitio al momento de activar y el cambio desde el toolbar. Se encuentran disponibles 2 niveles de aumento de tamaño, .a11y-font-1, .a11y-font-2 más el caso base representado por la clase .a11y-font-0. Junto a esto, el tamaño de la fuente base es aumentado con lo que el tamaño de todos los textos definidos en rem son escalados. Por último, los estilos desarrollados en themes/a11y-fonts aplicarán por sobre los definidos de forma normal.

Por defecto, los niveles de tamaño son 16px, 20px y 24px:

El framework kit de gobierno dispone de clases de utilidad que aplican solamente cuando se encuentra activa alguna de las clases .a11y-font. Estas utilidades facilitan la adaptación del contenido al nuevo tamaño de la fuente.

Para la adaptación de columnas, se puede utilizar la clase .a11y-font-1-col-12 para que el texto utilice una columna de 12 espacios al momento de aplicar el primer aumento de tamaño del texto.

A continuación, un ejemplo en el que puede observar su comportamiento al cambiar el tamaño de la fuente.

¡Haga la prueba subiendo el tamaño de la fuente desde el toolbar!.

Para el manejo del display de los elementos, el margen y la alineación de texto, puede utilizar las clases .a11y-font-1-d-none, .a11y-font-1-m-0, a11y-font-1-text-center respectivamente. Como podrá intuir, estas clases utilizan el prefijo .a11y-font-1-X y .a11y-font-2-X acompañados de los prefijos usuales de Bootstrap para las principales propiedades disponibles (ver clases implementadas en scss/themes/a11y-fonts).

Adicionalmente, cuando requiera aplicar cambios independiente del nivel de aumento del tamaño de la fuente podrá utilizar el prefijo .a11y-fonts. Por ejemplo, .a11y-fonts-d-none agregará la propiedad display: none tanto para .a11y-font-1 como para .a11y-font-2.

Acceso en el toolbar para el cambio al modo contraste:

Al activar el modo contraste, siguiendo el mismo mecanismo que en el aumento del tamaño de la fuente, la clase .a11y-contrast es aplicada al tag html del sitio. De esta manera, los colores son cambiados de acuerdo a lo definido en el archivo scss/themes/a11y-contrast/abstracts/_variables.scss. Adicionalmente, el framework dispone de métodos que facilitan el mapeo de los colores principales a su versión en el modo contraste (ver .../a11y-contrast/abstracts/_functions.scss).

A continuación, un ejemplo con texto dentro de un .blockquote, en modo normal y luego en modo contraste:

Cabe señalar que los colores a utilizar en el modo contraste deben seguir la recomendación mencionada en la documentación de Bootstrap ( WCAG 2.0 color contrast ratio of 4.5:1) respecto a la razón de contraste de colores.

Para los usuario que acceden a contenido web a través de herramientas auditivas, es necesario adquirir un servicio que permita disponibilizar el sitio web de esta forma.

Puede utilizar, por ejemplo, un servicio como el que ofrece Read Speaker y añadir un acceso en el toolbar de accesibilidad, utilizando la clase disponible en el framework rsbtn-gobcl-skin.

El toolbar disponible en esta documentación está basado en un plugin de jQuery que puede configurar vía javascript o desde data-attributes.

Vía javascript #

Por ejemplo, vía javascript, puede sobreescribir los tamaños de la fuente en los distintos niveles. Además, podrá añadir un callback para escuchar el evento de cambio del tamaño de la fuente y aplicar las acciones deseadas:

Vía data-attributes #

A través de data-attributes también puede configurar los tamaños de la fuente en los distintos niveles disponibles:

Edición del skin #

El skin utilizado rsbtn-gobcl-skin es añadido a través de Javascript. En caso de que se requiera alguna personalización, puede acceder al archivo src/js/plugins/Toolbar.js y editar lo siguiente: