Overview

Interactive Accordion Creation

Inspiration

Drawing inspiration from the How to Canvas original code for an accordion menu, I extended its functionality to create a more versatile and customizable accordion:

Original code: 

<details style="margin-bottom: 25px;">

    <summary style="cursor: pointer;">Snapchat</summary>

    <div style="border: thin solid #F1F3F4; padding: 5px 15px;">

        <p>Thanos' favorite social media platform</p>

    </div>

</details>

The original code served as a starting point, I introduced a container <div> to accommodate multiple accordion sections, each with customizable background colors, text colors, padding, and font size. I also enhanced accessibility by adding the role= "button" attribute and "aria-expanded" attribute to the <summary> elements, providing screen readers with information about the state of the sections and their interactive elements. Furthermore, I allowed direct content editing without having to edit the HTML code by applying the contenteditable="true" attribute to both the section titles and content paragraphs. 

HTML and CSS

HTML Structure:

<div>: The outer <div> element serves as the container for the entire accordion. It provides padding and background color for the accordion.

<details>: Each <details> element represents a collapsible section. These sections can be expanded or collapsed individually.

<summary>: The <summary> element is the title of each section. It has a background color, text color, padding, and font size to make it visually distinct. 

The role="button" attribute indicates that it can be interacted with as a button. The aria-expanded="false" attribute initially sets the section as collapsed.

<div>: Inside each <details>, there is a <div> element that contains the content of the section. It has a border, padding, and a background color to visually separate it from the title.

<p>: Within the content <div>, there's a <p> element where text is placed in the extended content box.

Styling with CSS: 

CSS styles were applied inline using the <style> attribute within the HTML elements. These styles define the appearance of the accordion, including background colors, fonts, and padding. 

Features

The template was designed with accessibility in mind to be usable and understandable by everyone, regardless of their abilities or disabilities.

Accessibility Features:

• Semantic HTML: The use of semantic HTML elements such as <details>, <summary>, and <p> provided a clear and structured document outline, making it easier for screen readers and assistive technologies to navigate the content.

• Role and ARIA Attributes: The role="button" attribute applied to the <summary>, indicates to assistive technologies that these elements are interactive buttons. Additionally, the aria-expanded="false" attribute initially sets all sections to a collapsed state, making it clear to screen reader users that these sections can be expanded.

• Editable Content: Both the section titles and content are made editable using contenteditable="true" attributes. This feature allows users to modify the content directly within the browser, accommodating those who may have difficulty interacting with complex editing interfaces.

• Customizable Styles: The ability to customize the accordion's appearance, including background colors and text colors, can improve readability and visual contrast for users with visual impairments or color sensitivities.

• Keyboard Navigation: The use of <details> and <summary> elements provides built-in keyboard accessibility. Users can navigate between accordion sections and expand/collapse them using keyboard controls (typically the "Enter" or "Space" key), making it essential for those who rely on keyboard navigation due to mobility impairments.

Usage Guide

To empower faculty in effectively utilizing and maintaining the content accordion template, a comprehensive usage guide has been developed. This document was organized into four sections, each offering step-by-step instructions:

• Creating an Accordion:

  • Logging into Canvas.

  • Switching to the HTML Editor.

  • Adding the HTML Code.

• HTML Code:

  • Copying the provided code.

• Customizing Sections:

  • Adding and removing sections.

  • Changing section background colors.

  • Previewing changes.

• Adding Content:

  • Utilizing the text editing toolbar.

  • Ensuring accessibility compliance.

  • Incorporating images and videos into sections.

  • Saving and Publishing

In addition to these instructions, the guide emphasizes the availability of support from the university's Learning Center. Faculty members are encouraged to reach out for assistance and guidance.

Branding

Key Takeaways

This project has been a valuable learning experience for me, particularly in terms of coding skills. As I ventured into creating and personalizing the interactive accordion template using HTML and CSS, I not only solidified my existing web development skills but also found the process to be a fun challenge. This experience not only boosted my confidence but also sparked a sense of curiosity, encouraging me to explore further integration of HTML codes into Canvas and other educational platforms. 

Through this project, my awareness of accessibility in educational materials has deepened. I gained a deeper understanding of how to implement accessible features that ensure inclusivity for all learners. This understanding has added depth to my coding and content creation skills. 

One of the most gratifying takeaways from this project is the enhanced sense of independence. I now feel more self-reliant when it comes to managing and designing course content, relying on my own technical skills. This autonomy empowers me to streamline my work processes and create more dynamic and engaging learning experiences. I am eager to create more learning experiences that incorporate coding in the future.