View source for ARIA-edit: F59: Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control

[[Category:Failure Techniques]]
[[Category: Techniques]]
[[Category: Techniques Accepted]]
[[Category: Ready for XML]]



== Status ==
* Added to XML by AWK 12.17.2013
20. April 2013 (Detlev)
*Cleaned up Failure Example 1 (this was spread over Failure Example 1 and Failure Example 2)
*Added a variant of Example 1 to show a situation where an ARIA role has been applied but tabindex has not been set
*Added a check for tabindex in the test procedure
*Added references to WAI/ARIA spec & Authoring practices in section Resources (20 April 2013)
*Deleted references to "Dynamic Accessible Web Content Roadmap" (2006) and invalid link to "Accessible DHTML" (CodeTalks)  in section Resources (20 April 2013)

June 2013 (Detlev)
*Removed variant of Example 1 which showed a situation where an ARIA role has been applied but tabindex has not been set (to decouple the question of available role from tabindex/ keyboard accessibility)
*Removed tabindex from the test procedure

[http://www.w3.org/WAI/GL/WCAG20-TECHS/F59.html Original version of F59]

==Applicability==

HTML and XHTML

This failure relates to:

*Success Criterion 4.1.2 (Name, Role, Value)
**[http://www.w3.org/WAI/WCAG20/quickref/#qr-ensure-compat-rsv How to Meet 4.1.2]
**[http://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html Understanding Success Criterion 4.1.2]

==Description==

This failure demonstrates how using generic HTML elements to create user interface controls can make the controls inaccessible to assistive technology. Assistive technologies rely on knowledge of the role and current state of a component in order to provide that information to the user. Many HTML elements have well defined roles, such as links, buttons, text fields, etc. Generic elements such as <code>div</code> and <code>span</code> do not have any predefined roles. When these generic elements are used to create user interface controls in HTML the assistive technology may not have the necessary information to describe and interact with the control.

The W3C Candidate Recommendation "Accessible Rich Internet Applications (WAI-ARIA) 1.0" describes mechanisms to provide the necessary role and state information to create fully accessible user interface controls (See section [[#Resources|Resources]]).

==Examples==

===Failure Example 1===

The following example fails because it creates a checkbox using a span and an image.


Example Code:

<pre>
  <p> 
  <span onclick="toggleCheckbox('chkbox')"> 
  <img src="unchecked.gif"  id="chkbox" alt=""> Include Signature 
  </span> 
  </p>
</pre>

Here is the scripting code which changes the image source when the span is clicked with the mouse.

<pre>
  var CHECKED = "check.gif"; 
  var UNCHECKED = "unchecked.gif"; 
  function toggleCheckbox(imgId) { 
  var theImg = document.getElementById(imgId); 
  if ( theImg.src.lastIndexOf(CHECKED)!= -1 ) { 
  theImg.src = UNCHECKED; 
  // additional code to implement unchecked action 
  } 
  else { 
  theImg.src = CHECKED; 
  // additional code to implement checked action 
  } 
  } 
</pre>

A checkbox created in this manner will not work with assistive technology since there is no information that identifies it as a checkbox. In addition, this example is also not operable from the keyboard and would fail guideline 2.1.

==Resources==
<div id="Resources"></div>
Resources are for information purposes only, no endorsement implied.
*[http://www.w3.org/TR/wai-aria/ Accessible Rich Internet Applications (WAI-ARIA) 1.0]
*[http://www.w3.org/TR/wai-aria-practices/ WAI-ARIA 1.0 Authoring Practices]


===Related Techniques===

* [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/F42 F42: Failure of Success Criterion 1.3.1 and 2.1.1 due to using scripting events to emulate links in a way that is not programmatically determinable]
* [http://www.w3.org/WAI/GL/wiki/Using_a_WAI-ARIA_role_to_expose_the_role_of_a_user_interface_component Using a WAI-ARIA role to expose the role of a user interface component]

==Tests==
===Procedure===

#Examine the parsed source code for elements which have event handlers assigned within the mark-up or via scripting (indicating that the element is a user interface control). 
#Check if the role of the control is already defined natively in the mark-up language
#Alternatively, check if another valid method, such as the assignment of a fitting WAI-ARIA role, has been used to define the role of the control

===Expected Results===

# If check #2 AND check #3 are false, the failure condition applies.