Perceivable
===========

Este artículo ofrece consejos prácticos sobre cómo hacer que tu sitio web cumpla con los criterios de **Percepción** de WCAG 2.0 y 2.1. Los estados perceptivos que los usuarios deben poder reconocer utilizando alguno de sus sentidos.

**Nota:** Para leer las definiciones de la W3C sobre Percepción y las guías para cumplir con los criterios dirígete a Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

Pauta 1.1 — Dar alternativas de texto para contenido no textual
---------------------------------------------------------------

La clave aquí es convertir el texto a otros formatos que puedan ser entendidos por personas con otras capacidades; ya sea si utilizan un screen-reader, zoom o un lector de braille. El contenido no textual se refiere a elementos multimedia como imágenes, audio y vídeo.

| Criterio de éxito | Cómo cumplir | Recursos prácticos |
| --- | --- | --- |
| 1.1.1 Alternativas textuales (A) | 
 Toda imagen que sea útil para el usuario debe tener un texto
 alternativo.
  | Texto alternativo. |
| 
 Las imágenes complejas o gráficos deben tener una alternativa
 accesible, ya sea en al misma página o en una externa. Utiliza un
 elemento de link en vez del atributo `longdesc`.
  | 
 Una alternativa textual o una tabla puede resolverlo (ver
 HTML table advanced features and accessibility
 y
 Other text alternative mechanisms
 para leer sobre el argumento en contra de `longdesc`.
  |
| 
 El contenido multimedia (por ejemlo, audio o vídeo) debería tener por lo
 menos una descripción accesible disponible (captions o similar).
  | 
 Ver
 alternativas de texto
 para opciones de captions, y
 Audio transcripts (en-US),
 Video text tracks (en-US)
 o
 Other multimedia content (en-US)
 para otras alternativas.
  |
| 
 Los elementos de interfaz como botones o elementos de formulario deberán
 tener `label`s que describan su propósito.
  | 
 Deberás asegurarte de que los botones describan su función (por ejemplo,
 `<button>Subir imagen</button>`). Para más
 información ver
 UI controls.
  |
| 
 Implementa elementos decorativos (imágenes o vídeos) de manera que sea
 invisibles para lectores de pantalla, de esta forma evitarás confundir
 a estos usuarios.
  | 
 Las imágenes decorativas deben ser implementadas utilizando la
 propiedad `background-image`*.* Si debes incluir una
 imagen con la etiqueta `<img>` deberás agregarle
 un atributo `alt` vacío, de otra manera los lectores de
 pantalla podrían leerlo.


 Si incluyes un vídeo o audio en tu sitio que se reproduce
 automáticamente intenta de que sea lo menos molesto posible. No hagas
 que se vea ni actúe como contenido y provee una forma de apagarlo.
  |

**Nota:** Ver también WCAG description for Guideline 1.1: Text alternatives.

Pauta 1.2 — Proporcionar alternativas para los medios tempo-dependientes
------------------------------------------------------------------------

Los medios tempo-dependientes se refieren a multimedia con una duración (audio y vídeo, por ejemplo). Ten en cuenta que si este contenido multimedia funciona como una alternativa a un contenido textual no necesitas proveer otra alternavtiva.

| Criterio de éxito | Cómo cumplir | Recursos prácticos |
| --- | --- | --- |
| 1.2.1 Provee alternativas para multimedia de solo audio o solo vídeo (A) | A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video). | See Audio transcripts (en-US) for transcript information. No audio description tutorial available as yet. |
| 1.2.2 Provee captions para los vídeos (A) | You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video. | See Video text tracks (en-US) for HTML5 video captions, and Other multimedia content (en-US) for other technologies. See also Add your own subtitles & closed captions (YouTube). |
| 1.2.3 Provee texto alternativo o una descripción para el audio del vídeo (A) | You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone. | See Audio transcripts (en-US) for transcript information. No audio description tutorial available as yet. |
| 1.2.4 Provee captions para audio en vivo (AA) | You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.) |  |
| 1.2.5 Provee descripciones de adio para vídeo pre-grabado (AA) | Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video. |  |
| 1.2.6 Provee lenguaje de signos equivalente a el audio pre-grabado (AAA) | An equivalent sign language video should be provided for any prerecorded content containing audio. |  |
| 1.2.7 Provee un vídeo extendido con descripciones de audio (AAA) | Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions). |  |
| 1.2.8 Provee una alternativa para los elementos multimedia pre-grabados (AAA) | For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content. | See Audio transcripts (en-US) for transcript information. |
| 1.2.9 Provee una transcripción para el audio en vivo (AAA) | For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content. | See Audio transcripts (en-US) for transcript information. |

