AltSchool Of Engineering Tinyuka’24 Month 2 Week 2

This week started with highlights from the previous class as usual where our awesome instructor Oluwasetemi Ojo talked about HTML forms and form creation, radio buttons, checkboxes, form validation and lots more. Check out the previous class here HTML Video Tag The tag in HTML serves as a powerful tool for embedding a media player that facilitates video playback directly within a web page. This element enables developers to present video content seamlessly, enhancing the user experience with multimedia. Functionality of the Video Tag While the primary function of the tag is to embed video files, it can also accommodate audio content. However, for exclusively audio-related material, the element is typically recommended as it offers a more tailored interface for audio playback. Example of Using the Video Tag Here’s a basic example demonstrating how to implement the tag: Your browser does not support the video tag. In the above example: The controls attribute enables playback controls such as play, pause, and volume for user interaction. Multiple elements are included to provide alternative video formats, allowing the browser to select the best one it can support. In case the user’s browser does not support the tag, a fallback message is displayed, ensuring that they are aware of the compatibility issue. HTML API and the Document Object Model (DOM) The HTML API, fundamentally linked to the Document Object Model (DOM), allows us to access and manipulate web documents effectively. The DOM represents the structure of a document as a hierarchical tree composed of nodes, where each node can be an element, an attribute, or a text node. This structure enables dynamic interactions with the content and layout of web pages. Understanding the DOM Structure In the DOM, each element can have attributes and child nodes, creating a flexible and organized representation of the document. For instance, an tag may have attributes like src and alt, and the DOM allows us to interact with these elements programmatically. Accessing Element Attributes The browser offers various APIs that provide built-in methods, events, and properties for querying and updating elements. For example, when we want to retrieve the alt attribute from all images in a document, we can utilize the HTMLImageElement.alt property, as illustrated in the following JavaScript snippet: let allImages = document.querySelectorAll('img'); allImages.forEach((imageInstance) => { console.log(imageInstance.alt); }); In this code, we select all image elements and then log their alt attributes to the console, demonstrating how the HTML API facilitates access to element properties. Insights into Media Elements The HTML API extends beyond simple attribute access; it also provides valuable insights into the state of media elements like audio and video. For example, you can use properties like HTMLMediaElement.duration to get the total length of a media file, HTMLMediaElement.currentTime to find out where the playback currently is, and HTMLMediaElement.ended to check whether the media has finished playing. These properties enable developers to create interactive and responsive media experiences on the web. Focus Management in Web Accessibility Focusing on user accessibility is essential when developing web applications, as it ensures that users can easily identify which element is currently in focus. This can be achieved by applying styles such as :focus, :focus-visible, or :focus-within to interactive elements. These styles provide visual cues that enhance the user experience, particularly for keyboard and screen reader users. Interactive Elements and Focus In general, interactive elements such as form controls, links, and buttons are naturally focusable and included in the document's tabindex navigation order. Tabbable elements allow users to navigate through a webpage using the keyboard's Tab key. Conversely, non-interactive elements are considered inert, meaning they don’t receive focus. However, developers can manipulate HTML attributes to make certain elements interactive or to disable focus on elements that are normally interactive. Navigation Focus Order By default, the focus navigation order on a webpage follows the visual layout as well as the order in the source code. While it is possible to modify this order using HTML attributes and CSS properties, such alterations can lead to a confusing user experience. For example, if a developer changes the tabbing order or visually rearranges elements, it may disorient users who rely on a consistent navigation flow. Thus, it is generally advised to maintain the natural tabbing order to avoid impeding the usability of the webpage. Details and Summary Elements Have you ever encountered a disclosure widget on a website? Also known as an expandable or collap

Apr 6, 2025 - 02:33

AltSchool Of Engineering Tinyuka’24 Month 2 Week 2

This week started with highlights from the previous class as usual where our awesome instructor Oluwasetemi Ojo talked about HTML forms and form creation, radio buttons, checkboxes, form validation and lots more. Check out the previous class here

HTML Video Tag

The tag in HTML serves as a powerful tool for embedding a media player that facilitates video playback directly within a web page. This element enables developers to present video content seamlessly, enhancing the user experience with multimedia.

Functionality of the Video Tag

While the primary function of the tag is to embed video files, it can also accommodate audio content. However, for exclusively audio-related material, the element is typically recommended as it offers a more tailored interface for audio playback.

Example of Using the Video Tag

Here’s a basic example demonstrating how to implement the tag:

In the above example:

The controls attribute enables playback controls such as play, pause, and volume for user interaction.
Multiple elements are included to provide alternative video formats, allowing the browser to select the best one it can support.
In case the user’s browser does not support the tag, a fallback message is displayed, ensuring that they are aware of the compatibility issue.

HTML API and the Document Object Model (DOM)

