Accessible slider alternative

The Introduction to sliders post explained that before we proceed on to using scriptable sliders, we need to ensure that an accessible version is available for when scripting is not used.

This post is part of a series that guides you through creating robust sliders for your forms.

  1. Introduction to sliders
  2. Accessible slider alternative (this post)
  3. Basic requirements for sliders
  4. Connecting the slider to the form
  5. Scripting the slider regions
  6. Conclusion to sliders

Before we get on with scripting, let’s create the base form with which we will use sliders.

This is the HTML code for the standard form that we will use for when scripting is not available to create the sliders.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample sliders</title>
<link type="text/css" rel="stylesheet" media="screen" href="css/style.css">
</head>
<body>
<form id="survey" action="submitSurvey.php">
    <fieldset>
        <legend>Questions</legend>
        <p>Please rate how you feel about the following statements,
            from 0 for strongly disagree, up to 100 for strongly agree.</p>
        <p class="slider"><label>
            Clowns are scary creatures
            <input type="text" name="clowns">
        </label></p>
        <p class="slider"><label>
            9/11 was an inside job
            <input type="text" name="insidejob">
        </label></p>
        <p class="slider"><label>
            Fox news is not a news channel
            <input type="text" name="foxnews">
        </label></p>
    </fieldset>
    <p><input type="submit">
</form>
</body>
</html>

Note that here I have chosen to use an implicit label association instead of an explicit label one.

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element.

Using an implicit relationship means that we don’t need to add explicit identifiers to the inputs, which allows us to have cleaner code. We will find though that IE6 doesn’t understand the implicit association, however we shouldn’t be tempted into muddying the semantic meaning of our code. Especially when its sole purpose is to support a low-impact situation on a retiring web browser.

Now, with a little bit of styling in style.css, we have a form that is quite servicable in an unscripted environment.

form label {
    position: relative;
}
form label input {
    position: absolute;
    left: 15em;
    width: 3em;
}

This is how the slider form will look when there is no scripting available.

How the form looks without scripting

This takes care of any no-JavaScript situations that may occur.

Next: On to the basic requirements for sliders

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: