Joe Dolson: Accessible Web Design

It didn’t quite take 2 years, at least. But very, very close. The last release of this script was May 25th, 2006 — - so I made it just under the wire. But this is also a bit more than just a script update. In fact, this is a complete overhaul. I’m not certain that there’s actually a single line in the poll script which is the same as the previous version.

This was necessary; because the previous version was, in a word, pretty lousy. It may have acted as a decent jumping off point for some beginning programmers to code their own; but, on the whole, it was not a sophisticated script, and it was nothing like developer-friendly.

This new version, leveraging the power of Google’s Chart API and some clever scripting by Christian Heilmann provides a better end result with fewer potential problems for the user.

I’ve vastly increased the flexibility of the script — - which once could only support a fixed 2 — 5 options in a single question — - to provide support for any number of questions with any number of options, customizable at the question level. I don’t anticipate that anybody will be authoring 100 question polls with this…but they could, in theory.

And, to cap it all off, I’ve added an administrative interface which allows users to perform most of their basic management needs without needing to crawl into the database. Hopefully, it won’t prove to be too buggy.

Are there likely to be bugs in this? Yes! So, if you download this and try it out, please let me know what you notice. I caught quite a few; but I think it’s safe to say that there are a few left in there.

And by “a few,” I mean “actually, there could be a lot of ‘em.”

Check it out or download the package now.

In case you don’t already know, “CAPTCHA” is an abbreviation for “Completely Automated Turing Test To Tell Computers and Humans Apart.” From an accessibility perspective, they tend to have significant problems — - and I’m not going to try and claim that this one is perfect. However, it is very thoughtfully done, and has a very interesting additional feature which I appreciated.

I ran across this via Stumbleupon. Unusually, rather than finding it because I was busily stumbling around, I actually became aware of it because I was trying to create a new account. The interesting CAPTCHA is called “reCAPTCHA.”

Specifically, the concept behind it (explained thoroughly on the reCAPTCHA site) is to gain value from user input in CAPTCHA texts.

Most spam protection systems are based on nonsense words, random strings of letters, or obscured text. Anything, fundamentally, which might be difficult for a computer to identify.

What the folks at reCAPTCHA observed was that scanning old books provides a wealth of resources in the realm of obscured text which can’t easily be understood by computers. To solve this problem, they pasted together the needs of a CAPTCHA and their scanning process to create a service which helps them identify these unknown texts.

Obviously, there’s an immediate problem: if the computer has already failed to identify the text, how do you test whether a human has read it correctly? Simply speaking, you don’t.

Instead, reCAPTCHA provides two words for the user: one they know, and one they don’t. The known word is the Turing test — - the unknown word creates a source for the computer to identify the word they didn’t know.

From reCAPTCHA.com:

About 60 million CAPTCHAs are solved by humans around the world every day. In each case, roughly ten seconds of human time are being spent. Individually, that’s not a lot of time, but in aggregate these little puzzles consume more than 150,000 hours of work each day. What if we could make positive use of this human effort? reCAPTCHA does exactly that by channeling the effort spent solving CAPTCHAs online into “reading” books.

[…]

But if a computer can’t read such a CAPTCHA, how does the system know the correct answer to the puzzle? Here’s how: Each new word that cannot be read correctly by OCR is given to a user in conjunction with another word for which the answer is already known. The user is then asked to read both words. If they solve the one for which the answer is known, the system assumes their answer is correct for the new one. The system then gives the new image to a number of other people to determine, with higher confidence, whether the original answer was correct.

The CAPTCHA itself is delivered via Javascript or iFrame. When Javascript is unavailable, a perfectly usable fallback is provided. reCAPTCHA also provides an audio alternative — - which, I’ll confess, I found very difficult. I’d need to see some kind of user test results, however, to really know how difficult the audio version is overall. In general, as CAPTCHA technology goes, this is an admirable project. Not only because they have taken a reasonably conscientious path in preparing the interface, but simply because it’s a very good idea.

It’s unlikely I’ll implement it, I’ll confess. The fact that it’s delivered via an iFrame and the simple nature of a CAPTCHA go against my generally preferences in web development. However, should I be in a situation where I need to implement one — - this will certainly be a strong candidate! (And even stronger if they fix their accessibility issues.)

More Information

• reCAPTCHA.net (sadly, a table-based layout with no DocTYPE.)
• reCAPTCHA on Tech Crunch
• Community MX: reCAPTCHA - Simple and Accessible
• reCAPTCHA Mailhide (Another product from reCAPTCHA)
• reCAPTCHA WordPress Plugin
• PHP Library for reCAPTCHA
• Other Application and API resources for reCAPTCHA

Just a quick announcement that I’ve updated my search script for Boolean matching in MySQL. The latest version is available for download on the PHP/MYSQL Search Engine script page.

The changes to this version include:

