The hidden SEO advantage with accessibility properties in JSON-LDArticle contains
  1. Introduction
  2. What are accessibility properties in JSON-LD?
  3. Core JSON-LD accessibility properties
    1. The speakable property
      1. How speakable works
      2. Implementation speakable in your WebPage schema node
    2. Choosing the right selectors
    3. Technical requirements for speakable
  4. Visual diagram that illustrates how accessibility JSON-LD properties act as a bridge between accessible code and search engine understanding
  5. What are the benefits of including accessibility-related data in a schema?
    1. Semantic clarity for search engines
    2. Preparation for Accessible Search
    3. Potential for enhanced visibility
    4. Strengthening E-E-A-T through technical integrity
    5. Synergy with WCAG compliance
    6. A warning on vanity metrics
  6. Testing your markup
  7. Conclusion
SEO inscription on three blocks and below it: Accessibility & JSON-LD

The hidden SEO advantage with accessibility properties in JSON-LD

While developers obsess over Core Web Vitals and keyword density, a powerful SEO signal hides in plain sight: accessibility metadata. By adding schema.org’s accessibility properties to your JSON-LD, you’re not just helping users with disabilities – you’re creating machine-readable proof of quality that search engines are already beginning to prioritize.

Continue reading “The hidden SEO advantage with accessibility properties in JSON-LD”
Removing Angular-specific data from HTMLArticle contains
  1. The utility method
    1. Example
  2. Why this matters
  3. Node.js and Jest limitations note
  4. Security note
  5. Closing thought
Fixing Chrome's "Cannot load extension with file or directory name _metadata" error on macOSArticle contains
  1. What is actually happening
  2. Quick solution
  3. Better Solution (recommended)
  4. Side note: the real _metadata folder
Google Chrome logo on abstract background. Image by Tyli Jura from Pixabay.

Fixing Chrome’s “Cannot load extension with file or directory name _metadata” error on macOS

Cannot load extension with file or directory name _metadata. Filenames starting with “_” are reserved for use by the system.

If you develop Chrome extensions on macOS you have probably seen this message the first time you zipped your Chrome extension folder and tried to reload or publish in Chrome Web Store the extension.

Continue reading “Fixing Chrome’s “Cannot load extension with file or directory name _metadata” error on macOS”
Replacing glob-all with fs.promises.glob in Node.jsArticle contains
  1. The glob-all way of using
  2. Replace glob-all with fs.promises.glob in Node.js at least 22.2
  3. Mapping old way to new way
  4. Quick conversion rule
  5. Error handling
  6. Benefits of using fs.promises.glob
  7. Example use case
  8. Conclusion
Node.js logo on the abstract background. Abstract background made by Gerd Altmann from Pixabay.

Replacing glob-all with fs.promises.glob in Node.js

As Node.js continues to get more and more native, built-in features, developers are constantly looking for ways to simplify their code and reduce dependencies on external packages. One such opportunity arises when replacing (or much better alternative to) the glob-all package with the built-in fs.promises.glob function, available in Node.js from version 22.0.0 behind the flag --experimental-glob and became un-flagged in v22.2.0.

Continue reading “Replacing glob-all with fs.promises.glob in Node.js”
Native built-in browser elements you can use today instead of ARIA or ROLE attributesArticle contains
  1. The first rule of ARIA
  2. Why move away from ARIA?
    1. Browser-engine privilege
    2. Less code, less maintenance
    3. Smaller payload, faster render
    4. Built-in resilience to future spec changes
    5. Mobile and voice-input compatibility
    6. Security and performance isolation
    7. Internationalisation for free
    8. Future-proofing for new input modalities
    9. Easier testing and audits
    10. Legal, procurement safety
  3. When ARIA is still justified
  4. Native HTML replacements for ARIA roles and attributes
  5. Conclusion
Text "Aria to semantic HTML" where "HTML" is on tiles.

Native built-in browser elements you can use today instead of ARIA or ROLE attributes

When building accessible web applications, developers have long relied on ARIA and role attributes to fill gaps in native HTML.

But today, many of those gaps are gone. Modern browsers support a wide range of semantic HTML elements and built-in behaviors that make ARIA redundant in most cases, often with better results and fewer bugs.

This shift towards native accessibility features means that developers can now create accessible web applications using built-in browser elements and attributes, rather than relying solely on ARIA and ROLE only.

We’ll explore the native built-in browser elements and attributes that you can use today to improve accessibility, and how they can replace or complement ARIA and ROLE attributes in your web development workflow. By leveraging these native features, you can simplify your code, improve maintainability, and create more accessible web applications for everyone.

Continue reading “Native built-in browser elements you can use today instead of ARIA or ROLE attributes”
Chrome DevTools XPath safety - escape the JavaScript literal not the XPathArticle contains
  1. When a simple XPath field becomes Remote Code Execution (RCE)
  2. Why document.evaluate itself is innocent
  3. The JavaScript meta-character trap
  4. Sanitizing XPath
  5. Integration recipes
  6. Solutions that fail security review
  7. Short security checklist
  8. Final words
A piece of code with the words "Security Alert" on it. Image by Elchinator from Pixabay.

Chrome DevTools XPath safety – escape the JavaScript literal not the XPath

XPath, or XML Path Language, is a query language designed to navigate through elements and attributes in an XML document. The document.evaluate() method in JavaScript allows developers to execute XPath expressions against an XML document, returning nodes or values based on the specified query. While this functionality is powerful, it also poses risks of injection attacks if user input is not properly handled.

Continue reading “Chrome DevTools XPath safety – escape the JavaScript literal not the XPath”
Make CSS blur stay within container boundariesArticle contains
  1. The problem with blur overflow
  2. Understanding the issue
  3. Solution to keep blur within container boundaries
    1. Step 1 - why the halo appears
    2. Step 2 - why transform: scale() is the cheapest margin
    3. Step 3 - why overflow: clip instead of hidden
    4. Optional speed boost: add will-change: transform to the pseudo-element
  4. Workable example - putting it together
Very blurred beach. Image by StockSnap from Pixabay.

Make CSS blur stay within container boundaries

CSS filter: blur() is a fantastic tool for adding visual interest and depth to your web designs. It creates a soft, out-of-focus effect that can be used in various ways, from creating frosted glass backgrounds to subtle focus indicators. However, by default, the blur effect can sometimes overflow the boundaries of the element it’s applied to, leading to unexpected visual results. This article will guide you through techniques to keep that blur effect neatly contained within its intended space.

Continue reading “Make CSS blur stay within container boundaries”
Accessibility automated website scans and how much can they catchArticle contains
  1. Introduction
  2. What percentage of accessibility issues can automated tools catch?
  3. What automated tools can catch
  4. Why manual testing is non-negotiable
  5. WCAG 2.2 quick-reference: which Success Criteria can be scripted, which can't, and why
Two chairs and multiple monitors opposite. One of them bears the words: "Digital Accessibility Audit in progress...". Image by Andy from Pixabay

Accessibility automated website scans and how much can they catch

Automated accessibility testing tools have gained traction due to their ability to quickly analyze web pages for compliance with accessibility standards, such as the Web Content Accessibility Guidelines (WCAG). These tools can scan a website’s code and identify potential issues, making them an attractive option for developers and organizations looking to improve accessibility.

Continue reading “Accessibility automated website scans and how much can they catch”
Formatting currency in Angular using Intl.NumberFormatArticle contains
  1. Understanding Intl.NumberFormat
    1. Key features of Intl.NumberFormat
  2. Implementing currency formatting in Angular
    1. Usage example
  3. Final words
Semantic HTML explainedArticle contains
  1. What is semantic in HTML?
  2. What is the difference between semantic HTML and traditional HTML?
    1. Traditional HTML
    2. Semantic HTML
  3. Key differences
  4. What is an example of a semantic code?
  5. Benefits of semantic HTML
  6. What is semantic HTML in accessibility?
    1. Meaningful structure for assistive technologies
    2. Improved content understanding
    3. Enhanced keyboard navigation
    4. Compatibility with ARIA attributes
  7. Does semantic HTML improve SEO?
    1. Better content structure
    2. Enhanced crawling and indexing
    3. Rich snippets and featured results
    4. Keyword context
  8. Semantic HTML enhances maintainability and code readability
  9. Web components
  10. Challenges and traps
  11. Considerations and best practices
    1. Structured data (JSON-LD)
    2. Using ARIA and role attributes
  12. Frequently asked questions
    1. Why should I use semantic HTML?
    2. Why should I worry about semantic HTML when I use structured data (JSON-LD)?
  13. Summary
Four tiles and on each of them letters: H, T, M, L. Above sentence: semantic. Image by Miguel Á. Padriñán from Pixabay

Semantic HTML explained

Semantic HTML. The term itself might sound technical and niche, but its impact on the web is anything but. It’s the foundation upon which accessible, maintainable, and search engine-friendly website content is built. Let’s dive into the core principles of semantic HTML, exploring its benefits, common pitfalls, and ultimately, why it’s a crucial skill for any web developer.

Continue reading “Semantic HTML explained”