“You have to use the right tools for the job!” - Bob the Builder
That is one of my battle cries. I once went on a rant, my daughter (5 yrs. at the time) stood by and listened as I went on about misuse of tags to her mother who knows some HTML. Well Jessie looked at me and said “You have to use the right tools for the job! Right Dad?”, you can tell she was a big “Bob” fan.
But it is the truth for web design too. Accessibility is supported by little things like logic and standards. Most all out tags have a meaning, this meaning is often a specific action in a browser or screen reader. So by using the wrong tag for the job you disturb the logic and schematics of the site and make it harder to use.
Again I will be adding to this as time goes on, so keep checking back, I may have learned something new or remembered something.
HTML Attributes: The W3C has pretty well done away with many HTML Attributes like background colors ad borders etc.. All formatting should be done using CSS. This allows you freedom for doing more things like dotted borders that HTML does not allow, you can change something site wide quickly and easily. You make your pages smaller and faster.
H1 - H6: These have a meaning, they are headers, like chapters and sub chapters in a book. They do not exist so you can have a bold text of a certain size. They tell the user agent that all text following this word are under it in the scheme of things. This word hints at what the following text is about.
So logical markup of the page makes the site more useable and accessible to everyone. If a word or phrase describes the following text, then use a header and not just bold text tells a non-visual surfer nothing.
Also it has a logical order, H1, h2, H3……. do not use H4 in the middle of a page because it is the size you are looking for! Use CSS to make the correct header the size you want! Also you should never have a H3 without a H2 preceding it.
Now it is sometimes argued whether a page should have 1 or multiple H1s, this is not provable either way. Tendency seems to suggest most developers feel each page should have only 1 H1 that describes the page. Under it you can then have multiple H2 with multiple H3, …… as you need.
Others argue that content can/should have a H1, but Navigation is a separate area, so can/should have a H1 as well. These are reasonable arguments so the battle rages on. I prefer single H1 describing the page.
Also it is rated high with Search Engines when the best Keywords are included with the page title and the H1, it increases the ranking. Often my H! matches my Page title, but that is not required.
Just remember to use headers in a logical manner where and in the order the are meant to be used and format them with CSS.
<i><b> vs. <em><strong>: Here you will hear many argue not to use I and B any more as they are depreciated. More correctly, use them right. I & B are both visual tags. They are of no use to blind users to highlight important text.
So if you wish to highlight a word and say that this word or phrase is more important then the rest, use either <em> (emphatic) or <strong>, this reacts with a screen reader and this word sticks out audibly from the rest.
Now some argue that <em>, which is usually visually italic, is harder to read for those with poor vision, so it should not be used often and mostly one should use <strong> which is shown bold.
If you wish to highlight words for some reason (studies show that when a first paragraph is shown bold it gets more attention from the reader) but that word is not more important, so you whish it to be only visually bold, then it is fine to use <b> instead, as a extra emphasis to a word with no real meaning could be confusing as well.
<blockquote>: one of the most missued tags I see. Often used for formatting. Again it has a meaning to a screenreader, it says “the following long block of text is a quote” and is confusing if it is not a obvious quote. It is also used together with the cite attribute <blockquote cite=""> with a reference to whatever web site or book is being quoted from. Again you can/should format it with CSS.
<q> & <blockquote> it should be noted are per standards required to insert the needed ” quotation marks. That is to say we should simply write <q>bla bla bla</q> and the browser would add “bla bla bla”. But as usual this is deffinetly a nogo in IE, so if you use the <q> element, a standards browser should install the “” for you, but IE will not and the text will not stick out. If you insert the “” for IE a standards browser will show “”bla bla bla”". That is why many developers simply use “”in the code rather than the quote element.
Lists: Also commonly not used correctly. best example is a Navigation bar. What is it? A list of links right? So why not use the list item? It is logical right?
Well usually it is not use due to the bullets, but now with CSS those can be removed and the list layed out horizontally. It also makes formatting rollovers etc much easier by defining the <ul> and <li> rather than having to use classes.
Same goes with articles and subsections in web sites, you will still see may people using paragraphs instead even though it is clearly a list they are simulating.
So use lists where you need them, it makes the site logical and more attractive to search engines.