Aria Children

All components of your web page have (or should have) a behaviour and a purpose.

Accessibility

Lack of required children for elements with an ARIA [role]

All components of your web page have (or should have) a behaviour and a purpose; these must be clear to all those users who need assistive technologies or readers to navigate.

By default, controls already built in HTML have the necessary information, but anything you add yourself must have ARIA roles and attributes.

As for roles, some of these must have specific child roles; if not, it is complicated for assistive technologies to provide information on the page.

How SeoChecker notifies you of missing child roles

If ARIA roles do not have required child roles, SeoChecker will display them.

SeoChecker makes use of the role definitions from the WAI-ARIA specification to check for required owned elements.

How can I add missing child roles?

You have two alternatives:

1. Within the DOM, place the child elements within the parent elements.

<div role="tablist">
	<button role="tab" aria-selected="true" aria-controls="tab-1-pane" active>
		Tab 1
	</button>
	<button role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-2-pane">
		Tab 2
	</button>
	<button role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-3-pane">
		Tab 3
	</button>
</div>

2. Use the aria-owns attribute to associate child roles and parent roles.

<div role="tablist" aria-owns="tab-1 tab-2 tab-3"></div>
…
<button id="tab-1" role="tab" aria-selected="true" aria-controls="tab-1-pane" active>
  Tab 1
</button>
<button id="tab-2" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-2-pane">
  Tab 2
</button>
<button id="tab-3" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-3-pane">
  Tab 3
</button>