Rayetun Accessible Blocks & Accessibility Toolkit

Rayetun Accessible Blocks combines two things in one plugin: accessible blocks, and a toolkit for checking and improving the accessibility of your whole site. Accessible blocks. Interactive components — modals, sliders, tables, mega menus, carousels, before/after, and more — built to be keyboard-operable and screen-reader-correct against WCAG 2.2 Level AA, each with a published Accessibility Conformance Report you can hand to a compliance team. An accessibility toolkit. An accessibility panel in the editor as you write, a site-wide axe-core scan with a dashboard and trend history, a front-end inspector that outlines problems on the live page, an image alt-text audit and bulk editor, readability and contrast help, scheduled email summaries, and an exportable accessibility report. Every feature described here is included in the plugin — there are no locked panels or upgrade prompts. A separate add-on aimed at agencies (managing many client sites from one place, branded client reports, and the like) may follow later; it would only add to what is already here. How Rayetun Accessible Blocks is organised

• Accessible by default — WCAG 2.2 AA is the definition of done, not a setting you switch on
• Local first — scan results, findings, and settings live in your own database; nothing is sent anywhere
• Built on core APIs — the WordPress Interactivity API, Block API v3 (block.json), and server-side rendering. No jQuery, no framework runtime; each block's script loads only where it's used
• Honest by design — it fixes markup, it never masks problems with an overlay, and it makes no compliance claim on your behalf

🧱 The Blocks

• 🪟 Modal — built on the native <dialog> element: focus handled correctly, Escape always closes, focus returns to the trigger, background made inert. No focus-trap hacks.
• 🎠 Slider (with Slide) — an accessible carousel where each slide holds any blocks. Choose how many slides show per view on desktop, tablet, and mobile; add a slide with one button. It's a genuine keyboard-scrollable region (nothing hidden from screen readers), with real prev/next and dot controls, arrows below or on the sides, and opt-in auto-advance that ships a real pause button and never runs under reduced motion.
• 📊 Data Table — a real, optionally sortable table with a caption, proper column and row header scopes, sort changes announced to screen readers, and a focusable scroll region for narrow screens.
• 💳 Pricing Table (with Pricing Plan) — plans with a real monthly/annual toggle (a keyboard-operable radio group, not a fake switch), the price change announced to screen readers, and the recommended plan marked with a text badge — never colour alone.
• 🗂️ Query Grid — a post grid with accessible filters: real labelled filter buttons (not clickable spans), the result count announced to screen readers, and a semantic list. Adds front-end post filtering, done accessibly.
• 🧭 Mega Menu (with Mega Menu Section) — a mega menu that goes inside core's Navigation block rather than replacing it. Two layouts: a single disclosure panel, or a category rail built as a real ARIA Tabs widget with arrow-key navigation. Deliberately not role="menu" — that role promises application-menu keyboard behaviour a panel of links can't honour.
• 🎬 Video Popup — a video lightbox in a native <dialog>: the player loads only when the visitor opens it — no third-party requests, cookies, or autoplay on page load — and closing actually stops playback. Focus is moved in and returned. YouTube (via the no-cookie domain), Vimeo, or a self-hosted file.
• ⏳ Countdown — a countdown timer with three presets (Cards, Solid, Minimal). The ticking digits are hidden from screen readers, so a screen-reader user isn't read a new number every second, while a text alternative gives the real deadline and the end is announced once. Counts to the same instant for everyone (resolved in your site's timezone).
• 🔀 Before / After — an image comparison you can operate with the keyboard, not just the mouse. It's built on a real range slider, so arrow keys move the divider, dragging works, and a screen reader announces the position — and both images are described, so a blind user gets the comparison too. Horizontal or vertical.
• 📍 Image Hotspot — pin clickable spots on an image, each opening a titled tooltip with optional text, an image (with an accessible lightbox), and a link. Every pin is a real keyboard-operable button (Escape closes and returns you to the pin), and — optional, on by default — every hotspot is also listed as plain text below the image, so the information never depends on a mouse or on seeing the picture. Markers clear the 24px target-size minimum; the optional pulse never runs under reduced motion.
• 🧭 Table of Contents — built automatically from your headings, as a real navigation landmark. Three styles (Card, Bordered, Plain) with an accent colour, bullet/number markers, an optional collapse toggle, and a sticky option. Headings get anchors on their own, the current section is marked as you scroll, and clicking a link moves focus into that section — so keyboard users land where they meant to, not back at the list.
• 💬 Testimonial — a testimonial or review in three presets (Card, Review, Quote). Built on a real <figure>/<blockquote>/<figcaption>, with the star rating exposed to screen readers as "Rated 5 out of 5" rather than five unlabelled symbols.
• 🗣️ Testimonials — lay out Testimonial items as a grid or carousel: choose how many show per view, with prev/next, dot pagination, and arrows below or on the sides.
• 🛍️ Product Card — a product card in three presets (Standard, Horizontal, Overlay). The title is a real heading, the image has proper alt text, a sale is announced as "Original price … Sale price …", and each button's name includes its product so identical "View product" links stay distinct. Author-populated — no WooCommerce needed.
• 🎠 Products — lay out Product Cards as a grid or a carousel. Grid wraps into rows (choose how many per view, per breakpoint). Carousel is a genuine scroll region — labelled, keyboard-scrollable, nothing hidden — with prev/next buttons, dot pagination, and arrows below or on the sides.

