TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

Disclaimer: this web site uses a dozen already set Accesskeys (picked from a "safe access keys to use" list), but this web site is over 7 years old...

User defined Access Keys.

Over the last year, the more I learned about Access keys, the less I wanted to use them on sites I build (hint). But 2 weeks ago I ran into this smart idea on Accessify, and almost at the same time came upon an interesting thread on the GAWDS's list that led to these 2 entries:

Even if my approach is slightly different than Gez's and Rich's (mostly due to my limited VBScript skills), it respects the overall idea: giving the user "full rights" over access keys.

I wanted this solution to be pretty much "plug and play", so ASP web designers have no excuse for not making the sites they build more accessible.

Download the files (3Kb), they contain everything you'll need:

  • Complete markup of a HTML form.
  • An ASP file that:
    • sets Cookies depending on key selection,
    • warns the user about conflicting keys,
    • lets the user reset all keys at once.
  • An ASP file that contains a Sub that will let you plug the attribute value pair into your markup.

If you keep the same file names and name your document that includes the form "set_accesskeys.asp", then everything should be working "out-of-the-box" (see bottom of this document for possible errors).

set_accesskeys.asp

This is HTML markup. To make it valid XHTML, simply close the input tags using " />" (note the empty space before the slash (/).

<form action="TJK_Accesskeys_2.asp" method="post" id="Set_Accesskeys">
<fieldset>
<legend>Set access keys for...</legend>
<%= Session("errorMessage") %>
<label for="AccessKeyForm">This page</label>
<input name="AccessKeyForm" id="AccessKeyForm" type="text" value="<%= Request.Cookies("AccessKeyForm") %>" size="4" maxlength="1"<% TJK_SetKey "zFormKey" %>>
<label for="zFormKey">Forms</label>
<input name="zFormKey" id="zFormKey" type="text" value="<%= Request.Cookies("zFormKey") %>" size="4" maxlength="1">
<label for="Home">Home Link</label>
<input name="Home" id="Home" type="text" value="<%= Request.Cookies("Home") %>" size="4" maxlength="1">
<label for="MainContent">Main (this defines the main content of a document)</label>
<input name="MainContent" id="MainContent" type="text" value="<%= Request.Cookies("MainContent") %>" size="4" maxlength="1">
<label for="zTop">Top of page</label>
<input name="zTop" id="zTop" type="text" value="<%= Request.Cookies("zTop") %>" size="4" maxlength="1">
<input name="Submit" class="zButton" id="submit" type="submit" value="Submit">
<input name="Reset" class="zButton" type="submit" value="Reset">
</fieldset>
</form>

This is the whole markup of the form you will need to make this work. You can use it as an Include file or you can copy and paste its entire content into the body of your document (read this article in case you want to use Includes, but are not sure how to use external files).

Changing the ID of the form element is OK, but you cannot switch methods (replace post with get). If you decide to use "TJK_Accesskey_2.asp" within the document that contains your form (as an Include or else), then make sure the page submits to itself.

You do not have to edit the line that says "<%= Session("errorMessage") %>". "TJK_Accesskey_2.asp" contains the variable that you can set to show a different error message.

Everything else should be self explanatory. Input elements share their name/ID with Cookie names. You can add/remove/edit elements as you wish and you can use the name you want, as long as you make sure these 3 attributes (id, name and value) have the same name as your Cookie. For example, if I wanted to add a field for an accesskey linked to a privacy statement page, I would include the following markup inside the form:

<label for="zPrivacyKey">Privacy Statement</label>
<input name="zPrivacyKey" id="zPrivacyKey" type="text" value="<%= Request.Cookies("zPrivacyKey") %>" size="4" maxlength="1">

TJK_Accesskey_2.asp

The files in the compressed folder contain more comments.

<%
Dim redirectTO,resetBUTTONname,howMANYdays
redirectTO = "set_accesskeys.asp"
errorMessage = "<div><em>Warning:</em> Some keys are conflicting.</div>"
resetBUTTONname = "Reset"
submitBUTTONname = "Submit"
howMANYdays = 365
' there is nothing to edit below this line
'***************************************************
Dim objDictionary,KeysArray,ItemsArray,sameKeys
' we use the dictionary object to build an array from the name/value pairs in the Form collection
Set objDictionary = CreateObject("Scripting.Dictionary")
For Each item In Request.Form
objDictionary.Add Request.Form.Key(Item), Request.Form.Item(Item)
Next
KeysArray = objDictionary.Keys
ItemsArray = objDictionary.Items
' Set all the cookies depending on the form element values submitted
If Request.Form(submitBUTTONname) <> "" Then
For z = 0 To UBound(KeysArray)
If Request.Form(KeysArray(z)) <> resetBUTTONname And Request.Form(KeysArray(z)) <> resetBUTTONname And Request.Form(KeysArray(z)) <> submitBUTTONname Then
Response.Cookies(KeysArray(z)) = Request(KeysArray(z))
Response.Cookies(KeysArray(z)).Expires = Date + howMANYdays
End If
' check if keys are not conflicting
For j = z+1 To UBound(ItemsArray)
If ItemsArray(z) <> "" And ItemsArray(z) = ItemsArray(j) Then
sameKeys = True
End If
Next
Next
End If
' we use a session variable to carry the error message
If sameKeys Then
Session("errorMessage") = errorMessage
ElseIf not sameKeys Then
Session("errorMessage") = ""
End If
' Resets all values
If Request.Form(resetBUTTONname) <> "" Then
For y = 0 To UBound(KeysArray)
If Request.Form(KeysArray(y)) <> "" And Request.Form(KeysArray(y)) <> resetBUTTONname And Request.Form(KeysArray(y)) <> submitBUTTONname Then
Response.Cookies(KeysArray(y)) = ""
End If
Next
End If
Set objDictionary = Nothing
Response.Redirect redirectTo
%>

You can use this file as value of the action attribute or copy and paste its entire content inside the page that contains the form. In this case, make sure the form submits to the same document.

There are 5 variables you may want/need to edit:

  • the path to the page that contains the form (if you're using a different name than set_accesskeys.asp). Here we assume that both pages (the one that contains the form and "TJK_Accesskeys_2.asp") are in the same directory.
  • the error message, in case the user sets conflicting keys, by default it says: "Warning: Some keys are conflicting"
  • the name of your Submit button, if different than "Submit"
  • the name of your Reset button, if different than "Reset".
  • the number of days cookies are kept "alive".

TJK_Accesskey_1.asp

This file must be included in every document that includes a hook (element that contains an accesskey) or you'll get a VBScript runtime error.

<%
Sub TJK_SetKey(zKey)
If Request.Cookies(zKey) <> "" Then
Response.Write " accesskey=""" & Request.Cookies(zKey) & """"
End If
End Sub
%>

This is an example of how to "plug" the attribute value pair that will show in the HTML code depending on user's preference (cookies set). We are using the cookie name used in the previous example (new field name) related to a Privacy Statement.

<a href="privacy.asp"<% TJK_SetKey "zPrivacyKey" %>>Privacy Statement</a>

If the cookie named "zPrivacyKey" is set, this will translate into:

<a href="privacy.asp" accesskey="cookie_value">Privacy Statement</a>

If no corresponding cookie is set, the code will appear like this:

<a href="privacy.asp">Privacy Statement</a>

Do not forget that for an access key to work across your site, you'll need to have the corresponding hook present in every document.

Important:
If you get a VBScript runtime error '800a000d Type mismatch: "TJK_SetKey" it means that you are using <% TJK_SetKey "someKey" %> (calling the Sub) in a document that does not include "TJK_Accesskey_1.asp". For the same reason, this error will occur if you are using a different name for your document, but do not change the value of "redirectTO" in "TJK_Accesskey_2.asp".

Download the files (3Kb).

For further reading visit the following URIs:

Link suggestions, accesskeys to use and more:

For more sophisticated solutionS, visit:

Special thanks to John Foliot who shed much light on my understanding of access keys.