Outbook

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

Inicio que contiene a Desarrollo web que contiene a Accesibilidad

Datos de búsqueda

Categoría: ‘Accesibilidad’

WCAG 2.0: Accesibilidad de títulos de páginas

Fecha de publicación: 2008/12/30

El punto 2.4.2 de la WCAG 2.0 define que los títulos de las páginas deben describir su tema o propósito:

2.4.2 Page Titled: Web pages have titles that describe topic or purpose. (Level A)

Este punto se refiere al elemento TITLE.

El contenido del elemento TITLE no debe limitarse al título del sitio, sino que además debe describir de forma breve el contenido de la página a la que pertenece

La W3C propone el siguiente ejemplo:

The title of Web Content Accessibility Guidelines 2.0 is “Web Content Accessibility Guidelines 2.0.

  • The introduction has the title “Introduction to Web Content Accessibility Guidelines 2.0.”
  • The main body has the title “WCAG 2.0 Guidelines.”
  • Appendix A has the title “Glossary to Web Content Accessibility Guidelines 2.0.”
  • Appendix B has the title “Checklist for Web Content Accessibility Guidelines 2.0.”
  • Appendix C has the title “Acknowledgements for Web Content Accessibility Guidelines 2.0.”
  • Appendix D has the title “References for Web Content Accessibility Guidelines 2.0.”

Beneficios

Algunos de los beneficios de la aplicación de este punto serían:

  • El usuario podrá identificar con mayor rapidez si la información de la página le es relevante a sus necesidades.
  • Los usuario con deficiencias visuales podrán diferenciar las páginas de un mismo sitio cuando tenga varias abiertas simultaneamente.
  • Mejor indexación y visibilidad en buscadores.

Datos del artículo:

HTML y Accesibilidad: el atributo longdesc en imágenes

Fecha de publicación: 2008/12/15

Actualizado .

Cuando se utilizan imágenes en una web la práctica habitual es darles un texto alternativo mediante el atributo alt, o dejar vacío dicho atributo en el caso de que la función de la imagen sea meramente decorativa.

Pero nos podemos encontrar con el caso de tener una imagen a la que haya que asociarle un texto alternativo, pero dicho texto sea excesivamente largo. Para esas ocasiones está el atributo longdesc.

Ejemplo de imagen con textos largosEjemplo de imagenes con texto largo

El atributo longdesc ha de ser siempre una URL que lleve a una descripción de la imagen, en la misma o en otra página:

longdesc = uri [CT]
This attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute. When the image has an associated image map, this attribute should provide information about the image map’s contents. This is particularly important for server-side image maps. Since an IMG element may be within the content of an A element, the user agent’s mechanism in the user interface for accessing the “longdesc” resource of the former must be different than the mechanism for accessing the href resource of the latter.

Se puede dar una URL externa o, como en el ejemplo expuesto más adelante, un marcador de página. En ese caso bastaría con dar un atributo id que haga de marcador al párrafo con la descripción. Ejemplo de como podría quedar el código HTML

<p><img src="imagen1.jpg" alt="Promoción" longdesc="#descripcion1" /></p>
<p id="descripcion1">Descripción de la primera imagen.</p>

<p><img src="imagen2.jpg" alt="Promoción" longdesc="#descripcion2" /></p>
<p id="descripcion2">Descripción de la segunda imagen.</p>

Lectores de pantalla

Se supone que el longdesc es para lectores de pantalla, pero resulta que los hay que no dejan elegir al usuario si quieren ir o no a la descripción, y les llevan directamente.

Una solución podría ser un enlace oculto (pero no mediante display:none;, que si no los lectores de pantalla no lo pillan) que llevase a la URL de la descripción.

Si la imagen va dentro de un enlace…

En este caso suele ser habitual que el enlace lleve a otra página cuyo contenido coincide con el de la imagen (o lo amplía). Esto haría que añadir un atributo longdesc con la misma URL que el enlace fuese redundante, por lo que no sería necesaria su inclusión.

