Why accessible? Because…

• Users with color vision deficiency, or color blindness. The plugin does not use color as a primary indicator of a change in state for the slider. Instead, the “back” and “next” navigation is either visible or hidden. There is also an indicator that communicates the total number of news items.
• Users with limited or poor vision, but who do not use a screen reader. If the user chooses to resize the text via the browser file menu, the slider will flex vertically to accommodate the larger text, and still function. This is primarily a function of the CSS, and it is suggested you maintain a variable font size in order to take advantage of this capability.
• Users that are legally blind, and who browse Web pages with a screen reader
• Users that browse with the keyboard and an adaptive device such as a mouth stick
• Users who have turned off JavaScript or CSS
• Users who have turned off images

It works in Windows:  IE 6+, FF 2+, Opera 9+, Safari 3+

(Quelle links: Webmaster Resource).
Trotz kleinerer Anpassungen bleibt der langweilige graue (bzw. hier blaue) Pfeil und bei längeren Menüs kommen die unformartierbaren Scrollbalken.

Manchmal reicht dies jedoch nicht aus und größere Anpassungen müssen gemacht werden. Und es ist möglich!!

In meinen Archiven fand ich 2 Beiträge aus dem Jahr 2005 die genau dies behandeln (Select Something New, Part 1 und Select Something New, Part 2). Leider scheint diese Art von Technik nicht weit verbreitet zu sein, so dass ich hierfür Werbung machen und neue (bzw. ältere) Gestaltungswege für Formulare aufzeigen möchte.

Für diejenigen unter Euch die gleich loslegen wollen, hier der Code. Ihr müsst ihn nur noch an Eure Bedürfnisse anpassen.

Select Replacement Test Form

Header

 <style type=“text/css”>
body {
font: 80% “Trebuchet MS”, verdana, helvetica, arial, sans-serif;
}
input {
display: block;
margin: 0 0 10px;
border: 1px solid #666;
color: #999;
}
legend {
font-size: 1.2em;
font-weight: bold;
}
label {
display: block;
font-weight: bold;
color: #666;
}
select {
display: block;
width: 300px;
}
select.replaced {
display: none;
}
ul.selectReplacement {
background: url(top.jpg) top left no-repeat;
margin: 0;
padding: 0;
height: 1.65em;
width: 300px;
}
ul.selectReplacement li {
background: #cf5a5a;
color: #fff;
cursor: pointer;
display: none;
font-size: 11px;
line-height: 1.7em;
list-style: none;
margin: 0;
padding: 1px 12px;
width: 276px;
}
ul.selectOpen li {
display: block;
}
ul.selectReplacement li.selected {
background: url(bottom.gif) bottom left no-repeat;
color: #fff;
display: block;
}
ul.selectOpen li.selected {
background: #9e0000;
display: block;
}
ul.selectOpen li:hover,
ul.selectOpen li.hover,
ul.selectOpen li.selected:hover {
background: #9e0000;
color: #fff;
}
</style>
<script type=“text/javascript”>
// <![CDATA[
function selectReplacement(obj) {
obj.className += ‘ replaced’;
var ul = document.createElement(’ul’);
ul.className = ’selectReplacement’;
var opts = obj.options;
for (var i=0; i<opts.length; i++) {
var selectedOpt;
if (opts[i].selected) {
selectedOpt = i;
break;
} else {
selectedOpt = 0;
}
}
for (var i=0; i<opts.length; i++) {
var li = document.createElement(’li’);
var txt = document.createTextNode(opts[i].text);
li.appendChild(txt);
li.selIndex = opts[i].index;
li.selectID = obj.id;
li.onclick = function() {
selectMe(this);
}
if (i == selectedOpt) {
li.className = ’selected’;
li.onclick = function() {
this.parentNode.className += ‘ selectOpen’;
this.onclick = function() {
selectMe(this);
}
}
}
if (window.attachEvent) {
li.onmouseover = function() {
this.className += ‘ hover’;
}
li.onmouseout = function() {
this.className =
this.className.replace(new RegExp(” hover\\b”), ”);
}
}
ul.appendChild(li);
}
obj.parentNode.insertBefore(ul,obj);
}
function selectMe(obj) {
var lis = obj.parentNode.getElementsByTagName(’li’);
for (var i=0; i<lis.length; i++) {
if (lis[i] != obj) {
lis[i].className=”;
lis[i].onclick = function() {
selectMe(this);
}
} else {
setVal(obj.selectID, obj.selIndex);
obj.className=’selected’;
obj.parentNode.className =
obj.parentNode.className.replace(new RegExp(” selectOpen\\b”), ”);
obj.onclick = function() {
obj.parentNode.className += ‘ selectOpen’;
this.onclick = function() {
selectMe(this);
}
}
}
}
}
function setVal(objID, selIndex) {
var obj = document.getElementById(objID);
obj.selectedIndex = selIndex;
}
function setForm() {
var s = document.getElementsByTagName(’select’);
for (var i=0; i<s.length; i++) {
selectReplacement(s[i]);
}
}
window.onload = function() {
(document.all && !window.print) ? null : setForm();
}
// ]]>
</script>

