As the Classic UI was deprecated in AEM 6.4 the content on this page has not been updated for WCAG 2.1.
See the following pages for details related to AEM and WCAG 2.1:
WCAG 2.0 consists of a set of technology independent guidelines and success criteria to help make web content accessible to, and usable by, persons with disabilities.
These are graded according to three conformance levels: Level A (lowest), Level AA and Level AAA (highest). Briefly, the levels are defined as follows:
When creating your site, you should determine the overall level to which you would like your site to conform.
As it is not possible to satisfy all Level AAA Success Criteria for certain types of content, it is not recommended for this level of conformance to be required as a general policy.
Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
Information on a web page can be provided in many different non-text formats, such as pictures, videos, animations, charts and graphs. People who are blind or have severe visual impairments are unable to see non-text content, but they can access text content by having it read to them by a screen reader or presented in tactile form by a Braille display device. So, by providing text alternatives to content in graphical format, people who cannot see the graphical content can access an equivalent version of the information the content provides.
A useful additional benefit is that text alternatives enable non-text content to be indexed by search engine technology.
For static graphics, the basic requirement is to provide an equivalent text alternative for the graphic. This can be done in the Alt Text field:
Some out-of-the-box components, such as Carousel and Slideshow do not provide a means for adding alternate text descriptions to images. When implementing versions of these for your AEM instance, your development team will need to configure such components to support the
alt attribute so that authors can add it to the content (see Adding Support for Additional HTML Elements and Attributes).
The Alt Text field is available in the Advanced image properties tab of the Image component dialog:
AEM adds an Alt Text to your images by default. For the classic UI there are two different scenarios for how the default attribute is created (though the default value may not be sufficient as an alternative and will most likely need to be edited in the Advanced image properties tab):
An image is uploaded from the user’s hard drive. If you add an image component to a page and then choose an image from your hard drive, or another source, the default value for Alt Text is
file. This must be changed in the Advanced image properties tab. Again, this value is not displayed in the Alt Text field, but when the value is changed, the new value is displayed in the field.
An image is added from the digital asset repository. If you drag an image from the digital asset repository to a web page, then the Title and Alt Text values for that image will be taken from the metadata for that image.
In both of the above scenarios, the default Alt Text value is not visible in the Advanced Image Properties tab. To change the default value, simply enter a new value in the Alt Text field.
If your image is purely decorative (see Creating Good Text Alternatives), you can enter a space in the Alt Text field using the spacebar. This will create an empty
alt attribute, which will prompt a screen reader to ignore the image.
There are various forms of non-text content, so the value of the text alternative depends on the role the graphic plays in the web page. Some general rules of thumb to follow include:
Text alternatives should be succinct yet clearly capture the essential information provided by the non-text content.
Overly long descriptions (over 100 characters) should be avoided. If a text alternative requires more detail:
Alternative text should not replicate content provided in text form nearby on the same page. Remember that many images are illustrations of points already covered in the text of a page, so a detailed text alternative may already exist.
If the non-text content is a link to another page or document and there is no other text forming part of the same link, then the alternative text for the image must indicate the destination of the link, not describe the image.
If the non-text content is contained in a button element and there is no text forming part of the same button, then the alternative text of the image must indicate the functionality of the button, not describe the image.
It is perfectly acceptable for an image to be given an empty (null) alternative text, but only if the image has no alternative text (for example, it is a purely decorative graphic) or if the equivalent text already exists in the page text.
The W3C draft: HTML5 Techniques for providing useful text alternatives has more details and examples of appropriate alternative text provision for images of different types.
Specific types of non-text content that require text alternatives might include:
These are images of people, objects or places. Think about the role of the photo in the page; an appropriate text equivalent is likely to be Photo of [object], but may be dependent on the surrounding text.
These are small pictograms (graphics) conveying specific information. They must be consistently used across a page and site. All instances of the icon on a page or site should have the same short and succinct text alternative, unless doing so results in unnecessary duplication of adjacent text.
Charts and graphs:
These typically represent numerical data. So one option for providing a text alternative might be to include a brief summary of the main trends shown in the chart or graphic. If necessary, also provide a more detailed description in text using the Description field in the Advanced image properties tab. Additionally, you could provide the source data in tabular form elsewhere in the page or site.
To provide an alternative for this example chart, add a concise
alt text to the image itself and then follow the image with a full text alternative.
<p><img src="figure1.gif" alt="Figure 1" ></p> <p> Figure 1. Distribution of Articles by Journal Category. Pie chart: Language=68%, Education=14% and Science=18%.</p>
The above snippet is only used to illustrate the order. It is recommended to use the Image component (rather than the
img src reference used above.
In AEM this can be done using a combination of the Alt Text and Description fields in the image’s configuration dialog - as in How to Meet - Non-text Content (1.1.1).
Maps, diagrams, flowcharts:
For graphics providing spatial data (for example. to support describing relationships between objects or a process), ensure that the key message is provided in text format. For maps, providing a full text equivalent is likely to be impractical, but if the map is provided as a way of helping people find their way to a particular location, then the map image’s alternative text can briefly indicate Map of X, then provide directions to that location in text elsewhere in the page or through the Description field in the Advanced tab of the Image component.
A CAPTCHA is a Completely Automated Public Turing test to tell Computers and Humans Apart. It is a security check used on web pages to distinguish humans from malicious software, but which can cause accessibility barriers. They are images that require users to describe what they see in order to pass a security test. Providing a text alternative for the image is obviously not possible, so instead you will need to consider alternative non-graphic solutions.
The W3C provides a number of suggestions, such as:Each of these approaches has their own merits and drawbacks.
These are achieved using Cascading Style Sheets (CSS) rather than in HTML. This means it is not possible to specify an alternative text value. Therefore background images should not provide important textual information - if they do, this information must also be provided in the page’s text.
However, it is important that an alternative background is displayed when the image cannot be displayed.
There should be an appropriate level of contrast between the background and the foreground text; this is discussed in more detail in Contrast (Minimum) (1.4.3).
This deals with web content that is time-based. This covers content that the user can play (such as video, audio, and animated content) and may be pre-recorded or a live stream.
Success Criterion 1.2.1
Audio-only and Video-only (Prerecorded): For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such:
Accessibility problems for video and audio may be experienced by:
Video or audio may also be unavailable to people using browsers or devices that do not support the playing of content in specific media formats, such as Adobe Flash.
Providing this information in a different format, such as text (or audio for video without audio) can make it accessible for people unable to access the original content.
If the content is pre-recorded audio with no video (such as a podcast):
Provide a link immediately before or after the content to a text-transcript of the audio content.
The transcript should be an HTML page with a text equivalent of all spoken and important non-spoken content, plus an indication of who is speaking, a description of the setting, vocal expressions and a description of any other significant audio.
If the content is an animation or pre-recorded video with no audio:
If the audio or video content is provided as an alternative to content that already exists in another format on a web page, there is no need to follow the above requirements. For example, if a video illustrates a list of text instructions, then this video does not require an alternative as the text instructions already act as an alternative to the video.
Inserting multimedia, specifically Flash content, into your AEM web pages is similar to inserting an image. However, as multimedia content is much more than a still image, there are a variety of different settings and options for controlling how the multimedia is played.
When you use multimedia with informational content, you must also create links to alternatives. For example, to include a text transcript, create an HTML page to display the transcript and then add a link next to or underneath the audio content.
People who are deaf or hard of hearing will be unable or have great difficulty accessing audio content. Captions are text equivalents for spoken and non-spoken audio, shown on screen at the appropriate time during the video. They allow people who cannot hear the audio to understand what is happening.
Captions are not required where suitable text or non-text equivalents (that provide directly equivalent information) are available on the same page as the video or animation.
Captions can be either:
Use closed captioning wherever possible, as this gives users the choice over whether or not to view captions.
For closed captions, you will need to create and provide a synchronized caption file in an appropriate format (such as SMIL) alongside the video file (details on how to do this are beyond the scope of this guide, but we have provided links to some tutorials under More Information - Captions (Pre-Recorded) (1.2.2)). Make sure you provide a note to let users know that captions are available for the video.
If you must use open captions, embed the text into the video track. This can be achieved using video editing applications that allow the overlaying of titles onto the video.
People who are blind or visually impaired will experience accessibility barriers if the information in a video or animation is only provided visually, or if the soundtrack does not provide sufficient information to allow understanding of what is happening visually.
There are two approaches that can be adopted to meet this success criterion. Either is acceptable:
Include additional audio description for the video content. This can be achieved in one of three ways:
During pauses in the existing dialogue, provide information about changes in the scene that are not presented as part of the existing audio track;
Provide an new, additional and optional audio track containing the original soundtrack, but also including extra audio information about changes in the scene.
Create a second version of the video content to allow for extended audio descriptions. This reduces the difficulties associated with providing detailed audio descriptions within the gaps between existing dialogue, by temporarily pausing the audio and video at appropriate points. As a result, a much longer audio description can be given, before the action starts again. As in the previous example, this is best provided as an optional extra audio track in order to prevent disruption to users who do not need the additional description.
Provide a text transcript that is a suitable text equivalent of the audio and visual elements of the video or animation. This should include, where appropriate, an indication as to who is speaking, a description of the setting, vocal expressions. Depending on its length, you can place the transcript on the same page as the video or animation, or on a separate page; if you choose the latter option, provide a link to the transcript adjacent to the video or animation.
Exact details of how to create audio-described video are beyond the scope of this guide. Creating videos and audio descriptions can be time consuming, but other Adobe products can help achieve these tasks. If you create content in Adobe Flash Professional, you should also create a script to prompt the user to download the appropriate plug-in, and provide a text alternative through the
This success criterion is identical to Captions (Pre-Recorded) in that it addresses accessibility barriers experienced by people who are deaf or hearing-impaired, except that this success criterion deals with live presentations such as webcasts.
Follow the guidance provided for Captions (Pre-Recorded) above. However, due to the live nature of the media, caption provision has to be created as quickly as possible and in response to what is happening. Therefore, you should consider using real time captioning or speech-to-text tools.
Detailed instructions are beyond the scope of this document, but the following resources provide helpful information:
This success criterion is identical to Audio Description or Media Alternative (Pre-Recorded), except that authors must provide a much more detailed audio description to conform to Level AA.
Follow the guidance provided for Audio Description or Media Alternative (Pre-Recorded).
This guideline covers the requirements necessary to support people who:
may not be able to access information as presented by an author in a *standard *two dimensional, multi-column, colored web page layout
may use an audio-only, or alternative visual display such as large text or high contrast.
Many assistive technologies used by people with disabilities rely on structural information in order to effectively display or output content. This structural information can take the form of page headings, table row and column headings and list types. For example, a screen reader could allow a user to navigate through a page from heading to heading. However, when page content only appears to have structure through visual styling, rather than the underlying HTML, then there is no structural information available to assistive technologies, limiting their ability to support easier browsing.
This success criterion exists to make sure that such structural information is provided through HTML, so that browsers and assistive technologies can access and take advantage of the information.
AEM makes it easy to construct web pages using the appropriate HTML elements. Open your page content in the RTE (a Text component), and use the Format menu to specify the appropriate structural element (for example paragraph, heading, etc.).
The following image shows text that has been styled as paragraph text; the source code view being used shows it has the correct opening and closing <p> and </p> tags.
You can make sure your web pages are given the appropriate structure by:
As long as you have the accessibility features of the RTE enabled (see AEM and Accessibility), AEM offers 3 levels of page heading. You can use these to identify sections and subsections of content. Heading 1 is the highest level of heading, Heading 3 the lowest. The system administrator can configure the system to allow the use of more heading levels.
The following image demonstrates an example of the different types of headings.
Use the <strong> or <em> element to indicate emphasis. Do not use headings to highlight text within paragraphs.
RTE in a standard AEM installation is set up to use:
They are effectively the same, but <strong> and <em> are preferable as they are semantically correct html. Your development team can configure the RTE to use <strong> and <em> (instead of <b> and <i>) when developing your project instance.
Use lists: You can use HTML to specify three different types of lists:
<ul> element is used for unordered lists (bulleted) lists. Individual list items are identified using the
in the RTE, use the Bulleted List icon.
<ol> element is used for numbered lists. Individual list items are identified using the
In the RTE, use the Numbered List icon.
If you want to change existing content into a specific list type, highlight the appropriate text and select the appropriate list type. As in the earlier example showing how paragraph text is entered, the appropriate list elements are automatically added to your HTML, but you can view this in source edit view.
<dl> is not supported by the RTE.
Tables of data must be identified using HTML table elements:
<tr>element for each row of the table
<th>element for each row and column heading
<td>element for every data cell
Tables should be realized with the Table component. Although tables can be created in the Text component, this is not recommended.
Additionally, accessible tables make use of the following elements and attributes:
<caption>element is used to provide a visible caption for the table. Captions by default appear centred above the table, but can be positioned appropriately using CSS. The caption is programmatically associated with the table, thus it is a useful method for providing an introduction to content.
<h3 class="summary">element assists non-sighted users to more easily understand the information presented within a table, by providing a synopsis of what a sighted user can see. This is particularly useful where complex or unconventional table layouts are used (this attribute is not displayed in the browser, it is only read out to assistive technologies).
scopeattribute of the
<th>element is used to indicate whether a cell represents a header for a particular row, or for a particular column. A similar approach is to use the header and id attributes in complex tables, where data cells may be associated with one or more headers.
By default, these elements and attributes are not directly available, though it is possible for the system administrator to add support for these values in the Table properties dialog box (see Adding Support for Additional HTML Elements and Attributes).
When adding a Table you can configure Table properties using the dialog.
You can then use the Cell properties to choose whether the cell is a data or header cell and, if a header cell, whether it relates to a row or column or both:
Complex Data Tables:
In some cases, where there are complex tables with two or more levels of headers, then the basic Table Properties may not be enough to provide all the structural information necessary. For these kinds of complex tables, direct relationships need to be created between the headers and their related cells using the header and id attributes. For example, in the table below headers and ids are matched to make a programmatic association for assistive technology users.
The id attribute is not available in an out-of-the-box installation. It can be enabled by configuring HTML rules and the serializer in the RTE.
Tables should be realized with the Table component. Although tables can be created in the Text component, this is not recommended.
<table> <tr> <th rowspan="2" id="h">Homework</th> <th colspan="3" id="e">Exams</th> <th colspan="3" id="p">Projects</th> </tr> <tr> <th id="e1" headers="e">1</th> <th id="e2" headers="e">2</th> <th id="ef" headers="e">Final</th> <th id="p1" headers="p">1</th> <th id="p2" headers="p">2</th> <th id="pf" headers="p">Final</th> </tr> <tr> <td headers="h">15%</td> <td headers="e e1">15%</td> <td headers="e e2">15%</td> <td headers="e ef">20%</td> <td headers="p p1">10%</td> <td headers="p p2">10%</td> <td headers="p pf">15%</td> </tr> </table>
To achieve this in AEM you must add the markup directly using the source edit mode.
This functionality is not immediately available in a standard installation. It requires configuration of the RTE; HTML rules and serializer.
Designers often focus on visual design features, such as color, shape, text style, or a piece of content’s absolute or relative position when presenting information. These can be very powerful design techniques in conveying information, but people who are blind or visually impaired may be unable to access information that requires visual identification of attributes such as position, color or shape.
Similarly, information that requires distinguishing between different sounds (e.g. male or female spoken content) will present accessibility barriers to people with hearing impairment, if it is not reflected in any text alternative for the audio content.
For requirements related to alternatives to color, refer to Use of Color.
Make sure that any information that relies on visual characteristics of page content is also presented in an alternative format.
The use of descriptive terms will be acceptable if they’re understood to have meaning in a non-visual context. For example, using above and below would generally be acceptable, as they respectively imply content before and after a particular item of content; this would still make sense when the content is spoken aloud.
This success criterion addresses color perception specifically. Other forms of perception are covered in Adaptable (1.3); including programmatic access to color and other visual presentation coding.
Color is an obviously effective way of enhancing the aesthetic appeal of web pages and is also useful in conveying information. However, there is a range of visual impairments, from blindness to color vision deficiency, which mean that some people are unable to distinguish between certain colors. This makes color-coding an unreliable way of providing information.
For example, someone with red-green color vision deficiency will be unable to distinguish between shades of green and shades of red. They may see both colors as a third color (for example, brown), in which case they will be unable to distinguish between red, green and brown.
Additionally, color cannot be perceived by people using text-only browsers, monochrome display devices or viewing a black-and-white printout of the page.
Wherever color is used to convey information, make sure that the information is available without the need to see the color.
For example, make sure that information provided by color is also provided explicitly in text. The illustration below shows how color and text both indicate seating availability for a performance:
Tuesday March 16th
Wednesday March 17th
Thursday March 18th
If color is used as a cue to provide information, you should provide an additional visual cue, such as changing the style (e.g. bold, italics) or font. This helps people with low vision or who have color vision deficiency to identify the information. Howver, it cannot be relied on entirely, as it will not help people who cannot see the page at all.
Success Criterion 1.4.3
Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
People with certain visual impairments may be unable to distinguish between certain low-contrast color pairs. Accessibility problems may occur for these people if either:
Text used purely for decoration purposes is excluded from this success criterion.
Make sure that the text contrasts sufficiently with its background. Contrast ratios depend on the size and style of the text in question:
To check contrast ratios, use a color contrast tool, such as the Paciello Group Color Contrast Analyser or the WebAIM color contrast checker. These tools allow you to check pairs of colors and report on any contrast problems.
Alternatively, if you are less concerned about specifying the appearance of your page, you can choose not to specify background and foreground text colors. No contrast checking is required, as the user’s browser will determine the colors of the text and background.
If it is not possible to meet the recommended contrast levels, you will need to provide a link to an alternative, equivalent version of the page (which has no color contrast issues), or allow the user to adjust the contrast of the page color scheme to their own requirements.
Success Criterion 1.4.5
Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:
Logotypes (text that is part of a logo or brand name) are considered essential.
Images of text are often used when a particular style of text is preferred; for example, a logotype or if text has been generated from another source (e.g. a scan of a paper document). However, compared to text presented in HTML and styled using CSS, images of text lack the flexibility to change size or appearance that might be necessary for people with visual impairments or reading difficulties.
If images of text must be used, use CSS to replace the images of text with equivalent text in HTML so that the text is available in a customisable way. For an example on how this can be achieved, refer to C30: Using CSS to replace text with images of text and providing user interface controls to switch.
Success Criterion 2.2.2
Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, the following are true:
Points to note are:
Certain users may find content that moves is distracting and makes it difficult to concentrate on other parts of the page. Additionally, such content may prove difficult to read for people who have trouble keeping up with moving text.
Depending on the nature of the content, you can apply one or more of the following suggestions when creating web pages containing moving, flashing or blinking content:
Since any content that does not meet this success criterion can interfere with a user’s ability to use the whole page, all content on the web page (whether it is used to meet other success criteria or not) must meet this success criterion. See Conformance Requirement 5: Non-Interference.
In certain cases, flashing content can cause photosensitive seizures. This success criterion allows such users to access and experience all content without worrying about flashing content.
You should take steps to make sure the following techniques are applied:
This success criterion helps everyone, regardless of any particular impairment, to quickly identify the content of a web page without reading the page in full. This is particularly useful where several web pages are opened in browser tabs, as the page title is shown in the tab and therefore can be located quickly.
When a new HTML page is created in AEM, you can specify the page title. Make sure that the title adequately describes the content of the page, so that visitors can quickly identify whether or not the content is actually relevant to their needs.
You can also edit the page title when editing a page, which is accessible by Sidekick - Page tab - Page Properties…
For all users, regardless of impairment, clearly indicating the direction of a link through appropriate link text is vital. This helps users decide whether or not they actually want to follow a link. For sighted users, meaningful link text is extremely useful where there are several links on a page (particularly if the page is text-heavy), as meaningful link text provides a clearer indication of the functionality of the target page. While users of assistive technologies, which can generate a list of all the links on a single page, can more easily understand the link text out of context.
Above all, make sure that the purpose of a link is clearly described within the text of the link.
Links should be phrased consistently across pages, especially for navigation bars. For example, if a link to a specific page is named Publications on one page, use that text on other pages to ensure consistency.
However, at the time of writing, there are some issues surrounding the use of titles:
So, while the title attribute can be used to provide extra context to a link, be aware of its limitations and do not use it as an alternative to appropriate link text.
Where the link is made up of an image, make sure that the alternative text for the image describes the destination of the link. For example, if an image of a bookshelf is set as a link to a person’s publications, the alternative text should read John Smith’s publications and not Bookshelf.
Alternatively, if the link anchor contains text that describes the purpose of the link in addition to the image element (and thus the text appears alongside the image), use an empty alt attribute for the image:
<a href="publications.html"> <img src = "bookshelf.jpg" alt = "" /> John Smith’s publications </a>
The above snippet is an illustration, it is recommended to use the Image component.
While it’s advisable to provide link text that identifies the purpose of the link without needing additional context, it is recognized that this is not always possible. Context free links can be used in the following cases, HTML examples of which can be found in How to Meet Success Criterion 2.4.4.
In some cases, where there are several links on a page (each of which provides the direction of a link in complex, but necessary detail), it can be appropriate to provide an alternative version of the web page that displays the exact same content but where the link text is not as detailed.
Alternatively, scripts can be used so that a minimal amount of text is provided within the link itself, but on activating an appropriate control positioned towards the top of the page, the link text is expanded into further detail. A similar approach is to use CSS to hide the full link from sighted users, but still output it in full to screen reader users. This falls outside the scope of this document, but more information on how this can be achieved can be found in the More Information - Link Purpose (In Context) (2.4.4) section.
The purpose of this success criterion is to make sure that text and other linguistic content is rendered correctly. For screen reader users, this ensures that the content is pronounced correctly, while visual browsers are more likely to display certain character sets correctly.
To meet this success criterion, the default language of a web page can be identified using the
lang attribute within the
<html> element at the top of the page. For example:
If a page is written in British English, the
<html> element should read:
<html lang = “en-gb”>
Whereas a page to be rendered as US English should adopt the following standard:
<html lang = “en-us”>
In AEM, the default language of your page is set when creating the page, but may also be changed when editing a page, which is accessible by Sidekick - Page tab - Page Properties… - Advanced tab.
The purpose of this success criterion is similar to the success criterion Language of Page, except that it applies to web pages containing content in multiple languages on a single page (for example, because of quotations or uncommon loan words).
Pages applying this success criterion allow:
lang attribute can be used to identify changes in the language of content. For example, a quotation in German (ISO 639-1 code “de”) can be shown as follows:
<blockquote cite = "John F. Kennedy" lang = "de"> <p>Ich bin ein Berliner</p> </blockquote>
Blockquotes are not supported in an out-of-the-box instance. A custom component could be developed to support the feature.
Similarly, the browser can render an uncommon loan word or phrase correctly if the
span element is used as follows:
<p>The only French phrase I know is <span lang = “fr”>je ne sais quoi</span>.</p>
It is not necessary to follow this success criterion when including names or cities in different languages, or when using loan words or phrases that have become commonplace in the default language (such as schadenfreude in English).
To add the span element, with an appropriate language, you can manually edit your HTML markup in the source edit mode of the RTE so that it reads as above. Alternatively the
lang attribute can be included in the RTE by a system administrator (see Adding Support for Additional HTML Elements and Attributes).
Providing instructions to help people complete forms is a fundamental part of good practice in interface usability. Doing this is particularly helpful for people with visual or cognitive impairments who might otherwise have difficulty understanding the layout of a form and the sort of data to be provided in a particular form field.
In AEM a default label is added when you add a form component, such as a Text Field, to the page. This default title is dependent on the component type, You can add your own title in the Title and Text tab of the edit dialog for that field. It is important to ensure that labels help users to understand the data associated with each form component.
This Title field must be used for field elements as it provides a label that is available to assistive technology. Simply writing a label in text beside the field is not sufficient.
For some form components it is also possible to visually hide labels using the Hide Title checkbox. Labels hidden in this way are still available to assistive technology, but not displayed on the screen. While this can be a good approach in some situations it is usually best to include a visual label wherever possible, as some users may be looking at a very small section of the screen (one field at a time) and need the labels to identify the field correctly.
Where image buttons are used (for example, the Image Button component) the Title field in the Title and Text tab of the edit dialog actually provides the alt text for the image, rather than the label. So, in the example below, the image with the text
Submit has alt text of
Submit, added using the Title field in the edit dialog.
Where there is a group of related controls, such as Radio Group, a title may be needed for the group, as well as individual controls. When adding a set of radio buttons in AEM, the Title field provides this group title, while individual titles are specified as the radio buttons (Items) are created.
However, there is no programmatic association between the group title and the radio buttons themselves. Template editors would need to wrap the title in the necessary
legend tags to create this association and this can only be done by editing the page source code. Alternatively, a system administrator can add support for these elements so that they appear in the Field Properties dialog (see Adding Support for Additional HTML Elements and Attributes).
If data is to be entered in a specific format, make this clear in the label text. For example, if a date has to be entered in the
DD-MM-YYYY format, specifically indicate this as part of the label. This means that when screen reader users encounter the field, the label is automatically announced, along with the additional information about format.
If input for a form field is mandatory, make this clear by using the word required as part of the label. AEM adds an asterisk when a field is required, but it would be ideal to include the word
requiredin the label itself (in the Title field in the edit dialog).
The positioning of labels is also important as it helps them to locate appropriate fields. This is of particular importance when the user is faced with a complex form. Follow the convention below:
Checkboxes or radio buttons:
Labels are positioned immediately to the right of the field.
All other form components (e.g. text boxes, combo boxes):
Labels are positioned either immediately above or immediately to the left of the field.
In simple forms with very limited functionality, appropriately labelling a
Submit button can act as a label for the adjacent field (for example
Search). This is useful in situations when finding space for the label text might be difficult.