Si se opta por esta vía el atributo alt de la imagen deberá describir correctamente el propósito del enlace.

Enlaces relacionados

Datos del artículo:

PHP: función para crear calendario accesible y semántico

Fecha de publicación: 2008/12/02

He aquí una función en PHP para generar un calendario con XHTML semántico y accesible, y con clases e identificadores adecuados para aplicarle rápidamente el CSS.

La función lleva cuatro parámetros, todos ellos opcionales, en el siguiente orden:

  • Año ($year): Define el año que se va a mostrar, siendo un valor de 4 dígitos. Se predetermina al año actual.
  • Mes ($mes): Define el mes a mostrar, con valores de 1 a 12. Se predetermina al mes actual.
  • Estado fines de semana ($finDeSemana=1): Define si los días de los fines de semana llevan o no enlace. Se le da valor 1 para mostrarlos con enlace, o valor 0 para quitar el enlace. Se predetermina a 1.
  • Estado de días nulos ($mostrarDiasNulos=1): Define si se muestran los días de la primera semana que pertenecen al mes anterior y los días de la última semana que pertenecen al mes posterior. Se le da valor 1 para mostrarlos, o valor 0 para ocultarlos. Se predetermina a 1.
  • Nivel de encabezado ($nivelH=2): Nivel del encabezado del bloque de calendario. Ha de terner un valor de entre 1 y 6. Se predetermina en 2.

Ejemplo de llamada a la función con el mes de febrero de 2009, los fines de semana desactivados, los días nulos activados y un encabezado de nivel 3:

calendario(2009,2,0,1,3);

Descargar archivo con ejemplo funcional o verlo en acción (abre en ventana nueva).

Funciones para generar el calendario (para mayor seguridad, utilizar el código del ejemplo descargable):

