Digital Transformation and Accessibility

Moreover, accessibility opens up new target groups, promotes an inclusive corporate image, assists people with temporary disabilities, and enforces the implementation of web standards.

Enriched with hands-on examples, this article explains how we at diva-e holistically integrate accessibility into customer projects and, together with our partner Crownpeak, lead to sustainable success for all. We take a close look at the digital value chain of enterprise projects and highlight corresponding approaches to complying with accessibility requirements before and during ongoing operations.

The first step toward an accessible online presence begins with corporate design. At this early stage, companies should ensure that all design elements comply with WCAG guidelines. For years, inadequate contrast ratios have been the most frequent violation of applicable W3C guidelines, as identified again this year by the WebAIM Million Report, with over 80% of instances. Additionally, font sizes and content readability must be considered from the outset. Continuous checks are necessary to ensure that no barriers are overlooked. These checks should be performed both manually and automatically to ensure high accuracy.

Define Color Schemes with High Contrast: During the process of establishing corporate identity colors, contrast values must be evaluated and chosen or corrected accordingly. According to WCAG 2.2 Level AAA (Perceivable 1.4.6), the contrast ratio between text color and background color must be 7:1 for body text and 4.5:1 for large text (>= 24px).

Contrast Verification with Tool Support: Designers can utilize a variety of software tools for assistance. For example, Figma offers a wide selection of plugins and widgets. Independently of the software, there are many online tools available to assist in this step – such as the WebAIM Contrast Checker, browser development toolbars, or Crownpeak’s Contrast Checker (part of DQM – more details below).

Ensure Readability: The WCAG guidelines do not prescribe a fixed minimum size for body text. However, experience shows that body text should be at least 16px. Font weights vary from font to font, so manual testing is essential. There are clear guidelines for the width of a text block – it should not exceed 80 characters per line (Perceivable 1.4.8).

If the corporate identity and corresponding components of the online presence are implemented in the living style guide according to the guidelines, the next step is to equip the development process with sustainable accessibility controls. Our frontend developers have the expertise to implement accessibility in the context of corporate platforms and online shops. They have integrated automated tools into their development environment that continuously alert them to missing labels and other accessibility issues. This ensures that accessibility is considered from the first line of code in the project, not just at the end when the project go-live is imminent.

Automatic Checking through the IDE: The axe Accessibility Linter plugin has established itself as the go-to plugin for Visual Studio Code.

npm Modules: In our diva-e projects, we also integrate accessibility checks directly into the project environment using npm modules, such as vue-axe for our Vue projects. Additionally, we enhance our linting rules with eslint-plugin-vuejs-accessibility.

Automated Tests: We equip our CI/CD pipelines with Cypress and Cypress-axe configurations, which automatically perform accessibility checks on the committed code with each build.

For customers with an existing online presence, an initial audit is the best starting point. A comprehensive audit can identify and document weaknesses, providing a clear overview of the areas that need to be revised to comply with WCAG guidelines.

diva-e offers three audit variants for this purpose. From a review of the most important page in the Quick Audit, to the Advanced Audit which examines up to 25 components based on the test criteria, and finally to Enterprise Support, where we manage, support, and implement accessibility across all levels.

One of the key services of the audit is the review of test criteria established by the Barrier-Free Information Technology Ordinance (BITV 2.0). These criteria consist of automated and manually conducted tests. Additionally, each audit includes a recommendation for the next steps. The effort-benefit matrix then aids in the concrete implementation by clearly prioritizing the steps, comparing the necessary effort for each measure with the expected benefit for accessibility. This ensures that companies first make changes that have the most significant positive impact on the user experience while being feasible with reasonable effort.

Auditing: diva-e reviews your online shop or website according to all necessary BITV test criteria within the scope of our audit packages:

• Quick Audit

• Advanced Audit

• Enterprise Audit

Examples of Effort-Benefit Matrix: High Benefit, Low Effort: Adjusting color contrasts

High Effort, Low Benefit: Visual overhauls without functional improvement – for instance, developing an accessible drag-and-drop function that could also be realized with alternative methods or a simple input tag, which natively offers a high degree of accessibility.

After the audit has identified the potentials and necessities, the next step is to iteratively develop the required features and adjustments. diva-e supports you on this journey with the appropriate planning and implementation expertise. Once project planning is complete, we use an agile project approach to address the barriers identified in the audit step by step.

We emphasize that your company engages with accessibility in a sustainable manner and builds expertise, ensuring that awareness of BITV guidelines is incorporated into the planning of new features and components.

Truly Embracing Accessibility: We recommend every project team firmly establish accessibility in the Definition of Ready (DoR) and the Definition of Done (DoD).

• Definition of Ready: "The acceptance criteria are compliant with WCAG 2.2."

• Definition of Done: "The implemented changes have been successfully tested according to BITV verification steps."
  
  

Internal Know-How: To prevent barriers from arising in the first place, accessibility must be taught and learned. Invest in building expertise within your own staff. Excellent and free resources for this are the official W3C WCAG 2.2 documentation. We are happy to support you on this journey.

Important: Accessibility in enterprise projects is an ongoing task that does not end after successful development. The digital value chain includes many subsequent process steps that must also consider accessibility. For instance, the editorial work on the live website is crucial. For this purpose, we rely on the solution provided by our partner Crownpeak.

To ensure the level of accessibility even in highly complex enterprise architectures and platforms, a combination of continuous analysis and manual audits is required during live operations. Continuous analysis provides a solid foundation, identifying issues that need to be addressed at any given time. Manual audits fill the gaps that cannot be identified or verified automatically.

