Implementing accessible forms in TYPO3

On A List Apart there is a nice article about Making Compact Forms More Accessible. I wanted to know if it was possible to implement such forms in TYPO3 to use for the form elements such as the mail, search or login form.

As it turns out, it's not so hard to do this. Basically all that needed to be done was:

  • Insert one of the standard TYPO3 form elements on a page (login or mail form for example)
  • Include the script and stylesheet as provided on A List Apart
  • Open the page in the front end and check the source to see which attributes and values are used for the HTML form elements.
  • Create your own form as described on A List Apart but use the properties/values TYPO3 uses.
  • Apply the form you just created to the TYPO3 FORM object through TypoScript

I've tried it with the login form as you can see on the right side of this page. Here's how:

Insert TYPO3 Form element

Just as you would normally do, nothing special here, just check if it works before you continue.

Include the script and stylesheet

Get the script and styles from A List Apart and include them on your page.

page.includeJS.file001 = fileadmin/newdesign/form.js
page.includeJS.file001.type = text/javascript

page.includeCSS.file001 = fileadmin/newdesign/form.css
page.includeCSS.file001.media = screen

Get the properties/values from the source

In my case for the login form the properties used were user for the username and pass for the password. There was one hidden element with the property logintype and value login, the TSref explains you change this value to logout to create a logout form. The last property was submit with value Login for the submit button.

Create your own form

Do this as described on A List Apart but use the properties and values from the previous step. It's not necesarry to include the <form .. > </form> tags.

<div id="username">
 <label for="user" class="overlabel">Username</label>
 <input id="user" type="text" name="user" title="Username" value="" tabindex="1" />
</div>
   
<div id="password">
 <label for="pass" class="overlabel">Password</label>
 <input id="pass" type="password" name="pass" title="Password" value="" tabindex="2" />
</div>
   
<div id="submit">
    <input type="hidden" name="logintype" value="login" />
    <input type="submit" name="submit" value="Login" tabindex="3" />
</div>

Apply the form through TypoScript

The TypoScript Object Browser can be used to find where FORM object is used for the forms that can be inserted (tt_content.login.20, tt_content.mailform.20 etc).

tt_content.login.20 {
    formName = login
    data >
    dataArray >
    stdWrap.wrap (
        <div id="username">
         <label for="user" class="overlabel">Username</label>
         <input id="user" type="text" name="user" title="Username" value="" tabindex="1" />
        </div>
           
        <div id="password">
         <label for="pass" class="overlabel">Password</label>
         <input id="pass" type="password" name="pass" title="Password" value="" tabindex="2" />
        </div>
           
        <div id="submit">
            <input type="hidden" name="logintype" value="login" />
            <input type="submit" name="submit" value="Login" tabindex="3" />
        </div>

    )
}

Done

Reload the page in the front-end to see the changes. Besides the login form on this website I have also have a contact form but the technique I have used for that one is a bit different and I'll probably change it to this one soon. There is one thing by the way that I have not been able to fix yet, TYPO3 automatically adds target="_top" to the <form> tag, which ofcourse is not allowed by the strict doctype so your site will not pass the validors.

Standard TYPO3 form elements

1 Response to “Implementing accessible forms in TYPO3”

  1. Gravatar: Nils Nils Says:

    Cool, thanks.
    I was looking for a way to style the button differently (or rather: at all), which seems to be impossible with the standard TYPO3 login box, so overwriting the complete stuff seems to be the thing to do anyway. Even the better when it's accessible :-)

Leave a Reply

remember my information