• Fixed: various minor bugs
• Fixed: multipage results not available with quoted strings
• Fixed: full-text query problem
• Fixed: some compatibility issues with different PHP/MySQL configurations.
• Added: sortable results
• Added: configurable field label names
• Added: sample results page
• Added: test mode for troubleshooting.

It’s not a massive update; but the script should be easier to use and more reliable.

Just a quick notification that I’ve updated the Easy PHP Photo Gallery to provide a pretty significant extra feature — - unique title elements. Read more about the script and download it at Easy PHP Photo Gallery.

Although I deal with issues of usability fairly regularly, usability is not fundamentally one of the chief areas I work in. It’s certainly an area I’m very interested in, and is closely related to accessibility, but I haven’t been involved in any full scale usability testing. So, it’s rather interesting to me that one of the first sponsors of this blog should prove to be the makers of a usability testing software package called Morae 2. jo

This is not a paid blog post, although the product was being advertised on this website.

Read more: Usability Testing Software

There are a lot of PHP photo gallery scripts out there. I know; because I went looking for one some time ago, and found myself barraged with Javascript, AJAX, and complicated installations. I didn’t want any of those things, so in the end I just wrote one for myself — - and this is the end result. Download the ZIP package.

It’s not a complicated script, and it doesn’t do a whole lot for you: but, assuming you’re running on Linux with PHP, it’ll be incredibly easy for you to install and configure. View the sample installation.

What’s in the Package?

There are six main files included in this zip package (Version 1.1):

1. gallery.php — - the photo gallery script.
2. index.php — - the home file which includes the gallery script and contains configuration info. You can copy this page to create additional galleries just by saving it with a new name and changing the configuration information.
3. titles.txt — - a simple text file which uses pipe-separated fields to indicate the image name, an image description, and an alt text option.
4. title.php — - a script which provides a unique title element for each image in the gallery.
5. basic_styles.css — - a very basic stylesheet so that your default photo gallery doesn’t look too boring. Warning: no attempt whatsoever has been made to test these styles outside of Firefox.
6. readme.txt — - installation instructions

I’ve also supplied a (very) small gallery of images for the included gallery.

What does the script do?

This is pretty straightforward. The configuration information you’ll send to the script provides the title of the gallery, the relative path to your images folder, and the name of your text file containing the image information. Using this information, the gallery script creates a page containing (in order):

1. Navigation links to move between the previous and next images in the gallery. The sequence is the order in which you’ve listed the images in your text file. The navigation is circular, so in the initial position the previous link will send you to the last image in the gallery.
2. A full size image with a caption. The caption is the second field in your text file.
3. An unordered list of thumbnail images in the gallery. Again, the order is from the text file. In the default styling, the list is displayed as a panel of images rather than as a list. Each image is a link to the full sized image within the gallery.

The script does NOT automatically generate your thumbnail images. Sure, I could have done that — - but my feeling is that manually creating thumbnail images will usually be more aesthetically pleasing. My preference is to create 80×80 square thumbnails cropped from the image. The tiling effect of the unordered list is much more effective with square thumbnails; and the ability to choose a particular section of the image for the thumbnail is much nicer than whatever programmatically selected truncation might have done.

Some Small Recommendations

The script allows the ability to use an alt text on your images. It also provides a description which can be used to caption the images in a paragraph either over or under the image. To me, it’s redundant to provide both descriptive text associated with the image AND a descriptive alt attribute. Therefore, I’ve also provided the option to turn off alt text in the full sized images. The default settings are what I’d recommend: visible descriptions enabled for the full size image, alt attributes left blank, and alt attributes enabled for all thumbnails.

I also recommend keeping your alt attributes short and to the point. The reason for having separate descriptions and alt attributes is because they serve different purposes: don’t try and use the description field as an alt attribute and don’t try and use the alt field for a description!

There’s nothing fancy about this script. Really — - I mean it. It’s down and dirty “make me a photo gallery” programming. Use at your own risk!

Changes as of 7/7/2007

I’ve made a number of small changes, including correcting some missing closing tags (oops!). The biggest change is that the Easy PHP Gallery is now capable of being a bit more search friendly. I’ve done a little rewriting to make the script capable of providing unique title elements for each image, rather than just giving the main gallery page title for every single page. This does make the script a tiny bit more difficult to implement, I suppose — - but I’d say it’s worth it.

The beginning stages of a web-based form are very simple: you read the HTML guide, learn about select menus, options, form labels, radio inputs and all the myriad ways you can inveigle information from your visitors. You also learn about the action and method attributes. Great. So all of this HTML you’ve learned is wonderful - but won’t actually do anything. You need to provide some kind of back-end rules to actually make any use of this information.

Deciding how to use the Data

First things first, you have to decide what you want to do with the data. I’m only going to deal with the most common probable tasks, here - no image editing or complex database updates, just simple data management. Are you going to write your data to a database? Do you want to use it to create a file which will hold a record of the transaction? Do you want it to send an email?
Read more: Processing Forms with PHP, a Beginner’s Guide