nicht angemeldet
HTML/CSS: Navigation links
marctrix
OrlokHallo, ich möchte den Platz meiner HTML Seite optimal nutzen. Links befindet sich eine Navigation, rechts daneben der Inhalt (ähnlich wie vertical_tabs).
Nun möchte ich die linke Spalte mit 250px fest setzen. Der Rest soll die restliche Seite ausfüllen. Geht so etwas wie links-width:250px und rechts-with:derRest.
Danke
akzeptierte Antworten
HTML/CSS: Navigation links
Bewertung: keine Bewertung
-
Hej Pauli,
ich möchte den Platz meiner HTML Seite optimal nutzen. Links befindet sich eine Navigation, rechts daneben der Inhalt (ähnlich wie vertical_tabs).
Nun möchte ich die linke Spalte mit 250px fest setzen. Der Rest soll die restliche Seite ausfüllen. Geht so etwas wie
links-width:250pxundrechts-with:derRest.Das wird aber viel zu eng. Wieso willst du rechts schmaler haben als Links? 250px plus ein paar Abstände dürften knapp 300 Pixel sein. Dann bleiben von den 360 Pixeln, die die meisten Besucher Deiner Webseite haben dürften, nur noch 60 für die Texte übrig.
Davon abgesehn: Mit flexbox oder grid überlässt du diese Rechnung bequem dem Browser. Und wenn du das geschickt formulierst, stellt der Browser auch automatisch eine andere Darstellung (nebeneinander statt untereinander) bereit, sobald genug Platz da ist.
Wenn du möchtest, dass für die Navigation mindestens 250px bereit stehen und für den Hauptteil auch, dann lässt du erneut die Bedürfnisse der Nutzer außen vor. Die interessiert nciht wie viele Pixel Deine Boxen haben, die möchten, dass Boxen ausreichend groß für gut lesbare Texte sind. Du solltest also gar nciht erst in pixeln denken, sondern in Buchstaben. Wie oft soll der Buchstabe "m" beispielsweise in eine Zeile passen?
Daher würde ich empfehlen etwas in dieser Art zu verwenden.
body { display: flex; flexwrap: wrap; } nav { flex: 1 2 15em; } main { flex: 2 1 30em; }Vorausgesetzt Dein HTML sieht so aus:
<body> <nav>…</nav> <main>…</main> </body>Aber das kann ich freilich nicht wissen.
Grundsätzlich solltest du dir angewöhnen, die Sicht des Nutzers einzunehmen.
w3schools ist übrigens nicht der Weisheit letzter Schluss…
Marc
-
hallo
Hallo, ich möchte den Platz meiner HTML Seite optimal nutzen. Links befindet sich eine Navigation, rechts daneben der Inhalt (ähnlich wie vertical_tabs).
Nun möchte ich die linke Spalte mit 250px fest setzen. Der Rest soll die restliche Seite ausfüllen. Geht so etwas wie
links-width:250pxundrechts-with:derRest.Danke
Ich habe dir ein Beispiel gemacht
-
danke, das hilft
-
-
Hallo Pauli
ähnlich wie vertical_tabs
Das will ich nicht hoffen. Das Beispiel ist Müll. Für Seitenbesucher die sich den Inhalt der Seite vorlesen lassen ist nicht erkennbar, dass es sich hierbei um Tabs handelt. Die Bedienung entspricht nicht den Erwartungen der Besucher.
Es genügt nicht, den Elementen lediglich Klassen zuzuweisen, um die Bedeutung der Elemente kenntlich zu machen und den Zustand der Komponente zu beschreiben. Dafür gibt es spezielle Attribute. Das Markup sollte etwa wie im folgenden Beispiel aussehen.
<!-- tablist should have accessible name --> <div role="tablist" aria-orientation="vertical"> <button id="tab-1" type="button" role="tab" tabindex="0" aria-selected="true"> <!-- name of tab 1 --> </button> <button id="tab-2" type="button" role="tab" tabindex="-1" aria-selected="false"> <!-- name of tab 2 --> </button> <button id="tab-3" type="button" role="tab" tabindex="-1" aria-selected="false"> <!-- name of tab 3 --> </button> </div> <section role="tabpanel" aria-labelledBy="tab-1"> <!-- content of tab 1 --> </section> <section role="tabpanel" aria-labelledBy="tab-2" hidden="hidden"> <!-- content of tab 2 --> </section> <section role="tabpanel" aria-labelledBy="tab-3" hidden="hidden"> <!-- content of tab 3 --> </section>Die Attribute
aria-selectedundtabindexauf den Tabs undhiddenauf den Panels müssen bei der Bedienung entsprechend angepasst werden. In der Tabliste wird mit den vertikalen Pfeiltasten navigiert. Nur ein Tab ist in der Taborder. Mit der Pseudoklasse:focusmuss deutlich hervorgehoben werden, welcher Tab gerade den Fokus hat.Was bei der Implementierung von Tabs alles zu beachten ist, damit Erkennbarkeit und Bedienbarkeit gewährleistet sind, habe ich vor nicht all zu langer Zeit mal recht ausführlich beschrieben. Hier kannst du es nachlesen: Teil 1 und Teil 2.
Viele Grüße,
Orlok
-
hallo
Hallo Pauli
ähnlich wie vertical_tabs
Das will ich nicht hoffen. Das Beispiel ist Müll.
Ich glaube, Pauli hat das Beispiel eher betreffs des visuellen Layouts denn betreffs der Funktionalität verlinkt.
-
hallo
<!-- tablist should have accessible name --> <div role="tablist" aria-orientation="vertical"> <button id="tab-1" type="button" role="tab" tabindex="0" aria-selected="true">Tab 1</button>...
</div> <section role="tabpanel" aria-labelledBy="tab-1"><!-- content of tab 1 --></section>
Was soll eigentlich mit dem Fokus geschehen, wenn ich einen Button aktiviere?
Die wahrscheinlichste Antwort lautet wohl: er soll das erste fokusierbare Element im zugehörigen Tabcontent navigieren.
Was soll geschehen, wenn der Fokus den Tabcontent verlässt?
Die wahrscheinlichste Antwort: Es soll der button fokusiert werden, der durch aria-labeledby (oder aria-controls) beschrieben wird.
Zusatzfrage: wo soll mein Fokus hin, wenn ich den letzten Button der Tabgruppe verlasse?
Die wahrscheinlichste Antwort, es soll das erste fokusierbare Element nach der Tab-Panel-Gruppe navigiert werden.
Kurzer Sinn der Fragen: Tabpanels sind weit komplexer. Auch dein Code reicht nicht, geht aber in die richtige Richtung.
-
Was soll eigentlich mit dem Fokus geschehen, wenn ich einen Button aktiviere?
Die wahrscheinlichste Antwort lautet wohl: er soll das erste fokusierbare Element im zugehörigen Tabcontent navigieren.
Was soll geschehen, wenn der Fokus den Tabcontent verlässt?
Die wahrscheinlichste Antwort: Es soll der button fokusiert werden, der durch aria-labeledby (oder aria-controls) beschrieben wird.
Ich könnte mich täuschen, aber bilden die beiden Regeln zusammengenommen nicht eine Keyboard-Trap? Also komme ich da mit dem Fokus überhaupt wieder aus der Tab-Komponente heraus, wenn ich nur eine Tastatur zur Bedienung nutze?
Ich hätte instinktiv auf beide Fragestellungen anders geantwortet:
- Fokus auf dem Tab-Button belassen.
- Zum nächsten anvisierbaren Element in der Tab-Reihenfolge springen.
Also beides beim Standard-Verhalten belassen.
Zusatzfrage: wo soll mein Fokus hin, wenn ich den letzten Button der Tabgruppe verlasse?
Bei der Navigation mit Pfeiltaste würde ich den Fokus auf den ersten Tab-Button zurücksetzen. Bei der Navigation mit der Tab-Taste würde ich auf das aktive Tab-Panel springen.
Kurzer Sinn der Fragen: Tabpanels sind weit komplexer.
In diesem Punkt sind wir uns denke ich alle einig. Zur Orientierung gibt es dazu auch einen Ratgeber von der der Accessibility-Arbeitsgruppe des W3C.
-
hallo
Was soll eigentlich mit dem Fokus geschehen, wenn ich einen Button aktiviere?
Die wahrscheinlichste Antwort lautet wohl: er soll das erste fokusierbare Element im zugehörigen Tabcontent navigieren.
Was soll geschehen, wenn der Fokus den Tabcontent verlässt?
Die wahrscheinlichste Antwort: Es soll der button fokusiert werden, der durch aria-labeledby (oder aria-controls) beschrieben wird.
Ich könnte mich täuschen, aber bilden die beiden Regeln zusammengenommen nicht eine Keyboard-Trap? Also komme ich da mit dem Fokus überhaupt wieder aus der Tab-Komponente heraus, wenn ich nur eine Tastatur zur Bedienung nutze?
ja es kann zur Trap werden, wenn ich nicht spezielle Buttons einsetze, die den Fokus entsprechend verschieben.
Ich hätte instinktiv auf beide Fragestellungen anders geantwortet:
- Fokus auf dem Tab-Button belassen.
Und wie weisst du, das durch das Aktivieren etwas geschehen ist?
- Zum nächsten anvisierbaren Element in der Tab-Reihenfolge springen.
Und wie weisst du, dass du jetzt den Bereich des Tab-Panels verlassen hast?
Bei der Navigation mit Pfeiltaste würde ich den Fokus auf den ersten Tab-Button zurücksetzen. Bei der Navigation mit der Tab-Taste würde ich auf das aktive Tab-Panel springen.
Ich habe bewusst nur von Fokus verschieben gesprochen, um diesen Zankapfel nicht zu berühren.
Kurzer Sinn der Fragen: Tabpanels sind weit komplexer.
In diesem Punkt sind wir uns denke ich alle einig. Zur Orientierung gibt es dazu auch einen Ratgeber von der der Accessibility-Arbeitsgruppe des W3C.
-
HTML/CSS: Navigation links
Ich hätte instinktiv auf beide Fragestellungen anders geantwortet:
- Fokus auf dem Tab-Button belassen.
Und wie weisst du, das durch das Aktivieren etwas geschehen ist?
Berechtigte Frage, da fehlen in Orloks Markup noch
aria-controls-Attribute auf den Tabs.- Zum nächsten anvisierbaren Element in der Tab-Reihenfolge springen.
Und wie weisst du, dass du jetzt den Bereich des Tab-Panels verlassen hast?
Fokussierte Elemente sollten sich grundsätzlich erkennbar absetzen, mit der
:focus-Pseudoklasse geht das. Dem Screenreader-Nutzer wird beim Fokussieren die Element-Beschriftung bzw. der Inhalt des anvisierten Elements vorgelesen. Oder habe ich die Frage missverstanden?-
hallo
Ich hätte instinktiv auf beide Fragestellungen anders geantwortet:
- Fokus auf dem Tab-Button belassen.
Und wie weisst du, das durch das Aktivieren etwas geschehen ist?
Berechtigte Frage, da fehlen in Orloks Markup noch
aria-controls-Attribute auf den Tabs.Welche Information erwartest du dadurch, dass der Button ein aria-controls aufweist, nachdem du den Button angeklickt hast?
- Zum nächsten anvisierbaren Element in der Tab-Reihenfolge springen.
Und wie weisst du, dass du jetzt den Bereich des Tab-Panels verlassen hast?
Fokussierte Elemente sollten sich grundsätzlich erkennbar absetzen, mit der
:focus-Pseudoklasse geht das. Dem Screenreader-Nutzer wird beim Fokussieren die Element-Beschriftung bzw. der Inhalt des anvisierten Elements vorgelesen. Oder habe ich die Frage missverstanden?Du siehst also gegebenenfalls, dass du die Tabpanel-Sektion verlassen hast.
-
Hallo 1unitedpower
Fokus auf dem Tab-Button belassen.
Und wie weisst du, das durch das Aktivieren etwas geschehen ist?
Berechtigte Frage, da fehlen in Orloks Markup noch
aria-controls-Attribute auf den Tabs.Das Attribut
aria-controlsgibt theoretisch Auskunft darüber, welche Elemente hinsichtlich ihrer Sichtbarkeit durch das Element mit dem Attribut kontrolliert werden. Durch das Setzen des Attributs könnte also eine maschinenlesbare Verbindung zwischen Tab und zugehörigem Tabpanel hergestellt werden, die bei mir im Markup nur in umgekehrter Richtung durch die Verwendung vonaria-labelledbygegeben ist. Das Attribut würde man aber nur genau einmal setzen, nämlich dann, wenn die Tabliste erzeugt wird. Dass beim Aktivieren etwas geschehen ist, wird mitaria-selectedkenntlich gemacht, bzw. für sehende Benutzer durch das Einblenden des aktuellen Tabpanels.Der Einsatz von
aria-controlsist meines Wissens leider auch nicht so hilfreich, wie es zunächst den Anschein hat. Von den meisten Screen–Readern wird das Attribut wohl gar nicht unterstützt und die Implementierungen die es gibt, verbessern die Bedienbarkeit nicht. Da ich keine Informationen darüber habe, dass sich die Situation diesbezüglich verbessert hat, halte ich es aktuell nicht für sinnvoll, das Attribut zu setzen. Stattdessen setze ich auf die Konvention, dass der einzublendende Inhalt im Dokument und in der Taborder direkt nach dem Element kommt, das die Sichtbarkeit des Inhalts kontrolliert.Das würde ich übrigens prinzipiell anraten, auch bei anderen Widgets, bei denen die Sichtbarkeit von Elementen durch andere Elemente kontrolliert wird.
Viele Grüße,
Orlok
-
Hej 1unitedpower,
Berechtigte Frage, da fehlen in Orloks Markup noch
aria-controls-Attribute auf den Tabs.Sehe ich anders: aria-controls is poop!
Marc
-
Hallo beatovich
Was soll eigentlich mit dem Fokus geschehen, wenn ich einen Button aktiviere?
Die wahrscheinlichste Antwort lautet wohl: er soll das erste fokusierbare Element im zugehörigen Tabcontent navigieren.
Nein. Nicht direkt. Wenn ein Tab aktiviert wird, dann wird der Fokus nicht verschoben. Erst wenn die Benutzerin die Tabulatortaste drückt und damit zum Ausdruck bringt, dass sie die Tabliste verlassen will, wird der Fokus auf das erste fokussierbare Element innerhalb des Tabpanels verschoben. Sofern es ein solches Element gibt. Wenn nicht, sollte das Tabpanel selbst fokussiert werden. Damit sich Benutzer von Screen–Readern orientieren können, muss das Panel wie in meinem Beispielcode ein entsprechendes Label haben. Außerdem ist in diesem Fall auch auf den Panels mit
:focuseine visuelle Markierung anzubringen. Auf diese Weise ist sichergestellt, dass keine Inhalte übersprungen werden.Was soll geschehen, wenn der Fokus den Tabcontent verlässt?
Die wahrscheinlichste Antwort: Es soll der button fokusiert werden, der durch aria-labeledby (oder aria-controls) beschrieben wird.
Nein. Das wäre verwirrend. Elemente, die in der Taborder vor dem aktuell ausgewählten Element stehen, werden mit Shift+Tab angesteuert. Das gilt auch für den Button in der Tabliste. Ist das letzte interaktive Element im Tabpanel fokussiert, wird das nächste Element angewählt, dass dem Tabpanel im Dokument nachfolgt.
Zusatzfrage: wo soll mein Fokus hin, wenn ich den letzten Button der Tabgruppe verlasse?
Die wahrscheinlichste Antwort, es soll das erste fokusierbare Element nach der Tab-Panel-Gruppe navigiert werden.
Was meinst du mit verlassen? Wenn der Fokus auf dem letzten Tab innerhalb der Tabliste liegt und die Benutzerin – je nach Orientierung der Liste – die rechte Pfeiltaste oder die untere Pfeiltaste drückt, dann sollte wieder zum Anfang der Tabliste gesprungen werden. Wird hingegen die Tabulatortaste betätigt, dann wird, wie ich oben beschrieben habe, das geöffnete Tabpanel beziehungsweise das erste interaktive Element innerhalb des Panels fokussiert.
Kurzer Sinn der Fragen: Tabpanels sind weit komplexer.
Ja. Deswegen hatte ich den (auf zwei Postings verteilten) Beitrag verlinkt, in dem ich die Anforderungen an ein Tabbed Interface ausführlicher beschrieben habe. Dort habe ich auch zu den aufgeworfenen Fragen Stellung genommen …
Viele Grüße,
Orlok
-
hallo
Hallo beatovich
Was soll eigentlich mit dem Fokus geschehen, wenn ich einen Button aktiviere?
Die wahrscheinlichste Antwort lautet wohl: er soll das erste fokusierbare Element im zugehörigen Tabcontent navigieren.
Nein. Nicht direkt. Wenn ein Tab aktiviert wird, dann wird der Fokus nicht verschoben. Erst wenn die Benutzerin die Tabulatortaste drückt und damit zum Ausdruck bringt, dass sie die Tabliste verlassen will, wird der Fokus auf das erste fokussierbare Element innerhalb des Tabpanels verschoben. Sofern es ein solches Element gibt. Wenn nicht, sollte das Tabpanel selbst fokussiert werden. Damit sich Benutzer von Screen–Readern orientieren können, muss das Panel wie in meinem Beispielcode ein entsprechendes Label haben. Außerdem ist in diesem Fall auch auf den Panels mit
:focuseine visuelle Markierung anzubringen. Auf diese Weise ist sichergestellt, dass keine Inhalte übersprungen werden.Aber Moment, das Aktivieren eines Buttons im Sinne von Zeige mir den zugehörigen Inhalt bedingt, dass der Fokus verschoben wird, denn du willst ja alle gleich behandeln, und nicht dass nur ein Teil versteht, welcher Inhalt jetzt visuell verfügbar ist.
-
-
-