Técnicas para as WCAG 2.0

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

Técnicas ARIA para as WCAG 2.0

Esta página Web lista as Técnicas ARIA de Técnicas para as WCAG 2.0: Técnicas e Falhas para as Directrizes de Acessibilidade para o Conteúdo da Web 2.0. Para informação sobre as técnicas, consulte Introdução às Técnicas para as WCAG 2.0. Para uma lista das técnicas utilizadas em outras tecnologias, consulte o Índice.


Índice



ARIA1: Utilizar a propriedade describedby da Accessible Rich Internet Application para fornecer uma etiqueta descritiva e determinada de forma programática

Aplicabilidade

HTML e XHTML com scripting e Accessible Rich Internet Applications.

Nota Editorial: Esta técnica será aplicável quando as especificações Accessible Rich Internet Application atingirem o estado da recomendação W3C.

Esta técnica está relacionada com:

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

A partir de Outubro de 2006, as técnicas Accessible Rich Internet Application começaram a ser suportadas no Firefox 1.5 ou posterior no Windows e no Window-Eyes versão 5.5 ou posterior. O suporte noutros agentes de utilizador e tecnologias de apoio está em curso. Esta técnica específica depende das actualizações efectuadas ao Firefox 2.0 para permitir a utilização do atributo describedby por si só sem ter de definir igualmente uma função para o elemento.

Descrição

A finalidade desta técnica é demonstrar como utilizar a propriedade descibedby de Accessible Rich Internet Application (ARIA) para fornecer informações descritivas sobre um controlo da interface de utilizador que possa ser determinado de forma programática pelos agentes de utilizador. As técnicas ARIA fornecem a capacidade de adicionar informações determinadas de forma programática a um elemento que possa fornecer informações adicionais sobre o elemento. O agente de utilizador pode fornecer informações adicionais à tecnologia de apoio para apresentação ao utilizador. Por exemplo, a propriedade describedby pode ser utilizada para fornecer informações que estão disponíveis no conteúdo circundante do controlo da interface de utilizador, que normalmente não estão disponíveis quando o utilizador navega de controlo para controlo utilizando uma tecnologia de apoio.

Exemplos

Exemplo 1: HTML

Este exemplo utiliza scripting para adicionar a propriedade describedby aos controlos da interface de utilizador existentes na página. A utilização de scripting é necessária, uma vez que o atributo "describedby" não se encontra na especificação HTML e adicioná-lo directamente à marcação iria impedir que a marcação efectuasse a validação. Nos agentes de utilizador que suportam espaços de nomes, o estado obrigatório é atribuído utilizando a interface de programação de aplicações (API) setAttributeNS() . Para outros agentes de utilizador, o estado obrigatório é atribuído utilizando a API setAttribute(), e o espaço de nome é simulado adicionando uma cadeia de texto estático à frente do atributo describedby .

No exemplo abaixo, são criadas duas variáveis de matriz, buttonIds e linkIds. Cada matriz tem os ids dos elementos que contêm o texto da descrição. Cada matriz é classificada através do id dos elementos que necessitam de uma propriedade describedby . A função setDescribedBy() é invocada a partir do evento onload do objecto da janela.

A função setDescribedBy() encontra todos os elementos do botão existentes na página. Percorre todos os elementos do botão encontrados e, utilizando o id do botão como índice, procura um valor id associado na matriz buttonIds . Este id é o atributo id do elemento que contém o texto da descrição associado ao botão. Se for encontrado um id associado, o script atribui a propriedade describedby ao botão utilizando a função setAttrNS() .

A função setDescribedBy() também encontra todos os elementos anchor existentes na página e executa um processo semelhante. Procura ids associados na matriz linksId e atribui a propriedade describedby a cada link utilizando a função setAttrNS() .

