<h1> width-abhängig als Link

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Der Haken daran: Es ist immer noch ein Link. Per Tastatur ist er immer noch fokussierbar und anwählbar.

Um das zu beheben, bedarf es dann doch JavaScripts.

Wirklich?

<h1><a href="#foo"></a>Überschrift</h1>  

h1 { position: relative; color: blue; text-decoration: underline }  
h1 a { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }  
  
@media (min-width: 50em)  
{  
	h1 {color: inherit; text-decoration: inherit }  
	h1 a { display: none }  
}

Aber auch diese Lösung hat Haken:

⑀ 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?)

⑀ Da nicht das a-Element, sondern das h1-Element gestylt ist, kann nicht zwischen :link und :visited unterschieden werden.

Qapla'