chore(i8n,curriculum): processed translations (#41548)
Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
This commit is contained in:
camperbot
GitHub
@@ -9,13 +9,15 @@ dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
|
||||
|
||||
# --description--
|
||||
|
||||
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:
|
||||
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 qué contiene una imagen para incluirla en los resultados de búsqueda. Aquí hay un ejemplo:
|
||||
|
||||
`<img src="importantLogo.jpeg" alt="Company logo">`
|
||||
```html
|
||||
<img src="importantLogo.jpeg" alt="Company logo">
|
||||
```
|
||||
|
||||
Las personas con dificultades visuales dependen de lectores de pantalla para convertir el contenido web a una interfaz de audio. Por esta razón, no podrán recibir la información si solo se les presenta de manera visual. En el caso de las imágenes, los lectores de pantalla pueden acceder el atributo `alt` y leer su contenido para proporcionar información clave.
|
||||
|
||||
Un buen texto `alt` le brinda al lector una breve descripción de la imagen. Siempre deberías incluir el atributo `alt` en tus imágenes. Además, según la especificación de HTML5, esto ahora se considera obligatorio.
|
||||
Un buen texto `alt` le brinda al lector una breve descripción de la imagen. Siempre deberías incluir el atributo `alt` en tus imágenes. De acuerdo con las especificaciones de HTML5, esto ahora se considera obligatorio.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -13,7 +13,9 @@ En el último desafío, aprendiste que es obligatorio incluir un atributo `alt`
|
||||
|
||||
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="">`
|
||||
```html
|
||||
<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.
|
||||
|
||||
@@ -21,7 +23,7 @@ Las imágenes de fondo generalmente también caen bajo la etiqueta "decorativa".
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat ha programado una página esqueleto para la parte del blog de su sitio web. Está planeando agregar una ruptura visual entre sus dos artículos con una imagen decorativa de una espada samurái. Agrega un atributo `alt` a la etiqueta `img` y establezca una cadena vacía. (Ten en cuenta que la imagen `src` no enlace a un archivo real - no te preocupes de que no hay espadas que aparece en la pantalla.)
|
||||
Camper Cat ha programado una página esqueleto para la parte del blog de su sitio web. Está planeando agregar una ruptura visual entre sus dos artículos con una imagen decorativa de una espada samurái. Agrega un atributo `alt` a la etiqueta `img` y establécela a una cadena vacía. (Ten en cuenta que la imagen `src` no enlaza a un archivo real, no te preocupes que no se muestren espadas en la pantalla.)
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -15,11 +15,13 @@ HTML5 permite que este atributo se use en cualquier elemento, pero es particular
|
||||
|
||||
Aquí hay un ejemplo:
|
||||
|
||||
`<button accesskey="b">Important Button</button>`
|
||||
```html
|
||||
<button accesskey="b">Important Button</button>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
El Gato Campero quiere que los enlaces alrededor de los dos títulos de artículos de blog tengan atajos de teclado para que los usuarios de su sitio puedan navegar rápidamente a la historia completa. Agrega un atributo `accesskey` a ambos enlaces y establece el primero en `g` (para Garfield) y el segundo en `c` (para Chuck Norris).
|
||||
Camper Cat quiere que los enlaces alrededor de los dos títulos de artículos de blog tengan atajos de teclado para que los usuarios de su sitio puedan navegar rápidamente a la historia completa. Agrega un atributo `accesskey` a ambos enlaces y establece el primero en `g` (para Garfield) y el segundo en `c` (para Chuck Norris).
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -13,15 +13,17 @@ Continuando con el tema de fechas, HTML5 también introdujo el elemento `time` j
|
||||
|
||||
Aquí hay un ejemplo:
|
||||
|
||||
`<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>`
|
||||
```html
|
||||
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
¡Ya tenemos los resultados de la encuesta de Mortal Kombat de Camper Cat! Envuelva una etiqueta `time` alrededor del texto `Thursday, September 15<sup>th<sup>` y agregue un atributo `datetime` establecido en `2016-09-15`.
|
||||
¡Ya tenemos los resultados de la encuesta de Mortal Kombat de Camper Cat! Envuelve una etiqueta `time` alrededor del texto `Thursday, September 15<sup>th<sup>` y agrega un atributo `datetime` establecido en `2016-09-15`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu código debe tener un elemento `p` que incluya el texto `Thank you to everyone for responding to Master Camper Cat's survey.` e incluye un elemento `time`.
|
||||
Tu código debe tener un elemento `p` que incluya el texto `Thank you to everyone for responding to Master Camper Cat's survey.` e incluya un elemento `time`.
|
||||
|
||||
```js
|
||||
assert(timeElement.length);
|
||||
|
||||
@@ -13,13 +13,15 @@ El atributo HTML `tabindex` tiene tres funciones distintas relacionadas con el f
|
||||
|
||||
Ciertos elementos, como los vínculos y los controles de formulario, reciben automáticamente el foco del teclado cuando un usuario pestañas a través de una página. Está en el mismo orden en que los elementos vienen en la fuente del lenguaje de marcado de HTML. Esta misma funcionalidad se puede dar a otros elementos, como `div`, `span` y `p`, colocando un atributo `tabindex="0"`. Aquí hay un ejemplo:
|
||||
|
||||
`<div tabindex="0">I need keyboard focus!</div>`
|
||||
```html
|
||||
<div tabindex="0">I need keyboard focus!</div>
|
||||
```
|
||||
|
||||
**Nota:** Un valor negativo de `tabindex` (normalmente -1) indica que un elemento es enfocable, pero no es accesible por el teclado. Este método generalmente se usa para enfocar el contenido mediante programación (como cuando se activa un `div` utilizando para una ventana emergente), y esta más allá del alcance de estos desafíos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat creó una nueva encuesta para recopilar información sobre sus usuarios. Él sabe que los campos de entrada obtienen automáticamente el enfoque del teclado, pero quiere asegurarse de que los usuarios de su teclado hagan una pausa en las instrucciones mientras tabulan los elementos. Agrega un atributo `tabindex` a la etiqueta `p` y establezca su valor en `0`. Extra - el uso de `tabindex` también permite que la pseudo-clase CSS `:focus` funcione en la etiqueta `p`.
|
||||
Camper Cat creó una nueva encuesta para recopilar información sobre sus usuarios. Él sabe que los campos de entrada obtienen automáticamente el enfoque del teclado, pero quiere asegurarse de que los usuarios de su teclado hagan una pausa en las instrucciones mientras tabulan los elementos. Agrega un atributo `tabindex` a la etiqueta `p` y establece su valor en `0`. Extra: el uso de `tabindex` también permite que la pseudo-clase CSS `:focus` funcione en la etiqueta `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -17,9 +17,13 @@ Es importante tener en cuenta que cuando el orden de tabulación se establece de
|
||||
|
||||
Aquí hay un ejemplo:
|
||||
|
||||
`<div tabindex="1">I get keyboard focus, and I get it first!</div>`
|
||||
```html
|
||||
<div tabindex="1">I get keyboard focus, and I get it first!</div>
|
||||
```
|
||||
|
||||
`<div tabindex="2">I get keyboard focus, and I get it second!</div>`
|
||||
```html
|
||||
<div tabindex="2">I get keyboard focus, and I get it second!</div>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user