What can you answer to your client when you try to explain that your code is W3c, semantic, crossbrowser and…accessible and your client asks you “Good for you you’re coding accessible websites, but do you actually know any blind user?” Meaning, why should someone care about how you code a site as long as table-based code is still ok and cheap?

Well…you may remain speechless. Cause I really don’t know any blind person nor a person using assistive technology altough I do know people that need to increase the font-size or lower the screen resolution to be able to read better. But even if I did not “see” one that should not mean they don’t exist – but how can this be proved?

Since assistive technologies do not leave traces, maybe a solution is to see who’s clicking the a+ a++ buttons. This surely will leave some trace, right?

So we started an experiment: we wrote a script counting the number of clicks performed on the a+ a++ buttons (I know it’s not very scientific – anyone can click – but we’re counting on the fact that our users do not know about the experiment and that at least a small percentage of the clicks will be genuine). Every click is counted and written in a file. We compare it to the Google Analytics stats and hope to obtain some information about this aspect of the sites.

After a month of comparing both methods we saw that the a+/ a++ navigation was clicked on a daily basis (even though one site was selling Christmas decorations !!! ) and most of the time a++ was the star ! Between 5% and 8% of the visitors were clicking these links and that is more than the number of clicks on “about” or “contact” links.

Now, the question that started this article remains – what is the best answer for the client asking  “Good for you you’re coding accessible websites, but do you actually know any blind user?”

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

<label for="name">

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

Strange?

What do you say if we use this term for a form validation, server side? I say “Unobrusive PHP” because it’s what I work with, but it can be any other language.

Let me explain

We already do this in Javascript. We attach a class to a field we want to validate, then, when the user try to submit, we try to validate the input by a rule associated to the class. All is fine, only that we need to make this server-side too, we cannot trust the users, do we?

So what if to the input name we attach a specific segment, that will be validated once it reach the server, removes the attachment, and pass further the data like never happened?

Some code

<input type="text" name="email" />

for js validation would be

<input type="text" name="email" class="email"/>

for php would be

<input type="text" name="email___email" />

and the validation class would take the $_POST array, search for a value  that contains ___email, validates it, then simple remove the segment for further processing.

$_POST["emai"] = $_POST["email___email"];

This idea is the preamble of a future post regarding a more  universal validator for forms. It’s only a concept. Let me now your thoughts.

A nice “hidden” feature that Textmate has is to check the syntax of the php files you are writing and display a popup with the result.

How to do this?

Open Bundle Editor, search for the PHP bundle, scroll down until you find the Validate syntax command.

Edit the Save setting to Current File.

Now, depending on how you want it, you can alter the Activation setting or not. I set it  the same as saving the file, so each time I save the file, it makes me the syntax check.

Close the Bundle Editor.

From now on each time you save a syntax check will be done and a popup will show you the result

The result

That’s all.

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, set the number of posts and urls 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 its design.

The code

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

Kroppr is an unobtrusive script that willenhance any site that wants to offer an image cropping tool for its visitors.

Unlike other scripts, Kroppr is able to ROTATE, zoom and move the image in the real time without using plugins – flash or java. The actual picture crop is done after the user is satisfied with his settings. In this way, the load put on the server is minimised and also the visitor’s experience.

The installation  is also very simple being enough to add a script tag in the header’s page and a class to the image that makes the cropping subject. More info on the Kroppr page.

Some 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 stealing, 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://yoursite.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://yoursite.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 for it to be solved.

Some times, when we have a pretty big amount of pages on a site but don’t need or want to use a CMS so we take advantage of PHP and split the page layout in more includes like:header.php, content.php, footer.php – this way we do not need to write the same content (or copy paste it ) in every page.

If our design is user centered ( i mean it tries to have some usability ) we’ll need to find a way to make the menu clear – pages that are active needs to be “highlighted” somehow. A good example is WordPress :

“Posts” page is the current page. We can do this the hard way – copy menu content in every page and change the styling for current link, or use some php code that do this for us and move the menu in “header.php” include file.This is a small code we can use for our needs:

<a class="<?php echo (( $url=='href="index.php')); ?>">Home</a>
<a class="<?php echo (( $url=='href="product.php')); ?>">Product</a>
<a class="<?php echo (( $url=='href="directory.php')); ?>">Directory</a>

The above code will work for relative links, for absolute links you will have to detect the full url of current page:

<?php 
    $domain = $_SERVER['HTTP_HOST'];
    $url = "http://" . $domain . $_SERVER['REQUEST_URI'];
?>
 
<div class="actual_menu">
<a href="http://www.cssgallery.info/index.php"	
class="<?php echo (( $url=='http://www.cssgallery.info/index.php') ? "menu_on" : "menu")?>;"
>Home</a></div>