Crafting an Inclusive Digital Experience AEM, WCAG, and SEO Best Practices

Creating an inclusive digital experience requires developers and content teams to prioritize accessibility and ensure the user experience is as engaging and enjoyable as possible. As a leading digital experience platform (DXP), Adobe Experience Manager (AEM) was developed to maximize compliance with the Web Content Accessibility Guidelines and provide a strong foundation for SEO.

This post will explore how to build an inclusive experience in AEM. However, developers and content teams can follow these tips regardless of their CMS or DXP.

Recapping Key Terms

This likely isn’t the first time you’ve heard about concepts like WCAG and SEO, but let’s recap the three key topics we'll be covering.

1. WCAG (Web Content Accessibility Guidelines) is the gold standard for ensuring web content is accessible to people with disabilities. They cover a wide range of recommendations for making websites perceivable, operable, understandable, and robust.

2. ARIA (Accessible Rich Internet Applications) attributes provide a powerful toolkit to enhance accessibility for dynamic web content and applications, offering additional semantic information to assistive technologies like screen readers. By combining WCAG compliance with the thoughtful implementation of ARIA attributes, web developers can create online experiences that cater to diverse user needs, fostering inclusivity and equal access for all.

3. SEO (Search Engine Optimization) involves optimizing your website to rank higher in search engine results pages (SERPs) organically. This includes strategies such as creating high-quality content, optimizing keywords, improving website speed and user experience, and earning backlinks from reputable sources. The goal is to increase visibility and drive organic traffic to your site.

WCAG Compliance in AEM

Alt Text for Images

Beyond adding descriptive alt text, consider providing concise and informative filenames for your images. This not only aids accessibility but also contributes to SEO, as search engines use filenames to understand image content.

Entering the AEM World

In AEM, there are a few alternatives to provide alt text. Here are some tips:

• Add a field in the component dialog so the author can put alt text directly

• Grab the alt text from asset metadata (you can also tweak your metadata for a particular asset and have a special field for different purposes)

• Take a look at the Image OOTB component. It gives good examples of how to use alt text and also a checkbox to mark an image as a Decorative Image.

Color Contrast

While adjusting color contrast, remember to consider various states of interactive elements, such as buttons and links. Ensure the color contrast remains sufficient even when these elements are in focus, active, or hover states. Also, don’t forget the tab navigation color for selection.

Tip: Sometimes, symbols are treated as content, but they are just for decorative design usage. The issue is that they may not reach enough color contrast when they aren’t needed because they are NOT meant to be content.

For example, pipes | or arrows < and > Pipes can be used as a simple border, while arrows can be an SVG. Although these examples are specific, they can be used on most sites.

Entering the AEM World

Always think of having a color switcher in any place where something could change its color. For example, a “flag” or “badge” in a component that the design said should be yellow. One approach could be to make it selectable. It’s a slight lift when doing it from scratch and provides enormous value for a future state.

Focus on Readability

Besides color, pay attention to font size and style. AEM allows you to set global styles for text. Ensure the text is legible and scalable, catering to users needing larger text for better readability.

Images, icons, and everything must have a readable size.

Also, if there is a text, it shouldn't be a “part” of an image. It needs to be authored and readable separately from the image.

Accessibility in AEM

ARIA Labels and Descriptions

Incorporate ARIA landmarks to help screen reader users navigate your page efficiently. Elements like role="navigation" for navigation bars and role="main" for the main content area provide valuable context.

The Three ARIA-Musketeers

Let me put it this way: label < description < detail

• Labels: Think of it as a name or the title of an element

  • aria-label: The label value itself

  • aria-labelledby: The HTML id of the element that contains the label of that element

• Description: Use the description when the label is insufficient to describe an element. This is often used for groups of elements

  • aria-description: The description value itself

  • aria-describedby: The HTML ID of the element that contains the description of that element

• Detail: Use description to give a screen reader additional information and better insight into what the element or section is about.

  • aria-details: The details value itself

Implementing in AEM AEM

Enable RTE ARIA Labels

1. Copy /libs/cq/xssprotection/config.xml to /apps/cq/xssprotection

2. Search for attribute <tag name="a" action="validate"> and add following code:

   <attribute name="aria-label">
           <regexp-list>
               <regexp name="anything"/>
           </regexp-list>
       </attribute>
       

3. Remember to add /apps/cq/xssprotection to filter.xml, and deploy the code.

