Sollte ich den Button oder a verwenden, ein gestyltes Webformular senden

Das Muster, das ich selbst immer wieder mit der Barrierefreiheit sehe, besteht darin, mit dem zu beginnen, was für jeden zugänglich ist, und es auf der Client-Seite durch die bevorzugte Lösung zu ersetzen. Dann, wenn sie diese Technologie nicht haben, degradiert es anmutig. Insbesondere sprechen wir hier über Javascript.

Beginnen Sie zum Beispiel mit einer normalen Schaltfläche in Ihrem Formular. Dies funktioniert für alle, unabhängig davon, ob sie JavaScript aktiviert haben oder nicht. Dann verwenden Sie Javascript, um diese Schaltfläche durch ein Anchor-Tag zu ersetzen (Sie können also: hover in Ihrem CSS verwenden) oder verwenden Sie einfach Javascript, um den gewünschten Hover-Effekt auszuführen (wenn Sie jQuery verwenden, können Sie ein Ereignis an die Schaltfläche binden) mouseover ).

Dies bedeutet, dass die kleine Untergruppe von Personen, die JavaScript nicht aktiviert haben und keinen Browser verwenden, der erweiterte Funktionen unterstützt: Hover-Verwendung, wird Ihren Hover-Effekt nicht sehen, aber Sie werden sicherstellen, dass er immer ordnungsgemäß abgebaut wird.

Internet Explorer 6 unterstützt nur die CSS-Attribute "hover" für Anker.

Wenn Sie IE6 unterstützen, müssen Sie einige Javascript-Lösungen wie @charles vorgeschlagen verwenden, grundsätzlich müssen Sie dem Element dynamisch Klassen hinzufügen / entfernen. Normalerweise setze ich diese "Fixes" in eine IE6.js-Datei mit bedingten Kommentaren.

Die Verwendung von jQuery ist optional, aber es hilft wirklich, die Menge an Javascript zu reduzieren, die Sie schreiben müssen, um diese Effekte zu erzielen. p>     

Unter Verwendung von Javascript können Sie auch die Schaltfläche mit dem a-Tag ersetzen, wie Jon es vorschlägt. Dies ist mit jQuery, aber Sie könnten dies mit nur normalem Javascript oder einer anderen Bibliothek tun:

So haben Sie den Button, für Leute ohne Javascript. Und auch ein nettes styled ein Tag für Leute mit Javascript.

Ich habe das nicht ausgiebig getestet und noch nicht plattformübergreifend, aber sowohl für Midori als auch für FF3.x (unter Ubuntu 8.04) verwenden die button -Tags Stile für: hover,: focus und: active (ähnlich wie a Tags).

Das funktioniert sicher:

Demonstration bei: Ссылка

Weiter bearbeitet um auf Frage-Edit zu antworten:

Sie könnten versuchen, ein drittes Listenelement hinzuzufügen und sie zu benennen (ich würde weiter empfehlen, Feldgruppen anstelle von Listen zu verwenden, aber gehen wir mit dem, was Sie haben).

Dann im regulären CSS add:

Und umgekehrt das in der IE-Anpassungen.css:

Es ist auf keinen Fall perfekt, aber es stört Geräte im Forms-Modus nicht und sollte es ermöglichen, dass die Tasten angezeigt werden; und sollte IE 7 (und darunter) nur zwingen, die Links anzuzeigen. Also ... sollte die Zugänglichkeit hoffentlich nicht zu sehr stören.

Auch wenn Sie eine Lösung finden können (die von Matt Ross erwähnten könnten eine sein) Sie sollten besser die Zugänglichkeit als poliertes Aussehen und Gefühl wählen!

Wie wäre es mit einer jQuery-Lösung, etwa so:

Ich könnte meinen Fuß in meinen Mund stecken oder so etwas hier, aber ich wollte nur etwas anderes hervorheben. Wie auch immer Sie sich entscheiden, dieses Problem zu lösen, wenn Ihre Schaltfläche oder der Anker eine Aktion ausführen soll (z. B. einen Datensatz löschen oder Ihr Bankkonto ändern), dann empfehlen wir dringend, dass Sie ein Postback (POST) durchführen. Dies ist, was ein Knopf normalerweise in einer Form tut. Führe kein GET aus, was ein Achor normalerweise tut.

Dies liegt daran, dass GETs von Dingen wie Suchmaschinen, Browser-Precachern und anderen Dingen zu leicht durch Zufall verfolgt werden. Wo ein POST als etwas erkannt wird, das eine Aktion ausführt und nicht automatisch befolgt wird.

Auf der anderen Seite, wenn Ihr "Knopf" nur eine Art von Abfrage durchführt, ist ein GET in Ordnung.

Und Sie können auch einen Post mit einem Anker machen, besonders mit Javascript.

jemand mit dieser frischeren in ihren Gedanken kann probalby füllen Sie eine Reihe der Details, die ich beschönigt.

Sie können das definitiv mit CSS alleine machen (und ein wenig js für arme ie6).

Zuerst mach es in FF mit: hover,: aktiv, was auch immer. Fügen Sie dann js hinzu, um Klassen zu den Schaltflächen bei Hover hinzuzufügen, klicken Sie auf .... Fügen Sie diese Klassen zu Ihren: hover,: active ... Deklarationen hinzu (button: hover, button.hover {color: red}) und los gehts . Sie müssen etwas massieren für Safari und die IEs, aber es kann absolut getan werden.

Eine andere Möglichkeit ist eine Art Mashup der vorherigen Vorschläge. Wenn ich mich nicht irre, wird JAWS Elemente mit Sichtbarkeit lesen: versteckt (nicht sicher über Fensteraugen). Anstatt die Schaltfläche mit js zu entfernen oder die Anzeige zu aktivieren: none, sollte die Einstellung "unsichtbar" über den User-Agent laufen. Dann einfach uns JS, um den Link zu binden, klicken Sie auf das Formular senden.