function calendario ($year,$mes,$finDeSemana=1,$mostrarDiasNulos=1,$nivelH=2) {
 
 if (strlen($year)!=4) {$year=date('Y');}
 if (($mes<1 or $mes>12) or (strlen($mes)<1 or strlen($mes)>2)) {$year=date('n');}
 
 // Listados: días de la semana, letra inicial de los días de la semana, y meses
 $dias = array('Lunes','Martes','Miércoles','Jueves','Viernes','Sábado','Domingo');
 $diasAbbr = array('L','M','M','J','V','S','D');
 $meses = array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiempre','Octubre','Noviembre','Diciembre');
 
 // Se sacan valores que se utilizarán más adelante
 $diaInicial = gmmktime(0,0,0,$mes,1,$year);  // Primer día del mes dado
 $diasNulos = (date("N",$diaInicial))-1; // Con 'N' la semana empieza en Lunes. Con 'w', en domingo
  if($diasNulos<0){$diasNulos = 7-abs($diasNulos);}
 $diasEnMes = date("t",$diaInicial); // Número de días del mes dado
 
 // Se abre la capa contenedora y se genera el encabezado del bloque de calendario
 $html .= '<div id="calendario">';
 $html .= '<h'.$nivelH.' class="encabezadoCalendario">Calendario</h'.$nivelH.'>';
 
 // Párrafos con la fecha actual y la fecha seleccionada
 $html .= '<p>Fecha actual: '.date('j').' de '.$meses[(intval(date('n'))-1)].' de '.date('Y').'</p>';
 $html .= '<p>Fecha seleccionada: ';
 if (isset($_GET['dia'])) {$html .= ''.$_GET['dia'].' de ';} // El día solo sale si se ha definido previamente en el parámetro 'dia' de la URL
 $html .= ''.$meses[($mes-1)].' de '.$year.'</p>';
 $html .= '<div class="tabla">';
 
 
 // Enlaces al mes anterior y al siguiente
 $html .= '<p>Navegación por meses:</p>';
 $html .= '<ul id="calNavMeses">';
 $enlaceAnterior1 = gmmktime(0,0,0,($mes-1),1,$year);
 $mesAnterior = date('n',$enlaceAnterior1);
 $yearMesAnterior = date('Y',$enlaceAnterior1);
 $enlaceSiguiente1 = gmmktime(0,0,0,($mes+1),1,$year);
 $mesSiguiente = date('n',$enlaceSiguiente1);
 $yearMesSiguiente = date('Y',$enlaceSiguiente1);
 $html .= '<li class="anterior"><a href="?mes='.$mesAnterior.'&ano='.$yearMesAnterior.'"><span>Mes anterior ('.$meses[($mesAnterior-1)].')</span></a></li>';
 $html .= '<li class="siguiente"><a href="?mes='.$mesSiguiente.'&ano='.$yearMesSiguiente.'"><span>Mes siguiente ('.$meses[($mesSiguiente-1)].')</span></a></li>';
 $html .= '</ul>';
 
 // Enlaces al año anterior y al siguiente
 $html .= '<p>Navegación por años:</p>';
 $html .= '<ul id="calNavYears">';
 $enlaceAnterior2 = gmmktime(0,0,0,$mes,1,($year-1));
 $yearAnterior = date('Y',$enlaceAnterior2);
 $enlaceSiguiente2 = gmmktime(0,0,0,$mes,1,($year+1));
 $yearSiguiente = date('Y',$enlaceSiguiente2);
 $html .= '<li class="anterior"><a href="?mes='.$mes.'&ano='.$yearAnterior.'"><span>Año anterior (</span>'.$yearAnterior.'<span>)</span></a></li>';
 $html .= '<li class="siguiente"><a href="?mes='.$mes.'&ano='.$yearSiguiente.'"><span>Año siguiente (</span>'.$yearSiguiente.'<span>)</span></a></li>';
 $html .= '</ul>';
 
 // Se abre la tabla que contiene el calendario
 $html .= '<table>';
 
 // Título mes-año (elemento CAPTION)
 $mesLista = $mes-1;
 $html .= '<caption>'.$meses[$mesLista].'<span> de</span> '.$year.'</caption>';
 
 // Se definen anchuras en elementos COL
 $cl=0; $anchoCol=100/7; while ($cl<7) {$html .= '<col width="'.$anchoCol.'%" />'; $cl++;}
 
 // Fila de los días de la semana (elemento THEAD)
 $html .= '<thead><tr>';$d=0;
 while ($d<7) {$html .= '<th scope="col" abbr="'.$dias[$d].'">'.$diasAbbr[$d].'</th>';$d++;}
 $html .= '</tr></thead>';
 
 // Se generan los días nulos (días del mes anterior o posterior) iniciales, el TBODY y su primer TR
 $html .= '<tbody>';
 if ($diasNulos>0) {$html .= '<tr>';} // Se abre el TR solo si hay días nulos
 if ($diasNulos>0 and $mostrarDiasNulos==0) {$html .= '<td class="nulo" colspan="'.$diasNulos.'"></td>';} // Se hace un TD en blanco con el ancho según los día nulos que haya
 if ($mostrarDiasNulos==1) { // Generación de los TD con días nulos si está activado que se muestren
  $dni=$diasNulos;$i=0;
  while ($i<$diasNulos) {
   $enSegundosNulo = gmmktime(0,0,0,$mes,(1-$dni),$year);
   $dmNulo = date('j',$enSegundosNulo);
   $idFechaNulo = 'cal-'.date('Y-m-d',$enSegundosNulo);
   $html .= '<td id="'.$idFechaNulo.'" class="diaNulo"><span class="dia"><span class="enlace">'.$dmNulo.'</span></span></td>';
   $dni--;
   $i++;
  }
 }
 
 
 
 // Se generan los TD con los días del mes
 $dm=1;$x=0;$ds=$diasNulos+1;
 while ($dm<=$diasEnMes) {
  if(($x+$diasNulos)%7==0 and $x!=0) {$html .= '</tr>';} // Se evita el cierre del TR si no hay días nulos iniciales
  if(($x+$diasNulos)%7==0) {$html .= '<tr>';$ds=1;}
  $enSegundosCalendario = gmmktime(0,0,0,$mes,$dm,$year); // Fecha del día generado en segundos
  $enSegundosActual = gmmktime(0,0,0,date('n'),date('j'),date('Y')); // Fecha actual en segundos
  $enSegundosSeleccionada = gmmktime(0,0,0,$_GET['mes'],$_GET['dia'],$_GET['ano']); // Fecha seleccionada, en segundos
  $idFecha = 'cal-'.date('Y-m-d',$enSegundosCalendario);
  
  // Se generan los parámetros de la URL para el enlace del día
  $link_dia = date('j',$enSegundosCalendario);
  $link_mes = date('n',$enSegundosCalendario);
  $link_year = date('Y',$enSegundosCalendario);
  
  // Clases y etiquetado general para los días, para día actual y para día seleccionado
  $claseActual='';$tagDia='span';
  if ($enSegundosCalendario==$enSegundosActual) {$claseActual=' fechaHoy';$tagDia='strong';}
  if ($enSegundosCalendario==$enSegundosSeleccionada and isset($_GET['dia'])) {$claseActual=' fechaSeleccionada';$tagDia='em';}
  if ($enSegundosCalendario==$enSegundosActual and $enSegundosCalendario==$enSegundosSeleccionada and isset($_GET['dia'])) {$claseActual=' fechaHoy fechaSeleccionada';$tagDia='strong';}
  
  // Desactivación de los días del fin de semana
  if (($ds<6 and $finDeSemana==0) or $finDeSemana!=0) { // Si el fin de semana está activado, o el día es de lunes a viernes
   $tagEnlace='a';
   $atribEnlace='href="?dia='.$link_dia.'&mes='.$link_mes.'&ano='.$link_year.'"';
  } if ($ds>5 and $finDeSemana==0) { // Si el fin de semana está desactivado y el día es sábado o domingo
   $tagEnlace='span';
   $atribEnlace='';
   $paramFinde='0';
  }
  
  // Con las variables ya definidas, se crea el HTML del TD
  $html .= '<td id="'.$idFecha.'" class="'.calendarioClaseDia($ds).$claseActual.'"><'.$tagDia.' class="dia"><'.$tagEnlace.' class="enlace" '.$atribEnlace.'>'.$dm.'</'.$tagEnlace.'></'.$tagDia.'></td>';
  
  $dm++;$x++;$ds++;
 }
 
 // Se generan los días nulos finales
 $diasNulosFinales = 0;
 while((($diasEnMes+$diasNulos)%7)!=0){$diasEnMes++;$diasNulosFinales++;}
 if ($diasNulosFinales>0 and $mostrarDiasNulos==0) {$html .= '<td class="nulo" colspan="'.$diasNulosFinales.'"></td>';} // Se hace un TD en blanco con el ancho según los día nulos que haya (si no se activa mostrar los días nulos)
 if ($mostrarDiasNulos==1) { // Generación de días nulos (si se activa mostrar los días nulos)
  $dnf=0;
  while ($dnf<$diasNulosFinales) {
   $enSegundosNulo = gmmktime(0,0,0,($mes+1),($dnf+1),$year);
   $dmNulo = date('j',$enSegundosNulo);
   $idFechaNulo = 'cal-'.date('Y-m-d',$enSegundosNulo);
   $html .= '<td id="'.$idFechaNulo.'" class="diaNulo"><span class="dia"><span class="enlace">'.$dmNulo.'</span></span></td>';
   $dnf++;
  }
 }
 
 // Se cierra el último TR y el TBODY
 $html .= '</tr></tbody>';
 
 // Se cierra la tabla
 $html .= '</table>';
 
 // Se cierran la capa de la tabla y la capa contenedora
 $html .= '</div>';
 $html .= '</div>';
 
 // Se devuelve la variable que contiene el HTML del calendario
 return $html;
}

