Adding Accessibility Logic to Clarity's Fragments

Digital accessibility is crucial in web design, as it ensures all users, including those with assistive technology needs, can access and interact with your solution. During initial development, Clarity enabled Liferay's out-of-the-box accessibility menu. However, they now want to extend their commitment to accessibility across all custom web elements and business logic.

In this article, you'll modify one of Clarity's custom fragments to improve accessibility.

Exercise: Adding ARIA Attributes

Here, you'll add ARIA attributes to Clarity's the Advanced File Uploader fragment to ensure accessibility for users with assistive technology.

1. Open the Site Menu (), expand Design, and select Fragments.

2. Under Fragment Sets, click Clarity Components.

3. Click the Advanced File Uploader form fragment to start editing it.

4. In the HTML window, locate this <span> element:

   <span class="form-control ml-1" id="${fragmentEntryLinkNamespace}-file-chosen">No file chosen</span>
   

   Copy

5. Replace the <span> element with this code:

   <span class="form-control ml-1" id="${fragmentEntryLinkNamespace}-file-chosen" aria-live="polite">No file chosen</span>
   

   Copy

   This adds the aria-live=”polite” attribute, which ensures screen readers announce changes to this element (e.g., when the user selects a file) without interrupting the speech queue of previous updates.

6. Locate this <input> element:

   <input accept="${(input.attributes.allowedFileExtensions?has_content)?then(input.attributes.allowedFileExtensions, '*')}" aria-describedby="${fragmentEntryLinkNamespace}-file-upload-input" aria-labelledby="${fragmentEntryLinkNamespace}-file-upload-input-label" class="file-upload-input" formenctype="multipart/form-data" id="${fragmentEntryLinkNamespace}-file-upload-input" name="file-upload-input" ${input.required?then('required', '' )} type="file" value="${input.value}" />
   

   Copy

   Since the upload button and "No file chosen" span are interactive form elements, you can hide them from accessibility tools.

7. Replace the <input> element with this code:

   <input accept="${(input.attributes.allowedFileExtensions?has_content)?then(input.attributes.allowedFileExtensions, '*')}" aria-describedby="${fragmentEntryLinkNamespace}-file-upload-input" aria-labelledby="${fragmentEntryLinkNamespace}-file-upload-input-label" class="file-upload-input" formenctype="multipart/form-data" id="${fragmentEntryLinkNamespace}-file-upload-input" name="file-upload-input" ${input.required?then('required', '' )} type="file" value="${input.value}" tabIndex="-1" aria-hidden="true"/>
   

   Copy

   This adds the aria-hidden="true" and tabIndex="-1" attributes, hiding the <input> element from screen readers and excluding it from keyboard tab navigation.

8. Click Publish.

9. Propagate the fragment's changes to all uses.
   Now you can test the fragment using your system's accessibility tools.

   NOTE
   Typically, any screen reader software will work. Here are some examples for each OS:

   • Narrator (Windows)
   • VoiceOver (Mac)
   • Orca (Linux)

10. Navigate to the Contact Us page and use a screen reader or navigate with your keyboard to verify the form's accessibility enhancements.

With this enhancement, Clarity's users can go through the Contact Us form using assistive technology.

Conclusion

Great! By integrating ARIA attributes into Clarity's Advanced File Uploader fragment, you've taken a step towards creating a more inclusive user experience. Specifically, it makes Clarity's forms more accessible to users with assistive technologies.

Next, you'll review what you've learned in this module.