title: ARIA Roles: Can an 'owned element' be nested arbitrarily deep in the DOM?
body: <p>W3C's <strong><a href="http://www.w3.org/TR/wai-aria-1.1/" rel="nofollow">Accessible Rich Internet Applications (WAI-ARIA) 1.1</a></strong> defines an owned element as follows (from Part 4):</p>
  
  <blockquote>
    <p><strong>Owned Element:</strong> An 'owned element' is any DOM descendant of the element, any element specified as a child via <a href="http://www.w3.org/WAI/PF/aria/states_and_properties#aria-owns" rel="nofollow"><strong><code>aria-owns</code></strong></a>, or any DOM descendant of the owned child.</p>
  </blockquote>
  
  <p>(Let's ignore <code>aria-owns</code>, a property that allows you to designate a parent/child relationship [in the accessibility tree] between any elements in the DOM via element IDs.) </p>
  
  <p>It is important to know what counts as an owned element because many roles have <strong><a href="http://www.w3.org/TR/wai-aria-1.1/#mustContain" rel="nofollow">required owned elements</a></strong> (and the inverse: required context roles).</p>
  
  <p>That definition says that any DOM descendant counts. However, especially in cases of complicated structures like grids and trees, it doesn't seem to be the case that the accessibility tree recognizes owned elements several levels deep - though it's hard to tell because all screenreaders are different and all browsers are different.  Also, there are many roles that don't seem to add any value that couldn't be inferred from the DOM tree (for example, most of the <code>group</code> subclasses, though parallelism with native HTML tables is mentioned as a purpose for <code>rowgroup</code>) and might just exist as intermediaries.  Moreover, in example code, I can't recall having seen complicated structures in which required elements are more than one level apart; in the few cases I have, the intermediate elements often have the <a href="http://www.w3.org/TR/wai-aria/complete#presentation" rel="nofollow"><strong><code>presentation</code></strong></a> role. </p>
  
  <p>Feel free to answer this question on as general or specific level as you'd like, but personally I'm concerned with DOM hierarchies made up of mostly <code>&lt;div&gt;</code>s and <code>&lt;span&gt;</code>s rather than native HTML semantics.  <strong><a href="http://www.w3.org/WAI/PF/aria-practices/#kbd_layout_remaining_tabular_header" rel="nofollow">This page on ARIA practices</a></strong> talks about tabular widgets and does mention that:</p>
  
  <blockquote>
    <p>If you decide to not use the native HTML <code>&lt;table&gt;</code> elements and choose more flexible elements, such as <code>&lt;div&gt;</code> and <code>&lt;span&gt;</code>s, with applied WAI-ARIA roles in this section, you should structurally lay out your elements in line with what you would expect from HTML. All of your <code>rowheader</code>s should be in a <code>row</code> and your <code>gridcells</code> should be children of each subsequent row in the same format as HTML for <code>&lt;td</code>>s and <code>&lt;th&gt;</code>s within <code>&lt;tr&gt;</code>s.</p>
  </blockquote>
  
  <p>...but I'm not sure if this is necessary or just a recommendation; usually, the document uses "must" to describe strict specifications.</p>