function calendarioClaseDia ($dia) {
 switch ($dia) {
  case 1: $clase = 'lunes semana'; break;
  case 2: $clase = 'martes semana'; break;
  case 3: $clase = 'miercoles semana'; break;
  case 4: $clase = 'jueves semana'; break;
  case 5: $clase = 'viernes semana'; break;
  case 6: $clase = 'sabado finDeSemana'; break;
  case 7: $clase = 'domingo finDeSemana'; break;
 }
 return $clase;
}

Actualizaciones

Actualizado 2008-12-03: Se añade la posibilidad de desactivar los fines de semana.

Actualizado 2008-12-04: Se añade la posibilidad de desactivar o activar los días de la primera semana que son del mes anterior y los de la última que son del mes siguiente (denominados como días nulos). Se explican los parámetros a introducir al llamar a la función.

Actualizado 2008-12-05: Mejoras de accesibilidad.

Actualizado 2009-02-01: Corregido el fragmento de código expuesto en la página.

Licencia

A diferencia de otros contenidos la licencia para este artículo y el ejemplo adjunto es Reconocimiento-Compartir bajo la misma licencia 3.0 España.

Datos del artículo:

Personal dedicado a la gestión de contenidos: ¿Qué deben saber?

Fecha de publicación: 2008/10/20

