RAWeb 1: Glossary

Display



Index

A

Accessibility feature

Examples of accessibility features

  • a component for loading a more contrasting colour palette for users;
  • a font size enlargement component;
  • a component for accessing a simplified language version;
  • special keyboard shortcuts available for certain assistive technologies;
  • gestures or device movements that trigger features.

Accessibility information

Accessibility information is all the information (attributes, programmatic relationships, alternatives, etc.) required to make content accessible. For example: the alternative of a graphic element, the semantics of a passage of text, the title of an iframe, etc.

For example, in HTML, the alt attribute of an image is accessibility information.

An editing tool should have functions that allow you to define all the information needed to create accessible content, for example

  • defining the alternative of an image or, on the contrary, declaring it decorative;
  • the ability to define section headings;
  • define the language of a passage of text;
  • define labels for form fields.

All the accessibility criteria relating to the content technology in question are concerned. For example, for an HTML page, all the RAWeb level A and AA criteria must be met. For the creation of a document in PDF format, all the criteria of the PDF accessibility assessment framework (RAPDF) level A and AA must be met.

Accessible and operable by keyboard and any pointing device

  • A user interface component (link, button, etc.) can be accessed from the keyboard and by any pointing device when the user can focus it either by using the pointer or the tab key;
  • A user interface component (link, button, etc.) can be activated from the keyboard and by any pointing device when the user can initiate the action provided for by the interface component by pressing either the pointer or the enter key on the keyboard;
  • Note: for some user interface components such as sliders (sliding or rotating knobs, etc.), it is not possible to control the component using the enter key alone. In these situations, other keys (such as arrow keys) can be used. In particular, for elements with a WAI-ARIA role corresponding to a design pattern, it is recommended to consider the document WAI-ARIA 1.1 Authoring Practices when implementing them.

In the framework, the expression "operable by keyboard and any pointing device" also refers to this definition.

Important note: the use of certain technologies may make focus management too complex or too unstable to rely solely on tab, arrow and enter keys. In this case, providing keyboard shortcuts may be the only way to make the component usable.

The criterion can only be considered compliant if the keyboard shortcuts used are properly documented, functional and comply with criterion 12.10.

"Accessible name" rendered by assistive technologies.

In the case of an HTML link, the "accessible name" is obtained in the following order:

  • passage of text associated with the WAI-ARIA aria-labelledby attribute;
  • otherwise, value of the WAI-ARIA aria-label attribute;
  • otherwise, content of the link;
  • otherwise, value of the title attribute.

This order must be used to determine what constitutes the accessible name of a link. For example

  • if a WAI-ARIA aria-label attribute and a WAI-ARIA aria-labelledby attribute are present together, the passage of text referenced by the WAI-ARIA aria-labelledby attribute must be considered as the heading;
  • if there is both a WAI-ARIA aria-label attribute and content in the link, the value of the WAI-ARIA aria-label attribute must be considered as the heading.

Reference: Accessible name and description calculation.

If the "accessible name" is obtained from the content of the link, this will vary according to the following cases:

Text link

In HTML, the "accessible name" corresponds to the text made up of

  • the text contained in the link;
  • the text contained in the link's child elements.

Image link

In HTML, the "accessible name" corresponds to the text made up from the text alternative of one or more images in the link of the type

  • Image (element <img> or opening tag with WAI-ARIA role="img" attribute);
  • Object image (element <object>);
  • Bitmap image (element <canvas>);
  • Vector image (element <svg>).

Composite link

In HTML, the "accessible name" corresponds to the text made up from the set

  • the text contained in the link;
  • the text contained in the child elements of the link;
  • the content of the alternative text of the image(s) included in the link.

In the case of an SVG link (version 1.1), the "accessible name" is obtained as follows:

  • Passage of text associated with the WAI-ARIA aria-labelledby attribute;
  • Otherwise, value of the WAI-ARIA aria-label attribute;
  • Otherwise, content of the <title> element, the direct child of the link;
  • Otherwise, value of the xlink:title attribute;
  • Otherwise, text content of one or more <text> elements.

However, care must be taken as this calculation algorithm is not yet taken into account and effective within the various screen readers. To date, support is available with VoiceOver, but incomplete with JAWS and NVDA. As a result, the lowest common denominator on which it is possible to rely to provide an accessible name for the link is the <text> element.

Note 1: the accessible name of a link will be considered as non-explicit if it does not include the visible label of the link.

Note 2: due to the possible configuration of assistive technologies allowing the "accessible name" derived from the value of the title attribute to be forced to the detriment of the "accessible name" derived from the content of the link. The accessible name of a link will be considered as non-explicit if the link has a title attribute whose value does not include at least the "accessible name" taken from the content of the link.

Note 3: In the case of several links with different destinations whose "accessible name" is identical. The accessible name of a link alone will be considered non-explicit if the link context does not allow them to be differentiated.

Note 4: when a link contains no content, it will be non-compliant with regard to criterion 10.2 and criterion 6.2.

Note 5: Although the calculation of the accessible name of a link takes into account text content generated in CSS via the ::before and ::after pseudo-elements, this practice must not be used, as it constitutes non-compliance with WCAG 2.1 criterion 1.3.1 (see F87).

Accessible version (for a downloadable document)

Downloadable documents whose format types are recognised as compatible with accessibility must be made accessible either directly or via an accessible version or a version in HTML. The document formats recognised as compatible are:

  • Microsoft Office (Word 2003, OOXML);
  • Open Office Org (ODF);
  • Adobe PDF;
  • EPUB/Daisy.

PDF documents must comply with the PDF accessibility assessment framework (RAPDF). Other types of content must comply with the criteria of section 10 Non-web documents of European standard EN 301 549 v3.2.1.

Note: the text format (txt) cannot be used to produce an accessible version (for a downloadable document).

Adjacent background colour and adjacent colour

Adjacent background colour: background colour directly in contact with the outer edge of the user interface component or graphic element.

Examples:

  • For a white button with a blue border on a white background, the white background outside the blue border corresponds to the adjacent background colour;
  • For a red button on a white background, the white background outside the red border corresponds to the adjacent background colour;
  • For a white button with a green border which becomes black when focused and hovered, the white background outside the green border of the default state and the black border of the state when focused and hovered corresponds to the adjacent background colour.

Adjacent colour: colour directly in contact with another colour. For example, in a "no entry" sign, the red of the sign is the colour adjacent to the white line in the centre of the sign.

Note 1: in the case of a gradient, the adjacent colour with the least contrast in the gradient is considered to be the adjacent colour or adjacent background colour.

Note 2: if several colours are present, all the colours will be considered as the adjacent colour or adjacent background colour.

Link or button presented adjacent to an element on the page. The link or button must be visually adjacent in the graphic representation (CSS enabled) and in the HTML code. In the HTML code, the link or button must be located just before or just after the element to which it is adjacent.

Alternative (to a script)

Text or process associated with the script by means of an appropriate technique and enabling a function or content similar to that offered by the script to be made available.

Note: when an alternative to a JavaScript process or functionality is proposed, the means of accessing it must be provided by the site itself. This may be a link or a button allowing access to an alternative page operating without JavaScript or allowing the component(s) to be replaced by an alternative component operating without JavaScript, for example.

Alternative "audio only" version

An "audio only" version is an audio version, in the form of a simple file in MP3 format for example, used as an alternative to a video only (video without audio information). As the only users affected by accessibility are blind people, who cannot see the video, WCAG considers it acceptable to offer an audio version as an alternative.

The "audio only" version must contain all the important visual information in the video.

It is generally easier to produce an audio version than a text version when the video is very descriptive (transcript often requires a great deal of editorial work). It should be remembered, however, that only a transcript provides universal access to the information in the video, in the event that a user is unable to launch the video, for example.

Alternative content

Content that replaces another providing the same information but may be presented in a different way. This content may be in text form, but it may also be implemented using tags. Alternative content must comply with all the RAWeb criteria applicable to it in order to be considered an accessible alternative to the element it replaces. Example: a data table can be the alternative content for a bitmap image (<canvas> tag) displaying a statistical graph.

Ambiguous to users in general

Intent cannot be determined from the link and all the information on the web page presented to the user at the same time as the link (i.e. a reader with no functional limitations would not know the function of a link before activating it). Example: the word "guava" in the following sentence used as a link: "One of the important exports is guava". This link could lead to a definition of guava, a graph showing a list of the quantities of guavas exported or a photo of people harvesting guavas. Until the link is activated, all users are in the dark, so a person with disabilities is not at a disadvantage.

B

Biological characteristics

User identification or control methods based on biological characteristics may be, for example

  • fingerprint recognition;
  • facial recognition;
  • voice recognition.

Button (form)

Element of a form that allows you to perform a predefined action. For example, the submit button on a form sends the collected information to the server for processing. The accessible name of a button must describe the action resulting from its activation (for example: "Start your search", "Send your message").

In HTML, there are three types of form buttons:

  • The <input> tag of type submit, reset or button;
  • The <input> tag, of type image;
  • The <button> tag.