4. Add a dialog field on every place you need an ARIA label (description and details)

This way, the author will be able to customize each ARIA. Keep that in mind (ARIA states and properties) if you need to use them extensively, and your dialog becomes a massive, uncontrollable UI interface.

RTE + Hardcoded aria-labelledby

• In your HTL code, hardcode aria-labelledby into every element you need to label

• Then, you can either create a field in the dialog or use a hidden RTE aria-label item with appropriate ID that would be referenced by the hardcoded aria-labelledby

• This could be useful in a situation when multiple fields use the same label

• The same applies to aria-describedby and aria-description

Text Alternatives for Multimedia

Provide text alternatives when embedding multimedia elements, such as videos or slideshows. This not only supports accessibility but also contributes to SEO by giving search engines more context about your content.

Interactive Element Focus

Ensure that interactive elements receive clear focus indicators. Customize the focus styles in AEM to make them noticeable and distinct, aiding users who navigate using keyboards or other assistive technologies.

SEO Best Practices in AEM

Header Tagging (H Tags)

Optimize your H tags by incorporating relevant keywords naturally. This not only improves SEO but also assists users in quickly understanding the hierarchy and structure of your content.

Hierarchy: never forget search engines love two things:

• ONE and only ONE H1 tag per page.

• With extreme respect to the hierarchy, Hs should appear in order: H1, then H2, then H3, and so on.

• Never skip a Hs level. If there is an H1 and then an H3, your site may lose some SEO points.

Meta Descriptions

Craft compelling and concise meta descriptions for each page using AEM's metadata options. Well-written meta descriptions improve SEO and serve as a preview snippet in search engine results, encouraging click-throughs.

Mobile Optimization

AEM supports responsive design, but ensuring that your website is fully optimized for mobile devices is essential. Google and other search engines prioritize mobile-friendly websites, so mobile optimization contributes significantly to SEO rankings.

One element that has a significant impact is the size of the images. Remember that cell phones are often accessed with an unstable connection (or on the move). Therefore, having different renditions (aspect-ratio images) for each viewport (desktop, tablet, mobile) significantly helps page load and the overall performance of the site on mobile, as well as having them lazy loaded.

About Renditions: In AEM, you can leverage in two ways:

• Manually configuring renditions in Assets section (aka DAM or Lightweight DAM)

• Dynamic Media has renditions and many other capabilities that directly impact performance, hence (guess what) SEO.

About Lazy-loading: AEM's built-in feature allows images to load only when they enter the user's viewport, optimizing page load times and SEO. This strategy aligns with the broader theme of balancing user experience and search engine optimization.

General Tips

User Testing

Engage in user testing with individuals with diverse abilities to gather real-world feedback on your site's accessibility. This iterative process ensures continuous improvement based on user experiences. Remember to test on various devices and browsers.

Content Relevance

Update and refresh your content regularly to keep it relevant. Search engines prefer regularly updated content, and ensuring your current information benefits SEO and user engagement.

Check your sitemap.xml generation practice, which can be done manually, automatically, or a combination of both.

Social Media Integration

Social signals can indirectly impact SEO rankings, and sharing capabilities contribute to a broader audience reach.

Regular Audits

Lastly, treat your content as a live, constantly changing, ongoing project.

Integrate AEM seamlessly with external monitoring tools like Google Search Console for continual SEO and availability health checks. Regular content updates are not just about relevance but a proactive measure against SEO staleness.

Utilize AEM’s versioning capabilities of pages, assets, and templates, which will help you track and manage content revisions efficiently.

Recommended Extensions:

Along with these best practices, developers can also implement some extensions to help make these processes easier.

• WAVE

• WhatFont

• ColorPick Eyedropper

• HeadingsMap

• Lighthouse

Wrapping Up

Creating an inclusive digital experience is not just a technical obligation but a commitment to broader social responsibility. By leveraging AEM, developers and content teams can create accessible content that adheres to WCAG standards and ensures all users can interact with the right content assets. Additionally, implementing SEO best practices makes content discoverable so that enterprises can build a digital presence that is both inclusive and effective.

Setting up your business for success with AEM requires that you follow best practices and create a strong foundation with proper implementation and correct workflow setup. Oshyn is an Adobe partner and has a staff of AEM experts who can help you get the most out of your investment.

Learn more about the right AEM content setup in our ebook: Achieving Content Governance with AEM Page Publication Workflows.