REQUISITO TEXTUAL DE LA NORMA

La relación (véase el numeral 2.67) entre la información, estructura (véase el numeral 2.34) y comportamiento deben ser determinadas por software (véase el numeral 2.27) o estar disponibles como mínimo en formato de texto (NIVEL A).

EL PORQUÉ DE LA NORMA

La intención de esta norma es garantizar que la información y las relaciones que se implican en formato visual o auditiva se conservan cuando cambia el formato de presentación. Por ejemplo, los cambios de formato de presentación cuando el contenido es leído por un lector de pantalla o cuando una hoja de estilo de usuario se sustituye por la hoja de estilos proporcionado por el autor.

EXPLICACIÓN GRÁFICA

ALGUNAS FORMAS DE IMPLEMENTACIÓN

Ejemplo:

  • Un formulario con campos requeridos: Las etiquetas para los campos requeridos se muestran en rojo, adicionalmente, al final de cada etiqueta se incluye un carácter asterisco ‘*’. Las instrucciones del formulario indican “todos los campos mostrados en color rojo y marcados con * son requeridos”.
  • Un formulario que usa color y texto para indicar campos requeridos: Un formulario contiene, tanto campos requeridos como opcionales. Las instrucciones en la parte superior indican que los campos requeridos tienen texto color rojo.
  • Un documento de texto: Un documento de texto con formato doble línea en blanco antes de los títulos, asteriscos para indicar los elementos de lista y otras convenciones de formato estándar, por lo que su estructura puede ser determinado por software.

Técnicas:

  • H51: El uso de etiquetas tablas para presentar información tabular (HTML)

Ejemplo: Una sección de la página es presentaba en una table con encabezados en cada columna.

{code}

<table>
  <tr>
    <td> </td>
    <th>Lunes</th>
    <th>Martes</th>
    <th>Miércoles</th>
    <th>Jueves</th>
    <th>Viernes</th>
  </tr>
  <tr>
    <th>8:00-9:00</th>
    <td>Reunión con Ana</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th>9:00-10:00</th>
    <td> </td>
    <td> </td>
    <td>Cita con el doctor</td>
    <td>Ana otra vez</td>
    <td>Salida para Cali</td>
  </tr>
</table> 

{/code}

  • PDF6: El uso de elementos de tabla para la tabla de marcas en documentos PDF (PDF)
  • PDF20: Utilizar el Editor Adobe Acrobat Pro Tabla para reparar tablas mistagged (PDF)
  • H39: Usar elementos de subtítulos para asociar leyendas de tablas de datos con tablas de datos (HTML)

{code}

<table>
<caption>Schedule for the week of March 6</caption>
...</table>

{/code}

  • FLASH31: Especificación de texto del título de un DataGrid (Flash)

{code}

import fl.accessibility.DataGridAccImpl;
import fl.controls.DataGrid;
import fl.controls.Label;
import fl.data.DataProvider;
import flash.accessibility.Accessibility;
import flash.accessibility.AccessibilityProperties;
import flash.system.Capabilities;

// enable accessibility for the DataGrid
DataGridAccImpl.enableAccessibility();

createGrid();

// set the data grid caption text
var gridCaptionText: String = "Game Results";
gridCaption.text = gridCaptionText;
//add the caption text as the DataGrid's accessible name
var accProps: AccessibilityProperties = new AccessibilityProperties();
accProps.name = gridCaptionText;
aDg.accessibilityProperties = accProps;
if (Capabilities.hasAccessibility)
Accessibility.updateProperties();