The HTML API, fundamentally linked to the Document Object Model (DOM), allows us to access and manipulate web documents effectively. The DOM represents the structure of a document as a hierarchical tree composed of nodes, where each node can be an element, an attribute, or a text node. This structure enables dynamic interactions with the content and layout of web pages.

Understanding the DOM Structure

In the DOM, each element can have attributes and child nodes, creating a flexible and organized representation of the document. For instance, an tag may have attributes like src and alt, and the DOM allows us to interact with these elements programmatically.

Accessing Element Attributes

The browser offers various APIs that provide built-in methods, events, and properties for querying and updating elements. For example, when we want to retrieve the alt attribute from all images in a document, we can utilize the HTMLImageElement.alt property, as illustrated in the following JavaScript snippet:

let allImages = document.querySelectorAll('img');
allImages.forEach((imageInstance) => {
  console.log(imageInstance.alt);
});

In this code, we select all image elements and then log their alt attributes to the console, demonstrating how the HTML API facilitates access to element properties.

Insights into Media Elements

The HTML API extends beyond simple attribute access; it also provides valuable insights into the state of media elements like audio and video. For example, you can use properties like HTMLMediaElement.duration to get the total length of a media file, HTMLMediaElement.currentTime to find out where the playback currently is, and HTMLMediaElement.ended to check whether the media has finished playing. These properties enable developers to create interactive and responsive media experiences on the web.

Focus Management in Web Accessibility

Focusing on user accessibility is essential when developing web applications, as it ensures that users can easily identify which element is currently in focus. This can be achieved by applying styles such as :focus, :focus-visible, or :focus-within to interactive elements. These styles provide visual cues that enhance the user experience, particularly for keyboard and screen reader users.

Interactive Elements and Focus

In general, interactive elements such as form controls, links, and buttons are naturally focusable and included in the document's tabindex navigation order. Tabbable elements allow users to navigate through a webpage using the keyboard's Tab key. Conversely, non-interactive elements are considered inert, meaning they don’t receive focus. However, developers can manipulate HTML attributes to make certain elements interactive or to disable focus on elements that are normally interactive.

Navigation Focus Order

By default, the focus navigation order on a webpage follows the visual layout as well as the order in the source code. While it is possible to modify this order using HTML attributes and CSS properties, such alterations can lead to a confusing user experience. For example, if a developer changes the tabbing order or visually rearranges elements, it may disorient users who rely on a consistent navigation flow. Thus, it is generally advised to maintain the natural tabbing order to avoid impeding the usability of the webpage.

Details and Summary Elements

Have you ever encountered a disclosure widget on a website? Also known as an expandable or collapsible section, a disclosure widget is a user interface component that enables users to hide or reveal content at will. Traditionally, developers implement this feature using CSS or JavaScript, but HTML provides a straightforward solution with the

and

elements.

Utilizing Details and Summary

The

element serves as a container for additional information, while the

element acts as a clickable label that users can interact with to toggle visibility. This built-in functionality simplifies the process of creating expandable content.

For example, here’s how you can implement a disclosure widget using these elements:


  More Information
  This is the additional content that can be expanded or collapsed. It can include text, images, or other HTML elements.

In this snippet, when a user clicks on the "More Information" summary, the paragraph that follows will either be displayed or hidden based on its current state. This toggle effect is intuitive and enhances the user experience by allowing for a cleaner layout.

User Interaction

Additionally, users can activate the toggle by pressing the Enter key when the

element is focused. This feature ensures accessibility for keyboard users, making the disclosure widget easy to navigate.

Implementing Grouped or Nested Details and Summary Elements

Grouped or nested

and

elements can create an accordion-style interface, where only one section can be expanded at any given time. This functionality is particularly useful for organizing information in a compact yet accessible way, preventing the display of too much content at once.

Using the Name Attribute

To achieve this accordion effect, you can simply group multiple

elements by leveraging the name attribute. By giving each

element the same name, the browser will restrict interaction, allowing only one section to be open at a time.

Here’s an example demonstrating this behaviour:


  Section 1
  This is the content of the first section. It can be expanded or collapsed.



  Section 2
  This is the content of the second section, which will replace the first when opened.



  Section 3
  This is the content of the third section.

In the code snippet above, each

element is assigned the same name value of "group1." Consequently, when a user opens one section, any currently open section will automatically close, ensuring a clean and organized presentation of content.

Understanding the Details Element and the Open Attribute

The

element acts as a container for a disclosure widget, with the

element serving as the visible header that users’ can interact with to toggle the visibility of additional content. When users click on the

, it activates the toggle, effectively modifying the open attribute of the parent

element.

The Role of the Open Attribute

The open attribute is a boolean attribute that indicates whether the content within the

element is currently visible to the user. If the open attribute is present, all content inside the

is displayed. Conversely, if it's absent, only the

(the clickable part) is shown.

For example:


  Click to learn more
  This content is hidden until the summary is clicked.

