Enhancing Accessibility on Your Drupal Site

A Developer's Guide

The Importance of Accessibility

Accessibility is as crucial in today’s digital landscape as ever. Ensuring that websites are usable for everyone, including people with different abilities, is a core goal and a key reason for selecting Drupal. Accessibility not only broadens your audience but also helps meet various international legal standards, ensuring that the web experiences you plan are successful.

Through the development of a Drupal website—whether selecting Contributed modules, working with a base theme, or using a Distribution as the backbone—keeping a range of accessibility concerns in line with the specific goals of your project is essential.

Understanding Drupal's Role in Accessibility

Global Impact and Definitions

According to the World Health Organization, over 1 billion people worldwide live with some form of disability. Of course, it’s not as simple as thinking all users have the same skills. This includes a wide range of abilities and impairments, from visual and hearing impairments to cognitive and mobility challenges. Our task is to build websites where the front-end user theme, content, and forms are ready for any user to interact with. 

Adhering to Web Content Accessibility Guidelines (WCAG)

The Web Content Accessibility Guidelines (WCAG) 2.1 consists of 78 success criteria, which are pass-or-fail statements that address accessibility barriers such as low-contrast text, ambiguous anchor text, and keyboard accessibility issues.
These criteria are organized into three levels of conformance:

1. Level AAA (most strict)
2. Level AA
3. Level A (the most essential base, least strict)

Drupal’s role in this framework is to provide the core functionality to define and manage access permissions tailored to the needs of various users within the project.
 

Drupal’s Back & Front of Accessibility

Backend Widgets for Content Editors

Formatted content for the front end requires administrative widgets in the back-end. Drupal serves as a developer's toolbox, enabling the building of user experiences necessary for content editors based on their roles. This integration of front-end and backend accessibility is crucial for a seamless content management process.

We must remind ourselves that ATAG (Authoring Tool Accessibility Guidelines) also applies as equal to its companion WCAG.

Authoring Tool Accessibility Guidelines (ATAG) explains how to:

• Make the authoring tools themselves accessible, so that people with disabilities can create web content.
• Help authors create more accessible web content — specifically: enable, support, and promote the production of content that conforms to Web Content Accessibility Guidelines.

People-First Interfaces

JavaScript has been a cornerstone for developing advanced web interactions since its inception in 1995. With the advent of Web 2.0 around 2004, it became a foundational element for creating daily user experiences online. Combined with CSS (Cascading Style Sheets), development teams have the tools to build highly dynamic and interactive web experiences.

However, the rapid pace of technological development presents challenges, especially in maintaining accessibility. Modern web experiences often feature complex, multi-layered workflows, such as three-column dynamic motion layouts. These layouts must be designed with care to ensure they function across various devices, which may not operate as initially tested due to user-modified settings.

This introduces the risk of creating what is known as 'The Inaccessible Web'. To combat this, our primary goal must always be clear and effective communication. HTML, the fundamental building block of the web, is our primary tool for achieving this goal, ensuring that all web interactions start from an accessible foundation.

HTML (Hyper Text Markup Language) is the standard markup language for creating Web pages.  It defines the structure of a Web page such as Header, Main, Aside, Footer. Javascript & CSS as intended greatly enhance this simple beginning to become engaging, provocative User Interfaces that we take our users through.  Keeping focus on people’s needs through these experience is what accessibility is!
 

4 Core Accessibility Features in Drupal

1. Semantic HTML5

At the core of Drupal's web accessibility features is the use of Semantic HTML5. Drupal ensures that the HTML output is semantic, enhancing site navigation especially for users with screen readers. This approach not only improves accessibility but also aligns with best practices for web standards, ensuring that the structural elements of web pages are used in a way that naturally conveys meaning to both users and search engines.

2. ARIA

ARIA, or Accessible Rich Internet Applications, is a set of attributes that can be added to HTML elements to make web content more accessible to individuals with disabilities. Developed by the World Wide Web Consortium (W3C), ARIA is crucial for enhancing the accessibility of dynamic content and complex user interfaces created in Drupal.

ARIA roles and attributes help in making interactive elements more accessible by deepening the association of information presented on screen or via assistive devices. ARIA plays a key role in accessibility because it allows developers to specify the roles of elements (like buttons or sliders), which helps assistive technologies describe these elements to their users more accurately.

It is now no secret that ARIA is the key to building accessibility.  Drupal itself builds HTML from a structural form known as a “Render Array”. This system allows for the dynamic generation of HTML elements with specific ARIA attributes. The Render Array includes a collection of 'attributes' which dictate the final HTML string sent to the browser, allowing developers to modify forms and content dynamically to meet specific accessibility needs.

