chore(i18n,learn): processed translations (#41454)
Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
This commit is contained in:
camperbot
GitHub
@ -9,7 +9,7 @@ dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
|
||||
|
||||
# --description--
|
||||
|
||||
Es probable que en otros desafíos hayas visto un atributo `alt` en una etiqueta `img`. El texto `alt` describe el contenido de la imagen y proporciona una descripción alternativa en formato de texto. Esto ayuda en casos en que la imagen no se carga o que el usuario no pueda verla. También es aprovechado por los motores de búsqueda para interpretar el contenido de la imagen e incluirlo en los resultados de búsqueda. Aquí hay un ejemplo:
|
||||
Probablemente hayas visto un atributo `alt` en una etiqueta `img` en otros desafíos. El atributo`alt` describe el contenido de la imagen y proporciona un texto alternativo. Un atributo `alt` ayuda en los casos en que la imagen no se carga o un usuario no pueda verla. Los motores de búsqueda también lo utilizan para comprender que contiene una imagen e incluirla en los resultados de búsqueda. Aquí hay un ejemplo:
|
||||
|
||||
`<img src="importantLogo.jpeg" alt="Company logo">`
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: give-links-meaning-by-using-descriptive-link-text
|
||||
|
||||
# --description--
|
||||
|
||||
Los lectores de pantalla tienen diferentes opciones según el tipo de contenido que lea el dispositivo del usuario. Esto incluye saltar a (o pasar por alto) elementos importantes, saltar al contenido principal u obtener un resumen de la página a partir de los títulos. Otra opción es escuchar la narración de los enlaces disponibles en una página.
|
||||
Los lectores de pantalla tienen varias opciones para qué tipo de contenido lee su dispositivo. Estas opciones incluyen saltar a elementos de referencia (o sobre) o saltar al contenido principal, u obtener un resumen de la página en los títulos. Otra opción es escuchar la narración de los enlaces disponibles en una página.
|
||||
|
||||
Los lectores de pantalla hacen esto leyendo el texto del enlace, o lo que haya entre las etiquetas anchor (`a`). Tener una lista de enlaces que solo digan "clic aquí" o "leer más" no ayuda. En lugar de eso, debes utilizar un texto breve pero descriptivo dentro de las etiquetas `a` para proporcionar más significado a estos usuarios.
|
||||
Los lectores de pantalla hacen esto leyendo el texto del enlace, o lo que haya entre las etiquetas anchor (`a`). Tener una lista de enlaces que solo digan "clic aquí" o "leer más" no ayuda. En su lugar, utilice texto breve pero descriptivo dentro de las etiquetas `a` para proporcionar más significado a estos usuarios.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: improve-chart-accessibility-with-the-figure-element
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 introdujo el elemento `figure` junto con el elemento relacionado `figcaption`. Cuando se usan juntos, estos elementos envuelven una representación visual (como puede ser una imagen, diagrama o gráfico) junto con su leyenda. Esto representa una mejora doble de accesibilidad, porque agrupa contenido semánticamente relacionado y además proporciona un texto alternativo que explica el contenido visual del elemento `figure`.
|
||||
HTML5 introdujo el elemento `figure` y el `figcaption` relacionado. Cuando se usan juntos, estos elementos envuelven una representación visual (como puede ser una imagen, diagrama o gráfico) junto con su leyenda. Envolviendo estos elementos da un impulso de accesibilidad doble al agrupar semánticamente el contenido relacionado y proporciona una alternativa de texto explicando la figura `figure`.
|
||||
|
||||
En visualizaciones de datos como gráficos, la leyenda o "figcaption" puede ser utilizada para resumir en formato de texto las tendencias o conclusiones, para beneficio de usuarios con discapacidades visuales. Otro de los desafíos se ocupa cómo mover fuera de la pantalla una versión en formato de tabla con los datos del gráfico (usando CSS) para ayudar a usuarios de lectores de pantalla.
|
||||
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: improve-form-field-accessibility-with-the-label-element
|
||||
|
||||
# --description--
|
||||
|
||||
La mejora de la accesibilidad con el marcado HTML semántico se aplica tanto al uso de nombres de etiquetas apropiados como de atributos. Los próximos desafíos cubren algunos escenarios importantes utilizando atributos en formularios.
|
||||
La mejora de la accesibilidad con el marcado semántico HTML se aplica al uso de nombres de etiquetas y atributos apropiados. Los próximos desafíos cubren algunos escenarios importantes utilizando atributos en formularios.
|
||||
|
||||
La etiqueta `label` contiene el texto para un elemento específico de control de formulario, por lo general el nombre o etiqueta para una elección. Esto vincula el significado al elemento y hace que el formulario se lea mejor. El atributo `for` en una etiqueta `label` asocia de manera explícita dicho `label` con el control de formulario utilizado por los lectores de pantalla.
|
||||
|
||||
Ya aprendiste sobre botones de radio y sus etiquetas en una lección de la sección de HTML básico. En esa lección, colocamos el elemento de entrada del botón de radio dentro de la etiqueta `label` junto con la etiqueta del texto para hacer que el texto se pueda cliquear. También, se puede utilizar el atributo `for` como se explicó en esta lección.
|
||||
Ya aprendiste sobre botones de radio y sus etiquetas en una lección de la sección de HTML básico. En esa lección, colocamos el elemento de entrada del botón de radio dentro de la etiqueta `label` junto con la etiqueta del texto para hacer que el texto se pueda cliquear. Otra forma de lograr esto es usando el atributo `for`, como se explica en esta lección.
|
||||
|
||||
El valor del atributo `for` debe ser igual al valor del atributo `id` del formulario de control. Por ejemplo:
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: improve-readability-with-high-contrast-text
|
||||
|
||||
# --description--
|
||||
|
||||
El bajo contraste entre los colores de primer plano y de fondo puede dificultar la lectura del texto. El contraste suficiente mejora la legibilidad de tu contenido, pero ¿qué significa exactamente "suficiente"?
|
||||
El bajo contraste entre los colores de primer plano y de fondo puede dificultar la lectura del texto. Suficiente contraste mejora la legibilidad de tu contenido, pero ¿qué significa exactamente "suficiente"?
|
||||
|
||||
Las Directrices de Accesibilidad al Contenido Web (WCAG) recomiendan al menos una relación de contraste de 4.5 a 1 para el texto normal. La relación se calcula comparando los valores de luminancia relativa de dos colores. Esto equilibra entre 1:1 para el mismo color, o sin contraste, y 21:1 para el blanco contra el negro, el contraste más fuerte. Hay muchas herramientas de comprobación de contraste disponibles en línea que calculan esta relación por ti.
|
||||
Las Directrices de Accesibilidad al Contenido Web (WCAG) recomiendan al menos una relación de contraste de 4.5 a 1 para el texto normal. La relación se calcula comparando los valores de luminancia relativa de dos colores. Esto varía de 1:1 para el mismo color, o ningún contraste, a 21:1 para blanco contra negro, el contraste más sustancial. Hay muchas herramientas de comprobación de contraste disponibles en línea que calculan esta relación por ti.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: jump-straight-to-the-content-using-the-main-element
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 introdujo una serie de nuevos elementos que ofrecen a los desarrolladores más opciones al tiempo que incorporan características de accesibilidad. Estas etiquetas incluyen `main`, `header`, `footer`, `nav`, `article`, y `section`, entre otros.
|
||||
HTML5 introdujo varios elementos nuevos que dan a los desarrolladores más opciones y al mismo tiempo incorporan características de accesibilidad. Estas etiquetas incluyen `main`, `header`, `footer`, `nav`, `article`, y `section`, entre otros.
|
||||
|
||||
De forma predeterminada, un navegador muestra estos elementos de forma similar al humilde `div`. Sin embargo, usarlos cuando sea apropiado le da un significado adicional a tu lenguaje de marcado. El nombre de la etiqueta solo puede indicar el tipo de información que contiene, lo que agrega significado semántico a ese contenido. Las tecnologías de asistencia pueden acceder a esta información para proporcionar mejores opciones de resumen de páginas o de navegación a sus usuarios.
|
||||
|
||||
El elemento `main` se usa para envolver (lo adivinaste) el contenido principal, y solo debe haber uno por página. Está destinado a rodear la información que está relacionada con el tema central de su página. No está destinado a incluir elementos que se repiten en todas las páginas, como enlaces de navegación o banners.
|
||||
El elemento `main` se usa para envolver (lo adivinaste) el contenido principal, y solo debe haber uno por página. Su propósito es rodear la información relacionada con el tema central de tu página. No está destinado a incluir elementos que se repiten en todas las páginas, como enlaces de navegación o banners.
|
||||
|
||||
La etiqueta `main` también tiene una característica de referencia insertada que la tecnología de asistencia puede usar para navegar rápidamente al contenido principal. Si alguna vez has visto un enlace de "Saltar al contenido principal" en la parte superior de la página, el uso de la etiqueta `main` proporciona automáticamente esa funcionalidad a los dispositivos de asistencia.
|
||||
La etiqueta `main` también tiene una característica de referencia incrustada que la tecnología de asistencia puede utilizar para navegar al contenido principal rápidamente. Si alguna vez has visto un enlace de "Saltar al contenido principal" en la parte superior de la página, el uso de la etiqueta `main` proporciona automáticamente esa funcionalidad a los dispositivos de asistencia.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,15 +9,15 @@ dashedName: know-when-alt-text-should-be-left-blank
|
||||
|
||||
# --description--
|
||||
|
||||
En el último desafío, aprendiste que es obligatorio incluir un atributo `alt` al usar etiquetas `img`. Sin embargo, a veces las imágenes se agrupan con un título que ya las describe, o se usan solo para decoración. En estos casos `alt` el texto puede parecer redundante o innecesario.
|
||||
En el último desafío, aprendiste que es obligatorio incluir un atributo `alt` al usar etiquetas `img`. Sin embargo, a veces las imágenes se agrupan con un título que ya las describe, o se usan solo para decoración. En estos casos el texto `alt` puede parecer redundante o innecesario.
|
||||
|
||||
En situaciones en las que una ya está explicada con contenido de texto, o no agrega significado a una página, el `img` todavía necesita un atributo `alt`, pero se puede establecer en una cadena vacía. Aquí hay un ejemplo:
|
||||
Cuando una imagen ya se explica con el contenido de texto o no agrega significado a una página, `img` todavía necesita un atributo `alt`, pero se puede establecer en una cadena vacía. Aquí hay un ejemplo:
|
||||
|
||||
`<img src="visualDecoration.jpeg" alt="">`
|
||||
|
||||
Las imágenes de fondo generalmente también caen bajo la etiqueta "decorativa". Sin embargo, normalmente se aplican con reglas CSS y, por lo tanto, no forman parte del proceso de lectores de pantalla del lenguaje de marcado.
|
||||
|
||||
**Nota:** Para imágenes con subtítulos, es posible que desees incluir texto `alt`, ya que ayuda a los motores de búsqueda a catalogar el contenido de la imagen.
|
||||
**Nota:** Para imágenes con un título, es posible que aún desees incluir texto `alt` ya que ayuda a los motores de búsqueda a catalogar el contenido de la imagen.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
|
||||
|
||||
# --description--
|
||||
|
||||
¿Has notado que todos los desafíos de accesibilidad aplicados hasta ahora no han usado ningún CSS? Esto es para mostrar la importancia de un esquema de documento lógico, y el uso de etiquetas semánticamente significativas alrededor de tu contenido antes de introducir el aspecto de diseño visual.
|
||||
¿Has notado que todos los desafíos de accesibilidad aplicados hasta ahora no han usado ningún CSS? Esto muestra la importancia de utilizar un esquema de documento lógico y etiquetas semánticamente significativas alrededor de su contenido antes de introducir el aspecto de diseño visual.
|
||||
|
||||
Sin embargo, la magia de CSS también puede mejorar la accesibilidad en tu página cuando deseas ocultar visualmente contenido destinado solo para lectores de pantalla. Esto sucede cuando la información está en un formato visual (como un gráfico), pero los usuarios del lector de pantalla necesitan una presentación alternativa (como una tabla) para acceder a los datos. CSS se utiliza para colocar los elementos exclusivos de lector de pantalla fuera del área visual de la ventana del navegador.
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: make-links-navigable-with-html-access-keys
|
||||
|
||||
# --description--
|
||||
|
||||
HTML ofrece el atributo `accesskey` para especificar una tecla de acceso directo para activar o enfocar un elemento. Esto puede hacer que la navegación sea más eficiente para los usuarios de solo usan el teclado.
|
||||
HTML ofrece el atributo `accesskey` para especificar una tecla de acceso directo para activar o enfocar un elemento. Añadiendo un atributo `accesskey` puede hacer que la navegación sea más eficiente para los usuarios que solo utilizan teclado.
|
||||
|
||||
HTML5 permite que este atributo se use en cualquier elemento, pero es particularmente útil cuando se usa con elementos interactivos. Esto incluye enlaces, botones y controles de formulario.
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ El siguiente elemento HTML5 que agrega significado semántico y mejora la accesi
|
||||
|
||||
`header` comparte la función landmark integrada que viste con `main`, lo que permite a las tecnologías de asistencia navegar rápidamente a ese contenido.
|
||||
|
||||
**Nota:** El `header` está diseñado para usarse dentro de la etiqueta `body` de tu documento HTML. Esto es diferente al elemento `head`, que contiene el título de la página, metainformación, etc.
|
||||
**Nota:** El `header` está diseñado para usarse dentro de la etiqueta `body` de tu documento HTML. Es diferente al elemento `head`, que contiene el título de la página, la meta información, etc.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: standardize-times-with-the-html5-datetime-attribute
|
||||
|
||||
# --description--
|
||||
|
||||
Continuando con el tema de fechas, HTML5 también introdujo el elemento `time` junto con un atributo `datetime` para estandarizar las horas. Este es un elemento inline que puede ajustar una fecha u hora en una página. Un formato válido de esa fecha se mantiene mediante el atributo `datetime`. Este es el valor al que acceden los dispositivos de asistencia. Ayuda a evitar confusiones al indicar una versión estandarizada de una hora, incluso si está escrito de manera informal o coloquial en el texto.
|
||||
Continuando con el tema de fechas, HTML5 también introdujo el elemento `time` junto con un atributo `datetime` para estandarizar las horas. El atributo `datetime` es un elemento en línea que puede envolver una fecha o hora en una página. Un atributo `datetime` contiene un formato válido para esa fecha. Este es el valor al que acceden los dispositivos de asistencia. Ayuda a evitar la confusión al declarar una versión estandarizada de un tiempo, incluso si está escrita informal o coloquialmente en el texto.
|
||||
|
||||
Aquí hay un ejemplo:
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: wrap-content-in-the-article-element
|
||||
|
||||
# --description--
|
||||
|
||||
`article` es otro de los nuevos elementos HTML5 que agrega significado semántico a tu lenguaje de marcado. `article` es un elemento de sección, y se utiliza para envolver contenido independiente y autónomo. La etiqueta funciona bien con entradas de blog, publicaciones en el foro o artículos de noticias.
|
||||
`article` es otro de los nuevos elementos de HTML5 que añaden significado semántico a su marcado. `article` es un elemento seccionador y se utiliza para envolver contenido independiente y autónomo. La etiqueta funciona bien con entradas de blog, publicaciones en el foro o artículos de noticias.
|
||||
|
||||
Determinar si el contenido puede ser independiente suele ser una cuestión de criterio, pero hay un par de pruebas simples que puedes usar. Pregúntate, si elimino todo el contexto circundante, ¿ese contenido aún tendría sentido? Del mismo modo para el texto, ¿el contenido se mantendría si estuviera en una fuente RSS?
|
||||
Determinar si el contenido puede ser independiente suele ser una cuestión de criterio, pero puedes hacer un par de pruebas simples. Pregúntate, si elimino todo el contexto circundante, ¿ese contenido aún tendría sentido? Del mismo modo, para el texto, ¿se mantendría el contenido si estuviera en una fuente RSS?
|
||||
|
||||
Recuerda que las personas que usan tecnologías de asistencia dependen de un lenguaje de marcado organizado y semánticamente significativo para comprender mejor su trabajo.
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
|
||||
|
||||
El siguiente tema sobre formularios cubre la accesibilidad de los botones tipo radio. A cada opción se le da una `label` (etiqueta) con un atributo `for` vinculado al `id` del elemento correspondiente como se cubrió en el último desafío. Dado que los botones de radio a menudo vienen en un grupo donde el usuario debe elegir uno, hay una manera de mostrar semánticamente que las opciones son parte de un conjunto.
|
||||
|
||||
La etiqueta `fieldset` rodea toda la agrupación de botones de radio para lograr esto. A menudo utiliza una etiqueta `legend` para proporcionar una descripción para la agrupación, la cual es leída por los lectores de pantalla para cada elección en el elemento `fieldset`.
|
||||
La etiqueta `fieldset` rodea toda la agrupación de botones de radio para lograr esto. A menudo utiliza una etiqueta de `legend` para proporcionar una descripción para la agrupación, que lectores de pantalla leen por cada opción en el elemento `fieldset`.
|
||||
|
||||
El contenedor `fieldset` y la etiqueta `legend` no son necesarias cuando las opciones se explican por sí mismas, como selección de género. Usar `label` con el atributo `for` para cada botón de radio es suficiente.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user