using accesskeys
Do you use AccessKeys on your site? What kind of Keys do you use? There are Pros and Cons to use accesskeys. What about those people who are not able to hit 2 keys at the same time? Do you think a about disabled people accessing your website? Actually I’m working on a Box with Access Keys, which sets the keys but can be used with mouse too.
I’m using numbers for access keys only in this example for some combinations of letters are used by other software applications. I will work and continue this, if YOU have any ideas or comments, lemme know!
What are your experiences? Are accesskeys useless these days? Did disabled people found a better solution to suit their needs?
This is the source:
<div id="accesskeycontainer" >
<ul id="accesskeylist" >
<li id='Accesslink1'> <a accesskey='1' title='AccessLink to AboutPage' href='#'>1 <span>About</span></a></li>
<li id='Accesslink2'> <a accesskey='2' title='AccessLink to Contactform' href='#'>2 <span>Contactform</span></a></li>
<li id='Accesslink3'> <a accesskey='3' title='AccessLink to Weblinks' href='#'>3 <span>Weblinks</span></a></li>
<li id='Accesslink4'> <a accesskey='4' title='AccessLink to Nominations' href='#'>4 <span>Nominations</span></a></li>
<li id='Accesslink5'> <a accesskey='5' title='AccessLink to Theme Demo Site' href='#'>5 <span>Theme Demo Site</span></a></li>
<li id='Accesslink6'> <a accesskey='6' title='AccessLink to BLOG' href='#'>6 <span>we BLOG</span></a></li>
<li id='Accesslink7'> <a accesskey='7' title='AccessLink to Login Form/User Page' href='#'>7 <span>Login Form/User Page</span></a></li>
<li id='Accesslink8'> <a accesskey='8' title='AccessLink to LOGOUT' href='#'>8 <span>LOGOUT</span></a></li>
<li id='Accesslink9'> <a accesskey='9' title='AccessLink to Acccess Help Page' href='#'>9 <span>Acccess Help Page</span></a></li>
<li id='Accesslink0'> <a accesskey='0' title='AccessLink to Homepage' href='#'>0 <span>Homepage</span></a></li>
</ul>
</div>
and the css:
/* Access */
div#accesskeycontainer {
width:135px;
padding:5px;
margin:0px;
height:135px;
text-align:center;
}
ul#accesskeylist {
width:122px;
list-style-type:none;
padding:0px;
margin:0px;
background: #ececec;
border: 3px solid #dedede;
height:115px;
}
ul#accesskeylist li {
float:left;
list-style-type:none;
padding:5px;
margin:0px;
}
li#Accesslink1 a, li#Accesslink2 a, li#Accesslink3 a {
width:30px;
display:block;
background: #6b6b6b;
padding:0px;
text-align:center;
text-decoration:none;
font-weight:bold;
}
li#Accesslink4 a, li#Accesslink5 a, li#Accesslink6 a {
width:30px;
display:block;
background: #6b6b6b;
padding:0px;
text-align:center;
text-decoration:none;
font-weight:bold;
}
li#Accesslink7 a, li#Accesslink8 a, li#Accesslink9 a {
width:30px;
display:block;
background: #6b6b6b;
padding:0px;
text-align:center;
text-decoration:none;
font-weight:bold;
}
li#Accesslink0 a {
width:110px;
display:block;
background: #6b6b6b;
padding:0px;
text-align:center;
text-decoration:none;
font-weight:bold;
display:block;
}
#accesskeylist span {
display:none;
}
Preferences for li#Accesslink1-0 a might be put into one group, but actually it is a starting option to group different if needed.
