Ressource RGAA
Bibliothèque de référence - Implémentation des composants ARIA

Cette bibliothèque présente les implémentations des composants ARIA telles qu'ils sont définis par les motifs de conception.

Elle permet d'établir les restitutions par défaut obtenues avec les technologies d'assistance définies par la base de référence.

Cette bibliothèque est destinée à servir de référence pour les tests de restitution demandés par le test 7.6 du critère 7.1 du référentiel RGAA. Elle n'est pas destinée à être utilisée en production.

Note 1 : certains enrichissements, nécessaires à une restitution correcte, sont décrits pour chaque composant. Ces enrichissements ne sont pas demandés par les motifs de conception ARIA car ils sont contextuels à la nature et l'utilisation du composant ou de ses contenus.

Note 2 : les interactions au clavier sont limitées à celles requises par le référentiel.

Note : un enrichissement, via la propriété aria-describedby est implémenté pour vocaliser le message d'aide à l'ouverture de la fenêtre. Le message d'aide est correctement vocalisé par JAWS et NVDA mais ne semble pas vocalisé par VoiceOver

Intégration

/* HTML */
Case à cocher groupée :
<ul aria-labelledby="coul" class="acsa-checkboxGroup">
	<li role="checkbox" aria-labelledby=" coul noir" aria-checked="false" class=" acsa-checkbox acsa-checkbox-false" tabindex="0">
		<span id="noir">Noir</span>
	</li>
	[...]
</ul>
Case à cocher isolée :
<span role="checkbox" aria-checked="false" aria-labelledby="oui"
 class="checkbox acsa-checkbox acsa-checkbox-false" tabindex="0">
 <span id="oui">Acceptez les conditions d'utilisation</span></span>


/*  Javascript */
//Paramètres (composant_config.js)
	checkbox : {
		//CSS
		checkbox : 'acsa-checkbox',
		stateFalse : 'acsa-checkbox-false',
		stateTrue : 'acsa-checkbox-true'
	}
/* Initialisation
	var listCheckbox = document.getElementsByClassName( acsa_config.checkbox.checkbox );
	var checkbox = new Array();
	for ( var i = 0, len = listCheckbox.length; i < len; i++ ){
		listCheckbox[i].addEventListener( 'keydown', function setListChekbox( event ){
			var key = event.keyCode;
			checkbox[i] = new Checkbox ( this, key, event );
		}, false );
		listCheckbox[i].addEventListener( 'click', function setListChekbox(){
			var key = 32;
			checkbox[i] = new Checkbox ( this, key );
		}, false );
	}

Intégration

/* HTML */
<ul role="menubar" class="acsa-menubar">
	<li role="menuitem" aria-haspopup="true" tabindex="0" class="acsa-menuitem"><span>Police</span>
		<ul role="menu">
			<li data-n="1" role=" menuitemcheckbox" aria-checked="false" 
			class="acsa-menuitem-checkbox acsa-menuitem-checkbox-false" 
			tabindex="-1"><span>Arial</span></li>
		[...]
		</ul>
	</li>
	[...]
</ul>


/*  Javascript */
//Paramètres (composant_config.js)
	menubar : {
		//CSS
		menuBar : 'acsa-menubar',
		menuItem : 'acsa-menuitem',
		menuItemCheckbox : 'acsa-menuitem-checkbox',
		stateFalse : 'acsa-menuitem-checkbox-false',
		stateTrue : 'acsa-menuitem-checkbox-true'		
	}
/* Initialisation */
	var listMenuBar = document.getElementsByClassName( acsa_config.menubar.menuBar );
	var menuBar = new Array();
	for ( var i = 0, len = listMenuBar.length; i < len; i++ ){
		menuBar[i] = new Menubar( listMenuBar[i] );
	}

Intégration

/* HTML */
<div class="acsa-accordion" role="tablist">
	<div id="tab-accordion0" role="tab" aria-selected="false" 
	aria-controls="pan-accordion0" class="acsa-accordion-head" 
	tabindex="0" data-n="0">Panneau 1</div>
	<div id="pan-accordion0" role="tabpanel" class="acsa-accordion-pan" 
	aria-labelledby="tab-accordion0" aria-expanded="false" aria-hidden="true">
		<h4 tabindex="0">Contenu du panneau 1</h4>
		[...]
	</div>
	[...]
</div>


/*  Javascript */
//Paramètres (composant_config.js)
	accordion : {
		//Css
		accordion : 'acsa-accordion',
		head : 'acsa-accordion-head',
		headActive : 'acsa-accordion-head-active',
		pan : 'acsa-accordion-pan',
		panActive : 'acsa-accordion-pan-active'
	},
/* Initialisation */
	var listAccordion = document.getElementsByClassName( acsa_config.accordion.accordion );
	var accordion = new Array();
	for ( var i = 0, len = listAccordion.length; i < len; i++ ){
		accordion[i] = new Accordion( listAccordion[i] );
	}

Note : VoiceOver a beaucoup de difficultés avec ce motif de conception. Une solution d'implémentation alternative est décrite dans cet article en anglais : (Not so) Simple ARIA Tree Views and Screen Readers.

