WebAIM  - 无障碍记

创建可访问fram万博体育官网网址e和iframe

框架辅助

框架集是一个网页,其限定至少两个分开的其它网页,它们被组合在相同的视觉空间的一个集合。视觉用户通常遇到框架集作为一个有凝聚力的实体。他们都可以在一次扫描多页的内容。

重要

框架不再是HTML的一部分。由于支持有限,而且很难使它们具有可访问性和高可用性,通常应该避免使用框架。万博体育官网网址

那些使用屏幕阅读器不能快速扫描多页的内容。所有的内容被以线性方式经历,一次一帧。帧不人迹万博体育官网网址罕至现代屏幕阅读器,但它们可以被迷惑。

屏幕阅读器通常读取所有帧的一个框架,仿佛它们属于同一个页面。用户通过屏幕阅读器,一个框架集存在警报。键盘快捷键让读者帧之间快速切换,尽管用户可能不熟悉这些快捷键。

提供帧标题

当屏幕阅读器用户听到帧的列表,它有助于了解每个人的目的。帧标题,网站开发者每帧的宗旨传达给屏幕阅读器的用户。对于帧最好的标题是简要的描述。在两帧框架帧相应标题可能是“导航框架”和“主要内容”。

提供无框架内容

内容在无框架元件将被呈现,如果用户不能或选择不视图帧的内容。该无框架内容应指明哪些帧的内容,并提供了指向单个框架页,如果合适的话。

万博体育官网网址无障碍帧的示例代码

注意正确DOCTYPE和描述的,但在一个可访问的帧的该示例代码简要帧标题。万博体育官网网址

<!DOCTYPE HTML PUBLIC! “ - // W3C // DTD HTML 4.01框架集// EN” “http://www.w3.org/TR/html4/frameset.dtd”>


一个页面包含框架</ TITLE><br></ HEAD><br><FRAMESET COLS = “15%,85%”><br><FRAME SRC = “menu.html”<strong>标题=“导航菜单”</strong>名称=“菜单”><br><FRAME SRC = “content1.html”<strong>标题=“主要内容”</strong>名称=“内容”><br><无框架><br><p>此框架文档包含:</ p><br><UL><br><LI> <a href="menu.html">页面导航</A> </ LI><br><LI> <a href="content1.html">主要内容</a> </ LI><br></ UL><br></无框架><br></ FRAMESET><br></ HTML></div> </div> </div> <div class="section" id="iframe"> <h2>内嵌框架(iframe中)无障碍</h2> <p>嵌入式框架,允许在不定义框架集文档的麻烦列入父网页的子窗口中不同的网页文件(甚至整个网站)。没有与嵌入式框架,没有明显的可访问性问题。内嵌框架的内容,在它遇到了点读(基于标记顺序),就好像它是父页面中的内容。</p> <p>某些屏幕阅读器表明,I帧都存在,甚至可能支持标准帧一起浏览它们。</p> <p>不同于帧,不需要一个描述性标题属性值可访问性,但如果内嵌框架呈现的内容作为一个整体在视觉上有特色,如广告或视频播放器,那么应​​该提供一个标题来表示这种区别。</p> <div class="code"> <IFRAME SRC = “ad.htm” 标题= “广告”></div> <p>由于许多用户放大字体和其他网页元素通过使用增强的可视性和可访问性,不应禁用滚动的I帧(或框架,对于这个问题)<code>SCROLLING = “否”</code>。默认滚动值(<code>汽车</code>)通常是最好的选择。你应该还,可能的情况下,设计出具有相对大小的iframe因此iframe元素本身规模的网页和其内容调整大小。</p> </div> <div class="section" id="alternatives"> <h2>替代框架</h2> <p>框架可以引入可访问性问题,应当避免。I帧带来更少的可访问性问题,但需要多个页面的额外的工作和管理。frame和iframe不应通常被用于展示或显示,但对于内容管理(I帧到自己的网站工作的伟大的广告和内容外部的显示器)。如果你想有一个单一的网络介绍给同样显示的帧,这通常可以用CSS和一个网页来完成,而不是处理的复杂性和框架或iFrame的潜在的可访问性问题。</p> </div> </article> <aside id="articlemeta"> <div id="updated"> 最近更新时间:<time datetime="2020-09-24">2020年9月24日</time> </div> <div id="translations"> <h2>翻译</h2> <ul> <li><a href="http://couponhostgator.info/dostopni-okvirji/"><img src="//www.kanehsu.com/media/common/flags/si.png" alt="">斯洛文尼亚</a>通过<a href="http://couponhostgator.info/">HostGator的</a></li> <li><a href="http://studienwahl-deutschland.de/iap/barrierefreie-frames-und-iframes-erstellen/"><img src="//www.kanehsu.com/media/common/flags/de.png" alt="">德语</a></li> </ul> </div> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <p id="copyright"><span class="hidden">©</span>2020 WebAIM</p> <p id="contact">中心残疾人<br>犹他州立大学<br>6807老主山<br>洛根,UT 84322-6807<br><a class="phone" href="tel:4357977024">435.797.7024</a></p> </div> <div class="footerblock"> <h2 id="blog">从博客</h2> <ul> <li><a href="//www.kanehsu.com/blog/wave-3-1-release/">WAVE 3.1发布</a></li> <li><a href="//www.kanehsu.com/blog/wcag-2-2-overview-and-feedback/">WCAG 2.2概述和反馈</a></li> <li><a href="//www.kanehsu.com/blog/anniversaries-celebrated/">周年纪念庆祝</a></li> <li><a href="//www.kanehsu.com/blog/wave-webinar-and-intro-video/">WAVE网络研讨会和介绍视频</a></li> <li><a href="//www.kanehsu.com/blog/webaim-million-one-year-update/">WebAIM百万-一年更新</a></li> </ul> </div> <div class="footerblock"> <h2 id="popular">热门资源万博亚洲体育官网</h2> <ul> <li><a href="//www.kanehsu.com/training/virtual">WebAIM培训</a></li> <li><a href="//www.kanehsu.com/standards/wcag/checklist">WCAG 2清单</a></li> <li><a href="//www.kanehsu.com/newsletter">WebAIM月报</a></li> <li><a href="//www.kanehsu.com/resources/contrastchecker">色彩对比检查</a></li> <li><a href="//www.kanehsu.com/resources/designers/">无障碍网页为设计师</a></li> <li><a href="//www.kanehsu.com/wave/">WAVE无障碍评估工具</a></li> </ul> </div> <div class="footerblock" id="checkpage"> <h2>检查您的无障碍</h2> <form action="https://wave.www.kanehsu.com/report" novalidate> <label for="waveurl" class="hidden">网站地址</label> <input type="url" id="waveurl" name="url" placeholder="Web site address" title="Web site address"> <input type="submit" value="波"> </form> </div> <div id="footerlinks"> <ul> <li><a id="footercontact" href="//www.kanehsu.com/contact">联系</a></li> <li><a id="footerabout" href="//www.kanehsu.com/about">关于</a></li> <li><a id="footerrss" href="//www.kanehsu.com/community/rss">RSS订阅</a></li> <li><a id="footertwit" href="http://twitter.com/webaim">推特</a></li> <li><a id="footercopyright" href="//www.kanehsu.com/copyright">版权及使用条款</a></li> </ul> </div> <div class="clear"></div> </div> </footer> </body> </html>