A good way to learn about accessibility is through examples and discussions. In this post I will try to translate the WCAG sometimes-hard-to-get rules into a copy-paste real contact form example. You can check the test link, download the code and/or keep reading a bit more.
As I mentioned before, contact forms are in great need of special markup in order to be accessible. And it seems that there’s always room for improvements – in case you have suggestions or your approach is different, I’d love to hear from you.
My suggestion is a simple 4 fields contact form with PHP server side validation. After the user submits the required information the page is reloaded and new messages are displayed depending on the user actions. Of course you all know that the form needs
tag and some sort of validation – everybody is writing about the need to display in an accesible way which fields are required and also the error messages (usually indicating the missing fields) – but few actually offer a simple straightforward code to copy-paste in our sites.
The stylesheet is very light – we have to style the form – but the novelty is a class for the fields that are required and not yet filled. This way after we validate we return the error message with links to the missing fields but we also hightlight them for a more usable and intuitive experience. The PHP part is reading the inputs, checks them and sees if the required ones were filled. A thank you message is displayed in case the user filled all the required fields.
The number of fields can easily be increased but don’t forget to validate them -when someone understands how the form works and which were the accessibility elements that were included then buiding more complex forms becomes just a matter of typing.
Check the Spanish version of this post:
Un básico copia y pega de un formulario de contacto accesible
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:
- write semantic and valid code – use correct tags while trying to satisfy Google’s needs – adapt the tags to the context
- use lists for navigation and for consecutive link blocks
- 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 :((
- use the skip to content or skip navigation links. Everybody say you should….
- using a .wai class to hide text that might help screen readers – some people use display:none (not so good), some use negative indent.
- 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???)
- 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…
- 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.
- provide a search function – although I build small brochure sites and I don’t embed search in them. Do you? For small sites?
- 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:
- use altkeys for navigation – a lot of people still argue about it, I’m waiting to see who wins
- use title for frames – it shoud say “avoid frames”, but for who’s using them….use titles
- 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?
- 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