It is also possible to render a button using the WAI-ARIA button role.

The accessible name of a button can be of six types:

  • The content of the passage of text associated with the button via the WAI-ARIA aria-labelledby attribute when it is present;
  • The value of the aria-label attribute when it is present;
  • The value of the alt attribute of an image type button;
  • The value of the value attribute for buttons of type submit, reset or button;
  • The content of the <button> tag;
  • The value of the title attribute when it is present.

Important note: when several of these techniques are present on the same button, the calculation of the "accessible name", i.e. what will be rendered, follows a strict order:

  • aria-labelledby;
  • Otherwise aria-label;
  • Otherwise alt for image inputs;
  • Otherwise value for submit, reset or button input;
  • Otherwise the content of the <button> tag;
  • Otherwise title.

This order should be used to assess the relevance of the button's "accessible name". For example, even if there is a title and a passage of text referenced by aria-labelledby on the same button, it is the passage of text referenced by aria-labelledby that should be evaluated.

Reference: Accessible name and description calculation.

Furthermore, an "accessible name" will be considered irrelevant if it does not include the visible text of the button. For example: <button aria-label="confirm input">validate entry</button> will be considered as not conforming to criterion 11.9.

Links whose function is to allow navigation within the page (skip link, link to the search form or menu, etc.). These links can be used either to access an area of the page (quick access link) or to skip an area of the page (bypass link).

Note 1: A functional bypass or skip link is a link whose activation makes it possible to resume reading and keyboard navigation from the target of the link when using the browsers and assistive technologies selected in the test environment (or "baseline") of the audit.

Note 2: Bypass or skip links must be located at the same place in the presentation and in the same relative order in the source code in order to comply with criterion 12.2.

C

CAPTCHA

A CAPTCHA is a test used to distinguish a human user from a computer. The test often uses images containing distorted text, mixed with other shapes or using altered colour schemes, which the user is asked to retype. Other forms of CAPTCHA may be based on logical questions or sound clips.

Changes of context

Major changes in the content of a web page which, if made without the user being aware of them, can disorientate the user who cannot see the whole page at once. Changes of context include changes of:

  • user agent;
  • viewport;
  • focus;
  • content that modifies the meaning of the web page.

Note: A change in content is not always a change of context. A change in content, such as the expansion of a tree structure, a dynamic menu or a tab move, does not necessarily change the context unless it also changes one of the elements listed above (the focus, for example).

For example, opening a new window, moving the focus to a different component, moving to a new page (including anything that, to the user, would look like moving to another page) or significantly reorganising the content of a page are all examples of a change of context.

Clickable area

Region of a responsive image to which an action has been associated; for example, triggering an event by clicking on a link (for a client-side clickable area: <area> tag with the href attribute). The <area> tags are contained in the <map> tag.

For server-side image maps, the coordinates are held on the server.

Column or row header

The content of a cell in a data table (usually the first cell in a column or row) which serves as the heading for all or some of the cells in the column or row. A column or row may contain several headers (intermediate header). When the headers apply to an entire row or column, they can be implemented with a <th> tag or a tag with a role="rowheader" or role="columnheader" WAI-ARIA attribute. Otherwise, only a <th> tag can be used.

Note: as only the <th> tag is fully supported by all assistive technologies, it is strongly recommended that this solution be chosen for implementation in order to avoid numerous checks in the various combinations provided for in the test environment (or "baseline").

Compatible with assistive technologies

Content or feature must be compatible with assistive technologies and with the accessibility functions of browsers and other user agents via an accessibility API.

This concerns both the technology and its features and uses:

  • The way in which web technology is used must be compatible with assistive technologies. This means that the way the technology is used has been tested for interoperability with users of assistive technologies in the language(s) of the content;
  • The technology runs natively in widely available user agents that are, themselves, compatible with accessibility (such as HTML and CSS) or with a widely available plug-in that is, itself, compatible with accessibility.

Verifying compatibility with assistive technologies requires carrying out a number of tests specific to the technology used, for example

  • Checking the name, role, value, properties and changes of state of user interface components;
  • Checking that a user interface component is correctly rendered (by assistive technologies).

Complex and simple gestures

A simple gesture involves touching a single point on the screen. It can be a single press or click, a double press or click, or a long press.

A complex gesture can be both a gesture involving several points of contact on the screen (e.g. a gesture with two fingers on the screen to zoom in or out on a map) and a gesture based on following a particular path on the screen (e.g. a JavaScript function that detects the movement of a finger to the left or right on a tactile surface to trigger switching to the previous/next item in a carousel).

Complex data table

A data table is a structure introduced by a <table> tag or when it is correctly rendered by assistive technologies by a tag with a WAI-ARIA role="table" attribute.

When a data table contains headers that are not distributed solely over the first row and/or column of the grid, or whose scope does not apply to the entire column or row, it is referred to as a complex data table. It is then necessary to provide a "summary" to explain its nature and structure in order to make it easier to consult for users of assistive technologies, for example.

In HTML, link containing both text and one or more image children:

  • Image (<img> tag or opening tag with WAI-ARIA role="img" attribute);
  • Clickable area (<area> tag) with a href attribute;
  • Object image (<object> tag);
  • Bitmap image (<canvas> tag);
  • Vector image (<svg> tag).

Important note: the use of two adjacent and identical links (image link and text link) is a major inconvenience for the user. Even if this does not constitute non-compliance, it should be avoided. One way of dealing with this type of link is to include the image in the text link to form a composite link, thus avoiding redundancy.

You can consult the technique H2: Combining adjacent image and text links for the same resource.

Consistent labels

Form field labels present on the same page or in a set of web pages and requiring the same information to be entered must be worded unambiguously so that the user knows that the information he is required to communicate is the same.

Contrast

Marked opposition between the luminosity of a foreground colour and a background colour. The contrast ratio is based on the difference in relative luminance between the background and foreground according to the rule (L1 + 0.05) / (L2 + 0.05) where L1 is the brightest relative luminance and L2 is the darkest relative luminance. Luminosity is calculated using the following formula: L = 0.2126 * R + 0.7152 * G + 0.0722 * B. Where R, G and B are defined by

  • If R sRGB ≤ 0.03928 then R = R sRGB /12.92 otherwise R = ((R sRGB +0.055)/1.055) ^ 2.4;
  • If G sRGB ≤ 0.03928 then G = G sRGB /12.92 otherwise G = ((G sRGB +0.055)/1.055) ^ 2.4;
  • If B sRGB ≤ 0.03928 then B = B sRGB /12.92 otherwise B = ((B sRGB +0.055)/1.055) ^ 2.4.

and R sRGB, G sRGB and B sRGB are defined by

  • R sRGB = R8bit/255;
  • G sRGB = G8bit/255;
  • B sRGB = B8bit/255.

The "^" character is the power operator.

Note: the contrast measurement concerns text, image of text, text and image of text in animations, caption text and embedded text in videos. For text and image of text in animations, caption text and inlay text in videos, the font size should be measured in relation to the default display size (as displayed). Text present in the elements of an image or video (e.g. a sign, poster, etc.) is not affected.

Source: WCAG contrast calculation procedure.

Control (automatically triggered sound)

Allows the user to stop or restart an automatically triggered sound.

Note: the sound control method should be available as the first element on the page.

Control (moving or blinking content)

The ability for the user to control the display or playback of moving or blinking content using at least the keyboard and mouse.

All moving content, with the exception of time-based media supported by the multimedia theme, is covered: animated images (e.g. an animated gif), moving content offered via an <object> tag, JavaScript code or CSS effects, for example.

Note 1: where appropriate, the control method should be available as the first element of the page.

Note 2: The control (moving or blinking content) method must allow the user to interact with the rest of the page. Consequently, stopping or pausing via an event triggered only when focused does not validate the criterion.

Note 3: In some cases, movement is an integral part of the component and it is not possible to give the user control of it, for example a progress bar whose function is to indicate the progress of an event such as a download by movement. In this case the criterion is Not Applicable.

Controlled environment

Any environment in which access to information, technologies, conditions of use and user profiles can be known and controlled. The main elements whose control is essential are

  • Browser type and version;
  • Supported technologies, their version and activation (JavaScript, WAI-ARIA, etc.);
  • Assistive technologies and any devices used specifically by users with disabilities;
  • Operating systems and accessibility APIs supported;
  • Training for users of assistive technologies in the use of any specific device (interface, online application, etc.).

Authors and administrators must guarantee the compatibility of the technologies used and their use by users and their technologies (including assistive technologies). Information services or Websites, whatever their status, which offer public access cannot be considered controlled environments.

Correctly rendered (by assistive technologies)

When a criterion, test or test condition requires the rendering of a device to be checked, it must be ensured that the rendering is compatible with accessibility.

The test consists of verifying that the rendition is relevant for at least one of the combinations of the test environment (or "baseline") used to declare that an element, device or alternative is "compatible with accessibility".