3. Inline Form Errors

Drupal enhances form accessibility through its "Inline Form Errors" feature. This functionality provides users with immediate, context-specific feedback on input errors during form submission. It is particularly beneficial for users who rely on assistive technologies, as it allows them to correct errors on-the-fly rather than navigating back after a form has been submitted.

4. Drupal's Media Management:

We use images for a vast amount of our communication often not thinking of the range processing we humans do with coloured pixels. We often associate deep emotion and intent, from a picture. As with your website's purpose its design layouts will use images for any number of reasons. Images can be:

• Informative
• Decorative (icons)
• Images of text
• graphs/diagrams, complex images
• Document as images. PDF, SVG
• Image maps
• 'Groups of images' ..as can be with any of the above

Drupal's Media and Images can be used with the current best practice with aria to extend with traditional use of ‘alt’ and ‘title’ text for an image.  ARIA Role and label continue to let us ensure the best tool for clients and users alike.  With theming formatters Drupal can continue to be shaped for those specific situations that need key detailing!

 
 

5 Advanced Formatting and Accessibility Tools 

1. Iconography and ARIA Integration

Icons are crucial in digital interfaces, enhancing user understanding and interaction through visual cues. Proper use of iconography ensures that designs communicate effectively. Implementing ARIA (Accessible Rich Internet Applications) practices with icons makes sure that this visual communication is accessible to all users, including those using assistive technologies.

2. Sophisticated SVG Handling

• Beyond Basic Vectors: SVGs (Scalable Vector Graphics) are not just simple images but are documents that can contain scripting, links to third-party assets, and their own HTML/CSS content. This makes them powerful but complex tools in web design.
• Usage in Modern Web Design: Understanding the dual nature of SVGs—as both images and interactive tools—is crucial. When SVGs are used more like traditional images in icon libraries, they generally contain only vector paths. However, SVGs used as HTML objects in web projects can provide interactivity and accessibility challenges that require careful management.

3. Drupal's Core Theme Design

Drupal's themes are designed with accessibility as a core feature, emphasizing high contrast and readable fonts to ensure content is accessible to a broad audience. This commitment to accessible design standards demonstrates Drupal's position as a leader in web accessibility.

4. WYSIWYG Editor: UI first

What You See Is What You Get (WYSIWYG) editors revolutionize how content creators interact with HTML. By allowing non-developers to format content visually—using tools that hide the complexities of direct code editing—these editors make web content creation more accessible and intuitive. WYSIWYG is a reminder that in the simplest way we are just writing text into a ‘textarea’ in html. The WYSIWYG UI concept itself marks the elevation of HTML.

5. Layout Builder

Drupal excels at prioritizing users, starting with HTML as the foundational element of its toolkit. It offers a drag-and-drop Layout Builder that is designed to function effectively even under degraded workflow conditions. This methodical approach ensures that accessibility is maintained throughout all phases of your website’s lifecycle. By consistently applying this layering of interface building concepts and tools, Drupal establishes a robust framework that supports comprehensive accessibility.

 

Advanced Techniques to Enhance Accessibility

Once the basics are in place, you can further enhance your site's accessibility through advanced techniques:

1. Improving Site Navigation

• Skip Links: Implement skip links in your Drupal theme to facilitate easier content access, especially useful for users who rely on assistive technologies.
• Mobile First Responsive Design: Utilize mobile-first design principles to maintain structural and design focus, addressing concerns about the placement of real content, particularly above the fold.
• Accessible Navigation: Ensure that all navigation elements are fully accessible via keyboard. Design menus in a way that screen readers can easily navigate, and always display breadcrumbs to help users understand their location within the site. A well-organized site information architecture (IA) is crucial for facilitating access to all parts of your website.

2. Enhancing Text and Content Interaction

• Customizable Text Options: Provide users the ability to adjust text size, contrast, and spacing to accommodate their visual preferences.
• Dynamic Content Accessibility: Utilize AJAX and ARIA, particularly ARIA's Announce feature, to make dynamic content updates accessible. This ensures that users of assistive technologies are informed of changes as they happen.
• Sliders and Interactive Elements: 
  • Ensure that the HTML structure of sliders conveys the content meaningfully.
  • Provide comprehensive controls for sliders, including mouse, keyboard, and on-screen buttons.
  • Maintain visual guidelines in animations and actions, and allow users to pause auto-advancing sliders to interact at their own pace.
    Nested and Tabbed Interfaces: Follow well-documented UI patterns for tabbed interfaces, such as those available at W3.org WAI-ARIA Authoring Practices. Be mindful of the complexities when tabs contain interactive content.
    Hovering Presentations: Implement ARIA patterns in common design elements like hover cards to enhance accessibility.

