Что такое удобство использования, доступность, программа для чтения с экрана или какая-либо другая разработка, функциональность, перекрестная проблема браузера с iframe?

Question

Что такое удобство использования, доступность, программа для чтения с экрана или какая-либо другая разработка, функциональность, перекрестная проблема браузера с iframe?

Что является удобством использования, доступностью, программой для чтения с экрана, или любой другой разработкой, функциональностью или перекрестными проблемами браузера с </code>? <p>Есть ли любая альтернатива для <code><iframe></code>?</p><p>И есть ли любой JavaScript/jQuery или методы серверной стороны, которые могут уменьшить удобство использования, доступность или проблемы для чтения с экрана с <code><iframe></code>?</p><p>Почему W3C не включал <code><iframe></code> в Строгом XHTML, в то время как <a href="https://legkovopros.ru/go.php?url=http%3A%2F%2Fwww.w3schools.com%2Fhtml5%2Fhtml5_reference.asp" rel="nofollow noreferrer" target="_parent">HTML 5</a> поддерживает <code><iframe></code>?</p><p>обновление:</p><p><strong>Я нашел некоторые хорошие мысли здесь также:</strong> <a href="https://legkovopros.ru/go.php?url=http%3A%2F%2Fuxexchange.com%2Fquestions%2F1817%2Fiframe-accessibility-and-usability-issues" rel="nofollow noreferrer" target="_parent">http://uxexchange.com/questions/1817/iframe-accessibility-and-usability-issues</a></p></p> </div> <div class="votes-question"> <div class="vote-count" itemprop="upvoteCount">7</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="tags"> <a href="/questions/tagged/jquery" class="tag" title="jquery" rel="tag">jquery</a> <a href="/questions/tagged/xhtml" class="tag" title="xhtml" rel="tag">xhtml</a> <a href="/questions/tagged/usability" class="tag" title="usability" rel="tag">usability</a> <a href="/questions/tagged/accessibility" class="tag" title="accessibility" rel="tag">accessibility</a> <a href="/questions/tagged/screen-readers" class="tag" title="screen-readers" rel="tag">screen-readers</a> </div> <div class="clearfix"></div> <div class="action-time"> задан Jitendra Vyas <span title="19 March 2010 в 08:08 ">19 March 2010 в 08:08 </span> </div> <a class="s-link" href="/questions/294666/chto-takoe-udobstvo-ispolzovanija-dostupnost-programma-dlja-chtenija-s-ekrana-ili-kakaja-libo-drugaja-razrabotka-funkcionalnost-" title="поделиться">поделиться</a> </div> </div> <div style="height:100px;margin:10px 0px;" class=""> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block;height:100px" data-ad-client="ca-pub-2355906945027976" data-ad-slot="" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="answers" id="answers"> <h2 class="pull-left"><span itemprop="answerCount">3</span> ответа</h2> <div class="clearfix"></div> <div class="answer-pager"> <div class="pagination"> </div> </div> <div class="answer accepted" id="745768" itemscope="" itemtype="http://schema.org/Answer" itemprop="acceptedAnswer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p>Доступность:</p> <ul> <li>Сложнее прокручивать iframe, ваша мышь должна находиться в зоне действия iframe. Это затрудняет работу с людьми с ограниченными возможностями передвижения</li> <li>Браузеры для слепых людей могут не включать содержимое вашего iframe, и эти люди не смогут до него добраться. </li> </ul> <p>Юзабилити:</p> <ul> <li>Не очень удобно, когда у вас есть несколько полос прокрутки на главном окне и на iframe. Это сложно для прокрутки</li> </ul> <p>Другие проблемы:</p> <ul> <li>Мобильные браузеры, вероятно, не будут отображать iframe. Даже если они его отобразят, он будет выглядеть плохо и уродливо. </li> <li>Поисковым системам будет трудно индексировать ваши страницы в iframe. Скорее всего, они пропустят их или не проиндексируют должным образом</li> <li>Загрузка iframe займет больше времени, чем страница с тем же содержимым без фрейма</li> </ul> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">6</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="7 December 2019 в 01:20 ">7 December 2019 в 01:20 </span> </div> <a class="s-link" href="/questions/294666/chto-takoe-udobstvo-ispolzovanija-dostupnost-programma-dlja-chtenija-s-ekrana-ili-kakaja-libo-drugaja-razrabotka-funkcionalnost-#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-745768"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="741580" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> Если у вас один iframe, проблем не возникнет. Однако проблема усугубляется наличием нескольких окон iframe. Точка фокуса четко не доступна, а программы чтения с экрана недостаточно умны, чтобы найти визуальную корреляцию (по той же причине, по которой таблицы плохи для дизайна). <a href="http://www.w3.org/WAI/intro/aria" rel="nofollow noreferrer"> ARIA </a> - это попытка решить некоторые похожие проблемы. <a href="http://developer.yahoo.com/yui/examples/container/container-ariaplugin.html" rel="nofollow noreferrer"> Ссылка на плагин YUI </a> содержит дополнительную информацию. </p> <p> Однако iframe все же находят свое место в дизайне. В одном проекте, с которым я работал раньше, страница содержала два фрейма (один из них был скрыт), а скрытый фрейм использовался для загрузки апплета аутентификации.Это не добавляет проблем с доступностью, поскольку внимание ограничено одним iframe, который, казалось бы, сливается со страницей </p> </div> <div class="votes-answer"> <div class="vote-count" itemprop="upvoteCount">0</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="7 December 2019 в 01:20 ">7 December 2019 в 01:20 </span> </div> <a class="s-link" href="/questions/294666/chto-takoe-udobstvo-ispolzovanija-dostupnost-programma-dlja-chtenija-s-ekrana-ili-kakaja-libo-drugaja-razrabotka-funkcionalnost-#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-741580"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="744493" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <blockquote> <p> Почему W3C не включил iframe в XHTML Strict </p> </blockquote> <p> Потому что в то время это было рассматривается как незаконнорожденный ребенок широко осуждаемого тега <code> <frame> </code>. В принципе <code> <iframe> </code> имеет многие из тех же свойств, что и <code> <frame> </code>, но на практике кажется, что это способствовало более изящному использованию, как правило, избегая наихудших проблем с навигацией и удобством использования, с которыми сталкивались интерфейсы набора фреймов. </p> <blockquote> <p> Хотя HTML 5 поддерживает Iframe? </p> </blockquote> <p> (a). Потому что, в отличие от <code> <frame> </code>, <code> <iframe> </code> с тех пор оказался важным для смешанных документов, таких как те, которые включают рекламу, и многие типы веб-приложений. Есть еще проблемы, как упоминалось в других ответах, но обычно <code> <iframe> </code> рассматривается как необходимая функция, которая должна остаться. Это не относится к <code> <frame> </code>, которая является «несоответствующей функцией» в HTML5 ( ближайший HTML5 попадает в категорию «строгих»). </p> <p> (б). потому что авторы HTML5 в любом случае не особо заботятся о поощрении хорошей практики; речь идет о документировании того, что должны делать пользовательские агенты. Они включили в стандарт все устаревшие функции HTML4, а также множество других традиционных, но хитрых способов поведения браузера, включая все особенности разбора сломанных тегов.[в сторону: я очень удивлен, увидев, что последний аргумент, обсуждаемый в их списке, касается того, как следует обрабатывать элемент <code> <isindex> </code> - элемент, который буквально никто не использовал с тех пор, как элементы формы HTML 2.0 сделали его устарел в 1995 г.] </p> <p> Учитывая ошеломляющие размеры и сложность HTML5, неудивительно, что они не захотели дополнительных усилий по объявлению более ограниченного профиля «строгого режима». Однако, когда работа подходит к концу, мне бы хотелось увидеть XHTML5 Strict или подобное усилие, чтобы немного уменьшить этот беспорядок. В нынешнем виде Хикси и его друзья сделали снимок всех мерзких взломов, которые браузер должен использовать для обеспечения совместимости сегодня, и сделали это стандартным требованием для всех браузеров в обозримом будущем, фактически оправдывая плохую практику. </p> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">4</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="7 December 2019 в 01:20 ">7 December 2019 в 01:20 </span> </div> <a class="s-link" href="/questions/294666/chto-takoe-udobstvo-ispolzovanija-dostupnost-programma-dlja-chtenija-s-ekrana-ili-kakaja-libo-drugaja-razrabotka-funkcionalnost-#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-744493"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div style="margin-top: 20px;"> Другие вопросы по тегам: <div class="tags" style="display: inline-block; float: none;"> <a href="/questions/tagged/jquery" class="tag" title="jquery" rel="tag">jquery</a> <a href="/questions/tagged/xhtml" class="tag" title="xhtml" rel="tag">xhtml</a> <a href="/questions/tagged/usability" class="tag" title="usability" rel="tag">usability</a> <a href="/questions/tagged/accessibility" class="tag" title="accessibility" rel="tag">accessibility</a> <a href="/questions/tagged/screen-readers" class="tag" title="screen-readers" rel="tag">screen-readers</a> </div> <h3 class="m-t-20">Похожие вопросы:</h3> <div class="related-block"> <ul> <li><div class='votes-answer green'><span class='vote-count'>59</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/127174/chto-luchshij-sposob-sostoit-v-tom-chtoby-vynudit-sebja-k-osnovnomu-vi-zakrytyj" title="Что лучший способ состоит в том, чтобы вынудить себя к основному vi? [закрытый]">Что лучший способ состоит в том, чтобы вынудить себя к основному vi? [закрытый]</a> - 9 April 2009 03:44 </li> <li><div class='votes-answer green'><span class='vote-count'>40</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/89465/kak-luchshe-vsego-obnaruzhit-mobilnoe-ustrojstvo" title="Как лучше всего обнаружить мобильное устройство?">Как лучше всего обнаружить мобильное устройство?</a> - 24 April 2019 12:27 </li> <li><div class='votes-answer green'><span class='vote-count'>36</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/82961/kak-luchshe-vsego-obnaruzhit-ustrojstvo-s-sensornym-ekranom-s-pomoschju-javascript" title="Как лучше всего обнаружить устройство с «сенсорным экраном» с помощью JavaScript?">Как лучше всего обнаружить устройство с «сенсорным экраном» с помощью JavaScript?</a> - 15 October 2013 16:24 </li> <li><div class='votes-answer green'><span class='vote-count'>36</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/182086/skrytye-funkcii-html" title="Скрытые функции HTML">Скрытые функции HTML</a> - 23 May 2017 12:18 </li> <li><div class='votes-answer green'><span class='vote-count'>31</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/83542/jquery-sovety-i-hitrosti" title="jQuery Советы и хитрости">jQuery Советы и хитрости</a> - 25 September 2017 20:50 </li> <li><div class='votes-answer green'><span class='vote-count'>31</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/2517/jquery-extend-i-object-az-z-ign-fail-duplicate" title="jQuery.extend () и Object.assign fail [duplicate] ">jQuery.extend () и Object.assign fail [duplicate] </a> - 22 March 2017 17:17 </li> <li><div class='votes-answer green'><span class='vote-count'>31</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/11647/kak-sopostavit-collator-vnutri-pol-zovatel-skoj-sortirovki-dlya-ob-ektov-v-jz-duplicate" title="Как сопоставить Collator внутри пользовательской сортировки для объектов в JS [duplicate] ">Как сопоставить Collator внутри пользовательской сортировки для объектов в JS [duplicate] </a> - 17 June 2015 03:09 </li> </ul> </div> </div> </div> </div> </div> <aside class="sidebar"> <div class="awrap"> <script async src="https://yastatic.net/pcode-native/loaders/loader.js"></script> <script> (yaads = window.yaads || []).push({ id: "553274-2", render: "#id-553274-2" }); </script> <div id="id-553274-2"></div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-2355906945027976" data-ad-slot="8038370725"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </aside> </div> </div> <footer class="footer"> <div class="wrapper wrapper--sm"> <div class="footer-navs-col"> <div class="footer-nav footer-nav--menu"> <div class="footer-coryright">© 2017 - 2020 Вопросы и ответы по программированию</div> </div> <div class="footer-nav footer-nav--catalog"> </div> </div> <div class="footer-contacts-col"> <div class="soc-widget-col"> </div> </div> <div class="clearfix"></div> </div> </footer> </div> <script type="text/javascript" src="/js/ui/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="/js/ui/external/jquery.cookie.js"></script> <script type="text/javascript" src="/js/versions/menu.ru.u1607887878.js"></script> <script type="text/javascript" src="/js/jquery.fancybox.min.js"></script> <script type="text/javascript" src="/js/slick.min.js"></script> <script type="text/javascript" src="/js/jquery.maskedinput.min.js"></script> <script type="text/javascript" src="/js/versions/scripts.ru.u1607887878.js"></script>  <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; var z = null;m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(90030325, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/90030325" style="position:absolute; left:-9999px;" alt="" /></div></noscript>   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123993370-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-123993370-1'); </script> </div> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "Программирование - вопросы и ответы", "alternateName": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "potentialAction": { "@type": "SearchAction", "target": "https://legkovopros.ru/search?search={search_term_string}", "query-input": "required name=search_term_string" } } { "@context": "https://schema.org", "@type": "Organization", "name": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "logo": "https://legkovopros.ru/i/logo.png", "email": "info@legkovopros.ru", "telephone": "" } </script> </body> </html>