function createGrid() {
  
  //create and add the components
  var aDg: DataGrid = new DataGrid();
  var gridCaption: Label = new Label();
  addChild(aDg);
  addChild(gridCaption);
  aDg.move(50, 50);
  gridCaption.move(50, 20);
  
  var captionFormat: TextFormat = new TextFormat();
  captionFormat.size = 24;
  gridCaption.setStyle("textFormat", captionFormat);
  gridCaption.width = 300;
  gridCaption.height = 100;
  bldRosterGrid(aDg);
  //prepare the data
  var aRoster: Array = new Array();
  aRoster =[ 
    {Name: "Wilma Carter", Bats: "R", Throws: "R", Year: "So", Home: "Redlands, CA"},
    {Name: "Sylvia Munson", Bats: "R", Throws: "R", Year: "Jr", Home: "Pasadena, CA"}, 
    {Name: "Carla Gomez", Bats: "R", Throws: "L", Year: "Sr", Home: "Corona, CA"}, 
    {Name: "Betty Kay", Bats: "R", Throws: "R", Year: "Fr", Home: "Palo Alto, CA"},
  ];
  aDg.dataProvider = new DataProvider(aRoster);
  aDg.rowCount = aDg.length;
};

function bldRosterGrid(dg: DataGrid) {
  dg.setSize(400, 300);
  dg.columns =[ "Name", "Bats", "Throws", "Year", "Home"];
  dg.columns[0].width = 120;
  dg.columns[1].width = 50;
  dg.columns[2].width = 50;
  dg.columns[3].width = 40;
  dg.columns[4].width = 120;
};

{/code}

  • H73: Usar el atributo summary del elemento de tabla para dar una visión general de las tablas de datos (HTML)

{code}

<table summary="Schedule for Route 7 going downtown. Service begins 
at 4:00 AM and ends at midnight. Intersections are listed in the top row. 
Find the intersection closest to your starting point or destination, then read 
down that column to find out what time the bus leaves that intersection.">
  <tr>
    <th scope="col">State & First</th>
    <th scope="col">State & Sixth</th>
    <th scope="col">State & Fifteenth</th>
    <th scope="col">Fifteenth & Morrison</th>
  </tr>
  <tr>
    <td>4:00</td>
    <td>4:05</td>
    <td>4:11</td>
    <td>4:19</td>
  </tr>
  …
</table>  

{/code}

  • H63:  Usando el atributo "scope" para asociar encabezados y celdas dentro de una tabla

{code}

<table border="1">
  <caption>Contact Information</caption>
  <tr>
    <td></td>
    <th scope="col">Name</th>
    <th scope="col">Phone#</th>
    <th scope="col">Fax#</th>
    <th scope="col">City</th>
  </tr><tr>
    <td>1.</td>
    <th scope="row">Joel Garner</th>
    <td>412-212-5421</td>
    <td>412-212-5400</td>
    <td>Pittsburgh</td>
  </tr><tr>
    <td>2.</td>
    <th scope="row">Clive Lloyd</th>
    <td>410-306-1420</td>
    <td>410-306-5400</td>
    <td>Baltimore</td>
  </tr><tr>
    <td>3.</td>
    <th scope="row">Gordon Greenidge</th>
    <td>281-564-6720</td>
    <td>281-511-6600</td>
    <td>Houston</td>
  </tr>
</table> 

{/code}h43,flash21,

  • H44: Usar etiquetas de formulario para asociar textos con elementos de formulario

{code}

<label for="nombre">Nombre:</label> 
<input type="text" name="nombre" id="nombre" />

{/code}

  • H65: Usando el atributo título para identificar controles de formulario cuando la etiqueta "caption" no puede ser utilizada.

Ejemplo: Una función de búsqueda

{code}

<input type="text" title="Término a buscar"/> <input type="submit" value="Buscar"/>

{/code}

  • pdf10,pdf12,flash32,flash29,flash25h71.
  • sl20,sl26,h85,
  • H48: Usando ol, ul y dl para presentar contenido en listas o grupos de enlaces.

{code}

<ol>
  <li>Mezclar huevos y leche en una taza</li>
  <li>Añadir sal y pimienta al gusto</li>
</ol>

{/code}

  • h42,pdf9,src21.
  • pdf11,pdf17,pdf21.
  • FLASH23: Agregar información de resumen para un control DataGrid (Flash)

 

Situación B: G117, flash8, t1, t2, t3.

GLOSARIO

Relaciones: Todos los elementos tienen una relación lógica, así como también una estructura bien definida de elementos padre e hijo.