For example: the test 1.3.8 asks you to check that the alternative of a bitmap image (<canvas> tag) conveying information is correctly rendered.

A test is then carried out using the tools in the test environment defined for the site.

If it is found that the alternative is correctly rendered, the test is validated.

CSS property defining a colour

This concerns the following properties: color, background-color, background, border-color, border, outline-color, outline.

Note: the use of a background image to insert a colour (property background:url...) is also affected.

D

Data table

A data table is a structure introduced by a <table> tag or when it is correctly rendered by assistive technologies by a tag with a WAI-ARIA role="table" attribute. This tag is used to structure information in rows and columns using data cells and header cells.

Data table with a title

Data table with an attribute or containing a tag whose content acts as a title.

Data table preceded or followed by a passage of text associated with the table acting as the title.

Provided it is correctly rendered and associated with the data table by assistive technologies, the associated title can be

  • In a <caption> tag;
  • In a title attribute;
  • In a WAI-ARIA aria-label attribute;
  • In a tag associated with the data table via a WAI-ARIA aria-labelledby attribute on the table.

Note: as only the <caption> tag is fully supported by all assistive technologies, it is strongly recommended that this solution be chosen during implementation in order to avoid numerous checks in the various combinations provided by the test environment (or "baseline").

Data type and format

Indication of the data type and format expected when entering a form input field. For example

  • Date (dd/mm/yyyy);
  • Amount in euros;
  • Postcode (5 digits: e.g. 75001).

Important note: when the type of form input field offers an input mask, for example the date or time fields, the format indication is not necessary.

Decorative image

Image with no function and conveying no particular information in relation to the content with which it is associated.

Examples

  • An image preceding each item in a list;
  • An image used to set the page layout;
  • A rounded corner image to dress up a block of information;
  • An illustrative image that does not provide any information necessary for understanding the text to which it is associated.

Note: tags with a WAI-ARIA role="img" attribute can only be used as decorative images if they have a WAI-ARIA aria-hidden="true" attribute.

Default language

Indication of the document's main processing language, which may be present on the html root element or on each element of the relevant page via the lang and/or xml:lang attributes, according to the following scheme:

  • For HTML up to version 4.01: lang attribute mandatory, xml:lang attribute not supported;
  • For XHTML 1.0 served as "text/html": lang and xml:lang attributes mandatory;
  • For XHTML 1.0 served as "application/xhtml+xml" xml:lang attribute mandatory, lang attribute recommended;
  • For XHTML 1.1: xml:lang attribute mandatory, lang attribute not supported;
  • For HTML5: lang attribute mandatory.

Design pattern

A design pattern is a model defined in the WAI-ARIA 1.1 Authoring Practices document which describes the structure, roles and properties and keyboard behaviour that a JavaScript component (widget) must respect.

It is recommended that components developed in JavaScript using WAI-ARIA attributes corresponding to a design pattern comply with it. Please note, however, that not all design patterns are suitable for non-application use, particularly for sites displaying in a mobile context.

Note 1: given the lack of support for certain WAI-ARIA properties and roles, and the wide variety of situations in which a JavaScript component may be proposed, it is possible to adapt design patterns to particular contexts or uses. In this case, the adapted design pattern must

  • Respect the general structure: for example, a set of panels (WAI-ARIA tabpanel role) in a tab system is necessarily linked to a set of tabs (WAI-ARIA tablist role);
  • Use an equivalent WAI-ARIA role or property to replace a poorly supported WAI-ARIA role or property, offering similar behaviour and output.

Note 2: Enriching a design pattern with additional WAI-ARIA roles or properties whose accessibility compatibility is checked by the rendition test on the test environment (or "baseline") does not constitute an adaptation of a design pattern. For example, adding the WAI-ARIA aria-hidden attribute to the panels (WAI-ARIA tabpanel role) of a tab system does not define an adapted design pattern.

Detailed description (image)

Content associated with an image in addition to its text alternative in order to fully describe the information conveyed by the image. The detailed description can be associated with the image via

  • A reference to a detailed description adjacent to the image in the text alternative (image);
  • An adjacent link or button which allows you to access the detailed description on the page or on another page;
  • One or more passages of text identified by an id and linked by a WAI-ARIA aria-describedby attribute based on the model aria-describedby="ID1 ID2 ID3...".

Note 1: If the aria-describedby attribute is not supported, it is possible to use one or more passages of text identified by an id and linked by a WAI-ARIA aria-labelledby attribute following the text alternative.

Note 2: To ensure maximum compatibility with user agents, in particular Internet Explorer 11, it is recommended to implement a tabindex="-1" on tags which contain a passage of text and which are not interactive elements (buttons, links, form elements, etc.).

Digital accessibility rules

The generic term "digital accessibility rules" refers to the RAWeb, the RAAM, the RAPDF or the EN 301 549 standard, depending on the context of use.

Document structure

Set of elements used to define the main areas of an HTML page, such as the page header region, the main and secondary navigation regions, the main content region and the footer region.

Document type

Set of reference data which allows user agents to know the technical characteristics of the languages used on the web page (doctype tag).

Documentation

The documentation for a website or support service can be

  • a help page;
  • an accessibility statement;
  • any other content that serves as documentation (PDF document, external HTML page readable in a web browser).

E

Editing tool

A web application or editing component in a web page that allows content to be created or modified for distribution to other users. An editing tool can be used by one or more users working collaboratively.

An editing tool can be

  • the tool as delivered by the publisher;
  • the tool augmented with extensions not developed by the publisher;
  • a set of tools.

Examples of editing tools

  • application for editing and controlling the content of websites or applications, e.g. CMS (Content Management System), LMS (Learning Management System), LCMS (Learning Content Management System), content aggregator;
  • applications for creating office documents (e.g. for distribution in PDF format);
  • multimedia editing tools;
  • application for creating web applications;
  • application for editing code;
  • application for exporting to web technology format (e.g. software for saving in HTML);
  • application that generates content based on templates, scripts, command lines, etc.;
  • application or functionality of a web page enabling the editing of portions of web pages or applications (typically, blog systems, comment features on websites, forums or wiki systems);
  • mail application used to send e-mails.

Examples of editing tools that are not included in the scope:

  • An application where the content created is not made available to other users (note-taking application with no sharing functionality, for example). In this case, the edited content is only available to the owner and is not made available to other users.
  • Forms intended for users. For example, an order form for an e-commerce application. Although forms allow content to be edited, this content is not made available to other users.
  • Independent accessibility control tools: these tools do not modify the content they control.

Editing tools should not be systematically included in the sample. For example, when auditing a news website, the RAWeb does not require the editing tool (e.g. a CMS) used to create the content to be audited. If the purpose of the audit is to evaluate the public consultation interface, the sample must contain only the representative public pages, but not the content management system.

Error management (form)

A set of processes that warn the user of mandatory fields, expected type or format indications and input errors in a form. Error management can be implemented by the content author or be based on attributes (such as required or pattern), WAI-ARIA attributes (such as aria-required) or field types that automatically produce input or error indications (such as url, email, date, time types, for example).

F

Font size

Value assigned to the fonts on a web page.

This contains information about the operation of the site or legal information. For example, you will find the legal notice, credits, terms of use, site map and possibly the accessibility page.

Note: Be careful not to confuse this footer region, which is unique on the site, with any content that can be tagged in HTML5 with the <footer> element.

See the technical definition provided by WAI-ARIA: Contentinfo (role).

Form

<form> tag or tag with a WAI-ARIA role="form" attribute.

Form field label

Text close to the form field that indicates the nature, type or format of the information expected. The label can be associated with the form field in several ways:

  • By using a <label> tag;
  • By using the WAI-ARIA aria-label attribute;
  • By linking the text to the field using the WAI-ARIA aria-labelledby attribute;
  • By using the title attribute.

Important note: when several of these techniques are used on the same field, the calculation of the "accessible name", i.e. what will be rendered, follows a strict order:

  • aria-labelledby;
  • Otherwise aria-label;
  • Otherwise <label>;
  • Else title.

This order must be used to assess the relevance of the label (criterion 11.2). For example, even in the case of the presence of a <label>, it is the passage of text referenced by aria-labelledby that should be taken into account.

Reference: Accessible name and description calculation.

Important note about the use of placeholder: when the placeholder attribute is present, it is likely to be returned instead of the title attribute. Consequently, when these two attributes title and placeholder are present, they must be identical.

Note about labels linked with aria-labelledby: these are one or more passages of text identified by ids and linked by aria-labelledby according to the following model: aria-labelledby="ID1 ID2 ID3...". To ensure maximum compatibility with user agents, in particular Internet Explorer 11, we recommend implementing a tabindex="-1" on passages of text that are not interactive elements (buttons, links, form elements, etc.).

Note: the aria-label attribute cannot be used to indicate the mandatory nature of a field.

Form input field