Un aspecto que debe cuidar una empresa cuando dispone de un sitio web es el del mantenimiento y creación de contenidos. Se suelen utilizar gestores de contenido, lo que facilita dicha tarea.

Y es ahí donde pueden surgir problemas. ¿Quién se dedica a introducir y modificar los contenidos? Hay ocasiones, incluso en compañías enormes que son la cabeza visible de su sector, que esa tarea se encarga a personas sin el más mínimo conocimiento de HTML.

Esto ocasiona que a veces un portal que se ha elaborado respetando estándares y accesibilidad acabe perdiendo dichas características, de modo que la inversión extra realizada para ello resulta un desperdicio.

Las personas que se dediquen a realizar estas funciones no tienen por que saber de maquetación HTML-CSS, pero si deben tener unos conocimientos básico de HTML que no es muy complicado de aprender:

  • Concepto de etiqueta HTML.
  • Etiquetas y atributos básicos:
    • DIV, SPAN.
    • H1-H6, P, BR, STRONG, EM.
    • BR.
    • DL, UL, OL, DL: las etiquetas para listados.
    • TABLE, CAPTION, COL, COLGROUP, THEAD, TBODY, TFOOT, TR, TH, TD etiquetas para tablas. Debe también saber hacer uso del atributo scope.
    • IMG: debe conocer al menos el atributo alt.
    • Los atributos id y class.

Además deben saber en que momento utilizar cada etiqueta y como hacer que el contenido que están generando sea mínimamente accesible.

Datos del artículo:

Evitar el uso de la etiqueta NOSCRIPT

Fecha de publicación: 2008/10/06

En algunas ocasiones al crear un comportamiento Javascript se necesita, por accesibilidad, que haya un contenido alternativo en el caso de tener Javascript deshabilitado.

Esto puede conseguirse mediante la etiqueta NOSCRIPT. Aunque tiene un inconveniente. Supongamos un navegador que tiene Javascript activado pero no soporta el Javascript que se ha creado. No obtendrá ni el contenido resultante de ejecutar el Javascript ni el contenido de la etiqueta NOSCRIPT.

¿No sería mejor que el HTML tenga de inicio el contenido que va en NOSCRIPT y que mediante Javascript ese contenido se elimine al cargar la página en el caso de que el navegador sea compatible con el Javascript realizado?

Idea sacada de Replacing <noscript> with accessible, unobtrusive DOM/JavaScript

Datos del artículo:

Accesibilidad en los rastros de migas

Fecha de publicación: 2008/04/01

Ejemplo de rastro de migas

Es algo habitual ver rastros de migas creados mediante listas ordenadas:

