Accessible content increases your chances of reaching more people and ensures that you exclude no one. At the same time, focusing on accessibility also improves your SEO performance. In this guide, I'll show you how accessibility and SEO go hand in hand when creating your web content.

Why is accessibility more than just a 'nice to have'?

The World Health Organization reports that over 1.3 billion people worldwide, or 16% of the global population, live with a disability.

For individuals living with disabilities, issues with accessibility mean that many websites are frustrating, or even impossible to use.

The good news is that you can make a difference! The latest WebAIM Million Report shows that the biggest accessibility issues are related to site content. That's where you come in.

Here are some of the findings from the latest report:

• 81% of homepages have low text contrast
• 54.5% of images have no or poor alt text
• 48.6% of forms have no captions
• 44.6% of links do not say where they go

To overcome these issues, it helps to know the WCAG guidelines.

WCAG: Your compass for accessibility

The Web Content Accessibility Guidelines (WCAG) are your basic framework. The main principles are:

1. Perceivable: Can anyone understand your content? Example: A podcast needs a transcript for the deaf.
2. Operable: Can anyone navigate your site? Example: All functions must be usable by keyboard.
3. Understandable: Is it clear what you are trying to say? Example: Complex technical terms are explained clearly.
4. Robust: Does it work with different technologies? For example: Your site runs on both the latest iPhone and older Android devices.

WCAG 2.2 has three levels - think of them as medals:

• Level A: Bronze - The bare minimum
• Level AA: Silver - the standard most people should aim for
• Level AAA: Gold - The best for greatest accessibility

For most websites, level AA is the right way to go. This is also the level required by the European Accessibility Act from June 2025.

It is also worth noting that WCAG 2.2 was published in October 2023, with the most recent update in December 2024, and they have introduced new success criteria. So it's worth keeping up to date.

Don't worry: you don't need to know all the WCAG rules by heart to get started. Focus first on the basic idea that everyone should be able to use your content. For the technical details, use practical tools and checklists to start.

Typography that helps everyone

Let's start with an important element. Good typography makes the difference between skimming, and reading to the end. Here is what you should keep in mind:

• Font size: At least 16px for the main text. Smaller fonts are tiring to read and discourage users.
• Line spacing: 1.5 times the font size makes the text airier and easier to read.
• Line length: 50-75 characters is ideal - about the width of a smartphone in portrait mode.
• Contrast: At least 4.5:1 between text and background (WCAG AA standard).
• Alignment: Left-aligned with reading direction from left to right.
• Font: Use familiar fonts like Arial or Open Sans. With fonts like these, similar letters are easily distinguishable.

The WCAG itself mentions font size in the context of contrast, which I’ll talk more about later. The guidelines also recommend the inclusion of 'scalable' text. This means that users should be able to increase the size of text by up to 200% using standard browser features, without losing any content or functionality. Since you may not be able to do this by yourself or right away, starting with a minimum font size is a good idea.

A brief excursion into variable fonts

Variable fonts make your design more flexible and efficient. They have many benefits:

• More design freedom: You or your designers can adjust the weight, width and slant of the font precisely and continuously. This allows you to fine-tune your design.
• Better performance: A single font file (as opposed to multiple, static ones) immediately saves loading time (and the locally hosted file is also GDPR compliant).
• Responsive: Variable fonts are responsive and adapt to different screen sizes and resolutions. This ensures legibility across a wide range of device types.
• Accessibility: These fonts are adaptable and improve accessibility. For example, users can zoom in or increase contrast.
• Consistent branding: These fonts help you to maintain brand identity across various media types and channels.

Structure - the common thread

Besides typography, your content's structure is crucial. It matters for users, screen readers, and search engines. Having a clear structure makes navigation easier, and helps both users and screen readers understand your content.

Think of your headings as signposts:

• H1: Your main entrance - appears only once
• H2/H3: Main sections and important sub-sections
• H4-H6: Detailed structure where necessary

These are the four golden rules for headings:

