A11yCore
@a11ycore.bsky.social
Making the web accessible for everyone. Resources, tools, and insights for digital accessibility. #a11y
If the widget creates any accessibility issues on any websites please use the built in feedback panel.
February 9, 2026 at 10:25 AM
If the widget creates any accessibility issues on any websites please use the built in feedback panel.
There is some vagueness in the post so we added a drop down on the site explaining a few things
February 8, 2026 at 8:44 AM
There is some vagueness in the post so we added a drop down on the site explaining a few things
2/5 First, Duplicate IDs. These break assistive references like aria-labelledby. We map all IDs, identify collisions, and rename duplicates (e.g. id-a11ycore-1). Crucially, we also parse referring attributes like "for" and "aria-controls" to update pointers to the new, unique IDs.
February 7, 2026 at 8:40 PM
2/5 First, Duplicate IDs. These break assistive references like aria-labelledby. We map all IDs, identify collisions, and rename duplicates (e.g. id-a11ycore-1). Crucially, we also parse referring attributes like "for" and "aria-controls" to update pointers to the new, unique IDs.
3/5 Next, Role Integrity. We validate role assignments against a strict map of allowed roles per HTML tag. If a role is valid but missing required attributes (like aria-valuenow on a slider), we infer reasonable defaults by analyzing the element's DOM properties or CSS layout.
February 7, 2026 at 8:40 PM
3/5 Next, Role Integrity. We validate role assignments against a strict map of allowed roles per HTML tag. If a role is valid but missing required attributes (like aria-valuenow on a slider), we infer reasonable defaults by analyzing the element's DOM properties or CSS layout.
4/5 State Mismatches are a frequent issue. We specifically hunt for focusable elements marked aria-hidden="true" that are actually visible—a trap that creates ghost tab stops. We also sync aria-disabled="true" with the native "disabled" attribute to ensure keyboard mechanics match semantic state.
February 7, 2026 at 8:40 PM
4/5 State Mismatches are a frequent issue. We specifically hunt for focusable elements marked aria-hidden="true" that are actually visible—a trap that creates ghost tab stops. We also sync aria-disabled="true" with the native "disabled" attribute to ensure keyboard mechanics match semantic state.
Finally, it is reactive. We hook into a MutationObserver to watch for added nodes. If you inject new content or open a modal, the injector immediately validates the new subtree, keeping your Single Page Application accessible without manual re-scans.
February 7, 2026 at 8:40 PM
Finally, it is reactive. We hook into a MutationObserver to watch for added nodes. If you inject new content or open a modal, the injector immediately validates the new subtree, keeping your Single Page Application accessible without manual re-scans.
1.
Detection: It instantly identifies charts from major libraries (Recharts, Chart.js) or detects raw SVG patterns like repeating rectangles or scatter plot dots.
Detection: It instantly identifies charts from major libraries (Recharts, Chart.js) or detects raw SVG patterns like repeating rectangles or scatter plot dots.
February 7, 2026 at 5:59 AM
1.
Detection: It instantly identifies charts from major libraries (Recharts, Chart.js) or detects raw SVG patterns like repeating rectangles or scatter plot dots.
Detection: It instantly identifies charts from major libraries (Recharts, Chart.js) or detects raw SVG patterns like repeating rectangles or scatter plot dots.
2.
Visual Logic: This is the critical part. If code-level data is missing, we calculate the pixel-perfect scale of the axes. We identify the tick marks to establish a coordinate system, then measure the exact screen position of every bar, line point, or scatter dot.
Visual Logic: This is the critical part. If code-level data is missing, we calculate the pixel-perfect scale of the axes. We identify the tick marks to establish a coordinate system, then measure the exact screen position of every bar, line point, or scatter dot.
February 7, 2026 at 5:59 AM
2.
Visual Logic: This is the critical part. If code-level data is missing, we calculate the pixel-perfect scale of the axes. We identify the tick marks to establish a coordinate system, then measure the exact screen position of every bar, line point, or scatter dot.
Visual Logic: This is the critical part. If code-level data is missing, we calculate the pixel-perfect scale of the axes. We identify the tick marks to establish a coordinate system, then measure the exact screen position of every bar, line point, or scatter dot.
3.
Calculation: We reverse-engineer the original data value from those pixel measurements. A bar at Y=200px on a 0-500px scale becomes strict numerical data again.
Calculation: We reverse-engineer the original data value from those pixel measurements. A bar at Y=200px on a 0-500px scale becomes strict numerical data again.
February 7, 2026 at 5:59 AM
3.
Calculation: We reverse-engineer the original data value from those pixel measurements. A bar at Y=200px on a 0-500px scale becomes strict numerical data again.
Calculation: We reverse-engineer the original data value from those pixel measurements. A bar at Y=200px on a 0-500px scale becomes strict numerical data again.
4.
Synthesis: Finally, we generate a hidden data table and a natural language summary (e.g., "Trending up") for screen readers.
Synthesis: Finally, we generate a hidden data table and a natural language summary (e.g., "Trending up") for screen readers.
February 7, 2026 at 5:59 AM
4.
Synthesis: Finally, we generate a hidden data table and a natural language summary (e.g., "Trending up") for screen readers.
Synthesis: Finally, we generate a hidden data table and a natural language summary (e.g., "Trending up") for screen readers.