Website Accessibility: How To Make Your Website Highly Accessible And Standards-Compliant
Does website accessibility and web standards really matter for an online web publisher? Is there really an advantage in spending serious time and resources to make your website standards-compliant? Unfortunately there is a lot of misinformation on website accessibility, and it looks like no-one has a solid answer on this. This is why I have asked MasterNewMedia own tech webmaster Drazen Dobrovodski, to shed some light and provide specific guidance on the issue of accessibility and of being standards-compliant.
Photo credit: Andrea Danti
First: Nobody will come after you for creating a website that is not standards-compliant. Your website will not be penalized inside Google search results, your PageRank will not be affected, and your website authority will not be squashed overnight.
Matt Cutts, from the Google Search Quality group, said in a recent WebProNews interview that Google is always going to care first and foremost about quality, about how good the page is for users, and how much this helps users find the information they need.
"There's so many people that write invalid HTML with syntax errors but still have good content. Then we need to be able to rank that good content even if somebody doesn't have something that isn't completely lint-free in terms of validation."
If you're still convinced that imperfect coding may spoil the quality of your website, you can run a very simple test using your own web browser. Simply go to the W3C Markup Validation Service (W3C is the leading authority for web standards) and check for Google's homepage compliance to web standards.
Bang. 40 errors. Only on the homepage.
Do the same for Yahoo, Microsoft, The New York Times and The Wall Street Journal.
Satisfied?
You can run this simple validation test on as many websites as you want, no matter how big they are. The simple truth is that it is very unlikely that you will find a site that is 100% web standards compliant.
This doesn't automatically translate into saying that Google, Yahoo or Facebook don't care about creating professionally coded, highly accessible web pages. They care, but clearly, you don't need to have a website that is 100% web standards compliant to obtain such results.
The key practical fact is that the more a site is accessible (displays and behaves as planned on different type of computers, operating systems and browser types) the more people will see it and will have a positive experience with it. A usable and highly-accessible website makes people stay longer on your pages and also makes them wanting to come back.
But what are the key resources you can use to start "looking into" and "improving" the accessibility of your own web site?
MasterNewMedia Tech Director Drazen Dobrovodski suggests you first tap into:
- W3C guidelines: A series of suggestions and tips to improve the code of your website that can be very helpful if taken with a grain of salt.
- User feedback: Your website visitors can help you a great deal in highlighting the components of your website that can be improved or need to be changed altogether. Ask them!
- Web analytics tools: Services like Google Analytics and others can provide you with very useful insights into possible accessibility issues as well as into understanding the type of computer setup that your readers have.
...and then look methodically at the following areas:
- HTML coding
- Differences among tables, CSS and DIVs
- Character sets
- Browser compatibility testing
- Mobile usability
- Website speed testing
- Web standards validation tools
- Web analytics tools
If you are ready to start improving your own website accessibility and its compliance with web standards, separating academic rules from what is pragmatically useful, here is a guide to help you achieve it.
Effective, practical web accessibility is much more important than correct, academically correct and 100% standards-compliant code. Here is what to look into to improve your own web site:
How To Make Your Website Accessible and Standards-Compliant?
by Drazen Dobrovodski
When you are creating a website, one of your primary concerns is to make it accessible to as many users on as many different platforms as possible. The problem is that you can run into conflicting information on how to achieve it.
For example, entire forum and blog comment wars are being fought over how much attention to pay to W3C compliance. Also, some will advise you to do it all in WYSIWYG editor while others will say that it is better to avoid them.
I am sure you saw many articles and blog posts advocating the use of DIV layers and CSS instead of HTML tables. However, you can see just as many of them saying that tables are OK.
So what are the key factors that you should consider when making your website as accessible as possible?
Let's take it step by step.
Web Accessibility Comes From Coding First
Your first decision point when making a website is: How to make the code.
People familiar with HTML, code their websites themselves.
This is indeed better because you are in full control of the code and you can be very economic in the amounts of code to make the web page load faster.
When pages load faster, your visitors feel more free to click around and see more pages. This also enables you to do small tricks such as moving your navigation links after your page content so that any ads on your site take into consideration the article content and not the same navigation links found on all pages.
If you are not familiar with HTML, then you can decide between hiring someone who is - or - using one of the WYSIWYG (What You See Is What You Get) editors.
These visual editors are very popular because they enable almost anyone to make good looking HTML pages without knowing any HTML.
However, WYSIWYG editors always leave some unnecessary code in the pages and this means that page will load slower depending on how much of that extra code is in there. Over time these editors have improved considerably, but they are not about to match the human HTML coders any time soon.
Thus the dilemma of whether or not to use WYSIWYG editors only depends on your resources and the website you have in mind.
If you are familiar with HTML, manual coding is an obvious option.
If you are not, it is probably best to decide what is cheaper for you - WYSIWYG editor or hiring someone else to code the site keeping in mind that if you don't expect the professional levels of traffic right away - then these minor differences in the amount of extra code won't matter.
Once your website gets off the ground and you are ready to invest more into it, you can have someone do a professional custom-made HTML for your pages.
What Works Best? CSS, Tables or DIVs?
If you are familiar with HTML, then you have probably seen the designers who have almost obsessive-compulsive disorder about using DIVs only.
They avoid tables, even if that means spending extra hours making everything work in DIVs across different browsers. They argue that tables are only for displaying tabular data and that is it.
Instead of saying anything pro or against DIVs or tables I will just state verifiable facts:
- Users can't tell a difference whether a page is made with DIVs or tables.
- Search engines at the moment don't care about the code - only content (quote by Matt Cutts to that effect included further down in this article)
As long as these two facts stay as they are, I would recommend a pragmatic approach: Use DIVs as much as you can, because they create less code clutter and their CSS can be stored in external CSS files which are cached by browser thus creating faster loading pages.
However, when a specific design details are cross-browser friendlier and faster to do using tables, then go for tables.
Google serves all its Google Ads in tables. Pragmatism at work.
How To Make Your Website Accessible From Everywhere
When you are coding for websites in various languages you will need to specify various character sets.
Whether your pages will use Russian Cyrilics or French diacritical characters the only way to display all characters correctly is by using a proper Character Encoding. No high science here. That one wiki page will show you all you need to implement it for a given language.
Test Your Website Across Multiple Browsers
When creating a website, one of the worst dangers for your blood pressure is making it work in all browsers.
There are many and many forum posts, blog posts and jokes about this all over the web.
You need your website to display equally in all browsers simply because no browser has absolute dominion over the web. Yes, they can say that this or that browser is currently in the lead, but those are only relatively small differences.
On the grand scale of things it doesn't take that much more time to make a website display at least decently (if not pixel-for-pixel identically) in all browsers so you should test it at least in the major four browsers - Internet Explorer, Firefox, Chrome and Safari.
SEO people will tell you that although Safari only gets about 2% of usage, you should still "cover" it, because Safari users are mostly Mac users and they are mostly very active in terms of participating in discussions, linking to what they have read (that means your page) and - not the least of the reasons - they tend to have higher income and spend more so the marketing people everywhere love them.
Web Accessibility For Mobile Devices
With the advent of mobile devices from iPhones to iPads, web developers everywhere are starting to realize that a growing amount of traffic in the future will come from devices like these.
Mobile devices mainly bring two challenges. Smaller screens and more browser compatibility issues.
1. The Small Screen Issue
The small screen issue is obvious.
Someone who is surfing the web using an iPad or even some laptop with 13" display (like a MacBook for example) will not have the same experience of the web as someone surfing on a desktop computer with a 24" monster screen.
When creating your website, check it in 1024x768 pixel resolution because that is the most commonly used setting at present.
Once your website is running, Google Analytics can tell you what screen resolutions your visitors use in what percentages.
In your Google Analytics account go to Visitors -> Visitor Segmentation -> Screen Resolutions. This will tell you in what other screen settings you need to check your website.
If your website is targeting small mobile devices such as iPhone and similar, you will need a separate version of the pages for mobile visitors.
The second and third column page designs just can't display properly on such hand-held devices and many websites already launched optimized versions made for the smaller screens of the mobile devices.
2. The Mobile Browsers Issue
Mobile browsers compatibility issues are a bit less obvious.
Both iPhone and iPad have their own proprietary browsers. On April 13, 2010 the Opera Mini browser for mobile phones was Ok-ed by Apple so at the moment only two browsers are available for iPhone and iPad. This means that users are stuck with those browsers and their limitations.
Flash doesn't work on those browsers.
They interpret HTML code differently than your standard IE or Firefox, etc so the page you checked on IE and Firefox might look completely different there.
Other manufacturers already have their versions of web enabled mobile devices and some are planning to launch their own versions of iPad rivals. All of these will no doubt have their own quirks.
All this simply means that it is prudent to use services such as Google Analytics (or some other) to keep track of how many of your visitors are coming from mobile devices and which devices they are using.
Once you do that, then you can optimize your pages for them which brings us to the next point.
Recommended Website Accessibility Testing Tools
It is not a big problem to install various web browsers on your computer and then changing screen resolutions to check how your website looks in them, but you can also use these services to save some headaches:
- http://browsersize.googlelabs.com/ - Google Service to help you evaluate your site design regarding to screen sizes
- https://browserlab.adobe.com/ - Same type of service but this time from Adobe
- http://www.anybrowser.com/ScreenSizeTest.html - A third service to check your site in different sizes
- http://browsershots.org/ - Finally, one service that definitely deserves a mention. It is a paid service but it does offer a free preview. Just one look at all the different browsers, screen sizes, color depths and other options will be enough for anyone to see that this is the ultimate way to check your site in all possible variants.
Obviously if you are making just a hobby blog (even if you have more ambitions with it) then the full extent of the options offered here is probably not something you will need right away.
On the other hand if you are making a shopping website and are counting on the large diversity of the buyers, then it is definitely something to consider.
Best Selected Tools For Mobile Accessibility
If you are building your website for mobile devices (iPad-class or smaller) then getting different devices just so you can test your website on them is neither reasonable nor necessary.
The solution is to use emulators. They let you see your website just as you would on a given mobile device.
As a quick reference, here are some of the URLs that will come in handy:
- http://ipadpeek.com/ - iPad emulator - see your site as the iPad users see it.
- http://iphonetester.com/ - iPhone emulator - shows your site as the iPhone users will see it.
- http://mtld.mobi/emulator.php - Nokia and Sony mobile phones emulators.
- As new devices appear - just google for iPhone emulator or mobile phone emulators.
With the number of mobile devices on the rise, one can reasonable expect more and more emulators to become available as well.
How To Test Your Website Speed
Speed of your website is important on several levels.
- Research (and common sense) tell us that when a ">website is loading fast the users feel more free to click around and visit more pages on your site.
- A fast site gives a better experience to users and they are more likely to come back.
- Google's Matt Cutts revealed that site speed will become a factor in the ranking of your website.
In view of all that it becomes clear that site speed is something that needs to be tested and optimized if needed.
The first step in improving the speed of your website is certainly choosing a right web hosting provider.
You can read more about that and other methods on how to make your website faster in more detail.
Once you are done with the speedups one of the best free tools that will tell you all you need to know about your site speed is Yahoo! Yslow.
It will not only tell you exactly how fast your page is loading but even a file-by-file breakdown so you can see exactly what elements takes what amount of time.
Moreover, it will even show you the load times of the third-party page elements such as widgets and ads.
Website Accessibility Standards
When it comes to building a website it is quite natural that you want to make your website as accessible as possible and as standard-compliant as possible.
However, over time quite a number of myths and misinformation has cluttered around these two issues, so it is time for some myth busting, separating fact from fiction and explaining what are the real-world issues you should look into when fine-tuning your website for accessibility and web standards.
Are Web Standards Really Important?
Some people take the issue of W3C standards and the accessibility issues associated with them almost religiously.
These people will try to convince you that these are of utmost importance. To make their point, they even quote some nightmare scenarios of companies getting sued for not making their websites accessible to the visually impaired by not following some W3C standards.
If you read one such example at the W3C website, they list "Cautionary Tales of Inaccessibility" about three cases.
Target Corporation - settlement for damages of $6 million USD, Sydney Olympic Games - required to pay $20,000 AUD and Amex getting some bad press back in 2008 (and that's it - just some bad press that you probably wouldn't even know about if there wasn't for this article).
If that is "the worst of the worst" that they could come up with, it is hard to be impressed.
If you read the details, you will quickly see that those companies did not get into trouble for lack of accessibility or W3C compliance.
The case file clearly says that the company "would not commit to any action to remedy this [situation]" and then the problems started.
To be very clear: Users were complaining about specific issues but big company acted like a bully and refused to listen. Hence the lawsuit / bad press.
In the real world you have better chance of winning a lottery than getting sued for lack of W3C compliance in your website.
Your focus should be accessibility of your website to your users.
The standards should be used as a guide, but don't worry about passing 100% of some validation tests.
You are making your website for your visitors. Not for some standards.
Once again, the companies from the "cautionary tales" above didn't land into problems because of some abstract standards but because they refused to listen to their visitors who contacted them about problems. This brings us to the next point.
How To Leverage Web Analytics To Improve Your Site
You should always have a good contact with your website visitors. Paying attention to feedback is vital.
Your visitors are the one using your website and thus they see it from a different perspective than you do.
You should also use web services like Google Analytics, because these services can tell you what your silent visitors are not saying. Things like what browsers and screen sizes do your visitors use and in which percentages. Things like where did your visitors come from - both geographically and also what website or search engine did they come from.
This data will tell you how big or small to make the details and images on your website, what browsers you should test your site with and what are the keywords and search engines your visitors used when they found you.
All these are the real accessibility criteria for your visitors and thus they are more important for the success of your website than any W3C standard.
Why Should You Comply To Web Standards?
Simply put, W3C is to HTML as grammar is to human language.
However, you will find that experts argue about W3C compliance a lot more than about English grammar. Why it is that?
Let's look at one prominent example: W3C says that every HTML tag that is opened should also be closed when no longer needed. However, Google doesn't close its tags. Why? Because it makes the code shorter / faster loading and no human visitor will ever notice it.
Browsers will easily compensate for some unclosed tags and still show you the content of the page just the same as with the closed tag.
Most prominent example is the Google home page. You can check the source code of it and see that BODY and HTML tags are not closed. Examples go on and on. W3C will consider it invalid but users will not notice any difference in the display of the page content.
Pros
Proponents of W3C argue that the advantages of making a website compliant to W3C standards means that your website will be accessible to human visitors on various browsers and platforms, but also to machines such as search engine spiders and document conversion software.
Cons
It is notoriously difficult to make your website 100% W3C compliant. It takes some major development time to tweak the code and achieving this result.
On the other hand, we just established that Google doesn't think this is essential. If you go to the official W3C validator and enter google.com or yahoo.com you will see that they are not W3C compliant.
When I checked, Google showed 40 "errors" and Yahoo 150. This shows why the W3C standards are such a hot potato.
Those two websites clearly work fine regardless of so many "errors" on them and clearly do not think that spending extra developer time on 100% W3C compliance is warranted.
But don't believe my words.
In a recent video interview Matt Cutts, who works for Google Search Quality Group, clearly stated that Google cares for content, not standards.
Specifically at 5:45 into the video Matt Cutts says:
"We're always going to care first and foremost about quality. How good is the page for users. How much does it help them find the information that they needed."When asked directly about W3C and ranking in Google, at about 25:23 he says:
"There's so many people that write invalid HTML with syntax errors but still have good content. Then we need to be able to rank that good content even if somebody doesn't have something that is completely lint-free in terms of validation."Conclusion is that W3C provides good guidelines for making your website accessible to the all users and platforms, but you shouldn't worry about making your site 100% compliant to W3C.
Google doesn't give you extra points for that and your users won't notice any difference as long as your site displays correctly.
You can see the full checklist for making your site W3C compliant here:
Conclusion
Accessibility of a website is an important concern for all website owners. However, this accessibility is not measured by W3C compliance.
As always, real life has crystallized some issues as being more important than the others and I tried to list such more important issues closer to the top.
As a rule of thumb one could say that with some common sense combined with paying attention to the feedback of your visitors, the tools and resources listed above should keep your website well within the access range of your audience.
Originally prepared by Drazen Dobrovodski for MasterNewMedia, and first published on April 19th, 2010 as "Website Accessibility: How To Make Your Website Highly Accessible And Standards-Compliant".
Photo credits:
Web Accessibility Comes From Coding First - Jesper Noer
Mobile Devices Accessibility Issues - Feng Yu
Smaller Screen Issue - Rimarkable.com
How To Test Your Website Speed - Chris Lamphear
How To Leverage Web Analytics To Improve Your Site - Andrey Burmakin
Pros - Artsem Martysiuk
Cons - Artsem Martysiuk
Other Images - Clipart
blog comments powered by Disqus