Altwise

Meet the team page accessibility: staff photos, bios and pop-ups for small business websites

How to make your team or staff page usable for screen reader, keyboard and phone visitors: names as text, headshot alt text, hover and pop-up bios, clear links, grids, contrast and captions.

Clinics, law firms, salons, schools, agencies and contractors almost all have a "Meet the team" or "Our staff" page. People use it to choose a dentist, check a lawyer's experience or find who to call. It often relies on photo grids, hover effects and pop-up bios, which are exactly where keyboard and screen reader visitors get stuck. This guide covers what to check, whichever website builder you use.

1. Names and roles as real text

Put each person's name and job title in text, not baked into the photo or a graphic (WCAG 1.4.5). Use a heading for each name (for example Heading 3 under a "Our dentists" Heading 2) so screen reader users can jump from person to person (WCAG 1.3.1). See heading structure.

2. Headshot alt text: short, and don't repeat

If the name is already right under the photo, the headshot can use short alt text such as "Dr. Maria Lopez" or be marked decorative, so a screen reader doesn't read the name twice. If the photo shows something the text doesn't (a clinician with a service dog, a team on a job site), describe that (WCAG 1.1.1). Avoid "headshot.jpg" or "image". See alt text examples.

3. Bios hidden behind hover

A bio that only appears when a mouse hovers over the photo can't be reached by keyboard or touch. Show the bio as text, or use a real button ("Read Maria's bio") that opens it. If content does appear on hover or focus, people must be able to dismiss it and move onto it without it vanishing (WCAG 1.4.13). See tooltips and hover content.

4. Pop-up bios that work with a keyboard

If clicking a photo opens a bio in a pop-up, the trigger should be a real button or link with a name, focus should move into the pop-up, Escape and a visible Close button should close it, and focus should return to the person you were on (WCAG 2.1.1, 2.1.2, 2.4.7). A separate bio page per person is often simpler and also helps search engines.

<h3>Dr. Maria Lopez</h3>
<p>Family dentist, 12 years</p>
<img src="maria.jpg" alt="">
<a href="/team/maria-lopez">Read Maria's bio</a>

5. Clear link and button text

Twelve "Read more" links in a row sound identical to a screen reader. Name the person in each one ("Read Maria's bio", "Book with Maria") (WCAG 2.4.4). Make email and phone links show the address or number as text. See link text and buttons.

6. Grids on phones, zoom and contrast

Zoom to 200% and check that the photo grid stacks to one column and no name or title is cut off (WCAG 1.4.10). White names laid over photos often fail contrast; put text on a solid background and check it with the free colour contrast checker (4.5:1 for normal text, WCAG 1.4.3). If a carousel or slider shows the team, see accessible sliders.

7. Videos and languages

A welcome video from the owner needs captions (WCAG 1.2.2). If staff list languages they speak, write them as words ("Speaks Spanish"), not only flag icons. See video captions.

Common mistakes

A 5-minute check you can do today

  1. Press Tab through your team page. Can you open and close every bio, and see where you are?
  2. Try it on a phone: can you read every bio without hovering?
  3. Turn on VoiceOver or TalkBack: is each name read once, with its role? See the 10-minute screen reader test.
  4. Read only the link text: does each say whose bio or booking it opens?
  5. Zoom to 200% and check the grid.

What a scan can and can't check here

Automated scans find only part of the barriers on the pages they visit. Our scan can flag images with no alt text, buttons and links with no name, many contrast problems and skipped heading levels. It can't tell whether a hover-only bio is reachable, whether a pop-up traps focus, whether alt text duplicates the name, or whether your site meets any law. Our Fix-Pack checks up to 10 pages, which can include your team page, and gives copy-paste fixes for your platform.

Building team pages for clients? The agency 5-pack gives you five white-label reports ($499, use within 12 months).

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.