Ananyoo Accessible Portfolio Plugin

Accessible Portfolio · WordPress · v1.0.0 (CONFIRM version)

Accessible Portfolio — the WordPress portfolio plugin built to be seen by everyone.

The Ananyoo Accessible Portfolio plugin turns your projects into a WordPress portfolio that every visitor can browse — keyboard users, screen-reader users and everyone else. Where most portfolio plugins ship unlabelled thumbnails, filter buttons a screen reader never announces and lightboxes that trap the keyboard, this plugin gets those exact moments right: real alt text on every image, filters that announce their results, and a grid that reflows to the smallest phone.

Try the live demo Get it on WordPress.org

Free · GPLv2 · No tracking · WordPress 6.5+ · PHP 7.4+  |  CONFIRM demo & WordPress.org URLs above

2 waysBlock + shortcode
WCAG 2.2 AABuilt to
Your DBItems stored locally
NoneTrackers · external calls

Why it exists

A portfolio is where accessibility quietly breaks.

A gallery can look stunning and still shut people out. Images arrive with no alt text, so a screen-reader user hears nothing. Filter chips are built from plain <div>s the keyboard can’t reach. Lightboxes open and trap focus with no way out.

These are among the most common failures on creative sites — and they all happen at the exact moment someone is trying to see your work. An accessible portfolio plugin should make browsing your projects as easy as reading a plain page. That is the one job this plugin does.

The part most portfolio plugins get wrong

Filtering everyone can find and use.

When a visitor filters your work by category, the accessible portfolio plugin follows the pattern accessibility specialists recommend:

  • Filters are real buttons with aria-pressed, reachable and operable by keyboard.
  • The result count is announced in a polite live region — “Showing 6 of 18 projects” — never silently.
  • Focus is never lost; when the grid updates, the reading order still makes sense.
  • Every target is at least 44×44px, with a thick, high-contrast focus ring.
  • With JavaScript off, the filters degrade to plain category links — nothing dead, nothing hidden.
Accessible portfolio plugin grid: category filter buttons - All, Design, Audits, WordPress - with Design selected, above a three-column grid of project cards with a focus ring on the first, and a status line reading Showing 6 of 12 projects.

In the editor · or anywhere

Two ways to place your accessible portfolio.

Drop the block into the editor, or paste a shortcode anywhere shortcodes work. The accessible markup is identical either way.

The Accessible Portfolio block

Pick a layout and go

Add the block, choose a grid, and pick which categories to show. Semantic markup, headings and filters are generated for you — no code.

Block inserter → “Accessible Portfolio”

A simple shortcode

Works everywhere

Use it in the Classic Editor, a widget, a template, or a page builder such as Elementor, Beaver Builder or Divi. Same accessible output.

[ananyoo_portfolio category="design"]

Built right

Built on the parts most portfolio plugins skip.

Every feature maps to a real WCAG 2.2 success criterion — because the accessible portfolio plugin was designed by an accessibility consultant, not retrofitted.

Real alt text, required

Every project image has an alt-text field, so no thumbnail ships unlabelled. Decorative images are marked correctly and skipped by screen readers.

WCAG 1.1.1

Semantic, grouped items

Each project is an article with a real heading; the grid is a proper list. Screen-reader users can jump project to project and know how many there are.

WCAG 1.3.1 · 2.4.6

Filters announced, not just shown

Category filters are real buttons with a pressed state, and the new result count is spoken through a live region — the change is never silent.

WCAG 4.1.2 · 4.1.3

Full keyboard, visible focus

Every item, link and filter is reachable by keyboard in a logical order, with a thick focus ring and targets at least 44×44px.

WCAG 2.1.1 · 2.4.7 · 2.5.8

An accessible detail view

Open a project in a dialog and focus moves in, Esc closes it and focus returns — or link straight to a full project page instead.

WCAG 2.4.3

Reflows to 320px

The grid steps down to two, then one column and never scrolls sideways. Motion respects the visitor’s reduced-motion preference.

WCAG 1.4.10 · 2.3.3

Your data stays yours

Projects are stored as a native WordPress post type in your own database. No third-party service, no external requests, no lock-in.

Private by default

Works without JavaScript

The grid is rendered on the server, so it appears with JavaScript off. Scripts only enhance the filtering and dialog; without them, filters become category links.

Robust by design

Standards-based

Built on the W3C’s accessibility guidance.

Rather than inventing custom behaviour, the accessible portfolio plugin follows the WAI-ARIA Authoring Practices for grids and feeds and the WCAG 2.2 success criteria — the same references a professional accessibility audit checks against.

1.1.1 Non-text Content 1.3.1 Info & Relationships 1.4.10 Reflow 2.1.1 Keyboard 2.4.3 Focus Order 2.4.7 Focus Visible 2.5.8 Target Size 4.1.2 Name, Role, Value 4.1.3 Status Messages

Tested for real

Tested like a real accessibility audit.

Not “we ran a checker once.” Every release of the accessible portfolio plugin is tested with screen readers, on real devices, the way an actual audit is run.

JAWSNVDAVoiceOver TalkBackKeyboard onlyColor Contrast Analyzer Deque AXELighthouseWAVEBrowser zoom 400%

Accessible Portfolio plugin FAQ

How do visitors filter my work?
Category filters are real buttons. A keyboard user tabs to them and presses Enter or Space; a screen-reader user hears the button, its pressed state, and a spoken count of the results after each change. With JavaScript disabled, the filters fall back to plain category links.
Block or shortcode — which should I use?
Whichever suits your setup. The block is easiest inside the WordPress editor; the shortcode works in the Classic Editor, widgets, templates and page builders. Both render the exact same accessible markup.
Where are my portfolio items stored?
The accessible portfolio plugin stores your items in your own WordPress database, as a native custom post type — managed like posts, with a field for the image, its alt text, a description, a link and categories. Nothing is sent to an outside service.
Does the detail view trap keyboard users?
No. When a project opens in a dialog, focus moves into it, Esc closes it, focus returns to the item you came from, and focus is kept inside while it is open. You can also link each project to a full page instead.
Does the accessible portfolio work without JavaScript?
Yes. The grid is rendered on the server, so it appears and is fully readable with JavaScript off. Scripts only enhance the live filtering and the dialog.
Will it track visitors or slow my site?
No tracking and no external calls — the accessible portfolio plugin loads nothing from third-party CDNs. Its own small CSS and JavaScript are enqueued the standard WordPress way, only on pages that use the portfolio.

Add an accessible portfolio in minutes.

It’s free on WordPress.org. Install the accessible portfolio plugin, add the block or paste the shortcode, and you have a portfolio that works for everyone — images, filters and all.

Get it on WordPress.org Download .zip (CONFIRM URL) Try the live demo

GPLv2 or later · Free forever · No registration required

Built by Shivaji Mitra — Accessibility Consultant since 2003 · Kolkata, India.
Part of the Ananyoo collection of WordPress accessibility plugins.