Sophie: | hinter jedem Nav-Punkt

Hallo,

geht es auch einfacher bzw. schöner?

<nav class="top">
		<ul>
			<li><a href="#">Punkt 1</a> | </li>
			<li><a href="#">Punkt 2</a> | </li>
			<li><a href="#">Punkt 3</a> | </li>
			<li><a href="#">Punkt 4</a> | </li>
			<li><a href="#">Punkt 5</a> | </li>
		</ul>
	</nav>

Hinter jedem <li> soll ein Strich nach unten kommen.

Das CSS

.top {
	margin-top: 1.5em;
}

.top ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.top ul li {
	text-transform: uppercase;
	font-size: 0.813em;
}

.top ul li a {
	color: #013c6d;
	text-decoration: none;
}

akzeptierte Antworten

  1. @@Sophie

    geht es auch einfacher bzw. schöner?

    CSS-generiert:

    .top li::after { content: ' | ' }
    

    Hinter jedem <li> soll ein Strich nach unten kommen.

    Auch nach dem letzten?

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. Hallo @Gunnar Bittersmann

      Auch nach dem letzten?

      nein, da sollte keines mehr auftauchen.

      1. @@Sophie

        Auch nach dem letzten?

        nein, da sollte keines mehr auftauchen.

        Dann musst du das eben so sagen: nicht :not() letztes Kind :last-child.

        .top li:not(:last-child)::after { content: ' | ' }
        

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Hallo @Gunnar Bittersmann,

          Dann musst du das eben so sagen: nicht :not() letztes Kind :last-child.

          .top li:not(:last-child)::after { content: ' | ' }
          

          kann es sein, dass das im aktuellen Google Chrome nicht funktioniert? Ich sehe leider keine Veränderung wenn ich deinen CSS Code einfüge.

          1. Hallo

            Du kannst die Navigation auch aktueller und übersichtlicher erstellen. Ein Liste kann verwendet werden, ist aber keineswegs Pflicht.

            Zu dem HTML

            <nav class="top">
               <a href="#">Punkt 1</a>
               <a href="#">Punkt 2</a>
               <a href="#">Punkt 3</a>
               <a href="#">Punkt 4</a>
               <a href="#">Punkt 5</a>
            </nav>
            

            dieses CSS

            .top {
               margin-top: 1.5em;
               display: flex;
            }
            .top a {
               color: #013c6d;
               font-size: 0.813em;
               text-decoration: none;
               text-transform: uppercase;
            }
            .top a:nth-last-child(1n+2)::after {
               content: "|";
               margin-left: 0.5em;
               margin-right: 0.5em;
            }
            

            Großer Vorteil: Die ganzen CSS-Angaben für die überflüssige Liste entfallen.

            Gruss

            MrMurphy

            1. @@MrMurphy1

              Ein Liste kann verwendet werden, ist aber keineswegs Pflicht. […] die überflüssige Liste

              Wie oft muss man dir eigentlich noch sagen, dass die Liste nicht überflüssig ist, sondern auch der Barrierefreiheit zugute kommt?

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. Hallo

                sondern auch der Barrierefreiheit zugute kommt

                Deine Meinung. Sachlich ist das nicht richtig.

                Gruss

                MrMurphy

                1. hihihihihihi

                  <nav class="top">
                  		<ul>
                  			<li><a href="#">Punkt 1</a> </li> |
                  			<li><a href="#">Punkt 2</a> </li> |
                  			<li><a href="#">Punkt 3</a> </li> |
                  			<li><a href="#">Punkt 4</a> </li> |
                  			<li><a href="#">Punkt 5</a> </li>
                  		</ul>
                  	</nav>
                  

                  ich denke das funktioniert auch und regt die Gemüter auf ^^

                  1. Hallo hmm,

                    <nav class="top">
                    		<ul>
                    			<li><a href="#">Punkt 1</a> </li> |
                    			<li><a href="#">Punkt 2</a> </li> |
                    			<li><a href="#">Punkt 3</a> </li> |
                    			<li><a href="#">Punkt 4</a> </li> |
                    			<li><a href="#">Punkt 5</a> </li>
                    		</ul>
                    	</nav>
                    

                    ich denke das funktioniert auch und regt die Gemüter auf ^^

                    valide ist es jedenfalls nicht (Text direkt im ul-Element ist nicht erlaubt).

                    Nebenbei: Warum hast du den Quelltext als Javascript ausgezeichnet?

                    Gruß
                    Julius

                    1. Nebenbei: Warum hast du den Quelltext als Javascript ausgezeichnet?

                      ich bin gerad im JavaScript Modus irgendwie 😂

                2. Hallo @mrmurphy

                  also das heißt man braucht für eine Navigation nicht dringend ein <ul><li>? Denn bis jetzt habe ich in jedem Tutorial gelesen, dass eine Navigation immer aus einem <ul><li> besteht.

                  1. Hallo Sophie,

                    also das heißt man braucht für eine Navigation nicht dringend ein <ul><li>? Denn bis jetzt habe ich in jedem Tutorial gelesen, dass eine Navigation immer aus einem <ul><li> besteht.

                    das Stichwort lautet hier Semantik. Wenn du eine Liste von Links (!!!) hast, die eventuell auch noch mehrere Hierarchie-Ebenen hat, dann schreit das förmlich nach einem ul und li. Wie das dann letztlich aussieht oder funktionieren soll, regelst du mit CSS und JavaScript: HTML-Elemente sollte man danach auswählen, was etwas ist und nicht wie es aussehen soll.

                    Gruß
                    Julius

                  2. Hallo

                    Das sind die Geister der Vergangenheit.

                    Vor der Einführung von HTML5 konnte eine Navigation nur durch Überschriften abgegrenzt werden.

                    Da vor Navigationen Überschriften aber nicht üblich waren hat man sich mit Listen beholfen, um Navigationen zusammenzuhalten. Das hat sich dann so verselbstständigt, das viele Webseitenersteller dachten, das Listen für eine Navigation vorgeschrieben seien. Das waren Listen aber nie.

                    Ähnlich wie früher bei Tabellenlayouts haben viele Webseitenersteller das so verinnerlicht, dass sie listenlose Navigationen nicht akzeptieren können und wollen.

                    Zudem finden sich im Internet viele veraltete Informationen.

                    Wer Listen verwenden will kann dies natürlich machen. Genau so wie sie keine Pflicht sind, sind sie auch nicht verboten. Aber die Listen müssen dann auch immer mittels CSS gestaltet werden, ohne ansonsten irgend einen Vorteil zu bringen.

                    Und die Semantik ist durch das nav-Element viel eindeutiger gegeben als durch eine Liste. Innerhalb eines nav-Elements befindet sich laut HTML-Regeln immer eine Navigation. Eine Liste hingegen sagt überhaupt nichts über ihren Inhalt aus. Listen können genau so gut Börsenkurse oder Rezeptzutaten enthalten. Listen haben also überhaupt keine Semantik.

                    Gruss

                    MrMurphy

                    1. Wer Listen verwenden will kann dies natürlich machen. Genau so wie sie keine Pflicht sind, sind sie auch nicht verboten. Aber die Listen müssen dann auch immer mittels CSS gestaltet werden, ohne ansonsten irgend einen Vorteil zu bringen.

                      Wird eine Liste verwendet, dann wird Nutzern von Screenreadern in der Regel automatisch die Anzahl der Einträge mitgeteilt. Das macht es für solche Benutzer potentiell zumindest etwas leichter, sich ohne visuelle Eindrücke ein Bild von der Seite zu machen.

                      Daraus ist natürlich nicht zu folgern, dass eine Navigation ohne Liste nicht hinreichend bedienbar wäre, aber die bloße Möglichkeit, dass für einige Benutzer durch die Liste die Bedienbarkeit verbessert wird, rechtfertigt in meinen Augen den damit verbundenen geringen Mehraufwand.

                      1. Hej Orlok,

                        Wird eine Liste verwendet, dann wird Nutzern von Screenreadern in der Regel automatisch die Anzahl der Einträge mitgeteilt.

                        Eine Liste lässt sich mit einem Screenreader auch komplett überspringen. Sehr hilfreich.

                        Marc

                        1. Hallo

                          Wird eine Liste verwendet, dann wird Nutzern von Screenreadern in der Regel automatisch die Anzahl der Einträge mitgeteilt.

                          Eine Liste lässt sich mit einem Screenreader auch komplett überspringen. Sehr hilfreich.

                          Nicht, dass ich bezüglich der Liste für Navi MrMurpys Meinung wäre, schließlich ist eine Navigation typischerweise eine Liste von Links, womit eine Liste sehr wohl ein Mehr an Semantik bringt, aber ließe sich ein <nav> ohne Liste nicht auch überspringen?

                          Tschö, Auge

                          --
                          Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
                          Toller Dampf voraus von Terry Pratchett
                          1. Hej Auge,

                            Wird eine Liste verwendet, dann wird Nutzern von Screenreadern in der Regel automatisch die Anzahl der Einträge mitgeteilt.

                            Eine Liste lässt sich mit einem Screenreader auch komplett überspringen. Sehr hilfreich.

                            Nicht, dass ich bezüglich der Liste für Navi MrMurpys Meinung wäre, schließlich ist eine Navigation typischerweise eine Liste von Links, womit eine Liste sehr wohl ein Mehr an Semantik bringt, aber ließe sich ein <nav> ohne Liste nicht auch überspringen?

                            Ich weiß es nicht - in jedem Fall macht es die Sache schwieriger für den Anwender, weil das sicher ein anderes Tastatur-Kürzel wäre. Er muss sich also ein zusätzliches merken. Er könnte auch zum main-Element springen, da dies vermutlich viel öfters nötig ist, ist das Kürzel vielleicht bekannt. Dann weiß ein Blinder aber nicht, ob er etwas zwischen nav und main verpasst hat…

                            Die hier abgebildete Navigation ist ja auch untypisch. Typisch sind ja wesentlich mehr Links und verschachtelte Listen — wie soll man die denn ohne ul darstellen? Verschachtelte sections(ich hoffe, ich bringe niemanden auf dämliche Ideen!)? — Kann man die überspringen? Und wenn ja: wieder ein anderer Shortkey? — Das führt nur zu weiteren Problemen.

                            Übrigens: Ob das geht, sollte MrMurphy beantworten. Ich verwende Listen und brauche mich darum um so etwas nicht zu kümmern. Solche Fragen muss man klären, bevor man eine vorhandene Technik öffentlich als schlecht und veraltet erklärt!

                            Außerdem ist ein Grundsatz der Barrierefreiheit und Usability: Konventionen einhalten! Nur so kann "Don't make me think" überhaupt funktionieren. Wenn jeder sein eigenens Süppchen kocht, muss der Anwender ja auf jeder Seite die Bedienung neu erlernen.

                            Das bisher gesagte sind nur Beispiele dafür, auf wie vielfältige Weise die Bedienbarkeit leidet, wenn jemand meint, das Rad neu erfinden zu müssen — selbst wenn er eine bessere Methode gefunden hätte, wäre der Gewinn für den Nutzer zweifelhaft…

                            Insofern, sorry dafür, das sich Deine Frage nicht beantwortet habe - sie ist für mich niemals von Bedeutung gewesen und daher habe ich mich auch selber nie gefragt, ob eine nav auch überspringbar ist. Aus diesem Grund habe ich leider keine Antwort für dich…

                            Aber einen Rat: kümmer dich nicht drum! Wenn HTML bestimmungsgemäß eingesetzt wird, kann der Screenreader sehr viel — ob und welche Navigationsmechanismen er anbietet, ist seine Sache und ein Blinder Nutzer wird einen Screenreader wählen, der nach seinem Geschmack funktioniert.

                            Was ich weiß: nav, main lassen sich von überall her (mindestens in einigen Screenreadern) anspringen! Dieses Wissen ist viel interessanter 😉

                            Marc

                            1. Hallo

                              Eine Liste lässt sich mit einem Screenreader auch komplett überspringen. Sehr hilfreich.

                              … ließe sich ein <nav> ohne Liste nicht auch überspringen?

                              Ich weiß es nicht …

                              Aber einen Rat: kümmer dich nicht drum!

                              Mach' ich nicht. Für mich ist eine Navigation in den allermeisten Fällen eine Liste. Eine, die seit HTML5 zusätzlich in einem nav-Element steckt. Mich musst du als nicht agitieren. 😀

                              Tschö, Auge

                              --
                              Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
                              Toller Dampf voraus von Terry Pratchett
                              1. Hej Auge,

                                Mach' ich nicht. Für mich ist eine Navigation in den allermeisten Fällen eine Liste. Eine, die seit HTML5 zusätzlich in einem nav-Element steckt. Mich musst du als nicht agitieren. 😀

                                Weiß schon 😉

                                Aber inzwischen hat sich meine Antwort als falsch oder zhumindest unvollständig rausgestellt. Meine Überlegungen waren zwar richtig (Elemente mit impliziten ARIA-Landmarks lassen sich von Screenreader-Nutzern zwar anspringen, aber nicht überspringen und Listen lassen sich recht bequem überspringen).

                                Aber die Überlegung war nicht vollständig: sehende Tastaturnutzer haben davon nichts. Daher ist ein Skiplink in jedem Fall sinnvoll. Das bedeutet dann aber auch, er muss beim Antabben sichtbar werden. Sollte aber eh immer gemacht werden!

                                Marc

                          2. @@Auge

                            ließe sich ein <nav> ohne Liste nicht auch überspringen?

                            So sollte es sein. Es sind aber sicher noch Screenreader im Einsatz, die das nicht bieten. Deshalb wird immer noch ein Skip-Link empfohlen, wie in meinem responsive menu.

                            LLAP 🖖

                            --
                            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                            1. Hej Gunnar,

                              @@Auge

                              ließe sich ein <nav> ohne Liste nicht auch überspringen?

                              So sollte es sein. Es sind aber sicher noch Screenreader im Einsatz, die das nicht bieten. Deshalb wird immer noch ein Skip-Link empfohlen

                              Die sehe ich sehr kritisch. Nicht wenn Sie mit Überlegungen verwendet werden, aber ich habe schon häufig mehrere Päckchen mit einem halben Dutzend skiplinks und mehr auf Seiten gefunden, die dann ja auch alle durchgetabbt werden müssen. Kann sehr nervig werden. Manchmal sind das regelrechte zusätzliche Navigationen…

                              In der Regel reichen ein oder zwei an Seitenanfang (Zur Navigation, zum Inhalt).

                              Wenn die nav mit Listen befüllt, lässt die sich auch in älteren Screenreadern ohne skiplink überspringen.

                              Der würde eher Sinn machen, wenn wie in dem Beispiel von @Matthias Apsel eine Geschichte für die Navigation verwendet wird.

                              Just my 2 Cents - wer empfiehlt denn skiplinks vor Nav-Elementen, die ausschließlich Listen enthalten?

                              Marc

                              1. @@marctrix

                                wer empfiehlt denn skiplinks vor Nav-Elementen, die ausschließlich Listen enthalten?

                                IIRC Léonie Watson, als ich sie das letzte Mal dazu fragte. Nochmal nachgefragt.

                                LLAP 🖖

                                --
                                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                1. Hej Gunnar,

                                  wer empfiehlt denn skiplinks vor Nav-Elementen, die ausschließlich Listen enthalten?

                                  IIRC Léonie Watson, als ich sie das letzte Mal dazu fragte. Nochmal nachgefragt.

                                  Sehende Tastaturnutzer hatte ich gar nicht auf dem Schirm (obwohl ich für die die Skiplinks immer auf den Schirm hole)… — danke @Gunnar Bittersmann !!!

                                  Marc

                                  PS: Mich selber haben zu viele Skiplinks immer genervt, so dass ich meine immer so knapp wie möglich halte. Habe ich wohl etwas mit übertrieben…

                                  1. Hello,

                                    ich mag da mal eine Frage dranhängen, die mich schon länger beschäftigt:

                                    Wenn ich eine Linkliste mit der Tab-Taste durchklicke, kann ich passend zum Link immer wunderbar mittels CSS eine Description von zwei bis drei Sätzen (oder ein Bild, ...) dazu ausgeben. Die Description wird immer neben der Linkliste im selben Bereich sichtbar. Der Link wird dabei NICHT aufgerufen!

                                    Wie erreiche ich so etwas für die Maus oder ein Touchdisplay?
                                    Mit einem Hover mit der Maus bekomme ich es nicht hin, dass der Focus auf dem Link bleibt und die richtige Description eingeblendet bleibt.

                                    Liebe Grüße
                                    Tom S.

                                    --
                                    Es gibt nichts Gutes, außer man tut es
                                    Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
                                    1. Hej TS,

                                      [Tooltipps für Tastatur]

                                      Wie erreiche ich so etwas für die Maus oder ein Touchdisplay?

                                      Zuerst der einfache Teil: für die Tastatur setzt man das mit :focus um. Für die Maus wendest du dieselben Regeln einfach für :hover an.

                                      Was die touchsisplays betrifft: kommt drauf an. Mein Apple-Zeugs scheint in vielen Fällen den ersten Klick zu verschlucken, so dass beim ersten tippen die Beschreibung sichtbar wird, beim zweiten wird erst der Link aufgerufen.

                                      Das habe ich aber noch nicht durchgetestet, unter welchen Umständen das passiert. Zumal sich Tooltips auf verschiedene Arten umsetzen lassen.

                                      Da ich aus vielerlei Gründen kein Freund von Tooltips bin, kann ich dir nicht mehr dazu sagen.

                                      Marc

                    2. Hallo,

                      hat man sich mit Listen beholfen,

                      stimmst du mit uns überein, dass eine Navigation aus einer Anzahl von Links besteht? Und wie würdest du beschreiben, was mit diesen Links in der Navigation gemacht wurde? Ich würde es "aufgelistet" nennen, und du?

                      Gruß
                      Kalk

                    3. Hej MrMurphy1,

                      Das sind die Geister der Vergangenheit.

                      Seit wann sind Listen für Aufzählungen veraltet? Hast mal einen Link zur Spec, wo das geschrieben steht? 😉

                      Da vor Navigationen Überschriften aber nicht üblich waren hat man sich mit Listen beholfen, um Navigationen zusammenzuhalten. Das hat sich dann so verselbstständigt, das viele Webseitenersteller dachten, das Listen für eine Navigation vorgeschrieben seien. Das waren Listen aber nie.

                      Stimmt, Listen sind für Aufzählungen vorgeschrieben. So wie es eine Liste von Links es nun einmal ist.

                      Ähnlich wie früher bei Tabellenlayouts haben viele Webseitenersteller das so verinnerlicht, dass sie listenlose Navigationen nicht akzeptieren können und wollen.

                      Ja, das könnte der Grund sein, warum @Gunnar Bittersmann die noch verwendet. Niemand anders hier klebt so an uralten Techniken, wei er. Dieses ständige Festhalten an so altem IE10-Krtam wie CSS Grid zum Beispiel ist mir auch schon öfters negativ aufgefallen. Alles Schnee von gestern !!1!einself!

                      Zudem finden sich im Internet viele veraltete Informationen.

                      Stimmt schon wieder. Immer nur derselbe alte Kram - hej! Ich habe eine Idee! wäre es nciht cool, wenn es eine tagesaktuelle Online-Zeitung gäbe? Oder besser ncoh: minutenaktuell? So was wie ein Live-Ticker beim fußball zum Beispiel. Man würde immer sofort wissen, wie es gerade steht!

                      Ich glaube ich flitze mal schnell zum Patentamt!

                      SCNR... - Asche auf mein Haupt!

                      Wer Listen verwenden will kann dies natürlich machen. Genau so wie sie keine Pflicht sind, sind sie auch nicht verboten.

                      Man kommt zumindest nicht ins Gefängnis dafür.

                      Wie heißt es so schön: ntürlich kannst du das machen, aber dann ist es halt...

                      Und die Semantik ist durch das nav-Element viel eindeutiger gegeben als durch eine Liste.

                      Marc

                    4. @@MrMurphy1

                      Vor der Einführung von HTML5 konnte eine Navigation nur durch Überschriften abgegrenzt werden.

                      Da vor Navigationen Überschriften aber nicht üblich waren hat man sich mit Listen beholfen, um Navigationen zusammenzuhalten.

                      Nein. Listen waren kein Behelf, sondern immer schon sinnvoll. Zum Zusammenhalten gab es auch vor HTML5 schon Elemente: div und span.

                      das viele Webseitenersteller dachten, das Listen für eine Navigation vorgeschrieben seien. Das waren Listen aber nie.

                      Wer denkt das? Es geht nicht um vorgeschrieben; es geht um sinnvoll.

                      Ähnlich wie früher bei Tabellenlayouts haben viele Webseitenersteller das so verinnerlicht, dass sie listenlose Navigationen nicht akzeptieren können und wollen.

                      Matthias Apsel hat ein Beispiel genannt.

                      Zudem finden sich im Internet viele veraltete Informationen.

                      Es finden sich im Internet auch viele falsche Informationen.

                      Aber die Listen müssen dann auch immer mittels CSS gestaltet werden, ohne ansonsten irgend einen Vorteil zu bringen.

                      Auch hier liegst du falsch. Listen können mittels CSS gestaltet werden. Mehr Elemente → mehr Hooks zum Stylen. Das kann durchaus ein Vorteil sein.

                      Und die Semantik ist durch das nav-Element viel eindeutiger gegeben als durch eine Liste.

                      Niemand wollte die Navigationsliste nicht in ein nav-Element packen.

                      Wobei nicht jede Linkliste Navigation ist, also nicht jede Linkliste in ein nav-Element gehört. Die Spec weist darauf hin.

                      Listen haben also überhaupt keine Semantik.

                      Natürlich haben sie eine: eine Aufzählung von Dingen zu sein.

                      LLAP 🖖

                      --
                      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              2. Abgesehen davon frage ich mich, warum hier ein Zeichen als Separator verwendet wird. Ist das für A11Y günstiger? Oder kann man nicht auch das verwenden, was da real dargestellt wird: ein RAND?

                .top li:not(:last-child)::after {
                  content: '';
                  margin: 0 0.5em;
                  border-right: 3px solid black;
                }
                

                Und dann der Gedanke des Halbwissenden: Könnte man den dann nicht auch ohne :after Element direkt ans li kleben? Man muss dann nur mit padding arbeiten...

                .top li {
                   padding: 0 0.5em;
                }
                .top li:not(:last-child) {
                   border-right: 3px solid black;
                }
                

                Rolf

                1. Hallo Rolf b,

                  Und dann der Gedanke des Halbwissenden: Könnte man den dann nicht auch ohne :after Element direkt ans li kleben? Man muss dann nur mit padding arbeiten...

                  Kann man. Ich würde das vielleicht dennoch nicht machen. Das Zeichen passt immer zur verwendeten Schriftart, weil beide aus demselben Font genommen werden. Der Border unter Umständen nicht. Aber das ist Geschmackssache.

                  Dennoch haben wir es in diesem Forum genau so umgesetzt: (und mir gefällt es dort auch, es harmoniert mit dem oberen border)

                  footer li:not(:first-child) {
                      border-left: 2px solid #c4d4da;
                      padding-left: .2em;
                  }
                  

                  Bis demnächst
                  Matthias

                  --
                  Rosen sind rot.
                2. Hej Rolf,

                  Abgesehen davon frage ich mich, warum hier ein Zeichen als Separator verwendet wird. Ist das für A11Y günstiger?

                  Das wurde tatsächlich früher mal geprüft. So weit hergeholt ist das also nicht. Ich glaube aber, das ist nicht mehr nötig.

                  Bin aber kein Screenreader-Experte... 😟

                  Ich mache es allerdings auch mit border — mir gefällt es, dass die Striche dann höher als die Buchstaben sind…

                  Marc

                3. @@Rolf b

                  Abgesehen davon frage ich mich, warum hier ein Zeichen als Separator verwendet wird. Ist das für A11Y günstiger?

                  AFAIK lesen manche Screenreader CSS-generierten Inhalt vor, andere nicht. Das | könnte sich also u.U. störend bemerkbar machen.

                  Wenn es ein Schriftzeichen sein soll, könnte man das auch als SVG-Hintergrundbild realisieren.

                  LLAP 🖖

                  --
                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              3. Hello,

                wie könnte denn eine Navigation semantisch sonst noch aufgebaut werden, außer mit einer (geschachtelten) Liste?

                Gibt es eine Vorschrift dafür, wie eine Navigation aufgebaut werden muss?

                Ich frage das deshalb, weil es doch eigentlich logisch wäre, anstelle des <nav>-Elementes eie dritte Listenart zu haben (<nl> oder so ähnlich). Oder welche Elemente (Informationen) gehören sonst noch in eine Navigation?

                Liebe Grüße
                Tom S.

                --
                Es gibt nichts Gutes, außer man tut es
                Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
                1. Hallo TS,

                  Ich frage das deshalb, weil es doch eigentlich logisch wäre, anstelle des <nav>-Elementes eie dritte Listenart zu haben (<nl> oder so ähnlich). Oder welche Elemente (Informationen) gehören sonst noch in eine Navigation?

                  Eine Überschrift. Das nav-Element ist eben keine Liste.

                  Bis demnächst
                  Matthias

                  --
                  Rosen sind rot.
                  1. Hello,

                    Ich frage das deshalb, weil es doch eigentlich logisch wäre, anstelle des <nav>-Elementes eie dritte Listenart zu haben (<nl> oder so ähnlich). Oder welche Elemente (Informationen) gehören sonst noch in eine Navigation?

                    Eine Überschrift. Das nav-Element ist eben keine Liste.

                    Ist das das einzige Element, was Dir noch so einfällt? :-)

                    Liebe Grüße
                    Tom S.

                    --
                    Es gibt nichts Gutes, außer man tut es
                    Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
                    1. Hallo TS,

                      Ist das das einzige Element, was Dir noch so einfällt? :-)

                      6 Elemente 😝

                      Nein. https://w3c.github.io/html/sections.html#example-84241bb3

                      Keine Garantie, dass dieser Link so bleibt, deshalb: https://w3c.github.io/html/sections.html#example-84241bb3, dort Beispiel 11, Links als Prosa.

                      Bis demnächst
                      Matthias

                      --
                      Rosen sind rot.
                      1. Hello,

                        Ist das das einzige Element, was Dir noch so einfällt? :-)

                        6 Elemente 😝

                        Nein. https://w3c.github.io/html/sections.html#example-84241bb3

                        Keine Garantie, dass dieser Link so bleibt, deshalb: https://w3c.github.io/html/sections.html#example-84241bb3, dort Beispiel 11, Links als Prosa.

                        Danke.
                        Das ist ja eine launige Navigation - und ganz ohne List-Elemente ;-)

                        Da schwirrt mir jetzt noch eine Map im Kopf herum. Das war mal eine Zeit lang modern: Wimmelbilder über den ganzen Schirm mit Hotspots drin zu den einzelnen Bereichen.

                        Liebe Grüße
                        Tom S.

                        --
                        Es gibt nichts Gutes, außer man tut es
                        Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
                2. Servus!

                  Ich frage das deshalb, weil es doch eigentlich logisch wäre, anstelle des <nav>-Elementes eie dritte Listenart zu haben (<nl> oder so ähnlich).

                  Das nl-Element war für XHTML 2 geplant, wurde aber doch nicht eingeführt.

                  Link: W3C: 11. XHTML List Module

                  Ich finde eine Überschrift h2 oder ein p besser als das da vorgesehene Label.

                  Liebe Grüße
                  Tom S.

                  Herzliche Grüße

                  Matthias Scharwies

                  --
                  Es gibt viel zu tun: ToDo-Liste