**Nota:** Ver también la descripción de WCAG Guideline 1.2: Time-based Media: Provide alternatives for time-based media.

Pauta 1.3 — Crear contenido que pueda presentarse de diferentes formas
----------------------------------------------------------------------

Esta pauta hace referencia a la posibilidad de que todo contenido pueda ser consumido de distintas formas, adaptándose a las necesidades del usuario.

| Criterios de éxito | Cómo cumplir | Recursos prácticos |
| --- | --- | --- |
| 1.3.1 Info and relationships (A) | 
 Any content structure — or visual relationship made between content — can also be determined
 programmatically, or be inferred from text description. The main situations in which this is
 relevant are:
 * Text labels and the form elements they describe are associated unambiguously using the
 `<label>` element, which can be picked up by screenreaders, etc.
* Image alt text — content images should have text available that clearly describes the image's
 contents, which can be programmatically associated with it (e.g. `alt` text), or
 otherwise is easy to associate (e.g. describes it and is sat right next to it). This should
 means that the full meaning can still be inferred even if you can't see the image.
* Lists — if the order of list items is important, and ordered list should be used
 (`<ol>`).
 | The whole of

HTML: A good basis for accessibility is packed
 with information about this, but you should particularly refer to Good semantics, UI controls, and Text alternatives.
  |
| 1.3.2 Meaningful content sequence (A) | 
 A sensible, logical reading order should be easy to determine for any content, even if it is visually
 presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g.
 headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the
 markup.
  | Again, refer to HTML: A good basis for accessibility. |
| 1.3.3 Sensory characteristics (A) | 
 Instructions for operating controls or understanding content do not rely on a single sense — this may
 prove inaccessible to people with a disability related to that sense, or a device that does not
 support that sense. So for example:
 * "Click the round button to continue" — The button should be clearly labelled so that it is
 obvious that it is the button you need to press. If there are multiple buttons, make sure there
 are all clearly labelled to distinguish their function.
* "Listen to the audio instructions for guidance" — This is obviously problematic — audio will be
 inaccessible to those with heading impairments, whereas text can be read, but also spoken by a
 screenreader if required.
* "Swipe from the right hand side of the screen to reveal the menu" — some users might not be able
 to swipe the screen, either due to disability or because their device does not support touch. An
 alternative should be provided, such as a keyboard shortcut or button that can be activated by
 keyboard or other means.

**Note**: Conveying instructions solely by color is related, but covered in a
 different guideline — 1.4.1.

 |  |
| 1.3.4 Orientation (AA) *added
in 2.1* | 
 Content does not restrict its view and operation to a single display orientation, such as portrait or
 landscape, unless a specific display orientation is essential.
  | Understanding Orientation |
| 1.3.5 Identify Input Purpose (AA) *added in 2.1* | 

 Follow the list of 53 input fields to
 programmatically identify the purpose of a field.
  | Understanding Identify
Input Purpose |
| 1.3.6 Identify Purpose (AAA) *added in 2.1* | 
 In content implemented using markup languages, the purpose of User Interface Components, icons, and
 regions can be programmatically determined.
  | Understanding Identify
