Explore focusable, clickable, tabbable or active statesArticle contains
  1. What is the difference between an interactive element that can receive focus, be clicked, be active, or be tabbable?
  2. Determine if an element is clickable
  3. Determine if an element is focusable
    1. Determining if an element is a type of focusable element
    2. Determining if the element can receive focus right now
  4. Determine which element is active now
Laptop and cactus on the left side and coffee on the right side. Image by Megan Rexazin Conde from Pixabay.

Explore focusable, clickable, tabbable or active states

Determining whether an element is interactive or not can be crucial for various purposes, such as improving accessibility, enhancing user experience, testing purpose or debugging issues.

An interactive element is one that can receive focus, be clicked, be active, or be tabbable, allowing users to engage with it in some way. Let’s find out how to determine if an element is focusable or active using JavaScript.

Continue reading “Explore focusable, clickable, tabbable or active states”
Fixing missing tooltips for invalid required form controlsArticle contains
  1. Solution implementation
  2. Workable example
Insert custom table into existing content without affecting the current layoutArticle contains
  1. Inserting a custom table into existing content
  2. Example implementation
  3. Live example
Using async and await with browser.runtime.onMessage in cross-browser extensionsArticle contains
  1. Understanding message passing
  2. Key points for using async/await
  3. Example implementation
  4. Conclusion
JavaScript Clipboard API with fallbackArticle contains
  1. Using the Clipboard API
  2. Limitations
  3. JavaScript Clipboard API example
Preventing multiple HTTP requests to the same endpointArticle contains
  1. Why preventing multiple requests is important
  2. Preventing multiple requests with caching, TypeScript version
    1. Example use case for TypeScript
  3. Preventing multiple requests with caching, Angular version
    1. Example of how to include interceptor in Angular
    2. Execution flow
    3. Benefits
    4. Potential issues
How to get the actual (real) background color of an HTML elementArticle contains
  1. Why does the page have a transparent background color by default, even though browsers display a white background?
  2. Why getComputedStyle returns transparent value?
  3. Demonstrating the behavior
  4. How to get the visible, real background color
  5. Workable example that determines background color for HTML root element
  6. Use cases for finding real background color
  7. Best practices
The example code and the keyboard below it.

How to get the actual (real) background color of an HTML element

In many browsers, when no explicit background color is set for the <html>

or <body> elements, they inherit a transparent background.

However, browsers often render the default background as white for visual consistency, particularly in user interfaces where a clear background is expected. This can lead to confusion when using JavaScript to check computed styles.

Continue reading “How to get the actual (real) background color of an HTML element”
Everything you need to know about the alt attributeArticle contains
  1. What is the alt attribute?
  2. The alt attribute examples
  3. The alt attribute vs property
  4. Accessibility
  5. SEO (Search Engine Optimization) and the alt attribute
  6. Backup content when image fails to load
  7. Alt text during the image loading
  8. The alt for text-only browsers
  9. Decorative images
  10. The alt attribute generator
Creating a slug from a string in JavaScriptArticle contains
  1. Creating a slug from a string in JavaScript
  2. Code explanation
  3. Example usage
Get XPath from the element using JavaScriptArticle contains
  1. Custom function to get XPath
  2. Breakdown of how it works
  3. Additional tools