Hướng dẫn xây dựng 1 Accessible Accordion trong Drupal 8

Hướng dẫn xây dựng 1 Accessible Accordion trong Drupal 8

Custom widgets have become a staple of websites today. From simple menu toggles to fancy interactive charts, custom functionality can help condense and improve layouts, increase visual interest, and create fun interactive experiences for users. Unfortunately, these same custom widgets are often unwittingly the biggest culprit for accessibility errors, rendering content mysteriously convoluted or in some cases completely hidden to users of assistive technology. Luckily, with the right structure and attributes, custom widgets can be exposed for interactive control by assistive technology, and even improve the user experience for users.

>> Hướng dẫn lấy Field Value ở Node để làm Class Name trong Drupal 8

>> Hướng dẫn display Entity Reference Fallbacks trong Drupal 8

Today we’re going to walk through a very common widget: the accordion. Accordions are often used to help reduce the amount of space that a series of text or paragraphs takes up, and allows people to focus on one piece of content at a time, or skim through quickly and only open the panels that are relevant to them.

Hướng dẫn xây dựng 1 Accessible Accordion trong Drupal 8

In Drupal, there are a variety of ways to go about building an accordion. You can use a content type, paragraph type, or even make a view mode that allows multiple types of content to utilize the accordion’s functionality. For this example, we’re going to use a paragraph type to make an FAQ accordion panel. We only need two fields, one, a plain text question field and a long formatted text field for the answer.

Once we have our paragraph type and fields created, with the labels hidden in our display, we create a twig template to format the content. It will look something like this:

{# These variables unique IDs and aria attributes utilizing paragraph ID instead of relying on JS to loop through and append unique numbers #}

{% set ariaId = 'faq-answer--' ~ paragraph.id() %}

{% set ariaTitle = 'faq-title--' ~ paragraph.id() %}

{# HTML structure for far widget #}
<div class=“paragraph paragraph--faq">
  <div class="card-inner">
    <h3 class="faq-header">
      <button class="faq-question" aria-controls="{{ ariaId }}" aria-expanded="false" id="{{ ariaTitle }}">{{ content.field_faq_title }}</button>
    <div role="region" class="faq-answer" id="{{ ariaId }}" aria-hidden="true" aria-labelledby="{{ ariaTitle }}">
      {{ content|without(‘field_faq_title’) }} 

Accordion panel

Here are the essential parts for the accessibility of the accordion panel:

  • heading element wrapped around a button
  • button control attributes:
    • aria-controls: value is unique ID of the region of corresponding panel
    • id: unique ID for title, called in aria-labelledby attribute of corresponding panel
    • aria-expanded: value will toggle between false and true when panel is opened
    • class (optional): used to help responsively style button controls
  • panel attributes:
    • role=“region”
    • id: unique ID of panel, called in corresponding button’s aria-controls attribute
    • aria-labelledby: same as corresponding button’s unique ID
    • aria-hidden: false toggles between true and false when panel is opened
    • class (optional): to style the accordion panels

These attributes all work together to allow users to be able to tab through the accordion buttons list, open and close each one, and know which button corresponds with which panel.

Now that we have the necessary HTML structure and attributes in place, it's time to make our accordion functional with some jQuery:

(function ($, Drupal) {
  'use strict';

  Drupal.behaviors.faqAccordion = {
    attach: function (context, settings) {
      $(context).find(‘.paragraph--faq').once('faqAccordion').each(function () {
        var $faq = $(this);
        var $question = $faq.find('.faq-question');
        var $answer = $faq.find('.faq-answer');
        $question.click(function () {
          if ($faq.hasClass('expanded')) {
            $question.attr('aria-expanded', 'false');
            $answer.attr('aria-hidden', 'true');
          else {
            $question.attr('aria-expanded', 'true');
            $answer.attr('aria-hidden', 'false');
}(jQuery, Drupal));

This changes the necessary attributes to support the toggle function, and adds an additional class to the FAQ wrapper to allow for additional styling if desired.

If you are following these instructions, you may notice that the accordion does not in fact appear functional yet, but if you inspect the accordion you should see the attributes changing according to the jQuery function. This is because in this particular case we use CSS to finish out the functionality, relying on the aria-expanded and aria-hidden attributes for styling. Basing appearance of content on these attributes can be good practice for learning to build and style with accessibility in mind, since it is a reminder that if you cannot access the content, neither can someone using a screen reader or other assistive technology.

CSS snippet

With this simple CSS snippet, we should now have a functional accordion:

.paragraph--faq .faq-answer[aria-hidden="true"] {
  display: none;

Additional styles can be added based on the aria-hidden attribute for the accordion panel and the aria-expanded attribute for the button. Just remember to keep accessible styles and best practices in mind as you do so.

Bạn thấy bài viết này như thế nào?: 
Average: 10 (4 votes)
Ảnh của Tommy Tran

Tommy Tran owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy
  • Phone/Zalo: (+84) 944 225 212
  • WhatsApp: (+84) 944 225 212
  • Line Messenger: (+84) 944 225 212
  • Email: [email protected]
  • Telegram Messenger: https:/t.me/tommytran0401

Bình luận (0)


Add Comment

Plain text

  • No HTML tags allowed.
  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Tự động ngắt dòng và đoạn văn.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
4 + 3 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.




Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

Apple tổ chức sự kiện giới thiệu iPad mới vào ngày 7/3

Apple tổ chức sự kiện giới thiệu iPad mới vào ngày 7/3

Apple đã xác nhận tổ chức một sự kiện báo chí vào thứ Tư, ngày 7/3, mà nhiều khả năng sẽ là nơi hãng cho giới thiệu chính thức mẫu máy tính bảng iPad 3 rất được trông đợi.

Amazon gia tăng sản xuất Kindle Fire

Amazon gia tăng sản xuất Kindle Fire

Doanh số bán hàng mạnh mẽ của máy tính bảng Kindle Fire đã khiến Amazon phải tăng các đơn đặt hàng của mình, chứng minh rằng mọi người thực sự thích máy tính bảng giá rẻ.

Các cách để save a node in Drupal

Các cách để save a node in Drupal

Every day, millions of nodes are saved. It happens every time content is created, migrated, or updated. It's probably the most common content management task in Drupal.



Wordpress Freelancer


Wordpress Freelancer