Most portfolios are built with one job in mind: convincing someone to hire, commission or admit you. That job fails quietly when a visitor cannot read your captions, cannot tell where their keyboard focus has gone, or cannot reach your contact page at all. Accessibility is not a layer bolted on at the end. It is the same attention to detail you already give to typography and crop, pointed at whether people can actually use what you made. Work through the list below, then keep it nearby each time you add a project.
Alt text: describe the work, not the file
Alt text is the element most often written in a hurry, and it shows. "Image1.jpg" tells nobody anything, and "poster" is only slightly better. A useful description names the medium, the subject and anything a sighted visitor would take from the piece itself:
Hand-printed gig poster for a three-band bill, two-colour overprint in black and orange, condensed headline running across the top.
One or two sentences is plenty. For a photograph of an object, say so — "photograph of a ceramic bowl with a matte green glaze" sets the scene in a way "bowl" cannot. If an image is genuinely decorative, such as a divider or a background texture, give it an empty alt attribute so screen readers skip it rather than announcing an unhelpful label.
Watch for thumbnails that contain text. If a poster image includes the title and the venue, that information needs to exist as real text on the page too, in the caption or the description. Nobody should have to rely on a picture of words.
Colour, contrast and readable type
Low contrast is the most common problem on creative sites, usually because a considered greyscale palette met a white background and nobody measured it. Body text should reach a contrast ratio of at least 4.5:1 against its background. Large text — roughly 24px, or 19px bold — can sit at 3:1, and the same 3:1 applies to interface details such as input borders, icons and focus rings.
A quick check: screenshot the page, convert it to greyscale, and look again. If pale grey captions vanish, they will vanish for someone reading on a phone in daylight as well. Text placed over photographs deserves particular suspicion, so add a solid panel or a gradient scrim, or move the words off the image.
Type matters too. Body copy at 16px or larger, with a line height near 1.5, is comfortable; long passages in all caps or a hairline weight are not. Avoid colour as the only signal — an active menu item marked purely by a different hue is invisible to some visitors, so pair it with an underline, a weight change or a shape.
Keyboard first, mouse second
Put the mouse aside for ten minutes and move through the site with Tab, Shift+Tab, Enter and the arrow keys. Everything interactive should be reachable in a sensible order, and you should always be able to see where you are. Never remove the focus outline unless you replace it with something better; a two-pixel ring with a small offset does the job.
The usual breakages:
- Lightboxes that open on click but will not close with Escape.
- Focus that slips behind an open modal and never returns to the button that opened it.
- Hover-only captions, unusable by keyboard and unreliable on touch.
- Carousels that advance on their own with no pause control.
- Close buttons and icons smaller than roughly 24 by 24 pixels.
Add a "Skip to main content" link as the first thing a keyboard user reaches. It takes a few lines of code and saves somebody tabbing past your entire navigation on every page.
Clear structure and honest markup
Screen readers navigate by headings and landmarks, so give them a map. Use one main heading per page, then section headings in order — never jump from a second-level heading to a fourth because the size looked better. Style with CSS rather than choosing a heading level for its appearance.
Use elements that already mean something: a link goes somewhere, a button does something. Wrap pages in header, nav, main and footer, and label repeated navigation blocks if you have more than one. Set the page language to en-GB so pronunciation and hyphenation behave. Give every page a unique, descriptive title: "Poster series, 2023 — Your Name" beats "Portfolio".
Motion, media and interactive case studies
Video needs captions, and process reels with no narration still benefit from a short text summary. Never autoplay sound. If your hero section animates, respect the system setting that asks for reduced motion — a short prefers-reduced-motion media query handles it — and offer a pause control for anything looping for more than a few seconds.
Interactive case studies are where portfolios get inventive and where accessibility quietly falls apart. Flip cards that reveal the important part on hover should reveal it on tap and on focus too, or simply show the content at all times with a visual flourish. Scroll effects, drag-only galleries and cursor-following details all need a keyboard equivalent, a button-based alternative, or a rethink.
Forms, documents and embeds
Use real labels on a contact form rather than placeholder text that disappears the moment someone types. Keep error messages specific and beside the field they belong to, and never signal an error with red alone. A plain email address is often the better option for a portfolio.
If you publish a PDF version, export it with selectable text rather than flattened images, use a logical reading order, and add tags where your software allows. Keep the essentials — who you are, what you do, how to get in touch — on a web page as well.
Embeds are the other weak spot. Social feeds, third-party video players and gallery widgets can import controls your visitors cannot reach. Test them with a keyboard; if they fail, use a static image that links out to the original.
A final check before you publish
Accessibility is a habit rather than a one-off audit, like checking your links or resizing your images. Before a new project goes live, run through this:
- Read each alt attribute aloud. Does it convey the work?
- Check contrast on body text, captions and buttons.
- Tab through the page and confirm focus is visible at every stop.
- Open a lightbox, close it with Escape, and see where focus lands.
- Turn on reduced motion and reload the homepage.
- Submit the contact form with a deliberate mistake and read the error message.
- Zoom the browser to 200% and check nothing overlaps or disappears.
- Switch images off and see whether the page still makes sense.
None of this needs specialist software, though browser developer tools and free audit extensions will speed it up. Do it while the work is fresh and the fixes stay small; leave it a year and they become a rebuild.
There are legal duties in the UK around accessible services, and the detail depends on your circumstances. If a client asks for a formal compliance position, take proper advice rather than guessing.
Photo: rupixen / Pixabay
Related posts
More stories you’ll love reading