Purpose |

**Nota:** Ver también la descripción de WCAG: Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.

Pauta 1.4: Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo
---------------------------------------------------------------------------------------------------------------------

Esta pauta tiene como objetivo la creación de contenido que sea fácil de diferenciar del fondo y otras decoraciones. El ejemplo clásico es sobre color (tanto en relación al contraste como utilizarlo para transmitir información), pero aplica también en otras situaciones.

| Criterios de éxito | Cómo cumplir | Recursos prácticos |
| --- | --- | --- |
| 1.4.1 Use of color (A) | 
 Color should not be solely relied upon to convey information — for example, in forms you should never mark
 required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a
 label of "required" would be more appropriate.
  | See Color and color
contrast and Multiple
labels. |
| 1.4.2 Audio controls (A) | 
 For any audio that plays for longer than three seconds, accessible controls should be provided to play and
 pause the audio/video, and mute/adjust volume.
  | Use native `<button>`s to provide accessible keyboard controls, as shown in Video player
syling basics (en-US). |
| 1.4.3 Minimum contrast (AA) | 
 The color contrast between background and foreground content should be at a minimum level to ensure
 legibility:
 * Text and its background should have a contrast ratio of at least 4.5.1.
* Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least
 18pt, or 14pt bold.
 | See Color and color
contrast. |
| 1.4.4 Resize text (AA) | 
 The page should be readable and usable when the text size is doubled. This means that designs should be
 responsive, so that when the text size is increased, the content is still accessible.
  |  |
| 1.4.5 Images of text (AA) | 
 Images should NOT be used to present content where text would do the job. For example, if an image is mostly
 textual, it could be represented using text as well as images.
  |  |
| 1.4.6 Enhanced contrast (AAA) | This follows, and builds on, criterion 1.4.3.* Text and its background should have a contrast ratio of at least 7.1.
* Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least
 18pt, or 14pt bold.
 |  |
| 1.4.7 Low or no background audio (AAA) | 
 Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the
 content can be easily understood.
  |  |
| 1.4.8 Visual presentation (AAA) | For text content presentation, the following should be true:* Foreground and background colors should be user-selectable.
* Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.
* Text should not be fully justified (e.g. `text-align: justify;`)
* line height should be at least 1.5 times the text size within paragraphs (e.g.
 `line-height: 1.5;`), and at least 2.25 times the text size between paragraphs (e.g.
 `padding: 2.25rem;`)
* When the text size is doubled, the content should not need to be scrolled.
 |  |
| 1.4.9 Images of text (No Exception) (AAA) | 
 Text should not be presented as part of an image unless it is purely decoration (i.e. it does not convey any
 content), or cannot be presented in any other way.
  |  |
| 1.4.10 Reflow (AA) *added in
2.1* | * No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like
 Arabic)
* No vertical scrolling for top-to-bottom languages (like Japanese)
* Except for parts of the content which require two-dimensional layout for usage or meaning (like a large
 data table).
 | Understanding Reflow |
| 1.4.11 Non-Text Contrast(AA) *added in 2.1* | Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. | Understanding Non-Text
Contrast |
| 1.4.12 Text Spacing (AA) *added in 2.1* | No loss of content or functionality occurs when the following styles are applied:* Line height (line spacing) to at least 1.5 times the font size;
* Spacing following paragraphs to at least 2 times the font size;
* Letter spacing (tracking) to at least 0.12 times the font size;
* Word spacing to at least 0.16 times the font size.
 | Understanding Text Spacing |
| 1.4.13 Content on Hover or Focus (AA) *added in 2.1* | 
 Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion
 specifies three conditions that must be met:
 * dismissable (can be closed/removed)
* hoverable (the additional content does not disappear when the pointer is over it)
* persistent (the additional content does not disappear without user action)
 | Understanding Content on
Hover or Focus |

**Nota:** Ver también la descripción de WCAG: Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background..