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: asaleotestf@gmail.com
  • 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.
15 + 5 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

Quảng cáo việc làm


Thích hợp các bạn nữ mảng thợ may làm việc tại nước NGA

Đơn hàng Tuyển dụng 100 Thợ may đi Nga(đợt 1 tháng 3.2021, đợt 2 tháng 5.2021). Lương thực lãnh 800 USD, bao ăn ở, vé máy bay và visa, phí xuất cảnh(1800 USD)trả khi đi làm có lương. Bạn có thể liên hệ CÔNG TY qua Phone/Zalo: (+84) 944 225 212. Công ty sẽ tư vấn cho bạn.

Xem chi tiết: >>> https://bit.ly/3o9NOfR




Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

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

Movies With Butter

Giới thiệu Drupal site: Movies With Butter

I was inspired to create Movies with Butter after reading about another site's migration from Pligg to Drupal with the Drigg module two years ago. If you wanted to build a Digg-like aggregator back then, your best options were Pligg and Drigg.

Lợi và Hại của FACEBOOK

Tìm hiểu về lợi và hại của FACEBOOK năm 2015

Mạng xã hội ra đời trên internet có thể nói là một bước tiến mới của ngành công nghệ thông tin

Top 10 Thủ Thuật SEO Webmaster Cần Tránh (Phần 3)

Top 10 Thủ Thuật SEO Webmaster Cần Tránh (Phần 3)

Việc Google đánh chỉ số các trang Web là liên tục. Tần suất của Googlebot lại phụ thuộc vào thứ hạng trang Web và mức độ cập nhật thông tin của trang.