3. Complex UI Patterns and Progressive Enhancement

• Nested and Tabbed Interfaces: Follow well-documented UI patterns for tabbed interfaces, such as those available at W3.org WAI-ARIA Authoring Practices. Be mindful of the complexities when tabs contain interactive content.
• Hovering Presentations: Implement ARIA patterns in common design elements like hover cards to enhance accessibility.
• Using CSS3 and JavaScript: Build interfaces that can function without JavaScript where possible. Progressive enhancement should guide the integration of HTML, CSS, and JavaScript, ensuring accessibility remains a priority throughout the development process. Keep these 3 points in mind: Structure of content, Control point for user and base of animation techniques in any interface your team needs to provide.  Progressly add into that base structure with CSS and Javascript.

4. Choosing the Right Tools and Staying Current

• Selecting Plugins: Choose third-party sliders, tabs, and other plugins that offer customizable accessibility with variations as options within the plugin. Ensure these tools comply with accessibility standards.
• Ongoing Updates and Standards Compliance: Regularly update your practices to align with evolving standards like WCAG and ATAG. As web technologies and scripting languages develop, it’s essential to adapt and enhance accessibility measures to meet these changes.

Drupal's foundational capabilities in its theme system support the construction of accessible websites, not just at launch but throughout the greater lifecycle of the website. This ongoing commitment to accessibility is vital as the needs of users and technology standards continue to evolve.

5 Tools for Testing Accessibility on Your Drupal Site

Testing is vital to maintaining accessibility. Design and flow changes both during the initial building or across the lifespan of a website may change the overall report of a testing tool.  These tools do not just look at individual aspects of the page but also the health of that full page as the final mark of success it will give. Utilize these tools to ensure your site remains compliant:

1. WAVE Tool

Use this browser extension to quickly identify accessibility errors.

2. JAWS Inspect

This tool simplifies the process of testing websites with JAWS (Job Access With Speech), one of the most popular screen readers. 

3. AXE Accessibility Checker

Integrate this tool into your development process to test for accessibility issues during the build phase.

4. Nightwatch

Nightwatch uses Node.js and the W3C WebDriver API for simulating user interactions with web applications. It features a straightforward syntax for easy test creation and management.Supporting real browsers, aiding in cross-browser compatibility testing and making it a valuable tool for developers maintaining robust web applications.

5. Siteimprove Accessibility Checker

A comprehensive cloud-based tool that not only checks for accessibility errors but also provides guidance and solutions for fixing them. It’s particularly useful for larger organizations looking to maintain an accessible online presence.
 

Tips for Accessibility Testing Tools Implementation

• Schedule regular audits with these tools to catch and fix new accessibility issues as standard and knowledge of building new, complex UI’s with modern web and Javascript tools may offer new insights
• Be sure design goes beyond visual A/B testing. 
• Gather user information across a more similar range of device sizes used today by sites/domains 
• Be sure to test the concept of designed UI’s that outside your organization.  We can all become victims of tunnel vision.
• Allow time to perfect what is in process.  Estimation should include the time testing and related follow ups may take in consideration of a project's release needs.
• Iterate: Like all things in practical development ensure the foundations for accessibility are underway to be continued as priorities shift.  Agility is knowing the work is never done.
• Of course if possible incorporating testing with a group of people who have alternative abilities.  We can take for granted small changes in one life can have wide reaching effects to these everyday tasks.  Accessible today, may not be accessible tomorrow.

Conclusion: Summary & Further Resources

Certainly, enhancing accessibility on your Drupal site is an ongoing process that extends beyond initial development. Knowing that HTML provides the structure (first) and continues to lay in other web technologies like CSS and Javascript is the golden path to ensure the project's footing.  Progressively enhanced from basics to include ARIA with any User Interface that outlines and designs call for.  ARIA is the key to ensuring communication with a well structured html page.   Continually push forward with the understanding that accessibility is a layering we can continue to improve as new technologies (iVision) will continue to offer new challenges and from that new ways to improve UI development processes.  Keeping current is part of our work always.

For further learning, explore resources like the Web Accessibility Initiative (WAI) and Drupal.org's accessibility guides.