Object of a form allowing the user to:

  • Enter textual or pre-formatted data:
    • input type="text";
    • input type="password";
    • input type="search";
    • input type="email";
    • input type="number";
    • input type="tel";
    • input type="url";
    • textarea.
  • Select predefined values:
    • input type="checkbox";
    • input type="radio";
    • input type="date";
    • input type="range";
    • input type="color";
    • input type="time";
    • input type="month";
    • input type="week";
    • input type="datetime-local";
    • select;
    • datalist;
    • optgroup;
    • option.
  • Download files:
    • input type="file".
  • Or display results:
    • output;
    • progress;
    • meter.
  • Tags with a WAI-ARIA role for rendering a form field are also covered by this definition:
    • progressbar;
    • slider;
    • spinbutton;
    • textbox;
    • listbox;
    • searchbox;
    • combobox;
    • option;
    • checkbox;
    • radio;
    • switch.
  • The following WAI-ARIA form objects and roles are not considered to be form fields:
    • input type="submit";
    • input type="reset";
    • input type="hidden";
    • input type="image";
    • input type="button";
    • button;
    • WAI-ARIA role="button" attribute.

Frame

Frame: HTML element (<frame> tag) used to display content on the web page in which it is implemented.

Inline frame: HTML element (<iframe> tag) used to display content on the web page in which it is implemented.

Frame title

value of the title attribute of the <iframe> or <frame> tag, used to identify the nature of the content displayed via the frame when the user navigates from frame to frame or displays the list of frames on the page, for example.

Note 1: Some frames are used solely for technical operations such as application processing designed to prepare or control content displayed on the page, such as the frames used by certain social networks such as Facebook.

If these frames do not have a frame title provided by the remote service, or if the frame titles are deemed irrelevant, generic terms may be used, for example title="Facebook technical content".

Note 2: If this does not hinder the operation of this type of frame, it is possible to make them unavailable to assistive technologies by using the WAI-ARIA aria-hidden="true" attribute. In this case, criterion 2.1 and criterion 2.2 will not apply.

G

Graphic element

Element using a visual representation such as images, pictograms or graphics.

This element may be made up of one or more parts that need to be visible in order to be understood (for example, each point on each line of a statistics graph).

H

Header region

Area at the top of the document generally containing the document title, a logo, a slogan, etc

Note: Be careful not to confuse this header region, which is unique on the site, with any content that can be tagged in HTML5 with the <header> element.

See the technical definition provided by WAI-ARIA: Banner (role).

Heading

HTML element (h tag) with 6 levels of hierarchy (from h1 for the most important heading to h6 for the least important) or HTML element with WAI-ARIA role="heading" and aria-level attributes used to structure the information in web content.

Ensuring a strict hierarchy between the headings of a web page is good practice, but the presence of hierarchical jumps does not invalidate the criterion as long as this looser hierarchy remains consistent (a <h3> heading can come directly after a <h1> heading, for example). The headings hierarchy does not have to contain a <h1> heading. Although these practices are not encouraged, they do not invalidate the criterion.

Note: headings visually hidden via CSS are considered to be present and validate the criterion 9.1.

Help with creating accessible content

Any feature available from a content editing interface, whatever the target format, which supports the author of the content in taking into account digital accessibility rules.

Help with creating accessible content can be an automatic assistance tool or documentation. Aids to content creation include

  • automatic or semi-automatic tests available from the editing functions;
  • other automatic tools (a chatbot, for example);
  • documentation explaining how to define accessibility properties for each content item;
  • manual tests available from the editing functions to guide authors in detecting errors.

Hidden content

Assistive technologies (in particular screen readers) do not render content hidden via

  • display with the value none (display: none);
  • visibility with the value hidden (visibility: hidden);
  • font-size set to 0 (font-size: 0);
  • HTML5 hidden attribute;
  • WAI-ARIA aria-hidden="true" attribute.

All content using one or more of these properties and attributes is applicable for the criterion 10.8.

I

Image caption

When a text adjacent to an image contains information about the image (e.g. copyright, date, author, etc.) or is intended to supplement the information provided by the image (e.g. a text associated with an image in an image gallery), it is referred to as an image caption.

When an image is captioned, the image caption needs to be linked to the image by a structural relationship, so that assistive technologies can treat the image and its caption as a single whole.

HTML5 suggests associating a legend with an image via the figure (the whole image and the caption) and figcaption (the caption) elements.

An image without a caption can define

  • An image which is not inserted into a figure element;
  • An image inserted in a figure element without a figcaption element.

Note: when the text adjacent to the image can be used as replacement text, it is not necessary to use the figure, figcaption set, as the image can simply be treated as a decorative image.

On this subject, you can consult the W3C note Requirements for providing text to act as an alternative for images.

Image conveying information

An image that conveys information necessary for understanding the content with which it is associated.

Note 1: when the image is the only content of a link, its alternative is the link accessible name. In this case, the image alternative should be evaluated using the "Links" theme.

Note 2: When a form button, inserted with the element <button>, contains only an image (<img>, <object>, <embed>, <canvas> or <svg> tag), the alternative for the image is the button accessible name. There are two possible cases:

  • The button is controlled by its type, for example, the submit or reset type, and is part of a form. In this case, the image button should be evaluated using the "Forms" theme;
  • The button is controlled by a JavaScript device. In this case, the image button must be evaluated under the "Scripts" theme.

Image conveying information (provided by colour)

An image in which all or part of the content visually conveys information through colour alone.

In HTML, link containing only one or more children of the image type

  • Image (<img> tag or opening tag with WAI-ARIA role="img" attribute);
  • Clickable area (<area> tag) with a href attribute;
  • Object image (<object> tag);
  • Bitmap image (<canvas> tag);
  • Vector image (<svg> tag).

Image map

  • Client-side image map (usemap attribute): image divided into clickable or neutral areas (nohref attribute);
  • Server-side image map (ismap attribute): image for which the browser transmits the coordinates of the pointer to the server, each set of coordinates corresponding to a resource (web page). Server-side image maps are extremely rare.

Note: in HTML5, the ismap attribute is obsolete and non-compliant for image type buttons (input type="image").

Image map area

The clickable or non-clickable area of a client-side image map, or the clickable area of a server-side image map.

Image of text

Image displaying text.

Note: the use of image of text is not recommended. Where it is possible to reproduce the same effects in CSS, criterion 1.8 requires that the text be reproduced in styled text, or that a replacement mechanism allows the user to replace these images with styled text in CSS.

Image of text object

Image generated by the <object> tag and displaying text.

Indication conveyed by shape, size or location

For example

  • The presence of a visual marker, to indicate the active page in a navigation menu (indication given by position);
  • Foregrounding to indicate an active tab (indicated by its shape);
  • A change in font size in a tag cloud (indicated by size).

Or any other similar graphic effect.

Indication of data type and/or format

Text indication enabling the user to know what type of data and/or input format is required for a mandatory field, before filling it in.

Examples

  • Email (format: you@domain.com);
  • Postcode (format: 00000);
  • Date (format: DD/MM/YYYY).

Information (provided by colour)

Information conveyed visually through colour. The indication that fields in red are mandatory in a form, the use of a blue background to indicate the page currently being consulted in a menu with a green background, the change of colour of an item name to indicate its unavailability in a list of items are all examples of information given by colour.

When information (provided by colour) is accompanied by another method aimed at users who cannot see or perceive colours or their associations well, the criterion will be considered as not applicable.

Means of conveying information other than by colour may be

  • A visible text indication;
  • Means involving graphics (pictogram, background image, shape, different border style, etc.) and through a complement to the code (aria-label, title, hidden text, aria-current, etc.);
  • A different typographic style (bold, italic, text size, different font, etc.) and by means of a supplement in the code (aria-label, title, hidden text, aria-current, etc.).

Input unit

For character-by-character input, the smallest text input unit is the character.

For a system with word prediction functionality, the smallest input unit is the word.

For some speech recognition systems, the text is not retranscribed until an entire word or phrase has been spoken. In this case, the smallest input unit is the word or phrase.

Items of the same type in a combobox

In a drop-down list (<select> tag), a set of items (<option> tags) which can be grouped together according to their nature. The purpose of grouping is to identify items that should be treated as a whole (for example, a list of departments grouped by region).

K

Key features of captions

It is possible to apply presentation effects to captions (text colour, style, font) in order to convey information to users (e.g. identify the person speaking). These key features of captions are essential for users to understand them and should be retained during the transformation process (sending or recording the video, for example) if they are present.

Keyboard shortcut

A means of triggering an action associated with a user interface component by pressing one or more keys.

Note: "Access keys" (HTML accesskey attribute) are indeed keyboard shortcuts, but they are not affected by criterion 12.10 insofar as their activation already requires the use of modifier keys (which vary depending on the browser).

L

Label and field located next to each other

The label and its field must be visually close so that the relationship between the two cannot lead to confusion.

Landmarks

WAI-ARIA provides roles for indicating the main areas (regions) of the document. These roles are very useful for screen reader users in particular, but also for keyboard navigation users who can benefit from quick navigation functions in the document structure.

The roles must be defined in the document according to the nature of the zone:

