5 Quick Fixes to Make Your Website More Accessible
Website accessibility is usually an afterthought, and you usually don’t get enough time to handle accessibility properly. Here is a list of quick fixes that you can do that will make your website more accessible.
There are quite a few things you can do to make your website more accessible. These are just some of the important ones. If you do these, then your website is a lot more usable for disabled users.
Alternative Tags For Images
Screen readers can’t see images. Make sure you have descriptive alt tags for images that need them. For images that don’t (Rounded Corners, Shadows..etc), you should leave the alt tag blank.
1 2 3 4 |
Make Forms Accessible
Filling out forms can be a hassle for people using screen readers. Be sure to make use of the label and title tags to help them out.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <form action="submit.php" method="get" accept-charset="utf-8"> <!-- Be sure to associate labels with an input element--> <label for="name">name</label> <input type="text" name="name" value="" id="name" /> <label for="email">Email</label> <input type="text" name="email" value="" id="email" /> <!-- The title attribute can help with radio buttons. --> <p>Select an option below:</p> <p> <label for="option1">Option One</label> <input type="radio" name="option1" value="" id="option1" title="Option 1 Desc." /> </p> <p> <label for="option2">Option Two</label> <input type="radio" name="option2" value="" id="option2" title="Option 2 Desc." /> </p> <p> <label for="option3">Option Three</label> <input type="radio" name="option3" value="" id="option3" title="Option 3 Desc." /> </p> <p><input type="submit" value="Submit"></p> </form> |
Skip to Navigation / Content Link
Screen readers read from the top to bottom. If your content / navigation is halfway down the page, it can take quite some time before a user can even navigate the page. Put in links that skip to the content and navigation to help speed up use.
1 2 3 4 5 6 7 8 9 10 11 12 |
Make Content Keyboard Accessible
Not everyone can use a mouse. Make sure that you can access all your content via keyboard. Using tabindex and accesskey can help them out. The accesskey tag can be a little tricky and is riddle with problems. You have to make sure the key you choose doesn’t conflict with a browser shortcut.
1 2 3 4 5 6 7 8 9 | <!-- Make sure your access key doesn't conflict with the browsers shortcut --> <a href="http://www.devirtuoso.com" tabindex="1" accesskey="w">Website</a> <!-- The tabindex tag is probably your best solution --> <form action="submit.php" method="get" accept-charset="utf-8"> <p><label for="name">Name</label> <input type="text" name="name" value="" id="name" tabindex="2" /></p> <p><input type="submit" value="Submit" tabindex="3"></p> </form> |
Don’t Use JavaScript Without Good Reason
JavaScript isn’t quite supported in all accessibility technology. Use it sparingly, and make sure people can still access your content when JavaScript is shut off.
Of course this isn’t a complete list. There are quite a few things that need to be done for your site to be completely accessible. At least you’re on your way.
Hi, very nice post. I have been wonder’n bout this issue,so thanks for posting
Thank you. This is a a very nice concise list of tips.
Hello. I think the article is really interesting. I am even interested in reading more. How soon will you update your blog?