Structuring a page and it’s assets makes it properly machine-friendly, whatever that machine is. Add the kind of common sense techniques that allow users (including users with disabilities) and machines to get straight to meaningful content, and for sure you are moving towards make your site easily accessible and search engine friendly.
We all are familiar with the power of WordPress which allows a newbie or non technical person to design and develop their own web property. This platform is simple to set up, and provides a solid framework for the themes and plugins that will determine how your content and functionality will go on for any visitor.
If you want your site to be accessible to individuals with disabilities, you’ll find that basic WordPress has much that is needed to facilitate the development of an accessible website, and it is not hard to take that further through the addition of plugins and good technique.
Before we get started, there are two important factors to be aware of. First, implementing these four techniques alone will not make any website totally accessible for everybody to the extent of complying with all the necessary requirements but it will address the most common barriers to web access and deliver much greater accessibility.
Second, it’s important to understand that accessibility can only be achieved through the co-operation of design, development and best content authoring practices. A designer may design an accessible theme, a developer might add accessible functionality, but if a content author inserts a meaningful image without an alt tag, the full meaning of the web page will be inaccessible.
It is well known that the single greatest barrier to web accessibility is using alt text properly to describe images on a web page. If this single point was addressed by everyone who builds websites, it would eradicate the largest number of accessibility complaints. And that’s the reason why we felt the urge to develop an amazing plugin SEO Image Optimizer, which fills the gap of missing alt tags on the images.
The fundamental point to understand is that if you are going to put images on your site, it is essential that you label them correctly with alt text. In other words, every image you are putting online must have a meaning for the robot to list your image on the search engines.
The information in the alt tag allows users of screen readers (which read web pages aloud to users with visual disabilities), text only browsers and slow connections that won’t load images to understand the information conveyed by images.
If an image does not have meaning, for example it is used purely for decoration, there are two ways to deal with it. If you load it as a background image using CSS, screen readers will ignore it and the image does not require an alt tag (be careful, becuase this also applies to meaningful images: if you load it in background, the screen reader will ignore it). If an image is displayed using HTML but is purely decorative, then use the alt tag but leave it empty. That tells the screen reader that an image is present but has no meaning for the user and can be ignored which allows to make your site more accessible for a reader
When you put label on your images, use some descriptive text that will allow people who cannot see to understand what the meaning of the image is. This requires judgement: why the image has been here and what message does it convey, and what words will best convey that same meaning. Don’t get caught up in literal descriptions of every visual detail, convey the meaning.
A classic example is an image of a magnifying glass used as a button to start a search. The image has a meaning, so it should be described. Describing it as “a magnifying glass” does not help the user. What they need to know is that clicking on this button will start a search, so alt text of “click here to search” or even just “search” may be most appropriate.
Only images that serve a purpose must be labeled. Examples of these are as follows:
Images that are used as buttons
Images that are used as links
Images that are used for any other controls
Images that directly relate to the content
This technique applies to all websites, of course, not just WordPress sites. WordPress, however, makes it easier than most, firstly by allowing the content author to switch between Visual and HTML views, and secondly by providing a field for alt text whenever an image is inserted using Add Media functionality.
WordPress accessibility can be enhanced by using a variety of plugins. These plugins are easy to set up, and they will enable users with a wide range of disabilities to access the site. Here are some plugins I’ve found which will make your site easily accessible.
The Access Keys plugin allows access keys to be assigned to links and controls on your website. For instance, the home link may be assigned the access key combination alt+h and the search button may be assigned the alt+s key combination. Access keys, such as the examples provided, enable visually impaired users as well as those with mobility issues, to easily access what they want.
Easy Retweet is a plugin that will allow you to add accessible buttons to your page that facilitate sharing your content on Twitter. This way, if individuals with disabilities wish to share your pages with their friends, they can do so without any difficulty.
AstickyPostOrderER lets you choose the order in which your content is displayed. You can choose to display content from oldest to newest or in the reverse order.
The Hackadelic SEO Table of Contents plugin enables you to provide a table of contents for either your posts or your pages. This will make your content easy to find.
WP-Polls permits individuals with disabilities to participate in any polls you may have on your site
New plugins are being developed all the time. Use the WordPress dashboard functionality to search for more. Try different plugins and ask your users with disabilities to give you feedback
When using any plugins, make sure the plugins use are compatible with your chosen theme, as well as with one another. If your plugins are not compatible with your theme, they will either not work or will cause more problems for disabled users who try to browse your site. If your plugins are not compatible with one another, your site can be rendered unusable or content may be displayed incorrectly.
When you design pages, it is vital to structure the content using headings in the correct order:
<h3> and so on. When you structure the content using headings, people using screen readers can get a summary of what the pages are about and navigate them more easily. Screen reader users can access the sections of content that they want by pressing the letter “H” to go forward and “shift+H” to go backwards.
You can label your content using headings one through six to make your site easily accessible. Check how your theme uses headings (for example, your theme may or may not apply
<h1> to the site title and that site title may or may not appear on every webpage. Either way, make sure the first heading used is
<h1> and the following headings (page title, page sub-sections, paragraph headings) descend in order through to
<h6>, where appropriate.
There is some flexibility about the ordering, but the most sensible option is to keep headings in numerical order and really don’t mix them up as it will create an hazardous situation both for user and a search engine (Do no mix them like this –>
Finally, you need to have navigation links in your site design. These navigation links will allow users with disabilities to skip past the navigation bar or other menus and search boxes and jump to certain places on the page by clicking these links. Or, the user can quickly jump to desired sections on the site. These links need to appear wherever it is necessary for users to skip to meaningful content. Examples of what these links may say are:
Skip to Main Content
Jump to Navigation Bar
Jump to Search
Some WordPress themes may already provide such links. If this is the case, you will need to check to these links to see if you have to add any of your own. Other themes, however, will not provide navigation links. Thus, you will need to add these links yourself.
I’ll repeat what I’ve said earlier that none of these steps guarantee you 100% accessible website but yes it will boost your site’s accessibility for every visitor visiting your site and your site is more accessible then 90% of the WordPress websites out there.
Visitors with disabilities will be able to navigate through your site just like other visitors. Since these visitors also include search robots, you should be assured of one thing that making your site accessible will also benefit your business and help you rank on top on the search engines ultimately resulting in more profit out of your business.
I hope this blog post was useful for you and you are taking some key elements from here that you’ll