mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-22 22:34:29 +02:00
Merge branch 'main' into nl
This commit is contained in:
Jen Looper
GitHub
@@ -24,15 +24,15 @@ At its most basic, a screen reader will read a page from top to bottom audibly.
|
||||
|
||||
Every web developer should familiarize themselves with a screen reader. As highlighted above, it's the client your users will utilize. Much in the same way you're familiar with how a browser operates, you should learn how a screen reader operates. Fortunately, screen readers are built into most operating systems.
|
||||
|
||||
Some browsers also have built-in tools and extensions that can read text aloud or even provide some basic navigational features, such as [these accessibility-focused Edge browser tools](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features). These are also important accessibility tools, but function very differently from screen readers and they should not be mistaken for screen reader testing tools.
|
||||
Some browsers also have built-in tools and extensions that can read text aloud or even provide some basic navigational features, such as [these accessibility-focused Edge browser tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). These are also important accessibility tools, but function very differently from screen readers and they should not be mistaken for screen reader testing tools.
|
||||
|
||||
✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default.
|
||||
✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default.
|
||||
|
||||
### Zoom
|
||||
|
||||
Another tool commonly used by people with vision impairments is zooming. The most basic type of zooming is static zoom, controlled through `Control + plus sign (+)` or by decreasing screen resolution. This type of zoom causes the entire page to resize, so using [responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) is important to provide a good user experience at increased zoom levels.
|
||||
Another tool commonly used by people with vision impairments is zooming. The most basic type of zooming is static zoom, controlled through `Control + plus sign (+)` or by decreasing screen resolution. This type of zoom causes the entire page to resize, so using [responsive design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) is important to provide a good user experience at increased zoom levels.
|
||||
|
||||
Another type of zoom relies on specialized software to magnify one area of the screen and pan, much like using a real magnifying glass. On Windows, [Magnifier](https://support.microsoft.com/en-us/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) is built in, and [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is a third-party magnification software with more features and a larger user base. Both macOS and iOS have a built-in magnification software called [Zoom](https://www.apple.com/accessibility/mac/vision/).
|
||||
Another type of zoom relies on specialized software to magnify one area of the screen and pan, much like using a real magnifying glass. On Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) is built in, and [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is a third-party magnification software with more features and a larger user base. Both macOS and iOS have a built-in magnification software called [Zoom](https://www.apple.com/accessibility/mac/vision/).
|
||||
|
||||
### Contrast checkers
|
||||
|
||||
@@ -133,7 +133,7 @@ You can use `aria-label` to describe the link when the format of the page doesn'
|
||||
<a href="#" aria-label="Widget description">description</a>
|
||||
```
|
||||
|
||||
✅ In general, using Semantic markup as described above supersedes the use of ARIA, but sometimes there is no semantic equivalent for various HTML widgets. A good example is a Tree. There's no HTML equivalent for a tree, so you identify the generic `<div>` for this element with a proper role and aria values. The [MDN documentation on ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) contains more useful information.
|
||||
✅ In general, using Semantic markup as described above supersedes the use of ARIA, but sometimes there is no semantic equivalent for various HTML widgets. A good example is a Tree. There's no HTML equivalent for a tree, so you identify the generic `<div>` for this element with a proper role and aria values. The [MDN documentation on ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contains more useful information.
|
||||
|
||||
```html
|
||||
<h2 id="tree-label">File Viewer</h2>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
>
|
||||
> \- Sir Timothy Berners-Lee, director del W3C e inventor de la World Wide Web
|
||||
|
||||
Esta cita destaca perfectamente la importancia de crear sitios web accesibles. Una aplicación a la que no pueden acceder todos es, por definición, excluyente. Como desarrolladores web, siempre debemos tener en cuenta la accesibilidad. Al tener este enfoque desde el principio, estará bien encaminado para garantizar que todos puedan acceder a las páginas que crea. En esta lección, aprenderá sobre las herramientas que pueden ayudarlo a asegurarse de que sus activos web sean accesibles y cómo construir teniendo en cuenta la accesibilidad.
|
||||
Esta cita destaca perfectamente la importancia de crear sitios web accesibles. Una aplicación a la que no pueden acceder todos es, por definición, excluyente. Como desarrolladores web, siempre debemos tener en cuenta la accesibilidad. Al tener este enfoque desde el principio, estará bien encaminado para garantizar que todos puedan acceder a las páginas que crea. En esta lección, aprenderás sobre las herramientas que pueden ayudarlo a asegurarse de que sus activos web sean accesibles y cómo construir teniendo en cuenta la accesibilidad.
|
||||
|
||||
## Herramientas para usar
|
||||
|
||||
@@ -19,28 +19,28 @@ Una de las herramientas de accesibilidad más conocidas son los lectores de pant
|
||||
|
||||
[Lectores de pantalla](https://en.wikipedia.org/wiki/Screen_reader) son clientes de uso común para personas con problemas de visión. A medida que dedicamos tiempo a asegurarnos de que un navegador transmita correctamente la información que deseamos compartir, también debemos asegurarnos de que un lector de pantalla haga lo mismo.
|
||||
|
||||
En su forma más básica, un lector de pantalla leerá una página de arriba a abajo de forma audible. Si su página es todo texto, el lector transmitirá la información de manera similar a un navegador. Por supuesto, las páginas web rara vez son puramente texto; contendrán enlaces, gráficos, color y otros componentes visuales. Se debe tener cuidado para garantizar que un lector de pantalla lea correctamente esta información.
|
||||
En su forma más básica, un lector de pantalla leerá una página de arriba a abajo de forma audible. Si la página es todo texto, el lector transmitirá la información de manera similar a un navegador. Por supuesto, las páginas web rara vez son puramente texto; contendrán enlaces, gráficos, color y otros componentes visuales. Se debe tener cuidado para garantizar que un lector de pantalla lea correctamente esta información.
|
||||
|
||||
Todo desarrollador web debería familiarizarse con un lector de pantalla. Como se destacó anteriormente, es el cliente que utilizarán sus usuarios. De la misma manera que está familiarizado con el funcionamiento de un navegador, debe aprender cómo funciona un lector de pantalla. Afortunadamente, los lectores de pantalla están integrados en la mayoría de los sistemas operativos y muchos navegadores contienen extensiones para emular un lector de pantalla.
|
||||
Todo desarrollador web debería familiarizarse con un lector de pantalla. Como se destacó anteriormente, es el cliente que utilizarán sus usuarios. De la misma manera que estás familiarizado con el funcionamiento de un navegador, debes aprender cómo funciona un lector de pantalla. Afortunadamente, los lectores de pantalla están integrados en la mayoría de los sistemas operativos y muchos navegadores contienen extensiones para emular un lector de pantalla.
|
||||
|
||||
✅ Prueba una extensión o herramienta de navegador de lector de pantalla. Uno que solo funciona en Windows es [JAWS](https://webaim.org/articles/jaws/). Los navegadores también tienen herramientas integradas que se pueden utilizar para este propósito; Consulte estas [herramientas de navegador Edge centradas en la accesibilidad](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features).
|
||||
✅ Prueba una extensión o herramienta de navegador de lector de pantalla. Uno que solo funciona en Windows es [JAWS](https://webaim.org/articles/jaws/). Los navegadores también tienen herramientas integradas que se pueden utilizar para este propósito; Consulta estas [herramientas de navegador Edge centradas en accesibilidad](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features).
|
||||
|
||||
### Damas de contraste
|
||||
### Checar contrastes
|
||||
|
||||
Los colores en los sitios web deben elegirse cuidadosamente para responder a las necesidades de los usuarios daltónicos o de las personas que tienen dificultades para ver colores de bajo contraste.
|
||||
|
||||
✅ Pruebe un sitio web que le guste usar para el uso del color con una extensión de navegador como
|
||||
[WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). ¿Qué aprendes?
|
||||
✅ Prueba un sitio web que te guste usar para el uso del color con una extensión de navegador como
|
||||
[WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). ¿Qué aprendiste?
|
||||
|
||||
### Lighthouse
|
||||
|
||||
En el área de herramientas para desarrolladores de su navegador, encontrará la herramienta Lighthouse. Esta herramienta es importante para obtener una primera visión de la accesibilidad (así como otros análisis) de un sitio web. Si bien es importante no depender exclusivamente de Lighthouse, una puntuación del 100% es muy útil como referencia.
|
||||
En el área de herramientas para desarrolladores en tu navegador, encontrarás la herramienta Lighthouse. Esta herramienta es importante para obtener una primera visión de la accesibilidad (así como otros análisis) de un sitio web. Si bien es importante no depender exclusivamente de Lighthouse, una puntuación del 100% es muy útil como referencia.
|
||||
|
||||
✅ Busque Lighthouse en el panel de herramientas de desarrollo de su navegador y ejecute un análisis en cualquier sitio. ¿Qué descubres?
|
||||
✅ Busca Lighthouse en el panel de herramientas de desarrollo de su navegador y ejecuta un análisis en cualquier sitio. ¿Qué descubres?
|
||||
|
||||
## Diseñar para la accesibilidad
|
||||
|
||||
La accesibilidad es un tema relativamente extenso. Para ayudarlo, existen numerosos recursos disponibles.
|
||||
La accesibilidad es un tema relativamente extenso. Para ayudarte, existen numerosos recursos disponibles.
|
||||
|
||||
- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
|
||||
|
||||
@@ -50,25 +50,25 @@ Si bien no podremos cubrir todos los aspectos de la creación de sitios accesibl
|
||||
|
||||
### Paletas de colores seguros
|
||||
|
||||
La gente ve el mundo de diferentes formas, y esto incluye los colores. Al seleccionar un esquema de color para su sitio, debe asegurarse de que sea accesible para todos. Uno genial [herramienta para generar paletas de colores es Color Safe](http://colorsafe.co/).
|
||||
La gente ve el mundo de diferentes formas, y esto incluye los colores. Al seleccionar un esquema de color para tu sitio, debes asegurarte de que sea accesible para todos. Una [herramiento genial para generar paletas de colores es Color Safe](http://colorsafe.co/).
|
||||
|
||||
✅ Identifique un sitio web que sea muy problemático en el uso del color. ¿Por qué?
|
||||
✅ Identifica un sitio web que sea muy problemático en el uso del color. ¿Por qué?
|
||||
|
||||
### Resaltar correctamente el texto
|
||||
|
||||
Resaltar texto por color, [peso de fuente](https://developer.mozilla.org/docs/Web/CSS/font-weight) u otra [decoración de texto](https://developer.mozilla.org/docs/Web/CSS/text-decoration) no informa inherentemente a un lector de pantalla de su importancia. Una palabra puede ser en negrita porque es una palabra clave o porque es la primera palabra y el diseñador decidió que debería ser en negrita.
|
||||
Resaltar texto por color, [peso de fuente](https://developer.mozilla.org/docs/Web/CSS/font-weight) u otra [decoración de texto](https://developer.mozilla.org/docs/Web/CSS/text-decoration) no informa inherentemente a un lector de pantalla de su importancia. Una palabra puede estar en negrita porque es una palabra clave o porque es la primera palabra, y el diseñador decidió que debería estar en negrita.
|
||||
|
||||
Cuando sea necesario resaltar una frase en particular, utilice los elementos `<strong>` o `<em>`. Estos le indicarán a un lector de pantalla que esos elementos son importantes.
|
||||
Cuando sea necesario resaltar una frase en particular, utilice los elementos `<strong>` o `<em>`. Estos te indicarán a un lector de pantalla que esos elementos son importantes.
|
||||
|
||||
### Usa el HTML correcto
|
||||
|
||||
Con CSS y JavaScript es posible que muchos elementos se parezcan a cualquier tipo de control. `<span>` podría usarse para crear un `<button>`, y `<b>` podría convertirse en un hipervínculo. Si bien esto podría considerarse más fácil de diseñar, es desconcertante para un lector de pantalla. Utilice el HTML apropiado al crear controles en una página. Si desea un hipervínculo, use `<a>`. Usar el HTML correcto para el control correcto se llama hacer uso de HTML semántico.
|
||||
Con CSS y JavaScript es posible que muchos elementos se parezcan a cualquier tipo de control. `<span>` podría usarse para crear un `<button>`, y `<b>` podría convertirse en un enlace. Si bien esto podría considerarse más fácil de diseñar, es desconcertante para un lector de pantalla. Utiliza el HTML apropiado al crear controles en una página. Si deseas un enlace, usa `<a>`. Usar el HTML correcto para el control correcto se llama hacer uso de **HTML semántico**.
|
||||
|
||||
✅ Vaya a cualquier sitio web y vea si los diseñadores y desarrolladores están usando HTML correctamente. ¿Puedes encontrar un botón que debería ser un enlace? Sugerencia: haga clic derecho y elija 'View Page Source' en su navegador para ver el código subyacente.
|
||||
✅ Vaya a cualquier sitio web y vea si los diseñadores y desarrolladores están usando HTML correctamente. ¿Puedes encontrar un botón que debería ser un enlace? Sugerencia: haga clic derecho y elige 'View Page Source' en tu navegador para ver el código subyacente.
|
||||
|
||||
### Usa buenas pistas visuales
|
||||
|
||||
CSS ofrece un control completo sobre el aspecto de cualquier elemento de una página. Puede crear cuadros de texto sin contorno o hipervínculos sin subrayado. Desafortunadamente, eliminar esas pistas puede hacer que sea más difícil para alguien que depende de ellas poder reconocer el tipo de control.
|
||||
CSS ofrece un control completo sobre el aspecto de cualquier elemento de una página. Puedes crear cuadros de texto sin contorno o hipervínculos sin subrayado. Desafortunadamente, eliminar esas pistas puede hacer que sea más difícil para alguien que depende de ellas poder reconocer el tipo de control.
|
||||
|
||||
## La importancia del texto del enlace
|
||||
|
||||
@@ -80,19 +80,19 @@ Como era de esperar, los lectores de pantalla leen el texto del enlace de la mis
|
||||
|
||||
> El pequeño pingüino, a veces conocido como el pingüino de hadas, es el pingüino más pequeño del mundo. [Haga clic aquí](https://en.wikipedia.org/wiki/Little_penguin) para obtener más información.
|
||||
|
||||
> El pequeño pingüino, a veces conocido como el pingüino de hadas, es el pingüino más pequeño del mundo. Visite https://en.wikipedia.org/wiki/Little_penguin para obtener más información.
|
||||
> El pequeño pingüino, a veces conocido como el pingüino de hadas, es el pingüino más pequeño del mundo. Visita https://en.wikipedia.org/wiki/Little_penguin para obtener más información.
|
||||
|
||||
> **NOTA** Mientras estás a punto de leer, **nunca** debes crear enlaces que se parezcan al anterior.
|
||||
|
||||
Recuerde, los lectores de pantalla son una interfaz diferente de los navegadores con un conjunto diferente de características.
|
||||
Recuerda, los lectores de pantalla son una interfaz diferente de los navegadores con diferentes características.
|
||||
|
||||
### El problema con el uso de la URL
|
||||
### El problema con el uso de URLs
|
||||
|
||||
Los lectores de pantalla leen el texto. Si aparece una URL en el texto, el lector de pantalla leerá la URL. En términos generales, la URL no transmite información significativa y puede sonar molesta. Es posible que haya experimentado esto si su teléfono alguna vez leyó de manera audible un mensaje de texto con una URL.
|
||||
Los lectores de pantalla leen el texto. Si aparece un URL en el texto, el lector de pantalla leerá el URL. En términos generales, un URL no transmite información significativa y puede sonar molesto. Es posible que hayas experimentado esto si tu teléfono alguna vez leyó de manera audible un mensaje de texto con un URL.
|
||||
|
||||
### El problema con "haga clic aquí"
|
||||
|
||||
Los lectores de pantalla también tienen la capacidad de leer solo los hipervínculos en una página, de la misma manera que una persona con visión escanea una página en busca de enlaces. Si el texto del vínculo es siempre "haga clic aquí", todo lo que el usuario oirá es "haga clic aquí, haga clic aquí, haga clic aquí, haga clic aquí, haga clic aquí, ..." Todos los enlaces ahora son indistinguibles entre sí.
|
||||
Los lectores de pantalla también tienen la capacidad de leer solo los enlaces en una página, de la misma manera que una persona con visión escanea una página en busca de enlaces. Si el texto del vínculo es siempre "haga clic aquí", todo lo que el usuario oirá es "haga clic aquí, haga clic aquí, haga clic aquí, haga clic aquí, haga clic aquí, ..." Todos los enlaces ahora son indistinguibles entre sí.
|
||||
|
||||
### Buen texto de enlace
|
||||
|
||||
@@ -100,11 +100,11 @@ Un buen texto de enlace describe brevemente lo que está al otro lado del enlace
|
||||
|
||||
> El [pingüino pequeño](https://en.wikipedia.org/wiki/Little_penguin), a veces conocido como el pingüino de hadas, es el pingüino más pequeño del mundo.
|
||||
|
||||
✅ Navegue por la web durante unos minutos para encontrar páginas que utilicen estrategias de enlace poco conocidas. Compárelos con otros sitios mejor vinculados. ¿Qué aprendes?
|
||||
✅ Navega la web unos minutos hasta encontrar páginas que utilicen estrategias de enlace poco conocidas. Compáralos con otros sitios que demuestren mejores enlaces. ¿Qué aprendiste?
|
||||
|
||||
#### Notas del motor de búsqueda
|
||||
#### Notas sobre motores de búsqueda (search engines)
|
||||
|
||||
Como una ventaja adicional para garantizar que su sitio sea accesible para todos, también ayudará a los motores de búsqueda a navegar por su sitio. Los motores de búsqueda utilizan el texto del enlace para conocer los temas de las páginas. ¡Así que usar un buen texto de enlace ayuda a todos!
|
||||
Además de la ventaja de que ahora tu sitio sea accesible para todos, también ayudas a los motores de búsqueda a navegar mejor tu sitio. Los motores de búsqueda utilizan el texto del enlace para conocer los temas de las páginas. ¡Así que usar un buen texto de enlace ayuda a todos!
|
||||
|
||||
### ARIA
|
||||
|
||||
@@ -117,9 +117,9 @@ Imagina la siguiente página:
|
||||
|
||||
En este ejemplo, duplicar el texto de descripción y orden tiene sentido para alguien que usa un navegador. Sin embargo, alguien que use un lector de pantalla solo escuchará las palabras *descripción* y *orden* repetidas sin contexto.
|
||||
|
||||
Para admitir este tipo de escenarios, HTML admite un conjunto de atributos conocidos como [Aplicaciones de Internet enriquecidas accesibles (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Estos atributos le permiten proporcionar información adicional a los lectores de pantalla.
|
||||
Para apoyar este tipo de escenarios, HTML apoya un conjunto de atributos conocidos como [Aplicaciones de Internet enriquecidas accesibles (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Estos atributos te permiten proporcionar información adicional a los lectores de pantalla.
|
||||
|
||||
> **NOTA**: Al igual que muchos aspectos de HTML, la compatibilidad con el navegador y el lector de pantalla puede variar. Sin embargo, la mayoría de los clientes de la línea principal admiten atributos ARIA.
|
||||
> **NOTA**: Al igual que muchos aspectos de HTML, la compatibilidad con el navegador y el lector de pantalla pueden variar. Sin embargo, la mayoría de los clientes de la línea principal apoyan atributos ARIA.
|
||||
|
||||
Puedes usar `aria-label` para describir el enlace cuando el formato de la página no te lo permite. La descripción del widget podría establecerse como
|
||||
|
||||
@@ -127,14 +127,14 @@ Puedes usar `aria-label` para describir el enlace cuando el formato de la págin
|
||||
<a href="#" aria-label="Widget description">descripción</a>
|
||||
```
|
||||
|
||||
✅ En general, el uso de marcado semántico como se describe arriba reemplaza el uso de ARIA, pero a veces no existe un equivalente semántico para varios widgets HTML. Un buen ejemplo es una barra de progreso. No hay un equivalente HTML para una barra de progreso, por lo que identifica el `<div>` genérico para este elemento con un rol y valores de aria adecuados. La [documentación de MDN sobre ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) contiene más información útil.
|
||||
✅ En general, el uso de HTML semántico como se describe arriba reemplaza el uso de ARIA, pero a veces no existe un equivalente semántico para varios widgets HTML. Un buen ejemplo es una barra de progreso. No hay un equivalente HTML para una barra de progreso, por lo que identifica el `<div>` genérico para este elemento con un rol y valores de aria adecuados. La [documentación de MDN sobre ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contiene más información útil.
|
||||
|
||||
```html
|
||||
<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
```
|
||||
|
||||
## Imagenes
|
||||
## Imágenes
|
||||
|
||||
No hace falta decir que los lectores de pantalla no pueden leer automáticamente lo que hay en una imagen. Asegurarse de que las imágenes sean accesibles no requiere mucho trabajo; de eso se trata el atributo ʻalt`. Todas las imágenes deben tener un ʻalt` para describir lo que son.
|
||||
|
||||
@@ -142,74 +142,74 @@ No hace falta decir que los lectores de pantalla no pueden leer automáticamente
|
||||
|
||||
## El teclado
|
||||
|
||||
Algunos usuarios no pueden usar un mouse o trackpad, sino que dependen de las interacciones del teclado para pasar de un elemento al siguiente. Es importante que su sitio web presente su contenido en un orden lógico para que un teclado pueda acceder a cada elemento a medida que el usuario avanza por un documento. Si construye sus páginas web con marcado semántico y usa CSS para diseñar su diseño visual, su sitio debe ser navegable por teclado, pero es importante probar este aspecto manualmente. Obtenga más información sobre las [estrategias de navegación por teclado](https://webaim.org/techniques/keyboard/).
|
||||
Algunos usuarios no pueden usar un mouse o trackpad, sino que dependen de las interacciones del teclado para pasar de un elemento al siguiente. Es importante que tu sitio web presente tu contenido en un orden lógico para que un teclado pueda acceder a cada elemento a medida que el usuario avanza por un documento. Si construyes tus páginas web con HTML semántico y usas CSS para diseñar tu diseño visual, tu sitio debe ser navegable por teclado, pero es importante comprobar este aspecto manualmente. Obtén más información sobre las [estrategias de navegación por teclado](https://webaim.org/techniques/keyboard/).
|
||||
|
||||
✅ Vaya a cualquier sitio web e intente navegar por él utilizando solo la tecla de tabulación. ¿Qué funciona, qué no funciona? ¿Por qué?
|
||||
✅ Ve a cualquier sitio web e intenta navegar por él, utilizando solo la tecla de tabulación. ¿Qué funciona, qué no funciona? ¿Por qué?
|
||||
|
||||
## Resumen
|
||||
|
||||
Una web accesible para algunos no es una verdadera "red mundial". La mejor manera de garantizar que los sitios que cree sean accesibles es incorporar las mejores prácticas de accesibilidad desde el principio. Si bien hay pasos adicionales involucrados, incorporar estas habilidades en su flujo de trabajo ahora significará que todas las páginas que cree serán accesibles.
|
||||
Una web accesible para algunos no es una verdadera "red mundial". La mejor manera de garantizar que los sitios que creas sean accesibles, es incorporar las mejores prácticas de accesibilidad desde el principio. Si bien hay pasos adicionales involucrados, incorporar estas habilidades en tu flujo de trabajo ahora significará que todas las páginas que creas sean accesibles.
|
||||
|
||||
🚀 Desafío: tome este HTML y vuelva a escribirlo para que sea lo más accesible posible, dados los temas que aprendió.
|
||||
🚀 Desafío: toma este HTML y vuelve a escribirlo para que sea lo más accesible posible, dados los temas que aprendiste.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Example
|
||||
Ejemplo
|
||||
</title>
|
||||
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-header">
|
||||
<p class="site-title">Turtle Ipsum</p>
|
||||
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
|
||||
<p class="site-title">Tortuga Ipsum</p>
|
||||
<p class="site-subtitle">El club de fans de tortugas más importante del mundo</p>
|
||||
</div>
|
||||
<div class="main-nav">
|
||||
<p class="nav-header">Resources</p>
|
||||
<p class="nav-header">Recursos</p>
|
||||
<div class="nav-list">
|
||||
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"Me gustan las tortugas"</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Tortuga">Info básico de tortugas</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Tortugas_(chocolate)">Tortugas de chocolate</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div>
|
||||
<p class="page-title">Welcome to Turtle Ipsum.
|
||||
<a href="">Click here</a> to learn more.
|
||||
<p class="page-title">Bienvenida a la Tortuga Ipsum.
|
||||
<a href="">Haz clic aquí</a> para aprender más.
|
||||
</p>
|
||||
<p class="article-text">
|
||||
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
||||
Tortuga ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-section">
|
||||
<span class="button">Sign up for turtle news</span>
|
||||
<span class="button">Regístrese para recibir 'Noticias Tortuga'</span>
|
||||
</div><div class="footer-section">
|
||||
<p class="nav-header footer-title">
|
||||
Internal Pages
|
||||
</p>
|
||||
<div class="nav-list">
|
||||
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="../">Índice</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="../semantic">Ejemplo Semántico</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="footer-copyright">© 2016 Instrument</span>
|
||||
<p class="footer-copyright">© Instrument 2016</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## [Post-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/6)
|
||||
## [Post-lectura prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/6)
|
||||
|
||||
## Revisión y autoestudio
|
||||
## Revisión y auto-estudio
|
||||
|
||||
Muchos gobiernos tienen leyes sobre los requisitos de accesibilidad. Lea sobre las leyes de accesibilidad de su país de origen. ¿Qué está cubierto y qué no? Un ejemplo es [este sitio web del gobierno](https://accessibility.blog.gov.uk/).
|
||||
Muchos gobiernos tienen leyes sobre los requisitos de accesibilidad. Lee sobre las leyes de accesibilidad de tu país de origen. ¿Qué está cubierto y qué no? Un ejemplo es [este sitio web de gobierno](https://accessibility.blog.gov.uk/).
|
||||
|
||||
** Tarea **: [Analizar un sitio web no accesible](assignment.es.md)
|
||||
|
||||
Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) por Instrument
|
||||
Créditos: [Tortuga Ipsum](https://github.com/Instrument/semantic-html-sample) por Instrument
|
||||
|
||||
> Autor: Christopher Harrison
|
||||
> Autor: Christopher Harrison
|
||||
@@ -25,7 +25,7 @@ Pada dasarnya, pembaca layar akan membaca halaman dari atas ke bawah dengan suar
|
||||
|
||||
Setiap pengembang web harus membiasakan diri dengan pembaca layar. Seperti yang disorot di atas, itu adalah klien yang akan digunakan pengguna Anda. Sama seperti saat Anda memahami cara kerja browser, Anda juga harus mempelajari cara kerja pembaca layar. Untungnya, pembaca layar sudah terpasang di sebagian besar sistem operasi, dan banyak browser berisi ekstensi untuk meniru pembaca layar.
|
||||
|
||||
✅ Coba ekstensi atau alat browser pembaca layar. Salah satu yang hanya berfungsi di Windows adalah [JAWS](https://webaim.org/articles/jaws/). Peramban (browser) juga memiliki alat bawaan yang dapat digunakan untuk tujuan ini; lihat [alat browser Edge yang berfokus pada aksesibilitas ini](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features).
|
||||
✅ Coba ekstensi atau alat browser pembaca layar. Salah satu yang hanya berfungsi di Windows adalah [JAWS](https://webaim.org/articles/jaws/). Peramban (browser) juga memiliki alat bawaan yang dapat digunakan untuk tujuan ini; lihat [alat browser Edge yang berfokus pada aksesibilitas ini](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features).
|
||||
|
||||
### Pemeriksa kontras
|
||||
|
||||
@@ -129,7 +129,7 @@ Anda dapat menggunakan `aria-label` untuk mendeskripsikan link jika format halam
|
||||
<a href="#" aria-label="Deskripsi widget">deskripsi</a>
|
||||
```
|
||||
|
||||
✅ Secara umum, menggunakan markup Semantik seperti yang dijelaskan di atas menggantikan penggunaan ARIA, tetapi terkadang tidak ada padanan semantik untuk berbagai widget HTML. Contoh yang bagus adalah Progressbar. Tidak ada HTML yang setara untuk bilah kemajuan, jadi Anda mengidentifikasi `<div>` generik untuk elemen ini dengan peran yang tepat dan nilai aria. [Dokumentasi MDN tentang ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) berisi informasi yang lebih berguna.
|
||||
✅ Secara umum, menggunakan markup Semantik seperti yang dijelaskan di atas menggantikan penggunaan ARIA, tetapi terkadang tidak ada padanan semantik untuk berbagai widget HTML. Contoh yang bagus adalah Progressbar. Tidak ada HTML yang setara untuk bilah kemajuan, jadi Anda mengidentifikasi `<div>` generik untuk elemen ini dengan peran yang tepat dan nilai aria. [Dokumentasi MDN tentang ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) berisi informasi yang lebih berguna.
|
||||
|
||||
```html
|
||||
<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
|
||||
@@ -24,15 +24,15 @@ Nella sua forma più elementare, uno screen reader leggerà una pagina dall'alto
|
||||
|
||||
Ogni sviluppatore web dovrebbe acquisire familiarità con uno screen reader. Come evidenziato sopra, è il client che gli utenti dello sviluppatore utilizzeranno. Allo stesso modo in cui si ha familiarità con il funzionamento di un browser, si dovrebbe imparare come funziona uno screen reader. Fortunatamente, gli screen reader sono integrati nella maggior parte dei sistemi operativi.
|
||||
|
||||
Alcuni browser hanno anche strumenti incorporati ed estensioni che possono leggere il testo ad alta voce o persino fornire alcune funzionalità di navigazione di base, come [questi strumenti orientati all'accessibilità del browser Edge](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features) . Anche questi sono importanti strumenti di accessibilità, ma funzionano in modo molto diverso dagli screen reader e non dovrebbero essere scambiati per strumenti di test per uno screen reader.
|
||||
Alcuni browser hanno anche strumenti incorporati ed estensioni che possono leggere il testo ad alta voce o persino fornire alcune funzionalità di navigazione di base, come [questi strumenti orientati all'accessibilità del browser Edge](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features) . Anche questi sono importanti strumenti di accessibilità, ma funzionano in modo molto diverso dagli screen reader e non dovrebbero essere scambiati per strumenti di test per uno screen reader.
|
||||
|
||||
✅ Provare un lettore di schermo e un lettore di testo del browser. In Windows, l'[Assistente vocale](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) (Narrator) è incluso per impostazione predefinita e anche [JAWS](https://webaim.org/articles/jaws/) e [NVDA](https://www.nvaccess.org/about-nvda/) possono essere installati Su macOS e iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) è installato per impostazione predefinita.
|
||||
✅ Provare un lettore di schermo e un lettore di testo del browser. In Windows, l'[Assistente vocale](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) (Narrator) è incluso per impostazione predefinita e anche [JAWS](https://webaim.org/articles/jaws/) e [NVDA](https://www.nvaccess.org/about-nvda/) possono essere installati Su macOS e iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) è installato per impostazione predefinita.
|
||||
|
||||
### Zoom
|
||||
|
||||
Un altro strumento comunemente utilizzato dalle persone con problemi di vista è lo zoom. Il tipo più semplice di zoom è lo zoom statico, controllato tramite `Control + segno più (+)` o diminuendo la risoluzione dello schermo. Questo tipo di zoom provoca il ridimensionamento dell'intera pagina, quindi l'utilizzo [di una progettazione responsive](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) della pagina è importante per fornire una buona esperienza utente a livelli di zoom aumentati.
|
||||
Un altro strumento comunemente utilizzato dalle persone con problemi di vista è lo zoom. Il tipo più semplice di zoom è lo zoom statico, controllato tramite `Control + segno più (+)` o diminuendo la risoluzione dello schermo. Questo tipo di zoom provoca il ridimensionamento dell'intera pagina, quindi l'utilizzo [di una progettazione responsive](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) della pagina è importante per fornire una buona esperienza utente a livelli di zoom aumentati.
|
||||
|
||||
Un altro tipo di zoom si basa su un software specializzato per ingrandire un'area dello schermo e fare una panoramica, proprio come usare una vera lente di ingrandimento. Su Windows, [Magnifier](https://support.microsoft.com/en-us/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) è integrato e [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) è un software di ingrandimento di terze parti con più funzionalità e una base di utenti più ampia. Sia macOS che iOS hanno un software di ingrandimento integrato chiamato [Zoom](https://www.apple.com/accessibility/mac/vision/).
|
||||
Un altro tipo di zoom si basa su un software specializzato per ingrandire un'area dello schermo e fare una panoramica, proprio come usare una vera lente di ingrandimento. Su Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) è integrato e [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) è un software di ingrandimento di terze parti con più funzionalità e una base di utenti più ampia. Sia macOS che iOS hanno un software di ingrandimento integrato chiamato [Zoom](https://www.apple.com/accessibility/mac/vision/).
|
||||
|
||||
### Verificatori di contrasto
|
||||
|
||||
@@ -133,7 +133,7 @@ E' possibile utilizzare `aria-label` per descrivere il collegamento quando il fo
|
||||
<a href="#" aria-label="Widget description">description</a>
|
||||
```
|
||||
|
||||
✅ In generale, l'uso del markup semantico come descritto sopra sostituisce l'uso di ARIA, ma a volte non esiste un equivalente semantico per diversi widget HTML. Un buon esempio è una struttura ad albero. Non esiste un equivalente HTML per una struttura ad albero, quindi si identifica il generico `<div>` per questo elemento con un ruolo e valori aria appropriati. La [documentazione MDN su ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) contiene ulteriori utili informazioni.
|
||||
✅ In generale, l'uso del markup semantico come descritto sopra sostituisce l'uso di ARIA, ma a volte non esiste un equivalente semantico per diversi widget HTML. Un buon esempio è una struttura ad albero. Non esiste un equivalente HTML per una struttura ad albero, quindi si identifica il generico `<div>` per questo elemento con un ruolo e valori aria appropriati. La [documentazione MDN su ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contiene ulteriori utili informazioni.
|
||||
|
||||
```html
|
||||
<h2 id="tree-label">File Viewer</h2>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
모든 웹 개발자는 스크린 리더에 익숙해야합니다. 위에서 강조한 것처럼 사용자가 활용할 클라이언트입니다. 브라우저가 작동하는 방식에 익숙한 것과 마찬가지로 스크린 리더가 작동하는 방식을 배워야합니다. 다행히 스크린 리더는 대부분의 운영체제에 내장되어 있으며, 많은 브라우저에는 스크린 리더를 모방하는 확장이 포함되어 있습니다.
|
||||
|
||||
✅ 스크린 리더 브라우저 확장이나 도구를 시도해보세요.[JAWS](https://webaim.org/articles/jaws/)는 윈도우에서만 작동합니다. 브라우저에는 이러한 목적으로 사용할 수 있는 내장 도구도 있습니다; [these accessibility-focused Edge browser tools](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features) 확인합니다.
|
||||
✅ 스크린 리더 브라우저 확장이나 도구를 시도해보세요.[JAWS](https://webaim.org/articles/jaws/)는 윈도우에서만 작동합니다. 브라우저에는 이러한 목적으로 사용할 수 있는 내장 도구도 있습니다; [these accessibility-focused Edge browser tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features) 확인합니다.
|
||||
|
||||
### Contrast checkers
|
||||
|
||||
@@ -127,7 +127,7 @@ CSS는 페이지에 있는 모든 요소의 형태를 완벽하게 제어합니
|
||||
<a href="#" aria-label="Widget description">description</a>
|
||||
```
|
||||
|
||||
✅ 일반적으로, 위에서 설명한 시맨틱 마크업을 사용하는 것은 ARIA의 사용을 대체하지만, 때때로 다양한 HTML 위젯에 해당하는 시맨틱이 없습니다. 좋은 예는 Progressbar입니다. 진행률 표시줄에 해당하는 HTML이 없으므로 적절한 역할 및 aria 값을 사용하여 일반 `<div>`를 식별합니다. [AMDN documentation on ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)에 더 유용한 정보가 포함되어 있습니다.
|
||||
✅ 일반적으로, 위에서 설명한 시맨틱 마크업을 사용하는 것은 ARIA의 사용을 대체하지만, 때때로 다양한 HTML 위젯에 해당하는 시맨틱이 없습니다. 좋은 예는 Progressbar입니다. 진행률 표시줄에 해당하는 HTML이 없으므로 적절한 역할 및 aria 값을 사용하여 일반 `<div>`를 식별합니다. [AMDN documentation on ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)에 더 유용한 정보가 포함되어 있습니다.
|
||||
|
||||
```html
|
||||
<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
|
||||
@@ -24,7 +24,7 @@ Pada asasnya, pembaca skrin akan membaca halaman dari atas ke bawah dengan diden
|
||||
|
||||
Setiap pembangun web harus membiasakan diri dengan pembaca skrin. Seperti yang dinyatakan di atas, ini adalah pelanggan yang akan digunakan pengguna anda Sama seperti anda mengetahui bagaimana penyemak imbas beroperasi, anda harus mengetahui cara pembaca skrin beroperasi. Nasib baik pembaca skrin dimasukkan ke dalam kebanyakan sistem operasi, dan banyak penyemak imbas mengandungi sambungan untuk meniru pembaca skrin.
|
||||
|
||||
✅ Cuba pelanjutan atau alat penyemak imbas pembaca skrin. Yang hanya berfungsi pada Windows ialah [JAWS](https://webaim.org/articles/jaws/). Penyemak imbas juga mempunyai alat bawaan yang dapat digunakan untuk tujuan ini; cuba [alat penyemak imbas Edge yang berfokus kebolehaksesan ini](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features).
|
||||
✅ Cuba pelanjutan atau alat penyemak imbas pembaca skrin. Yang hanya berfungsi pada Windows ialah [JAWS](https://webaim.org/articles/jaws/). Penyemak imbas juga mempunyai alat bawaan yang dapat digunakan untuk tujuan ini; cuba [alat penyemak imbas Edge yang berfokus kebolehaksesan ini](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features).
|
||||
|
||||
### Pemeriksa Kontras
|
||||
|
||||
@@ -127,7 +127,7 @@ Anda boleh menggunakan `aria-label` untuk menerangkan pautan apabila format hala
|
||||
<a href="#" aria-label="Widget description">description</a>
|
||||
```
|
||||
|
||||
✅ Secara umum, menggunakan markup Semantik seperti yang dijelaskan di atas menggantikan penggunaan ARIA, tetapi kadang-kadang tidak ada yang setara dengan semantik untuk pelbagai widget HTML. Contoh yang baik ialah Progressbar. Tidak ada setara HTML untuk bar kemajuan, jadi anda mengenal pasti generik `<div>` untuk elemen ini dengan peranan dan nilai aria yang betul. [MDN documentation on ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) mengandungi maklumat yang lebih berguna.
|
||||
✅ Secara umum, menggunakan markup Semantik seperti yang dijelaskan di atas menggantikan penggunaan ARIA, tetapi kadang-kadang tidak ada yang setara dengan semantik untuk pelbagai widget HTML. Contoh yang baik ialah Progressbar. Tidak ada setara HTML untuk bar kemajuan, jadi anda mengenal pasti generik `<div>` untuk elemen ini dengan peranan dan nilai aria yang betul. [MDN documentation on ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) mengandungi maklumat yang lebih berguna.
|
||||
|
||||
```html
|
||||
<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
|
||||
@@ -0,0 +1,231 @@
|
||||
# 建立無障礙網頁
|
||||
|
||||
|
||||
> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
|
||||
|
||||
## 課前測驗
|
||||
[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5?loc=zh_tw)
|
||||
|
||||
> 網路的強大在於它的普遍性。無論用戶是否有殘疾，讓大家無差別地使用網路是必要的。
|
||||
>
|
||||
> The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
|
||||
>
|
||||
> \- Tim Berners-Lee 爵士 ── 全球資訊網協會總監暨網際網路創立者
|
||||
|
||||
這段話完美地詮釋建立無障礙網頁的重要性。應用程式若無法服務所有人是建立在排他性設計。身為一位網頁開發員，我們需要時刻警惕著網頁親和力。從此時開始，你接下來創建的網頁要能服務給任何人。在這堂課中，你會學習開發無障礙網頁相關的工具與觀念。
|
||||
|
||||
## 相關工具
|
||||
|
||||
### 螢幕報讀器 (Screen readers)
|
||||
|
||||
螢幕報讀器可說是最知名的無障礙工具之一。
|
||||
|
||||
[螢幕報讀器](https://zh.wikipedia.org/wiki/%E8%9E%A2%E5%B9%95%E9%96%B1%E8%AE%80%E5%99%A8)已被廣泛地幫助視覺障礙者。就像我們花了不少時間確保瀏覽器能呈現網頁內容，我們也要確保螢幕報讀器能完整地實現相同的工作。
|
||||
|
||||
基本上，螢幕報讀器會一行一行地報讀網頁的內容。若網頁都是以文字建構而成，那螢幕報讀器就能達到與瀏覽器相同的功效。當然，網頁不可能只有文字：裡面可能會有連結、圖像、顏色或是其他視覺物件。我們必須確保螢幕報讀器也能呈現出上述物件。
|
||||
|
||||
任何一位網頁開發者需要熟悉螢幕報讀器。它們是用戶的好幫手，就像你的瀏覽器一樣，你需要學習螢幕報讀器是如何運作的。幸運的是，它們都內建在大部分的作業系統當中。
|
||||
|
||||
有些瀏覽器內建相關工具與擴充插件，報讀出文字甚至是可互動物件：例如[這些以網頁親和力為目標的 Edge 瀏覽器工具](https://support.microsoft.com/zh-tw/microsoft-edge/microsoft-edge-%E7%9A%84%E5%8D%94%E5%8A%A9%E5%B7%A5%E5%85%B7%E5%8A%9F%E8%83%BD-4c696192-338e-9465-b2cd-bd9b698ad19a)。 它們是重要的輔助工具，或許與螢幕報讀器有所差異，但基本上能測試螢幕報讀器的基本功能。
|
||||
|
||||
✅ 嘗試使用螢幕報讀器或瀏覽器朗讀工具。 在 Windows 中，[Narrator](https://support.microsoft.com/zh-tw/windows/%E5%AE%8C%E6%95%B4%E7%9A%84%E6%9C%97%E8%AE%80%E7%A8%8B%E5%BC%8F%E6%8C%87%E5%8D%97-e4397a0d-ef4f-b386-d8ae-c172f109bdb1)內建在系統中，使用者也可以選擇[JAWS](https://webaim.org/articles/jaws/)與[NVDA](https://www.nvaccess.org/about-nvda/)等額外安裝程式。 macOS 與 iOS 平台上則內建[VoiceOver](https://support.apple.com/guide/voiceover/welcome/10)。
|
||||
|
||||
### 放大器
|
||||
|
||||
另一項為視覺障礙者提供的輔助程式為放大器。最常見的定點放大功能，可以藉由 `Control + 加號(+)` 或降低螢幕解析度來完成。這個步驟會重新縮放整個網頁，確保網頁的[互動式設計](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)是縮放頁面重要的一環。
|
||||
|
||||
其他放大功能會專注在小部分的區域上，這些額外軟體提供類似於實體放大器的功能。 Windows 內建[放大器](https://support.microsoft.com/zh-tw/windows/%E4%BD%BF%E7%94%A8%E6%94%BE%E5%A4%A7%E9%8F%A1%E4%BB%A5%E8%AE%93%E8%9E%A2%E5%B9%95%E4%B8%8A%E7%9A%84%E5%85%A7%E5%AE%B9%E6%9B%B4%E5%AE%B9%E6%98%93%E7%9C%8B%E5%88%B0-414948ba-8b1c-d3bd-8615-0e5e32204198)功能；第三方程式[ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)則受到廣泛用戶的使用。 macOS 與 iOS 內建[Zoom](https://www.apple.com/accessibility/mac/vision/)軟體。
|
||||
|
||||
### 對比度檢查器
|
||||
|
||||
我們必須謹慎地挑選網頁的顏色對比度，讓色盲人士或低視能障礙者有辦法閱讀文章。
|
||||
|
||||
✅ 利用相關的瀏覽器擴充插件來測試看看你所喜愛的網頁，例如[WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=zh-tw)。 你學到了什麼?
|
||||
|
||||
### Lighthouse
|
||||
|
||||
在瀏覽器的開發者工具中，你能找到一款工具名為 Lighthouse。這項工具可以有效的確認網頁親和力。這邊不強制網頁都要經過 Lighthouse 審核，但 100% 的分數是網頁完美的基礎。
|
||||
|
||||
✅ 在你的瀏覽器開發工具中找尋 Lighthouse ，對任何網頁做分析。 你發現了什麼?
|
||||
|
||||
## 提升網頁親和力
|
||||
|
||||
網頁親和力是項相對龐大的主體。要尋求幫助，網路上有許多資源可以參考。
|
||||
|
||||
- [Accessible U - 明尼蘇達大學](https://accessibility.umn.edu/your-role/web-developers)
|
||||
|
||||
我們無法在此說明建立無障礙網頁的所有重點，但下列是開發時重要的核心觀念。從零開始就留意網頁親和力**一定會比**從完成的網頁來增進網頁親和力來的容易。
|
||||
|
||||
## 良好的呈現方式
|
||||
|
||||
### 安全的配色
|
||||
|
||||
每個人的觀點都有所不同，包含觀看顏色。如何選擇配色也是網頁親和力的課題之一。下列是一款實用的[安全配色生產工具](http://colorsafe.co/).
|
||||
|
||||
✅ 舉出在配色上有問題的一個網頁，告訴大家為什麼?
|
||||
|
||||
### 使用合理的 HTML 語法
|
||||
|
||||
在 CSS 與 JavaScript 的支援下，我們無法判斷網頁物件的控制目的。 好比 `<span>` 也可以建立 `<button>`， `<b>` 可以代表超連結。 在造型變化上或許較為容易，但可能會對螢幕報讀器產生混淆。我們必須確保對應的控制有相同的標籤，例如超連結只使用 `<a>`。這才能完整的表現 HTML 的語義化。
|
||||
|
||||
✅ 去任何一個網頁分析開發員與設計員是否使用正確的 HTML 語法。 你能找到語法將連結取代成按鈕嗎? 小提示：在瀏覽器中點擊「右鍵」 > 「檢視網頁原始碼」來確認程式碼。
|
||||
|
||||
### 建立分級的描述性標題的
|
||||
|
||||
螢幕報讀器使用者[非常仰賴文字標題](https://webaim.org/projects/screenreadersurvey8/#finding)，確認並查詢網頁資訊。使用描述性標題並有層次的標籤分別得以創建出較易閱讀的網頁。
|
||||
|
||||
### 使用合理的視覺指引
|
||||
|
||||
CSS 提供完整的網頁造型控制，你可以讓文字框框線隱藏或是讓超連結去除底線。然而去除這些視覺指引會造成視覺障礙者閱讀上的困擾，難以辨別它們原本的功能性。
|
||||
|
||||
## 連結文字的重要性
|
||||
|
||||
超連結是網頁中重點物件。請確保螢幕報讀器能正確的辨識網頁中的超連結。
|
||||
|
||||
### 螢幕報讀器處理連結
|
||||
|
||||
可想而知，螢幕報讀器對於連結與文字的朗讀方式是相同的。因此，判斷下列文章例子，哪個對於網頁親和力上較為合理?
|
||||
|
||||
> 小藍企鵝，又稱做仙企鵝，是世界上最小的企鵝。[點擊這裡](https://zh.wikipedia.org/zh-tw/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D)了解更多資訊。
|
||||
|
||||
> 小藍企鵝，又稱做仙企鵝，是世界上最小的企鵝。造訪 https://zh.wikipedia.org/zh-tw/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D 了解更多資訊。
|
||||
|
||||
> **注意** 讀完之後，請盡量**避免**上方的連結例子。
|
||||
|
||||
記得，螢幕報讀器處理物件的方式會與瀏覽器有所不同。
|
||||
|
||||
### 使用 URL 的問題
|
||||
|
||||
螢幕報讀器會朗讀文字。如果 URL 出現在文章中，它也會被裝置朗讀。綜觀來說，朗讀 URL 不含有任何意義，而且聽來不悅耳。你可能曾在手機上聽過含有網址的文章朗讀。
|
||||
|
||||
### 使用「點擊這裡」的問題
|
||||
|
||||
螢幕報讀器有能力去處理超連結文字，就像我們尋找網頁中的連結一樣。想像所有的超連結文字都表示成「點擊這裡」，用戶就會重複聽到「點擊這裡！點擊這裡！點擊這裡！點擊這裡......」，會造成別人的困擾。
|
||||
|
||||
### 合理的連結文字
|
||||
|
||||
合理的連結文字為連結與文字找到了平衡。像上方例子中的小藍企鵝，連結是導向維基百科的物種頁面。文字*小藍企鵝*就會是完美的連結文字，讓用戶了解點擊後會取得關於小藍企鵝的相關資訊。
|
||||
|
||||
> [小藍企鵝](https://zh.wikipedia.org/zh-tw/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D)，又稱做仙企鵝，是世界上最小的企鵝。
|
||||
|
||||
✅ 花點時間逛逛網頁，觀察它們如何設定連結的導向。比較較合適的連結文字，你學到了什麼?
|
||||
|
||||
#### 關於搜尋引擎
|
||||
|
||||
網頁中的搜尋引擎對網頁親和力有加分的效果，搜尋引擎也能從連結找到你的網頁，了解網頁的主題。所以連結文字對大家都有幫助！
|
||||
|
||||
### ARIA
|
||||
|
||||
想像下方的網頁：
|
||||
|
||||
| 產品 | 描述 | 數量 |
|
||||
| ------------ | ----------- | ----------- |
|
||||
| 物品 | [描述]('#') | [數量]('#') |
|
||||
| 超優物品 | [描述]('#') | [數量]('#') |
|
||||
|
||||
在這項舉例中，瀏覽器用戶可以清楚地辨別重複性的「描述」與「數量」；但對於螢幕報讀器用戶而言，他們只能重複地聽取*「描述」與「數量」*這兩個單詞。
|
||||
|
||||
為了處理這種情況，HTML 提供一套屬性名為[Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)。它能為螢幕報讀器附加額外的朗讀資訊。
|
||||
|
||||
> **注意**： 就如 HTML 的各式物件，瀏覽器與螢幕報讀器能支援的項目也不盡相同。然而，客群主體基本上都支援 ARIA 屬性。
|
||||
|
||||
若網頁不支援部分格式語法，你可以使用 `aria-label` 來描述連結。就如下方物件被標註上 "Widget description" 的標籤。
|
||||
|
||||
``` html
|
||||
<a href="#" aria-label="Widget description">description</a>
|
||||
```
|
||||
|
||||
✅ 總體而言，使用語義化標籤得以取代 ARIA 功能，但是這些標籤無法全面性地覆蓋 HTML 的各式物件。樹(Tree)就是一種例子。沒有 HTML 物件能處理一棵樹，所以你可以在 `<div>` 元素中加上 aria 數值。[關於 ARIA 的 MDN 技術文件](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)說明許多有用的資訊。
|
||||
|
||||
```html
|
||||
<h2 id="tree-label">File Viewer</h2>
|
||||
<div role="tree" aria-labelledby="tree-label">
|
||||
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 圖片
|
||||
|
||||
螢幕報讀器用戶無法直接的了解圖片內容。為了確保圖片也能服務給視覺障礙者，這就是 `alt` 屬性存在的目的。所有重要的圖片都需要有 `alt` 描述圖片的內容。
|
||||
裝飾性圖片的 `alt` 欄位就需要留空字串：`alt=""`。 這樣能避免螢幕報讀器朗讀不必要的裝飾性圖片敘述。
|
||||
|
||||
✅ 你可能會猜到，搜尋引擎也有可能無法辨別圖片。它們也是使用 alt 敘述。因此，無障礙網頁有許多加分要素！
|
||||
|
||||
## 鍵盤輸入
|
||||
|
||||
有些用戶無法使用滑鼠或觸控板，他們需要使用鍵盤中的 "tab" 鍵來切換網頁元素，讓網頁物件能順序性地排列與互動就很重要。如果網頁有語義化標籤並以CSS造型化視覺畫面，網頁基本上就能以鍵盤來切換，當然手動測試還是必要的。了解更多關於[鍵盤調查的策略](https://webaim.org/techniques/keyboard/)。
|
||||
|
||||
✅ 前往任何一個網頁，試著只以鍵盤瀏覽網頁。哪些能成功運作，你又遭遇了哪些困難? 你有辦法解釋嗎?
|
||||
|
||||
## 結論
|
||||
|
||||
能連上網頁並不是網際網路的真諦。從現在起確保網頁能以無障礙的方式呈現。雖然還有很多未被提及的開發資訊，熟習你知道的無障礙開發知識一定會對網頁有所幫助。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 挑戰
|
||||
|
||||
看看下列的 HTML 程式碼。利用你所學到的知識，試著增進它的網頁親和力。
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Example
|
||||
</title>
|
||||
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-header">
|
||||
<p class="site-title">Turtle Ipsum</p>
|
||||
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
|
||||
</div>
|
||||
<div class="main-nav">
|
||||
<p class="nav-header">Resources</p>
|
||||
<div class="nav-list">
|
||||
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div>
|
||||
<p class="page-title">Welcome to Turtle Ipsum.
|
||||
<a href="">Click here</a> to learn more.
|
||||
</p>
|
||||
<p class="article-text">
|
||||
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-section">
|
||||
<span class="button">Sign up for turtle news</span>
|
||||
</div><div class="footer-section">
|
||||
<p class="nav-header footer-title">
|
||||
Internal Pages
|
||||
</p>
|
||||
<div class="nav-list">
|
||||
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="footer-copyright">© 2016 Instrument</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 課後測驗
|
||||
[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/6?loc=zh_tw)
|
||||
|
||||
## 複習與自學
|
||||
|
||||
許多政府機關立法要求無障礙需求。查詢你的國家是否有這些法規。它們涉及了那些，那些又沒包含在其中? 看看[英國政府機關網頁](https://accessibility.blog.gov.uk/)的例子。
|
||||
|
||||
## 作業
|
||||
|
||||
[分析一個非無障礙網頁](assignment.zh-tw.md)
|
||||
|
||||
參考出處： [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample)
|
||||
@@ -2,11 +2,11 @@
|
||||
|
||||
## Instrucciones
|
||||
|
||||
Identifique un sitio web que crea que NO es accesible y cree un plan de acción para mejorar su accesibilidad. Su primera tarea sería identificar este sitio, detallar las formas en que cree que es inaccesible sin usar herramientas analíticas y luego someterlo a un análisis Lighthouse. Tome los resultados de este análisis y describa un plan detallado con un mínimo de diez puntos que muestre cómo se podría mejorar el sitio.
|
||||
Identifica un sitio web que creas que NO es accesible y crea un plan de acción para mejorar su accesibilidad. Tu primer tarea será identificar este sitio, detallar las formas en que crees que es inaccesible sin usar herramientas analíticas y luego someterlo a un análisis Lighthouse. Toma los resultados de este análisis y describe un plan detallado con un mínimo de diez puntos que muestre cómo se podría mejorar el sitio.
|
||||
|
||||
## Rúbrica
|
||||
|
||||
| Criterios | Ejemplar | Adecuada | Necesita mejorar |
|
||||
| Criterios | Ejemplar | Adecuado | Necesita mejorar |
|
||||
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
|
||||
| informe del estudiante | incluye párrafos sobre cómo el sitio es inadecuado, el informe Lighthouse capturado como un pdf, una lista de diez puntos para mejorar, con detalles sobre cómo mejorarlo | falta el 20% de lo requerido | falta el 50% de lo requerido
|
||||
|
|
||||
@@ -0,0 +1,11 @@
|
||||
# 分析一個非無障礙網頁
|
||||
|
||||
## 說明
|
||||
|
||||
辨別一個你認為對視覺障礙者不友善的網頁，列出網頁改進的策略。你需要先發掘各個網頁，不使用分析工具的情況下判斷網頁的親和力，再套用到 Lighthouse 審核工具。將網頁的審核結果轉化成至少十點的改進計畫。
|
||||
|
||||
## 學習評量
|
||||
|
||||
| 作業內容 | 優良 | 普通 | 待改進 |
|
||||
| -------- | ----------------------------------------------------------------------------------- | --------------- | --------------- |
|
||||
| 書面報告 | 文章解釋為何網頁需要被改進，將 Lighthouse 結果轉成 pdf 檔，列出十點詳細的改進計畫。 | 缺少 20% 的內容 | 缺少 50% 的內容 |
|
||||
Reference in New Issue
Block a user