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 it 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, altough 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 (altough Mozilla is a very good fellow and knows how to increase em, px, % and also images), use big text on buttons, appropriate contrast colours,  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 atributes 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  - altough 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 rules are not my favourites:

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, altough 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

Textmate - check your JavaScript syntax

Following the previous post, we will see today how to check the syntax for JS.

In this case we will need a bundle wrote some time ago by Andrew Dupont here. (read the article , scroll down and download the bundle). 

Install the bundle.

In this moment you are almost good to go, as the bundle is set to run just as the previous PHP check syntax, when you save the file.

I say almost good to go, because there is an warning you get from ruby,  ”Insecure world writable dir”.
So open the Bundle Editor, find Javascript tools, click on the Quick Lint command and add a -W0 ( is a zero here ) after the ruby word, like this:

ruby -W0 “$TM_BUNDLE_SUPPORT/bin/quick_lint.rb”

Close the Bundle Editor.

This is how it looks in action:

That’s it.

Import your Gmail contacts into Os X AddressBook

If you need to import your Gmail contacts into the local Address Book, to be used by Mail for example , here are the simple steps you need to make.
Open safari and login to your Gmail account.
In the left side, under the mailboxes you have the menu Contacts. Click on it and it will open the contacts manager:

On the right side you have the Export link -  click on it

From the next screen choose what group you want to export, select vCard format, and click Export 

Safari will download the file, will open the Address Book application and ask you if you want to import the new contacts:

Click add, and you’re done.

That’s it.

testing mootools apps using rhino shell

As the guys form mozilla says “The JavaScript shell provides a simple way to run scripts in batch mode or an interactive environment for exploratory programming.”
So basically you can create some tests for you app based on javascript, without needing a browser, but using rhino.
With Mootools is a little complicated, as it needs a browser environment to run, and rhino does not provide this.
The solution for this is to simulate a browser.
A great work in this direction is made by John Resig, the guy behind jQuery, here.
Only that you will need to modify a little the script, to work with Mootools

add the following lines at the very end of the env.js script

var document = window.document;
window.Element = window.DOMElement;
window.navigator.platform = “MacPPC”;

window.navigator.platform can be any platform, I used this to reflect my platform.

How to get the last news from a blog (any blog)

This tutorial will show us how to get the last news of a blog and put it on our site. We may have the case when our site is not fully driven by a blog engine, but we have one, so we want to put on the ‘News’ section the last posts, or we want to grab other’s news feeds and display it on our site.

First step is to download the script built by rborn development, from here. It is a script that is very easy to use, based on LastRSS but changed a little to overcome the restrictive security settings found on many servers related to fopen.
Just include the news_reader.php in the place where you want the news to be. Then edit the file, setting the number of posts and url to grab.

//——– settings ——–

$rssurl = ‘http://feeds.feedburner.com/Cssgalleryinfo’;
$nr = 5;
//————————-

After this you may want to skin this section, because the script is just raw text, this way everybody to be able to skin according to it’s design.

Here is an example, with raw result and a skinned one.

Mootools “ajax” request for local files

Ok,ok, I know is a contradiction in terms, but this is a problem encountered by a lot of newbies , and sometimes a feature like this would be useful to be able to copy the whole js into a local folder, and run it form here, without being forced to start a web server on the local machine.
How can this be accomplished without too much hassle or code change?

I created a function that tests the protocol used by the browser, and decides how to load the requested file, with xmlhttprequest or iframe.

Please be warned that this is just an exercise, and not a final solution. It can be improved and it should be

The example is here.
Obviously this will use the xmlhttprequest, but if you download this zip, and unzip it in a local folder, you will see working the iframe method.

The code is below:

function get_content(url,update) {
if ( document.location.protocol == “file:” ) {
// console.log(’local’);
var ifr = new IFrame({
src:url,
events:{
load: function() {
$(update).set(’html’, this.contentWindow.document.body.innerHTML );
}
}
}).inject(document.body);
}
else {
// console.log(’server’);
var myHTMLRequest = new Request.HTML({
update:update,
}).get(url);
}
}

Let me know your thoughts.

How to setup svn with remote working copy - my big question