<div id="migas">
 <p>Estás en:</p>
 <ol>
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Sección A</a></li>
  <li><a href="#">Sección B</a></li>
  <li><a href="#">Sección C</a></li>
 </ol>
</div>

O parecido, como lista desordenada (cambiamos solo el OL por el UL):

<div id="migas">
 <p>Estás en:</p>
 <ul>
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Sección A</a></li>
  <li><a href="#">Sección B</a></li>
  <li><a href="#">Sección C</a></li>
 </ul>
</div>

Pero estos dos ejemplos no expresan la jerarquia de una forma semántica. Este otro si:

<div id="migas">
 <p>Estás en:</p>
 <ul>
  <li><a href="#">Inicio</a>
   <ul>
    <li><a href="#">Sección A</a>
     <ul>
      <li><a href="#">Sección B</a>
       <ul>
        <li><a href="#">Sección C</a></li>
       </ul>
      </li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

Listas anidadas que si reflejan la jerarquía de la navegación. Para una máquina (un buscador que indexe el sitio) está muy bien, pero para un humano puede no estar tan bien. Una persona que vea bien le va a dar igual como esté hecho para entenderlo (solo le influye como esté presentado visualmente). Alguien que use un lector de pantalla, con cualquiera de los tres ejemplos puede que no se entere muy bien de la jerarquía que hay.

Pero veamos ahora un ejemplo que en principio no parece accesible:

<div id="migas">
 <p>Estás en: <a href="#">Inicio</a> <img src="#" alt="que engloba a" /> <a href="#">Sección A</a> <img src="#" alt="que engloba a" /> <a href="#">Sección B</a> <img src="#" alt="que engloba a" /> <a href="#">Sección C</a></p>
</div>

Es un párrafo. Los símbolos "mayor que" en este caso no son fondo, sino imagen, con un texto alternativo que encadena los enlaces. Este párrafo nos explica con mayor detalle que los anteriores ejemplos en que parte de la estructura del sitio nos encontramos.

A un usuario que necesite un lector de pantalla probablemente le sirva mejor esta última forma de hacer un rastro de migas.

Entonces, ¿cual de estas formas de crear un rastro de migas es más accesible?

Actualización: Lo pregunté en AccesoWeb.

Saber más

Datos del artículo:

Reglamento acerca de accesibilidad

Fecha de publicación: 2007/11/22

En el BOE del pasado 21 de noviembre se publico el Reglamento sobre las condiciones básicas para el acceso de las personas con discapacidad a las tecnologías, productos y servicios relacionados con la sociedad de la información y medios de comunicación social.

Comentaré algunos de sus artículos.

Artículo 5. Criterios de accesibilidad aplicables a las páginas de internet de las administraciones públicas o con financiación pública.

1. La información disponible en las páginas de internet de las administraciones públicas deberá ser accesible a las personas mayores y personas con discapacidad, con un nivel mínimo de accesibilidad que cumpla las prioridades 1 y 2 de la Norma UNE 139803:2004.

Esta obligación no será aplicable cuando una información, funcionalidad o servicio no presente una alternativa tecnológica económicamente razonable y proporcionada que permita su accesibilidad.

No es obligatorio cuando no sea razonable económicamente. Pues ya se sabe por donde se van a saltar la ley las administraciones públicas. Se argumenta que es caro y ya no se hace accesible.

[Art. 5.2]

2. Excepcionalmente, las administraciones públicas podrán reconocer la accesibilidad de páginas de internet conforme a normas técnicas distintas de las que figuran en el apartado 1 de este artículo, siempre que se compruebe que alcanzan una accesibilidad similar a la que estas normas garantizan.

La puerta para usar WCAG en lugar de la norma UNE 139803:2004, puesto que la norma UNE se basa en WCAG 1.0.

[Art. 5.4]

4. Para poder acceder a financiación pública para el diseño o mantenimiento de páginas de internet será necesario asumir el cumplimiento de los criterios de accesibilidad previstos en el apartado 1 del presente artículo.

