So wie Headlines ganz gerne mal aus Layout-Gründen eingesetzt werden, wird auch das Line Break Element (<br>) manchmal benutzt, um Abstände zu erzeugen. Im Hinblick auf Accessibility ist das jedoch problematisch, denn einige Screenreader (wie zum Beispiel Apples VoiceOver) sagen <br> als "Leeres Objekt" an:
Das kann bei Usern zur Verwirrung führen, weswegen Du den Gebrauch des Line Break Elements überdenken solltest.
CSS anstelle von <br>
Generell solltest Du, wenn Du das Layout Deiner Webseite beeinflussen möchtest, auf CSS setzen. Die CSS-Property margin bietet Dir zum Beispiel eine einfache Möglichkeit, Abstände rund um Elemente zu definieren. Wenn Du nur möchtest, dass sich der Zeilenabstand erhöht, ist die CSS-Property line-height geeignet. Das ist deutlich besser als zwei aufeinanderfolgende Line Break Elemente (<br> <br> 🥶).
Ein wenig kniffliger wird es bei langen Wörtern. Wir Wingmenschen nehmen hier ja gerne das Beispiel: Rindfleischetikettierungs überwachungsaufgaben übertragungsgesetz (Leerzeichen bitte wegdenken). Damit dieses Wort nicht über den Bildschirmrand hinausläuft und dadurch in seiner vollen Pracht nicht mehr zu lesen ist, könnte man auf die Idee kommen, dort lauter "-" und <br> einzusetzen. Das würde dann ja immerhin sowas hier hervorbringen:
Rindfleischetikettierungs-
überwachungsaufgaben-
übertragungsgesetz
Hinsichtlich Accessibility ist das jedoch die am wenigsten geeignete Variante. Denn, angenommen das Ganze wäre noch in einer Überschrift, liest VoiceOver es wie folgt vor:
Eine Überschrift, aber fünf Objekte? 🤔
CSS hilft auch hier - insbesondere die Properties overflow-wrap und/oder word-break. Alle Details dazu erklärt übrigens der Text "Wrapping und breaking text" auf developer.mozilla.org ausführlich.
Ergänzt Du das Ganze dann noch mit hyphens und/oder soft breaks (­) sieht es nicht nur optisch auf Deiner Webseite gut aus, sondern Screenreader lesen es ohne Verwirrung zu stiften vor.
In meinem Beispiel haben zwei Soft Breaks zusammen mit "overflow-wrap: break-word;" ausgereicht, um optisch das gleiche Ergebnis zu erzielen.
VoiceOver erkennt innerhalb der h3 nun auch nicht mehr fünf Objekte:
 Und wenn Du Dich jetzt fragst, was das eigentlich mit SEO zu tun hat, findest Du die Antwort in einem Beitrag von Andreas zum European Accessibility Act.