A professional & accessible website checklist?

There are a lot of SEO checklists out there so I'm aware of most of those important areas. Is there a list somewhere of ways to ensure the most people see my website correctly and that it looks professional?


Please share what you do to finalize your code and make it work well/look great.


Here's my list-in-progress:
A) language set to English
Is this important, or detrimental in some way?

B) JavaScript and CSS in external files

C) site validated as XML
Yes/No?

D) site checked in IE 6, 7 & 8, Firefox 2 & 3, Opera and Safari. Google Chrome TBD.
Any important browsers/versions I'm missing?
Should I check it on a Mac and how is that possible if I only have a PC?

E) dynamically published with SWFObject (2.1) providing alternative content for those without Flash
Any parameters in SWFObject that are best set (scale, etc.)?
Any other technologies I should be prepared for users to lack/have disabled?

For DW users:
F) site exported without template mark-up
G) "Apply Source Formatting" for accessible code

What am I missing? Thanks!

Ok, Web accessibility is a large topic. But the first place I would check is WAI Guidlines or Guidelines 1.0, Guidelines 2.0 and Guidelines 3.0. This may at first be an overwhelming list, but there are a few test sites that can give you more information. Adhering to all three levels of accessibility can be a difficult task and you may not want your website to adhere to all three levels depending on what your website content may include and what your overall goal is. But once you have read through the list, use the following websites to check how much of the above guidelines you are adhering to:

http://www.cynthiasays.com/ for section 508, and priority 1,2 and 3 of WAI
http://validator.w3.org/ for XHTML validation
http://jigsaw.w3.org/css-validator/ for CSS validation

Once you have checked your site (after reading through the guidelines and creating your site to suit) each of the listed sites will give you a list of all of the errors and possible solutions on how to fix them.

These are the basics on where to start. If you want any more info, let me know as this is my area of interest.

Oh, and to answer your questions:

A - You will definately need to set a language. Amongst other things, this allows applications to see what language the website is supposed to be set to and applications such as browsaloud wont try to read the website in a different language.

B - Yes, javascript and CSS should be in external files. If these files are quite large, then try splitting them up to make downloading easier for the website. (Should be no more than 5kb each)

C - Yes, your site should be validated using the above links (XHTML/CSS/508/WAI 1,2,3). This would preferably need to be done for all scripts including javascript. As i mentioned, the returned results will give a list of suggested methods to fix any errors.

D - If your site works well in Safari, then it should work fine on a mac. Ideally you would check your website in all of your mentioned browsers, but realistically, if it works in IE 6/7, firefox and safari, then that's usually a good bet that it's pretty much accessible to all people.

E - Yes, if possible provide a html version of your flash site. Check out browsaloud, which is what people use to have sites read to them, mainly for the visually impared. Using 'Access keys' are also important for users that cannot use a mouse. Make sure your site is easily accessible only using the keyboard. Tab index is also useful to include with hyperlinks so that people can scroll through links in a sensible order.

F - Just test your site without any styles. Ideally all of your images (unless you use pictures in a gallery, for example) would be in your css file. Therefore when the styles are disabled, the site should be in a semantic order with the option of skipping the menu (especially if you have a large menu). I sometimes include some hidden html on my pages, so that when the style is disabled there is an internal site navigation to allow the user to view different parts of the page.

If you have any more questions then just ask! You can check out my latest website, which used nearly all of the mentioned ideas and check out the html, css etc to see how it was done. Check out the links at the bottom for a description of the access keys and look at the validation lists (mainly WAI and 508) which will give detailed information of the rules the site adhered to.

The most useful tool i use when designing is the 'developer toolbar' which you can download as an add-on for firefox. In the toolbar there are options to disable page colours, disable images, disable css, validate links, validate XHTML, validate CSS, validate JS, validate RSS Feeds, validate section 508, validate WAI, view speed report etc etc etc. I use all of them many times!!!! Until I am absolutely satisfied then I won't upload my site. It is essential to me that it is accessible to as many people as possible.

Make sure you know who your main audience will be and what the main purpose of the site is. You don't want to be including things that will make it accessible to everyone, but defeat the purpose of the website (whether that's to showcase design skills or whatever). Try and establish what you want first, then add extra accessibility features afterwards if you are able to.

Also, I find it useful to use the webmaster tools from google. It's not so much for accessibility purposes, but it lets you know how well your pages are structured to allow google bots access your site easier, which will improve search results and increase your users' overall experience with your site.

Google has also provided some more information on accessibility, which includes some usage of flash, so you might want to take a look:

http://googlewebmastercentral.blogsp.../accessibility

Thank you for such a thorough reply!

Yeah, it's a big topic - happy to find someone to lay down some essentials/priorities. I'm sure I'll have some questions for you as I continue to work my way through this...

No problem. Good luck!

Can tab index make my buttons available to be tabbed through (on the "top level" if that makes sense)?

Right now, users have to first click on the flash to tab through it, but obviously this is somewhat self-defeating.

yes, when the user clicks on 'tab' they will be taken to whichever link you set as tabindex="1" i.e.

Code:

---

<a href="mypage.html" title="My Page" accesskey="m" tabindex="1">

---

If you don't set a tab index on a link or flash movie, they will be taken to that link or flash movie at the end of your tab index list. E.g. if you have 8 links, each with a tab index, your un-'tab-indexed' link will be selected the 9th time the user presses the 'tab' button.

I hope that's what you meant!

Do you know if it's possible to tab through the links WITHIN a Flash (in red) just like they were individual links or form fields, without first clicking on it/selecting it?

http://farm4.static.flickr.com/3074/...c6804c5ca9.jpg

As my site now stands, users would have to:
* tab to the Flash
* click/hit enter
* then tab through the buttons within the Flash. Can I apply tabindex to links within the Flash, or is there another way to do this?

Thanks for your patience!

I've not actually used tab index within a flash movie, but I did find a very useful page that might help you. Here is what it says:

"If you want to specify the tab order of elements within your movie, you must convert all static text objects to dynamic text object. Now add tabIndex information to a keyframe at frame 1 of your movie:

Code:

---

_root.Homepage.tabIndex = 1
_root.Contact.tabIndex = 2
_root.FirstName.tabIndex = 3
_root.LastName.tabIndex = 4
_root.SubmitButton.tabIndex = 5

---

If you are using Flash MX 2004 Professional or newer , a tab order option will display within the Accessibility panel. You can specify the tab order in the panel rather than using ActionScript."

You might want to read the entire page as there are some other parameters that your movie may need to follow.

I hope this was useful.