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.
Fill out the form with all the details.
Select the plan based on your requirements and click on “Continue” for the next step.
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.
Once the signup is completed you would receive an email notification with widget integration & dashboard access details.
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.
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:
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.
Create a Rule.
In the left navigation, click Rules.
Click the Create New Rule button:
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.
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.
Click the Keep Changes button.
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
Add All in One Accessibility Widget Custom Code in Edit Code.
Save the code editor.
On the Action configuration screen click Keep Changes.
Click Save to save the rule.
On the Rules page, you should see your new rule:
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.
Name the Library, e.g. Initial Setup.
Select Environment > Development.
Click Add All Changed Resources.
Note that after clicking Add All Changed Resources tags summarize the changes you just made.
Click Save & Build for Development.
After a few moments, the status dot will turn green indicating the library was successfully built.
Reach out if you need any help with the installation or technical assistance! We’d love to help!
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].