Both carousels respect prefers-reduced-motion, and every dot and arrow meets the WCAG 2.2 24×24px target-size minimum. 🎛️ Works on Every Block These apply to any block — ours or WordPress's own. 👁️ Conditional Display Show or hide any block by login state or user role. Hidden blocks are removed on the server, so screen readers, search engines, and feeds all see the same page a visitor does — not content hidden with CSS that assistive tech still reads out. A note on Conditional Display: it controls presentation, not access. Hidden text still exists in the post, so it can surface in site search or an export. It's stronger than CSS-hiding and weaker than a membership plugin — please don't use it to protect genuinely private content. ✨ Motion Entrance animations, parallax, and sticky positioning on any block. Every effect is skipped entirely for visitors who ask their system for reduced motion, and the code loads only on pages that actually use it. 🔍 In-Editor Accessibility Checker Every block this plugin adds gets an "Accessibility" panel that checks its setup as you build, and shows a clear all-clear when it's right.

• Flags what only the block author can fix — a dialog that only the Escape key can close, a table with no caption, a slide with no content, auto-advance set too fast, a control colour pairing below the contrast minimum
• Reading-level readout — an advisory Flesch–Kincaid estimate over your prose (WCAG 3.1.5). Advisory only: it never gates or fails anything
• Stays in its lane — interactive configuration, so it complements full-content checkers like Block Accessibility Checks rather than duplicating them

📊 Site-Wide Accessibility Scan An Accessibility screen in wp-admin scans your published pages with axe-core against WCAG 2.2 AA and keeps the results.

• Site-wide totals — errors, warnings, and dismissed findings, with a severity breakdown
• Worst-first page list — see which pages need attention, with per-finding detail and the offending markup
• Dismissed-issues log — dismiss a finding with a written reason; it's kept with a timestamp, never silently dropped
• Admin status column — accessibility status next to each page in your post list
• Uncapped counts — totals are computed across the whole site, never a capped page, so nothing is quietly under-reported

🖍️ Front-End Inspector The same checks, on the live rendered page — for logged-in editors only.

• In-context outlines — each flagged element is boxed where it actually sits, with a popover explaining the problem
• Contrast fix suggestions — for a colour-contrast failure, it computes the nearest passing colour (nudged toward black or white, whichever changes it least) and offers it with a swatch. A suggestion, never an automatic change
• Never shown to visitors — gated on a real capability check in PHP, not just hidden with CSS