Note 1: While most screen readers provide these functions, browsers have yet to offer a dedicated navigation function for users who cannot use the mouse. The implementation of skip links therefore remains to be favored over landmarks.

Note 2: The WAI-ARIA banner, main and contentinfo roles must be unique in the page. The WAI-ARIA navigation role is reserved for main and secondary navigation zones. When there are several WAI-ARIA navigation roles, it may be useful to differentiate them by specifying a name for each of the zones using the WAI-ARIA aria-label or aria-labelledby attribute.

Language change

Indicating language changes is necessary to tell assistive technologies to modify the speech output of an element. Language changes affect all content, including the values of certain attributes such as title.

Note: it is not possible to indicate language changes in an attribute value itself, in which case the language change is indicated on the element containing the attribute. For example, a link with a title in French must include a lang="fr" attribute. When the attribute contains several passages of text in different languages, the criterion is not applicable.

Language code

A 2-character (ISO 639-1) or 3-character (ISO 639-2 and following) code used to indicate the language of a document or passage of text. The language code is made up of two parts separated by a hyphen on the lang="[code]-[option]" model.

  • [code] represents a valid language code of 2 or 3 characters;
  • [option] is an indication left to the author's discretion.

When a country code is used as an option, it can be used to indicate a regionalisation of the language, e.g. "en-us" indicates American English. The language code indication only concerns the [code] part before the hyphen.

Layout table

Technique which uses an HTML element (<table> tag) to control the display of information via cells (<td> tag).

Legend

HTML provides a way of titling groups of related form controls using the elements <fieldset> and <legend>.

It is also possible to create groups with the WAI-ARIA group role and a passage of text, acting as a legend, linked by the WAI-ARIA aria-labelledby attribute or provided by a WAI-ARIA aria-label attribute.

Note 1: Field groupings can use other methods that associate the grouping information directly into the field label. For example, via a title attribute, a WAI-ARIA aria-label attribute, a aria-labelledby link acting as a label, or the WAI-ARIA aria-describedby attribute associating additional text. In this case, field grouping becomes unnecessary because the labels are sufficiently relevant.

