tabindex für Hilfe-Funktion

[Linuchs]

Moin,

ich möchte Formularfelder mit online-Hilfen versehen.

In einer Tabellenspalte sind die Zeilen (pro Zeile ein Feld) durchnummeriert und beim Klick auf eine Nummer soll Ajax künftig den Hilfetext holen. Zum Beispiel dass ein Passwort mindestens sechs Zeichen haben muss.

Nun ist das Problem, dass ich die Eingabefelder nicht mehr mit TAB wechseln kann, weil die Hilfe-Nummern ein TAB beanspruchen.

Andererseits kann ich die aber auch nit mit tabindex ab 101 durchnummerieren, denn tabindex gilt nur für iput-Felder.

Wie kann ich das Problem lösen?

Linuchs

[Gunnar Bittersmann]

@@Linuchs

Nun ist das Problem, dass ich die Eingabefelder nicht mehr mit TAB wechseln kann, weil die Hilfe-Nummern ein TAB beanspruchen.

??

Andererseits kann ich die aber auch nit mit tabindex ab 101 durchnummerieren, denn tabindex gilt nur für iput-Felder.

Selbst die Nummer zu vergeben/die Tab-Reihenfolge zu ändern ist selten eine gute Idee.

Wie kann ich das Problem lösen?

tabindex="0"?

LLAP 🖖

[Linuchs]

tabindex="0"?

Irgendwie nicht ...

<tr>
  <td>Hauptbranche</td>
  <td></td>
  <td>5</td>
  <td>
    <input ...
  </td>
</tr>

<tr>
  <td>Firma 1</td>
  <td>*</td>
  <td><a href="javascript:alert('Firmenname 1')" tabindex="0">6</a></td>
  <td>
<input ...

Wenn ich von der Hauptbranche auf das nächste Feld Firma tabulieren möchte, lande ich auf der Feldnummer 6 - trotz tabindex="0"

Linuchs

[Christian Kruse]

Hallo Linuchs,

tabindex="0"?

Irgendwie nicht ...

tabindex="0" aktiviert ein Element für das durchtabben. Wenn du das deaktivieren möchtest, kannst du das mit tabindex="-1".

Andere Werte als 0 oder -1 zu verwenden ist idR nicht sinnvoll, da die Implementationen der verschiedenen Browser verbuggt sind und stark voneinander abweichen; ausserdem hast du das Problem, dass du damit die Tastatur-Bedienung deiner UI kaputt machen kannst - etwa weil du z.B. bestimmte UI-Elemente deines Browsers nicht mehr erreichen kannst.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Andere Werte als 0 oder -1 zu verwenden ist idR nicht sinnvoll, da die Implementationen der verschiedenen Browser verbuggt sind und stark voneinander abweichen;

?? Inwiefern?

ausserdem hast du das Problem, dass du damit die Tastatur-Bedienung deiner UI kaputt machen kannst - etwa weil du z.B. bestimmte UI-Elemente deines Browsers nicht mehr erreichen kannst.

Inwiefern?

Das Problem besteht vor allem darin, dass eine Tab-Reihenfolge, die wild auf dem Bildschirm umherspringt, verwirrend für Nutzer ist.

Deshalb wird auch gerade diskutiert, wie mit per order umsortierten Flexitems umzugehen ist.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Andere Werte als 0 oder -1 zu verwenden ist idR nicht sinnvoll, da die Implementationen der verschiedenen Browser verbuggt sind und stark voneinander abweichen;

?? Inwiefern?

Unter Chrome springt der Cursor wild innerhalb des Dokuments hin und her. Unter Firefox springt der Cursor wild innerhalb des Dokuments und der UI hin und her.

ausserdem hast du das Problem, dass du damit die Tastatur-Bedienung deiner UI kaputt machen kannst - etwa weil du z.B. bestimmte UI-Elemente deines Browsers nicht mehr erreichen kannst.

Inwiefern?

Hab ich doch geschrieben. Bestimmte Werte von tabindex führen dazu, dass man UI-Elemente nicht mehr mit der Tastatur erreichen kann. Unter Firefox z.B. habe ich beim herumspielen damit bei einem bestimmten Wert (keine Ahnung mehr welcher das war) die URL-Leiste unerreichbar gemacht für die Tastatur.

Das Problem besteht vor allem darin, dass eine Tab-Reihenfolge, die wild auf dem Bildschirm umherspringt, verwirrend für Nutzer ist.

Das Problem ist deutlich komplexer.

LG,
CK

[Gunnar Bittersmann]

@@Linuchs

<td><a href="javascript:alert('Firmenname 1')" tabindex="0">6</a></td>

a-Elemente mit href-Attribut sind schon in der Tab-Reihenfolge, da brauchst du kein tabindex="0".

href="javascript:…" ist aber Unfug und ein sicheres Zeichen, dass du einen button verwenden willst.

Wenn ich von der Hauptbranche …

Du meinst das input-Feld?

… auf das nächste Feld Firma tabulieren möchte, lande ich auf der Feldnummer 6

Was wohl das nächste Feld in der Tab-Reihenfolge ist. Wo willst du denn sonst hin?

Online-Beispiel?

LLAP 🖖

[Linuchs]

Hallo Gunnar,

Was wohl das nächste Feld in der Tab-Reihenfolge ist. Wo willst du denn sonst hin?

Wenn ich ein Formular ausfülle, erwarte ich, mit TAB ins nächste Feld zu kommen und nicht in die "Verwaltung" der Seite, wenn ich die Hilfe-Texte mal so bezeichnen darf.

Online-Beispiel?

Leider nein, ist nur für angemeldete User. Ich hab's jetzt testweise anders gelöst, später müssen die Hilfe-Texte aus der Datenbank kommen:

<tr>
  <td>zu Gruppe</td>
  <td></td>
  <td>
<span onclick="alert('gewerbeart varchar(10)\n····A····· A_ccordeon\n····C····· Koor\n·····S···· Shantykoor')">8</span></td>
  <td>
<input
type      = "text"
name      = "gewerbeart"
size      = 10
maxlength = 10
value     = "··········"

></td>

</tr>

Das Bild zum Roman:

Linuchs