Valentin Antonucci / Pexels

10 Ways to Make Your Site More Accessible

May 21 is Global Accessibility Awareness Day. Is your site reader-friendly for all of your visitors?

Today, Global Accessibility Awareness Day, raises awareness around digital access and inclusion and improving the web experience for everyone. This year, WebAIM analyzed one million homepages for accessibility issues and found that 98% of websites had at least one WCAG (Web Content Accessibility Guidelines) failure on their homepage, such as low-contrast text, missing image alt text, and empty links. These types of accessibility barriers make it difficult or impossible for some visitors — people who are blind, deaf and hard of hearing, and disabled, for example — to use your site.

We encourage you to audit your site to ensure it’s accessible for all readers; the WAVE Web Accessibility Evaluation Tool can identify various errors on your site in seconds. Here are some web accessibility tips to get you started, and be sure to explore the guidelines and resources on the W3C Web Accessibility Initiative (WAI) website for deeper learning.


Use an accessibility-ready theme

You can choose from among a variety of designs for your site, but some themes have features that add complexity, making it harder for disabled people or visitors using screen readers to access your content.

When choosing a theme, consider an accessibility-ready design, like Balasana, a free minimal theme for your business website; or Mayland, a free visual theme that’s great for photographers and storytellers. These themes have been checked by the Theme Review Team and pass basic accessibility requirements.

Examples of six accessibility-ready designs from the WordPress.com Theme Showcase

Display your site title and tagline

Many themes allow you to upload a custom header image, which is a visual way to brand your site, display the title of your blog, or promote the name of your business. But some themes may not support alternative text, or the written copy that appears in place of an image on a page if the image fails to load on your visitor’s screen.

Instead of conveying your site title and tagline within a header image, display your site title and tagline text. Go to Manage → Settings, and at the top under Site profile, fill out your Site title and Site tagline. Then, head to Design → Customize, go to Site Identity, and check the box next to Display Site Title and Tagline.

The module in My Sites where you insert your Site Title and Site Tagline

Structure your pages and posts with appropriate headings

Add headings with the Heading Block to organize pages and posts and make it easier for readers to follow your content, which is especially important for longer pages and posts. Click on the “i” icon in the top toolbar of the block editor to view any errors and incorrect heading sizes.

A popup box that appears in the block editor with information on headings and the structure of your post or page

Select fonts and colors for legibility

Fonts and colors are essential components on your site, adding personality and style and strengthening your visual identity online. Avoid font styles and sizes and color palettes that make your site difficult to read, and pay attention to contrast, or the difference between the darkness of your text and the lightness of your background.

The block editor will display an error message in Color settings when it detects poor color contrast in the specific block you’re working on.

An error message that is displayed in the sidebar of the block editor when low color contrast is detected

Clearly describe your links

When linking to another page or post on the web, make your linked text descriptive. For example, “click here” is not as effective as “learn how to apply to my writing workshop.”

A short paragraph with correctly linked text

Include captions with your images

When adding an image with the Image Block, add a description of the image in the caption underneath it. While captions are optional, they improve the experience for all readers by providing more context.

A photo of a vintage typewriter with a caption

Add alt text to your images

Alt text is essential for people who are blind or use screen readers (they can hear alt text read aloud), or people who have disabled images for speed or bandwidth reasons. Alt text is also important for your site’s SEO — it helps search engines understand what your site content is about.

When adding an image with the Image Block, go to the block’s settings on the right and add the alt text in the box under Image settings.

An example of image alt text written in the Alt Text field in the Image Block's settings

Learn more about W3C’s image accessibility guidelines.

Create easily clickable CTA areas

With the Buttons Block, you can add call-to-action buttons to your pages and posts quickly. For those of you who design and embed your own buttons with Image Widgets, make buttons, icons, and other CTA elements with wide-enough areas that are easy to click or tap from different devices.

You can apply this tip to text links as well. Tapping a linked hashtag or asterisk within a sentence, for example — especially on a small screen — may be difficult for some people.

Include captions or transcripts for multimedia content

If your site includes video content, consider adding captions or including transcripts (documenting speech, sounds, as well as actions seen on-screen). Podcast transcripts are also incredibly helpful; here’s a transcript of a recent Distributed episode with neuroscientist Adam Gazzaley.

It’s best if video and audio content does not auto-play, but if that’s not possible, options to pause or adjust the volume should be obvious on the page.

Never stop learning and improving

This list is just an introduction to a few best practices and guidelines! If you’re interested in learning more, explore the resources on the W3C Web Accessibility Initiative (WAI) website. You can also explore ways to get involved in improving the accessibility of WordPress.


Learn more about Global Accessibility Awareness Day and participate in online events, webinars, and podcasts.


Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications - please check your spam folder if you don't receive this.

Join 70,650,152 other followers

49 Comments