De igual modo, serán exigibles, y en los mismos plazos, estos criterios de accesibilidad para las páginas de Internet de entidades y empresas que se encarguen, ya sea por vía concesional o a través de otra vía contractual, de gestionar servicios públicos, en especial, de los que tengan carácter educativo sanitario y servicios sociales.

Asimismo, será obligatorio lo expresado en este apartado para las páginas de Internet y sus contenidos, de los centros públicos educativos, de formación y universitarios, así como, de los centros privados sostenidos, total o parcialmente, con fondos públicos.

No se ciñe solo a sitios web de entidades de titularidad pública, sino a todos los financiados con dinero público.

Artículo 7. Sistema de certificación de páginas de internet.

1. A los efectos de este real decreto, las páginas de internet se podrán certificar por una entidad de certificación cuya competencia técnica haya sido reconocida formalmente por una entidad de acreditación de acuerdo con lo dispuesto en el capítulo II del título III, sobre calidad industrial, de la Ley 21/1992, de 16 de julio, de Industria y en sus correspondientes disposiciones de desarrollo contenidas en el Real Decreto 2200/1995, de 28 de diciembre, por el que se aprueba el Reglamento de la infraestructura para la calidad y la seguridad industrial.

2. En los procedimientos de certificación a los que se refiere el apartado anterior se emplearán preferentemente normas técnicas españolas, normas aprobadas por organismos de normalización europeos y, en su defecto, otras normas internacionales aprobadas por organismos oficiales de normalización.

No basta con decir que se cumple con la accesibilidad, sino que es necesario que lo confirme un entidad de certificación (supongo que Technosite, CTIC, etc.)

Parece que este reglamento despeja un poco la forma en que las administraciones públicas deben cumplir con los requerimientos de accesibilidad.

Saber más

Datos del artículo:

Atributos de idioma en HTML: lang y hreflang

Fecha de publicación: 2007/11/06

El atributo lang

El atributo lang sirve para definir el idioma del contenido de un elemento.

Hay que definirlo en primer lugar en el elemento HTML, para definir el idioma del documento:

<html lang="es">

Y una vez definido el idioma principal del documento, en todos aquellos elementos en los que su contenido sea distinto a dicho idioma principal:

<a lang="en">
<p lang="fr">
<span lang="zh">

También puede añadirse una variante de idioma, poniendo tras el valor de idioma una abreviatura de país, por ejemplo inglés de Estados Unidos:

<p lang="en-us">

El atributo hreflang

El atributo hreflang sirve para definir el idioma del destino de un enlace (elemento A):

<a hreflang="en">

Valores de los atributos

Los valores que se utilizan en los atributos anteriormente mencionados son los definidos en la norma ISO 639 (los de dos caracteres).

Accesibilidad

La referencia WAI WCAG 1.0 en su punto 4.3, y la norma UNE 139803 en su punto 4.4.4 requieren la presencia del atributo lang allí donde sea necesario para poder cumplir la prioridad 1 (A) de accesibilidad.

WAI WCAG 1.0:

4.3 Identify the primary natural language of a document. [Priority 3]

For example, in HTML set the "lang" attribute on the HTML element. In XML, use "xml:lang". Server operators should configure servers to take advantage of HTTP content negotiation mechanisms ([RFC2068], section 14.13) so that clients can automatically retrieve documents of the preferred language.

UNE 139803:

4.4.4 Se debe especificar el idioma principal de la página Web