Intégration

/* HTML */
<ul class="acsa-tree-root-level" aria-labelledby="tree-title" role="tree">
	<li class="acsa-tree-item acsa-tree-item-visible acsa-tree-item-subtree" 
	data-level="0" aria-expanded="false" tabindex="-1" role="treeitem">
		<span>Travail</span>
		<ul class="acsa-tree-subgroup" role="group">
			<li class="acsa-tree-item" data-level="1" tabindex="-1" role="tree-item">
				Mon-cv.odt
			</li>
			[...]
		</ul>
	</li>
	[...]
</ul>


/*  Javascript */
//Paramètres (composant_config.js)
	tree : {
		//Css
		tree : 'acsa-tree-root-level',
		subtree : 'acsa-tree-subgroup',
		subtreeActive: 'acsa-tree-subgroup-active',
		treeitem: 'acsa-tree-item',
		treeitemSubtree: 'acsa-tree-item-subtree',
		treeitemSubtreeActive: 'acsa-tree-item-subtree-active',
		treeitemVisible: 'acsa-tree-item-visible'
	},
/* Initialisation */
	var listTree = document.getElementsByClassName( acsa_config.tree.tree );
	var tree = new Array();
	for ( var i = 0, len = listTree.length; i < len; i++ ){
		tree[i] = new Tree( listTree[i], i );
	}

Intégration

/* HTML */
<div class="acsa-date-picker-main" role="application">
	<div id="acsa-date-picker-head" class="acsa-date-picker-head">		
		<button type="button" class="acsa-date-picker-prev">
		<span aria-hidden="true"><</span><span class="invisible">Précédent</span></button>     
		<span role="header" id="acsa-datepicker-header" 
		class="acsa-datepicker-header" aria-live="assertive" aria-atomic="true"></span> 
		<button type="button" class="acsa-date-picker-next">
		<span aria-hidden="true">></span><span class="invisible">Suivant</span></button>						
	</div>    
	<table class="" role="grid" aria-labelledby="acsa-datepicker-header" data-input="mydate">
		<thead role="presentation">     
			<tr role="row">             
				<th role="columnheader" aria-label="Dimanche">
					<abbr title="Dimanche">Di</abbr>
				</th> 
				[...]
			</tr>
		</thead>
		<tbody role="presentation">          
			<tr role="row">             
				<td role="gridcell" ></td>
				[...]
			</tr>
			[...]
		</tbody>
	</table>
</div>
			


/*  Javascript */
//Paramètres (composant_config.js)
	datepicker: {
		datepicker: 'acsa-date-picker-main',
		head: 'acsa-datepicker-header',
		datepickerPrev: 'acsa-date-picker-prev',
		datepickerNext: 'acsa-date-picker-next',
		datepickerActive: 'acsa-date-picker-active',
		today: 'acsa-date-picker-today',
		dayName: 'acsa-day-name'
	}
/* Initialisation */
	var listDatepicker = document.getElementsByClassName( acsa_config.datepicker.datepicker );
	var datepicker = new Array();
	for ( var i = 0, len = listDatepicker.length; i < len; i++ ){
		datepicker[i] = new DatePicker( listDatepicker[i] );
	}

/* HTML */
	<div class="acsa-textbox-border">
		<input type="text" id="choice" role="combobox" 
		aria-expanded="false" aria-autocomplete="list" 
		aria-owns="acsa-listbox" aria-readonly="true" data-start="" 
		value="" class="acsa-textbox-list" tabindex="0" />
		<button class="acsa-open-close" type="button">
		<span aria-hidden="true"></span><span class="invisible"></span></button>
	</div>
	<ul role="listbox" class="acsa-autocomplete-listbox" id="acsa-listbox">
		<li role="option" data-value="Afghanistan">Afghanistan </li>
		[...]
	</ul>			


/*  Javascript */
//Paramètres (composant_config.js)
	autocomplete: {
		autocomplete: 'acsa-autocomplete',
		openClose: 'acsa-open-close',
		openCloseOpen : 'acsa-open-close-open',
		openCloseTxtClosed: 'afficher la liste des options',
		openCloseTxtOpen : 'fermer la liste des options',
		openCloseTxtOffscreen: 'invisible',
		textboxInline: 'acsa-textbox-inline',
		textboxList:  'acsa-textbox-list',
		listBox: 'acsa-autocomplete-listbox',
		listBoxOpen: 'acsa-autocomplete-listbox-open',
		listOptionOn: 'acsa-list-higlight'
	
/* Initialisation */
	var listDatepicker = document.getElementsByClassName( acsa_config.datepicker.datepicker );
	var listAutocomplete = document.getElementsByClassName( acsa_config.autocomplete.autocomplete );
	var autocomplete = new Array();
	for ( var i = 0, len = listAutocomplete.length; i < len; i++ ){
		autocomplete[i] = new Autocomplete( listAutocomplete[i], acsa_config.autocomplete.autocomplete );
	}

Note : aucun lecteur d'écran n'offre de restitution satisfaisante.