3 Easy Web Standards Tips For Your Site
Tags: PHP, Web Development, Web Standards
Stop fighting it already. Web Standards is becoming more and more important, and it’s time to get with the game or find yourself with broken websites in the not-to-distant future. Luckily, there are 3 little things you can do that will help you get on board quick and with minimal coding.
Tabindex
Since many people are not going to be able to use a mouse to navigate your site, you need to think about what alternative forms of navigation you have in place for them. We got text-to-speech systems out there and we got the keyboard. Now interestingly enough, both of these approaches rely on links being presented in a semantic manner, so the best way to keep your links in order is through adding the following to your links.
Anchor Text Anchor Text
Simple enough right? But when you’re dealing with dozens of links on a page, over and over across the site, this just isn’t a realistic approach. So PHP comes to the rescue;
Add this php snippet after the opening body tag
//wrap this in php tags first! $i=1;
Now whenever you have a new link to create, try this out for size…
Anchor Text
Some people still might say that this is just as much coding involved as before, but the difference here is you don’t have to remember the numerical order your links are in everytime you add a new one. Better yet, you could just build a PHP class that automatically inserts that tabindex snippet where ever an a href tag is found. I’m not going to go into that, there’s plenty of tutorials on something like this out there on the internets.
For those of you using Opera, try out your new page and you will see that all of your links are in order from top to bottom. Just hit the tab key on your keyboard and be amazed. Or somewhat amazed. Or just mildly entertained if that’s what gets you off. Whatever.
Title Tags
The next little bit of coding is just like the last one; it provides a service for the visitor to navigate your site better, however it’s an opportunity to clarify what’s on the other side of the link. Don’t even worry about keywords or anything like that, this is about usability for visitors. So let’s use the same stuff as before, but with our new friend the title tag in place.
Anchor Text Anchor Text
That’s all there is to it. Something I frequently do when I build sites is serve up the content from a MySQL table (page titles, meta tag info, and body text) and tie the link to the other page with its respective page title. But that’s just me on that one, I’m always about shortcuts where ever I can find them. Otherwise, think about how to summarize that target page with no more than 8 words.
Forms
Forms are notorious for giving web developers grief when it comes to validation for both XHTML and for WAI compatibility. But from what I’ve learned, it’s all about adding a label, accesskey and making sure the text fields name and id match the label. Let’s have a look;
Pretty self explanatory right? But you might not know what the heck an accesskey is… so if that’s the case let me explain. The accesskey is used for visitors who use their keyboard for navigation. So in our example, if they hit SHIFT-ALT and whatever accesskey, it will jump them to that form field. But, as fate would have it there is something seriously wrong with this whole system. People who use this system usually already have their accesskeys mapped out to different functions inside and outside their browser, so your fancy attempt to help them might actually backfire.
Do I have a solution? Nope! This is one of those things that is a major issue for Standards driven web developers and the organizations involved in standardizing functionality and the tools that get used. It sucks, but for now that’s how things are. Nevertheless though, keep doing it anyways, because it will help someone at some point.
Conclusion
Taking these steps is always a good measure to take. It might take you a little extra time, but believe me when I say that it’s worth it. Your visitors will thank you if they are in need of these features.
Do I employ these measures? Yes I do, on the main parts of my site, but not all of them here on the blog. This is an area where Wordpress could step up some more I think. There are some plugins out there that touch on this, but it’s just gonna have to be done by developers on their own blogs until Wordpress implements something.