This is the opposite of an accessibility overlay. It changes nothing a visitor sees; it shows problems to the person who can fix them. 📧 Scheduled Email Reports Have a summary of your accessibility findings emailed to you weekly or monthly. Off by default; you choose the address. The email reports your last stored scan — it does not run a new one, because a real scan needs a real browser to render your pages. The email says so itself, and the settings screen tells you when the last scan actually ran. 📋 Accessibility Conformance Reports Each block ships a published ACR documenting how it meets each relevant WCAG 2.2 AA success criterion, the testing environment, and any known limitations — including defects found and fixed during screen-reader testing. Each block has been tested with a real screen reader (NVDA + Firefox), and its report records the testing environment along with any defects found and fixed during that testing. 🧭 What Rayetun Accessible Blocks Will Not Do Worth stating plainly, so you know what to expect:

• ❌ No overlay or accessibility widget — no floating toolbar, no "profiles" for blindness or dyslexia. Rayetun Accessible Blocks fixes the underlying markup rather than layering a widget over it
• ❌ No compliance claim — no plugin can make a site ADA or EAA compliant, and Rayetun Accessible Blocks does not claim to
• ❌ No auto-fix of your content — the inspector suggests; you decide. Silent rewrites hide problems instead of solving them
• ❌ No data collection — no telemetry, no phone-home, no account

Automated checks are a floor, not a certificate. They catch a portion of WCAG failures; the rest needs a keyboard and a screen reader. A clean scan does not mean a page is accessible, and Rayetun Accessible Blocks says that on the dashboard itself. Compatible With

• Block themes and classic themes — blocks inherit your theme's colours, spacing, and typography via theme.json/global styles
• WordPress core Navigation block (Mega Menu inserts inside it)
• Block Accessibility Checks and other full-content checkers — complementary, not overlapping
• Any standard block editor workflow — no page builder required

1. Upload the plugin folder to /wp-content/plugins/rayetun-accessible-blocks/, or install via Plugins → Add New.
2. Activate Rayetun Accessible Blocks through the Plugins screen.
3. Add any of the plugin's blocks from the inserter — look for the Rayetun Accessible Blocks category.
4. Open the Accessibility panel in the block sidebar to see live checks as you build.
5. Visit Accessibility in the admin menu and run a site-wide scan.
6. Optional: turn on Email reports to get a weekly or monthly summary.

No configuration is required to get started.

1.0.0

