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--
|
||||
|
||||
在其他挑战里你应该已经见到过 `img` 标签的 `alt` 属性了。 `alt` 属性中的文本作为备用文字来描述图片内容， 这可以帮助用户在图片加载失败或者图片不可见的情况下理解图片内容， 也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。 例如：
|
||||
在其他挑战里你应该已经见到过 `img` 标签的 `alt` 属性了。 `alt` 属性中的文本来描述图片内容，作为备用文字。 `alt` 属性可以帮助用户在图片加载失败或者不可见的情况下理解图片内容， 搜索引擎也通过它来理解图片内容，并将其加入到搜索结果中。 例如：
|
||||
|
||||
`<img src="importantLogo.jpeg" alt="Company logo">`
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: give-links-meaning-by-using-descriptive-link-text
|
||||
|
||||
屏幕阅读器用户可以选择其设备读取的内容的类型， 包括表示“跳转到”（或“跳过”）的元素，跳转到主要内容，或者从标题中获取页面摘要。 用户还可以选择只听取页面中的超链接内容。
|
||||
|
||||
屏幕阅读器通过阅读链接文本（即 `a` 标签的内容文本）来完成这个操作。 如果我们只在链接中写上 "click here"（点击这里）或者 "read more"（阅读更多），显然帮助有限。 相反地，我们应该在 `a` 标签中使用简洁的描述性语言来为用户提供更多信息。
|
||||
屏幕阅读器通过阅读链接文本（即 `a` 标签的内容文本）来完成这个操作。 如果我们只在链接中写上 "click here"（点击这里）或者 "read more"（阅读更多），显然帮助有限。 相反地，应该在 `a` 标签中使用简洁的描述性语言来为用户提供更多的信息。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: improve-chart-accessibility-with-the-figure-element
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 引入了 `figure` 标签以及与之相关的 `figcaption` 标签。 它们一起用于展示可视化信息（如：图片、图表）及其标题。 通过语义化对内容进行分组并配以用于解释 `figure` 的文字，可以极大地提升内容的可访问性。
|
||||
HTML5 引入了 `figure` 标签以及与之相关的 `figcaption` 标签。 它们一起用于展示可视化信息（如：图片、图表）及其标题。 这样通过语义化对内容进行分组并配以用于解释 `figure` 的文字，可以极大地提升内容的可访问性。
|
||||
|
||||
对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。 但是这里有一个难点，如何为屏幕阅读器用户展示那些超出屏幕可视范围（使用 CSS）的表格所表现的图表数据。
|
||||
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: improve-form-field-accessibility-with-the-label-element
|
||||
|
||||
# --description--
|
||||
|
||||
合理地使用语义化 HTML 标签和属性可以提升页面的可访问性。 在接下来的挑战中，你将会看到在表单中使用属性的场景。
|
||||
合理地使用语义化的 HTML 标签和属性可以提升页面可访问性。 在接下来的挑战中，你将会看到在表单中使用属性的场景。
|
||||
|
||||
`label` 标签的文本内容通常会是表单组件的名称或标签。 这些文本表明了组件的意义，也提升了表单的可访问性。 `label` 标签的 `for` 属性将标签与表单组件绑定；同时，屏幕阅读器也会读取 `for` 属性的属性值。
|
||||
|
||||
在 HTML 基础章节中，我们已经学习使用了单选按钮标签。 在那个挑战中，为了让标签可以在点击的时候也选中输入框，我们将单选按钮 input 标签嵌套在了 `label` 标签里面。 在本节课程中，我们会了解到另外一种实现这个功能的方法，那就是使用 `for` 属性。
|
||||
在 HTML 基础章节中，我们已经学习使用了单选按钮标签。 在那个挑战中，为了让标签可以在点击的时候也选中输入框，我们将单选按钮 input 标签嵌套在了 `label` 标签里面。 在本节课程中，我们介绍了另外一种实现这个功能的方法，那就是使用 `for` 属性。
|
||||
|
||||
`for` 的属性值必须与表单组件的 `id` 属性值相同。 举个例子：
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: improve-readability-with-high-contrast-text
|
||||
|
||||
低对比度的前景色与背景色会使文本难以阅读。 足够的对比度可以提高内容的可读性，但是怎样的对比度才算是“足够”的？
|
||||
|
||||
Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。 对比度是通过比较两种颜色的相对亮度值来计算的。 对于相同颜色来说，对比度是 1:1，即无对比度；白色与黑色拥有最高对比度 21:1。 在线可用的对比检查工具很多，可以计算这个比率。
|
||||
Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。 对比度是通过比较两种颜色的相对亮度值来计算的。 对比度的范围是从相同颜色的 1:1（无对比度）到白色与黑色的最高对比度 21:1。 在线可用的对比检查工具很多，可以计算这个比率。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: jump-straight-to-the-content-using-the-main-element
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 引入了一些新元素，其中包括无障碍特性，给予开发者更多的选择。 HTML5 引入了诸如 `main`、`header`、`footer`、`nav`、`article`、`section` 等大量新标签。
|
||||
HTML5 引入了一些新元素，给予开发者更多的选择，也包含辅助功能。 HTML5 引入了诸如 `main`、`header`、`footer`、`nav`、`article`、`section` 等大量新标签。
|
||||
|
||||
默认情况下，浏览器呈现这些元素的方式类似于普通的 `div`。 但是，在适当的地方使用它们会让标记文本具有更多的含义。 仅标签名称就可以表示它所包含的信息类型，这给内容增加了语义含义。 辅助技术可以获取这种信息，为用户提供更好的页面摘要或导航选项。
|
||||
|
||||
`main` 标签用于呈现网页的主体内容，且每个页面应只有一个。 这意味着它只应包含与页面中心主题相关的信息， 而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。
|
||||
`main` 标签用于呈现网页的主体内容，且每个页面应只有一个。 这是为了围绕与页面中心主题相关的信息， 而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。
|
||||
|
||||
`main` 标签的语义化特性可以让辅助工具快速定位到页面的主体。 如果你在页面顶部看到过“跳转到主要内容”链接，那么使用 `main` 标签会自动让辅助设备具有这个跳转的功能。
|
||||
`main` 标签也有一个内嵌的特性，以便辅助技术快速定位到页面的主体。 如果你在页面顶部看到过“跳转到主要内容”链接，那么使用 `main` 标签会自动让辅助设备具有这个跳转的功能。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -11,13 +11,13 @@ dashedName: know-when-alt-text-should-be-left-blank
|
||||
|
||||
在上一个挑战中，我们了解到 `img` 标签必须有一个 `alt` 属性。 但是，有时图像通过它们的描述文本被归类，或者只用于装饰。 在这些情况下， `alt` 文本可能是多余的或没有必要的。
|
||||
|
||||
在图像已经用文本内容解释或没有为页面添加内容的情况下， `img` 仍然需要一个 `alt` 属性，但可以设置为空字符串。 例如：
|
||||
在图片已经有了文字说明，或者仅仅为了美化页面的情况下，`img` 仍然需要一个 `alt` 属性，但可以设置为空字符串。 例如：
|
||||
|
||||
`<img src="visualDecoration.jpeg" alt="">`
|
||||
|
||||
比如，背景图片通常起装饰作用。 但这些图片通常都是通过 CSS 规则而非 HTML 引入的，因此屏幕阅读器无法读取。
|
||||
|
||||
**注意：**对于有标题的图片，我们依然需要添加 `alt` 属性，因为这样有助于搜索引擎记录图片内容。
|
||||
**注意：**对于有标题的图片，依然需要添加 `alt` 文本，因为这样有助于搜索引擎记录图片内容。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
|
||||
|
||||
# --description--
|
||||
|
||||
到目前为止，所有关于可访问性的挑战都没有使用 CSS。 这是为了让你在关注外观样式之前，先把页面的逻辑结构写清，以及明确语义化标签的重要性。
|
||||
到目前为止，所有关于可访问性的挑战都没有使用 CSS。 这是为了在介绍视觉设计方面之前强调使用逻辑结构和有语义意义的标签的重要性。
|
||||
|
||||
但如果我们想在页面中添加一些只对屏幕阅读器可见的内容，可以用 CSS 来实现。 当信息为视觉格式（例如图表）时，但屏幕阅读器用户需要备用文稿（例如表格）来访问数据，在这种情况下， 使用 CSS 将屏幕的只读元素放到浏览器窗口可视区域之外。
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: make-links-navigable-with-html-access-keys
|
||||
|
||||
# --description--
|
||||
|
||||
HTML 提供 `accesskey` 属性，用于指定激活元素或者使元素获得焦点的快捷键。 这可以让键盘用户的导航更加便捷。
|
||||
HTML 提供 `accesskey` 属性，用于指定激活元素或者使元素获得焦点的快捷键。 添加 `accesskey` 属性可以让使用键盘的用户更高效率地导航。
|
||||
|
||||
HTML5 允许在任何标签上使用这个属性。 该属性尤其适用于链接、按钮、表单组件等元素。
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ dashedName: make-screen-reader-navigation-easier-with-the-header-landmark
|
||||
|
||||
与 `main` 类似，`header` 的语义化特性也可以让辅助工具快速定位到它的内容。
|
||||
|
||||
**注意：**`header` 应当在 HTML 文档的 `body` 标签内使用。 请注意，这个标签与包含页面标题、元信息的 `head` 标签本不相同。
|
||||
**注意：**`header` 应当在 HTML 文档的 `body` 标签内使用。 它与包含页面标题、元信息的 `head` 标签不同。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d778c367417b2b2512aa9
|
||||
title: 使用 HTML5 的 datatime 属性标准化时间
|
||||
title: 使用 HTML5 的 datetime 属性标准化时间
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMgtz'
|
||||
forumTopicId: 301025
|
||||
@ -9,7 +9,7 @@ dashedName: standardize-times-with-the-html5-datetime-attribute
|
||||
|
||||
# --description--
|
||||
|
||||
继续日期主题。 HTML5 还引入了 `time` 标签与 `datetime` 属性来标准化时间。 这是一个行内元素，用于在页面中呈现日期或时间， 而 `datetime` 属性用于设置日期的格式。 辅助设备可以获取这个值。 即使在文本中以非正式的方式或学术方式撰写，它也有助于避免混乱，因为它规定了时间的标准化版本。
|
||||
继续日期主题。 HTML5 还引入了 `time` 标签与 `datetime` 属性来标准化时间。 `datetime` 属性是一个内联元素，可以在一个页面上包含日期或时间。 `datetime` 属性包含的有效格式。 辅助设备可以获取这个值。 这个属性也有助于避免混乱，因为它规定了时间的标准化版本，甚至可以在文本中以非正式的方式或学术方式使用它。
|
||||
|
||||
举个例子：
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: wrap-content-in-the-article-element
|
||||
|
||||
# --description--
|
||||
|
||||
`article` 是另一个具有语义化特性的 HTML5 新标签。 `article` 是一个用于表示独立且可复用结构的标签，用于呈现独立及完整的内容。 这个标签适用于博客、论坛帖子或者新闻文章。
|
||||
`article` 是另一个具有语义化特性的 HTML5 新标签。 `article` 是一个分段标签，用于呈现独立及完整的内容。 这个标签适用于博客、论坛帖子或者新闻文章。
|
||||
|
||||
确定内容是否可以单独作为一部分，通常是个人的判断，但你可以使用几个简单的测试。 如果删除了所有周围的上下文，这个内容是否仍然有意义？ 类似地，对于文本内容，可否把这些内容放到 RSS 推送里？
|
||||
确定内容是否可以单独作为一部分，通常是个人的判断，但你可以使用几个简单的测试。 如果删除了所有周围的上下文，这个内容是否仍然有意义？ 类似地，对于文本内容，可否把这些内容放到一个 RSS 推送里？
|
||||
|
||||
请牢记，辅助设备依赖组织良好、语义化的标签来获取页面中的信息。
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
|
||||
|
||||
接下来的表单主题是关于单选按钮的可访问性。 在上一个挑战中，每个单选按钮都有一个包含 `for` 属性的 `label` 标签，这些属性值指向相关选项的 `id`。 然而单选按钮通常成组出现，而且用户必须选择其中一项。
|
||||
|
||||
`fieldset` 标签包裹整组单选按钮，实现这个功能。 我们可以使用 `fieldset` 标签将单选按钮组包含在里面，通常还会使用 `legend` 标签来为单选按钮组提供文字说明。 屏幕阅读器也可以朗读这些文字。
|
||||
`fieldset` 标签包裹整组单选按钮，实现这个功能。 它经常使用 `legend` 标签来提供分组的描述，以便屏幕阅读器用户会阅读 `fieldset` 元素中的每个选项。
|
||||
|
||||
当选项的含义很明确时，如“性别选择”，`fieldset` 与 `legend` 标签可以省略。 这时，使用包含 `for` 属性的 `label` 标签就足够了。
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: comparison-with-the-greater-than-operator
|
||||
|
||||
El operador mayor que (`>`) compara los valores de dos números. Si el número a la izquierda es mayor que el número a la derecha, devuelve `true`. De lo contrario, devuelve `false`.
|
||||
|
||||
Como el operador de igualdad, el operador mayor que convertirá los tipos de datos de valores mientras los compara.
|
||||
Al igual que el operador de igualdad, el operador mayor que convertirá los tipos de datos de valores mientras los compara.
|
||||
|
||||
**Ejemplos**
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: comparison-with-the-greater-than-or-equal-to-operator
|
||||
|
||||
El operador mayor o igual que (`>=`) compara el valor de dos números. Si el número de la izquierda es mayor o igual que el número de la derecha, devuelve `true`. De lo contrario, devuelve `false`.
|
||||
|
||||
Al igual que el operador de igualdad, `>=` convertirá los tipos de datos al comparar.
|
||||
Al igual que el operador de igualdad, el operador mayor o igual que convertirá los tipos de datos mientras los compara.
|
||||
|
||||
**Ejemplos**
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: comparison-with-the-inequality-operator
|
||||
|
||||
# --description--
|
||||
|
||||
El operador de desigualdad (`!=`) es lo opuesto al operador de igualdad. Esto quiere decir que no es igual, y devuelve `false` cuando la comparación de igualdad devuelva `true` y *vice versa*. Tal como el operador de igualdad, el operador de desigualdad convertirá los tipos de datos mientras compara.
|
||||
El operador de desigualdad (`!=`) es lo opuesto al operador de igualdad. Esto quiere decir que no es igual, y devuelve `false` cuando la comparación de igualdad devuelva `true` y *vice versa*. Al igual que el operador de igualdad, el operador de desigualdad convertirá los tipos de datos mientras los compara.
|
||||
|
||||
**Ejemplos**
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: comparison-with-the-less-than-operator
|
||||
|
||||
# --description--
|
||||
|
||||
El operador <dfn>menor que</dfn> (`<`) compara los valores de dos números. Si el número a la izquierda es menor que el número a la derecha, devuelve `true`. De lo contrario, devuelve `false`. Al igual que el operador de igualdad, el operador <dfn>menor que</dfn> convertirá los tipos de datos mientras los compara.
|
||||
El operador menor que (`<`) compara los valores de dos números. Si el número a la izquierda es menor que el número a la derecha, devuelve `true`. De lo contrario, devuelve `false`. Al igual que el operador de igualdad, el operador menor que convertirá los tipos de datos mientras los compara.
|
||||
|
||||
**Ejemplos**
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: comparison-with-the-less-than-or-equal-to-operator
|
||||
|
||||
# --description--
|
||||
|
||||
El operador menor o igual que (`<=`) compara el valor de dos números. Si el número de la izquierda es menor o igual que el número de la derecha, devuelve `true`. Si el número a la izquierda es mayor que el número a la derecha, devuelve `false`. Al igual que el operador de igualdad, el operador menor o igual que convierte los tipos de datos.
|
||||
El operador menor o igual que (`<=`) compara el valor de dos números. Si el número de la izquierda es menor o igual que el número de la derecha, devuelve `true`. Si el número a la izquierda es mayor que el número a la derecha, devuelve `false`. Al igual que el operador de igualdad, el operador menor o igual que convertirá los tipos de datos mientras los compara.
|
||||
|
||||
**Ejemplos**
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: comparison-with-the-strict-inequality-operator
|
||||
|
||||
# --description--
|
||||
|
||||
El operador de estricta desigualdad `!==` es el opuesto lógico del operador de estricta igualdad. Esto significa "Estrictamente Desigual", y devuelve `false` cuando la comparación de estricta igualdad devolvería `true` y *vice versa*. Una estricta desigualdad no convertirá los tipos de datos.
|
||||
El operador de estricta desigualdad `!==` es el opuesto lógico del operador de estricta igualdad. Esto significa "Estrictamente Desigual", y devuelve `false` cuando la comparación de estricta igualdad devolvería `true` y *vice versa*. El operador de estricta desigualdad no convertirá los tipos de datos.
|
||||
|
||||
**Ejemplos**
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b6
|
||||
title: Escape Sequences in Strings
|
||||
title: Escapa secuencias en cadenas
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cvmqRh6'
|
||||
forumTopicId: 17567
|
||||
@ -9,36 +9,36 @@ dashedName: escape-sequences-in-strings
|
||||
|
||||
# --description--
|
||||
|
||||
Quotes are not the only characters that can be <dfn>escaped</dfn> inside a string. There are two reasons to use escaping characters:
|
||||
Las comillas no son los únicos caracteres que pueden ser <dfn>escapados</dfn> dentro de una cadena. Hay dos razones para usar caracteres de escape:
|
||||
|
||||
1. To allow you to use characters you may not otherwise be able to type out, such as a carriage return.
|
||||
2. To allow you to represent multiple quotes in a string without JavaScript misinterpreting what you mean.
|
||||
1. Para permitir el uso de caracteres que de otra manera no te sería posible escribir, como un retorno de carro.
|
||||
2. Para permitirte representar múltiples comillas en una cadena sin que JavaScript malinterprete lo que quieres decir.
|
||||
|
||||
We learned this in the previous challenge.
|
||||
Esto lo aprendimos en el anterior desafío.
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>Code</th><th>Output</th></tr></thead><tbody><tr><td><code>\'</code></td><td>single quote</td></tr><tr><td><code>\"</code></td><td>double quote</td></tr><tr><td><code>\\</code></td><td>backslash</td></tr><tr><td><code>\n</code></td><td>newline</td></tr><tr><td><code>\r</code></td><td>carriage return</td></tr><tr><td><code>\t</code></td><td>tab</td></tr><tr><td><code>\b</code></td><td>word boundary</td></tr><tr><td><code>\f</code></td><td>form feed</td></tr></tbody></table>
|
||||
<table class='table table-striped'><thead><tr><th>Código</th><th>Resultado</th></tr></thead><tbody><tr><td><code>\'</code></td><td>comilla simple</td></tr><tr><td><code>\"</code></td><td>comilla doble</td></tr><tr><td><code>\\</code></td><td>barra invertida</td></tr><tr><td><code>\n</code></td><td>línea nueva</td></tr><tr><td><code>\r</code></td><td>retorno de carro</td></tr><tr><td><code>\t</code></td><td>tabulación</td></tr><tr><td><code>\b</code></td><td>límite de palabra</td></tr><tr><td><code>\f</code></td><td>fuente de formulario</td></tr></tbody></table>
|
||||
|
||||
*Note that the backslash itself must be escaped in order to display as a backslash.*
|
||||
*Ten en cuenta que la barra invertida en sí debe ser escapada para poder mostrarla como una barra invertida.*
|
||||
|
||||
# --instructions--
|
||||
|
||||
Assign the following three lines of text into the single variable `myStr` using escape sequences.
|
||||
Asigna las siguientes tres líneas de texto en la variable única `myStr` usando secuencias de escape.
|
||||
|
||||
<blockquote>FirstLine<br> \SecondLine<br>ThirdLine</blockquote>
|
||||
|
||||
You will need to use escape sequences to insert special characters correctly. You will also need to follow the spacing as it looks above, with no spaces between escape sequences or words.
|
||||
Necesitarás usar secuencias de escape para insertar correctamente los caracteres especiales. También necesitarás seguir el espaciado tal y como se ve arriba, sin espacios entre secuencias de escape o palabras.
|
||||
|
||||
**Note:** The indentation for `SecondLine` is achieved with the tab escape character, not spaces.
|
||||
**Nota:** La sangría para la segunda línea (`SecondLine`) se consigue con el carácter de escape de tabulación, no con espacios.
|
||||
|
||||
# --hints--
|
||||
|
||||
`myStr` should not contain any spaces
|
||||
`myStr` no debe contener ningún espacio
|
||||
|
||||
```js
|
||||
assert(!/ /.test(myStr));
|
||||
```
|
||||
|
||||
`myStr` should contain the strings `FirstLine`, `SecondLine` and `ThirdLine` (remember case sensitivity)
|
||||
`myStr` debe contener las cadenas `FirstLine`, `SecondLine` y `ThirdLine` (recuerda la sensibilidad a mayúsculas y minúsculas)
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -46,31 +46,31 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`FirstLine` should be followed by the newline character `\n`
|
||||
`FirstLine` debe ir seguido del carácter de línea nueva `\n`
|
||||
|
||||
```js
|
||||
assert(/FirstLine\n/.test(myStr));
|
||||
```
|
||||
|
||||
`myStr` should contain a tab character `\t` which follows a newline character
|
||||
`myStr` debe contener un carácter de tabulación `\t` seguido de un carácter de línea nueva
|
||||
|
||||
```js
|
||||
assert(/\n\t/.test(myStr));
|
||||
```
|
||||
|
||||
`SecondLine` should be preceded by the backslash character <code>\\</code>
|
||||
`SecondLine` debe estar precedida por el carácter de barra invertida `\`
|
||||
|
||||
```js
|
||||
assert(/\\SecondLine/.test(myStr));
|
||||
```
|
||||
|
||||
There should be a newline character between `SecondLine` and `ThirdLine`
|
||||
Debe haber un carácter de línea nueva entre `SecondLine` y `ThirdLine`
|
||||
|
||||
```js
|
||||
assert(/SecondLine\nThirdLine/.test(myStr));
|
||||
```
|
||||
|
||||
`myStr` should only contain characters shown in the instructions
|
||||
`myStr` solo debe contener caracteres mostrados en las instrucciones
|
||||
|
||||
```js
|
||||
assert(myStr === 'FirstLine\n\t\\SecondLine\nThirdLine');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b5
|
||||
title: Escaping Literal Quotes in Strings
|
||||
title: Escapa comillas literales en cadenas
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/c2QvgSr'
|
||||
forumTopicId: 17568
|
||||
@ -9,31 +9,31 @@ dashedName: escaping-literal-quotes-in-strings
|
||||
|
||||
# --description--
|
||||
|
||||
When you are defining a string you must start and end with a single or double quote. What happens when you need a literal quote: `"` or `'` inside of your string?
|
||||
Cuando estás definiendo una cadena debes comenzar y terminar con una comilla simple o doble. ¿Qué pasa cuando necesitas una comilla literal: `"` o `'` dentro de tu cadena?
|
||||
|
||||
In JavaScript, you can <dfn>escape</dfn> a quote from considering it as an end of string quote by placing a <dfn>backslash</dfn> (<code>\\</code>) in front of the quote.
|
||||
En JavaScript, puedes <dfn>escapar</dfn> una comilla de considerarse un final de cadena colocando una <dfn>barra invertida</dfn> (`\`) delante de la comilla.
|
||||
|
||||
`var sampleStr = "Alan said, \"Peter is learning JavaScript\".";`
|
||||
|
||||
This signals to JavaScript that the following quote is not the end of the string, but should instead appear inside the string. So if you were to print this to the console, you would get:
|
||||
Esto indica a JavaScript que la siguiente comilla no es el final de la cadena, sino que debería aparecer dentro de la cadena. Así que si imprimieras esto en la consola, obtendrías:
|
||||
|
||||
`Alan said, "Peter is learning JavaScript".`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use <dfn>backslashes</dfn> to assign a string to the `myStr` variable so that if you were to print it to the console, you would see:
|
||||
Usa <dfn>barras invertidas</dfn> para asignar una cadena a la variable `myStr` de modo que si lo imprimieras en la consola, verías:
|
||||
|
||||
`I am a "double quoted" string inside "double quotes".`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use two double quotes (`"`) and four escaped double quotes (`\"`).
|
||||
Debes usar dos comillas dobles (`"`) y cuatro comillas dobles escapadas (`\"`).
|
||||
|
||||
```js
|
||||
assert(code.match(/\\"/g).length === 4 && code.match(/[^\\]"/g).length === 2);
|
||||
```
|
||||
|
||||
Variable myStr should contain the string: `I am a "double quoted" string inside "double quotes".`
|
||||
La variable myStr debe contener la cadena: `I am a "double quoted" string inside "double quotes".`
|
||||
|
||||
```js
|
||||
assert(/I am a "double quoted" string inside "double quotes(\."|"\.)$/.test(myStr));
|
||||
|
||||
Reference in New Issue
Block a user