Tag Archives: semantic

Common sense accessibility 2.0

When it comes to accessibility, every coder is a small guru. On the websites where I bid for projects everybody is an accessibility and usability expert (including myself, I admit).

Altough these rules exist for quite a while there are coders who find difficult to implement them – so I am trying to find here what are the tricks that you use in writing your code to make it accessible.  For example, although writing semantic code helps (a lot !) it is not always enough.  Some try to view their pages with CSS and images disabled, some don’t.  Some of us have tricks that we do not want to share to other coders.  Some of us share. We’re not all gurus, right? Someone has to start from somewhere.

So if you have something interesting to say, add your own rules here.

Let’s start with basic common sense:

  1. write semantic and valid code – use correct tags while trying to satisfy Google’s needs – adapt the tags to the context
  2. use lists for navigation and for consecutive link blocks
  3. write accessible forms : use labels, server-side validation, even fieldset where necessary. Should I use type=”image” with alt text instead of submit? I don’t know….I like submit. Camino does not :((
  4. use the skip to content or skip navigation links. Everybody say you should….
  5. using a .wai class to hide text that might help screen readers – some people use display:none (not so good), some use negative indent.
  6. provide transcriptions for video files (does Google do that for YouTube?), alt tags, longdesc tags, explanation for graphics (the coders who built Forex sites did that?), audio CAPCHA (do you do that???)
  7. other common-sense ideas – use em or percent instead of px (although Mozilla is a very good fellow and knows how to increase em, px, % and also images), use big text on buttons, appropriate contrast colors,  no animated gifs/blinking/flickering elements, align text on the left side,  don’t use “click here” links cause they ALL are click here…
  8. write accessible tables : use th scope=”row” and “column”, id and header attributes to associate data cells with header cells,  use summary and caption to give extra clues about the content of the table (altough usually tables are preceded by headings and short paragraphs of text). Use tables to display data only.
  9. provide a search function  – although I build small brochure sites and I don’t embed search in them.  Do you? For small sites?
  10. provide buttons to increase font size.  Sometimes  I do, sometimes I don’t, depending on what clients ask. I believe that people who have special needs know the CTRL + combination and use it, the A-, A+ buttons seem to me like a bit redundant.  Maybe I’m wrong… Also I do not provide a button to increase the line-height and other white spaces, I set the line-height in CSS to be bigger that the default. Is it good, is it bad? You tell me, I’m keen to know.

Beside these rules there are lots more, some that make sense and are used, some that I don’t remember here. I’m having a short list of elements that I don’t use mainly because I do not have contact with them and I forget (or want to forget that)  they exist.  I’m still learning about more sensible elements for the  people in need so maybe I’m ignoring some details.

So, the next accessibility rules are not my favorites:

  1. use altkeys for navigation – a lot of people still argue about it, I’m waiting to see who wins
  2. use title for frames – it shoud say “avoid frames”, but for who’s using them….use titles
  3. target=”_blank” issue – there is still a lot of arguing about forcing the user to an action that he/she does not want. It’s common-sense too, but for the coders not respecting the above rules this is too …. in-depth. For me, it’s like somebody adding sugar in my coffee when I mentioned that I like it black. What if I have diabetes?
  4. use the focus indicator – I recognize I don’t bother too much to style it, although I do tab sometimes through navigation links or form elements. 🙁

That’s it for now, these are some basic rules I have in mind when I code.  I do try to visualize the site with the CSS/images disabled but I am aware that this is not enough. The simple fact that I’m trying to improve my knowledge is my excuse. But I know it’s not enough and if you have similar sets of rules that guide you please share them here – to guide everyone who is trying to learn something useful.

Ohhh, I forgot: use image replacement techniques, it’s a great invention 🙂

Check the Spanish version of this post:
Accesibilidad con sentido común 2.0