Note 2: When the form consists of a single block of information of the same kind (the user's identity and address, for example) or a single field (a search engine, for example), field grouping is not mandatory.

In HTML

  • <a> tag with a href attribute;
  • Tag with a WAI-ARIA role="link" attribute and whose navigation action is handled by a script.

In SVG

  • <a> tag with xlink:href attribute in SVG 1.1.

The link context represents the additional information (referred to as context information) that can be related by a computer program to the accessible name of a link. The contextual information used to complete the accessible name of a link is as follows:

  • The content of the sentence in which the text link is present;
  • The content of the paragraph (<p> tag) in which the text link is present;
  • The content of the list item (<li> tag) or the content of a parent list item (<li> tag) in which the text link is present;
  • The content of the title (<hx> tag) preceding the text link;
  • The content of the table header cell(s) (<th> tag(s)) associated with the data cell (<td> tag) in which the text link is present;
  • The content of the data cell (<td> tag) in which the text link is present.

Note 1: One of the 6 link contexts combined with the accessible name of a link should make it possible to understand the function and destination of the link.

Note 2: RAWeb considers that an e-mail address of the type xxx@xxx.yyy is a sufficient link text to understand the function of the link and does not require the action to be indicated more explicitly.

A link which can be confused with normal text when it is indicated by colour alone by certain types of user who have little or no perception of colour. For example, in this text "New strike at SNCF", if the word "strike" is a link indicated by colour only, its nature may be ignored by non-colour-perceptive users accessing the activated CSS content.

Note: "indicated only by colour" means that the link is not accompanied by any visual marker (icon, underline, border, etc.). Consequently, a link of the same colour as the surrounding text is affected by this criterion.

List of possible values for the autocomplete attribute

The list of available values is provided by the WCAG 2.1 specification:

  • name -- Full name;
  • honorific-prefix -- Abbreviation, title;
  • given-name -- First name;
  • additional-name -- Additional first names;
  • family-name -- Family name;
  • honorific-suffix -- Honorific suffix;
  • nickname -- Nickname, diminutive;
  • organisation-title -- Function, job title;
  • username -- User name;
  • new-password -- New password (for example, when creating an account or changing a password);
  • current-password -- Current password for the account identified by the username field (for example, when logging in);
  • organization -- The name of the organization corresponding to the person, address or contact information in the other fields associated with this field;
  • street-address -- Postal address (multi-line, new lines retained);
  • address-line1 -- Postal address (one line per field, line 1);
  • address-line2 -- Postal address (one line per field, line 2);
  • address-line3 -- Postal address (one line per field, line 3);
  • address-level4 -- The most detailed administrative level, for addresses with four administrative levels;
  • address-level3 -- The third administrative level, for addresses with three or more administrative levels;
  • address-level2 -- The second administrative level, for addresses with two or more administrative levels;
  • address-level1 -- The highest administrative level of an address, i.e. the province in which the locality is located;
  • country -- Country code;
  • country-name -- Country name;
  • postal-code -- Postcode;
  • cc-name -- Full name appearing on the means of payment;
  • cc-given-name -- First name shown on the means of payment;
  • cc-additional-name -- Additional first names appearing on the means of payment;
  • cc-family-name -- Family name appearing on the means of payment;
  • cc-number -- Code identifying the means of payment (e.g. a bank card number);
  • cc-exp -- Expiry date of the payment method;
  • cc-exp-month -- The month in which the payment method expires;
  • cc-exp-year -- The year of the expiry date of the means of payment;
  • cc-csc -- Payment method security code (also known as the card security code (CSC), card validation code (CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc.);
  • cc-type -- Type of payment method (e.g. Visa);
  • transaction-currency -- The currency preferred by the user during a transaction;
  • transaction-amount -- The amount preferred by the user in a transaction (e.g., in response to an auction or clearance price);
  • language -- Preferred language;
  • bday -- Birthday;
  • bday-day -- The day of the birthday;
  • bday-month -- The month of the birthday;
  • bday-year -- The year of the birthday;
  • sex -- Gender identity;
  • url -- Home page or other web page corresponding to the organisation, person, address or contact information in the other fields associated with this field;
  • photo -- A photograph, icon or other image that matches the organisation, person, address or contact information in other fields associated with this field;
  • tel -- Full telephone number, including country code;
  • tel-country-code -- Country code of the phone number;
  • tel-national -- Telephone number without the country code part, with an internal country prefix if applicable;
  • tel-area-code -- Area code of the telephone number, with an internal country prefix, if applicable;
  • tel-local -- Telephone number without the country code part and the area code;
  • tel-local-prefix -- The first part of the telephone number component following the area code, when that component is split into two parts;
  • tel-local-suffix -- The second part of the telephone number component following the area code, when this component is split into two parts;
  • tel-extension -- The telephone number of an internal extension;
  • email -- E-mail address;
  • impp -- Corresponding URL of an instant messaging protocol (for example, "aim:goim?screenname=example" or "xmpp:fred@example.net").

Lists

A sequence of elements which can be grouped together in the form of a structured ordered, unordered or definition list. For example, the sequence of links in a navigation menu is an unordered list of links, the various steps in a procedure are an ordered list of elements, the term/description pair in a glossary is a list of descriptions. In HTML, lists use the following tags:

  • Ordered list: <ol> and <li> tags (each element of the list is assigned an indexed marker);
  • Unordered list: <ul> and <li> tags (each item in the list is assigned an unindexed marker);
  • Description list: <dl>, <dt> (term to be described) and <dd> tags (description).

Note 1: In HTML5, the <dl> tag no longer represents just a list of definitions, but generically any list of descriptions which may include, as a group of terms-descriptions, names and definitions, questions and answers, categories and subjects, etc.

Note 2: It is also possible to structure lists using the WAI-ARIA attributes role="list" and role="listitem" for ordered and unordered lists.

Note 3: the notion of "visually grouped in the form of a list" is characterised by

  • The presence of a visual marker making it clear that it is an unordered list, for example -, •, *, etc.;
  • The presence of a visual marker to indicate that it is an ordered list, e.g. a number, a Greek letter, etc.; and
  • The presence of a series of elements that visually follow on from each other, with an identical visual form, nature and function, but without directly having a visual list marker (unordered or ordered), for example a navigation menu.

However, not all lists require a list structure, for example a series of terms separated by a comma.

M

Main content region

Area containing the main content of the page, where the background information and functions are located (i.e. outside the menus, search or secondary areas for advertising, related news, etc.).

Note: This zone is unique on the page. It can be difficult to determine on certain pages, such as the home page.

See the technical definition provided by WAI-ARIA: Main (role).

Main features (of a time-based media player)

The main functions are the basic functions of a media player: play, pause, stop, sound control.

Mandatory field indication

Textual or graphic indication (icon) letting the user know that a field is mandatory before entering it.

Note: If this indication is not made explicitly in text (icon, "*", "!", etc.), the explanation of the meaning of this indication must be located, visually and in the order of the source code, before the indication is used for the first time.

Mechanism for displaying a compliant contrast ratio

A user interface component whose activation allows the appearance of the site or page to be modified so that content is displayed with a sufficient contrast ratio. The design of this user interface component must comply with criterion 3.2 and criterion 3.3 without itself using a mechanism to display a compliant contrast ratio. This mechanism must maintain the same content and functionality of the site or page that it modifies.

Mechanism for enabling an accessibility feature

User interface component or set of user interface components used to activate a functionality that takes into account one or more adaptation needs of the interface. For example: a button for displaying a page with the correct contrasts, or a button for increasing paragraph spacing.

We also talk about a set of components when, in certain interfaces, the component that enables the functionality to be activated is only made available after one or more other components have been activated. For example: a button can be used to display a modal window which itself contains a button which can be used to display a page with conforming contrasts. In this case, the button that displays the modal window and the button that activates the display of compliant contrasts together constitute the mechanism.

This mechanism must maintain the same content and functionality as the site or page it modifies.

A list of links for specific navigation within the site, a section or a collection of pages.

The main navigation bars (criterion 12.2) are

  • A navigation menu;
  • A breadcrumb trail;
  • A navigation list for a list of results;
  • Skip links.

There are different types of navigation menu (criterion 12.1 and criterion 12.2):

  • Main navigation menu;
  • Sub-heading menu;
  • Context menu;
  • Table of contents for a set of web pages.

Note: Footer links to the legal aspects, site map and other information about the site are not considered to be a main navigation menu.

Modify or cancel data and carried out actions

Procedures by which a user can modify the data they have entered, have their entry cancelled or have the actions resulting from their entry cancelled, for example cancelling an order or a bank transfer.

Note: The page containing a form which modifies or deletes data, or which transmits answers to a test or examination, or whose validation has financial or legal consequences, must explicitly indicate the period during which the user can request the cancellation of their input. It must also contain the procedure for cancelling the entry. This procedure does not have to be available online, although it is recommended.

N

Name, role, value, properties and changes of state

A component must have an appropriate role and name. Its values, states and any parameters must also be accessible and correctly passed on to the accessibility APIs in particular.

A component can be based on an interactive HTML element or on a non-interactive element overloaded by WAI-ARIA via an ad hoc role. Important: buttons (<button> or <input type="button"> tags) when controlled via JavaScript must be evaluated with criterion 7.1.

The name is the accessible name of the component (the accessible name of a button, for example).

The value is, for example, the selected item in a drop-down list or the current value of a cursor (slider).

The role corresponds to the type of element defined by the HTML or WAI-ARIA specification (such as the <button> tag or the WAI-ARIA role="button" attribute).

Properties correspond to specific information about a component, generally provided by WAI-ARIA. For example, aria-controls is a property that sends APIs the information that the component controls any given content (referenced by its identifier -- id attribute).

Changes of state are also made available by WAI-ARIA. For example, aria-expanded is a state that tells APIs whether the component is "open" or "closed". Note that a state can also be transmitted via the name, when it is dynamically changed to correspond to the state of the controlled zone in particular.

These properties are not mandatory, but may be required if they are essential to make the component accessible. It is up to the auditor to consider the cases where these properties are essential, depending on the context in which the component is used.

The auditor must also check that, where they are present, these properties are used correctly.

To do this (if they deem it relevant, given the context in which the components are implemented and the ergonomic choices made), they can use the WAI-ARIA usage recommendations for components with WAI-ARIA attributes corresponding to a design pattern as described in the document WAI-ARIA 1.1 Authoring Practices.

Note: WAI-ARIA roles, properties and states are implemented via attributes, for example role="banner", aria-hidden="true".

Order in which the focus moves (to the next element or to the previous element). The natural order is the one implemented in the source code. When it is modified using the tabindex attribute or using a JavaScript command, it is the modified order that is referred to.

Warning: when an element initiates a change in the page (change of context, management of hidden zones, addition of content, management of form fields, etc.), the element initiating the change must be activated in order to test the consistency of the navigation sequence.

Any process enabling navigation within the site or within a page. The navigation systems used are

  • Main navigation menu;
  • Table of contents;
  • Site map;
  • Search engine.

Non-clickable area

Region of an image map to which no action is associated. A client-side non-clickable area is contained in an <area> tag:

  • With the nohref attribute when the HTML code of the page is not HTML5;
  • Without the href attribute in HTML5.

The <area> tags are contained in the <map> tag.

Non-time-based media

Content that does not take place in time, which can be viewed using svg and canvas elements; for example, an interactive animation created using a canvas tag. Non-time-based media can contain time-based media (for example, a slideshow created with canvas which offers a list of videos to view).

O

Object image

Image embedded in or generated by an <object> tag.

Only for layout purposes

Only for layout purposes: use of HTML tags for a purpose other than that specified in the specifications (with regard to the declared document type). Examples: use of the h tags for the sole purpose of creating a typographic effect; use of the <blockquote> tag for the sole purpose of indenting a paragraph, etc.

Note 1: the use of <div> or <span> elements or several <br> elements to visually create a paragraph is considered non-compliant and invalidates the criterion.

Example: <div>, paragraphs in a simulated block of text, <br>, using several <br> tags, </div>

Note 2: WAI-ARIA offers a presentation role which can be used to suppress the semantics of an element, for example <h1 role="presentation">Heading</h1>. In this case, the text will be rendered correctly but its heading role will no longer be rendered. The presentation role may be required when using a WAI-ARIA design pattern.

The WAI-ARIA presentation role can also be used to remove semantics from an element when it is used only for layout purposes, e.g. <blockquote role="presentation"> will have the same effect as no <blockquote> element.

Even if this use is strongly discouraged (in the case of assistive technologies that do not implement WAI-ARIA, for example), it can be considered WCAG-compliant. On the other hand, the use of a WAI-ARIA presentation role on an element whose nature (e.g. semantics) is essential to the understanding of the content is a violation of the WCAG rules (particularly failure F92) and invalidates the criterion.

P

Page title

The content of the <title> tag on a web page, enabling the content/nature of the page to be identified clearly, concisely and uniquely ("Site map www.sitename.org" for a page presenting a site map, for example).

Passage of text linked by aria-labelledby or aria-describedby

One or more passages of text identified by id values which are unique in the page and associated with an element (form field, button, etc.) by the WAI-ARIA aria-labelledby or aria-describedby attributes on the following model: aria-labelledby="ID1 ID2 ID3..." where the value of the attribute used is equal to the list of id attribute values of the passages of text to be associated present in the page.

Note 1: to ensure maximum compatibility with user agents, in particular Internet Explorer 11, we recommend implementing a tabindex="-1" on passages of text which are not interactive elements (buttons, links, form elements, etc.).

Note 2: the value of the WAI-ARIA attributes aria-labelledby or aria-describedby must not create a recursive reference (A refers to B which refers to A) or a traversal reference (A which refers to B which refers to C).

Presentation of information

Visual rendering of content via a browser in graphic mode. Presentation concerns the style, position and dimensions of HTML elements and their content. The presentation of information must be achieved using CSS. The elements (basefont, big, blink, center, font, marquee, s, strike and tt) and attributes (align, alink, background, bgcolor, border, cellpadding, cellspacing, char, charoff, clear, compact, color, frameborder, hspace, link, marginheight, marginwidth, text, valign, vlink, vspace) are prohibited.

Notes

  • The width and height attributes used on elements other than the <img>, <object>, <embed>, <canvas> and <svg> elements are also prohibited;
  • The size attribute used on elements other than the <select> element is also prohibited;
  • The <u> element is prohibited only if the DOCTYPE of the document does not correspond to HTML 5.

Pressed

Corresponds to JavaScript event handlers considered as descendant events (mousedown, touchstart for example).

Q

QVGA

QVGA (Quarter Video Graphics Array) resolution is a display standard corresponding to a size of 320 pixels X 240 pixels (i.e. 76,800 pixels).

R

Reading direction

Indicates the reading direction of the document or a passage of text via the dir attribute, dir="ltr", for example. The two recognised values are

  • ltr (left to right) indicates a reading direction from left to right;
  • rtl (right to left) indicates a reading direction from right to left.

Note: if there is no indication of reading direction via the dir attribute on the html, body element, or one of the parents of the text being analysed, the default reading direction is left to right (value ltr).

Real-time text communication

Real-time text (RTT) communication is a form of written communication which allows the other party to read the text being written by the sender, without waiting for the sender to confirm (e.g. by pressing the enter key).

Collaborative editing tools (e.g. online office suites) are an example of the operating principle of real-time text (RTT) communication: the various participants can see the texts being written and modified by each other at the same time as the modifications are being applied to the texts. This is very different from a common online conversation system (such as instant messaging), which only transmits a written message to the other party when a key or button is pressed (for example, the enter key).

Example of real-time text communication integrated into a platform: Answer or make RTT or TTY calls from iPhone.

Redirect

Process which consists of redirecting the user to another page, on the same domain or on a different domain, when displaying a page on the client workstation.

Refresh process

A technique for modifying the content of one or more elements of a web page. The refresh process can be carried out by automatically reloading the page or dynamically without reloading the page (via AJAX, for example). The user must be able to control each refresh process independently.

In a form, a set of fields which can be grouped together according to the nature of the information required. The purpose of grouping is to identify which fields should be treated as a whole.

Here are a few examples:

  • Three successive fields for entering a date (day/month/year);
  • Successive fields for a telephone number;
  • A block for entering the user's identity and address, when the form contains several contact blocks;
  • A set of radio buttons or tick boxes relating to a question.

These fields must be grouped together when the labels are not sufficient to inform the user that the fields are part of a group.

Relay service

Relay services allow users, regardless of their mode of communication (text, sign, speech) to interact during real-time remote communication with other participants, by providing conversion between modes of communication.

For example, if a user who communicates using sign language wants to talk to someone who does not, a relay service will provide live interpreting so that they can communicate.

Released

Corresponds to JavaScript event handlers considered as bottom-up events (mouseup, touchend for example).

Replacement mechanism

Mechanism generally based on CSS, allowing the user to replace text with image of text and vice versa on the principle of style switcher. The mechanism can use a server-side scripting language or a client-side scripting language.

S

Script

Code generally written in the form of a list of commands (e.g. JavaScript). Client-side interpreted languages require a compatible browser on which execution of the language is active. The commands in a client-side scripting language may be embedded or contained in an external file. In both cases, they are inserted using the <script> tag.

Search engine (internal to a website)

Area giving direct access (form) or indirect access (interface element giving access to the form) to the search engine which enables searches to be made on the content of the entire site.

Note: Be careful not to confuse this search zone, which is unique on the site, with any other search engine that can be used, for example, to search a restricted part of the site: a catalogue, offers in a public procurement section, etc.

See the technical definition of search region provided by WAI-ARIA search(role).

Set of web pages

Web pages linked together to form a coherent set of web pages within a website. For example, the pages of a specific section, the pages of a blog or the administration pages of a customer account are all sets of pages.

Note: the home page of a website can, on its own, constitute a "set of web pages" because of its uniqueness.

Short and concise alternative

The conditions for rendering a text alternative using assistive technologies (e.g. a screen magnifier) require it to be as short as possible. A maximum length of 80 characters is strongly recommended; this will limit the number of manipulations required to read the alternative by users of Braille displays or screen magnifiers in particular.

Site map page

Dedicated page presenting the tree structure of a website, generally in the form of lists of links organised into headings and sub-headings giving access to all the pages on the site.

Note 1: Site map links can be made up of <a> tags or <area> tags.

Note 2: the site map does not have to contain links to all the pages on the site, but the user must be able to access all the pages on the site from the site map.

Status message

A status message informs the user of a content change on the page without interrupting their main activity (there is no change of context, for example a shift of focus to the message).

A status message can inform about

  • The success or result of an action;
  • The busy state of an application;
  • The progress of a process;
  • The existence of an error.

Style sheet

The CSS language for formatting content elements (examples: page background colour, font size/colour, positioning of information on the web page, etc.). CSS styles can be external (CSS file), embedded (declared in the page header) or inline (declared via the style attribute of a tag).

Styled text

Text whose formatting is controlled by a style sheet.

Subtitles

Subtitles are in a language other than the language of the video.

Subtitles are different from captions for the deaf and hard of hearing.

Sudden change in brightness or blinking

Alternation of relative luminance which can cause seizures in some people if they are large enough in a specific frequency range.

Summary (of table)

A summary (of table) is a passage of text associated with a complex data table. It provides information about the nature and structure of the table to make it easier to use for users of assistive technologies, for example.

Note: in HTML5, the only technique that can currently be used is to insert the summary directly into the title (using the <caption> tag), masking the summary using CSS if necessary.

In previous versions of HTML, the summary could be inserted via a summary attribute on the <table> tag.

In the case of a tag with the WAI-ARIA role="table" attribute, the summary must be provided using an aria-describedby attribute and be correctly rendered (by assistive technologies).

Support service

A support service can be

  • the feedback mechanism identified in the website's accessibility statement,
  • a help desk,
  • a call centre,
  • technical support,
  • a relay service,
  • a training service.

Link contained in a <svg> element.

In the case of an SVG link (version 1.1), the "accessible name" is obtained as follows:

  • Passage of text associated with the WAI-ARIA aria-labelledby attribute;
  • Otherwise, value of the WAI-ARIA aria-label attribute;
  • Otherwise, the content of the <title> element, the direct child of the link;
  • Otherwise, the value of the xlink:title attribute;
  • Otherwise, the text content of one or more <text> elements.

However, this calculation algorithm is not yet supported by the various screen readers. To date, support is available with VoiceOver, but incomplete or deficient with JAWS and NVDA. As a result, the lowest common denominator on which it is possible to rely to provide an accessible name for the link is the <text> element.

Synchronised audio description (time-based media)

Narration added (via a sound file) to an audio track to describe important visual details that cannot be understood from the main audio track alone. The audio description must be synchronised with the time-based media by a feature of the player itself or provided by the developer, for example with JavaScript.

Note 1: the audio description of a video provides information about actions, characters, scene changes, on-screen text and other visual content.

Note 2: in a standard audio description, narration is added during pauses in the dialogue (see also extended audio description).

Note 3: when all the information in the video is already given in the audio track, no additional audio description is required.

Synchronised captions (media object)

Text of audio information (a character's words, noise that is important for understanding the action, etc.) present in a time-based medium and displayed synchronously with the flow of the multimedia object.

Note 1: to differentiate between audio sources (different characters, voice-over, etc.), it is recommended that an appropriate mechanism be used (bracketing, italics, explicit announcement such as "voice-over: ...").

Note 2: subtitling for translation (the kind="subtitles" attribute of the <track> tag in HTML5, for example) should not be confused with captioning for the deaf and hard of hearing (the kind="captions" attribute of the <track> tag in HTML5, for example). Subtitling and captioning serve different purposes. Only the presence and relevance of captions for the deaf and hard of hearing will ensure compliance.

T

Template

A template is a document format with predefined parameters. It is used to insert content edited by the author. A template has presentation, usage and technical parameters that are not visible.

A template may concern an entire page (home page template, etc.) or specific types of content (forms, images, videos, etc.)

A set of templates is a group of templates that allow different formatting of the same element. For example

  • templates for the application's home screen;
  • templates for screens containing interactive elements;
  • templates for creating a PDF.

Test image

Image used in a test, captcha or image used as a test in a quiz or game.

Example: a series of images shows a detail from a famous painting; you have to recognise the title and the painter of each painting. In this situation, it is not possible to give a relevant alternative (for example the name of the painting and/or the painter) without rendering the test unusable. In this case, the alternative must simply give the possibility of identifying the image, for example "test image 1".

Text alternative (image)

"Accessible name" rendered by assistive technologies for graphic elements such as:

  • Image (<img> tag or opening tag with a WAI-ARIA role="img" attribute);
  • Image map area (<area> tag);
  • Image type button (<input> tag with the type="image" attribute);
  • Object image (<object type="image/…"> tag);
  • Vector image (<svg> tag);
  • Bitmap image (<canvas> tag);
  • Embedded image (<embed> tag).

In the case of a graphic element, the "accessible name" is obtained in the following order:

  • Passage of text associated via the WAI-ARIA aria-labelledby attribute for the tags:
    • <img>;
    • <input type="image"> ;
    • <svg> ;
    • <object type="image/…"> ;
    • <embed type="image/…"> ;
    • <canvas> ;
    • tags with a WAI-ARIA role="img" attribute.
  • Otherwise, value of the WAI-ARIA aria-label attribute for elements:
    • <img>;
    • <area>;
    • <input type="image">;
    • <svg> ;
    • <object type="image/…">;
    • <embed type="image/…">;
    • <canvas>;
    • opening tags with a WAI-ARIA role="img" attribute.
  • Otherwise, value of the alt attribute for tags:
    • <img>;
    • <area>;
    • <input type="image"> .
  • Otherwise, the value of the title attribute for the tags:
    • <img>;
    • <input type="image"> ;
    • <object type="image/…"> ;
    • <embed type="image/…"> .

This order must be used to determine what constitutes the text alternative.

However, in the case of partial support of the algorithm for calculating the "accessible name", it is the value actually rendered by the assistive technologies used in the test environment (or "baseline") that should be considered as the text alternative.

For example:

  • In the case of the joint presence of a WAI-ARIA aria-label attribute and a WAI-ARIA aria-labelledby attribute on an <img> tag, it is the passage of text referenced by the WAI-ARIA aria-labelledby attribute that must be considered as the alternative text if the content of the passage of text is actually rendered by the assistive technologies used in the test environment;
  • In the case of the joint presence of a WAI-ARIA aria-label attribute and an alt attribute on an <img> tag, it is the value of the WAI-ARIA aria-label attribute that must be considered as the alternative text if the content of the WAI-ARIA aria-label attribute is actually rendered by the assistive technologies used in the test environment.

Reference: Accessible Name and Description Computation.

RAWeb considers three types of text alternative linked to the nature of the image:

  • For an image conveying information, the text alternative provides the information needed to understand the content it conveys;
  • For a decorative image, no text alternative should be provided;
  • For a CAPTCHA image or a test image, the text alternative only describes the nature and function of the image. The text alternative cannot provide the information conveyed by the image without rendering the associated function inoperative.

Note 1: for a CAPTCHA image, the alternative could be, for example: "Anti-spam security code" or "code to verify that you are a human" or any other alternative that allows the user to understand the nature and function of the image.

Note 2: For a group of images, for example a voting system made up of several star images, it is strongly recommended to use either the first image of the group to give a coherent alternative to the group of images (see WCAG2.1 technique G196), or a container tag with a WAI-ARIA img role and a text alternative (image). In the first case, the other images in the group are considered to be decorative images. In the second case, all the images in the group are considered to be decorative images.

Note 3: for image links, the alternative text must allow the function and destination of the link to be understood; this is covered in the links theme.

Note 4: for vector images (<svg> tag) the text alternative could also be present in a <title> or in a <text> tag whether or not the latter tag is visible, even if this is not the role assigned to this element in SVG.

Note 5: As the use of the alt attribute is the only technique fully supported by assistive technologies, it is recommended that this solution be preferred when implementing an alternative to an <img>, <area> and <input type="image"> tag.

Note 6: although the title attribute is considered to be a possible text alternative (image), its use can cause problems, in particular because an image with an absent or empty alt attribute is considered to be an image with a role="presentation" by WAI-ARIA: https://www.w3.org/TR/html-aam-1.0/#details-id-54. It is important to ensure that the assistive technologies present in the selected test environment correctly render the alternative proposed by the title attribute.

Text link

In HTML, link containing no child element of type

  • Image (<img> tag or opening tag with WAI-ARIA role="img" attribute);
  • Object image (<object> tag);
  • Bitmap image (<canvas> tag);
  • Vector image (<svg> tag).

Time stamp

The video time stamp is the time value declared in the caption file.

1
00:00:03,000 --> 00:00:06,999
The title should appear when the video reaches 3 seconds.

Time-based media (audio, video and synchronised)

  • Time-based media audio-only: sound content (Wav, Mp3...);
  • Time-based media video-only: moving or sequenced images or photos;
  • Synchronised time-based media: audio or video streams synchronised with another format to present information and/or including interactive temporal components. Time-based media can be viewed in 2 different ways:
  • Downloadable file that can be viewed with software external to the web page;
  • Content embedded in the web page which can be consulted within the web page via
    • The <video> element (e.g. a video);
    • The <audio> element (e.g. a podcast);
    • The <svg> element (for example, a vector cartoon);
    • The <canvas> element (for example, a bitmap cartoon);
    • The <bgsound> element to broadcast a background sound to the web page.

Time-based media can be broadcast in real time or offered for playback asynchronously (pre-recorded media).

Note 1: animated gifs and image animations created using JavaScript or CSS are not considered to be time-based media.

Note 2: the <bgsound> element is specific to Internet Explorer and should not be used.

Transcript (time-based media)

Textual content associated with a time-based media object using the appropriate technique (text encoded in HTML or in a text file located on the same page or available via a link). This content gives the user access (independently of viewing the multimedia object) to

  • All of what is expressed orally;
  • All the descriptive information necessary for an equivalent understanding of the action.

This textual information must be presented in the chronological order in which it appears in the time-based media.

Note: the transcript must be located outside the <object> tag.

Transformation

Process managed automatically by the editing tool. There are two types of transformation:

  • content restructuring: transformation during which the input format (e.g. HTML, XML...) is the same as the output one, the restructuring only modifies elements of the markup. For example: linearising a table, dividing a document into several pages.
  • content recoding: transformation during which the input format is different from the ouput one (e.g. HTML to XHTML, HTML to PDF). This applies in particular to editing zones that use a different syntax from that which will be used for public display.

Two-way voice communication web application

Two-way voice communication web applications are applications that allow 2 or more people to speak simultaneously. Videoconferencing web applications that allow people to speak at the same time are an example.

U

Understandable (reading order)

Understandable content is readable (the order of the elements is logical) and coherent (the reading sequence is consistent).

User interface component

A user interface component is an element with which the user can interact, for example a button, a link or an input zone. Some components can be more complex, such as a menu, a dialogue window or a tab system. Finally, a user interface component can be based on native HTML elements or developed from scratch using JavaScript and WAI-ARIA attributes. In particular, for elements with WAI-ARIA attributes corresponding to a design pattern it is recommended to consider the WAI-ARIA 1.1 Authoring Practices document when implementing them.

V

Viewing control (time-based media)

Possibility for the user to control the viewing of time-based media by means of the keyboard and any pointing device, at least. The following points must be respected:

  • List of mandatory features for controlling consultation
    • The multimedia object must always have at least the following functions: play, pause or stop;
    • If the multimedia object has sound, it must have a sound on/off function;
    • If the multimedia object has subtitles or captions that are not embedded, it must have a function for controlling the appearance / disappearance of the subtitles or captions;
    • If the multimedia object has audio description, it must have a function for controlling the appearance / disappearance of the audio description.
  • Each feature must be accessible from the keyboard, via the tab key, and by any pointing device at least.
  • Each feature must be activatable via the keyboard and by at least one pointing device.

Note: if there is no sound in a time-based medium, there is no point in adding a sound activation/deactivation function. If, however, this functionality is present and requires a text alternative to be understood by certain users, then it should be given one since the user is likely to access it and want to activate it.

Visible content

For the test 10.2.1: "Present content" means that visible content remains present when CSS is deactivated. For example, an image conveying information as a CSS background property invalidates this test because the information is no longer "present" when CSS is deactivated. On the other hand, an image conveying information as a CSS background property but accompanied by hidden text validates this test because the information is indeed "present" when CSS is deactivated.

Note: the practice of managing images as background properties of elements via CSS is formally not recommended, even if accompanied by hidden text.

Visible label

Text displayed as a visible label on the screen within a button or link.

Text displayed as a label for a form field.

This text can be text or an image containing text.

Voice-based services

In a spoken communication system (e.g. telephony), functions can be made available, for example

  • voice mail (answering machine);
  • an automatic switchboard that requires you to say a number between 1 and 4 to be redirected to a service;
  • or any other interactive voice server.

W

Website

Set of all web pages

  • Connected by web links;
  • Belonging to the same domain name (e.g. design.numerique.gouv.fr);
  • Which form a coherent whole from the user's point of view.

Special case of web pages in a sub-domain; a sub-domain can

  • Either belong to the website attached to the domain name, if the user perceives them to be consistent with the other pages of the website (for example: same structure, same navigation, etc.);
  • Or not belong to the website attached to the domain name (for example: different blogs in the sub-domain of a domain name and unrelated to each other).

When focused

Focus is the state returned by an element that receives attention following a user action. There are three ways in HTML to give focus to an element:

  • By activating the element using a pointing device (e.g. mouse);
  • By reaching the element using the tab or shift + tab key;
  • By activating the element using a keyboard shortcut (accesskey).

Some elements naturally receive the focus, for example: <a href>, <area href>, <button>, <input>, <object>, <select>, <label>, <legend>, <optgroup>, <option> and <textarea>. The behaviour of the element when focused depends on its nature; a link, for example, should be activated after the focus is set (unless a script is used). On the other hand, a form element, such as <textarea>, should allow input when focused. The elements <label> and <legend> only receive the focus when focused via the mouse pointer. For the <label> element, the expected behaviour is to transfer the focus to the element associated with it.

Note 1: the WAI-ARIA specification extends the role assigned to the tabindex attribute by defining that any HTML element can acquire the ability to receive focus by assigning it the value tabindex="0". On the other hand, no behaviour is assigned by the mere presence of tabindex. Similarly, the value tabindex="-1", when used on an element which naturally receives focus, removes the affected element from the tab plane by inhibiting its ability to signal when focused. The use of tabindex, in accordance with the WAI-ARIA specification, can validate certain tests relating to the management of tabulation focus, in particular.

Note 2: The browser's visual indication of focus must not be removed or degraded unless a focus style defined by the author is visible and sufficiently contrasting with respect to criterion 3.3.

Writing rules

The source code must comply with the following rules in accordance with the document type declaration used in the page

  • No opening or closing tags without < ou > (example of error: li>bike);
  • no closing tag with / missing (example of error: <li>bike<li>);
  • no attribute values with " or ' missing (example of error: alt="bike);
  • no multiple attribute values separated by a space without " or ' (example of error: alt=my beautiful bike);
  • no missing spaces between attributes (example: alt="bike"title="bike");
  • no missing closing tag for elements that require one (example of error: <object> without </object>).