In this scenario, clicking the summary reveals the hidden paragraph. As users engage with the widget, the open attribute is automatically added or removed, allowing for dynamic interaction.

Styling and Customization Options

Developers can utilize CSS to style the

element differently based on the open state. For instance, you can change the appearance of the disclosure triangle (the marker) that typically appears next to the

. Here’s how you might implement that:

details summary::marker {
  content: '▶'; /* Default marker shape */
}

details[open] summary::marker {
  content: '▼'; /* Change marker when open */
}

This code snippet alters the marker to indicate whether the content is expanded or collapsed. It’s also possible to fully customize the marker, including using images, by employing list-style-image.

Accessibility Considerations

While the

and

elements can be extensively styled and repurposed for different use cases (like tooltips), it's crucial to maintain accessibility. HTML elements are generally accessible by default, and it's the responsibility of developers to ensure that content remains usable for all users, including those who may rely on assistive technologies.

Utilizing Dialog Elements for Dialogs and Popovers

Have you encountered dialog boxes on websites or applications? These elements can be effectively implemented using the

element, which simplifies the creation of popup dialogs and modals on a webpage. A modal, also known as a modal window or lightbox, is a component that appears in front of all other content, requiring users to either take action within the modal or close it to regain access to the main content. In contrast, non-modal dialogs allow users to interact with the underlying content while the dialog is open.

Modal Dialogs

Dialogs are particularly useful for situations that demand immediate user attention, such as alerting users with important messages or notifications. Unlike the standard alert() function, which is limited in accessibility options,

elements offer greater flexibility and customization. For instance, you might use a modal dialog to prompt users for confirmation before they perform a potentially impactful action:


  Are you sure you want to delete this item?

This example demonstrates how a dialog can be utilized for user confirmation, enhancing the interactive nature and accessibility of web applications.

Non-Modal Dialogs

Non-modal dialogs function similarly to modal dialogs but do not obscure background content with a backdrop, allowing users to interact with the underlying page:


  This is a non-modal dialog. You can interact with the page behind it.

Popovers

Popovers are another vital UI component, enabling users to engage with both the popover and the content behind it simultaneously. While non-modal dialogs offer similar functionality, popovers are lighter and serve quick interactions, such as displaying tooltips, additional context, or menus without interrupting the user's workflow.

To create a popover, follow these steps:

Create a Trigger Button: This button will activate the popover.
Define the Popover Element: Add a "popover" attribute to the element you want to display.
Assign a Unique ID to the Popover: This ID will link the trigger button to the popover.
Connect the Button: Set the button's popovertarget attribute to the ID of the popover element.

Here's a simple implementation:




  This is some additional information!

In this example, clicking the button will display the popover with extra information, allowing users to read and take action without losing context.

When to Use Dialogs vs. Popovers

Dialogs are best utilized when you require the complete focus of the user, particularly in situations involving critical alerts, confirmation requests, or scenarios that demand strict control over user flow. For instance, if you need to alert a user about a significant action, such as "Are you sure you want to delete your account?" using a dialog ensures that the user must acknowledge or dismiss the prompt before proceeding.


  Warning: Deleting your account is permanent!

In this example, the dialog requires immediate user action, making it suitable for urgent matters.

Popovers, on the other hand, should be used when you want to provide additional information or context without interrupting the user's experience. They are lightweight and allow users to engage with both the popover content and the page beneath it. For example, if a user hovers over a button and you want to display a tooltip or a brief explanatory note, a popover works perfectly.



  This button allows you to download your report.

In this case, the popover enhances the user's understanding without side lining their workflow, allowing them to interact with the main content simultaneously.

Understanding Popover Types

When working with popovers, you may sometimes require greater control over their behaviour, which can be achieved by setting the attribute to "manual." By default, when you use the attribute without specifying a value, it operates in "auto" mode. This setting allows the popover to close automatically when the user presses the Escape key or clicks outside the popover area.

For example:



  This popover will close automatically.

In this scenario, the popover will dismiss itself if the user interacts with the background or presses Escape.

Manual Control with Popover Manual ()

If you want to maintain control over when the popover closes, you can set the attribute to "manual" like this:



  This popover requires a close button.

By using , the popover will no longer close automatically when the user clicks outside of it. Instead, you’ll need to provide a dedicated close button within the popover for users to dismiss it.

If you have read all the way to this point thank you So much! I do appreciate the effort. Do well to try all this out at your earliest convenience, and consider practicing as this makes us better developers. Also feel free to share your thoughts if you have any, in the comments section below.

I am Ikoh Sylva a Cloud Computing Enthusiast with few months hands on experience on AWS. I’m currently documenting my Cloud journey here from a beginner’s perspective. If this sounds good to you kindly like and follow, also consider recommending this article to others who you think might also be starting out their cloud journeys to enable us learn and grow together.

You can also consider following me on social media below;

LinkedIn Facebook X