Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a XHTML

Datos de búsqueda

Etiqueta ‘XHTML’

HTML 5 y Jquery: Componente de buscador con placeholder

Fecha de publicación: 2011/03/30

Fragmento de HTML 5 con un formulario de búsqueda, en el que se generará el rollover del botón de búsqueda mediante Javascript, y se simulará el placeholder también mediante Javascript en navegadores no soportado.

Leer el resto del artículo

Datos del artículo:

HTML: Elementos de cita BLOCKQUOTE, Q y CITE

Fecha de publicación: 2011/01/13

Hay tres elementos que intervienen en las citas:

  • BLOCKQUOTE
  • Q
  • CITE

Leer el resto del artículo

Datos del artículo:

Simulación de elemento SELECT con jQuery

Fecha de publicación: 2010/07/11

He preparado un componente que simula un elemento SELECT, en el que se puede seleccionar una sola opción, que evita algunas de las limitaciones de los elementos SELECT de verdad, pudiendo dar formato a las opciones que contiene, añadir imágenes, etc.

Leer el resto del artículo

Datos del artículo:

HTML: uso de atributos id, headers y axis en tablas

Fecha de publicación: 2010/02/16

Habitualmente se utiliza el atributo scope en las tablas para definir la relación de las celdas con las columnas.

Leer el resto del artículo

Datos del artículo:

Accesibilidad: ordenación de columnas en tablas

Fecha de publicación: 2010/02/12

En las tablas de datos hechas con (X)HTML no es infrecuente encontrarse con que el encabezado de algunas columnas es un enlace que sirve para ordenar los datos en orden ascendente o descendente. Habitualmente se utiliza una imagen para indicar la ordenación que se ha seleccionado, pero, ¿es accesible?

Leer el resto del artículo

Datos del artículo:

Cumpliendo el punto 2.4.4 de WCAG 2.0: Propósito del enlace

Fecha de publicación: 2009/12/27

Punto 2.4.4. de WCAG 2.0:

2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A).

El propósito de cada enlace debe ser determinado unicamente por su propio texto. También puede ser determinado por su contexto salvo si resultase ambiguo (esto es mejor evitarlo si resulta posible).

Leer el resto del artículo

Datos del artículo:

HTML: el atributo scope

Fecha de publicación: 2007/07/31

El atributo scope se utiliza para vincular la información contenida en las diferentes celdas de una tabla.

Este atributo especifica el conjunto de celdas cuya información se refiere a la celda que contiene este atributo.

Supone una alternativa simple al atributo headers.

El atributo scope puede tomar uno (solamente uno) de los siguientes valores:

  • row. La celda se refiere al resto de celdas que componen su fila.
  • col. La celda se refiere al resto de celdas que componen su columna.
  • rowgroup. La celda se refiere al las celdas que componen su grupo de filas.
  • colgroup. La celda se refiere al las celdas que componen su grupo de columnas.

Saber más sobre el atributo scope.

Datos del artículo:

HTML: uso del atributo accesskey

Fecha de publicación: 2007/04/17

Actualizado 2011-03-10.

¿En que elementos se usa?

Lo primero que hay que saber es en que elementos puede utilizarse el atributo accesskey:

  • a
  • area
  • button
  • input
  • label
  • legend
  • textarea

Excepto a y area se trata de elementos de formulario.

¿Cómo funciona?

Activando las teclas de acceso y pulsando la tecla de acceso (depende de cada navegador):

Pressing an access key assigned to an element gives focus to the element. The action that occurs when an element receives focus depends on the element. For example, when a user activates a link defined by the A element, the user agent generally follows the link. When a user activates a radio button, the user agent changes the value of the radio button. When the user activates a text field, it allows input, etc.

Comportamiento en distintos navegadores

  • Internet Explorer: ALT + [Tecla de acceso] y despues ENTER.
  • Firefox: ALT + MAYUSCULAS + [Tecla de acceso].
  • Opera: MAYUSCULAS + ESC para activar teclas de acceso, y después la tecla de acceso.
  • Chrome, Safari: ALT + [Tecla de acceso].

Se puede probar con la tecla de acceso 7. Enlace de prueba con la tecla de acceso 7.

Referencias y enlaces relacionados

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS: