Category: Html Information

Pluro Accessibility in SPAs (React & Angular)

Audience: Front‑end developers Goal: Ensure the Pluro accessibility component (scanner/fixes/widget) re‑initializes correctly on client‑side route changes and dynamic DOM updates in Single‑Page Applications (SPAs). Replace API placeholders with your actual calls, e.g. window.Pluro.mount(…), window.Pluro.destroy(), or window._pluroScan(). 1) Why SPAs need special handling In React/Angular apps, navigation uses the History API (no full page refresh). If […]

Read More →

Understanding tabindex: Best Practices for Accessible Web Design

Managing keyboard focus is a critical part of building accessible websites and applications. One of the most common ways to control focus is through the tabindex attribute. However, incorrect use can harm accessibility instead of improving it. This guide explains how and when to use tabindex=”0″ and tabindex=”1″ (or other positive values). tabindex=”0″ Definition: Inserts […]

Read More →

Guide: Converting HTML Tags Dynamically with Pluro

Overview Some websites generate elements dynamically after the page has loaded.In these cases, accessibility fixes such as changing h2 to h1 or converting a div to a p must happen dynamically as well. With Pluro, you can add custom JavaScript or CSS directly inside your domain configuration: 👉 Path:MyPluro → [Your Domain] → Settings → […]

Read More →

Add new aria expanded attribute

Installation center -> Advanced options -> Blocks configurations Explanation:Aria expanded is an attribute that allows the user to know the expandability status of the specified element. The Aria expanded attribute is set on an element to indicate if it is expanded or collapsed depending on its actual state, and whether or not this element is […]

Read More →

Add new aria attribute

Installation center -> Advanced options -> Blocks configurations Explanation:Aria attribute is a value that can be set for the specified HTML elements to improve their accessibility (enhance for people with disabilities the web content/web apps and especially JavaScript code).Aria attribute modifies incorrect or incomplete code to create a better experience for those using AT by […]

Read More →

Add new tabindex

Installation center -> Advanced options -> Blocks configurations 1. Add new tabindexExplanation:The “Tabindex” attribute is used in HTML to set rules related to principles of elements focusing. With the help of tabindex, you can allow or prevent elements from being sequentially focusable during the keyboard navigation (by pressing the button “Tab”) and determine their relative […]

Read More →

Making SVGs and Icons Accessible

Inline SVG To make an SVG accessible, follow these steps: Example: <svg aria-labelledby=”title”> <title id=”title” lang=”en”>title</title> <g> <rect fill=”_____” /> </g></svg> Icon Fonts Icons can effectively communicate information without words. To ensure icon fonts are accessible, consider the following best practices: Example for Decorative Icon: htmlCopy code<i class=”fa fa-bicycle” aria-hidden=”true” title=”title”></i><span class=”screenreader-text”>title</span> Example for Contextual […]

Read More →
Older Entries →