Michael Gaigg: Über UI/UX Design

20Feb0

Best Practices for Accessible Frames

Posted by Michael Gaigg

Frames are hardly used anymore (thanks God) but they can be useful and a good method to organize huge sites with lots of content, e.g. document libraries, API documentation, etc.

The 508 standard has no objection against frames and screen readers can handle frames well even though it might be difficult to comprehend the structure. The following basic rules and best practices outline how one can make frames accessible:

Basic Rules

  • Title frameset and frames with meaningful names (descriptive instead of location, i.e. ‘navigation’ instead of ‘left’)
  • Provide an alternative (NOFRAMES tag)

Best Practices

Level 1

Level 1 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Provide a text equivalent for every non-text element 1.1 a <FRAMESET cols="50%,50%" title="...">

<FRAME src="sitenavbar.htm" ...>

<FRAME src="story.htm" ...>

<NOFRAMES>

[<A href="sitenavbar.htm" title="...">Table of Contents</A>] [<A href="story.htm" title="...">Story</A>]

</NOFRAMES>

</FRAMESET>

Title each frame to facilitate frame identification and navigation 12.1 i <FRAMESET cols="10%, 90%" title="Our library of electronic documents">

<FRAME src="nav.html" title="Navigation bar">

<FRAME src="doc.html" title="Documents">

</FRAMESET>

Level 2

Level 2 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Describe the purpose of frames and how frames relate to each other if it is not obvious by frame titles alone 12.2 i <FRAME src="sitenavbar.htm" name="navbar" title="Sitewide navigation bar" longdesc="frameset-desc.htm#navbar">

<FRAME src="story.htm" name="story" title="Selected story - main content" longdesc="frameset-desc.htm#story">

Template

<frameset cols="50%,50%" title="Our library of electronic documents">
<frame src="navigation.htm" title="Navigation bar">
<frame src="start.htm" title="Main Content">
<noframes>
[<a href="navigation.htm" title="Navigation bar">Table of Contents</a>]
</noframes>
</frameset>

References