Cómo agregar un redimensionador de fuentes en WordPress para accesibilidad

Hemos aprendido que los mejores sitios web son aquellos que se adaptan a sus usuarios, no al revés.

Una de las formas más efectivas de hacerlo es agregando un redimensionador de fuentes que permite a los visitantes ajustar el tamaño del texto a su nivel de comodidad.

La accesibilidad de las fuentes beneficia a todos. Ayuda a los usuarios con discapacidades visuales, así como a las personas que leen en dispositivos pequeños o con poca luz.

Cuando los visitantes pueden personalizar fácilmente el tamaño del texto, permanecen más tiempo y leen más contenido. También es más probable que interactúen con su sitio web.

En esta guía, le mostraremos exactamente cómo agregar un redimensionador de fuentes a su sitio de WordPress.

¿Por qué agregar texto redimensionable a su sitio web? 🤔

Si el tamaño de fuente es demasiado pequeño en tu sitio web, entonces la gente tendrá dificultades para leer tus artículos y eventualmente abandonará tu sitio.

Una forma fácil de mejorar la legibilidad es ofrecer a los visitantes la opción de redimensionar el texto principal de su sitio web. Esto permite a los usuarios ajustar el tamaño del texto a su gusto.

Quizás te estés preguntando sobre la función de zoom integrada del navegador (se activa con las teclas ‘CTRL y +’). Si bien esto funciona, aumenta el tamaño de cada elemento de la página, incluidas las imágenes y los menús de navegación.

Un redimensionador de fuentes es una mejor opción. Permite a los usuarios aumentar solo el tamaño del texto mientras mantiene el resto del diseño intacto.

Dicho esto, veamos cómo puedes agregar fácilmente texto redimensionable para tus visitantes en WordPress. Puedes usar los enlaces rápidos a continuación para saltar a un método específico:

• Método 1: Usar el plugin de accesibilidad de WordPress (Recomendado)
• Method 2: Add WordPress Font Resizer With Plugin (Classic Themes Only)
• Tutorial en video
• Preguntas frecuentes sobre fuentes de WordPress
• Haz que tu sitio de WordPress sea aún más fácil de usar con estos consejos

Método 1: Usar el plugin de accesibilidad de WordPress (Recomendado)

La forma más fácil de permitir que los usuarios redimensionen el texto es usando el plugin WP Accessibility. Agrega una barra de herramientas útil a tu sitio que funciona con cualquier tema.

Primero, necesitas instalar y activar el plugin WP Accessibility en tu sitio web. Puedes ver nuestra guía sobre cómo instalar un plugin de WordPress si necesitas ayuda.

Después de la activación, ve a la página WP Accessibility en tu panel de administración de WordPress para configurar los ajustes del plugin.

Desplázate hacia abajo hasta la sección ‘Barra de herramientas de accesibilidad’. Aquí, necesitas marcar la casilla para ‘Habilitar barra de herramientas de accesibilidad’.

Asegúrate de marcar también la opción ‘Tamaño de fuente’. Esto crea los botones reales para redimensionar en la barra de herramientas.

También puedes habilitar otras funciones como ‘Contraste’ y ‘Escala de grises’ si deseas ofrecer más opciones de accesibilidad.

A continuación, busca la configuración del tamaño de fuente. Recomendamos habilitar la opción ‘Usar hoja de estilo alternativa para redimensionar fuentes’.

Esto asegura que el plugin use una hoja de estilo separada para escalar tu texto. Obliga a que el texto sea más grande y legible sin romper el diseño de tu sitio.

Una vez que hayas terminado, haz clic en el botón ‘Actualizar configuración de la barra de herramientas’ para guardar tus cambios.

Ahora puedes visitar tu sitio web para ver la barra de herramientas en acción. Generalmente aparecerá en un lado de la pantalla.

Para más información, puedes leer nuestra guía sobre cómo mejorar la accesibilidad de tu sitio de WordPress.

Método 2: Agregar redimensionador de fuentes de WordPress con un plugin (solo temas clásicos)

Si estás utilizando un tema clásico de WordPress, puedes agregar un widget para redimensionar fuentes a tu barra lateral usando el plugin Accessibility Widget.

Primero, instala y activa el plugin Accessibility Widget en tu sitio web. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Después de la activación, ve a Apariencia » Widgets en tu panel de control. Busca el bloque ‘Accessibility Widget’ y agrégalo a tu área de barra lateral.

Una vez agregado, puedes personalizar la configuración del widget. Puedes ingresar un título como ‘Redimensionar texto’ para que los visitantes sepan qué hace la herramienta.

A continuación, debes seleccionar qué partes de tu sitio web se redimensionarán. Las opciones predeterminadas (cuerpo, párrafo, elementos de lista y celdas de tabla) funcionan bien para la mayoría de los sitios.

