Barrierefreies Webdesign nach BITV 2.0: Frames barrierefrei darstellen / einsetzen

Frames waren lange Zeit sehr beliebt. Hauptsächlich wurden sie eingesetzt um eine feststehende Navigation innerhalb der Webseite zu haben. Ob Frames heutztage noch benötigt werden und wie sie barrierefrei eingesetzt werden erfahren Sie in diesem Blogartikel.

Wozu werden Frames benötigt

Ein Frame ist ein Rahmen. Mit Frames lassen sich mehrere HTML-Dokumente in einem Browser-Fenster darstellen. Das wurde früher sehr gerne benutzt um eine feststehende Navigation zu haben. Heutzutage wird Cascading Style Sheets benutzt um eine Navigation darzustellen. Cascading Style Sheets wird zur optischen Gestaltung von Webseiten verwendet.
Frames werden aber auch dazu verwendet, um ein Browser-Fenster in mehrere kleinere Bereiche einzuteilen. Das kann auf der einen Seite sehr geschickt sein, kann aber auf der anderen Seite eine Webseite sehr unübersichtlich machen!
Für Menschen die einen Screenreader  benutzen, kann eine Webseite mit mehr als 5 Frames zum Problem werden.

Grundgerüst eines Frames

Hier ein kurzes Beispiel wie ein Frame definiert wird:

<frameset cols=“4*,13*“>
<frame src=“navigation.html“ />
<frameset rows=“*,10%“>
<frame src=“inhalt.html“ />
<frame src=“kommentare.html“ />
</frameset>
</frameset>

Grundgerüst eines IFrames

Mit Hilfe eines IFrames, kann innerhalb einer HTML-Datei eine andere Datei angezeigt werden:

<iframe src=“inhalteingefuegt.pdf“ width=“80%“ height=“400″>
<p>Wir müssen leider einen IFrame verwenden</p>
</iframe>

Das kann auf der einen Seite sehr geschickt sein, macht aber auf der anderen Seite eine Webseite ein bißchen unübersichtlich. Ich habe mal einen IFrame verwendet um eine PDF-Datei innerhalb einer HTML-Datei anzuzeigen. Das hat funktioniert.

Ausführliche Informationen über Frames finden Sie auf der Webseite Selfhtml zu Frames.

Was bedeutet Frames barrierefrei einsetzen?

Grundsätzlich möchte ich nochmal erwähnen, dass wann immer es geht sollten Sie versuchen auf Frames zu verzichten. Es ist einfach nicht mehr zeitgemäß!
Bei barrierefreies Webdesign geht darum eine Webseite so darzustellen, dass Menschen mit unterschiedlichen körperlichen Einschränkungen eine Webseite wahrnehmen können. Frames können für Menschen die einen Screenreader benutzen ein Problem sein. Deswegen sollte darauf geachtet werden, dass der Frame so definiert wird, dass er barrierefrei ist. In Deutschland gibt es die BITV 2.0 in welcher definiert ist, welche Kriterien erfüllt sein müssen damit eine Webseite barrierefrei ist.

Frames barrierefrei einsetzen – Was ist notwendig?

Der Frame benötigt einen Namen. Dieser kann über das title-Attribut festgelegt werden. Ältere Browser unterstützen das title-Attribut nicht. Deswegen sollten Sie den Namen nochmals als name-Attribut angeben.
Wenn zur genaueren Erklärung des Frames eine längere Beschreibung notwendig ist, kann diese mit dem longdesc-Attribut angegeben werden. Allerdings wird das longdesc-Attribut wird in Kombination mit FRAMESET bis heute in Screenreadern nicht unterstützt.
Das title-Attribut ist aber zwingend notwendig um einen Frame barrierefrei darzustellen!

Frames barrierefrei darstellen – Der „übliche“ Frame, Codebeispiel

So sieht die Definition eines barrierefreien Frames aus:

<frameset rows=“20%, 80%“>
<frame src=“logo.html“ title=“Logo der Seite“ name=“Logo der Seite“ />
<frame src=“menuepunkte.html“ title=“Liste der Menüpunkte“ name=“menulist“ />
<noframes>
<!– Ersatzdarstellung –>
</noframes>

Frames barrierefrei darstellen – Der IFrame, Codebeispiel

So sieht die Definition eines barrierefreien I-Frames aus:

<iframe src=“inhalteingefuegt.pdf“ width=“80%“ height=“400″ title=“PDF-Datei über Kunst“ name=“PDF-Datei über Kunst“ >
<p>Wir müssen leider einen IFrame verwenden</p>
</iframe>

Schlussbemerkung Barrierefreiheit bei Frames:

Grundsätzlich ist es möglich Frames barrierefrei darzustellen. Trotzdem sollten Sie versuchen, wann immer es geht, Frames zu vermeiden.


Barrierefreies Webdesign mit der BITV 2.0 – Artikelreihe