1. Don't skip levels (i.e. don’t jump from an H1 straight to an H4)
2. Structure before styling
3. Include relevant content after each heading
4. Use the most important word(s) first (e.g. “Accessibility explained” instead of ”'Explaining accessibility”)

A clear structure with helpful headings will let readers find information quickly. This increases the chances of your most important messages getting through.

Since this structure is vital for screen readers, let's examine how they work.

Understanding screen readers: Your digital reader

Like you, screen readers follow a clear structure with meaningful headings. A logical hierarchy of headings can help blind and partially sighted people find the information they seek.

Accessibility and SEO go hand in hand. Well-structured content with relevant keywords in the headings improves both. They can also have a positive impact on your rankings. Besides headings, a few other easy fixes can help screen reader users.

The latest WebAIM Screen Reader User Survey identifies these key factors for an easy-to-use website:

• A clear hierarchy of headings is the primary navigation method for 71.6% of users.
• Meaningful alt text (one of the top six accessibility factors)
• Logical tab order (one of the top 5 for users)

These figures show that you can make a big difference with just a few targeted adjustments. Here are the points to keep in mind:

• Always describe images with ALT text. This text should contain the most important information the image conveys, not just words like “graphic”. Ask yourself: How would you describe this image to someone on the phone?
• Make your links clear: “Click here” is not helpful to anyone. Better: “Click here for directions”.
• Define your headings clearly when structuring your tables. Otherwise screen readers will have no idea what is where.

Test it yourself:

1. Install NVDA (free screen reader, used by 37.7% of users).
2. Close your eyes
3. Try to navigate your site

Pro tip: Test your site with different screen readers and browsers. Results may vary. This will help you make your content more accessible.

Another area where screen readers often struggle is forms. Let's take a look at how to make them more accessible.

Making forms accessible

The WebAIM Screen Reader Survey found that complex forms are a top issue for screen reader users. They are often the point at which users need to interact with your site - and sadly, the point at which many fail.

Imagine trying to fill out a form, but you don't know what goes where. Screen reader users feel similarly lost with poorly designed forms. Labels are the key here. They show which information needs to go in each input field.

If something goes wrong, show meaningful error messages. “Input invalid” is very frustrating if you can't see what the issue is.

In summary, the following considerations are important:

Clear labelling

• Each field needs a label. It should describe the expected input. Example: A field for entering a name should be labelled “Name”.
• The label must be placed directly above the input field. This makes it clear which label corresponds to which field, enhancing usability.
• Labels must be linked to input fields programmatically. Each label in a form must be associated with its corresponding input field. The attribute “for” is used for this. This ensures that clicking the label focuses the input field. It helps all users and assistive technologies to navigate and complete forms.
• Use aria-required='true' for required fields. This indicates to assistive technologies that the field is mandatory, and helps users to understand which fields they must fill out.

Error handling

Good error handling helps users fix mistakes on forms with minimal effort. These are the key points to remember:

• Display errors directly in the field. If a user makes an error, show the error message next to or within the relevant field. This feedback helps users to understand what is wrong.
• Explain how to fix the error. Provide clear instructions for users to correct mistakes. For example: “Please enter a valid email address (example@domain.com)”.
• Ensure that error messages are recognizable to screen readers. Error messages must be accessible to assistive technologies. Use attributes like "aria-describedby" to link the error message to the field. That helps screen readers to announce the message with clarity.

Grouping

Grouped related fields help users to understand the structure of a form. Some best practices are:

• Group related fields (e.g. with "fieldset" and "legend"). Put in place elements like "fieldset." These help group related input fields together. Provide a “legend” describing the group. Besides enhancing accessibility it also improves the visual layout of your form.
• Include clear headings for each section: Use descriptive headings for each form section. This will help users enter the required information without delay.
• Maintain logical tab order: Users should be able to use the Tab key to navigate the form in a logical order. This order should follow the visual layout of the form.
• Support autofill: Use autocomplete attributes to improve the user experience. Set "autocomplete=name" for a field that allows browsers to suggest names.

These practices are key to making accessible forms for all, which enhances both user experience and compliance with accessibility standards.

Test Tip:

• Fill in your form using the keyboard only
• Test with a screen reader such as NVDA
• Verify that the system reads out the error messages
• Make sure the tab order is logical
• Use tools such as WAVE for a more comprehensive check

Important: These adaptations help people with disabilities. They also improve usability for everyone who visits your site. If you can't adapt the forms yourself, ensure you communicate these needs to your dev team.

A brief look at ARIA (Accessible Rich Internet Applications)

ARIA is a set of attributes you can add to HTML elements to improve the accessibility of your web content. This is particularly important for dynamic content and advanced user interfaces. ARIA helps bridge the gap between standard HTML and the needs of users with disabilities. ARIA tags provide context and information for assistive technologies such as screen readers.

For example, ARIA attributes can show an element's state. They can show whether a menu is expanded or collapsed. They also provide labels for elements that have no visible text. By using ARIA correctly, developers can enhance website accessibility. As a content creator, or SEO you may not be able to implement this directly, but, you can submit requests to your developers.

Links: The signposts of your website

Forms are not the only interactive elements on your website. Well-designed links are also really important.

The WebAIM Million Report says 44.6% of links are inaccessible. This is mainly due to their lack of clear context. Not only does this frustrate screen reader users, it also hurts your SEO.

How to create links that help everyone:

• Meaningful link text (“read accessibility guide” instead of “click here”)
• Explain if links open in new tab, window or start a download (“opens in new tab”, “PDF, 2MB”)
• Double visual highlighting (colour + underline)
• Logical grouping of related links
• Consistent link design across the site
• Use aria labels for icon-only links to clarify the link's purpose for screen reader users

Readability that resonates

Readability is the key to ensuring your content is accessible to everyone. An important tool is the Flesch Reading Score, or Flesch Kincaid Grad Level. The first rates the readability of your text content on a scale of 0 to 100. The second shows the equivalent US school reading grade.

Both scores help you assess whether your content is reaching your target audience.

Here are the main guidelines:

• 70-90 points: Ideal for the web, around 6th-8th grade
• 60-70 points: Good for business communication
• Below 60 points: Better to revise, except for specialised or technical content

Here’s a specific example:

Nay:

❌ The systematic implementation of optimised content structures significantly maximises the user experience.

Score: 0 - Hardly anyone understands this!

Yay:

✅ Good, structured text makes readers happy. They find what they are looking for quickly.

Score: 73.3 - Perfect for the web!

Pro tip: Tools like Hemingway Editor will score your text. But remember: the score is a guideline, not a law. Sometimes you need technical terms or more complex sentences - just explain them directly.

These techniques will make your text easier to understand:

• Important information at the beginning (inverted pyramid)
• Short sentences of 21 words or fewer
• Group paragraphs of 2-3 sentences
• Explain technical terms the first time they appear
• Use the active voice instead of the passive voice
• Express one thought per paragraph

Remember that simple, clear language not only helps the average reader. It also makes your content more accessible to people with cognitive or learning disabilities. In this way, you can reach a wider audience and improve the accessibility of your website at the same time.

Combining keywords with natural language

Good copy should sound natural, even when optimised for search. Unfortunately, a lot of keyword-optimised content sounds jerky and is difficult to read. This not only frustrates your readers, but also affects accessibility.

How to balance SEO considerations and readability:

• Use synonyms and related terms. Instead of repeating "accessibility" ten times, use terms like "inclusive design" as well.
• Spread keywords around. The best places are headings, the first paragraph, and the abstract.
• Think in themes, not just keywords. Google links 'accessible', 'screen reader', and 'WCAG'.

A practical example:

Nay:

❌"Creating accessible websites for accessible websites that are accessible".

Yay:

✅”Design accessible websites that everyone can use, regardless of their needs”.

Pro tip: Read your text aloud. Are you stumbling over words? Your readers will do the same. Good writing sounds natural - to people and to search engines.

A balanced keyword strategy supports both your SEO and accessibility goals. Using varied and contextual terms helps both search engines and users.

Visual aspects are also important for accessibility, let’s talk about color and contrast…

Colour and contrast: more than beautiful design

Colour and contrast are not just aesthetic choices. Around 8% of men and 0.5% of women have a form of colour blindness (Colour Blind Awareness Study). Also, people with visual impairments or poor quality screens can be impacted too.

Contrast ratios seem complicated, but in simple terms: the bigger the difference in contrast between the text and the background, the better. Think of white text on a light grey background - hard to read, isn't it? That's exactly what contrast ratios measure.

WCAG 2.1 gives clear guidelines for contrast ratios:

Level AA (the one we all should aim for)

• 4.5:1 for normal text: Clearly legible, resembling black text on a white background.
• 3:1 for large headlines: Offers greater flexibility because larger fonts enhance readability.

Level AAA (the gold medal)

• 7:1 for greatest accessibility and normal type: Most contrast for best legibility
• 4.5:1 for large fonts
• 3:1 for user interface components and graphic objects

Instead of complicated calculations:

• Use the WebAIM Colour Contrast Checker
• Test different colour combinations
• Try to avoid greens and reds or to bright colours
• Create a style guide of proven combinations

Never use colour alone to convey information. Instead:

• Complement colours with clear symbols or enhance with words/labels
• Use additional patterns or shapes
• Offer textual alternatives

Pro tip: Do the greyscale test - convert your text to black and white. If you can read it well, your contrasts are probably ok.

Images and media that everyone can experience

Visual and audiovisual content makes your work come alive. It helps people grasp complex topics. But not everyone can see images or hear videos. The latest WebAIM Million Report shows: there are an average of 55.6 images per homepage, 21.6% of which have no alt text. In the case of linked images, the alt text is missing on 1 in 4 images.

Use images correctly

Alt text is your most important tool for accessible images. The study shows that 14.6% of existing alt texts are problematic because they only contain words like “image”, “graphic”, “blank”, file names, or duplicate text.

Alt text should provide a detailed description of what the image shows and its function. Remember: search engines and screen reader users ‘see’ your images through these descriptions.

How to make images accessible to everyone:

1. Meaningful, descriptive alt texts
   1. Describe what is important in the image and what function it has
   2. Avoid generic descriptions such as ‘image’, ‘photo’ or file names
   3. Pay particular attention to alt text for linked images. The context is especially important here.
2. Infographics and diagrams
   1. Provide complex information additionally as text
   2. Describe trends and key messages in writing
   3. Offer alternative representations, e.g. in table form
3. Decorative elements
   1. Label purely decorative elements with empty alt text (alt=””)
   2. This way you avoid unnecessary distractions for screen readers
4. Structured data
   1. Use schema markup for images and videos. It will help search engines find them

Pro tip for alt text:

✅ Good: “Barista pours milk foam into coffee cup, forming a heart pattern”

❌ Bad: “Picture of coffee” or “coffee-final-02.jpg”

For each image, ask yourself: What would I tell someone who can't see the image? The answer is your alt text

Designing accessible video and audio content

Images are the beginning - modern websites also thrive on audio and video content. The same applies here: content only fulfills its purpose if everyone can use it.

As multimedia content gains importance, accessibility remains crucial. The WebAIM study shows that many websites lack basic accessibility. If images are not accessible, this often applies to more complex media, too.

Videos and audio content like podcasts are great formats for explaining complex topics. But without the right additions, you're excluding a lot of people - and giving away SEO potential at the same time. A study by Moz shows that pages with transcripts have an average of 15% more organic traffic.

What you need for accessible video and audio content:

• Quality subtitles (not auto-generated ones, or not without post-editing)
• Offer a text-based transcript
• Audio descriptions for important visual elements
• No rapid image changes (max. 3x per second)
• Provide a short content summary
• Optional: Sign language version for important content, like pre recorded webinars
• Minimise background noise

When choosing video and audio players, note the following:

• Keyboard control must be possible
• Clear start and pause buttons
• Offer speed control
• No Autoplay

The digital A11y project has an overview of accessible media players.

Pro tip: A good transcript is an opportunity! You can use it as a blog content, for social media, or as the basis for other content formats.

Multimedia content is only one piece of the puzzle. It's just as important that all visitors can navigate your website using a mouse, keyboard, or voice control.

Navigation and orientation

Imagine entering a large building with no signposts - frustrating, isn't it? People feel the same way on poorly structured websites. Here's how to make navigation more accessible:

Clear structure:

• A consistent menu on all pages helps users to understand where they are and where they can go next
• Insert breadcrumbs that show the current path. This allows users to see their current location within the site hierarchy. Breadcrumbs also help users to easily navigate back to previous pages.
• Provide a “Skip to main content” link for keyboard users. This lets them skip repetitive links and go to the main content.

Keyboard navigation

• A visible focus indicator assists keyboard users in navigating through interactive elements. The indicator shows which element is currently selected.
• A logical tab order ensures that users can navigate your website in a way that makes sense. These tabs should follow your visual layout.
• Enable keyboard shortcuts for key functions. This allows quick actions without navigating menus.

Mobile navigation

• Large and easy-to-click-buttons are key (at least 44x44 pixels). They ensure that users can interact easily with elements, even on small screens.
• Make sure there is enough space between links to prevent accidental clicks. This is especially important for users with cognitive impairments, but it also improves the user experience for everyone.
• A hamburger menu with a clear label provides a compact way to access navigation on mobile devices.

ARIA attributes for improved accessibility

• Label the current menu item with aria-current="page”. This indicates which page is currently being viewed.
• Use aria-label for links without visible text. This provides context for screen reader users.
• Use aria-expanded for expandable menus to inform users whether a menu is open or closed.

Test tip:

Put your mouse away and navigate through your website using only the Tab key. Can you get anywhere? Can you always see where you are? Good navigation is like a reliable travel guide - it ensures that nobody gets lost.

But how can we ensure that all these measures really work? This is where regular testing comes into play.

Content audit: systematic review and improvement

A thorough content audit helps you to identify and remove barriers to accessibility. It's best to approach this in three steps:

1. Technical analysis
   1. Use WAVE or Google Lighthouse for an initial overview
   2. Systematically check contrasts, alt texts, and heading structure
   3. Document all technical problems in a table
2. Content review
   1. Test readability with the Hemingway Editor or similar
   2. Check each section of text for a clear structure and logical build-up
   3. Check links for meaningful descriptions
   4. Make sure technical terms are explained
3. Practical accessibility test
   1. Navigate your site using only the keyboard
   2. Use a screen reader like NVDA
   3. Test your site in different browsers
   4. Get feedback from people with different needs
4. Automated testing
   1. Use tools like axe DevTools or WAVE for a more comprehensive check
   2. Use these tools to supplement manual testing, not as a replacement

Schedule for regular audits:

• Monthly: quick check of the most important pages
• Quarterly: technical analysis of the top 50 pages
• Annually: complete content audit of all active pages

Don't forget: Document all improvements. This way you can see your progress and apply successful changes to other areas.

The added value of accessible content

Investing in accessibility pays off in several ways. There are no direct ranking factors for accessibility. But, studies and experience shows it helps.

Indirect SEO benefits

• Improved user experience leads to longer dwell times
• A clearer structure facilitates crawling and indexing
• Better readability reduces bounce rates

Business benefits:

• Tapping into new audience groups and markets
• Reducing legal risks
• Strengthening brand perception as an inclusive company

A practical example: A study by SEMRUSH and BuiltWith examined 847 accessibility-focused domains. The results: on average, these sites saw a 12% increase in total traffic. Even more, 73% of the domains saw a boost in organic traffic after they improved accessibility.

Economic significance: People with disabilities have a purchasing power of about $18 trillion USD worldwide. This underlines the enormous economic potential of accessible websites.

From Numbers to next steps - let’s do this

Remember the numbers from the beginning from the WebAIM Million Report? They showed us what people are struggling with on a daily basis on websites.

With everything you’ve learned, here is what you can do to help reduce these numbers:

81% of homepages have low contrast text

Do you like reading a light gray text on a white background? Me neither! And neither do your users! So here’s what you can do:

• Use a contrast checker to try out your color combinations
• When in doubt, opt for darker text
• Let others know when you see a low-contrast design in drafts

54.5% of images missing proper alt text

You’ve probably experienced this yourself at some point. The page is just not loading which means you can’t see the picture. And the alt text be like - nope, nothing there. Annoying isn’t it? Imagine experiencing this every day on almost every website. This is what you can do:

• Describe your images with an alt text like you’re telling a friend on the phone what the image shows
• Focus on what matters like “Chart showing numbers in visitors in Q2” not “a graph with blue lines”
• Decorative images do not need alt text, but mark them as such.

48.6% of forms lacking labels

We’ve all experienced bad forms online. The difference is that most people without disabilities can still complete them. However, that’s not true for everyone, so make sure that:

• Every field has a clear purpose
• Add hints where needed and helpful
• Test your forms with just your keyboard

44.6% of links don't say where they go

As SEOs or content writers, you might know that “click here” isn’t helping search engine crawlers. But you might not realise how important link text is for accessibility. Here’s what to keep in mind:

• Descriptive link text
• Group related links logically
• Tell users if something opens in a new tab, a new window or starts a download
• Ensure there’s enough space between links to avoid accidental clicks

Your Accessibility Toolkit

To help you create accessible content, here are some tools:

• WebAIM for learning basics
• WAVE Browser Extensions for some quick checks
• WebAIM Contrast Checker for color combinations
• Hemingway Editor for clear writing
• Your keyboard for testing forms and navigation

Start Small

Remember: You don’t need to fix everything all at once. And you don’t need to aim for the gold standard. Start with one small thing today and continue from there:

Today

• Check the contrast on your current project
• Remember to add your alt text
• Make the links in your next piece descriptive

This Week

• Test a form on your site with your keyboard
• Try out WAVE or similar on one of your most important pages
• Review heading structures

This Month

• Create or download an accessibility checklist for you and your team
• Share what you’ve learned with colleagues
• Plan regular accessibility check-ins

Keep Learning

The internet and technology is evolving quickly, and so are accessibility standards. So try to stay up to date via:

• The A11y Project
• WebAIM newsletter
• Equalize Digital Learning Hub

Every small step you take helps. So start small - it’s about making the web a little bit better every day. To make it even easier to get started, I’ve created an Accessible Content Summary for you to download and save.