Everybody know SVN and “everybody” is using it. No doubt SVN is one of the best things that happend in the last time. but for a web developer, svn can be a little frustrating - at least for me.
Let me explain:
I am on a mac, a G4 one,so I cannot afford a MAMP running on my local machine. On the other hand, I use to let clients see in real time the evolution of their projects ( is a pretty good selling advantage , by the way ) so that’s why I need a remote working copy. I want to have a version controlling system but with my working copy on this server, and of course, lazy how I am, without a terminal where to write lines for commit and so on. You get my point.
On the other hand, I like the way a ftp program “caches” my transactions so my editor does not freeze every time I hit ?+S.

How this can be done? How can i accomplish this?

I would like to hear a good and practical solutions for this.
The solution I found is a nice one( of course because is mine ), but is very very sloooooooooow.
I mount a ftp or sftp drive with the working folder on the server on my mac, and I declare here to be the working copy. So in this way, I have a remote live working environment, and a versioning control that helps to keep my work in one piece and forget about backups - well almost.
The only drawback is that the macfuse is very slow on mac so a commit or a simple update seems to take ages - but is a good excuse for a coffee, or another coffee, and another one…..

Do you have a better solution? I would really like to speedup the process, so please let me know your thoughts

How to load ioncube loader without root access

Some of coders are doing a living from selling php scripts. Nothing new here. But to protect themselves from piracy they need to encode the php code, to prevent steal, unauthorized usage and so on.

This can be accomplished using various encoders, some strong , some weak that will give them a specific amount of security, depending on what each of them is doing, form simple obfuscation to byte encoding techniques.

Two major players are Zend Guard and Ioncube encoder.

If zend has a wider spread across the hosting companies, ioncube is not that lucky, and usually you have to make a ticket to support to load the ioncube loader for you ( with or without a fee). There are cases when this cannot be done, so you might be forced to try to load this by yourself.

This can be accomplished if the ini flag enable_dl is ON - a quick phpinfo() should reveal this to you.

If you are lucky, next step is to download the loaders from ioncube site, upload it to your server and point the browser to

http://yousite.com/path/ioncube-loader-helper.php?page=install-assistant

you will find something like this:

create a php.ini in the folder you need to put encoded files

and add this line to it

if you have the loader in the same folder, path woud be “./” else use the folder where you put the loader.

now point your browser to

http://yousite.com/path/ioncube-loader-helper.php

and if all is ok you should have something like this:

Pretty simple, no ticket to support and no waiting to be solved.

Os X - how to create links to scripts for dock or desktop

As I promised in the previous post, I will show you how to add any script or program run normally from command line to dock or desktop and run as any other application.

For this we will use Platypus.

Platypus “can be used to create native, flawlessly integrated Mac OS X applications from interpreted scripts. Supports shell scripts, Perl, Python, PHP, Ruby, Expect, Tcl, AppleScript”.

We will use today the shell script to start the synergy application presented in the previous post

First of all we need to create a script file, to launch the synergy application

#!/bin/sh

/Applications/synergy/synergys -f –config /Applications/synergy/synergy.conf

Save this as “run_server” into the synergy folder and make it executable

If you did not downloaded yet platypus, do it and install it on your mac, then start it.

Complete the fields as necessary and choose another icon if you want to. An example of how to set the parameters are in the screenshot below

Hit create , save the new created tool into Application folder and you should be set
This is a very basic example, but you can explore more as platypus is pretty powerfool.

Let me know your thoughts.

How to create a product viewer using mooZoom

There are cases when we need to show a zoomed image of a product ( or something else ), that require to be as much as user friendly as possible. One of the cases are e-commerce sites that use high quality images for high impact over the client’s mind (jewelery for example).

In this case zooming a particular point ( but arbitrary chosen by visitor/client ) would be very useful, but without forcing it to leave the page, or hide some page controls - maybe buy button - like a “lightbox” script would do.

So we created mooZoom.

mooZoom is unobtrusive and allows a visitor to zoom an image in a very friendly way - just scroll the mouse in a desired point.

The image will zoom in/zoom out, depending on the direction of the wheel.  In a zoomed stage a simple drag will reveal the hidden part of the image.

The setup is ultra easy - you just need to add " class='moozoom' " to the zoomable images and give at least one dimension - width or height.

something like this:

<img class=”moozoom” src=”flower.jpg” alt=”mooZoom” style=”width:200px;”>

and mooZoom will take care of the rest. You will  also need mootools v1.11. (a script for v1.2 will be available as soon as possible)

We setup here a small demo, making a nice frame for a virtual product presentation.

There is always room for improvements  so if you have any suggestion  or found a bug  don’t hesitate to comment here.