Accessible Portfolio Plugin: Proven WCAG 2.2 AA For WordPress

Accessible Portfolio · WordPress plugin

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. And when a project is a full case study, you control every detail — show, hide or rename each field, add your own, and mark a client Confidential in one click.

Try the live demo Get it on WordPress.org

Free · GPLv2 · No tracking · WordPress 6.5+ · PHP 7.4+

2 waysBlock + shortcode

WCAG 2.2 AABuilt to

Custom fieldsText · Link · Date

NDA-readyConfidential mode

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.

[accessible_portfolio category="design"]

Case studies, done accessibly

You control every detail — and keep private clients private.

When a project is a full case study, the accessible portfolio plugin gives you complete, accessible control over what visitors see — from the fields on the card to the structured data search engines read.

Show, hide or rename any field

Client, Completed date, Tools, Live site, Tags and Category — switch each on or off site-wide, or override it on a single project. Rename any of them too, so “Client” can read “Organisation”.

Full control

Add your own custom fields

Create fields like Budget, Duration or Role and choose a type: plain Text, a Link that renders as an accessible external link, or a Date shown in your site’s format. Set the order they appear in.

Text · Link · Date

Confidential (NDA) mode

Some clients cannot be named. One tick on a project hides the client name and the live-site link everywhere — on the card, in the listing and in the page’s structured data.

Private by default

A single case-study layout

The Portfolio details block builds the full project page — featured image beside an accessible details card, with a call-to-action — and it works on any theme with no template editing.

WCAG 1.3.1 · 2.4.6

Privacy-aware SEO data

Single case studies output schema.org structured data (JSON-LD) so search engines understand the project — and any hidden or Confidential field is left out, so a private client never leaks into your page source.

Better rich results

Translation-ready & developer-friendly

Ships a translation template so it can be localised into any language, and a WP-CLI helper for developers who manage sites from the command line.

.pot · WP-CLI

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 case-study page

Open a project as a full, single case-study page built by the plugin — a real heading order, a semantic details list and a clear focus order — no focus-trapping lightbox required.

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 view switch; 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.

Can I hide fields like the client name, or add my own?

Yes. You can show, hide or rename every built-in field — Client, Completed date, Tools, Live site, Tags and Category — site-wide or on a single project. You can also add your own custom fields (for example Budget, Duration or Role) as Text, a Link, or a Date, and set the order they appear in.

What is Confidential (NDA) mode?

Some clients cannot be named publicly. Ticking Confidential on a project hides the client name and the live-site link everywhere — on the listing card, on the case-study page, and in the structured data — so a private client never appears in your page, even in the source. A per-project override still lets you show a field where you need to.

Is the plugin good for SEO?

Yes. Single case studies emit schema.org structured data (JSON-LD) so search engines can understand each project. It is privacy-aware: any field you have hidden or marked Confidential is left out of that data, so better search visibility never costs you a client’s privacy.

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, categories and your custom fields. Nothing is sent to an outside service.

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 Grid/List view switch.

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, case studies and all. The Accessible Portfolio plugin is part of our collection of WordPress accessibility plugins, and pairs perfectly with the WordPress ADA-compliance theme.

Get it on WordPress.org Download the latest .zip Try the live demo

GPLv2 or later · Free forever · No registration required

Ananyoo Accessible Portfolio Plugin