Configurable accessibility features

1. Add a title.properties file to the $CUSTOM_DIRECTORY/src/assets/custom directory.
   This file allows you to define an alternative initial title for the login page.
2. Set the file's single attribute, title, to a meaningful value, for example:

3. title=Login

4. This title will be read by the screen reader and shown in the browser tab until the login page has finished loading. Since translations are not available during this early loading stage, ensure the configured title is understandable in all supported languages.

To create a field-specific validation error message, perform the next steps:

0. The translation keys for generic validation error messages have the following format:

1. error.validation-failed.<type>
   

2. where

3. • <type> refers to the kind of validation error, such as invalid-value or not-identical
4.  

   Info

   The translation keys for the generic validation error messages are defined in the reference .properties files.

5. For field-specific validation error messages, replace these generic keys with the following keys:

6. error.validation-failed._field.<field>._type.<type>
   

7. where

8. • <field> defines the affected field, such as username, email, or mtanNumber (phone number), and
   • <type> refers to the kind of validation error.

9. For example: error.validation-failed._field.email._type.invalid-value

10.  

    Info

    The next table shows where to find the <field> value for a specific input field.
    An overview of the available error types can be found here (second table in the section): Utility functions
11. Add a meaningful text to the key, for example “Enter a valid email address”:

12. error.validation-failed._field.email._type.invalid-value = Enter a valid email address 

13. Add your field-specific translation key/text entry to the respective language .properties file in $CUSTOM_DIRECTORY/src/assets/custom/i18n

Proceed as follows

0. To adjust the default-header.html file:
1. 1. Remove the landmark role “header” from the upper <div> element (with class iam-container), if applicable.
   2. Define the landmark by either
   3. • setting the landmark role “banner”, or
      • explicitly adding a <header> tag.
   4. Add the ARIA label aria-label=“{{#translate}}general.aria-label.header{{/translate}}” to either
   5. • the <div> element containing the “banner” landmark role, or
      • the <header> element.
   6. To define the text used by the ARIA label, add the translation key general.aria-label.header to the appropriate custom language.properties file located in $CUSTOM_DIRECTORY/src/assets/custom/i18n.

   7. Example:

   8.  

      Example

      general.aria-label.header = Top navigation bar

2. The sample code snippet below illustrates the previous instructions. Here, a <header> tag is added, containing the aria-label attribute.

3.  

   Example

   <div class="iam-container iam-header-container">
       <div class="iam-row">
           <div class="iam-col-12">
               <div id="iamLanguageSwitcher">
                   <header class="iam-header" id="header" aria-label="{{#translate}}general.aria-label.header{{/translate}}">
                       [...]                    
                   </header>
               </div>
           </div>
       </div>
   </div>
4. To adjust the default-content.html file:
5. 1. Define the landmark by either
   2. • setting the landmark role “main”, or
      • explicitly adding a <main> tag.
   3. Add the ARIA label aria-label="“{{#translate}}general.aria-label.main{{/translate}}”" to either
   4. • the <div> element containing the “main” landmark role, or
      • the <main> element.
   5. To define the text used by the ARIA label, add the translation key general.aria-label.main to the appropriate custom language.properties file located in $CUSTOM_DIRECTORY/src/assets/custom/i18n.

   6. Example:

   7.  

      Example

      general.aria-label.main = Main content area

6. The sample code snippet below illustrates the previous instructions. Here, the aria-label attribute is added to the <div> element containing the “main” landmark role.

7.  

   Example

   <div class="iam-container iam-content-container">
       <div class="iam-row">
           <div id="iamContentTargetContainer" class="iam-col-12" role="main" aria-label="{{#translate}}general.aria-label.main{{/translate}}"></div>
       </div>
   </div>
   
8. To adjust the default-footer.html file:
9. 1. Remove the landmark role “footer” from the upper <div> element (with class iam-container), if applicable.
   2. Define the landmark by either
   3. • setting the landmark role “content-info”, or
      • explicitly adding a <footer> tag.
   4. Add the ARIA label aria-label=“{{#translate}}general.aria-label.footer{{/translate}}” to either
   5. • the <div> element containing the “content-info” landmark role, or
      • the <footer> element.
   6. To define the text used by the ARIA label, add the translation key general.aria-label.footer to the appropriate custom language.properties file located in $CUSTOM_DIRECTORY/src/assets/custom/i18n.

   7. Example:

   8.  

      Example

      general.aria-label.footer = Bottom navigation bar

10. The sample code snippet below illustrates the previous instructions. Here, a <footer> tag is added, containing the aria-label attribute.

11.  

    Example

    <div class="iam-container iam-footer-container">
        <div class="iam-row">
            <div class="iam-col-12">
                <footer class="iam-footer" id="footer" aria-label="{{#translate}}general.aria-label.footer{{/translate}}">
                    [...]
                </footer>
            </div>
        </div>
    </div>