Body

<form action=“#” method=“post”>
<fieldset>
<legend>Sample Form</legend>
<label for=“something”>Select to Replace</label>
<select id=“something” name=“something”>
<option value=“1″>This is option 1</option>
<option value=“2″>This is option 2</option>
<option value=“3″>This is option 3</option>
<option value=“4″>This is option 4</option>
<option value=“5″ selected=“selected”>This is option 5</option>
<option value=“6″>This is option 6</option>
<option value=“7″>This is option 7</option>
<option value=“8″>This is option 8</option>
</select>
</fieldset>
</form>

Features

Tablecloth takes bare, well formed table and applies styling and behaviour to it. It searches your html source for table elements and process each one. Oh, yes there’s absolutely no need for hardcoded class names or id’s. Tablecloth adds those automatically. However, if you wish, you can apply your own class names without fear of them being run over.

It features:

• Adding even/odd class names to alternative rows.
• Adding over and out class names for mouse over and mouse out states.
• If set to true Tablecloth will highlight rows or columns (or both).
• If set to true Tablecloth adds selected state on click. Based on preferences it then selects rows or columns (or both). Unselect elements by clicking anywhere on the page.
• It leaves room for your upgrade. It has easily editable function that is called when you click on table cell that you can use for your own code..

It’s a big improvement on the ’standard’ listings in that you can highlight your personal favorites and that users can add sites on which everybody can vote meaning good sites are always on top.

MoreCSS is a small JavaScript library for everyday things, like creating popups, tab menus, tables and lists with “zebra”-style and etc… But the really special thing is: you can do these things in regular CSS. Just include MoreCSS.js and an external stylesheet file in your page header. And then you can use MoreCSS properties like normal CSS properties.

Example:

a {
target:popup;
target-width:640px;
target-height:640px;
}

This will open all links in a 640 × 640 px popup window. Easy, isn’t it?

Installation

Just include MoreCSS.js and an external stylesheet file in your page header like this (of course without the spaces).

< link rel="MoreCSS" href="path/to/the/MoreCSS/stylesheet.css" />
< script type="text/javascript" src="MoreCSS.js">< /script >

Be sure to include the stylesheet before the script, because the stylesheet must be loaded already when the script starts. If possible include both files before all other included files. Because MoreCSS will try to hide some special elements on startup until the processes completed to avoid loading effects.

After that you can use all MoreCSS properties in the external stylesheet.

<img src="image1.gif" height=15 width=15 name="im99">
<input type="checkbox" name="S123" onClick="if (this.checked)
document.im99.src='image2.gif'; if (this.checked == false)
document.im99.src='image1.gif'";>