• New: Image Hotspot block — pin accessible spots on an image. Each pin is a real keyboard-operable button with a titled tooltip (Escape closes and returns focus to the pin), and every hotspot is also rendered as a plain text list, so nothing depends on a mouse or on seeing the image. Markers meet the 24px target-size minimum; the pulse animation respects reduced motion.
• New: Starter patterns — ready-made showcase layouts built from the blocks (an image carousel, a testimonials carousel, a wide three-plan pricing table, a countdown promo banner, a filterable post grid, a navigation bar with a mega menu, and a map with location hotspots), in their own "Rayetun Accessible Blocks" category in the inserter's Patterns tab. Drop one in already filled, then edit. Each is a finished layout — handy as a starting point, and as a template for your own.
• New: Blocks tab (dashboard) — turn any of the plugin's blocks on or off in the inserter, so you can ship only the blocks you use. "Off" is the safe kind: the block stays registered, so pages already using it keep rendering — it just won't appear in the inserter. Each block shows how many pages already use it before you switch it off.
• Improved: Slider — reworked onto the shared collection engine. Each slide now holds any blocks; pick how many slides show per view on desktop, tablet, and mobile; add a slide with one button. It's now a keyboard-scrollable region (nothing hidden), with prev/next, dot pagination, and arrows below or on the sides, matching the Products and Testimonials carousels.
• New: Accessibility report export — a printable HTML report (overview, findings by WCAG criterion, per-page breakdown) and a CSV of the findings, from the dashboard. It states plainly that it is a coverage report, not a conformance claim.
• New: Conditional Display can now schedule a block between two dates (show from / show until), in the site timezone — evaluated on the server like every other visibility rule.
• New: More Motion entrance presets — diagonal fades (up-left, up-right, down-left, down-right) and zoom out, all skipped under prefers-reduced-motion.
• New: Table of Contents block — auto-built from your headings as a navigation landmark, with automatic anchors, an active-section marker, and focus moved into the section on click.
• New: Before / After block — an accessible image-comparison slider. Keyboard-operable (it's a real range input, not a mouse-only handle), draggable, and both images are described for screen readers. Horizontal or vertical.
• New: Alt-text audit & bulk editor (dashboard) — every image missing alt text on one screen, so you can write the descriptions in bulk. You type every one; nothing is guessed.
• New: Inspector — Focus order and Structure views. See the page's keyboard tab order numbered in place, and a heading/landmark outline that flags skipped levels and a missing main, for logged-in editors.
• New: Scheduled email summary — have the results of your last stored scan emailed weekly or monthly. Off by default; the email states plainly that it reports the stored scan rather than running a new one.
• New: Contrast fix suggestions — for a colour-contrast failure, the front-end inspector suggests the nearest passing colour. A suggestion, never an automatic change.
• New: Testimonials container — lay out Testimonial items as a grid or carousel (per-view counts, dot pagination, side/below arrows), on the same accessible engine as Products.
• New: Products (formerly Product Carousel) — grid or carousel layout for Product Cards, with items-per-view (no partial cards), dot pagination and arrow-position controls.
• New: Product Card block — an accessible product card with three presets (Standard, Horizontal, Overlay). Real heading title, image alt text, sale prices spelled out for screen readers, product-named buttons, and a contrast-safe overlay. Author-populated (no WooCommerce required).
• New: Testimonial block — an accessible testimonial/review with three presets (Card, Review, Quote). Semantic figure/blockquote/figcaption; the star rating is announced as "Rated N out of 5"; the avatar is decorative.
• New: Countdown block — an accessible countdown with three presets (Cards, Solid, Minimal). The per-second digits are hidden from screen readers; a text alternative states the deadline and the end is announced once. Resolves the target in the site timezone so everyone counts to the same instant.
• New: Video Popup block — an accessible video lightbox on a native dialog; the player is lazy-loaded on open (no third-party requests, cookies, or autoplay until the visitor watches) and playback stops on close. Focus handled and returned; YouTube (no-cookie), Vimeo, or self-hosted.
• New: Mega Menu block (with Mega Menu Section) — a mega menu that inserts inside core's Navigation block, in a single-panel disclosure or a category-rail Tabs layout. No menu roles; keyboard and screen-reader verified with NVDA.
• New: Site-wide accessibility scan — an axe-core scan of your published pages with stored results, a worst-first page list, per-finding detail, an admin status column, and a dismissed-issues log with reasons and timestamps.
• New: Front-end accessibility inspector — for logged-in editors, a launcher that outlines accessibility issues on the live page, in place. Never shown to visitors.
• New: Reading-level readout in the editor's Accessibility check — an advisory Flesch–Kincaid estimate over your prose (WCAG 3.1.5); never a pass/fail.
• New: Accessibility statement generator — produce a statement page from your own answers, with no pre-filled compliance claims.
• New: Site helpers — optional skip link, visible focus outline, and link underlines, each a real fix rather than a mask.
• New: Motion — entrance animations, parallax and sticky on any block; all skipped under prefers-reduced-motion, assets loaded only where used.
• New: Conditional Display — show/hide any block by login state or user role, removed server-side so assistive tech and crawlers see the true page.
• New: Query Grid block — post grid with accessible filter buttons (aria-pressed), result counts announced to screen readers, and a semantic list.
• New: Pricing Table block (with Pricing Plan) — accessible monthly/annual radio toggle, announced price switching, and recommended plan marked with a text badge.
• New: Data Table block — accessible sortable table with caption, header scopes, aria-sort announcements, row headers, and a focusable responsive scroll region.
• New: In-editor accessibility checker — an "Accessibility" panel on every block this plugin adds that flags interactive-setup issues as you build.
• New: Slider block (with Slide) — accessible carousel, keyboard + arrow-key controls, pause button, hover/focus auto-pause, reduced-motion, live-region announcements.
• New: Modal block — native dialog semantics, Escape to close, focus return, backdrop dismiss (optional), reduced-motion support.
• Published Accessibility Conformance Reports for every block, with honest VERIFIED / PARTIALLY VERIFIED status.