Crownpeak supports continuous analysis with its Digital Quality Management (DQM) system and also offers extensive capabilities for ad-hoc content analysis via API. The dashboard allows for the analysis of touchpoints examined by the crawler, providing aggregated data across a complete website or multiple websites. These can be grouped as needed—by location, brand, or vertical market.

To identify specific issues, all affected pages are displayed under the corresponding checkpoint and highlighted in the live view of each page. This makes it easier for editors to identify which elements on a page need adjustments. Additionally, the dashboard provides information and references (e.g., to the WCAG) for each checkpoint.

DQM comes with an extensive library of checkpoints covering accessibility, SEO, usability, legal requirements, and more, which Crownpeak updates as needed (e.g., with the release of WCAG version 2.2).

These checkpoints can be further extended with additional tests, such as the presence of specific, legally required content for banks, insurance companies, energy providers, etc.

For accessibility requirements, a dedicated dashboard is available that highlights the audit results from the perspective of WCAG, including its success criteria, guidelines, and techniques.

Additional helpful tools such as benchmarking scores for various metrics, a spell checker, a list of all analyzed assets (including issued email addresses or redundant page titles), and a contrast checker complete the dashboard's functionality.

Moreover, the checkpoints provided by Crownpeak and the individually configured ones are also available via API. This is particularly interesting in the context of integration into a used CMS, as it allows problems to be identified and fixed before they reach the live websites.

Within our CMS FirstSpirit, for example, problems can be found not only as part of the editorial process but also the quality status of a page can be considered in the workflows. This prevents a page from being published if more than X issues related to accessibility have been identified.

In addition to the out-of-the-box integrations for Crownpeak's own CMS FirstSpirit, Adobe Experience Manager, and Sitecore, further CMS integrations can also be provided using the available APIs, or the aggregated analysis results can be integrated into custom QA dashboards.

The API-based checking is also used in the so-called PageChecker – a browser extension that enables ad-hoc analysis of any page, regardless of the CMS used.

This is particularly useful when CMS integration would not be economical, for example, with satellite websites that use a different CMS than the main site or landing pages that are directly generated from other marketing solutions.

Of course, as with most solutions in a digital landscape, there is no “one-size-fits-all” for accessibility. While a free browser plugin may be entirely sufficient for a microsite, enterprise projects quickly encounter limitations. Therefore, it is essential to select the right solutions and approaches for your strategy to achieve an accessible online presence.

It's important to remember that companies and services must always be considered individually, so not every approach works the same way for different organizations. Below, we will examine the various approaches for their strengths and weaknesses. Individual solutions may vary from this analysis; the following explanations primarily provide an overview of potential approaches and their typically found advantages and disadvantages.

• Training: The most efficient way to address barriers is to prevent them from arising in the first place. It's recommended to raise awareness of accessibility factors among employees involved in the content creation process. This doesn’t mean that an entire company needs to be trained as accessibility experts. However, a fundamental understanding of aspects that can create barriers helps prevent problems from occurring early in the content lifecycle.
  

• Manual Audits: In a manual audit, specialists analyze the specific content of a company to identify accessibility issues.
  
  Advantages of manual audits include the ability to check the full scope of the WCAG. An audit can range from a simple status report to a detailed analysis. However, it's important to remember that manual audits are always a snapshot of a subset of all content and, depending on the scope and frequency, can involve significant costs.
  

• Continuous Analysis: By using appropriate software solutions, content is regularly checked for accessibility aspects, and the results are provided to editors in the form of a dashboard.
  
  The clear advantage is that regular analyses are not associated with additional efforts (apart from problem resolution) and enable the evaluation of a complete or even multiple digital presences.
  
  However, it's important to note that automated tests cannot capture all WCAG requirements. For example, the draft of the upcoming WCAG version 3 requires testing by people with disabilities.
  

• Accessibility Overlays: These involve enhancing websites with a widget that allows users to influence the behavior of a website in real time, such as increasing contrast or stopping animations. Additionally, these solutions often offer the ability to automatically add missing information like alt-tags. The biggest advantage of this approach is its low implementation complexity.
  
  Caution: Using such solutions can also bring various disadvantages. Acceptance among people with disabilities is generally low, as they usually have their solutions in place, thus providing no additional value. Moreover, the increased code complexity can hinder usability and negatively impact performance. Furthermore, overlays offer limited legal certainty.
  
  The website usable.net registered 303 lawsuits in their Accessibility Lawsuit Tracker against companies in April 2024 alone, based on the ADA (Americans with Disabilities Act – the American equivalent of the EAA), of which 76 companies used an accessibility overlay.
  

• Free Tools: Lastly, there is a wide range of free tools available to check accessibility aspects. These are usually provided as browser extensions that can analyze the currently viewed page.
  
  The biggest advantage is obvious: using such tools is free. Additionally, these solutions can typically be used without additional configuration effort.
  
  However, these solutions also have some weaknesses. Generally, it’s only possible to examine a single page, so depending on the complexity of the web presence, only representative conclusions can be drawn without uncovering every specific problem. Additionally, it’s usually not adjustable what situations are specifically checked for.

We hope this article has highlighted the importance of digital accessibility and demonstrated various ways to achieve it. Below, you will find a visual summary of the different approaches to help you evaluate which methodology best meets your individual requirements.

We are also happy to personally advise you on our diva-e Accessibility Audits and your unique opportunities to optimize unrestricted access to your platform.

Crownpeak is a leading provider of digital experience management solutions that enable organisations to deliver seamless, personalised and compliant digital experiences across all channels. With a comprehensive suite of tools that include content management, digital quality management, product discovery and privacy compliance, Crownpeak ensures that brands can create impactful, accessible and consistent digital interactions.

Learn more about Crownpeak