How to make your portfolio website accessible to everyone

An accessible portfolio is one that people can read and use regardless of how they browse. That includes people who are blind and use screen readers, people with low vision who zoom in, people who are colorblind, people who navigate with a keyboard instead of a mouse, people who are deaf or hard of hearing, and people who get dizzy from animation. It also includes anyone reading on a small phone in bright sunlight.

The person reviewing your work might use any of these tools, and a site they can't read is a site they can't hire you from. Most of what makes a portfolio accessible is simple, and much of it makes the site clearer for everyone.

A note on guidelines

There's an internationally recognized set of accessibility guidelines for websites, the Web Content Accessibility Guidelines, or WCAG, published by the W3C, the organization behind many web standards. They're detailed and technical. This guide sticks to the practical basics that matter most on a portfolio; if accessibility is part of your job, the official guidelines are worth exploring directly.

Text contrast

Contrast is the difference between your text color and its background. Low contrast, like light gray text on white, is a common reason a site is hard to read.

• Use dark text on a light background, or light text on a dark background. Avoid mid-tones against mid-tones.
• Be careful with text over images. If you put your name over a photo, add a solid or semi-transparent background behind the text, or choose a calm area of the image.
• Check small and faded text. Captions, dates and footer text are often the lowest contrast on the page, and they're also the smallest.
• Don't rely on color alone to carry meaning. If a chart uses red and green lines, add labels or different line styles too, so someone who can't tell those colors apart can still follow it.

There are free contrast checker tools online where you enter two colors and see whether they meet the guideline levels. If you're picking your own colors, it's worth trying one.

A quick test: take a photo of your screen with your phone and view it in black and white. If any text disappears or blends into the background, the contrast is too low.

Readable fonts and sizes

Readable text is the foundation of everything else on your site.

• Choose a plain font for body text. Decorative, handwritten or very thin fonts can work for a name or heading, but long paragraphs should be in something simple.
• Keep body text comfortably large. If you have to lean in to read it on a laptop, it's too small. On phones, small text is even harder.
• Give lines room to breathe. Generous spacing between lines and between paragraphs makes text easier to follow, especially for people with dyslexia or low vision.
• Avoid very long lines and large blocks of all capitals or italics. All are tiring to read.

Where you have control over styles, err on the side of larger and simpler.

Alt text for images

Alt text is a short written description attached to an image. Screen readers read it aloud, and it appears if an image fails to load. On a portfolio full of screenshots and photos, alt text is the difference between a blind visitor understanding your work and hearing "image, image, image."

Good alt text describes what matters about the image in context, in a sentence or so.

Before: "screenshot1.png" or "image of project"

After: "Mobile checkout screen showing the three-step process, with the order summary at the top and a single Pay button."

A few guidelines:

• Describe the purpose, not every pixel. Ask what a sighted visitor would take away from the image, and write that.
• Don't start with "image of." Screen readers already announce that it's an image.
• Keep it short. If a complex chart needs a long explanation, put the key point in the alt text and the details in the text on the page.
• Decorative images can have empty alt text. A background texture or divider doesn't need describing, and skipping it saves screen reader users from noise. Many builders let you mark an image as decorative.
• Your profile photo can simply have your name: "Priya Shah."

As the guide on helping people find your portfolio in search explains, describing your work in words also helps search engines understand it.

Descriptive link text

Screen reader users often jump from link to link to scan a page, hearing only the link text. A page full of "click here" and "read more" links gives them nothing to go on.

Before: "To see the full project, click here."

After: "Read the full checkout redesign case study," with the words "checkout redesign case study" as the link.

Make the link text say where it goes. The same goes for buttons: "Download my resume (PDF)" is better than "Download." If a link opens a file or leaves your site, saying so helps everyone know what to expect.

Avoid pasting long raw web addresses as link text too. A screen reader will read every character out loud.

Headings and structure

Headings aren't just big bold text. They create an outline of your page that screen readers can use to jump between sections, much as a sighted visitor skims by glancing at the headings.

• Use real headings, not just bold or large text, for section titles like About, Projects and Contact.
• Use them in order. Your name or page title at the top level, main sections below it, and sub-sections below those. Don't skip levels just to get a particular size.
• Make headings descriptive. "Projects" is fine. "Stuff" or a clever pun is harder to navigate.
• Use real lists for lists, rather than lines of text with dashes typed in. Screen readers announce how many items a list has, which helps orientation.

If you use a template, it usually handles heading structure for you, so stick to the section types it provides rather than faking headings with formatting.

Captions and transcripts for video and audio

If your portfolio includes video, such as a project walkthrough, a showreel with dialogue or a recorded talk, add captions. Captions help people who are deaf or hard of hearing, and they also help anyone watching in a quiet office or on a train with the sound off.

• Use accurate captions. Automatic captions are a useful starting point, but review and correct them, especially for names and technical terms.
• Provide a transcript for audio-only work like podcasts or voice samples. A transcript also gives visitors a way to skim.
• Describe important visual content in a video if it isn't spoken. If a demo silently shows a key result on screen, mention it in the narration or the text around the video.
• Don't autoplay video with sound. It can startle visitors and interferes with screen readers.

Motion and animation

Animation can make a portfolio feel polished, but some people experience dizziness, nausea or difficulty concentrating when things move on screen, especially large, fast or parallax effects.

• Keep motion subtle and purposeful. A gentle fade is fine; elements flying in from every side as you scroll is not.
• Avoid anything that flashes or flickers. Rapid flashing can trigger seizures in some people.
• Let people pause moving content like carousels and background videos, and avoid auto-advancing slides.
• Respect reduced-motion settings if you have control over your site's code. Many devices let users ask for less motion, and well-built sites tone down animations when that setting is on.

Keyboard access

Some people navigate entirely with a keyboard. Try pressing Tab repeatedly to move through your page. Can you reach every link and form field, and can you always see which item is focused? If not, it may be a template issue worth raising with your builder's support.

Test on a phone and with zoom

Finally, test your site the way different visitors will see it.

1. Open it on your phone. Is the text readable without zooming? Are buttons big enough to tap easily?
2. Zoom your browser in on a computer, to well beyond the normal size. Does the text get larger and reflow, or does it overlap, get cut off or force sideways scrolling?
3. Try your phone's larger text setting and see whether your site still works.
4. Try a screen reader. Most computers and phones include one in their accessibility settings. Even a few minutes of listening to your homepage is eye-opening.
5. Ask someone else to look through your site, ideally someone who uses assistive technology, and listen to what they say.

The guide on common portfolio mistakes covers other problems worth catching during the same review.

Putting it together

An accessible portfolio is mostly a clear portfolio. Use strong text contrast and don't rely on color alone. Choose plain fonts at a comfortable size. Write short, meaningful alt text for your images and descriptive text for your links. Use real headings in a sensible order. Caption your videos, keep motion gentle and make sure everything works with a keyboard. Then test on a phone, with zoom and, if you can, with a screen reader. These steps take an afternoon, and they make your work readable for every person who might want to hire you.