accesstools

This module is based on the a11Y module and designed to offer accessible tools for Drupal developers, helping improve usability for individuals relying on assistive technologies or alternative display methods. It currently provides a customizable block that includes:

• Dyslexic font support
• High contrast mode
• Inverted Colors mode
• Text scaling
• Keyboard navigation (Only D8/D9)

These features are implemented using advanced CSS techniques and user preferences are retained via Drupal's built-in jQuery Cookie functionality.

Accessibility Simulations

To foster a deeper understanding of accessibility needs, the module also includes support for disability simulations. These can be enabled through the same block, provided the user has the appropriate permissions. (Note: These simulations are intentionally designed to mimic accessibility challenges and should not be activated for regular site users.) Currently supported simulations include:

• Dyslexia : Inspired by Javascript that powers this demo, this feature randomly rearranges letters within words on your site to emulate the reading challenges faced by individuals with dyslexia.
• Field Loss: Based on W3C guidelines for visual impairments, this adds a CSS overlay that mimics peripheral and central vision loss. It retains full click and navigation functionality, allowing users to experience content as those with visual field loss might.
• Colorblindness : This uses CSS and SVG filters to simulate various color vision deficiencies, including protanopia, deuteranopia, tritanopia, and more, along with monochromatic conditions like achromatopsia.

Compatibility for Drupal 10/11
Originally developed for Drupal 7 and later ported to support Drupal 8/9, the module has now been updated for Drupal 10/11. Enhancements include improved tabbed navigation, enabling users to traverse page elements seamlessly using the Tab key.

Additional Accessibility Resources

• Speed Reader: Helps isolate and display text in a manner that's easier to process for users with visual challenges.
• Accessibility Module: Provides guidelines for content creators to ensure compliance with standards like Section 508 or WCAG 2.0 AA.
• Block ARIA Landmark Roles: Simplifies the assignment of ARIA landmark roles to blocks directly from the block interface.

Future Vision
Our goal is to make the web more accessible and intuitive for everyone. Contributions and suggestions are welcome, especially those aimed at improving theming, usability, and support for diverse accessibility tools.

Installation
Add in your composer.json :

"repositories": [
        {
            "type": "vcs",
            "url": "https://git.drupalcode.org/project/accesstools"
        }
    ]

and run
composer require drupal/accesstools:^1.1

Customization
To customize the module, you can create a Twig template named block--mon-site-a11y.html.twig. Include the following code:

<div class="access-content">
  <div class="svg-access-content">
    <button class="access" aria-label="Accessibilité">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 512 512"
        width="35"
        height="35"
        fill="#000000"
        stroke="#000000"
        aria-hidden="true"
      >
        <circle cx="256" cy="56" r="40" fill="none" stroke="#000000" stroke-width="32" />
        <path
          d="M204.23,274.44c2.9-18.06,4.2-35.52-.5-47.59-4-10.38-12.7-16.19-23.2-20.15L88,176.76c-12-4-23.21-10.7-24-23.94-1-17,14-28,29-24,0,0,88,31.14,163,31.14s162-31,162-31c18-5,30,9,30,23.79,0,14.21-11,19.21-24,23.94l-88,31.91c-8,3-21,9-26,18.18-6,10.75-5,29.53-2.1,47.59l5.9,29.63L351.21,467.9c2.8,13.15-6.3,25.44-19.4,27.74S308,489,304.12,476.28L266.56,360.35q-2.71-8.34-4.8-16.87L256,320l-5.3,21.65q-2.52,10.35-5.8,20.48L208,476.18c-4,12.85-14.5,21.75-27.6,19.46S158,480.05,160.94,467.9l37.39-163.83Z"
          fill="none"
          stroke="#000000"
          stroke-width="32"
        />
      </svg>
    </button>
    {{ content }}
  </div>
</div>

Add the following JavaScript to handle interactions:

$(".access").click(function() {
  $("#a11y-container").toggleClass("display-block");
});

$("body").before($("#a11y-container"));
$("body").before($(".access-content"));

Finally, apply the following CSS for styling:

#a11y-container {
  position: fixed !important;
  flex-direction: column;
  width: 225px;
  bottom: 50px;
  right: 10px;
  background-color: #f6f6f6;
  height: 30%;
  z-index: 997;
  display: none;
  button {
    width: 100%;
  }
  .a11y-accesibility {
    padding-right: 8px;
  }
}

.display-block {
  display: flex !important;
}

.access-content .svg-access-content {
  position: fixed!important;
  right: 0!important;
  width: 5%;
  bottom: 0;
  z-index: 998;
  background-color: #fff;
  text-align: center;
  border: 2px solid #472583;
  .access {
    background-color: white;
    border: unset;
  }
}