How to Make Your Link in Bio Page Accessible

An accessible link in bio page is one that people can read and use whether they have low vision, use a screen reader, have limited dexterity or are simply squinting at their phone in bright sun. The good news is that a non-developer can get a long way with a few choices about colour, wording and images. You don’t need to read the full standard, although it helps to know the numbers.

This guide translates relevant parts of the W3C’s Web Content Accessibility Guidelines (WCAG) 2.2 into simple decisions.

Why it matters

Accessibility helps a wider group than people often assume.

• Permanent needs: low vision, colour blindness, screen reader use, motor impairments.
• Temporary needs: a broken wrist, or an eye test that’s left your vision blurred.
• Situational needs: bright sunlight, a cracked screen, holding a child with one arm.

A page that’s easy for these visitors is easier for everyone. And on a page with one job, which is helping someone reach their next step, any barrier means someone doesn’t get there.

Some organisations also have legal or policy requirements, particularly in the public sector. This article isn’t legal advice, so check what applies to you.

Contrast

Text

WCAG 2.2’s Level AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. In practice:

• Dark text on a light background, or the reverse, usually passes.
• Pale grey on white usually doesn’t.
• Text over photos and gradients needs careful checking, since contrast changes across the image.

Free contrast checkers let you enter two colours and see the ratio. On BioFlow, the appearance settings include a contrast check that gives warnings, although it doesn’t change your choices. Read more in your colour scheme.

Buttons

WCAG also asks for at least 3:1 contrast against adjacent colours for the visual information needed to identify interface components. For your page, this means two checks:

• Button text against the button colour: treat it as text, and aim for 4.5:1.
• The button against the page background: people should be able to see that there’s a button there.

Don’t rely on colour alone to convey meaning. “Sold out” should say so in words, not just appear in grey or red. Some visitors can’t perceive that difference.

Tap target size

WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels at Level AA, with exceptions. Consider that the floor, not the goal. Most people find larger targets far more comfortable.

Things to check:

• Can you tap each button with your thumb, on the first try?
• Are small icons, such as social links, too close together?
• Are text links inside paragraphs easy to hit?

A good page builder usually handles button sizes, but it’s still worth trying your page one-handed.

Clear link wording

Screen reader users often move from link to link, hearing each one read out of context. “Click here” repeated four times is useless to them. It’s not much better for everyone else.

If a link opens a file, or goes to WhatsApp, say so. People appreciate knowing that before they tap.

Images and alt text

Alt text is a short description of an image, read aloud by screen readers. On BioFlow, gallery images use their title as alt text, so fill in the title for each one. If the title is blank, that image may not be described at all.

Tips for writing it:

• Describe what matters. “Three-tier wedding cake with white roses”.
• Keep it short. A brief phrase is usually enough.
• Don’t start with “image of”. Screen readers usually announce that already.
• Don’t put important information only inside an image. A price list in a photo can’t be read by a screen reader, and it’s hard to read on a small phone anyway. Add it as text too.

Choose photos that remain clear when small, and avoid flashing or fast-moving images.

Testing with your phone’s settings

You don’t need special software to find many problems. Your phone has what you need.

1. Larger text. Increase your phone’s text size and reopen your page. Does anything break or overlap?
2. Screen reader. Turn on VoiceOver on iPhone, or TalkBack on Android. Try moving through your page. You’ll quickly learn whether labels make sense. Practise turning it off first, as the controls change.
3. Greyscale. Most phones have a greyscale option. Can you still identify your main button?
4. Low brightness. Can you still read everything?
5. One hand. Can you reach and tap everything?

Fix the problems you find, starting with the most serious. Our mobile checklist covers related checks.

What you can and can’t control

On a hosted page, some things are in your hands, and some aren’t.

We don’t claim that BioFlow pages meet a particular WCAG level, because they haven’t been independently audited. If you have a legal or contractual requirement to meet a standard, test your page and ask for specifics, whichever tool you’re using. An accessible page also depends on its destinations, so check the sites you link to as well.

Beyond this, general design best practices and choosing readable fonts go a long way.

FAQ

What contrast ratio should I use?

The two numbers to remember from Level AA are 4.5:1 for body text and 3:1 for large text. Button outlines and similar interface parts also need 3:1. Any free contrast checker can give you the figure for your two colours.

How large should buttons be?

WCAG 2.2 sets a minimum of 24 by 24 CSS pixels at Level AA, with exceptions, but that’s a minimum. Aim for comfortably larger buttons with space between them. Page builders usually set the size for you, so check by tapping everything with your thumb.

Is my page WCAG compliant?

Not necessarily, and no single check can prove it. Compliance depends on the tool’s code, your content and your destinations. BioFlow hasn’t been independently audited against WCAG, so we don’t claim a level. If you need formal compliance, arrange a proper accessibility audit.

Start with three checks

Check your contrast, rewrite any vague link labels, and add a title to each gallery image. Those three steps take minutes and help a lot of people. Then try your phone’s screen reader for a minute, because it’s an eye-opening experience. You can review your page settings in BioFlow, and browse CommentLink’s features too.