You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The web is used by a wide variety of people, including those who have visual or motor impairments.
4
-
A variety of assistive technologies are available that make it much easier for these groups to
5
-
interact with web-based software applications.
6
-
In addition, designing an application to be more accessible generally improves the user experience for all users.
3
+
Hay una amplia variedad de personas que utilizan la web, algunas de ellas con discapacidad visual o motora.
4
+
Existen diferentes tecnologías de apoyo que hacen que sea mucho más fácil para estos grupos
5
+
interactuar con aplicaciones de software basadas en la web.
6
+
Además, diseñar una aplicación para que sea más accesible, normalmente mejora la experiencia de usuario en general.
7
7
8
-
For an in-depth introduction to issues and techniques for designing accessible applications, see the [Accessibility](https://developers.google.com/web/fundamentals/accessibility/#what_is_accessibility)section of the Google's [Web Fundamentals](https://developers.google.com/web/fundamentals/).
8
+
Para una introducción en profundidad a los problemas y técnicas sobre el diseño de aplicaciones accesibles, puede consultar la sección de [Accesibilidad](https://developers.google.com/web/fundamentals/accessibility/#what_is_accessibility)de Google[Fundamentos Web](https://developers.google.com/web/fundamentals/).
9
9
10
-
This page discusses best practices for designing Angular applications that
11
-
work well for all users, including those who rely on assistive technologies.
10
+
Esta página habla de las mejores prácticas para diseñar aplicaciones en Angular que funcionan
11
+
bien para todos los usuarios, incluyendo aquéllos que necesitan tecnologías de apoyo.
12
12
13
13
<divclass="alert is-helpful">
14
14
15
-
For the sample app that this page describes, see the <live-example></live-example>.
15
+
Para ver la aplicación de ejemplo que describe esta página, ir a <live-example></live-example>.
16
16
17
17
</div>
18
18
19
-
## Accessibility attributes
19
+
## Atributos de accesibilidad
20
20
21
-
Building accessible web experience often involves setting [ARIA attributes](https://developers.google.com/web/fundamentals/accessibility/semantics-aria)
22
-
to provide semantic meaning where it might otherwise be missing.
23
-
Use [attribute binding](guide/attribute-binding)template syntax to control the values of accessibility-related attributes.
21
+
Crear una web accesible a menudo implica establecer los [atributos ARIA](https://developers.google.com/web/fundamentals/accessibility/semantics-aria)
22
+
para proporcionar la semántica que, de otro modo, podría no estar presente.
23
+
Usa la plantilla de sintaxis del [enlace de atributos](attribute binding) (guide/attribute-binding) para controlar los valores de los atributos relacionados con la accesibilidad.
24
24
25
-
When binding to ARIA attributes in Angular, you must use the`attr.` prefix, as the ARIA
26
-
specification depends specifically on HTML attributes rather than properties of DOM elements.
25
+
Para enlazar los atributos ARIA en Angular, debes usar el prefijo`attr.`, ya que la especificación ARIA
26
+
depende de los atributos HTML y no de las propiedades de los elementos del DOM.
27
27
28
28
```html
29
29
<!-- Use attr. when binding to an ARIA attribute -->
Note that this syntax is only necessary for attribute _bindings_.
34
-
Static ARIA attributes require no extra syntax.
33
+
Observa que esta sintaxis solo es necesaria para los _enlaces_ de atributos.
34
+
Los atributos ARIA estáticos no requieren de ninguna sintaxis adicional.
35
35
36
36
```html
37
37
<!-- Static ARIA attributes require no extra syntax -->
38
38
<buttonaria-label="Save document">...</button>
39
39
```
40
40
41
-
NOTE:
41
+
NOTA:
42
42
43
43
<divclass="alert is-helpful">
44
44
45
-
By convention, HTML attributes use lowercase names (`tabindex`), while properties use camelCase names (`tabIndex`).
45
+
Por convenio, los atributos HTML se escriben en minúscula (`tabindex`), mientras que para las propiedades se usa *camelCase* (`tabIndex`).
46
46
47
-
See the [Binding syntax](guide/binding-syntax#html-attribute-vs-dom-property)guide for more background on the difference between attributes and properties.
47
+
Consulta la guía [Sintaxis del enlace](guide/binding-syntax#html-attribute-vs-dom-property)para saber más sobre las diferencias entre atributos y propiedades.
48
48
49
49
</div>
50
50
51
51
52
-
## Angular UI components
52
+
## Componentes del interfaz de usuario de Angular
53
53
54
-
The [Angular Material](https://material.angular.io/) library, which is maintained by the Angular team, is a suite of reusable UI components that aims to be fully accessible.
55
-
The [Component Development Kit (CDK)](https://material.angular.io/cdk/categories)includes the `a11y`package that provides tools to support various areas of accessibility.
56
-
For example:
54
+
La librería [Angular Material](https://material.angular.io/), que es mantenida por el equipo Angular, es un conjunto de componentes reutilizables para la interfaz de usuario que pretende ser totalmente accesible.
55
+
El [Kit de Desarrollo de Componentes (CDK)](https://material.angular.io/cdk/categories)(Component Development Kit) incluye el paquete `a11y`que proporciona herramientas para dar soporte a distintos aspectos de la accesibilidad.
56
+
Por ejemplo:
57
57
58
-
*`LiveAnnouncer`is used to announce messages for screen-reader users using an `aria-live` region. See the W3C documentation for more information on [aria-live regions](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live).
58
+
*`LiveAnnouncer`se utiliza para comunicar mensajes a los usuarios de lectores de pantalla que usan la region `aria-live`. Se puede consultar la documentación de la W3C para obtener más información sobre [regiones aria-live](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live).
59
59
60
-
*The `cdkTrapFocus`directive traps Tab-key focus within an element. Use it to create accessible experience for components like modal dialogs, where focus must be constrained.
60
+
*La directiva `cdkTrapFocus`limita el foco de la tecla de tabulación para que se quede dentro de un elemento. Úsala para crear una experiencia accesible en componentes como las ventanas modales, donde el foco debe estar limitado.
61
61
62
-
For full details of these and other tools, see the [Angular CDK accessibility overview](https://material.angular.io/cdk/a11y/overview).
62
+
Para obtener más detalles sobre esta y otras herramientas, consulta el [resumen de accesibilidad del Angular CDK](https://material.angular.io/cdk/a11y/overview).
63
63
64
64
65
-
### Augmenting native elements
65
+
### Aumento de elementos nativos
66
66
67
-
Native HTML elements capture a number of standard interaction patterns that are important to accessibility.
68
-
When authoring Angular components, you should re-use these native elements directly when possible, rather than re-implementing well-supported behaviors.
67
+
Los elementos HTML nativos capturan una serie de patrones de interacción estándar que son importantes para la accesibilidad.
68
+
Al crear componentes de Angular, deberías reutilizar estos elementos nativos directamente cuando sea posible, en lugar de volver a implementar comportamientos bien soportados.
69
69
70
-
For example, instead of creating a custom element for a new variety of button, you can create a component that uses an attribute selector with a native `<button>` element.
71
-
This most commonly applies to `<button>`and`<a>`, but can be used with many other types of element.
70
+
Por ejemplo, en lugar de crear un elemento personalizado para un nuevo tipo de botón, puedes crear un componente que use un selector de atributos con un elemento nativo `<button>`.
71
+
Esto se aplica sobre todo a `<button>`y`<a>`, pero se puede usar con muchos otros tipos de elementos.
72
72
73
73
You can see examples of this pattern in Angular Material: [`MatButton`](https://github.com/angular/components/blob/master/src/material/button/button.ts#L66-L68), [`MatTabNav`](https://github.com/angular/components/blob/master/src/material/tabs/tab-nav-bar/tab-nav-bar.ts#L67), [`MatTable`](https://github.com/angular/components/blob/master/src/material/table/table.ts#L17).
74
74
75
-
### Using containers for native elements
75
+
### Uso de contenedores para elementos nativos
76
76
77
-
Sometimes using the appropriate native element requires a container element.
78
-
For example, the native `<input>` element cannot have children, so any custom text entry components need
79
-
to wrap an `<input>` with additional elements.
80
-
While you might just include the `<input>` in your custom component's template,
81
-
this makes it impossible for users of the component to set arbitrary properties and attributes to the input element.
82
-
Instead, you can create a container component that uses content projection to include the native control in the
83
-
component's API.
77
+
A veces, para usar el elemento nativo apropiado hace falta un contenedor.
78
+
Por ejemplo, el elemento nativo `<input>` no puede tener hijos, por lo que cualquier componente de entrada de texto personalizado necesita envolver un `<input>` con elementos adicionales.
84
79
85
-
You can see [`MatFormField`](https://material.angular.io/components/form-field/overview) as an example of this pattern.
80
+
Si bien puedes incluir el `<input>` en la plantilla de tu componente personalizado,
81
+
esto hace que sea imposible para los usuarios de dicho componente establecer propiedades y atributos arbitrarios para el elemento de entrada.
82
+
En su lugar, puedes crear un componente contenedor que utilice la proyección de contenido para incluir el control nativo en el
83
+
API del componente.
86
84
87
-
## Case study: Building a custom progress bar
85
+
Puedes consultar [`MatFormField`](https://material.angular.io/components/form-field/overview) para ver un ejemplo de este patrón.
88
86
89
-
The following example shows how to make a simple progress bar accessible by using host binding to control accessibility-related attributes.
87
+
## Caso práctico: creación de una barra de progreso personalizada
90
88
91
-
* The component defines an accessibility-enabled element with both the standard HTML attribute `role`, and ARIA attributes. The ARIA attribute `aria-valuenow` is bound to the user's input.
89
+
El siguiente ejemplo muestra cómo hacer que una barra de progreso simple sea accesible utilizando el *host binding* para controlar los atributos relacionados con la accesibilidad.
90
+
91
+
* El componente define un elemento habilitado para accesibilidad con el atributo HTML estándar `role` y los atributos ARIA. El atributo ARIA `aria-valuenow` está vinculado a la entrada del usuario.
El seguimiento y el control del [foco](https://developers.google.com/web/fundamentals/accessibility/focus/) en una interfaz de usuario son aspectos muy importantes en el diseño si queremos tener en cuenta la accesibilidad.
104
+
Al usar el enrutamiento de Angular, debes decidir dónde va el foco de la página al navegar.
102
105
103
-
Tracking and controlling [focus](https://developers.google.com/web/fundamentals/accessibility/focus/) in a UI is an important consideration in designing for accessibility.
104
-
When using Angular routing, you should decide where page focus goes upon navigation.
106
+
Para evitar depender únicamente de señales visuales, te debes asegurar de que el código de enrutamiento actualiza el foco después de la navegación de la página.
107
+
Usa el evento `NavigationEnd` del servicio` Router` para saber cuándo actualizar el foco.
105
108
106
-
To avoid relying solely on visual cues, you need to make sure your routing code updates focus after page navigation.
107
-
Use the `NavigationEnd` event from the `Router` service to know when to update
108
-
focus.
109
+
El siguiente ejemplo muestra cómo encontrar y poner el foco en el contenido principal de la cabecera (el elemento `#main-content-header`) dentro del DOM después de la navegación.
109
110
110
111
The following example shows how to find and focus the main content header in the DOM after navigation.
0 commit comments