diff options
Diffstat (limited to 'files/fr/web/accessibility')
12 files changed, 1679 insertions, 0 deletions
diff --git a/files/fr/web/accessibility/aria/widgets/index.html b/files/fr/web/accessibility/aria/widgets/index.html new file mode 100644 index 0000000000..b343f06bf7 --- /dev/null +++ b/files/fr/web/accessibility/aria/widgets/index.html @@ -0,0 +1,8 @@ +--- +title: widgets +slug: Web/Accessibility/ARIA/widgets +tags: + - Accessibility +translation_of: Web/Accessibility/ARIA/widgets +--- +<p>Cette page s'est auto-générée parce qu'un utilisateur a créé une sous-page à cette page.</p> diff --git a/files/fr/web/accessibility/aria/widgets/overview/index.html b/files/fr/web/accessibility/aria/widgets/overview/index.html new file mode 100644 index 0000000000..d951326193 --- /dev/null +++ b/files/fr/web/accessibility/aria/widgets/overview/index.html @@ -0,0 +1,78 @@ +--- +title: Vue d'ensemble +slug: Web/Accessibility/ARIA/widgets/overview +tags: + - Accessibility + - JavaScript + - Landing + - NeedsUpdate +translation_of: Web/Accessibility/ARIA/widgets/overview +--- +<div class="warning">Attention: besoin d'une mise à jour</div> + +<h2 id="Introduction_2"><span class="mw-headline" id="Introduction">Introduction</span></h2> + +<p>Voici un aperçu de quelques exemples concrets et de bonnes pratiques pour la création de contrôles DHTML (<em>widgets</em>) JavaScript.</p> + +<h2 id="Ressources_générales"><span class="mw-headline" id="General_Resources">Ressources</span> générales</h2> + +<ul> + <li><a class="external text" href="http://dev.aol.com/dhtml_style_guide" rel="nofollow">Le guide du style DHTML</a> fournit des recommandations d'interaction clavier</li> + <li><a class="external text" href="http://www.w3.org/wai/pf/aria-practices" rel="nofollow">Guide pour les auteurs WAI-ARIA</a></li> +</ul> + +<h2 id="Case_(checkbox)">Case (checkbox)</h2> + +<ul> + <li><a class="external text" href="http://www.paciellogroup.com/blog/?p=53" rel="nofollow">Exemples de boutons radio ARIA et case à trois états</a> (tiré du blog "The Paciello Group")</li> + <li><a class="external text" href="http://test.cita.uiuc.edu/aria/checkbox" rel="nofollow">Exemple de case de contrôle ARIA de l'Université d'Illinois</a></li> +</ul> + +<h2 id="Menu_2"><span class="mw-headline" id="Menu">Menu</span></h2> + +<ul> + <li><a class="external text" href="http://yuiblog.com/blog/2007/12/21/menu-waiaria/" rel="nofollow">Utiliser les rôles & états WAI-ARIA avec le menu de contrôle YUI</a></li> +</ul> + +<h2 id="Glissière_(slider)"><span class="mw-headline" id="Slider">Glissière (slider</span>)</h2> + +<ul> + <li>Tiré du blog Paciello Group : glissière ARIA, <a class="external text" href="http://www.paciellogroup.com/blog/?p=68" rel="nofollow">partie une</a>, <a class="external text" href="http://www.paciellogroup.com/blog/?p=69" rel="nofollow">partie deux</a>, <a class="external text" href="http://www.paciellogroup.com/blog/?p=76" rel="nofollow">partie trois</a> (<a class="external text" href="http://www.paciellogroup.com/blog/misc/ARIA/slider/" rel="nofollow">exemple</a>)</li> + <li><a class="external text" href="http://mindtrove.info/articles/creating-an-accessible-internationalized-dojo-rating-widget/" rel="nofollow">Créer un contrôle d'évaluation (rating widget) Dojo accessible et internationalisé</a></li> +</ul> + +<h2 id="Onglets_(tabs)">Onglets (tabs)</h2> + +<ul> + <li><a class="external text" href="http://yuiblog.com/blog/2008/07/30/tabview-aria/" rel="nofollow">Améliorer l'accessibilité de la TabView grâce aux rôles & états WAI-ARIA</a>, tiré du blog YUI</li> + <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/tabs" rel="nofollow">Améliorer les onglets UI jQuery selon WCAG 2.0 et ARIA</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/tabpanel/tabpanel1.html" rel="nofollow">Exemple de panneau à onglet sur CodeTalks</a></li> +</ul> + +<h2 id="Combobox_2"><span class="mw-headline" id="Combobox">Combobox</span></h2> + +<ul> + <li><a class="external text" href="http://www.protofunc.com/scripts/jquery/select/" rel="nofollow">Combobox simple (non éditable) comme remplacement de selectbox</a></li> +</ul> + +<h2 id="Lightbox_2"><span class="mw-headline" id="Lightbox">Lightbox</span></h2> + +<ul> + <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox" rel="nofollow">Application lightbox</a> <a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/table" rel="nofollow">conforme</a> à <a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox" rel="nofollow">WCAG 2.0 et ARIA</a></li> + <li><a class="external free" href="http://majx-js.digissime.net/js/popin/" rel="nofollow">http://majx-js.digissime.net/js/popin/</a></li> +</ul> + +<h2 id="Validation_de_formulaire"><span class="mw-headline" id="Form_Validation">Validation</span> de formulaire</h2> + +<ul> + <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/formular" rel="nofollow">Validation de formulaire en direct conforme à WCAG 2.0 et ARIA</a></li> +</ul> + +<h2 id="Tables"><span class="mw-headline" id="Table">Tables</span></h2> + +<ul> + <li><a class="external text" href="http://www.einfach-fuer-alle.de/artikel/barrierefreie-formulare-mit-html-css-und-javascript/" rel="nofollow">Tutoriel en allemand sur la création de formulaire accessible</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/grid/grid.sample.html" rel="nofollow">Exemple simple de grille sur CodeTalks</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/datepicker/datepicker.sample.html" rel="nofollow">Grille de sélection de date sur CodeTalks</a></li> + <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/table" rel="nofollow">Tables triables conformes à WCAG 2.0 et ARIA</a></li> +</ul> diff --git a/files/fr/web/accessibility/at-apis/at-spi/index.html b/files/fr/web/accessibility/at-apis/at-spi/index.html new file mode 100644 index 0000000000..d8aa1d4763 --- /dev/null +++ b/files/fr/web/accessibility/at-apis/at-spi/index.html @@ -0,0 +1,9 @@ +--- +title: AT-SPI +slug: Web/Accessibility/AT-APIs/AT-SPI +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Tech/Accessibility/AT-APIs/AT-SPI +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/fr/web/accessibility/at-apis/at-spi/interfaces_at-spi_prises_en_charge/index.html b/files/fr/web/accessibility/at-apis/at-spi/interfaces_at-spi_prises_en_charge/index.html new file mode 100644 index 0000000000..49a3682b84 --- /dev/null +++ b/files/fr/web/accessibility/at-apis/at-spi/interfaces_at-spi_prises_en_charge/index.html @@ -0,0 +1,136 @@ +--- +title: Interfaces AT-SPI prises en charge +slug: Web/Accessibility/AT-APIs/AT-SPI/Interfaces_AT-SPI_prises_en_charge +tags: + - API + - AT_APIs + - AT_SPI + - Accessibilité +translation_of: Mozilla/Tech/Accessibility/AT-APIs/AT-SPI/Interfaces +--- +<table style=""> + <tbody> + <tr> + <th>Interface</th> + <th>Prise en charge</th> + <th>Notes</th> + </tr> + <tr> + <td>Accessible</td> + <td>Oui</td> + <td> + <p>Voir les <a href="/fr/docs/Accessibilité_prise_en_charge_AT-SPI#Attributs_objet_AT-SPI_pris_en_charge" title="/en-US/docs/Accessibility_AT-SPI_Support#Supported_AT-SPI_Object_Attributes">attributs objets</a> pris en charge</p> + </td> + </tr> + <tr> + <td>Action</td> + <td>Oui</td> + <td>Toutes les méthodes</td> + </tr> + <tr> + <td>Application</td> + <td>Oui</td> + <td>Toutes les méthodes</td> + </tr> + <tr> + <td>Component</td> + <td>Oui</td> + <td>Toutes les méthodes</td> + </tr> + <tr> + <td>Desktop</td> + <td>Non</td> + </tr> + <tr> + <td>Document</td> + <td>Oui</td> + <td>Toutes les méthodes ?</td> + </tr> + <tr> + <td>EditableText</td> + <td>Oui</td> + <td>Toutes les méthodes</td> + </tr> + <tr> + <td>Event</td> + <td>Oui</td> + <td> + <p>Voir les <a href="/fr/docs/Accessibilité_prise_en_charge_AT-SPI#Événement_AT-SPI_pris_en_charge" title="/en-US/docs/Accessibility_AT-SPI_Support#Supported_AT-SPI_Events">événements</a> pris en charge</p> + </td> + </tr> + <tr> + <td>Hyperlink</td> + <td>Oui</td> + <td>N’importe quel objet inclus dans un texte est considéré comme un hyperlien !</td> + </tr> + <tr> + <td>Hypertext</td> + <td>Oui</td> + <td>N’importe quel texte comportant un objet est considéré comme un hyperlien !</td> + </tr> + <tr> + <td>Image</td> + <td>Non</td> + <td>ROLE_IMAGE est pris en charge et cela suffit</td> + </tr> + <tr> + <td>LoginHelper</td> + <td>Non</td> + </tr> + <tr> + <td>Registry</td> + <td>Non ?</td> + </tr> + <tr> + <td>Relation</td> + <td>Oui</td> + <td> + <p>Voir les <a href="/fr/docs/Accessibilité_prise_en_charge_AT-SPI#Relations_AT-SPI_pris_en_charge" title="/en-US/docs/Accessibility_AT-SPI_Support#Supported_AT-SPI_Relations">relations</a> pris en charge</p> + </td> + </tr> + <tr> + <td>Role</td> + <td>Oui</td> + <td> + <p>Voir les <a href="/fr/docs/Accessibilité_prise_en_charge_AT-SPI#Rôles_AT-SPI_pris_en_charge" title="/en-US/docs/Accessibility/AT-SPI_Support#Supported_AT-SPI_Roles">rôles</a> pris en charge</p> + </td> + </tr> + <tr> + <td>Selection</td> + <td>Oui</td> + <td>Pas encore pris en charge pour le texte</td> + </tr> + <tr> + <td>Selector</td> + <td>Non</td> + </tr> + <tr> + <td>State</td> + <td>Oui</td> + <td> + <p>Voir les <a href="/fr/docs/Accessibilité_prise_en_charge_AT-SPI#États_AT-SPI_pris_en_charge" title="/en-US/docs/Accessibility/AT-SPI_Support#Supported_AT-SPI_States">états</a> pris en charge</p> + </td> + </tr> + <tr> + <td>StreamableContent</td> + <td>Non</td> + <td>Peut s’appliquer aux greffons, mais probablement pas aux objets rendus par Gecko</td> + </tr> + <tr> + <td>Table</td> + <td>Oui</td> + <td>De plus, l’objet se voit attribuer <code>layout-guess="true"</code> quand Gecko pense que le tableau est pour un layout et non pour des données</td> + </tr> + <tr> + <td>Text</td> + <td>Oui</td> + <td> + <p>Voir les <a href="/fr/docs/Accessibilité_prise_en_charge_AT-SPI#Attributs_texte_AT-SPI_pris_en_charge" title="/en-US/docs/Accessibility_AT-SPI_Support#Supported_AT-SPI_Text_Attributes">attributs de texte</a> pris en charge</p> + </td> + </tr> + <tr> + <td>Value</td> + <td>Oui</td> + </tr> + </tbody> +</table> diff --git a/files/fr/web/accessibility/at-apis/gecko/index.html b/files/fr/web/accessibility/at-apis/gecko/index.html new file mode 100644 index 0000000000..9cd605e79d --- /dev/null +++ b/files/fr/web/accessibility/at-apis/gecko/index.html @@ -0,0 +1,9 @@ +--- +title: Gecko +slug: Web/Accessibility/AT-APIs/Gecko +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/fr/web/accessibility/at-apis/gecko/roles/index.html b/files/fr/web/accessibility/at-apis/gecko/roles/index.html new file mode 100644 index 0000000000..7aac23cef2 --- /dev/null +++ b/files/fr/web/accessibility/at-apis/gecko/roles/index.html @@ -0,0 +1,736 @@ +--- +title: Rôles Gecko +slug: Web/Accessibility/AT-APIs/Gecko/Roles +tags: + - AT_APIs + - Accessibilité + - NeedsTranslation + - Reference +translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko/Roles +--- +<p><a href="/fr/docs/Accessibility:AT-APIs#Supported_Roles">« AT APIs Support Page</a></p> +<p><span class="seoSummary">This page offers a list of accessible roles used in Gecko. Role constants are defined in the <code><a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleRole" title="">nsIAccessibleRole</a></code> interface.</span></p> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_NOTHING">ROLE_NOTHING</a></code></dt> + <dd> + Used when the accessible item doesn't have a strongly defined role.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TITLEBAR">ROLE_TITLEBAR</a></code></dt> + <dd> + Represents a title or caption bar for a window. Used by MSAA only, this is supported automatically by Microsoft Windows.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUBAR">ROLE_MENUBAR</a></code></dt> + <dd> + Represents the menu bar (positioned beneath the title bar of a window on most platforms or at the top of the screen on Mac OS X) from which menus are selected by the user.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SCROLLBAR">ROLE_SCROLLBAR</a></code></dt> + <dd> + Represents a vertical or horizontal scroll bar, which is part of the client area or used in a control.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GRIP">ROLE_GRIP</a></code></dt> + <dd> + Represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows. For example, a user clicks and drags a sizing grip in the lower-right corner of a window to resize it</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SOUND">ROLE_SOUND</a></code></dt> + <dd> + Represents a system sound, which is associated with various system events.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CURSOR">ROLE_CURSOR</a></code></dt> + <dd> + Represents the system mouse pointer.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CARET">ROLE_CARET</a></code></dt> + <dd> + Represents the system caret.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ALERT">ROLE_ALERT</a></code></dt> + <dd> + Represents an alert or a condition that a user should be notified about. Assistive Technologies typically respond to the role by reading the entire onscreen contents of containers advertising this role. Should be used for warning dialogs, etc.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_WINDOW">ROLE_WINDOW</a></code></dt> + <dd> + Represents the window frame, which contains child objects such as a title bar, client, and other objects contained in a window. The role is supported automatically by Microsoft Windows.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_INTERNAL_FRAME">ROLE_INTERNAL_FRAME</a></code></dt> + <dd> + A sub-document.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUPOPUP">ROLE_MENUPOPUP</a></code></dt> + <dd> + Represents a menu, which presents a list of options from which the user can make a selection to perform an action.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUITEM">ROLE_MENUITEM</a></code></dt> + <dd> + Represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TOOLTIP">ROLE_TOOLTIP</a></code></dt> + <dd> + Represents a tooltip that provides helpful hints; this is generally displayed at the mouse cursor position.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_APPLICATION">ROLE_APPLICATION</a></code></dt> + <dd> + Represents a main window for an application.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT">ROLE_DOCUMENT</a></code></dt> + <dd> + Represents a document window. A document window is always contained within an application window.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PANE">ROLE_PANE</a></code></dt> + <dd> + Represents a pane within a frame or document window. Users can navigate between panes and within the contents of the current pane, but cannot navigate between items in different panes. Thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHART">ROLE_CHART</a></code></dt> + <dd> + Represents a graphical image used to represent data.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIALOG">ROLE_DIALOG</a></code></dt> + <dd> + Represents a dialog box or message box.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BORDER">ROLE_BORDER</a></code></dt> + <dd> + Represents a window border.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GROUPING">ROLE_GROUPING</a></code></dt> + <dd> + Logically groups other objects.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SEPARATOR">ROLE_SEPARATOR</a></code></dt> + <dd> + Used to visually divide a space into two regions, such as a separator menu item or a bar that divides split panes within a window.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TOOLBAR">ROLE_TOOLBAR</a></code></dt> + <dd> + Represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_STATUSBAR">ROLE_STATUSBAR</a></code></dt> + <dd> + Represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object. The status bar has multiple fields, which display different kinds of information.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TABLE">ROLE_TABLE</a></code></dt> + <dd> + Represents a table that contains rows and columns of cells, and optionally, row headers and column headers.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COLUMNHEADER">ROLE_COLUMNHEADER</a></code></dt> + <dd> + Represents a column header, providing a visual label for a column in a table.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ROWHEADER">ROLE_ROWHEADER</a></code></dt> + <dd> + Represents a row header, which provides a visual label for a table row.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COLUMN">ROLE_COLUMN</a></code></dt> + <dd> + Represents a column of cells within a table.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ROW">ROLE_ROW</a></code></dt> + <dd> + Represents a row of cells within a table.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CELL">ROLE_CELL</a></code></dt> + <dd> + Represents a cell within a table.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LINK">ROLE_LINK</a></code></dt> + <dd> + Represents a link to something else. This object might look like text or a graphic, but it acts like a button.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HELPBALLOON">ROLE_HELPBALLOON</a></code></dt> + <dd> + Displays a Help topic in the form of a ToolTip or Help balloon.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHARACTER">ROLE_CHARACTER</a></code></dt> + <dd> + Represents a cartoon-like graphic object, such as Microsoft Office Assistant, which is displayed to provide help to users of an application.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LIST">ROLE_LIST</a></code></dt> + <dd> + Represents a list box, allowing the user to select one or more items.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LISTITEM">ROLE_LISTITEM</a></code></dt> + <dd> + Represents an item in a list.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OUTLINE">ROLE_OUTLINE</a></code></dt> + <dd> + Represents an outline or tree structure, such as a tree view control, that displays a hierarchical list and allows the user to expand and collapse branches.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OUTLINEITEM">ROLE_OUTLINEITEM</a></code></dt> + <dd> + Represents an item in an outline or tree structure.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PAGETAB">ROLE_PAGETAB</a></code></dt> + <dd> + Represents a page tab, it is a child of a page tab list.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PROPERTYPAGE">ROLE_PROPERTYPAGE</a></code></dt> + <dd> + Represents a property sheet.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_INDICATOR">ROLE_INDICATOR</a></code></dt> + <dd> + Represents an indicator, such as a pointer graphic, that points to the current item.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GRAPHIC">ROLE_GRAPHIC</a></code></dt> + <dd> + Represents a picture.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_STATICTEXT">ROLE_STATICTEXT</a></code></dt> + <dd> + Represents read-only text, such as labels for other controls or instructions in a dialog box. Static text cannot be modified or selected.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TEXT_LEAF">ROLE_TEXT_LEAF</a></code></dt> + <dd> + Represents selectable text that allows edits or is designated read-only.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PUSHBUTTON">ROLE_PUSHBUTTON</a></code></dt> + <dd> + Represents a push button control.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHECKBUTTON">ROLE_CHECKBUTTON</a></code></dt> + <dd> + Represents a check box control.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RADIOBUTTON">ROLE_RADIOBUTTON</a></code></dt> + <dd> + Represents an option button, also called a radio button. It is one of a group of mutually exclusive options. All objects sharing a single parent that have this attribute are assumed to be part of single mutually exclusive group.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COMBOBOX">ROLE_COMBOBOX</a></code></dt> + <dd> + Represents a combo box; an edit control with an associated list box that provides a set of predefined choices.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DROPLIST">ROLE_DROPLIST</a></code></dt> + <dd> + Represents the calendar control.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PROGRESSBAR">ROLE_PROGRESSBAR</a></code></dt> + <dd> + Represents a progress bar, dynamically showing the user the percent complete of an operation in progress.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIAL">ROLE_DIAL</a></code></dt> + <dd> + Represents a dial or knob whose purpose is to allow a user to set a value.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HOTKEYFIELD">ROLE_HOTKEYFIELD</a></code></dt> + <dd> + Represents a hot-key field that allows the user to enter a combination or sequence of keystrokes.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SLIDER">ROLE_SLIDER</a></code></dt> + <dd> + Represents a slider, which allows the user to adjust a setting in given increments between minimum and maximum values.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SPINBUTTON">ROLE_SPINBUTTON</a></code></dt> + <dd> + Represents a spin box, which is a control that allows the user to increment or decrement the value displayed in a separate "buddy" control associated with the spin box.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIAGRAM">ROLE_DIAGRAM</a></code></dt> + <dd> + Represents a graphical image used to diagram data.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ANIMATION">ROLE_ANIMATION</a></code></dt> + <dd> + Represents an animation control, which contains content that changes over time, such as a control that displays a series of bitmap frames.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_EQUATION">ROLE_EQUATION</a></code></dt> + <dd> + Represents a mathematical equation. It is used by MATHML.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BUTTONDROPDOWN">ROLE_BUTTONDROPDOWN</a></code></dt> + <dd> + Represents a button that drops down a list of items.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BUTTONMENU">ROLE_BUTTONMENU</a></code></dt> + <dd> + Represents a button that drops down a menu.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BUTTONDROPDOWNGRID">ROLE_BUTTONDROPDOWNGRID</a></code></dt> + <dd> + Represents a button that drops down a grid.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_WHITESPACE">ROLE_WHITESPACE</a></code></dt> + <dd> + Represents blank space between other objects.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PAGETABLIST">ROLE_PAGETABLIST</a></code></dt> + <dd> + Represents a container of page tab controls.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CLOCK">ROLE_CLOCK</a></code></dt> + <dd> + Represents a control that displays time.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SPLITBUTTON">ROLE_SPLITBUTTON</a></code></dt> + <dd> + Represents a button on a toolbar that has a drop-down list icon directly adjacent to the button.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_IPADDRESS">ROLE_IPADDRESS</a></code></dt> + <dd> + Represents an edit control designed for an Internet Protocol (IP) address. The edit control is divided into sections for the different parts of the IP address.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ACCEL_LABEL">ROLE_ACCEL_LABEL</a></code></dt> + <dd> + Represents a label control that has an accelerator.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ARROW">ROLE_ARROW</a></code></dt> + <dd> + Represents an arrow in one of the four cardinal directions.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CANVAS">ROLE_CANVAS</a></code></dt> + <dd> + Represents a control that can be drawn into and is used to trap events.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHECK_MENU_ITEM">ROLE_CHECK_MENU_ITEM</a></code></dt> + <dd> + Represents a menu item with a check box.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COLOR_CHOOSER">ROLE_COLOR_CHOOSER</a></code></dt> + <dd> + Represents a specialized dialog that lets the user choose a color.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DATE_EDITOR">ROLE_DATE_EDITOR</a></code></dt> + <dd> + Represents control whose purpose is to allow a user to edit a date.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DESKTOP_ICON">ROLE_DESKTOP_ICON</a></code></dt> + <dd> + An iconified internal frame in an ROLE_DESKTOP_PANE.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DESKTOP_FRAME">ROLE_DESKTOP_FRAME</a></code></dt> + <dd> + A desktop pane. A pane that supports internal frames and iconified versions of those internal frames.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIRECTORY_PANE">ROLE_DIRECTORY_PANE</a></code></dt> + <dd> + A directory pane. A pane that allows the user to navigate through and select the contents of a directory. May be used by a file chooser.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FILE_CHOOSER">ROLE_FILE_CHOOSER</a></code></dt> + <dd> + A file chooser. A specialized dialog that displays the files in the directory and lets the user select a file, browse a different directory, or specify a filename. May use the directory pane to show the contents of a directory.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FONT_CHOOSER">ROLE_FONT_CHOOSER</a></code></dt> + <dd> + A font chooser. A font chooser is a component that lets the user pick various attributes for fonts.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHROME_WINDOW">ROLE_CHROME_WINDOW</a></code></dt> + <dd> + Frame role. A top level window with a title bar, border, menu bar, etc. It is often used as the primary window for an application.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GLASS_PANE">ROLE_GLASS_PANE</a></code></dt> + <dd> + A glass pane. A pane that is guaranteed to be painted on top of all panes beneath it.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HTML_CONTAINER">ROLE_HTML_CONTAINER</a></code></dt> + <dd> + A document container for HTML, whose children represent the document content.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ICON">ROLE_ICON</a></code></dt> + <dd> + A small fixed size picture, typically used to decorate components.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LABEL">ROLE_LABEL</a></code></dt> + <dd> + Presents an icon or short string in an interface.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LAYERED_PANE">ROLE_LAYERED_PANE</a></code></dt> + <dd> + A layered pane. A specialized pane that allows its children to be drawn in layers, providing a form of stacking order. This is usually the pane that holds the menu bar as well as the pane that contains most of the visual components in a window.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OPTION_PANE">ROLE_OPTION_PANE</a></code></dt> + <dd> + A specialized pane whose primary use is inside a dialog.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT">ROLE_PASSWORD_TEXT</a></code></dt> + <dd> + A text object uses for passwords, or other places where the text content is not shown visibly to the user.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_POPUP_MENU">ROLE_POPUP_MENU</a></code></dt> + <dd> + A temporary window that is usually used to offer the user a list of choices, and then hides when the user selects one of those choices.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RADIO_MENU_ITEM">ROLE_RADIO_MENU_ITEM</a></code></dt> + <dd> + A radio button that is a menu item.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ROOT_PANE">ROLE_ROOT_PANE</a></code></dt> + <dd> + A root pane. A specialized pane that has a glass pane and a layered pane as its children. Its children can include scroll bars and a viewport.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SCROLL_PANE">ROLE_SCROLL_PANE</a></code></dt> + <dd> + A scroll pane. An object that allows a user to incrementally view a large amount of information.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SPLIT_PANE">ROLE_SPLIT_PANE</a></code></dt> + <dd> + A split pane. A specialized panel that presents two other panels at the same time. Between the two panels is a divider the user can manipulate to make one panel larger and the other panel smaller.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TABLE_COLUMN_HEADER">ROLE_TABLE_COLUMN_HEADER</a></code></dt> + <dd> + The header for a column of a table.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TABLE_ROW_HEADER">ROLE_TABLE_ROW_HEADER</a></code></dt> + <dd> + The header for a row of a table.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TEAR_OFF_MENU_ITEM">ROLE_TEAR_OFF_MENU_ITEM</a></code></dt> + <dd> + A menu item used to tear off and reattach its menu.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TERMINAL">ROLE_TERMINAL</a></code></dt> + <dd> + Represents an accessible terminal.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TEXT_CONTAINER">ROLE_TEXT_CONTAINER</a></code></dt> + <dd> + Collection of objects that constitute a logical text entity.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TOGGLE_BUTTON">ROLE_TOGGLE_BUTTON</a></code></dt> + <dd> + A toggle button. A specialized push button that can be checked or unchecked, but does not provide a separate indicator for the current state.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TREE_TABLE">ROLE_TREE_TABLE</a></code></dt> + <dd> + Representas a control that is capable of expanding and collapsing rows as well as showing multiple columns of data.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_VIEWPORT">ROLE_VIEWPORT</a></code></dt> + <dd> + A viewport. An object usually used in a scroll pane. It represents the portion of the entire data that the user can see. As the user manipulates the scroll bars, the contents of the viewport can change.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HEADER">ROLE_HEADER</a></code></dt> + <dd> + Header of a document page.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FOOTER">ROLE_FOOTER</a></code></dt> + <dd> + Footer of a document page.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PARAGRAPH">ROLE_PARAGRAPH</a></code></dt> + <dd> + A paragraph of text.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RULER">ROLE_RULER</a></code></dt> + <dd> + A ruler such as those used in word processors.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_AUTOCOMPLETE">ROLE_AUTOCOMPLETE</a></code></dt> + <dd> + A text entry having dialog or list containing items for insertion into an entry widget, for instance a list of words for completion of a text entry.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_EDITBAR">ROLE_EDITBAR</a></code></dt> + <dd> + An editable text object in a toolbar.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ENTRY">ROLE_ENTRY</a></code></dt> + <dd> + An control whose textual content may be entered or modified by the user.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CAPTION">ROLE_CAPTION</a></code></dt> + <dd> + A caption describing another object.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT_FRAME">ROLE_DOCUMENT_FRAME</a></code></dt> + <dd> + A visual frame or container which contains a view of document content. Document frames may occur within another Document instance, in which case the second document may be said to be embedded in the containing instance. HTML frames are often ROLE_DOCUMENT_FRAME. Either this object, or a singleton descendant, should implement the Document interface.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HEADING">ROLE_HEADING</a></code></dt> + <dd> + Heading.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PAGE">ROLE_PAGE</a></code></dt> + <dd> + An object representing a page of document content. It is used in documents which are accessed by the user on a page by page basis.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SECTION">ROLE_SECTION</a></code></dt> + <dd> + A container of document content.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_REDUNDANT_OBJECT">ROLE_REDUNDANT_OBJECT</a></code></dt> + <dd> + An object which is redundant with another object in the accessible hierarchy. ATs typically ignore objects with this role.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FORM">ROLE_FORM</a></code></dt> + <dd> + A container of form controls.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_IME">ROLE_IME</a></code></dt> + <dd> + An object which is used to allow input of characters not found on a keyboard, such as the input of Chinese characters on a Western keyboard.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_APP_ROOT">ROLE_APP_ROOT</a></code></dt> + <dd> + ???</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PARENT_MENUITEM">ROLE_PARENT_MENUITEM</a></code></dt> + <dd> + Represents a menu item, which is an entry in a menu that a user can choose to display another menu.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CALENDAR">ROLE_CALENDAR</a></code></dt> + <dd> + A calendar that allows the user to select a date.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COMBOBOX_LIST">ROLE_COMBOBOX_LIST</a></code></dt> + <dd> + A list of items that is shown by combobox.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COMBOBOX_OPTION">ROLE_COMBOBOX_OPTION</a></code></dt> + <dd> + A item of list that is shown by combobox</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_IMAGE_MAP">ROLE_IMAGE_MAP</a></code></dt> + <dd> + An image map -- has child links representing the areas</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OPTION">ROLE_OPTION</a></code></dt> + <dd> + An option in a listbox</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RICH_OPTION">ROLE_RICH_OPTION</a></code></dt> + <dd> + A rich option in a listbox, it can have other widgets as children</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LISTBOX">ROLE_LISTBOX</a></code></dt> + <dd> + A list of options</dd> +</dl> +<div class="note"> + <p><strong>Editor's note:</strong> Use template <span class="nowiki"><code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_">ROLE_</a></code></span> to get reference on accessible role. It looks like <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUITEM">ROLE_MENUITEM</a></code>.</p> +</div> +<p> </p> diff --git a/files/fr/web/accessibility/at-apis/gecko/roles/role_alert/index.html b/files/fr/web/accessibility/at-apis/gecko/roles/role_alert/index.html new file mode 100644 index 0000000000..0a7b46f960 --- /dev/null +++ b/files/fr/web/accessibility/at-apis/gecko/roles/role_alert/index.html @@ -0,0 +1,41 @@ +--- +title: ROLE_ALERT +slug: Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ALERT +tags: + - AT_APIs + - Accessibilité + - Reference + - Référence(2) + - Rôle + - À relire +translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko/Roles/ROLE_ALERT +--- +<p><a href="/fr/docs/Accessibilité:AT-APIs:Gecko:Rôles">« Rôles Gecko Page</a></p> + +<p>Représente une alerte ou une condition qui doit être notifiée à l’utilisateur. Les technologies d’assistance répondent généralement au rôle en lisant l’intégralité des contenus affichés dans les conteneurs possédant ce rôle. Peut être utilisé pour les boîtes de dialogue d’alerte, etc.</p> + +<h2 id="Mapped_to" name="Mapped_to">Associé à</h2> + +<ul> + <li>AT-SPI : <code>ROLE_ALERT</code></li> + <li>ATK : <code>ATK_ROLE_ALERT</code></li> + <li>MSAA/IA2 : <code>ROLE_SYSTEM_ALERT</code></li> + <li>UA : <code>NSAccessibilityWindowRole</code></li> +</ul> + +<h2 id="Événements" name="Événements">Événements</h2> + +<ul> + <li><code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Events#EVENT_ALERT">EVENT_ALERT</a></code> - se déclenche lorsque que le composant est affiché.</li> +</ul> + +<h2 id="Used_by" name="Used_by">Utilisé par</h2> + +<ul> + <li>ARIA : <code><a class="external" href="https://w3c.github.io/aria/#alert">alert</a></code>, <code><a class="external" href="https://w3c.github.io/aria/#alertdialog">alertdialog</a></code></li> + <li>XUL : <<code><a href="/fr/docs/Mozilla/Tech/XUL/notification" title="notification">notification</a></code>/>, <<code><a href="/fr/docs/Mozilla/Tech/XUL/panel" title="panel">panel</a></code> noautofocus = "true"/></li> +</ul> + +<p></p><section class="Quick_links" id="Quick_Links"> +<ol><li><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ALERT">ROLE_ALERT</a></li></ol> +</section><p></p> diff --git a/files/fr/web/accessibility/at-apis/gecko/roles/role_password_text/index.html b/files/fr/web/accessibility/at-apis/gecko/roles/role_password_text/index.html new file mode 100644 index 0000000000..a3eaacc6b8 --- /dev/null +++ b/files/fr/web/accessibility/at-apis/gecko/roles/role_password_text/index.html @@ -0,0 +1,27 @@ +--- +title: ROLE PASSWORD TEXT +slug: Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT +translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT +--- +<p> </p> + +<p><a href="/fr/docs/Accessibility:AT-APIs:Gecko:Roles">« Gecko Roles Page</a></p> + +<h2 id="Description" name="Description">Description</h2> + +<p><span class="tlid-translation translation"><span title="">Un objet texte utilise pour les mots de passe ou d'autres endroits où le contenu du texte n'est pas affiché de manière visible pour l'utilisateur.</span></span></p> + +<h2 id="Mapped_to" name="Mapped_to"><span class="tlid-translation translation"><span title="">Orienté vers</span></span></h2> + +<ul> + <li>AT-SPI: ROLE_PASSWORD_TEXT</li> + <li>ATK: ATK_ROLE_PASSWORD_TEXT</li> + <li>UA: NSAccessibilityTextFieldRole</li> + <li>MSAA/IA2: ROLE_SYSTEM_TEXT</li> +</ul> + +<h2 id="Used_by" name="Used_by"><span class="tlid-translation translation"><span title="">Utilisé par</span></span></h2> + +<ul> + <li>HTML: <input type="password"/></li> +</ul> diff --git a/files/fr/web/accessibility/at-apis/index.html b/files/fr/web/accessibility/at-apis/index.html new file mode 100644 index 0000000000..86c5d18b73 --- /dev/null +++ b/files/fr/web/accessibility/at-apis/index.html @@ -0,0 +1,56 @@ +--- +title: AT APIs Support +slug: Web/Accessibility/AT-APIs +tags: + - AT_APIs + - Accessibility + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Tech/Accessibility/AT-APIs +--- +<h2 id="Introduction" name="Introduction">Introduction</h2> +<div class="note">Documentation is in progress still. But in the meantime it more up-to-date and contains more details than existed analogues for <a class="external" href="http://developer.mozilla.org/en/docs/Accessibility/AT-SPI_Support">AT-SPI</a> and <a class="external" href="http://wiki.mozilla.org/Accessibility/AT-Windows-API">MSAA</a></div> +<p>This documentation explains how makers of screen readers, voice dictation packages, onscreen keyboards, magnification software and other assitive technologies can support Gecko-based software. We provide for them the support of these products on Windows, Linux/Unix and OS X platforms.</p> +<h3 id="Accessible_Gecko" name="Accessible_Gecko">Accessible Gecko</h3> +<p>Gecko is a rendering engine that Firefox, SeaMonkey, Netscape and yelp use. Gecko can render a variety of content, not just HTML and supports key web standards such as Cascading Style Sheets, Javascript and the W3C DOM. Gecko also handles the users keystrokes and mouse clicks. Gecko is the core architecture that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it.</p> +<h3 id="Gecko_Based_Applications" name="Gecko_Based_Applications">Gecko Based Applications</h3> +<p>Gecko can be used in two ways to create application:</p> +<h4 id="Embedded_Clients" name="Embedded_Clients">Embedded Clients</h4> +<p>Embedded clients use Gecko only in the content window, at the moment for HTML and generic XML only. They typically use standard Windows controls for their user interface -- the area outside of the client content window, plus the context menu.</p> +<ul> <li>on Windows platform <ul> <li>MFCEMBED testing client - this is a very simple package, great for testing basic HTML accessibility with your products and the Gecko rendering engine (please <a href="#Contacts">contact</a> us for a copy).</li> <li><a class="external" href="http://kmeleon.sourceforge.net/">K-Meleon</a> - light, ultra-fast and more advanced (fully configurable) Gecko-based web browser available on the Windows platform</li> </ul> </li> <li>on Linux/Unix platform <ul> <li><a class="external" href="http://live.gnome.org/Yelp">Yelp help viewer</a> - the help viewer in Gnome</li> <li><a class="external" href="http://www.gnome.org/projects/evolution/">Evolution email</a> - provides integrated mail, addressbook and calendaring functionality to users of the GNOME desktop.</li> </ul> </li> <li>on Mac platform <ul> <li><a class="external" href="http://caminobrowser.org/">Camino</a> - web browser for OS X</li> </ul> </li> +</ul> +<h4 id="XUL_Applications" name="XUL_Applications">XUL Applications</h4> +<p>XUL applications make full use of the Gecko architecture, not only for HTML content, but also for the entire user interface. Widgets such as menus, tab panels, tree views and dialogs are provided via an XML language called XUL (eXtensible User-interface Language). None of the user interface contains standard OS controls. This is done to ensure a common look and feel across all supported platforms, and to allow for different skins (appearances). Developing a XUL window is not that different from developing a web page, but the elements available to add widgets are more powerful and designed to be similar to desktop widgets.</p> +<p>Examples of XUL applications:</p> +<ul> <li><a class="external" href="http://www.mozilla.com/en-US/firefox/">Firefox</a> - web-browser</li> <li><a class="external" href="http://www.mozilla.com/en-US/thunderbird/">Thunderbird</a> - email client</li> <li><a class="external" href="http://www.seamonkey-project.org/">Seamonkey</a> - web-browser, advanced e-mail and newsgroup client, IRC chat client, and HTML editing made simple</li> <li><a class="external" href="http://www.mozilla.org/projects/calendar/sunbird/">Sunbird</a> - cross-platform calendar application</li> <li><a class="external" href="http://www.kompozer.net/">KompoZer</a> - a complete Web Authoring System for Linux Desktop, Microsoft Windows and Macintosh users to rival programs like FrontPage and Dreamweaver.</li> <li><a class="external" href="http://www.openkomodo.com/">Open Komodo</a> - platform for building developer environments</li> <li><a class="external" href="http://www.getmiro.com/">Miro</a> - a free, open source internet tv and video player</li> <li>Any XulRunner application (<a class="external" href="http://www.songbirdnest.com/">Songbird media player</a>, etc.)</li> <li>Extensions to other XUL apps (e.g. <a class="external" href="http://addons.mozilla.org">Firefox extensions</a>)</li> +</ul> +<h3 id="Gecko_Version" name="Gecko_Version">Gecko Version</h3> +<p>For Firefox and all other Gecko-based products: this documentation applies to up-to-date product builds based on Gecko 1.9.2 -- currently not available on official releases. However most of described features are supported starting from Gecko 1.9.0 (Firefox 3.0). However it's preferable to grab the current build of Firefox or any other Gecko-based product to be up to dated:</p> +<ul> <li><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Firefox</a> recent builds</li> <li><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/thunderbird/nightly/latest-trunk/">Thunderbird</a> recent builds</li> <li><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/seamonkey/nightly/latest-trunk/">Seamonkey</a> recent builds</li> +</ul> +<h3 id="Determining_if_Accessibility_is_Enabled_in_a_Firefox">Determining if Accessibility is Enabled in a Firefox</h3> +<p>Accessibility is enabled on Windows and Linux platforms by default. As well you might find helpful the <a class="link-https" href="https://addons.mozilla.org/firefox/2407/">about:accessibilityenabled Firefox</a> extension.</p> +<h2 id="Supported_AT_APIs" name="Supported_AT_APIs">Supported AT APIs</h2> +<h3 id="AT_APIs_terms" name="AT_APIs_terms">AT APIs terms</h3> +<dl><dt> <a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/msaa/msaastart_9w2t.asp">Microsoft Active Accessibility (MSAA)</a> </dt><dd> an API devised by Microsoft so that accessibility aids can track what's going on inside the user interface of any software package that supports it. If you seriously need to understand MSAA, you'll need to read the docs on MSDN and play with the sample apps and code that come with <a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=4179742f-1f3d-4115-a8ba-2f7a6022b533&displaylang=en">MSAA SDK 1.3</a>. (I recommend SDK 1.3 because the MSAA SDK 2.0 doesn't come with the source code to the testing tools. The other differences are not important). </dd></dl> <dl><dt> <a class="external" href="http://www.linux-foundation.org/en/Accessibility/IAccessible2">IAccessible2 (IA2)</a> </dt><dd> IAccessible2 is a new accessibility API which complements Microsoft's earlier work on MSAA. This API fills critical accessibility API gaps in the MSAA offering. </dd></dl> <dl><dt> <a class="external" href="http://www.gnome.org/~billh/at-spi-idl/html/">Assistive Technology Service Provider Interface (AT-SPI)</a> </dt><dd> an API devised by Sun Microsystems so that accessibility aids can track what's going on inside the user interface of any software package that supports it. If you seriously need to understand AT-SPI, you'll need to read the docs on gnome.org and play with the available sample apps and code, such as at-poke. Please note that the web docs are sometimes out of date, and the <a class="external" href="http://cvs.gnome.org/viewcvs/at-spi/">latest AT-SPI is available on CVS</a>. </dd></dl> <dl><dt> <a class="external" href="http://www.apple.com/macosx/features/universalaccess/">Universal Access (UA)</a> </dt><dd> Universal Access (UA) is the Apple's accessibility framework. </dd></dl> +<h3 id="Windows_platform" name="Windows_platform">Windows platform</h3> +<p>We support MSAA (Microsoft Active Accessibility) and IAccessible2 on Windows. Also we expose <a href="/en/Accessibility/AT-APIs/ImplementationFeatures/MSAA#Additional_DOM_Support" title="en/Accessibility/AT-APIs/ImplementationFeatures/MSAA#Additional_DOM_Support">MS COM interfaces</a> ISimpleDOM* to provide an access to DOM tree.</p> +<p>IAccessible2 is a set of interfaces that overlay the MSAA (IAccessible) and DOM (ISimpleDOM*) interface support. Any object that supports IAccessible will also support IAccessible2 and possibly any of the other IA2 interfaces.</p> +<h3 id="Linux.2FUnix_platform" name="Linux.2FUnix_platform">Linux/Unix platform</h3> +<p>We support ATK/AT-SPI interfaces on Linux.</p> +<h3 id="Mac_platform" name="Mac_platform">Mac platform</h3> +<p>We currently support only a subset of Universal Access. The rest of the <a class="external" href="http://wiki.mozilla.org/Mac:Accessibility">Mozilla Universal Access support</a> is in progress.</p> +<h2 id="Accessible_Web_Specifications" name="Accessible_Web_Specifications">Accessible Web Specifications</h2> +<p>Gecko exposes the number of XML languages including HTML to AT. Refer to <a href="/en/Accessibility/AT-APIs/Web_Specifications" title="en/ARIA_User_Agent_Implementors_Guide">accessible web specifications page</a> to learn what and how markup languages are exposed.</p><h2 id="AT_APIs_Supported_Features_Details" name="AT_APIs_Supported_Features_Details">AT APIs Implementation Details</h2> +<p>Refer to <a href="/En/Accessibility/AT-APIs/Implementation_Details" title="en/Accessibility/AT-APIs/Implementation_Details">implementation details page</a> to see how Gecko supports interesting AT API. There you will find information how AT API interfaces, roles, states and etc are mapped into Gecko accessibility API and visa versa.</p> +<h2 id="Keyboard_User_Interface_and_API" name="Keyboard_User_Interface_and_API">Keyboard User Interface and API</h2> +<p>Fortunately, Gecko uses the standard keyboard API's for each supported platform. The Mozilla keyboard shortcuts for content are similar to what is used in other browsers. Here is a list of <a class="external" href="http://www.mozilla.org/support/firefox/keyboard">Firefox keyboard shortcuts</a>.</p> +<h2 id="Test_Tools" name="Test_Tools">Test Tools</h2> +<p>Here you will find a list of tools to test accessibility Gecko-based applications.</p> +<ul> <li>MSAA <ul> <li><a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=4179742F-1F3D-4115-A8BA-2F7A6022B533&displaylang=en">MSAA SDK tools</a> - version 1.3 is recommended instead of 2.0 because it includes source code for the tools</li> </ul> </li> <li>IAccessible2 <ul> <li><a class="external" href="http://www.eclipse.org/actf/downloads/tools/accprobe/index.php">Accessibility Probe</a> -- includes MSAA support as well</li> </ul> </li> <li>ATK/AT-SPI <ul> <li><a class="external" href="http://live.gnome.org/Accerciser">Accerciser</a> - interactive Python accessibility explorer for the GNOME desktop</li> </ul> </li> <li>Gecko <ul> <li><a class="external" href="http://www.mozilla.org/projects/inspector/">DOM Inspector</a> has an ability to test Gecko accessibility layer, supports base features.</li> <li>Firebug</li> </ul> </li> +</ul> +<h2 id="Screen_Readers" name="Screen_Readers">Screen Readers</h2> +<p>Here's a list of screen readers we are oriented to in the first place.</p> +<ul> <li>Windows platform <ul> <li><a class="external" href="http://www.freedomscientific.com/fs_products/software_jaws.asp">JAWS</a></li> <li><a class="external" href="http://www.gwmicro.com/">Windows Eyes</a></li> <li><a class="external" href="http://www.nvda-project.org/">NVDA</a></li> </ul> </li> <li>Linux/Unix platform <ul> <li><a class="external" href="http://live.gnome.org/Orca">Orca</a></li> </ul> </li> <li>OS X platform <ul> <li><a class="external" href="http://www.apple.com/accessibility/voiceover/">VoiceOver</a></li> </ul> </li> +</ul><h2 id="Contacts" name="Contacts">Contacts</h2> +<p>Please discuss accessibility issues on the <a class="external" href="http://groups.google.com/group/mozilla.dev.accessibility/topics">Mozilla Accessibility groups</a> or on the <a class="link-irc" href="irc://irc.mozilla.org/accessibility">Mozilla Accessibility IRC channel</a>.</p> diff --git a/files/fr/web/accessibility/understanding_wcag/index.html b/files/fr/web/accessibility/understanding_wcag/index.html new file mode 100644 index 0000000000..5e99ef795d --- /dev/null +++ b/files/fr/web/accessibility/understanding_wcag/index.html @@ -0,0 +1,58 @@ +--- +title: Understanding the Web Content Accessibility Guidelines +slug: Web/Accessibility/Understanding_WCAG +tags: + - TopicStub + - WCAG + - Web Content Accessibility Guidelines +translation_of: Web/Accessibility/Understanding_WCAG +--- +<p class="summary">Cet ensemble d'articles fournit des explications rapides pour vous aider à comprendre les étapes à suivre pour vous conformer aux recommandations décrites dans les Directives d'accessibilité du contenu Web 2.0 ou 2.1 du W3C (ou simplement WCAG, aux fins de cet article).</p> + +<p>Les WCAG 2.0 et 2.1 fournissent un ensemble détaillé de lignes directrices pour rendre le contenu Web plus accessible aux personnes ayant une grande variété de handicaps. Il est complet mais incroyablement détaillé et assez difficile à comprendre rapidement. Pour cette raison, nous avons résumé les étapes pratiques que vous devez suivre pour satisfaire les différentes recommandations, avec d'autres liens vers plus de détails si nécessaire.</p> + +<h2 id="Les_quatre_principes">Les quatre principes</h2> + +<p>Les WCAG sont globalement divisés en quatre principes — éléments majeurs que le contenu Web <strong>doit être</strong> pour être considéré comme accessible (voir <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Comprendre les Quatre Principes d'Accessibilité </a>pour les définitons des WCAG).</p> + +<p>Chacun des liens ci-dessous vous mènera à des pages qui développent davantage ces domaines, vous donnant des conseils pratiques sur la façon de rédiger votre contenu Web afin qu'il soit conforme aux critères de succès décrits dans chacune des directives WCAG 2.0 et 2.1 qui se subdivisent davantage en chaque principe.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceptile:</a> Les utilisateurs doivent pouvoir le percevoir d'une manière ou d'une autre, en utilisant un ou plusieurs de leurs sens.</li> + <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Opérable</a>: Les utilisateurs doivent pouvoir contrôler les éléments de l'interface utilisateur (par exemple, les boutons doivent être cliquables d'une manière ou d'une autre - souris, clavier, commande vocale, etc.).</li> + <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Compréhensible</a>: Le contenu doit être compréhensible pour ses utilisateurs.</li> + <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robuste</a>: Le contenu doit être développé à l'aide de normes Web bien adoptées qui fonctionneront sur différents navigateurs, maintenant et à l'avenir.</li> +</ul> + +<h2 id="Dois-je_utiliser_WCAG_2.0_ou_2.1">Dois-je utiliser WCAG 2.0 ou 2.1?</h2> + +<p>WCAG 2.1 est la norme d'accessibilité la plus récente et la plus pertinente. Utilisez WCAG 2.1 pour aider plus de personnes handicapées et réduire le risque juridique futur pour les propriétaires de sites Web. Ciblez d'abord WCAG 2.0 lors de l'allocation des ressources. Passez ensuite à WCAG 2.1. </p> + +<h3 id="Quest-ce_que_WCAG_2.1">Qu'est-ce que WCAG 2.1?</h3> + +<p>WCAG 2.1 a été publié en tant que recommandation officielle le 5 juin 2018. L'Union européenne (UE) a adopté WCAG 2.1 comme norme d'accessibilité numérique en septembre 2018. Le W3C a publié un communiqué de presse <a href="https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/">WCAG 2.1 Adoption en Europe</a>. </p> + +<p>WCAG 2.1 comprend:</p> + +<ul> + <li>tous les WCAG 2.0 (textuellement, mot-à-mot)</li> + <li>17 nouveaux critères de succès aux niveaux A / AA / AAA répondant principalement aux besoins des utilisateurs dans ces domaines: + <ul> + <li>Accessibilité mobile</li> + <li>Vision faible</li> + <li>Cognitive</li> + </ul> + </li> + <li>En savoir plus sur WCAG 2.1: + <ul> + <li>Deque: <a href="https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/">WCAG 2.1: Quelle est la suite des directives d'accessibilité</a></li> + <li>TPG: <a href="https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/">Directives pour l'Accessibilité des Contenus Web (WCAG) 2.1</a></li> + </ul> + </li> +</ul> + +<h2 id="Statut_juridique">Statut juridique</h2> + +<p>Ce guide est destiné à fournir des informations pratiques pour vous aider à créer de meilleurs sites Web plus accessibles. Cependant, nous ne sommes pas des avocats et rien de tout cela ne constitue un avis juridique. Si vous êtes préoccupé par les implications juridiques de l'accessibilité du Web, nous vous recommandons de vérifier la législation spécifique régissant l'accessibilité du Web / des ressources publiques dans votre pays ou région, et de demander l'avis d'un avocat qualifié.</p> + +<p><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">Qu'est ce que l'accessibilité?</a> et particularité, <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">les directives d'Accessibility et la section sur la loi</a> fournissent des informations complémentaires.</p> diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/contraste_de_la_couleur/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/contraste_de_la_couleur/index.html new file mode 100644 index 0000000000..497a2675f7 --- /dev/null +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/contraste_de_la_couleur/index.html @@ -0,0 +1,162 @@ +--- +title: Contraste de la couleur +slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_couleur +tags: + - Accessibilité + - WCAG + - contraste +translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast +--- +<p>Le <a href="https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio">contraste de la couleur</a> entre l'arrière-plan et le contenu de premier-plan (qui est en général du texte) doit être assez prononcé pour assurer la lisibilité.</p> + +<p><span class="tlid-translation translation" lang="fr"><span title="">Lors de la conception d'interfaces lisibles pour différentes capacités de vision, les directives WCAG recommandent les rapports de contraste suivants:</span></span></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Type de contenu</th> + <th scope="col">Ratio minimum (Note AA)</th> + <th scope="col">Ratio amélioré (Note AAA)</th> + </tr> + </thead> + <tbody> + <tr> + <td>Corps</td> + <td>4.5 : 1</td> + <td>7 : 1</td> + </tr> + <tr> + <td>Texte grande échelle (120-150% plus large que le corps)</td> + <td>3 : 1</td> + <td>4.5 : 1</td> + </tr> + <tr> + <td><span class="tlid-translation translation" lang="fr"><span title="">Composants d'interface utilisateur actifs et objets graphiques tels que des icônes et des graphiques</span></span></td> + <td>3 : 1</td> + <td>Non défini</td> + </tr> + </tbody> +</table> + +<p><span class="tlid-translation translation" lang="fr"><span title="">Ces ratios ne s'appliquent pas au texte "accessoire", comme les contrôles inactifs, les logotypes ou le texte purement décoratif.</span></span></p> + +<p>Voir la section {{anch("Solution")}} ci-dessous pour plus d'informations.</p> + +<p><span class="tlid-translation translation" lang="fr"><span title="">Un bon contraste des couleurs sur votre site profite à tous vos utilisateurs, mais celà est particulièrement intéressant pour les utilisateurs souffrant de certains types de daltonisme et d'autres particularités similaires, qui rencontrent un faible contraste et ont du mal à faire la différence entre des couleurs proches.</span> <span title="">En effet, ces utilisateurs ne voient pas les zones claires et sombres aussi facilement que ceux sans ces particularités et ont donc du mal à voir les bords, les bordures et d'autres détails.</span></span></p> + +<p><span class="tlid-translation translation" lang="fr"><span title="">C'est bien d'avoir un design cool sur votre site, mais le design ne vaut rien si vos utilisateurs ne peuvent pas lire votre contenu.</span></span></p> + +<h2 id="Exemples">Exemples</h2> + +<p>Jetons un coup d<span class="tlid-translation translation" lang="fr"><span title="">'œil à du</span></span> code HTML et CSS assez simple:</p> + +<pre class="brush: html"><div class="bon">Bon contraste</div> +<div class="mauvais">Mauvais contraste</div></pre> + +<pre class="brush: css">div { + /* Styles généraux de div ici */ +} + +.bon { + background-color: #fae6fa; +} + +.mauvais { + background-color: #400064; +}</pre> + +<p><span class="tlid-translation translation" lang="fr"><span title="">Les deux textes ont leur couleur noire par défaut.</span></span> La "bonne" <code><div></code> a un fond violet clair, ce qui rend le texte facile à lire:</p> + +<div class="hidden"> +<h4 id="exemple1">exemple1</h4> + +<pre class="brush: html"> <div class="bon"> + Bon contraste + </div></pre> + +<pre class="brush: css">div { + font-family: sans-serif; + text-align: center; + font-size: 2rem; + font-weight: bold; + width: 250px; + padding: 30px; + border-radius: 20px; + box-shadow: 1px 1px 1px black; +} + +.bon { + background-color: #fae6fa; +}</pre> +</div> + +<p>{{EmbedLiveSample('exemple1', '100%', '100')}}</p> + +<p>La "mauvaise" <code><div></code>, en revanche, a un fond violet très foncé, ce qui rend le texte beaucoup plus difficile à lire:</p> + +<div class="hidden"> +<h4 id="exemple2">exemple2</h4> + +<pre class="brush: html"> <div class="mauvais"> + Mauvais contraste + </div></pre> + +<pre class="brush: css">div { + font-family: sans-serif; + text-align: center; + font-size: 2rem; + font-weight: bold; + width: 250px; + padding: 30px; + border-radius: 20px; + box-shadow: 1px 1px 1px black; +} + +.mauvais { + background-color: #400064; +}</pre> +</div> + +<p>{{EmbedLiveSample('exemple2', '100%', '100')}}</p> + +<dl> +</dl> + +<h2 id="Solution">Solution</h2> + +<p><span class="tlid-translation translation" lang="fr"><span title="">Lorsque vous choisissez un jeu de couleurs pour votre site Web, choisissez des couleurs de premier plan et d'arrière-plan qui offrent un bon contraste.</span> <span title="">Faites en sorte que le contraste des couleurs soit aussi bon que possible dans vos contraintes de conception - optez idéalement pour la note AAA (voir paragraphe 1.4.6 ci-dessous), mais répondez au moins à la note AA (voir paragraphe 1.4.3 ci-dessous).</span></span></p> + +<p><span class="tlid-translation translation" lang="fr"><span title="">Si vous incluez du contenu non textuel tel qu'une vidéo ou une animation, vous devrez suivre le paragraphe 1.4.11 (encore une fois, voir ci-dessous).</span></span></p> + +<p>Pour vérifier votre contraste lorsque vous effectuez un choix de couleurs, vous pouvez utiliser le <a class="external external-icon" href="http://webaim.org/resources/contrastchecker/" rel="noopener">Vérificateur de Contraste des Couleurs</a> de WebAIM.</p> + +<p>Vous pouvez également vérifier le contraste des couleurs directement via les outils de développement de Firefox — consultez notre guide de l'<a href="https://developer.mozilla.org/fr/docs/Outils/Inspecteur_accessibilite">Inspecteur de l'accessibilité</a>, et en particulier la section <a href="https://developer.mozilla.org/fr/docs/Outils/Inspecteur_accessibilite#S%C3%A9lecteur_d'accessibilit%C3%A9">Vérifier les problèmes d'accessibilité</a>. Essayez de les utiliser sur les exemples dans la section de description.</p> + +<h2 id="Critères_de_réussite_associés_aux_WCAG"><span class="tlid-translation translation" lang="fr"><span title="">Critères de réussite associés aux WCAG</span></span></h2> + +<dl> + <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">1.4.3 Contraste minimum (AA)</a></dt> + <dd><span class="tlid-translation translation" lang="fr"><span title="">Le contraste des couleurs entre le contenu d'arrière-plan et de premier plan doit être au minimum pour garantir la lisibilité:</span></span> + <ul> + <li>Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 4.5:1.</li> + <li>Le texte d'en-tête (ou juste "plus grand") doit avoir un ratio d'au moins 3:1. Le texte "plus grand" est défini comme au moins 18pt, ou 14pt en gras.</li> + </ul> + </dd> + <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-enhanced">1.4.6 Contraste amélioré (AAA)</a></dt> + <dd><span class="tlid-translation translation" lang="fr"><span title="">Cela suit et s'appuie sur le critère 1.4.3.</span></span> + <ul> + <li>Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 7:1.</li> + <li>Le texte d'en-tête (ou juste "plus grand") doit avoir un ratio d'au moins 4.5:1.</li> + </ul> + </dd> + <dt><a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">1.4.11 Contraste non textuel (AA)</a> (ajouté en 2.1)</dt> + <dd><span class="tlid-translation translation" lang="fr"><span title="">Il doit y avoir un ratio de contraste de couleur minimum de 3 à 1 pour les composants de l'interface utilisateur et les objets graphiques.</span></span></dd> +</dl> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/a11y/CSS_and_JavaScript#Couleur_et_contraste_de_couleur">Couleur et contraste de couleur</a></li> + <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML#%C3%89tiquettes_multiples">Étiquettes multiples</a></li> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Comprendre le contraste non textuel</a></li> +</ul> diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/index.html new file mode 100644 index 0000000000..e8059d8fca --- /dev/null +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/index.html @@ -0,0 +1,359 @@ +--- +title: Perceivable +slug: Web/Accessibility/Understanding_WCAG/Perceivable +tags: + - Accessibility + - NeedsTranslation + - Principle 1 + - TopicStub + - WCAG + - Web Content Accessibility Guidelines + - contrast + - different presentation + - text alternatives + - time-based media +translation_of: Web/Accessibility/Understanding_WCAG/Perceivable +--- +<p class="summary">This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the <strong>Perceivable</strong> principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses.</p> + +<div class="note"> +<p><strong>Note</strong>: To read the W3C definitions for Perceivable and its guidelines and success criteria, see <a href="https://www.w3.org/TR/WCAG21/#perceivable">Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.</a></p> +</div> + +<h2 id="Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">Guideline 1.1 — Providing text alternatives for non-text content</h2> + +<p>The key here is that text can be converted to other forms people with disabilities can use, so for example spoken by a screenreader, zoomed in, or represented on a braille display. Non-text content refers to multimedia such as images, audio, and video.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Success criteria</th> + <th scope="col">How to conform to the criteria</th> + <th scope="col">Practical resource</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="5">1.1.1 Provide text equivalents (A)</td> + <td>All images that convey meaningful content should be given suitable alternative text.</td> + <td><a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives.</a></td> + </tr> + <tr> + <td>Complex images or charts should have an accessible alternative provided, either on the same page or linked to. Use a regular link rather than the <code>longdesc</code> attribute.</td> + <td> + <p>A text description may work, or an accessible data table (see <a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a>). Also see <a href="/en-US/docs/Learn/Accessibility/HTML#Other_text_alternative_mechanisms">Other text alternative mechanisms</a> for the argument against <code>longdesc</code>.</p> + </td> + </tr> + <tr> + <td>Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar).</td> + <td> + <p>See <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a> for static caption options, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a>, <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a>, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other alternatives.</p> + </td> + </tr> + <tr> + <td>UI Controls such as form elements and buttons should have text labels that describe their purpose.</td> + <td>Buttons are simple — you should make sure the button text describes the function of the button (e.g. <code><button>Upload image</button></code>). For further information on other UI controls, see <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>.</td> + </tr> + <tr> + <td>Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users.</td> + <td> + <p>Decorative images should be implemented using CSS background images (see <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a>). If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (<code>alt=""</code>), otherwise screenreaders may try to read out the filepath, etc.</p> + + <p>If you are including background video or audio that autoplays, make it as unobtrusive as possible. Don't make it look/sound like content, and provide a control to turn it off. Ideally, don't include it at all.</p> + </td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: Also see the <a href="https://www.w3.org/TR/WCAG21/#text-alternatives">WCAG description for Guideline 1.1: Text alternatives</a>.</p> +</div> + +<h2 id="Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Guideline 1.2 — Providing text alternatives for time-based media</h2> + +<p>Time-based media refers to multimedia with a duration, i.e. audio and video. Also note that if the audio/video serves as an alternative to existing text content, you don't need to provide another text alternative.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Success criteria</th> + <th scope="col">How to conform to the criteria</th> + <th scope="col">Practical resource</th> + </tr> + <tr> + <td colspan="1" rowspan="1">1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A)</td> + <td>A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video).</td> + <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td> + </tr> + <tr> + <td colspan="1">1.2.2 Provide captions for web-based video (A)</td> + <td>You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video.</td> + <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a> for HTML5 video captions, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other technologies. See also <a href="https://support.google.com/youtube/answer/2734796?hl=en">Add your own subtitles & closed captions</a> (YouTube).</td> + </tr> + <tr> + <td colspan="1">1.2.3 Provide text transcript or audio description for web-based video (A)</td> + <td>You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone.</td> + <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td> + </tr> + <tr> + <td colspan="1">1.2.4 Provide captions for live audio (AA)</td> + <td>You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.)</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.2.5 Provide audio descriptions for prerecorded video (AA)</td> + <td>Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.2.6 Provide sign language equivalent to prerecorded audio (AAA)</td> + <td>An equivalent sign language video should be provided for any prerecorded content containing audio.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.2.7 Provide extended video with audio descriptions (AAA)</td> + <td>Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions).</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.2.8 Provide an alternative for prerecorded media (AAA)</td> + <td>For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.</td> + <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td> + </tr> + <tr> + <td colspan="1">1.2.9 Provide a transcript for live audio (AAA)</td> + <td>For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.</td> + <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td> + </tr> + </thead> +</table> + +<div class="note"> +<p><strong>Note</strong>: Also see the <a href="https://www.w3.org/TR/WCAG21/#time-based-media">WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media</a>.</p> +</div> + +<h2 id="Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">Guideline 1.3 — Create content that can be presented in different ways</h2> + +<p>This guideline refers to the ability of content to be consumed by users in multiple ways, accomodating their differing needs.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Success criteria</th> + <th scope="col">How to conform to the criteria</th> + <th scope="col">Practical resource</th> + </tr> + <tr> + <td colspan="1" rowspan="1">1.3.1 Info and relationships (A)</td> + <td> + <p>Any content structure — or visual relationship made between content — can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:</p> + + <ul> + <li>Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.</li> + <li>Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. <code>alt</code> text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image.</li> + <li>Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).</li> + </ul> + </td> + <td>The whole of + <p><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a> is packed with information about this, but you should particularly refer to <a href="/en-US/docs/Learn/Accessibility/HTML#Good_semantics">Good semantics</a>, <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>, and <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a>.</p> + </td> + </tr> + <tr> + <td colspan="1">1.3.2 Meaningful content sequence (A)</td> + <td>A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup.</td> + <td>Again, refer to <a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a>.</td> + </tr> + <tr> + <td colspan="1">1.3.3 Sensory characteristics (A)</td> + <td> + <p>Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:</p> + + <ul> + <li>"Click the round button to continue" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function.</li> + <li>"Listen to the audio instructions for guidance" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required.</li> + <li>"Swipe from the right hand side of the screen to reveal the menu" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.</li> + </ul> + + <div class="note"> + <p><strong>Note</strong>: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.</p> + </div> + </td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.3.4 Orientation (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td>Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.</td> + <td> + <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html">Understanding Orientation</a> </p> + </td> + </tr> + <tr> + <td colspan="1">1.3.5 Identify Input Purpose (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td> + <p> </p> + + <p>Follow the list of <a href="https://www.w3.org/TR/WCAG21/#input-purposes">53 input fields</a> to programmatically identify the purpose of a field. </p> + </td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">Understanding Identify Input Purpose</a></td> + </tr> + <tr> + <td colspan="1">1.3.6 Identify Purpose (AAA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td>In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.</td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-purpose.html">Understanding Identify Purpose</a></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#adaptable">Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.</a></p> +</div> + +<h2 id="Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background</h2> + +<p>This guideline relates to making sure core content is easy to discernable from backgrounds and other decoration. The classic example is color (both color contrast and use of color to convey instructions), but it applies in other situations too.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Success criteria</th> + <th scope="col">How to conform to the criteria</th> + <th scope="col">Practical resource</th> + </tr> + <tr> + <td colspan="1" rowspan="1">1.4.1 Use of color (A)</td> + <td> + <p>Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of "required" would be more appropriate.</p> + </td> + <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a> and <a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#Multiple_labels">Multiple labels</a>.</td> + </tr> + <tr> + <td colspan="1">1.4.2 Audio controls (A)</td> + <td>For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume.</td> + <td>Use native <code><button></code>s to provide accessible keyboard controls, as shown in <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player syling basics</a>.</td> + </tr> + <tr> + <td colspan="1">1.4.3 Minimum contrast (AA)</td> + <td> + <p>The color contrast between background and foreground content should be at a minimum level to ensure legibility:</p> + + <ul> + <li>Text and its background should have a contrast ratio of at least 4.5.1.</li> + <li>Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.</li> + </ul> + </td> + <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td> + </tr> + <tr> + <td colspan="1">1.4.4 Resize text (AA)</td> + <td>The page should be readable and usable when the text size is doubled. This means that designs should be responsive, so that when the text size is increased, the content is still accessible.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.5 Images of text (AA)</td> + <td>Images should NOT be used to present content where text would do the job. For example, if an image is mostly textual, it could be represented using text as well as images.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.6 Enhanced contrast (AAA)</td> + <td> + <p>This follows, and builds on, criterion 1.4.3.</p> + + <ul> + <li>Text and its background should have a contrast ratio of at least 7.1.</li> + <li>Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.</li> + </ul> + </td> + <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td> + </tr> + <tr> + <td colspan="1">1.4.7 Low or no background audio (AAA)</td> + <td>Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.8 Visual presentation (AAA)</td> + <td> + <p>For text content presentation, the following should be true:</p> + + <ul> + <li>Foreground and background colors should be user-selectable.</li> + <li>Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.</li> + <li>Text should not be fully justified (e.g. <code>text-align: justify;</code>)</li> + <li>line height should be at least 1.5 times the text size within paragraphs (e.g. <code>line-height: 1.5;</code>), and at least 2.25 times the text size between paragraphs (e.g. <code>padding: 2.25rem;</code>)</li> + <li>When the text size is doubled, the content should not need to be scrolled.</li> + </ul> + </td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.9 Images of text (No Exception) (AAA)</td> + <td>Text should not be presented as part of an image unless it is purely decoration (i.e. it does not convey any content), or cannot be presented in any other way.</td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.10 Reflow (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td> + <ul> + <li>No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic) </li> + <li>No vertical scrolling for top-to-bottom languages (like Japanese)</li> + <li>Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).</li> + </ul> + </td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">Understanding Reflow</a></td> + </tr> + <tr> + <td colspan="1">1.4.11 Non-Text Contrast(AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td>Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. </td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Understanding Non-Text Contrast</a></td> + </tr> + <tr> + <td colspan="1">1.4.12 Text Spacing (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td> + <p>No loss of content or functionality occurs when the following styles are applied: </p> + + <ul> + <li>Line height (line spacing) to at least 1.5 times the font size;</li> + <li>Spacing following paragraphs to at least 2 times the font size;</li> + <li>Letter spacing (tracking) to at least 0.12 times the font size;</li> + <li>Word spacing to at least 0.16 times the font size.</li> + </ul> + </td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html">Understanding Text Spacing</a></td> + </tr> + <tr> + <td colspan="1">1.4.13 Content on Hover or Focus (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> + <td> + <p>Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:</p> + + <ul> + <li>dismissable (can be closed/removed)</li> + <li>hoverable (the additional content does not disappear when the pointer is over it) </li> + <li>persistent (the additional content does not disappear without user action)</li> + </ul> + </td> + <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">Understanding Content on Hover or Focus</a></td> + </tr> + </thead> +</table> + +<div class="note"> +<p><strong>Note</strong>: Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#distinguishable">Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background.</a><a href="https://www.w3.org/TR/WCAG21/#distinguishable">.</a></p> +</div> + +<p> </p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="en-US/docs/Web/Accessibility/Understanding_WCAG">WCAG</a> + + <ol> + <li>Perceivable</li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable">Operable</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable">Understandable</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust">Robust</a></li> + </ol> + </li> +</ul> + +<p> </p> |