A função setAttrNS() irá invocar a API setAttributeNS() quando estiver disponível para definir o atributo obrigatório. Utiliza o URI de espaço de nome apropriado, "http://www.w3.org/2005/07/aaa", para Módulo de Estados e Propriedades para Accessible Rich Internet Applications (Propriedades e Estados ARIA) (página em inglês). Se a API setAttributeNS() não estiver disponível no agente de utilizador, é adicionado um espaço de nome estático e simulado de "aaa:" ao nome de atributo obrigatório e é definido utilizando a API setAttribute() .

Utilizando um agente de utilizador e/ou tecnologia de apoio que suportem ARIA, a descrição adicional será fornecida quando os controlos da interface de utilizador receberem foco.

Código Exemplo:

               <head>
 <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
 <title>Demonstration of describedby property</title>
 <style type="text/css">
 div.form p { clear:left; margin: 0.3em 0;}
 .left {
  float:left;
  width:400px;
}
 .right {
	width:100px;
	text-align:right;
}
 </style>
 <script type="text/javascript">
 //<![CDATA[

 // array entries for each button on the page that associates the button id 
 // with the id of the element containing the text which describes the button
 var buttonIds = new Array();
 buttonIds["fontB"]= "fontDesc";
 buttonIds["colorB"] = "colorDesc";
 buttonIds["customB"] = "customDesc";
 // array entries for each link on the page that associates the link id with
 // the id of the element containing the text which describes the link
 var linkIds = new Array();
 linkIds["iceberg"] = "icebergInfo";

 // function that is run after the page has loaded to set the describedBy
 // property on each of the elements referenced by the array of id values
 function setDescribedBy(){
	if (buttonIds){
		var buttons = document.getElementsByTagName("button");
		if (buttons){
			var buttonId;
			for(var i=0; i<buttons.length; i++){
				buttonId = buttons[i].id;
				if (buttonId && buttonIds[buttonId]){
					setAttrNS(buttons[i], "describedby", buttonIds[buttonId]);
				}
			}
		}
	}
	if (linkIds){
		var links = document.getElementsByTagName("a");
		if (links){
			var linkId;
			for(var k=0; k<links.length; k++){
				linkId = links[k].id;
				if (linkId && linkIds[linkId]){
					setAttrNS(links[k], "describedby", linkIds[linkId]);
				}
			}
		}
	}
 }

 // method to set the attribute values based on the capability of the browser.  
 // Use setAttributeNS if it is available, otherwise append a namespace 
 // indicator string to the attribute and set its value.
 function setAttrNS(elemObj, theAttr, theValue){
         elemObj.setAttribute("aria-" + theAttr, theValue);
 }

 // simulated action function - currently just displays an alert
 function doAction(theAction){
	alert("Perform the " + theAction + " action");
 }

 window.onload=setDescribedBy;

//>>
 </script>
 </head>
 <body>
 <p>The buttons on this page use the Accessible Rich Internet Applications 
 describedby property to provide more detailed information 
 about the button action
 </p>
 <div class="form">
 <p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
    <span class="right"><button id="fontB" onclick="doAction('Fonts');"> Fonts </button></span>
 </p>
 <p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
    <span class="right"><button id="colorB" onclick="doAction('Colors');"> Colors </button></span>
 </p>
 <p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
    <span class="right"><button id="customB" onclick="doAction('Customize');"> Customize </button></span>
 </p>
 </div>
 <p>The link in this paragraph has been updated with the Accessible Rich 
 Internet Applications describedby property to provide more information
 about the link</p>
 <p> <span id="icebergInfo">Alaskan storm cracks iceberg in Antarctica. </span> 
 A bad storm in Alaska last October generated an ocean swell that broke apart 
 a giant iceberg near Antarctica six days later, U.S. researchers reported on Monday. 
 <a href="http://www.sciencemag.com/iceberg.html" id="iceberg">More Info...</a>.
 </p>
 </body> 

Exemplo 2: XHTML

Este é o mesmo exemplo codificado em XHTML com um tipo MIME de aplicação:xhtml+xml. Este tipo MIME não é suportado em todos os agentes de utilizador. Declara um espaço de nome xml para aceder à propriedade describedby . As informações describedby são adicionadas directamente na marcação XHTML e não é necessário nenhum scripting adicional.