Comments are closed.

  1. ltsdo

    Informative post 👍

    Liked by 11 people

  2. Articlesofachurchgirl

    This is really very helpful. Thank you sharing.

    Liked by 15 people

  3. JenT

    Using accessibility guidelines as a baseline for creating websites benefits everyone. Thank you for sharing some really good tips in this post.

    Liked by 13 people

  4. alannarte

    Very good information! Thank you!!

    Liked by 11 people

  5. Shola

    Thank you sharing this insightful advice. Please what theme can I use for personal freelance web design business?

    Thank you.
    Shola

    Liked by 8 people

  6. Avatar Tea

    This is very helpful. My blog is about providing low cost budget Marketing tips for Entrepreneurs yet I don’t get traffic to my page.

    I feel this should help.

    Liked by 6 people

  7. Shikha

    Just one doubt. Is Astra theme also accessibility ready?

    Liked by 7 people

  8. Ella john

    Very good info thanks👍

    Liked by 6 people

  9. Alixha_sam

    Its way too informative ! Hope that i will gain followers through it

    Liked by 6 people

  10. Dragthepen

    Great information. Very useful.👍

    Liked by 7 people

  11. Monika Gil

    That’s so useful!
    Thanks x

    Liked by 7 people

  12. prerna choudhary

    Great insights 💯

    Liked by 6 people

  13. sakshi 's poetry

    Very helpful post for new user👍
    Thanks for sharing 💐😊

    Liked by 5 people

  14. Shamwest

    I had never thought of this before. It would be useful to have this more obvious when people first come to WordPress.

    Liked by 5 people

  15. Campbell de Burgh

    A very interesting post. I have been working on and off for several days now getting the theme we have chosen – Natural – to be Accessibility compliant. We have generally succeeded in practically everything except a very minor contrast issue on the contact form where the Wave check identifies the word “(required)” attached to the field “required” toggle as below the Accessibility contrast level. In edit mode it is red but on the site it comes out as light grey and this is unacceptable. I have tried several times to get the WordPress Happiness engineers to resolve this with a CSS addition but because we are on the Personal plan they require that we upgrade to the next level before they will help. We are not prepared to upgrade just for this and we do not need any of the facilities that an upgrade offers other than a bit of help to meet accessibility standards. This seems to be at odds with the message you give in this blog. Grateful if you can assist.

    Campbell de Burgh http://www.briantspuddle.info

    Sent from Mail for Windows 10

    Liked by 3 people

  16. ShankySalty

    Very informative post👍

    Liked by 3 people

  17. KetCage

    Very informative! Thank you!

    Liked by 4 people

  18. purposefultruth

    This is really very helpful. Thank you sharing.
    I’d love to chat more about this. I need guidance and a few pointers on how to apply this information.

    Liked by 5 people

  19. flyingadobo

    Thanks for sharing! Very informative!

    Liked by 4 people

  20. 365cstores

    Thanks for sharing such an informative article.

    Liked by 5 people

  21. Purpose Dimension Media

    Very helpful…..thank you.

    Liked by 4 people

  22. ebukaalex065

    Great insight

    Liked by 4 people

  23. Chetu Partnerships

    Really Informative post.

    Liked by 5 people

  24. Whitnee’

    Thank you for sharing this. I have learned so much by your post!

    Liked by 4 people

  25. disabilitydiyblog

    Thank you for your information! There is quite a bit of learning to be had.

    Liked by 5 people

  26. tubi

    Thanks for your informative article.

    Liked by 3 people

  27. mallysa

    This is really helpful.Thank you.

    Liked by 3 people

  28. Greg

    Like many of the bloggers, I’m grateful for these tips. I’m still very new to all this and I will attempt to implement these tips, but if I’m struggling, is there somewhere or someone I can reach out to for questions? I want to do my best and allow anyone to enjoy my site. Thanks.

    Liked by 3 people

  29. lorijesi

    Thanks it is very inspiring

    Liked by 3 people

  30. Razdeep

    Nice one… It’s really good.

    Liked by 2 people

  31. Melanie Ann George

    This is very helpful 🙂

    Liked by 2 people

  32. Asokan Manic

    Thanks Cheri for such wonderful coverage and presentation

    Liked by 1 person

  33. swapnil upadhyay

    Thanks, very interesting.

    Liked by 2 people

  34. Anaya

    very nicely explained

    Liked by 1 person

  35. Rahul K News

    Very useful information for me i really thanks to you

    Liked by 2 people

  36. koula1342

    I try to post something on my blog and I can’t do it — can you help me.

    Liked by 2 people

  37. NwekeFavourUche

    Thanks alot, it was really helpful especially the first point you made.

    Liked by 3 people

  38. Christophorouss Group

    Thank you Cheri for this tip. I found it helpful.

    Liked by 2 people

  39. Sandra

    This is really informative and helpful. The last piece of advice was perfect and very true to the nature of blogging.
    Thank you!

    Liked by 2 people

  40. rogerpj01

    Very helpful tips

    Liked by 3 people

  41. victoriarose002

    Thankyou 🙂

    Liked by 3 people

  42. dheedhi

    Thank you. This was very helpful.💯

    Liked by 1 person

  43. collinsgold

    The post is very good for beginners
    Thanks
    Collinsgold

    Liked by 2 people

Create your new blog or website for free

Get Started

%d bloggers like this: