mdn · hanyujie2002 · May 14, 2023 · May 15, 2023
@@ -0,0 +1,12 @@
+---
+title: Formularios
+slug: Web/Accessibility/ARIA/forms
+---
+
+Las siguientes páginas proporcionan diversas técnicas para mejorar la accesibilidad de los formularios web:
+
+- [Consejos básicos para formularios](/es/Accessibility/ARIA/Basic_form_hints): Añadir consejos y descripciones para campos erróneos u obligatorios
+- [Alertas](/es/Accessibility/ARIA/forms/alerts): uso de alertas para proporcionar mensajes de error de validación del lado del cliente
+- [Etiquetas complejas](/es/Accessibility/ARIA/forms/Multipart_labels): Habilitación de etiquetas complejas con elementos en su interior
+
+Consulta también [el artículo de Yahoo! sobre validación de formularios y ARIA](https://web.archive.org/web/20120801225355/http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html) (recuperado desde archive.org), que abarca gran parte del mismo contenido.
@@ -0,0 +1,37 @@
+---
+title: 'Etiquetas complejas: Utilizando ARIA para etiquetas con campos embebidos dentro
+  de ellos'
+slug: Web/Accessibility/ARIA/forms/Multipart_labels
+original_slug: Web/Accessibility/ARIA/forms/Etiquetas_complejas
+---
+
+## Problema
+
+Tiene un formulario donde le pregunta a su usuario una pregunta, pero la respuesta es mencionada en la misma pregunta. Un ejemplo clásico que todos conocemos de las configuraciones de nuestro navegador es la opción "Eliminar el historial despues de x días". "Eliminar el historial despues" está a la izquierda de la caja de texto, x es el número, por ejemplo 21, y la palabra "días" sigue a la caja de texto, formando una oración que es fácil de comprender.
+
+Si se esta usando un lector de pantalla, quizá ha notado que, cuando se van a las configuraciónes de Firefox, el lector dice: ¿"Eliminar el historial después de 21 días"?, seguidamente anuncia que está en una caja de texto y que contiene el número 21. ¿No es super? No necesita navegar alrededor para darse cuenta de la unidad. "Días" podría ser fácilmente "meses" o "años", y en muchos dialogos ordinarios no hay forma de descubrirlo más que navegando utilizando los comandos de revisión del lector de pantalla.
+
+La solución esta en un atributo ARIA llamado **aria-labelledby**. Su parámetro es una cadena de texto que consiste de los IDs de los elementos HTML que se deseen concatenar dentro de un solo nombre accesible.
+
+Tanto **aria-labelledby** y **aria-describedby** se especifican en el elemento de formulario que debe etiquetarse, por ejemplo un \<input>. En ambos casos, la etiqueta for/label para ligar a los controles que puedan existir son anuladas por **aria-labelledby**. Si en una página se provee **aria-labelledby**, se debería colocar también una etiqueta para también soportar navegadores antiguos que no tengan aún soperte ARIA. Con Firefox 3, los usuarios ciegos tendrán automáticamente mejor accesibilidad con el nuevo atributo, pero los usuarios de navadores antiguos de esta forma no son dejados en la oscuridad.
+
+#### Ejemplo:
+
+{{EmbedLiveSample('')}}
+
+```html
+<input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" type="checkbox" />
+<span id="etiquetaApagado">Apagar computadora después de </span>
+<input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" id="tiempoApagado" type="text" value="10" />
+<span id="unidadApagado"> minutos</span>
+```
+
+## Nota para usuarios de JAWS 8
+
+JAWS 8.0 tiene su propia lógica para encontrar etiquetas, causando que siempre sobreescriba el nombre accesible que obtiene la caja de texto de un documento HTML. Con JAWS 8, no se ha encontrado una manera de hacer que acepte la etiqueta del ejemplo anterior. Pero NVDA y Window-Eyes funcionan correctamente, Orca on Linux tampoco tiene problemas.
+
+> **Nota:** TBD (pendiente): añadir más información sobre compatiblidad
+
+## ¿Puede hacerse sin ARIA?
+
+Community member Ben Millard has pointed out in a blog post that [controls can be embedded in labels as shown in the above example using HTML 4](http://projectcerbera.com/blog/2008/03#day24), simply by embedding the input into the label. Thanks for that info, Ben! It is very useful and shows that some techniques that have been available for years escape even the gurus sometimes. This technique works in Firefox; however, it doesn't currently work in many other browsers, including IE. For labels with embedded form controls, using **aria-labelledby** is still the best approach.
@@ -0,0 +1,26 @@
+---
+title: Comunidad
+slug: Web/Accessibility/Community
+original_slug: Web/Accesibilidad/Comunidad
+---
+
+Si conoces alguna lista de correo, grupo de noticias, foro, o comunidad relacionada con la _accesibilidad_ que pueda ser de interés. Por favor, pon aquí un enlace.
+
+### Mozilla
+
+- La _Accesibilidad_ en la comunidad Mozilla... en inglés
+- [como lista de correo](https://lists.mozilla.org/listinfo/support-accessibility)
+- [como grupo de noticias](https://groups.google.com/group/mozilla.support.accessibility)
+- [como RSS](https://groups.google.com/group/mozilla.support.accessibility/feeds)
+
+### Listas de correo
+
+- [Accesoweb](http://es.groups.yahoo.com/group/accesoweb) Lista en castellano sobre problemas y soluciones de diseño accesible para la Red de la **Fundación Sidar**.
+
+### Bitácoras
+
+- [Accesibilidad, Usabilidad y Estándares Web](http://accesibilidadweb.blogspot.com/) Este es un blog dedicado a todos los temas relacionados con la accesibilidad web, usabilidad y estándares web.
+
+### Otros Sitios
+
+- [El sitio del WAI (en)](http://www.w3.org/WAI/)
@@ -0,0 +1,35 @@
+---
+title: HTMLShadowElement.getDistributedNodes()
+slug: Web/API/HTMLShadowElement/getDistributedNodes
+l10n:
+  sourceCommit: 387d0d4d8690c0d2c9db1b85eae28ffea0f3ac1f
+---
+
+{{APIRef("Web Components")}}{{Deprecated_Header}}{{Non-standard_Header}}
+
+El método **`HTMLShadowElement.getDistributedNodes()`**
+devuelve un {{domxref("NodeList")}} estático de los {{glossary("distributed nodes","nodos distribuidos")}}
+asociado con este elemento `<shadow>`.
+
+## Valor
+
+Un {{domxref("NodeList")}}.
+
+## Ejemplo
+
+```js
+// Obtener los nodos distribuidos
+const nodes = myShadowObject.getDistributedNodes();
+```
+
+## Especificaciones
+
+Esta función ya no está definida por ninguna especificación.
+
+## Compatibilidad con navegadores
+
+{{Compat}}
+
+## Véase también
+
+- [HTMLShadowElement](/es/docs/Web/API/HTMLShadowElement)
@@ -0,0 +1,36 @@
+---
+title: HTMLShadowElement
+slug: Web/API/HTMLShadowElement
+l10n:
+  sourceCommit: 387d0d4d8690c0d2c9db1b85eae28ffea0f3ac1f
+---
+
+{{APIRef("Web Components")}}{{Deprecated_Header}}{{Non-standard_Header}}
+
+La interfaz **`HTMLShadowElement`** representa un elemento HTML {{HTMLElement("shadow")}}, que se utiliza en [Shadow DOM](/es/docs/Web/Web_Components/Using_shadow_DOM).
+
+{{InheritanceDiagram}}
+
+## Propiedades de instancia
+
+_Esta interfaz hereda las propiedades de {{domxref("HTMLElement")}}._
+
+## Métodos de instancia
+
+_Esta interfaz hereda los métodos de {{domxref("HTMLElement")}}._
+
+- {{domxref("HTMLShadowElement.getDistributedNodes()")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
+  - : Devuelve una {{domxref("NodeList")}} estática de los {{glossary("distributed nodes","nodos distribuidos")}} asociados con este elemento `<shadow>`.
+
+## Especificaciones
+
+Esta función ya no está definida por ninguna especificación.
+
+## Compatibilidad con navegadores
+
+{{Compat}}
+
+## Véase también
+
+- El elemento HTML {{HTMLElement("shadow")}}, que implementa esta interfaz.
+- [Shadow DOM](/es/docs/Web/Web_Components/Using_shadow_DOM)
@@ -0,0 +1,68 @@
+---
+title: Notification.permission
+slug: Web/API/Notification/permission
+---
+
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
+
+La propiedad de solo lectura `permission` de la interfaz {{domxref("Notification")}} indica el permiso concedido por el usuario al origen actual para mostrar notificaciones web.
+
+## Sintaxis
+
+```js
+var permission = Notification.permission;
+```
+
+### Valor
+
+Una {{domxref("DOMString")}} representa el permiso actual. El valor puede ser:
+
+- `granted`: El usuario ha concedido el permiso explicitamente al origen actual para mostrar notificaciones del sistema.
+- `denied`: El usuario ha denegado el permiso explicitamente al origen actual para mostrar notificaciones del sistema.
+- `default`: La decisión del usuario es deconocida; en este caso la aplicación actuará como si el permiso fuese `denied`
+
+## Ejemplos
+
+El siguiente código podría ser usado si quisieras primero comprobar si las notificaciones son soportadas, luego comprobar si los permisos han sido concedidos al origen actual para enviar notificaciones, y luego solicitar permiso de ser requerido, antes de enviar una notificación.
+
+```js
+function notifyMe() {
+  // Comprobamos si el navegador soporta las notificaciones
+  if (!("Notification" in window)) {
+    console.log("Este navegador no es compatible con las notificaciones de escritorio");
+  }
+
+  // Comprobamos si los permisos han sido concedidos anteriormente
+  else if (Notification.permission === "granted") {
+    // Si es correcto, lanzamos una notificación
+    var notification = new Notification("Hola!");
+  }
+
+  // Si no, pedimos permiso para la notificación
+  else if (Notification.permission !== 'denied' || Notification.permission === "default") {
+    Notification.requestPermission(function (permission) {
+      // Si el usuario nos lo concede, creamos la notificación
+      if (permission === "granted") {
+        var notification = new Notification("Hola!");
+      }
+    });
+  }
+
+  // Por último, si el usuario ha denegado el permiso, y quieres ser respetuoso, no hay necesidad de molestarlo.
+}
+```
+
+## Especificaciones
+
+{{Specifications}}
+
+## Compatibilidad con Navegadores
+
+{{Compat}}
+
+## Véase también
+
+- [API de Notificaciones](/es/docs/Web/API/Notifications_API)
+- [Usando la API de Notificaciones](/es/docs/Web/API/Notifications_API/Using_the_Notifications_API)
+- [API de Permisos](/es/docs/Web/API/Permissions_API)
+- [Usando la API de Permisos](/es/docs/Web/API/Permissions_API/Using_the_Permissions_API)
@@ -0,0 +1,91 @@
+---
+title: Notification.requestPermission()
+slug: Web/API/Notification/requestPermission
+---
+
+{{APIRef("Web Notifications")}}{{securecontext_header}}
+
+> **Nota:** Safari aún usa la sintaxis callback para obtener el permiso. Lee [Usando la API de Notificaciones](/es/docs/Web/API/Notifications_API/Using_the_Notifications_API) para un buen ejemplo de como detectar esto y ejecutar el código de forma apropiada.
+
+El método **`requestPermission`** de la interfaz {{domxref("Notification")}} solicita un permiso del usuario al origen actual para mostrar notificaciones.
+
+## Sintaxis
+
+La ultima especificación ha actualizado este método a una sintaxis de tipo promesa que funciona así:
+
+```js
+Notification.requestPermission().then(function(permission) { /* ... */ });
+```
+
+Anteriormente, la sintaxis se basaba en un simple callback; esta versión ahora está obsoleta:
+
+```js
+Notification.requestPermission(callback);
+```
+
+### Parámetros
+
+- `callback` {{optional_inline}} {{deprecated_inline}}
+  - : Una callback opcional que es ejecutado con el valor del permiso. Obsoleto y reemplazado por el valor de retorno de la promesa.
+
+### Valor de retorno
+
+Una {{jsxref("Promise")}} que se convierte en una {{domxref("DOMString")}} con el permiso elegido por el usuario. Los valores posibles para este son:
+
+- `granted`
+- `denied`
+- `default`
+
+## Ejemplos
+
+Asume este HTML básico:
+
+```html
+<button onclick="notifyMe()">¡Notifícame!</button>
+```
+
+Es posible enviar una notificación de la siguiente forma: aquí presentamos un conjunto de código bastante detallado y completo que podrías usar si quisieras primero comprobar si las notificaciones son soportadas, luego comprobar si el permiso ha sido concedido para el origen actual para enviar notificaciones y luego solicitar permiso de ser requerido, antes de enviar una notificación.
+
+```js
+function notifyMe() {
+  // Comprobamos si el navegador soporta las notificaciones
+  if (!("Notification" in window)) {
+    alert("Este navegador no es compatible con las notificaciones de escritorio");
+  }
+
+  // Comprobamos si los permisos han sido concedidos anteriormente
+  else if (Notification.permission === "granted") {
+    // Si es correcto, lanzamos una notificación
+    var notification = new Notification("¡Hola!");
+  }
+
+  // Si no, pedimos permiso para la notificación
+  else if (Notification.permission !== "denied") {
+    Notification.requestPermission().then(function (permission) {
+      // Si el usuario nos lo concede, creamos la notificación
+      if (permission === "granted") {
+        var notification = new Notification("¡Hola!");
+      }
+    });
+  }
+
+  // Por último, si el usuario ha denegado el permiso,
+  // y quiere ser respetuoso, no hay necesidad de molestarlo.
+}
+```
+
+Ya no mostramos ejemplos corriendo en tiempo real en esta página, ya que Chrome y Firefox ya no conceden permisos de notificación para ser solicitados desde el origen {{htmlelement("iframe")}}, para seguir con otros navegadores. Para ver un ejemplo en acción, revisa nuestro [Ejemplo de lista de Todos](https://github.com/mdn/dom-examples/tree/main/to-do-notifications) (véase también [la app corriendo en vivo](https://mdn.github.io/dom-examples/to-do-notifications/).)
+
+> **Nota:** En el ejemplo de arriba generamos notificaciones en respuesta a una acción del usuario (hacer click en un botón). Esta no es la única mejor práctica — no deberias molestar a los usuarios con notificaciones que ellos no aceptaron — pero pronto los navegadores explicitamente deshabilitaran las notificaciones que no son ejecutadas en respuesta a una acción del usuario. Firefox ya está haciendo esto desde la versión 72, por ejemplo.
+
+## Especificaciones
+
+{{Specifications}}
+
+## Compatibilidad con navegadores
+
+{{Compat}}
+
+## Véase también
+
+- [Usando la API de Notificaciones](/es/docs/Web/API/Notifications_API/Using_the_Notifications_API)
@@ -0,0 +1,49 @@
+---
+title: URL.createObjectURL()
+slug: Web/API/URL/createObjectURL
+---
+
+{{ApiRef("URL")}}{{SeeCompatTable}}
+
+El método estático **`URL.createObjectURL()`** crea un {{domxref("DOMString")}} que contiene una URL que representa al objeto pasado como parámetro. La vida de la URL está ligado al {{domxref("document")}} de la ventana en la que fue creada. El nuevo objeto URL representa al objeto {{domxref("File")}} especificado o al objeto {{domxref("Blob")}}.
+
+> **Nota:** El uso de un objeto {{domxref("MediaStream")}} como entrada a este método está en proceso de ser obsoleto. Las discusiones están en curso sobre si o no debe ser quitado totalmente. Como tal, _se debe de evitar usar este método con {{domxref("MediaStream")}}s, y se debería usar {{domxref("HTMLMediaElement.srcObject", "HTMLMediaElement.srcObject()")}}_.
+
+{{AvailableInWorkers}}
+
+## Sintaxis
+
+```
+objectURL = URL.createObjectURL(object);
+```
+
+## Parámetros
+
+- `object`
+  - : Un objeto {{domxref("File")}} o un objeto {{domxref("Blob")}} para el que se creará la URL.
+
+<!---->
+
+## Ejemplo
+
+Ver [Usando objetos URL para representar imágenes](/es/docs/Using_files_from_web_applications#Example_Using_object_URLs_to_display_images).
+
+## Notas
+
+Cada vez que se llama a `createObjectURL()`, un nuevo objeto URL es creado, incluso si ya creaste uno para el mismo objeto. Cada uno de estos objetos puede ser liberado usando {{domxref("URL.revokeObjectURL()")}} cuándo ya no lo necesitas. Los navegadores liberan estos objetos cuando el documento es cerrado; de todas formas, para obtener un rendimiento óptimo y un óptimo uso de memoria, si hay momentos seguros en los que puedes liberar estos objetos deberías hacerlo. Por ejemplo: No liberar los recursos cuando se ha creado una URL a partir de un {{domxref('MediaStream')}} puede dejar la luz de la cámara del navegador encendida más tiempo del necesario.
+
+> **Nota:** Notese que no es necesario crear URLs a partir de un {{domxref('MediaStream')}}, ya que los objetos de streams deberían asignarse directamente a elementos de reproducción con {{domxref("HTMLMediaElement.srcObject")}}. La posibilidad de usar un `MediaStream` como valor de un objeto está obsoleta.
+
+## Especificaciones
+
+{{Specifications}}
+
+## Compatibilidad con navegadores
+
+{{Compat}}
+
+## Mirar también
+
+- {{domxref("URL.revokeObjectURL()")}}
+- {{domxref("HTMLMediaElement.srcObject")}}
+- [Usando archivos desde aplicaciones web](/es/docs/Using_files_from_web_applications)
@@ -0,0 +1,14 @@
+---
+title: '-moz-outline-radius-bottomleft'
+slug: Web/CSS/-moz-outline-radius-bottomleft
+---
+
+{{Non-standard_header}}{{CSSRef}}
+
+## Summary
+
+La propiedad [CSS](/es/docs/Web/CSS) `-moz-outline-radius-bottomleft` establece, en aplicaciones Mozilla, el redondeado de la esquina inferior izquierda de un contorno.
+
+{{cssinfo}}
+
+Ver la propiedad {{cssxref("-moz-outline-radius")}} para más información.
@@ -0,0 +1,14 @@
+---
+title: '-moz-outline-radius-bottomright'
+slug: Web/CSS/-moz-outline-radius-bottomright
+---
+
+{{Non-standard_header}}{{CSSRef}}
+
+## Summary
+
+La propiedad [CSS](/es/docs/Web/CSS) `-moz-outline-radius-bottomright` establece, en aplicaciones Mozilla, el redondeado de la esquina inferior derecha de un contorno.
+
+{{cssinfo}}
+
+Ver la propiedad {{cssxref("-moz-outline-radius")}} para más información.