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 opportunities 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!

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 the site will entail. On 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.

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 finds 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>

Using “alt” attributes in your Images

There are various issues that can prevent a web user from viewing the images on 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 altogether and thus allowing much easier access to the information on your page. If your image is decorative, leave the alt attribute blank or reconsider the use of the image.

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

Use Precise Language for Web Controls (inputs)

In order to increase your web accessibility, it is imperative to use precise and cautious language throughout your site for a 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.

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.

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 unobtrusive JavaScript. For example, you need to load the data from the server in a div named “answer” when the user clicks on a link 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:
onload = function(){
var btn = document.getElementById("btnshowdata");
btn.onclick = function(){
getInformation();
return false;
}
}

Use Colors Appropriately to Universal Meaning

Another important suggestion to increase web accessibility is to use colors in accordance with 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 make this solution one step further, 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 asterisk to indicate a required field in a form, it is better to write out the complete word: “required” in red.

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 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.

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 silence it. Moreover, if the music is essential to understanding the subject of the site, make sure to add a tag element that gives an explanation of what is being played, for people with a lack of hearing.

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.

Teylor Feliz
Teylor Feliz

Teylor is a seasoned generalist that enjoys learning new things. He has over 20 years of experience wearing different hats that include software engineer, UX designer, full-stack developer, web designer, data analyst, database administrator, and others. He is the founder of Haketi, a small firm that provides services in design, development, and consulting.

Over the last ten years, he has taught hundreds of students at an undergraduate and graduate levels. He loves teaching and mentoring new designers and developers to navigate the rapid changing field of UX design and engineering.

Articles: 182