tag:blogger.com,1999:blog-379238278894989933.post19076169606012027..comments2023-01-30T23:03:08.448+01:00Comments on El Maquetador Web, Maquetación Freelance, Curso HTML HTML5 CSS Tutorial Diseño Responsive Adaptable: Estructura web HTML5 y sus roles. HTML5 Layout - HTML5 Section, HTML5 Aside, HTML5 Nav, HTML5 Article, HTML5 Footer, HTML5 MainEl maquetador webhttp://www.blogger.com/profile/00403732346715727402noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-379238278894989933.post-82527980377089575362015-04-29T13:19:16.634+02:002015-04-29T13:19:16.634+02:00Actualmente en la Using WAI-ARIA in HTML de la W3C...Actualmente en la Using WAI-ARIA in HTML de la W3C se recomienda no usar roles que en realidad son redundantes, y que el lector de pantalla los va a interpretar igual si no están:<br /><br /><header role=”banner”></header> SI SE COLOCA<br /><br /><nav role=”navigation”></nav> SI SE COLOCA<br /><br /><main role=”main”></main> SI SE COLOCA<br /><br /><section role=”region o main”> NO SE COLOCA. Si se puede utilizar Role: alert, alertdialog, application, contentinfo, dialog, document, log, marquee, search, or status<br /><br /><article role=”article”></article> SI SE COLOCA<br /><br /><aside role=”complementary”></aside> SI SE COLOCA<br /><br /><footer role=”conteninfo”> </footer> SI SE COLOCA<br /><br /><a role="link"></a> NO SE COLOCA<br /><br /><img role="img"/> NO SE COLOCA<br /><br /><form role="form"></form> NO SE COLOCA<br /><br />También para que los lectores de pantalla funcionen mejor pueden utilizar atributos ARIA como: aria-label, aria-labelledby, aria-describedby<br /><br />Ejemplo ARIA-LABEL:<br /><nav role=”navigation” aria-label="mi menu"></nav><br /><br />Ejemplo ARIA-DESCRIBEDBY:<br /><div role="applicaton" aria-labelledby="calendar" aria-describedby="info"><br /><h1 id="calendar">Calendar<h1><br /><p id="info"><br />This calendar shows the game schedule for the Boston Red Sox.<br /></p><br /><div role="grid"><br />...<br /></div><br /></div><br /><br />Ejemplo ARIA-LABELLEDBY:<br /><div id="billing">Billing Address</div><br /><br /><div><br /><div id="name">Name</div><br /><input type="text" aria-labelledby="name billing"/><br /></div><br /><div><br /><div id="address">Address</div><br /><input type="text" aria-labelledby="address billing"/><br /></div> Gustavo Gabriel Coirininoreply@blogger.comtag:blogger.com,1999:blog-379238278894989933.post-37462099525934312652015-04-28T20:27:00.909+02:002015-04-28T20:27:00.909+02:00Muy bueno claro y directoMuy bueno claro y directoAnonymoushttps://www.blogger.com/profile/09268596033494389590noreply@blogger.com