Select Option redirect

[bruzzler]

Hallo zusammen,
ich versuche gerade eine barrierefreie und responsive Website ohne JS zu realisieren.
Nun hänge ich gerade an etwas - und zwar an einem Select Dropdown (mobile Navi).
Diese soll nach Auswahl auf die jeweilige HTML springen.
Bisher habe ich das immer so gemacht:

  
	<select name="menu_list_mobile" id="menu_list_mobile" onChange="window.location=this.options[this.selectedIndex].value;">  
				<option value="">Navigation</option>  
				<option selected="selected" value="index.html">Startseite</option>  
				<option value="index-2.html">Link 1</option>  
			</select>  

Hat jemand eine Idee, wie das ohne JS zu lösen ist?
Danke

[Der Martin]

Hallo,

Nun hänge ich gerade an etwas - und zwar an einem Select Dropdown (mobile Navi).
Diese soll nach Auswahl auf die jeweilige HTML springen.
Bisher habe ich das immer so gemacht:

<select name="menu_list_mobile" id="menu_list_mobile" onChange="window.location=this.options[this.selectedIndex].value;">

<option value="">Navigation</option>
<option selected="selected" value="index.html">Startseite</option>
<option value="index-2.html">Link 1</option>
</select>

>   
> Hat jemand eine Idee, wie das ohne JS zu lösen ist?  
  
überhaupt nicht. Ein select-Element ist ein Formularelement. Ohne Zuhilfenahme von JS erlaubt es die Auswahl eines Wertes aus einer Liste, und das Senden dieses Wertes als name-value-Pärchen eines Formulars. Mehr nicht.  
Was immer man darüber hinaus mit dem Element anstellen möchte, braucht wohl Javascript-Unterstützung.  
  
Ws du tun kannst: Setze das select-Element zusammen mit einem Submit-Button in ein Formular. Lass dann bei der Formular-Verarbeitung die serverseitige Logik entscheiden, was als Antwort kommen soll (ggf. ein Redirect auf die eigentliche Zielseite). Das ist dann zwar nicht das Verhalten, das du ursprünglich beschrieben hast, sondern ein Klick mehr - aber es kommt dem Beschriebenen am nächsten.  
Für die Nutzer, bei denen Javascript verfügbar ist, kann's ja die automatische Aktion mit dem onchange-Handler (bitte mit kleinem 'c') sein. In dem Fall kann man auch den dann überflüssigen Submit-Button per CSS verschwinden lassen.  
  
Ciao,  
 Martin  

-- 
Besteht ein Personalrat aus nur einer Person, erübrigt sich die Trennung nach Geschlechtern.  
  (aus einer Info des deutschen Lehrerverbands Hessen)  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Marc]

Hallo bruzzler,

bevor Du bei mir auf den Grill kommst:

JS ist auf barrierefreien Webseiten erlaubt - sofern es keine Barrieren errcihtet. D. h. konkret auf Tastaturbedienbarkeit achten, ist es auch Screenreader-Nutzern möglich Aktionen auszulösen, ist es Screenreader-Nutzern und Menschen, die schlecht sehen können (z. B. auf extreme Vergrößerung angewiesen sind) klar, was bei einem Klick/Tastendruck passiert ect...

Viele Grüße,
Marc.

[1UnitedPower]

Meine Herren!

Nun hänge ich gerade an etwas - und zwar an einem Select Dropdown (mobile Navi).
Diese soll nach Auswahl auf die jeweilige HTML springen.

Barrierefrei steht m.M.n. im Widerspruch zu einer Select-Navigation. Wieso nimmst du nicht eine gewöhnliche Navigation?

<nav>  
   <h1>Navigation</h1>  
   <ul>  
      <li><a href="index.html">Startseite</a></li>  
      <li><a href="link1.html">Link1</a></li>  
   </ul>  
</nav>

Vorteil dieser Lösung ist auch, dass direkt bei Klicken des Links zur Unterseite gesprungen wird und nicht erst, wie im Falle von select, nachdem das Element den Fokus verloren hat.

Das Menü ausklappbar zu machen, um Platz zu sparen, sollte mit JS und CSS keine schwierige Sache sein.

[molily]

Hallo,

Barrierefrei steht m.M.n. im Widerspruch zu einer Select-Navigation.

Select-Navigationen sind gerade auf Mobilseiten ein bewährtes Pattern. Warum sind sie nicht barrierefrei?

Wieso nimmst du nicht eine gewöhnliche Navigation?

Weil man sich dann um das barrierefreie Ein- und Ausblenden mit CSS Gedanken machen muss.

Select-Navigationen sind sehr robust. Der Mobilbrowser öffnet einen nativen Dialog, der den halben oder ganzen Screen bedeckt und eine komfortable Navigation zwischen den Items erlaubt. Dieser Dialog ist von Haus aus barrierefrei, unter iOS z.B. mit VoiceOver. So gut bedienbar wird man eine Aufklappnavigation mit HTML/CSS/JavaScript nicht bekommen.

Vorteil dieser Lösung ist auch, dass direkt bei Klicken des Links zur Unterseite gesprungen wird und nicht erst, wie im Falle von select, nachdem das Element den Fokus verloren hat.

Der change-Event wird von Mobilbrowsern ausgelöst, sobald man ein Item antappt.

Das Menü ausklappbar zu machen, um Platz zu sparen, sollte mit JS und CSS keine schwierige Sache sein.

Schwierig nicht. Aber es gibt einiges hinsichtlich Barrierefreiheit zu bedenken.

Mathias

[1UnitedPower]

Meine Herren!

Barrierefrei steht m.M.n. im Widerspruch zu einer Select-Navigation.

Select-Navigationen sind gerade auf Mobilseiten ein bewährtes Pattern. Warum sind sie nicht barrierefrei?

Dass die Navigation ein Spezialfall für Mobil-Seiten ist, habe ich mal geschmeidig überlesen. Meine Argumentation ist, dass ein ausdrucksstarkes Markup von assistierender Software im Allgemeinen besser verarbeitet werden kann. Ich fühle mich aber wirklich ertappt, weil ich die Gegebenheiten und Möglichkeiten in der mobilen Welt erschreckend schlecht kenne.

Wieso nimmst du nicht eine gewöhnliche Navigation?

Weil man sich dann um das barrierefreie Ein- und Ausblenden mit CSS Gedanken machen muss.

Schwierig nicht. Aber es gibt einiges hinsichtlich Barrierefreiheit zu bedenken.

Gute Ergänzung, was hälst du von folgender Modifikation?

<nav>  
   <details>  
      <summary><h1>Navigation</h1></summary>  
      <ul>  
         <li><a href="index.html">Startseite</a></li>  
         <li><a href="link1.html">Link1</a></li>  
      </ul>  
   </details>  
</nav>

User-Agents können so automatisch entsrepchende ARIA-Rollen setzen (ansonsten sind sie nachrüstbar).