350

Adobe Experience Manager website accessibility enhancement in just 2 minutes!

By: Skynet Technologies USA LLC
Sep 11, 23
Sep 18, 23
adobe experience manager web accessibility widget

The internet landscape is changing. For website owners, it is essential to deliver accessible and seamless user experience by ensuring all visitors including people with hearing or vision impairments, motor impaired, color blind, dyslexia, cognitive & learning impairments, seizure and epileptic, and ADHD problems; can see, understand, navigate, and easily use your Adobe Experience Manager website conveniently!

Using web accessibility widget is a quick, and cost-effective way to kick-start your efforts into improving website accessibility.

Adobe Experience Manager All in One Accessibility - a quick website accessibility improvements widget; based on AI and assistive technology. It allows users to select available accessibility features as per their needs and peruse the content. It improves website accessibility for the standards including ADA, WCAG 2.1, Section 508, Australian DDA, European EAA EN 301 549, UK Equality Act (EA), Israeli Standard 5568, California Unruh, Ontario AODA, Canada ACA, German BITV, and France RGAA!

Step wise instruction, How to enable 10 days All in One Accessibility widget trial on your Adobe experience manager website?

  • Click on this URL https://www.skynettechnologies.com/all-in-one-accessibility. Select “START FREE TRIAL” button as shown in the following screenshot.

    website wcag accessibility
  • Fill out the form with all the details.

    web wcag accessibility widget free trial
  • Select the plan based on your requirements and click on “Continue” for the next step.

    website ada accessibility widget
  • Fill out the following payment details and submit it. You will be auto-charged after 10 days if you do not cancel the free trial subscription plan.

    website ada wcag widget
  • Once the signup is completed you would receive an email notification with widget integration & dashboard access details.

    website-ada-accessibility-improvements

  • From the dashboard, click on the “Widget Settings” to change the widget icon, size, color, and position based on your website’s look and feel.

    ada wcag accessibility integration

Explore the following steps to integrate All in One Accessibility widget as a part of Adobe Experience Manager (AEM) website:

Create a Data Element for All in One Accessibility Widget.

  • In the left navigation, click Data Elements.

  • Click the Create New Data Element button:

    adobe experience manager website accessibility remediation
  • Name the data element, e.g. All in One Accessibility.

  • Use the JavaScript Variable Data Element type to point to a value in your sample page’s data layer: digitalData.page.pageInfo.AIOA

  • Check the boxes for Force lowercase value and Clean text to standardize the case and remove extraneous spaces.

  • Leave None as the Storage Duration setting since this value will typically be different on every page.

  • Click the Save button to save the data element.

    adobe experience manager wcag web accessibility

Create a Rule.

  • In the left navigation, click Rules.

  • Click the Create New Rule button:

    adobe experience manager ada website accessibility
  • Name the Rule All Pages - Library Loaded. This naming convention indicates where and when the rule will fire, making it easier to identify and reuse as your tag property matures.

  • Under Events, click Add. The Event tells tags when the rule should fire and can be many things, including a page load, a click, a custom JavaScript event, etc.

    adobe experience manager all in accessibility
    1. As the Event Type, select Library Loaded (Page Top). Note that when you select the Event Type, tags pre-populate a name for the event using your selection.

    2. Click the Keep Changes button.

      adobe experience manager accessible website design
  • Since this rule should fire on all pages, leave Conditions blank. If you open the Conditions modal, you will see that conditions can add both restrictions and exclusions based on a large variety of options, including URLs, data element values, date ranges, and more.

  • Under Actions, click Add.

  • Select Action Type > Custom Code, which at this point is the only option. Later in the tutorial, as you add extensions, more options will become available.

  • Select  Open Editor to open the code editor

    accessible adobe experience manager website design
  • Add All in One Accessibility Widget Custom Code in Edit Code.

  • Save the code editor.

    ada accessible adobe experience manager website
  • On the Action configuration screen click Keep Changes.

  • Click Save to save the rule.

    On the Rules page, you should see your new rule:

    adobe experience manager wcag website accessibility

Save Your Changes to a Library.

After configuring a collection of extensions, data elements, and rules in the Data Collection interface, you need to package these capabilities and logic into a set of JavaScript codes that you can deploy on your website so that marketing tags will fire when visitors come to the site. A library is a set of JavaScript code that will do this.

In an earlier lesson, you implemented the embed code of your development environment on the sample page. When you loaded the sample page a 404 error was returned for the embed code URL because a tag library had not been built yet and assigned to the environment. Now you will put your new data element and rule in a library so that your sample page can do something.

To add and build a library.

  • In the left navigation, click Publishing Flow.

  • Click Add New Library.

    adobe experience manager ada website accessibility
  • Name the Library, e.g. Initial Setup.

  • Select Environment > Development.

  • Click Add All Changed Resources.

    adobe experience manager ada wcag accessibility
  • Note that after clicking Add All Changed Resources tags summarize the changes you just made.

  • Click Save & Build for Development.

    adobe experience manager web wcag accessibility
  • After a few moments, the status dot will turn green indicating the library was successfully built.

    adobe experience manager accessible web design

Reach out if you need any help with the installation or technical assistance! We’d love to help!

Report a problem

Skynet technologies is proud Adobe Bronze Solution Partner , W3C(World Wide Web Consortium) and IAAP (International Assoication of Accessibility Professionals) which help us to be a part of the global accessibility community and stay up to date with compliance guidelines.

The businesses, large enterprises, Federal and state governments, educational institutions and universities who are considering remediating websites with full ADA WCAG 2.1 compliance; we provide full website accessibility remediation solution including audit, consulting, remediation, regular maintenance, monitoring, training, and support.

If you are looking for enterprise or custom web accessibility solutions, request a free ADA website accessibility remediation quote or email us at [email protected].