var: Seiteninhalt in <main role="main"> ?

Hallo miteinander!

In diesem schönen SELF-Tutorial wird empfohlen, bei der Seitenstrukturierung den Seiteninhalt mit dem HTML-Element <main> zu kennzeichnen, genauer gesagt, mit <main role="main">, ganz im Sinne der Barrierefreiheit.

Da mein Notepad++ in der aktuellsten Version aber offenbar weder von <main> noch von role je etwas gehört hat, bin ich etwas stutzig geworden und daher meine Frage:

Wie haltet ihr das mit diesem Element? - Bedenkenlos anzuwenden? - Oder nur mit fall-back? - Und falls letzteres, wie könnte das aussehen und ginge das auch ohne JavaScript?

Da das main-Element im Falle seiner Anwendung Elternelement des wesentlichen Seiteninhalts wäre, würde von der Seite nicht mehr viel übrigbleiben, sofern das Element vom Browser nicht unterstützt wird (und eine eventuell vorhandene fall-back-Lösung nicht greift, weil auch noch JavaScript ausgeschaltet ist / nicht unterstützt wird). - Insofern sehe ich das schon als kritischen Punkt. - Zu recht?

Gruß,

var

akzeptierte Antworten

  1. Hallo

    Zu recht?

    Nein, das Element kann problemlos benutzt werden. Wenn für main unnötigerweise ein Fallback gewünscht wird, benötigt es genau so ein Fallback wie header, article u.s.w.

    Gruss

    MrMurphy

    1. Hallo

      Hallo MrMurphy

      [...] das Element kann problemlos benutzt werden. Wenn für main unnötigerweise ein Fallback gewünscht wird, benötigt es genau so ein Fallback wie header, article u.s.w.

      Ok, danke! Gewünscht ist ein Fallback ohnehin nicht. ;-)

      War nur etwas irritiert, da mein Notepad++ andere HTML5-Elemente zwar erkennt, main aber nicht, und wollte auf Nummer sicher gehen, da die Seite an der ich schreibe nicht bloß mein eigenes privates Projekt ist.

      Die bisherige Version der Seite wurde wohl mit irgendeinem WYSIWYG-Editor zusammengeschustert und enthält daher gefühlt nur etwa 3 oder 4 verschiedene HTML-Elemente, womit zwar alle Gütekriterien für gutes Webdesign unterlaufen wurden, aber zumindest Probleme mit fehlendem Browser-Support soweit ausgeschlossen sind - und wenn ich das schon von Hand neu schreibe, soll die neue Seite zumindest in diesem Punkt nicht schlechter abschneiden als die alte... ;-)

      Nochmal danke!

      Gruß,

      var

  2. Hallo

    In diesem schönen SELF-Tutorial wird empfohlen, bei der Seitenstrukturierung den Seiteninhalt mit dem HTML-Element <main> zu kennzeichnen, genauer gesagt, mit <main role="main">, ganz im Sinne der Barrierefreiheit.

    Da mein Notepad++ in der aktuellsten Version aber offenbar weder von <main> noch von role je etwas gehört hat, bin ich etwas stutzig geworden und daher meine Frage:

    Lass' dich mal nicht in's Bockshorn jagen. Nur, weil die HTML-Regeln für das Syntax-Highlightning im Notepadd++ diese Elemente nicht kennen, sind sie deshalb nicht unbenutzbar. Das Syntax-Highlightning für SQL kennt auch nicht alle SQL-Funktionen. Sie deshalb nicht zu benutzen, würde mir nicht einfallen.

    Wie haltet ihr das mit diesem Element? - Bedenkenlos anzuwenden? - Oder nur mit fall-back? - Und falls letzteres, wie könnte das aussehen und ginge das auch ohne JavaScript?

    Der Fallback sieht aus, wie bei allen anderen HTML5-Elementen auch. Definiere im Stylesheet, dass <main> zu den Blockelementen gehört (main { display: block; }).

    Tschö, Auge

    --
    Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
    Terry Pratchett, „Gevatter Tod“
    1. Hallo

      Hallo Auge

      Der Fallback sieht aus, wie bei allen anderen HTML5-Elementen auch. Definiere im Stylesheet, dass <main> zu den Blockelementen gehört (main { display: block; }).

      Gut zu wissen, das werd ich machen. Zur Sicherheit.

      Danke für den Tip!

      Gruß,

      var

      1. Hallo var,

        Der Fallback sieht aus, wie bei allen anderen HTML5-Elementen auch. Definiere im Stylesheet, dass <main> zu den Blockelementen gehört (main { display: block; }).

        Gut zu wissen, das werd ich machen. Zur Sicherheit.

        Für alte IE, die wohl von den Browsern, die keine HTML5-Elemente kennen, am verbreitetsten sind, hilft

        <!--[if lt IE 9]>
        	<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        

        Bis demnächst
        Matthias

        --
        Signaturen sind bloed (Steel) und Markdown ist mächtig.
        1. Hallo var,

          Hallo Matthias

          Für alte IE, die wohl von den Browsern, die keine HTML5-Elemente kennen, am verbreitetsten sind, hilft

          <!--[if lt IE 9]>
          	<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
          <![endif]-->
          

          Dank auch dir!

          Packe ich das am besten in das head-Element oder besser an den Anfang von body?

          Gruß,

          var

        2. Hallo

          Der Fallback sieht aus, wie bei allen anderen HTML5-Elementen auch. Definiere im Stylesheet, dass <main> zu den Blockelementen gehört (main { display: block; }).

          Gut zu wissen, das werd ich machen. Zur Sicherheit.

          Für alte IE, die wohl von den Browsern, die keine HTML5-Elemente kennen, am verbreitetsten sind, hilft

          <!--[if lt IE 9]>
          	<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
          <![endif]-->
          

          Als ich mein Posting noch einmal las, schwante mir, dass da noch etwas war. Nun wollte ich es ergänzen … Sei's drum.

          @var: Was das verlinkte Skript tut, ist, in alten Browsern die Elemente, die sie nicht kennen, zu erstellen (hier: document.createElement("main");). Ohne das zu tun, hilft auch die Vergabe der CSS-display-Eigenschaft nicht.

          Eins noch: Google-Code macht demnächst zu! Ab jetzt: https://github.com/afarkas/html5shiv

          Tschö, Auge

          --
          Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
          Terry Pratchett, „Gevatter Tod“