Código Exemplo:

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
 xmlns:waistate="http://www.w3.org/2005/07/aaa" >
 <head>
 <meta http-equiv="content-type" content="application:xhtml+xml; charset=utf-8" />
 <title>Demonstration of describedby property</title>
 <style type="text/css">
 div.form p { clear:left; margin: 0.3em 0;}
 .left {
   float:left;
   width:400px;
 }
 .right {
   width:100px;
   text-align:right;
 }
 </style>
 </head>
 <body>
 <p>The buttons on this page use the Accessible Rich Internet Applications describedby property 
 to provide more detailed information about the button action</p>
 <div class="form">
 <p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
 <span class="right"><button id="fontB" onclick="doAction('Fonts');" waistate:describedby="fontDesc">
 Fonts </button></span></p>
 <p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
 <span class="right"><button id="colorB" onclick="doAction('Colors');" waistate:describedby="colorDesc">
 Colors </button></span></p>
 <p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
 <span class="right"><button id="customB" onclick="doAction('Customize');" 
 waistate:describedby="customDesc"> Customize </button></span></p>
 </div>
 <p>The link in the next paragraph has been updated with the Accessible Rich Internet Applications 
 describedby property to provide more information about the link</p>
 <p> <span id="icebergInfo">Alaskan storm cracks iceberg in Antarctica. </span> 
 A bad storm in Alaska last October generated an ocean swell that broke apart a giant 
 iceberg near Antarctica six days later, U.S. researchers reported on Monday. 
 <a href="http://www.sciencemag.com/iceberg.html" id="iceberg" waistate:describedby="icebergInfo">More Info...</a>.
 </p>
 </body>
 </html> 

Recursos

Testes

Procedimento

  1. Carregue a página utilizando um agente de utilizador e/ou tecnologia de apoio que suportem Accessible Rich Internet Applications.

  2. Utilizando um agente de utilizador que suporte ARIA, navegue até cada controlo da interface de utilizador modificado com uma propriedade describedby e verifique se a descrição é disponibilizada ao utilizador.

Resultados Esperados

  • O passo 2 é verdadeiro.


ARIA2: Identificar os campos obrigatórios com a propriedade "required"

Esta técnica está relacionada com:

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

WAI-ARIA é parcialmente suportado no Firefox 2.0, o que associa funções e propriedades a APIs de acessibilidade de plataforma. O JAWS e o Window-Eyes foram testados com êxito na apresentação destas propriedades ao utilizador. O FireVox, uma extensão de voz automática do Firefox, também suporta WAI-ARIA através de acesso DOM directo.

Neste momento, não existe suporte de agente de utilizador adicional.

Descrição

O objectivo desta técnica é indicar que o preenchimento de um campo de entrada de dados por parte do utilizador é obrigatório de um modo determinado de forma programática. O estado obrigatório de WAI-ARIA indica que a entrada de dados por parte do utilizador é obrigatória antes da submissão. O estado "obrigatório" pode ter valores de "verdadeiro" ou "falso". Por exemplo, se um utilizador tiver de preencher um campo de endereço, o estado "obrigatório" está definido para verdadeiro.

Nota: O facto de o elemento ser obrigatório é, muitas vezes, apresentado visualmente (por exemplo, com um sinal ou símbolo a seguir ao controlo). A utilização da propriedade "required" faz com que seja muito mais fácil para os agentes de utilizador passarem esta importante informação ao utilizador de uma forma específica do agente de utilizador.

Os Estados e as Propriedades WAI-ARIA são um módulo suportado em XHTML 1.1 e posterior, e a especificação documenta como fornecer as propriedades em XHTML e outras linguagens baseadas em XML. Para obter informações sobre como fornecer Estados e Propriedades WAI-ARIA com HTML e XHTML 1.0, consulte Incorporar Metadados de Estado e de Função de Acessibilidade em Documentos HTML (página em inglês) . Os Estados e as Propriedades WAI-ARIA também são compatíveis com outros idiomas; consulte a documentação nesses idiomas.

