Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

-

H85: Utilizar OPTGROUP para agrupar elementos OPTION dentro de um SELECT

Aplicabilidade

Páginas HTML e XHTML que recolham dados do utilizador.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

O elemento optgroup não é largamente suportado pelos leitores de ecrã.

O atributo label para option e optgroup é suportado de forma inconsistente pelos agentes de utilizador e não é largamente suportado pelas tecnologias de apoio.

Descrição

O objectivo desta técnica é agrupar itens numa lista de selecção. Uma lista de selecção é um conjunto de valores permitidos para um controlo de formulário, tal como uma lista de selecção múltipla ou uma caixa de combinação. Frequentemente, as listas de selecção têm grupos de opções relacionadas. Esses grupos devem ser identificados de forma semântica, em vez de serem simplesmente delimitados com entradas de lista "fictícias". Isto permite aos agentes de utilizador fechar as opções por grupo para suportar uma visualização mais rápida das opções, e indicar o grupo no qual se encontra uma opção de interesse. Também ajuda a dividir visualmente listas extensas, de modo a que os utilizadores possam localizar mais facilmente as opções que lhes interessam.

Em HTML, o elemento select é utilizado para criar listas de selecção múltipla e caixas de combinação. Cada uma das várias opções permitidas é indicada com os elementos option . Para agrupar as opções, utilize o elemento optgroup com os elementos option relacionados dentro desse elemento. Identifique o grupo com o atributo "label", de modo a que os utilizadores saibam o que está dentro do grupo.

O elemento optgroup deve estar directamente dentro do elemento select e os elementos option directamente dentro do optgroup. É possível que um elemento select inclua elementos option individuais e grupos optgroup, embora os autores devam considerar se esta é, na realidade, a utilização pretendida. Não é possível encaixar o elemento optgroup e, como tal, só é possível o agrupamento de um nível num elemento select.

Exemplos

Exemplo 1

A seguinte caixa de combinação recolhe dados sobre os alimentos favoritos. O agrupamento por tipo permite que os utilizadores seleccionem mais rapidamente a sua preferência.

Código Exemplo:

<form action="http://example.com/prog/someprog" method="post">
    <label for="food">What is your favorite food?</label>
    <select id="food" name="food">
      <optgroup label="Fruits">
        <option value="1">Apples</option>
        <option value="3">Bananas</option>
        <option value="4">Peaches</option>
        <option value="5">...</option>
      </optgroup>
      <optgroup label="Vegetables">
        <option value="2">Carrots</option>
        <option value="6">Cucumbers</option>
       <option value="7">...</option>
     </optgroup>
     <optgroup label="Baked Goods">
       <option value="8">Apple Pie</option>
       <option value="9">Chocolate Cake</option>
       <option value="10">...</option>
     </optgroup>
   </select>
</form> 

Exemplo 2

O exemplo seguinte mostra como uma caixa de selecção múltipla pode utilizar o elemento optrgroup .

Código Exemplo:

<form action="http://example.com/prog/someprog" method="post">
    <label for="related_techniques"><strong>Related Techniques:</strong></label>
    <select name="related_techniques" id="related_techniques" multiple="multiple" size="10">
  <optgroup label="General Techniques">
    <option value="G1">G1: Adding a link at the top of each page ... </option>
    <option value="G4">G4: Allowing the content to be paused and restarted ... </option>
    <option value="G5">G5: Allowing users to complete an activity without any time... </option>
    <option value="G8">G8: Creating an extended audio description for the ... </option>
    <option value="G9">G9: Creating captions for live synchronized media... </option>
    <option value="G10">G10: Creating components using a technology that ... </option>
  </optgroup>
  <optgroup label="HTML Techniques">
    <option value="H2">H2: Combining adjacent image and text links for the same ... </option>
    <option value="H4">H4: Creating a logical tab order through links, form ... </option>
    <option value="H24">H24: Providing text alternatives for the area ...
    </option>
  </optgroup>
  <optgroup label="CSS Techniques">
    <option value="C6">C6: Positioning content based on structural markup... </option>
    <option value="C7">C7: Using CSS to hide a portion of the link text... </option>
  </optgroup>
  <optgroup label="SMIL Techniques">
    <option value="SM1">SM1: Adding extended audio description in SMIL 1.0... </option>
    <option value="SM2">SM2: Adding extended audio description in SMIL 2.0... </option>
    <option value="SM6">SM6: Providing audio description in SMIL 1.0... </option>
  </optgroup>
  <optgroup label="ARIA Techniques">
    <option value="ARIA1">ARIA1: Using WAI-ARIA describedby... </option>
    <option value="ARIA2">ARIA2: Identifying required fields with the "required"... </option>
    <option value="ARIA3">ARIA3: Identifying valid range information with "valuemin" ... </option>
    <option value="ARIA4">ARIA4: Using WAI-ARIA to programmatically identify form  ... </option>
  </optgroup>
  <optgroup label="Common Failures">
    <option value="F1">F1: Failure of SC 1.3.2 due to changing the meaning of content by... </option>
    <option value="F2">F2: Failure of SC 1.3.1 due to using changes in text presentation... </option>
    <option value="F3">F3: Failure of SC 1.1.1 due to using CSS to include images  ... </option>
    <option value="F4">F4: Failure of SC 2.2.2 due to using text-decoration:blink ...</option>
  </optgroup>
</select>
</form> 

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Verifique o conjunto de opções numa lista de selecção para ver se existem grupos de opções relacionadas.

  2. Se existirem grupos de opções relacionadas, devem ser agrupados com o optgroup.

Resultados Esperados