Hay muchas guías en línea que explican cómo escribir mayúsculas en HTML y CSS, por ejemplo, https://css-tricks.com/snippets/css/drop-caps/ (Por lo general, requieren un poco de cuidado para no romper el lector de pantalla). accesibilidad, por ejemplo, dividir la palabra "Carol" en "C arol".)
Pero todas las guías en línea que encontré discuten cómo diseñar la :first-letter , por ejemplo, cambiar su fuente, flotar a la izquierda, etc.
Mi diseñador me ha pedido que cree una letra capitular que sea una imagen, no solo un tamaño/fuente diferente.
Mi primer intento fue este:
<p><img src="c.jpg" alt="C" style="float: left;">arolPero los lectores de pantalla lo leen como dos palabras, "C arol", en lugar de una palabra, "Carol".
¿Cuál es la mejor manera de manejar esto?
Podría usar el hecho de que un pseudoelemento de primera letra puede tener una imagen de fondo y establecer la primera letra en transparente para que no se vea, pero un lector de pantalla no debería notarlo ya que el HTML básico permanece intacto.
p.dropcapimg::first-letter { background-image: url(https://i.stack.imgur.com/WecKn.png); background-size: contain; background-repeat: no-repeat; background-center: center center; float: left; font-size: 6rem; line-height: 0.65; color: transparent; margin-right: -0.15em; } <p class="dropcapimg">Carol a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now </p>Obviamente, tendrá que jugar con los tamaños dependiendo de la imagen real.
Mi enfoque fue insertar el <img> con aria-hidden=true , para que los lectores de pantalla lo ignoraran, y diseñar la primera letra con visibility: hidden , para que se lea visualmente como una sola palabra.
p img { float:left; } p::first-letter { visibility: hidden; } <p><img src="https://freesvg.org/img/ryanlerch-Decorative-Letter-Set-4.png" height="50" width="50" aria-hidden="true">Carol</p>En cualquier caso, no podrá unir la "C" presente en alt y el siguiente "arol" para que el lector de pantalla lo considere como una sola palabra. Esto es simplemente imposible. Puede usar aria-label, pero dado que no se encuentra en un elemento interactivo, es posible que no funcione en todas partes y debe tener cuidado de no reemplazar todo el párrafo.
Una posibilidad podría ser una combinación de texto visualmente oculto y aria-oculto, como esta:
<p> <span aria-hidden="true"><img src="C.jpg"/>arol</span> <span class="sr_only">Carol</span> normal text following </p>Donde .sr_only es una clase especial que envía el texto fuera de la pantalla, de modo que usted no lo verá, pero los lectores de pantalla sí. Bootstrap propone una clase de este tipo, por ejemplo.
Tenga en cuenta que usar una imagen como decoración de la primera letra no solo es una mala idea para los usuarios de lectores de pantalla como lo ha notado, sino también para las personas con problemas de visión, ya que les impide hacer zoom correctamente (debido a los artefactos de cambio de tamaño) o adaptar el texto. colores a sus necesidades. Probablemente también sea una mala idea para el SEO, ya que el nombre "Carol" podría no estar indexado tan bien como si estuviera escrito en texto sin formato. Para conexiones restringidas, una imagen también es probablemente más grande que una fuente que tiene grandes posibilidades de ser reutilizada en muchos sitios (y, por lo tanto, ya descargada). Bueno, de hecho solo hay desventajas.