Simple Tips to Improve your Web Accessibility

Web accessibility is the idea of making websites easily accessed by all types of people including those with certain disabilities, different languages, or lack of access to certain technology. The notion is derived from the fact that all people should be given equal opportunity to access websites regardless of their limitations. It is important for you to consider that a certain percentage of your site’s visitors will be in this category. Moreover, if your website is easily accessible to all people, this will increase the frequency people will view and use your website. When websites are properly designed, developed and edited, your web accessibility will increase because all people will be able to use, function, and navigate through your site with ease. To state the obvious, people will not visit a site that they find difficult to utilize. Therefore, increasing your web accessibility is a precursor to increasing your site’s traffic. Below is a list of various ways to increase your web accessibility, through simple modifications to your website. In my opinion, no matter what stage you are in the website process, every step of the way, you should consider making your website more user-friendly. Please do not hesitate to contact me if you have questions, and remember to post comments. Enjoy!

1. Create Meaningful Page Titles

   It is important for the title of your page to be specific, meaningful and accurate in order to make your website more accessible. It is important because your title may be the only way a person will know what sort of information for site will entail. In many websites, I see very general titles like WWW.HOME.COM, WWW.EXAMPLE.COM or even the page will be completely untitled. If a blind person enters that site for example, they will only hear the words “example” or “home” and will be completely unaware of the contents of the site. The title appears in the search engines as the name of your page, thus informing people about the subject matter of your site. Therefore, the first accessibility issue you have to solve is the title because this is a problem people will confront before they even go to your page.
   

2. Always Add Titles to your “a” Tags

   It is a good idea to add a description to every link on your page. When the user puts the mouse over the link, the title is going to appears as a description of the next page. This will help the viewer navigate through the site with ease, and will decrease their frustration thus making it more likely that they will continue using your site.
   

   <a href="products.php" title="View the list of products">Products</a>

3. Always use Tag Elements when using Acronyms or Abbreviation

   When using acronyms and abbreviations, it is important to use a tag that gives an explanation or description of the letters, because not everybody may understand what that contracted word represents. An example of this is when a newer programmer
   in the internet world enters a page about Web Design, and in the middle of the post
   he find something the acronym, “CSS.” He will not grasp the understanding unless he knows what CSS stands for. When using slang, colloquial speech, or unfamiliar contractions you should also use tag elements. By adding the tag elements to your page, you will make the website more accessible to all people regardless of their knowledge, skill level or disability.
   

   <acronym title="Cascade Style Sheets">CSS</acronym>

4. Using “alt” attributes in your Images

   There are various issues that can prevent a web user from viewing the images in your page, such as blindness or having limited technology. In order to increase web accessibility, “alt” attributes should be incorporated when adding images, therefore if the image cannot be seen or loaded; an explanation of the image appears in its place. Another option is to consider a text only browser, like Lynx, in order to avoid the issue of loading images all together and thus allowing much easier access to the information on your page.
   

   <img src="images/baseball.jpg" alt="Kids playing baseball" />

5. Label Tags for Every Input Element

   This seems like an obvious tip, but it is often overlooked when a web developer designs a form for a page. It is absolutely essential to put a clear and precise label for each and every input element in a form on your website that does not include a descriptive explanation. Plus the tag label goes associate with the input element.
   

   <label for="txtname">Name:</label><input type="text" name="txtname" id="txtname" />

6. Use Precise Language for Web Control

   In order to increase your web accessibility, it is imperative to use precise and cautious language throughout your site for web control. For example, when using input label elements in your site, it is better to use the term “gender” rather than “sex.” The reason for this is quite obvious; therefore using precise language can insure your site is accurately represented and easily searchable through a search engine.
   

7. Indicate the document language using the lang attribute in the HTML tag

   It is important to indicate the document language using the “lang” attribute in the HTML tag. It is essential, when the computer utilizes a program for speaking the contents of the website, for the program to know the language in order to decipher how to pronounce the word correctly. In addition, Google needs to know the language as well in order to assist web users in searching for sites.
   

   <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   </html>

8. Page should work with JavaScript Disabled

   If the majority of your site is comprised of JavaScript, there could be a web accessibility issue because some browsers do not read JavaScript. Hence, my recommendation is to make your main task with JavaScript disabled. This will ensure that all users can view your site regardless of the browser utilized.
   You can get this using the unobtrusive JavaScript. For example you need to load the data from the server in a div named “answer” when the user click on a a tag like this:
   

   <a href="#" title="Show user Information" onclick="javascript:getInformation()">Show Information</a>

   If you have JavaScript disabled then the user would never see the information from the server. A good alternative is this HTML:
   

   <a href="showdata.php" id="btnshowdata" title="Show user Information">Show Information</a>

   And the JavaScript would be:
   

   window.onload = function(){
       var btn = document.getElementById("btnshowdata");
       btn.onclick = function(){
              getInformation();
              return false;
       }
   }

   Why this is better? Because if the JavaScript is available the data is going to load in the div named answer. But if the JavaScript is disabled then the webpage sends the user to a new page named showdata.php that has the information from the server.
   

9. Use Colors Appropriately to Universal Meaning

   Another important suggestion to increase web accessibility is to use colors in accordance to their general universal meaning. There are certain colors that can be understood by all people regardless of disability, age, language or computer knowledge. The use of these various colors appropriately is essential because their understanding transcends all limitations. For example, red means error, green means correct or yellow means alert. To take this solution one step farther, try not to depend solely on colors because there may be users who are color blind or with monochromatic screens. For example, instead of using a red asterix to indicate a required field in a form, it is better to write out the complete word: “required” in red.
   

10. Avoid the use of CAPTCHA in forms

    Another web accessibility element to try to avoid whenever possible is the use of CAPTCHA in forms, because this makes it inconvenient for people with disabilities, people with limited technology, and for people with limited computer skills. If it is absolutely necessary for you to use CAPTCHA, try to make it as simple as possible and please add an audio alternative for people with incapacities.
    

11. Elements to Consider when Integrating Music

    In my opinion, unless your site is focused on music, you should never use music 100% throughout your site. Studies have shown that web users consider this to be very annoying and bothersome. However, if you do want to integrate music into your site, make
    sure you have at least one bottom to cancel or silent it. Moreover, if the music is essential to understanding of the subject of the site, make sure to add a tag element that gives an explanation of what is being played, for people with lack of hearing.
    

12. Use a Well Structured Form

    When using forms on your page, make sure the form is well structured to ensure that it is easily used and understood by all people. If the form is designed well, the user can move inside the form with the keyboard, thus the lack of technology would not be an issue. Moreover, if the form is in another language, the user can generally understand what is needed if the form is universally designed. If the form is not well structured then use the tab index to make sure the user can move properly throughout the form.