A (WIAD) Event for Everyone – Registration Forms

I’m working with World IA Day 2016 – a one-day (February 20, 2016), annual celebration focused on the practice and education of Information Architecture. As accessibility coordinator, I’m helping local celebrations be welcoming to everyone.

This month the location pages went live, and organizers started to open registration for the World IA Day celebrations. Many will use a registration platform like EventBrite, because it handles so much of the housekeeping.

Unfortunately, there are no perfectly accessible registration systems, but you can do two things to make sure that the biggest barrier to attending an event isn’t signing up for a ticket.

A few tips for accessible forms

First, whether you are customizing a registration platform or building your own, make the part of the form you create accessible. Here’s a few tips (and some free tools, listed at the end of this post):

• Use good color contrast, especially for important elements like text, links and buttons. The guideline is that the contrast ratio between the text and background should be at least 4.5:1 (for reference, black on white is 21:1). Don’t worry if that doesn’t mean much to you – there are a lot of easy, free tools online that you can use for a quick check.
• Add alternative text to any images. The most important images on registration sites are functional: buttons, informational icons, or credit card symbols. If  ithere is text in the image, repeat it in the image tag as alt text. If it’s an icon, say what it means.
• Add labels to forms. If you are writing your own form, connect the field labels to the field. This isn’t as hard as it sounds…even a code duffer like me can do it.
• Add a heading row to data tables. If you have a table with all the different registration options, a few things make it easy for a screen reader to navigate through the details: Just mark the first row as the heading row. (That’s <th> instead of <td> in HTML)

Once you are done, you can check the whole page with one of the accessibility checkers. They aren’t infallible, but they can identify many problems people using assistive technology might run into, so you can know about them (and hopefully fix them).

If there are problems

And that leads to the second thing you can do: offer alternatives and support if someone has problems.

Make sure there’s a way to contact you so you can get them signed up, even after they run into a barrier.

Speak directly to anyone who needs your help so they can have a great WIAD celebration with you.

Tools to help you check accessibility

Color contrast checkers

These tools let you check whether a foreground and background color combination meets accessibility guidelines. The three here also help you adjust or create the color palette for good contrast.

• WebAIM color contrast checker lets you lighten or darken the colors until you find an accessible solution
• Snook’s Colour Contrast Check also lets you experiment to find a good color combination
• Color Safe is a designer’s tool, creating whole accessible color palettes

Tips for writing alternative text for images

• Text alternatives for images: a decision tree – a simple diagram from Dey Alexander, 4Syllables
• Writing great alt text – my slides from the Accessibility Summit 2014

Accessible tables and forms

• Creating accessible forms – WebAim. Code samples and simple explanations
• Creating accessible tables – WebAim. More code samples and simple explanations

Accessibility checkers

These free checkers will analyze the current page for problems and help you fix them

• AXE – The Accessibility Engine – from Deque has browser extensions for Chrome and Firefox that will analyze the current page
• WAVE from WebAIM has an online version and a Chrome extension.
• And, the W3C Web Accessibility Initiative has a long list of more evaluation tools.

Next in the series: Email and Social Media