<h1> width-abhängig als Link

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

⑀ Das Markup mit dem leeren a-Element ist nicht semantisch. Für Nutzer von AT (Screenreader) hat der Link keinen Titel. (Lässt sich vielleicht mit ARIA-Attributen fürs h1-Element beheben?)

Äh nee, lässt sich nicht. Dann hätte ja das h1-Element auch die Rolle eines Links, wenn es kein Link ist. Zum dynamischen Setzen/Entfernen des Attributs ist auch wieder JavaScript notwendig.

Ohne JavaScript ginge noch mit redundantem Markup:

<h1 class="mit-link"><a href="…">Überschrift</a></h1>  
<h1 class="ohne-link">Überschrift</h1>

.ohne-link { display: none }  
  
@media (min-width: 50em)  
{  
    .ohne-link { display: block }  
    .mit-link { display: none }  
}

⑀ Clients ohne CSS-Auswertung haben die Überschrift doppelt.

Qapla'