El plugin permite hasta cuatro opciones de redimensionamiento: 90%, 100%, 110% y 120%. Puedes ajustar estos números en el campo ‘Establecer a estos tamaños’ si deseas opciones más grandes o más pequeñas.

Finalmente, mira la configuración de ‘Texto del controlador’. Esta es simplemente la etiqueta en la que harán clic tus visitantes (por ejemplo, ‘A+’, ‘A-‘). Puedes dejar el texto predeterminado o cambiarlo por otra cosa.

Haz clic en ‘Actualizar’ para guardar la configuración de tu widget. Si visitas tu sitio en vivo, verás el widget en tu barra lateral.

Opcional: Personaliza el estilo del widget con CSS

Si los enlaces de texto se ven demasiado simples, puedes darles estilo para que parezcan botones usando CSS.

Ve a Apariencia » Personalizar y haz clic en la pestaña ‘CSS adicional’.

Puedes pegar el siguiente código para agregar un borde y texto en negrita a los enlaces del widget:

.widget_accesstxt a {
border: 2px solid #000;
padding: 2px;
font-weight: bold;
}

Nota: Este código se dirige a la clase CSS específica utilizada por el plugin Accessibility Widget. No funcionará para otras herramientas.

Para más detalles, por favor consulta nuestra guía sobre cómo agregar CSS personalizado en WordPress.

Una vez que estés satisfecho con el aspecto, haz clic en ‘Publicar’ para guardar tus cambios.

Tutorial en video

Si no quieres leer las instrucciones, puedes ver nuestro videotutorial:

Preguntas frecuentes sobre fuentes de WordPress

Aquí hay algunas preguntas que nuestros lectores han hecho sobre las fuentes en WordPress:

¿Cómo redimensionar fuentes en WordPress?

Puedes redimensionar las fuentes usando la configuración de ‘Tipografía’ en la barra lateral del editor de bloques. Simplemente haz clic en un bloque de texto, mira el panel derecho y ajusta las opciones de tamaño (S, M, L, XL). Para cambios en todo el sitio, puedes usar Estilos Globales o el Personalizador del Tema, dependiendo de tu tema.

¿Cómo agregar una fuente personalizada en WordPress?

La forma más fácil de agregar una fuente personalizada es usando un plugin como Custom Fonts. Te permite subir archivos de fuentes o conectarte a Google Fonts sin escribir código. También puedes agregar fuentes manualmente usando CSS si te sientes cómodo con el código.

¿Por qué no puedo cambiar el tamaño de la fuente en WordPress?

Si no puedes ver la opción de tamaño de fuente, es probable que esté oculta en el menú de configuración del bloque. En la barra lateral derecha, haz clic en el menú de tres puntos junto a ‘Tipografía’ para revelar la lista completa de controles de fuente.

¿Cómo cambio el color de la fuente en WordPress?

Puedes cambiar el color de la fuente en la barra lateral de configuración del bloque. Selecciona el texto que deseas cambiar, busca la sección ‘Color’ a la derecha y haz clic en ‘Texto’ para elegir un nuevo color de la paleta.

Para obtener ayuda, puedes ver nuestro tutorial sobre cómo cambiar el color del texto en WordPress.

Haz que tu sitio de WordPress sea aún más fácil de usar con estos consejos

¿Quieres hacer tu sitio más fácil de usar y que se vea genial? Consulta estas guías útiles:

• Cómo agregar navegación por teclado con teclas de flecha en WordPress – Facilita que las personas se muevan por tu sitio.
• Cómo personalizar los colores en tu sitio web de WordPress – Elige los colores adecuados para que tu sitio se vea bien y sea fácil de leer.
• Cómo agregar una animación de precarga a WordPress (paso a paso) – Agrega una pantalla de carga genial a tu sitio.
• Cómo agregar fácilmente el modo oscuro a tu sitio web de WordPress – Permite a los usuarios cambiar a un tema más oscuro si lo prefieren.
• Formas de crear un sitio web de WordPress compatible con dispositivos móviles – Asegúrate de que tu sitio funcione bien en teléfonos y tabletas.
• Cómo obtener comentarios sobre el diseño de tu sitio web en WordPress (paso a paso) – Aprende a preguntar a las personas qué piensan sobre el diseño de tu sitio.
• Cómo resaltar texto en WordPress (Guía para principiantes) – Aprende a hacer que las palabras importantes destaquen en tus páginas.

Esperamos que este artículo te haya ayudado a agregar texto redimensionable a tu sitio de WordPress. También puedes consultar nuestras selecciones expertas de los mejores constructores de páginas de arrastrar y soltar para WordPress y nuestra guía completa sobre actualizaciones de temas de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.