Nota: Neste momento, WAI-ARIA é um Projecto em Curso. Esta técnica é fornecida como uma técnica de tipo aconselhada para organizações que pretendem experimentar alcançar a conformidade com as WCAG utilizando WAI-ARIA. Quando WAI-ARIA se tornar uma especificação formal e for suportada nos agentes de utilizador, esta técnica será antecipada para se tornar numa técnica de tipo suficiente.

Exemplos

Exemplo 1: Um campo de entrada de texto obrigatório em XHTML

O seguinte código fonte mostra um documento XHTML utilizando a propriedade "required" para indicar que um campo de formulário tem de ser submetido. A natureza obrigatória do campo também é indicada na etiqueta como uma alternativa para os agentes de utilizador que não suportam ARIA.

Código Exemplo:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 
    For Accessible Adaptable Applications//EN"
  "http://www.w3.org/2005/07/aaa/xhtml11-aaa.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
          xmlns:aaa="http://www.w3.org/2005/07/aaa" 
          xml:lang="en">
  <head>
    <title>Required Input</title>
  </head>
  <body>
    <h1>Required Input</h1>
    <p>The following form input field must be completed by the user
    before the form can be submitted.</p>
    <form action="http://example.com/submit">
      <p>
        <label for="test">Test (required)</label>
        <input name="test" id="test" aaa:required="true" />
      </p>
      <p>
        <input type="submit" value="Submit" />
      </p>
    </form>
  </body>
</html> 

Recursos

Testes

Procedimento

  1. Aceda a uma página com campos de formulário obrigatórios num agente de utilizador que suporte a especificação Accessible Rich Internet Applications.

  2. Deixe os campos obrigatórios vazios e tente submeter o formulário.

  3. Verifique se o agente de utilizador o notifica sobre as informações em falta.

  4. Forneça valores para os campos obrigatórios.

  5. Verifique se o agente de utilizador permite avançar com a submissão do formulário.

Resultados Esperados

  • Os passos 3 e 5 são verdadeiros.


ARIA3: Identificar informação de limites válida com as propriedades "valuemin" e "valuemax"

Esta técnica está relacionada com:

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

WAI-ARIA é parcialmente suportado no Firefox 2.0, o que associa funções e propriedades a APIs de acessibilidade de plataforma. O JAWS e o Window-Eyes foram testados com êxito na apresentação destas propriedades ao utilizador. O FireVox, uma extensão de voz automática do Firefox, também suporta WAI-ARIA através de acesso DOM directo.

Neste momento, não existe suporte de agente de utilizador adicional.

Descrição

O objectivo desta técnica é fornecer informações sobre o intervalo permitido de um campo de entrada de um modo determinado de forma programática. Os estados valuemin e valuemax WAI-ARIA fornecem os valores mínimos e máximos (respectivamente) que podem ser fornecidos pelo utilizador. Os agentes de utilizador não irão permitir que os utilizadores introduzam valores fora desse intervalo, caso contrário irão gerar um erro de validação.

Os Estados e as Propriedades WAI-ARIA são um módulo suportado em XHTML 1.1 e posterior, e a especificação documenta como fornecer as propriedades em XHTML e outras linguagens baseadas em XML. Para obter informações sobre como fornecer Estados e Propriedades WAI-ARIA com HTML e XHTML 1.0, consulte Incorporar Metadados de Estado e de Função de Acessibilidade em Documentos HTML (página em inglês) . Os Estados e as Propriedades ARIA também são compatíveis com outros idiomas; consulte a documentação nesses idiomas.

Nota: Neste momento, WAI-ARIA é um Projecto em Curso. Esta técnica é fornecida como uma técnica de tipo aconselhada para organizações que pretendem experimentar alcançar a conformidade com as WCAG utilizando WAI-ARIA. Quando WAI-ARIA se tornar uma especificação formal e for suportada nos agentes de utilizador, esta técnica será antecipada para se tornar numa técnica de tipo suficiente.

