Make your wordpress accessible

In my last post I outlined few of the common techniques of making your blog accessible on any platform and now here I will share few of the resources that can help your wordpress accessible as it is the most common blogging platform and my favorite content management system.

WordPress accessibility on wordpress codex

Make wordpress accessible
Is the official wordpress accessibility blog and you can also follow @wpaccessibility on twitter for more information or to get in touch with wordpress accessibility team.

[slideshare id=23661598&doc=chicago-wordcamp-2013-130629111027-phpapp02]

 

This presentation gives a lot of information about wordpress accessibility and I remember seeing the video of this presentation but unable to find it now. I read the text version of slides and being an accessibility specialist would like to listen to the video for technical aspects. Once I get hold of the video link will be pasted below. Must say text version off the slide gave me the feel that this content is worth spending time and energy.

 

 

How to make your blog accessible for the blind readers

I met a lot of blogger’s in last few years who often keep asking me the same question How to make our blog content accessible? I thought to answer the question over here. Most of the blog platforms out there are accessible but there are few ground rules if followed will make sure that your content is readable by visually challenged readers.

 

  1. Choose accessible blogging      platform
  2. Describe your images
  3. Avoid read more and click      here links
  4. Add widgets on the right hand      side
  5. Use appropriate font
  6. check if all forms have      labels

 

 

  1. Choose accessible blogging      platform

 

Choosing the right platform is the key factor in making your content accessible. I personally prefer wordpress as it is the most accessible platform both at the backend and frontend. I worked with joomla and drupal earlier but don’t prefer them as drupal confused me with its backend and navigational elements of joomla in the backend are not very much accessible.

 

Even people with visual impairment can easily signup at wordpress.com for the first time and can start blogging. So choose wordpress either self hosted or wordpress.com one.

 

Describe your images

 

Most frustrating part for any screen reader user while rereading a blog post is images without alternative text. For example you are explaining a story and put a picture and a scene of the story is understood by looking at the picture, how will a person with visual impairment will understand this? So add appropriate alternative text to all images, wordpress provides this option when you add pictures.

 

 

Tips for better alternative text

 

Keep the text brief.

If there is a graphic with words on it then add a text version of it.

If there is a creative picture then explain the picture, this way you create new content.

Avoid abbreviations.

 

Avoid Click Here and Read more

 

Often I find blog posts containing click here to know more or links that do not provide descriptive text. Avoid this methodology as it may confuse the screen reader user. Best practice is to provide with full text like “click here to download the software” or “read more about this technology”.

 

 

 

 

Add widgets on your right hand side

 

Screen readers read any web page from left to right so it is important for us to avoid adding any widgets that may confuse the user. In wordpress most widgets can be added in the left hand side, right hand side or in the footer area. If you are trying to present something valuable user then break the rule of using left hand side widget and please do mention the same by providing an accessibility policy.

 

Use proper fonts

 

Look and feel of a blog is dependent on the theme used so choose your themes carefully because apart from screen reader users there is a large portion of low vision users. Since browsers like internet explorer and Mozilla can zoom in and zoomout the text, test the font once it is chosen.

 

Check if all forms have labels

 

I often see that search area, comment forms and subscribe to blog forms lack proper labeling. Screen reader users cannot understand how to take action if the forms are not properly labeled.

 

Here is a sample of a text field that has been labeled correctly:

< label for=”email”>E-mail :</label> < input type=”text” name=”email” id=”email” size=”20″>

Note that the ID and LABEL FOR must be equal to the same value.

 

 

All these actions can be full filled easily if you got a blog on wordpress as it is the most accessible CMS platform. In my next post I will take you through a list of plug-ins that can make your wordpress more robust in terms of accessibility.