Creating 万博体育官网网址 Frames and Iframes

介绍

框架集是一个网页,它定义了至少两个其他单独网页的集合,这些网页组合在同一个可视空间中视觉用户通常将框架集体验为一个有凝聚力的实体他们可以一次扫描多个页面的内容。

使用屏幕阅读器的人无法快速扫描多个页面的内容所有内容都以线性方式体验,一次一帧框架不是在万博体育官网网址现代屏幕阅读器,但他们可能会迷失方向。

屏幕阅读器通常读取框架集中的所有框架,几乎就像它们属于同一页面一样屏幕阅读器警告用户存在框架集Keyboard shortcuts allow the reader to jump quickly between frames.

框架可访问性

提供框架标题

重要

您可以做的最重要的事情是增加框架的可访问性是为每个框架提供一个描述性的标题属性值。

当屏幕阅读器用户听到帧列表时,了解每个帧的目的是有帮助的帧标题允许Web开发人员将每个帧的目的传达给屏幕阅读器的用户帧的最佳标题是简短和描述性的两帧框架中框架的适当标题可以是“导航框架”和“主要内容”。

当帧标题不存在时,屏幕阅读器会查找其他信息源,例如帧的信息名称属性或文件名有时,这些其他信息来源根本不是很有用。

使用正确的文档类型

使用框架的页面应具有正确的文档类型下面的代码示例显示了一个DOCTYPE对于使用HTML 4的框架集页面适当的框架集DOCTYPE让屏幕阅读器和其他浏览器知道该文档由多个帧组成值得注意的是,HTML5中的帧已经过时,因此不应该使用带有HTML5 + doctype的帧。

提供无框架内容

内容在无框架如果用户不能或选择不查看帧内容,则将呈现元素该无框架内容应指明帧的内容是什么,并在适当时提供到各个帧页面的链接。

万博体育官网网址 frame example code

注意正确DOCTYPE这个示例代码中的描述性但简短的框架标题是万博体育官网网址框架。

<!DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.01 Frameset // EN”“http://www.w3.org/TR/html4/frameset.dtd”>
<HEAD>
<title>包含框架</ title>的页面
</ HEAD>
<frameset cols =“15%,85%”>
<frame src =“menu.html”title =“导航菜单”NAME = “菜单”>
<frame src =“content1.html”title =“主要内容”NAME = “内容”>
<无框架>
<p>此框架集文档包含:</ p>
<UL>
<li> <a href="menu.html">页面导航</a> </ li>
<li> <a href="content1.html">主要内容</a> </ li>
</ UL>
</无框架>
</ FRAMESET>
</ HTML>

内联框架(iframe)可访问性

内联框架允许在父网页的子窗口中包含不同的Web文档(甚至整个网站),而无需定义框架集文档的麻烦内联框架没有明显的可访问性问题内联框架的内容在遇到它时(基于标记顺序)读取,就好像它是父页面中的内容一样。

一些屏幕阅读器表明存在iframe,甚至可能支持将它们与标准帧一起导航。

与框架不同,可访问性不需要描述性标题属性值如果内联框架呈现视觉上独特的内容,例如广告或视频播放器,则应提供标题以指示该区别。

<iframe src =“ad.htm”title =“Advertisement”>

由于许多用户放大字体和其他页面元素以提高可见性和可访问性,因此您不应使用iframe(或框架)来禁用滚动功能SCROLLING = “否”默认滚动值(汽车)通常是最好的选择在可能的情况下,您还应该设计具有相对大小的iframe,以便iframe元素本身随着页面及其内容的大小调整而缩放。

框架的替代品

如前所述,框架可能会引入可访问性问题虽然使用iframe可以减少可访问性问题,例如框架,但它们需要额外的工作和多个页面的管理框架和iframe通常不应用于演示或显示,而应用于内容管理(iframe非常适合广告和显示您自己网站外部的内容)如果您希望单个Web演示文稿与框架类似地显示,通常可以使用CSS和一个网页来完成,而不是处理框架的复杂性和潜在的可访问性问题。

CSS允许非常复杂的布局和显示您可以使用CSS向几乎任何页面元素添加滚动功能,从而实现框架和iframe提供的呈现和显示。

此内容位于页面内用于显示此内容的代码是:
<div style="overflow:auto; width:400px; height:90px;"> This content... </div>

这可以通过简单地添加CSS来完成溢出:汽车几乎任何HTML元素的样式当溢出设置为自动时,仅当内容无法在定义的区域内显示时,才会显示滚动条和。一样IFRAME,您可以强制显示滚动条溢出:滚动或禁用滚动条溢出:隐藏禁用滚动条时,某些用户可能无法查看或访问所有内容,尤其是在放大内容以提高可见性时。

Using CSS also solves many of the problems caused with linking and navigating within frames and iframes - the address in the address bar is accurate, links to external sites or content will not be embedded within your framed layout, it is easier to bookmark, and it is easier to keep track of the pages visited.

但是,使用CSS启用滚动内容可能会导致一些可用性问题用户可能不知道他们需要滚动并且可能无法查看所有内容如果显示多个滚动条,则用户访问内容可能会造成混淆使用框架和iframe时,这些问题也很明显,因此,使用CSS的优势应该使它成为基于框架的布局的第一种替代方案。