Exemplos

Exemplo 1: Um campo de entrada de texto que aceita datas durante o ano de 2007

O seguinte campo de entrada de texto necessita que o utilizador introduza um valor de data com um valor durante o ano de 2007:

Código Exemplo:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 
    For Accessible Adaptable Applications//EN"
  "http://www.w3.org/2005/07/aaa/xhtml11-aaa.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:aaa="http://www.w3.org/2005/07/aaa"
  xmlns:xsd="http://www.w3.org/2001/XMLSchema-datatypes"
  xml:lang="en">
<head>
  <title>Date Entry</title>
</head>
<body>
  <h1>Date Entry</h1>
  <p>Text entry accepts a date in the year 2007.</p>
  <form action="http://example.com/submit">
    <p><label for="test">Enter a date in 2007:</label>
    <input name="test" id="test" 
      aaa:valuemin="2007-01-01" aaa:valuemax="2007-12-31"
      aaa:datatype="xsd:date" /></p>
    <p><input type="submit" value="Submit" /></p>
  </form>
</body>
</html> 

Exemplo 2: Um controlo giratório que fornece valores entre 1 e 100

O seguinte botão giratório permite aos utilizadores introduzir um número entre 1 e 100.

Código Exemplo:

	<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 
  For Accessible Adaptable Applications//EN" "http://www.w3.org/2005/07/aaa/xhtml11-aaa.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
  xmlns:aaa="http://www.w3.org/2005/07/aaa"
  xmlns:xsd="http://www.w3.org/2001/XMLSchema-datatypes"
  xml:lang="en">
<head>
  <title>Spin Button</title>
</head>
<body>
  <h1>Spin Button</h1>
  <p>Spin button allows users to enter a number between 1 and 100. It is 
    implemented as a text input, to which user agents that do not support 
    ARIA roles fall back.</p>
  <form action="http://example.com/submit">
    <p><label for="test">Enter a number between 1 and 100</label>
    <input name="test" id="test" role="wairole:spinbutton" 
      aaa:valuemin="1" aaa:valuemax="100" aaa:datatype="xsd:integer" /></p>
    <p><input type="submit" value="Submit" /></p>
  </form>
</body>
</html> 

Recursos

Testes

Procedimento

  1. Aceda a uma página com campos de formulário que necessitem de dados num determinado intervalo, utilizando um agente de utilizador que suporte a especificação Accessible Rich Internet Applications.

  2. Forneça informações fora do intervalo permitido e tente submeter o formulário.

  3. Verifique se o agente de utilizador o notifica sobre os dados inválidos.

  4. Forneça informações dentro do intervalo permitido e tente submeter o formulário.

  5. Verifique se o agente de utilizador aceita os dados e permite que a submissão avance.

Resultados Esperados

  • Os passos 3 e 5 são verdadeiros


ARIA4: Utilizar Accessible Rich Internet Applications para identificar de forma programática campos de formulário conforme necessário

Aplicabilidade

HTML e XHTML com scripting e suporte de Accessible Rich Internet Application.

Nota Editorial: Esta técnica será aplicável quando as especificações Accessible Rich Internet Application atingirem o estado da recomendação W3C.

Esta técnica está relacionada com:

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

A partir de Janeiro de 2007, a versão actual da especificação ARIA (Accessible Rich Internet Application) começou a ser suportada no Firefox 1.5 ou posterior no Windows utilizando o Window-Eyes versão 5.5 ou posterior e a ser parcialmente suportada utilizando o JAWS 8.0 ou posterior. O suporte noutros agentes de utilizador e tecnologias de apoio está em curso. Uma vez que ARIA ainda não é suportada em todas as tecnologias, é importante utilizar também outras técnicas de tipo suficiente para assinalar um campo como obrigatório. Esta técnica específica depende das actualizações efectuadas ao Firefox 2.0 para permitir a utilização do atributo obrigatório por si só, sem ter de definir igualmente uma função para o elemento.