Nota – Se deben tener en cuenta las recomendaciones recogidas en el informe RFC 3066 de la IETF (The Internet Engineering Task Forcehttp://www.ietf.org) y las normas internacionales de códigos de idiomas (ISO 639) y países (ISO 3166).

EJEMPLO: Se debe usar el atributo "lang" en la etiqueta "html", en HTML o XHTML, marcando el idioma correspondiente, por ejemplo con "es" para español, "ca" para catalán, […] "gl" para gallego, "en" para inglés, "fr" para francés, etc. También debe usarse para indicar las variaciones idiomáticas cuando sea apropiado, por ejemplo: "es-mx" para el español de México, "es-cl" para el de Chile, etc.

Enlaces relacionados

Usabilidad: El uso de la voz pasiva

Fecha de publicación: 2007/10/23

Según Jakob Nielsen el uso de la voz pasiva en los contenidos de una web es poco adecuado:

Active voice is best for most Web content […].

Y propone algunos ejemplos:

  • Worst: The passive voice should be avoided.
  • Bad: The passive voice should be avoided by writers.
  • Better: Writers should avoid using passive voice.
  • Best: Writers should use active voice.

Los mismos ejemplos pero en idioma español:

  1. Peor: La voz pasiva debe ser evitada.
  2. Malo: La voz pasiva debe ser evitada por los autores.
  3. Bueno: Los escritores deben evitar el uso de la voz pasiva.
  4. Mejor: Los escritores deben utilizar la voz activa.

Estos ejemplos muestran en primer lugar que es mejor utilizar voz activa que voz pasiva. De esa forma el usuario comprenderá con mayor facilidad y rapidez el texto.

En segundo lugar queda reflejado que es mejor el uso de frases afirmativas, como el ejemplo número 4, que la utilización de frases negativas, como en el ejemplo número 3.

Y en tercer lugar, cuando se usa la voz pasiva es mejor que aparezca el complemento agente (quien realiza la acción), como en el ejemplo número 2, ya que ayuda un poco más a comprender la frase.

Voz pasiva en los encabezados

Active voice is best for most Web content, but using passive voice can let you front-load important keywords in headings, blurbs, and lead sentences. This enhances scannability and thus SEO effectiveness.

La voz activa es mejor para los contenidos, pero en encabezados y otros textos destacados puede resultar más adecuado el uso de voz pasiva, ya que las primeras palabras de esas frases, que serán en las que más se fijen el usuario y los motores de búsqueda, tendrán mayor relevancia y darán más información.

Nielsen propone el siguiente ejemplo:

Yahoo Finance follows all 13 design guidelines for tab controls, but usability suffers due to AJAX overkill and difficult customization.

A primera vista parece que se trata de información sobre la aplicación Yahoo Finance, no sobre sus contenidos, como podría parecer a primera vista.

El mismo contenido que antes pero en voz pasiva:

13 design guidelines for tab controls are all followed by Yahoo Finance, but usability suffers due to AJAX overkill and difficult customization.

En este segundo ejemplo se usa la voz pasiva y se consigue el efecto deseado: resaltar que se trata de un artículo sobre la aplicación.

Conclusiones

  1. La voz activa es la forma adecuada en el texto de contenido.
  2. La voz pasiva es adecuada en encabezados, enlaces a otros contenidos y otras frases destacadas.

Referencias y enlaces relacionados

Datos del artículo:

Usabilidad en los sitios web de las universidades de Galicia

Fecha de publicación: 2007/10/13

Hace casi un año tuve que presentar un trabajo para una asignatura de la licenciatura en Documentación. Dicho trabajo debía ser planteado como si de una tesis doctoral se tratase, pero con la limitación temporal que imponía el que la asignatura fuese de un solo cuatrimestre (entre unas cosas y otras había un par de meses, y si además se añade que me gusta dejar estas cosas muy para el final…).

Se me ocurrió como tema la usabilidad en los sitios web de universidades públicas gallegas (la región la escogí totalmente al azar). El análisis de esos sitios web, por la limitación de tiempo, no fue muy fiable, pero si conseguí, creo, una interesante lista de puntos de verificación de usabilidad.

Así que pongo ese documento aquí, por si a alguien le resultase interesante (bajo la misma licencia Creative Commons que este sitio).

Descargar Evaluación de usabilidad en sitios web de universidades de Galicia (2007) en formato PDF (1,2 MB). También disponible en formato Open Document (635 KB).

Datos del artículo:

Información del sitio