Siete soluciones para crear SVG más accesibles

En 7 solutions for creating more accessible SVGs se explican siete formas para hacer las imágenes SVG más accesibles. En realidad, más que soluciones generales son soluciones particulares a algunos problemas que presentan las imágenes SVG:

  1. tags and SVGs
  2. tags and SVGs</li><li>IE focus bug with focusable elements</li><li>Safari 10 focus bug with <use></li><li>Aria-label inconsistency</li><li>IE8 and below render <desc></li><li>Colour contrast</li></ol> </div> <div class='post-bottom'> <div class='post-footer float-container'> <div class='post-footer-line post-footer-line-1'> </div> <div class='post-footer-line post-footer-line-2'> <span class='byline post-labels'> <span class='byline-label'> </span> <a href='https://accesibilidadweb.pagaencasa.es/search/label/SVG' rel='tag'>SVG</a> </span> </div> <div class='post-footer-line post-footer-line-3'> </div> </div> <div class='post-share-buttons post-share-buttons-bottom invisible'> <div class='byline post-share-buttons goog-inline-block'> <div aria-owns='sharing-popup-Blog1-byline-4785632003399582705' class='sharing' data-title='Siete soluciones para crear SVG más accesibles'> <button aria-controls='sharing-popup-Blog1-byline-4785632003399582705' aria-label='Compartir' class='sharing-button touch-icon-button' id='sharing-button-Blog1-byline-4785632003399582705' role='button'> <div class='flat-icon-button ripple'> <svg class='svg-icon-24'> <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_share_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg> </div> </button> <div class='share-buttons-container'> <ul aria-hidden='true' aria-label='Compartir' class='share-buttons hidden' id='sharing-popup-Blog1-byline-4785632003399582705' role='menu'> <li> <span aria-label='Obtener enlace' class='sharing-platform-button sharing-element-link' data-href='https://www.blogger.com/share-post.g?blogID=3322409975979897924&postID=4785632003399582705&target=' data-url='https://accesibilidadweb.pagaencasa.es/2017/10/siete-soluciones-para-crear-svg-mas.html' role='menuitem' tabindex='-1' title='Obtener enlace'> <svg class='svg-icon-24 touch-icon sharing-link'> <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_link_dark' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg> <span class='platform-sharing-text'>Obtener enlace</span> </span> </li> <li> <span aria-label='Compartir en Facebook' class='sharing-platform-button sharing-element-facebook' data-href='https://www.blogger.com/share-post.g?blogID=3322409975979897924&postID=4785632003399582705&target=facebook' data-url='https://accesibilidadweb.pagaencasa.es/2017/10/siete-soluciones-para-crear-svg-mas.html' role='menuitem' tabindex='-1' title='Compartir en Facebook'> <svg class='svg-icon-24 touch-icon sharing-facebook'> <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_facebook_dark' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg> <span class='platform-sharing-text'>Facebook</span> </span> </li> <li> <span aria-label='Compartir en Twitter' class='sharing-platform-button sharing-element-twitter' data-href='https://www.blogger.com/share-post.g?blogID=3322409975979897924&postID=4785632003399582705&target=twitter' data-url='https://accesibilidadweb.pagaencasa.es/2017/10/siete-soluciones-para-crear-svg-mas.html' role='menuitem' tabindex='-1' title='Compartir en Twitter'> <svg class='svg-icon-24 touch-icon sharing-twitter'> <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_twitter_dark' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg> <span class='platform-sharing-text'>Twitter</span> </span> </li> <li> <span aria-label='Compartir en Pinterest' class='sharing-platform-button sharing-element-pinterest' data-href='https://www.blogger.com/share-post.g?blogID=3322409975979897924&postID=4785632003399582705&target=pinterest' data-url='https://accesibilidadweb.pagaencasa.es/2017/10/siete-soluciones-para-crear-svg-mas.html' role='menuitem' tabindex='-1' title='Compartir en Pinterest'> <svg class='svg-icon-24 touch-icon sharing-pinterest'> <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_pinterest_dark' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg> <span class='platform-sharing-text'>Pinterest</span> </span> </li> <li> <span aria-label='Correo electrónico' class='sharing-platform-button sharing-element-email' data-href='https://www.blogger.com/share-post.g?blogID=3322409975979897924&postID=4785632003399582705&target=email' data-url='https://accesibilidadweb.pagaencasa.es/2017/10/siete-soluciones-para-crear-svg-mas.html' role='menuitem' tabindex='-1' title='Correo electrónico'> <svg class='svg-icon-24 touch-icon sharing-email'> <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_email_dark' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg> <span class='platform-sharing-text'>Correo electrónico</span> </span> </li> <li aria-hidden='true' class='hidden'> <span aria-label='Compartir en otras aplicaciones' class='sharing-platform-button sharing-element-other' data-url='https://accesibilidadweb.pagaencasa.es/2017/10/siete-soluciones-para-crear-svg-mas.html' role='menuitem' tabindex='-1' title='Compartir en otras aplicaciones'> <svg class='svg-icon-24 touch-icon sharing-sharingOther'> <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_more_horiz_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg> <span class='platform-sharing-text'>Otras aplicaciones</span> </span> </li> </ul> </div> </div> </div> </div> </div> </div> </div> <section class='comments embed' data-num-comments='0' id='comments'> <a name='comments'></a> <h3 class='title'>Comentarios</h3> <div id='Blog1_comments-block-wrapper'> </div> <div class='footer'> <div class='comment-form'> <a name='comment-form'></a> <h4 id='comment-post-message'>Publicar un comentario</h4> <a href='https://www.blogger.com/comment-iframe.g?blogID=3322409975979897924&postID=4785632003399582705&skin=contempo' id='comment-editor-src'></a> <iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' width='100%'></iframe> <script src='https://www.blogger.com/static/v1/jsbin/3858658042-comment_from_post_iframe.js' type='text/javascript'></script> <script type='text/javascript'> BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html'); </script> </div> </div> </section> <div class='desktop-ad mobile-ad'> </div> </article> </div> </div><div class='widget PopularPosts' data-version='2' id='PopularPosts1'> <h3 class='title'> Entradas populares de este blog </h3> <div class='widget-content'> <div role='feed'> <article class='post' role='article'> <h3 class='post-title'><a href='https://accesibilidadweb.pagaencasa.es/2020/08/accessibe-la-herramienta-magica.html'>accessiBe, la herramienta mágica</a></h3> <div class='post-header'> <div class='post-header-line-1'> <span class='byline post-timestamp'> <meta content='https://accesibilidadweb.pagaencasa.es/2020/08/accessibe-la-herramienta-magica.html'/> <a class='timestamp-link' href='https://accesibilidadweb.pagaencasa.es/2020/08/accessibe-la-herramienta-magica.html' rel='bookmark' title='permanent link'> <time class='published' datetime='2020-08-05T00:00:00-07:00' title='2020-08-05T00:00:00-07:00'> agosto 05, 2020 </time> </a> </span> </div> </div> <div class='item-content float-container'> <div class='popular-posts-snippet snippet-container r-snippet-container'> <div class='snippet-item r-snippetized'> accessiBe es una herramienta mágica por todo lo que promete: accessiBe is transforming web accessibility by replacing a costly, manual process with automated, state-of-the-art AI technology. Using the contextual understanding and image recognition, acessiBe’s AI scans and analyzes websites to learn what elements and functionality they include, and adjusts them to blind users’ screen-readers. ¿Será verdad? </div> <a class='snippet-fade r-snippet-fade hidden' href='https://accesibilidadweb.pagaencasa.es/2020/08/accessibe-la-herramienta-magica.html'></a> </div> <div class='jump-link flat-button ripple'> <a href='https://accesibilidadweb.pagaencasa.es/2020/08/accessibe-la-herramienta-magica.html' title='accessiBe, la herramienta mágica'> Leer más </a> </div> </div> </article> <article class='post' role='article'> <h3 class='post-title'><a href='https://accesibilidadweb.pagaencasa.es/2020/06/estudios-masivos-sobre-la-accesibilidad.html'>Estudios masivos sobre la accesibilidad de las páginas web</a></h3> <div class='post-header'> <div class='post-header-line-1'> <span class='byline post-timestamp'> <meta content='https://accesibilidadweb.pagaencasa.es/2020/06/estudios-masivos-sobre-la-accesibilidad.html'/> <a class='timestamp-link' href='https://accesibilidadweb.pagaencasa.es/2020/06/estudios-masivos-sobre-la-accesibilidad.html' rel='bookmark' title='permanent link'> <time class='published' datetime='2020-06-29T00:00:00-07:00' title='2020-06-29T00:00:00-07:00'> junio 29, 2020 </time> </a> </span> </div> </div> <div class='item-content float-container'> <div class='popular-posts-snippet snippet-container r-snippet-container'> <div class='snippet-item r-snippetized'> Dos estudios recientes (tienen menos de 6 meses) sobre la accesibilidad de las páginas web: The WebAIM Million - An annual accessibility analysis of the top 1,000,000 home pages We Analyzed 10,000,000 Pages and Here’s Where Most Fail with ADA and WCAG 2.1 Compliance </div> <a class='snippet-fade r-snippet-fade hidden' href='https://accesibilidadweb.pagaencasa.es/2020/06/estudios-masivos-sobre-la-accesibilidad.html'></a> </div> <div class='jump-link flat-button ripple'> <a href='https://accesibilidadweb.pagaencasa.es/2020/06/estudios-masivos-sobre-la-accesibilidad.html' title='Estudios masivos sobre la accesibilidad de las páginas web'> Leer más </a> </div> </div> </article> <article class='post' role='article'> <h3 class='post-title'><a href='https://accesibilidadweb.pagaencasa.es/2019/04/las-cinco-reglas-de-aria.html'>Las cinco reglas de ARIA</a></h3> <div class='post-header'> <div class='post-header-line-1'> <span class='byline post-timestamp'> <meta content='https://accesibilidadweb.pagaencasa.es/2019/04/las-cinco-reglas-de-aria.html'/> <a class='timestamp-link' href='https://accesibilidadweb.pagaencasa.es/2019/04/las-cinco-reglas-de-aria.html' rel='bookmark' title='permanent link'> <time class='published' datetime='2019-04-01T00:00:00-07:00' title='2019-04-01T00:00:00-07:00'> abril 01, 2019 </time> </a> </span> </div> </div> <div class='item-content float-container'> <div class='popular-posts-snippet snippet-container r-snippet-container'> <div class='snippet-item r-snippetized'> En Using ARIA : First Rule of ARIA: If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so. Second Rule of ARIA Use: Do not change native semantics, unless you really have to. Third Rule of ARIA Use: All interactive ARIA controls must be usable with the keyboard. Fourth Rule of ARIA Use: Do not use role="presentation" or aria-hidden="true" on a focusable element. Fifth Rule of ARIA Use: All interactive elements must have an accessible name. Y en español: Primera regla de ARIA: si puede usar un elemento o atributo HTML nativo con la semántica y el comportamiento que ya necesita, en lugar de reutilizar un elemento y agregar un rol, estado o propiedad de ARIA para hacerlo accesible, entonces hágalo. Segunda regla de ARIA: no cambie la semántica nativa, a menos que realmente tenga que hacerlo. Tercera re </div> <a class='snippet-fade r-snippet-fade hidden' href='https://accesibilidadweb.pagaencasa.es/2019/04/las-cinco-reglas-de-aria.html'></a> </div> <div class='jump-link flat-button ripple'> <a href='https://accesibilidadweb.pagaencasa.es/2019/04/las-cinco-reglas-de-aria.html' title='Las cinco reglas de ARIA'> Leer más </a> </div> </div> </article> </div> </div> </div></div> </main> </div> <footer class='footer section' id='footer' name='Pie de página'><div class='widget Attribution' data-version='2' id='Attribution1'> <div class='widget-content'> <div class='blogger'> <a href='https://www.blogger.com' rel='nofollow'> <svg class='svg-icon-24'> <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_post_blogger_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg> Con la tecnología de Blogger </a> </div> <div class='image-attribution'> Imágenes del tema: <a href="http://www.offset.com/photos/394244">Michael Elkan</a> </div> </div> </div></footer> </div> </div> </div> <aside class='sidebar-container container sidebar-invisible' role='complementary'> <div class='navigation'> <button class='svg-icon-24-button flat-icon-button ripple sidebar-back'> <svg class='svg-icon-24'> <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_arrow_back_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg> </button> </div> <div class='sidebar_top_wrapper'> <div class='sidebar_top section' id='sidebar_top' name='Barra lateral (arriba)'><div class='widget Profile' data-version='2' id='Profile1'> <div class='wrapper solo'> <div class='widget-content individual'> <a href='https://www.blogger.com/profile/08208428422019950067' rel='nofollow'> <img alt='Mi foto' class='profile-img' height='120' src='//1.bp.blogspot.com/-imAQ0Hupfxo/X6wLdyw36II/AAAAAAAACkA/sNTlKIeysNgYJPmp7f2aLT_Cu5I1anlYACK4BGAYYCw/s120-pf/anonimous.png' width='120'/> </a> <div class='profile-info'> <dl class='profile-datablock'> <dt class='profile-data'> <a class='profile-link g-profile' href='https://www.blogger.com/profile/08208428422019950067' rel='author nofollow'> Mutamid </a> </dt> </dl> <a class='profile-link visit-profile pill-button' href='https://www.blogger.com/profile/08208428422019950067' rel='author'> Visitar perfil </a> </div> </div> </div> </div></div> </div> <div class='sidebar_bottom section' id='sidebar_bottom' name='Barra lateral (abajo)'><div class='widget BlogArchive' data-version='2' id='BlogArchive1'> <details class='collapsible extendable'> <summary> <div class='collapsible-title'> <h3 class='title'> Archivo </h3> <svg class='svg-icon-24 chevron-down'> <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg> <svg class='svg-icon-24 chevron-up'> <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_less_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg> </div> </summary> <div class='widget-content'> <div id='ArchiveList'> <div id='BlogArchive1_ArchiveList'> <div class='first-items'> <ul class='flat'> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2020/11/'>noviembre 2020<span class='post-count'>2</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2020/10/'>octubre 2020<span class='post-count'>11</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2020/09/'>septiembre 2020<span class='post-count'>8</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2020/08/'>agosto 2020<span class='post-count'>9</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2020/07/'>julio 2020<span class='post-count'>11</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2020/06/'>junio 2020<span class='post-count'>11</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2020/05/'>mayo 2020<span class='post-count'>13</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2020/04/'>abril 2020<span class='post-count'>12</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2020/03/'>marzo 2020<span class='post-count'>12</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2020/02/'>febrero 2020<span class='post-count'>10</span></a> </li> </ul> </div> <div class='remaining-items'> <ul class='flat'> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2020/01/'>enero 2020<span class='post-count'>8</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2019/12/'>diciembre 2019<span class='post-count'>9</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2019/11/'>noviembre 2019<span class='post-count'>13</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2019/10/'>octubre 2019<span class='post-count'>13</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2019/09/'>septiembre 2019<span class='post-count'>12</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2019/08/'>agosto 2019<span class='post-count'>15</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2019/07/'>julio 2019<span class='post-count'>14</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2019/06/'>junio 2019<span class='post-count'>11</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2019/05/'>mayo 2019<span class='post-count'>13</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2019/04/'>abril 2019<span class='post-count'>13</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2019/03/'>marzo 2019<span class='post-count'>12</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2019/02/'>febrero 2019<span class='post-count'>13</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2019/01/'>enero 2019<span class='post-count'>13</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2018/12/'>diciembre 2018<span class='post-count'>8</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2018/11/'>noviembre 2018<span class='post-count'>14</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2018/10/'>octubre 2018<span class='post-count'>17</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2018/09/'>septiembre 2018<span class='post-count'>14</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2018/08/'>agosto 2018<span class='post-count'>13</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2018/07/'>julio 2018<span class='post-count'>12</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2018/06/'>junio 2018<span class='post-count'>13</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2018/05/'>mayo 2018<span class='post-count'>14</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2018/04/'>abril 2018<span class='post-count'>14</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2018/03/'>marzo 2018<span class='post-count'>15</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2018/02/'>febrero 2018<span class='post-count'>11</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2018/01/'>enero 2018<span class='post-count'>11</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2017/12/'>diciembre 2017<span class='post-count'>12</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2017/11/'>noviembre 2017<span class='post-count'>12</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2017/10/'>octubre 2017<span class='post-count'>13</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2017/09/'>septiembre 2017<span class='post-count'>7</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2017/08/'>agosto 2017<span class='post-count'>13</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2017/07/'>julio 2017<span class='post-count'>12</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2017/06/'>junio 2017<span class='post-count'>16</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2017/05/'>mayo 2017<span class='post-count'>17</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2017/04/'>abril 2017<span class='post-count'>12</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2017/03/'>marzo 2017<span class='post-count'>15</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2017/02/'>febrero 2017<span class='post-count'>11</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2017/01/'>enero 2017<span class='post-count'>15</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2016/12/'>diciembre 2016<span class='post-count'>15</span></a> </li> <li class='archivedate'> <a href='https://accesibilidadweb.pagaencasa.es/2016/11/'>noviembre 2016<span class='post-count'>16</span></a> </li> </ul> </div> <span class='show-more pill-button'>Mostrar más</span> <span class='show-less hidden pill-button'>Mostrar menos</span> </div> </div> </div> </details> </div><div class='widget Label' data-version='2' id='Label1'> <details class='collapsible extendable'> <summary> <div class='collapsible-title'> <h3 class='title'> Etiquetas </h3> <svg class='svg-icon-24 chevron-down'> <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg> <svg class='svg-icon-24 chevron-up'> <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_less_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use> </svg> </div> </summary> <div class='widget-content list-label-widget-content'> <div class='first-items'> <ul> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Accessibility%20Overlay'>Accessibility Overlay</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/ARIA'>ARIA</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Art%C3%ADculos'>Artículos</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/ATAG'>ATAG</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Atributo%20placeholder'>Atributo placeholder</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Atributo%20title'>Atributo title</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Audiodescripci%C3%B3n'>Audiodescripción</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Ayudas%20t%C3%A9cnicas'>Ayudas técnicas</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Bot%C3%B3n-Enlace'>Botón-Enlace</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Braille'>Braille</a></li> </ul> </div> <div class='remaining-items'> <ul> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Captcha'>Captcha</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Certificaci%C3%B3n'>Certificación</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Chrome'>Chrome</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/COCEMFE'>COCEMFE</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Color'>Color</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Congresos'>Congresos</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Consejos'>Consejos</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Contraste'>Contraste</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Control%20mental'>Control mental</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/CSS'>CSS</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Cursos'>Cursos</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Daltonismo'>Daltonismo</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Denuncias'>Denuncias</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Dislexia'>Dislexia</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Ejemplos'>Ejemplos</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Encuesta'>Encuesta</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Error'>Error</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Estad%C3%ADsticas'>Estadísticas</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Eye%20tracking'>Eye tracking</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Fotosensibilidad'>Fotosensibilidad</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Hardware'>Hardware</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Herramientas'>Herramientas</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Herramientas%20revisi%C3%B3n'>Herramientas revisión</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/HTML5'>HTML5</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/JavaScript'>JavaScript</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Lector%20de%20pantalla'>Lector de pantalla</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Legibilidad'>Legibilidad</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Lengua%20de%20signos'>Lengua de signos</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Lenguaje'>Lenguaje</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Libros'>Libros</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Magnificador'>Magnificador</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/M%C3%B3vil'>Móvil</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Multimedia'>Multimedia</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Normativas'>Normativas</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Noticias'>Noticias</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/PDF'>PDF</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Problemas%20cognitivos'>Problemas cognitivos</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Problemas%20de%20audici%C3%B3n'>Problemas de audición</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Problemas%20de%20visi%C3%B3n'>Problemas de visión</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Problemas%20motores%20%28movilidad%29'>Problemas motores (movilidad)</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Programaci%C3%B3n'>Programación</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Programar'>Programar</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Reconocimiento%20voz'>Reconocimiento voz</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Sanci%C3%B3n'>Sanción</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Sordoceguera'>Sordoceguera</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Subt%C3%ADtulos'>Subtítulos</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/SVG'>SVG</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Texto%20alternativo'>Texto alternativo</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Transcripci%C3%B3n'>Transcripción</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Tutorial'>Tutorial</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Usabilidad'>Usabilidad</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/V%C3%ADdeos'>Vídeos</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/W3C'>W3C</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/WCAG'>WCAG</a></li> <li><a class='label-name' href='https://accesibilidadweb.pagaencasa.es/search/label/Webinar'>Webinar</a></li> </ul> </div> <span class='show-more pill-button'>Mostrar más</span> <span class='show-less hidden pill-button'>Mostrar menos</span> </div> </details> </div><div class='widget ReportAbuse' data-version='2' id='ReportAbuse1'> <h3 class='title'> <a class='report_abuse' href='https://www.blogger.com/go/report-abuse' rel='noopener nofollow' target='_blank'> Notificar uso inadecuado </a> </h3> </div></div> </aside> <script type="text/javascript" src="https://resources.blogblog.com/blogblog/data/res/4088626223-indie_compiled.js" async="true"></script> <!--It is your responsibility to notify your visitors about cookies used and data collected on your blog. Blogger makes a standard notification available for you to use on your blog, and you can customize it or replace with your own notice. See http://www.blogger.com/go/cookiechoices for more details.--> <script defer='' src='/js/cookienotice.js'></script> <script> document.addEventListener('DOMContentLoaded', function(event) { window.cookieChoices && cookieChoices.showCookieConsentBar && cookieChoices.showCookieConsentBar( (window.cookieOptions && cookieOptions.msg) || 'This site uses cookies from Google to deliver its services and to analyze traffic. Your IP address and user-agent are shared with Google along with performance and security metrics to ensure quality of service, generate usage statistics, and to detect and address abuse.', (window.cookieOptions && cookieOptions.close) || 'Ok', (window.cookieOptions && cookieOptions.learn) || 'Learn More', (window.cookieOptions && cookieOptions.link) || 'https://www.blogger.com/go/blogspot-cookies'); }); </script> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/629644797-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY41Ru-TJspIJmMGng05_YBSEQqfTQ:1615084779995';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3322409975979897924','//accesibilidadweb.pagaencasa.es/2017/10/siete-soluciones-para-crear-svg-mas.html','3322409975979897924'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '3322409975979897924', 'title': 'accesibilidad', 'url': 'https://accesibilidadweb.pagaencasa.es/2017/10/siete-soluciones-para-crear-svg-mas.html', 'canonicalUrl': 'https://accesibilidadweb.pagaencasa.es/2017/10/siete-soluciones-para-crear-svg-mas.html', 'homepageUrl': 'https://accesibilidadweb.pagaencasa.es/', 'searchUrl': 'https://accesibilidadweb.pagaencasa.es/search', 'canonicalHomepageUrl': 'https://accesibilidadweb.pagaencasa.es/', 'blogspotFaviconUrl': 'https://accesibilidadweb.pagaencasa.es/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'es', 'localeUnderscoreDelimited': 'es', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22accesibilidad - Atom\x22 href\x3d\x22https://accesibilidadweb.pagaencasa.es/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22accesibilidad - RSS\x22 href\x3d\x22https://accesibilidadweb.pagaencasa.es/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22accesibilidad - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/3322409975979897924/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22accesibilidad - Atom\x22 href\x3d\x22https://accesibilidadweb.pagaencasa.es/feeds/4785632003399582705/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/dee08f0e21edd08a', 'plusOneApiSrc': 'https://apis.google.com/js/plusone.js', 'disableGComments': true, 'sharing': {'platforms': [{'name': 'Obtener enlace', 'key': 'link', 'shareMessage': 'Obtener enlace', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Compartir en Facebook', 'target': 'facebook'}, {'name': 'Escribe un blog', 'key': 'blogThis', 'shareMessage': 'Escribe un blog', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Compartir en Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Compartir en Pinterest', 'target': 'pinterest'}, {'name': 'Correo electr\xf3nico', 'key': 'email', 'shareMessage': 'Correo electr\xf3nico', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 300, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27es\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Leer m\xe1s', 'pageType': 'item', 'postId': '4785632003399582705', 'pageName': 'Siete soluciones para crear SVG m\xe1s accesibles', 'pageTitle': 'accesibilidad: Siete soluciones para crear SVG m\xe1s accesibles'}}, {'name': 'features', 'data': {'sharing_get_link_dialog': 'true', 'sharing_native': 'false'}}, {'name': 'messages', 'data': {'edit': 'Editar', 'linkCopiedToClipboard': 'El enlace se ha copiado en el Portapapeles.', 'ok': 'Aceptar', 'postLink': 'Enlace de la entrada'}}, {'name': 'template', 'data': {'name': 'Contempo', 'localizedName': 'Contempo', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': false, 'variant': 'indie_light', 'variantId': 'indie_light'}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Siete soluciones para crear SVG m\xe1s accesibles', 'description': 'En\xa0 7 solutions for creating more accessible SVGs se explican siete formas para hacer las im\xe1genes SVG m\xe1s accesibles. En realidad, m\xe1s que...', 'url': 'https://accesibilidadweb.pagaencasa.es/2017/10/siete-soluciones-para-crear-svg-mas.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 4785632003399582705}}, {'name': 'widgets', 'data': [{'title': 'Buscar este blog', 'type': 'BlogSearch', 'sectionId': 'search_top', 'id': 'BlogSearch1'}, {'title': 'accesibilidad (cabecera)', 'type': 'Header', 'sectionId': 'header', 'id': 'Header1'}, {'title': '', 'type': 'FeaturedPost', 'sectionId': 'page_body', 'id': 'FeaturedPost1', 'postId': '4683544207313453486'}, {'title': 'Entradas del blog', 'type': 'Blog', 'sectionId': 'page_body', 'id': 'Blog1', 'posts': [{'id': '4785632003399582705', 'title': 'Siete soluciones para crear SVG m\xe1s accesibles', 'showInlineAds': true}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'share', 'label': ''}, {'name': 'timestamp', 'label': ''}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'comentarios'}, {'name': 'icons', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': ''}]}, {'regionName': 'footer3', 'items': [{'name': 'location', 'label': 'Ubicaci\xf3n:'}]}], 'allBylineItems': [{'name': 'share', 'label': ''}, {'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': 'comentarios'}, {'name': 'icons', 'label': ''}, {'name': 'labels', 'label': ''}, {'name': 'location', 'label': 'Ubicaci\xf3n:'}]}, {'title': '', 'type': 'PopularPosts', 'sectionId': 'page_body', 'id': 'PopularPosts1', 'posts': [{'title': 'accessiBe, la herramienta m\xe1gica', 'id': 2672040699107963599}, {'title': 'Estudios masivos sobre la accesibilidad de las p\xe1ginas web', 'id': 9143916107214509277}, {'title': 'Las cinco reglas de ARIA', 'id': 6439726459528186831}]}, {'type': 'Attribution', 'sectionId': 'footer', 'id': 'Attribution1'}, {'title': 'Datos personales', 'type': 'Profile', 'sectionId': 'sidebar_top', 'id': 'Profile1'}, {'type': 'BlogArchive', 'sectionId': 'sidebar_bottom', 'id': 'BlogArchive1'}, {'title': 'Etiquetas', 'type': 'Label', 'sectionId': 'sidebar_bottom', 'id': 'Label1'}, {'title': '', 'type': 'ReportAbuse', 'sectionId': 'sidebar_bottom', 'id': 'ReportAbuse1'}]}]); _WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch1', 'search_top', document.getElementById('BlogSearch1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost1', 'page_body', document.getElementById('FeaturedPost1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'page_body', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/475930067-lbx__es.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1050234869-lightbox_bundle.css'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'page_body', document.getElementById('PopularPosts1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_AttributionView', new _WidgetInfo('Attribution1', 'footer', document.getElementById('Attribution1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar_top', document.getElementById('Profile1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar_bottom', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Cargando\x26hellip;'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'sidebar_bottom', document.getElementById('Label1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_ReportAbuseView', new _WidgetInfo('ReportAbuse1', 'sidebar_bottom', document.getElementById('ReportAbuse1'), {}, 'displayModeFull')); </script> </body> </html>