Descrição

A finalidade desta técnica é demonstrar como utilizar Accessible Rich Internet Applications para identificar componentes de formulário de forma programática para os quais é necessário selecção ou entrada de dados por parte do utilizador. As técnicas Accessible Rich Internet Applications fornecem a capacidade de adicionar informações sobre elementos que podem ser determinados de forma programática. O agente de utilizador pode fornecer estas informações adicionais à tecnologia de apoio para apresentação ao utilizador.

Exemplos

Exemplo 1

Este exemplo utiliza scripting para adicionar o estado obrigatório a um elemento de formulário. Nos agentes de utilizador que suportam os espaços de nomes, o estado obrigatório é atribuído utilizando a interface de programação de aplicações (API) setAttributeNS() . Para os restantes agentes de utilizador o estado obrigatório é atribuído utilizando a API setAttribute() e o espaço de nome é simulado adicionando uma cadeia de texto estático à frente do atributo obrigatório.

No exemplo abaixo, é criada uma variável de matriz, requiredIds, com os ids dos elementos que necessitam de ser assinalados como obrigatórios. A função setRequired() é invocada a partir do evento onload do objecto da janela.

A função setRequired() percorre todos os ids fornecidos, obtém o elemento e atribui o estado obrigatório de verdadeiro utilizando a função setAttrNS() .

A função setAttrNS() irá invocar a API setAttributeNS() quando estiver disponível para definir o atributo obrigatório. Utilize o URI de espaço de nome apropriado, "http://www.w3.org/2005/07/aaa", para o Módulo de Estados e Propriedades para Accessible Rich Internet Applications. Se a API setAttributeNS() não estiver disponível no agente de utilizador, é adicionado um espaço de nome estático e simulado de "aaa:" ao nome de atributo obrigatório e é definido utilizando a API setAttribute().

Quando esta página for acedida utilizando o Firefox 2.0 ou posterior ou o Window-Eyes 5.5 ou posterior, o Window-Eyes irá ler "obrigatório" quando estiver a ler a etiqueta para os campos de entrada de dados.

Código Exemplo:

<head>
 <script type="text/javascript">
 //<![CDATA[
 
 // array or ids on the required fields on this page
 var requiredIds = new Array( "firstName", "lastName");
 
 // function that is run after the page has loaded to set the required role on each of the 
 //elements in requiredIds array of id values
 function setRequired(){
 	if (requiredIds){
 		var field;
 		for (var i = 0; i< requiredIds.length; i++){
 			field = document.getElementById(requiredIds[i]);
 			setAttrNS(field, "required", "true");
 		}
 	}
 }
 
 // method to set the attribute values based on the capability of the browser.  
 // Use setAttributeNS if it is available,
 // otherwise append a namespace indicator string to the attribute and set its value.
 function setAttrNS(elemObj, theAttr, theValue){
 	if (typeof document.documentElement.setAttributeNS != 'undefined') {
 		elemObj.setAttributeNS("http://www.w3.org/2005/07/aaa", theAttr, theValue);
 	}else{
 		elemObj.setAttribute("aaa:" + theAttr, theValue);
 	}
 }
 window.onload=setRequired;
//>>
 </script>
 </head>
 <body>
 <p>Please enter the following data.  Required fields have been programmatically identified 
 as required and  marked with an asterisk (*) following the field label.</p>
 <form action="submit.php">
 <p>
 <label for="firstName">First Name *: </label><input type="text" name="firstName" 
    id="firstName" value="" />
 <label for="lastName">Last Name *: </label><input type="text" name="lastName" 
    id="lastName"  value="" />
 </p>
 </form>
 </body>

Recursos

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Carregue a página utilizando um agente de utilizador e/ou tecnologia de apoio que suportem Accessible Rich Internet Applications.

  2. Navegue até cada elemento de formulário obrigatório e verifique se é lido "obrigatório".

Resultados Esperados

  • O passo 2 é verdadeiro.