diff options
Diffstat (limited to 'files/ca/learn/accessibility/html/index.html')
| -rw-r--r-- | files/ca/learn/accessibility/html/index.html | 596 |
1 files changed, 596 insertions, 0 deletions
diff --git a/files/ca/learn/accessibility/html/index.html b/files/ca/learn/accessibility/html/index.html new file mode 100644 index 0000000000..ddcb351f85 --- /dev/null +++ b/files/ca/learn/accessibility/html/index.html @@ -0,0 +1,596 @@ +--- +title: 'HTML: Una bona base per l''accessibilitat' +slug: Learn/Accessibility/HTML +translation_of: Learn/Accessibility/HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</div> + +<p class="summary">Es pot fer accessible una gran quantitat de contingut web només assegurant-se que els elements d'HTML correctes s’utilitzin en tot moment amb el propòsit correcte. Aquest article analitza detalladament com es pot utilitzar HTML per garantir la màxima accessibilitat.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td> + <p>Alfabetització bàsica en informàtica, comprensió bàsica d’HTML (vegeu <a href="/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML">Introducció a l’HTML</a>) i comprensió de <a href="/ca/docs/Learn/Accessibility/Que_es_accessibilitat">què és l’accessibilitat</a>.</p> + </td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Familiaritzar-vos amb les funcions d’HTML que tenen avantatges d’accessibilitat i com utilitzar-les adequadament als vostres documents web.</td> + </tr> + </tbody> +</table> + +<h2 id="HTML_i_accessibilitat">HTML i accessibilitat</h2> + +<p>A mesura que apreneu més sobre HTML —llegiu més recursos, mireu més exemples, etc.— anireu veient un tema comú: la importància d’utilitzar HTML semàntic (de vegades anomenat POSH o <em lang="en">Plain Old Semantic HTML</em>). Això significa utilitzar els elements HTML correctes per al propòsit previst en la mesura del possible.</p> + +<p>Us podeu preguntar per què és tan important. Al cap i a la fi, podeu utilitzar una combinació de CSS i JavaScript per fer que qualsevol element HTML es comporti de la manera que vulgueu. Per exemple, es podria marcar un botó de control per reproduir un vídeo al vostre lloc així:</p> + +<pre class="brush: html notranslate"><div>Reproduir vídeo</div></pre> + +<p>Però, com veureu amb més detall més endavant, té sentit utilitzar l'element correcte per a aquest objectiu:</p> + +<pre class="brush: html notranslate"><button>Reproduir vídeo</button></pre> + +<p>Els <code><button></code>s HTML no només tenen un estil adequat aplicat per defecte (que probablement voldreu substituir), sinó que també tenen accessibilitat de teclat integrada: els usuaris poden navegar entre els botons mitjançant la tecla <kbd>Tab</kbd> i activar la seva selecció mitjançant <kbd>Retorn</kbd> o <kbd>Enter</kbd>.</p> + +<p>No costa més escriure HTML semàntic que etiquetatge no semàntic (i incorrecte) si ho feu de manera constant des de l’inici del projecte. Encara millor, l’etiquetatge semàntic té altres avantatges més enllà de l’accessibilitat:</p> + +<ol> + <li><strong>Més fàcil de desenvolupar:</strong> com es va esmentar anteriorment, obtindreu algunes funcions de forma gratuïta, a més, és possiblement més fàcil d’entendre.</li> + <li><strong>Millor en dispositius mòbils:</strong> l’HTML semàntic és, sens dubte, més lleuger en mida de fitxer que el codi espagueti no semàntic i és més fàcil de fer <em>responsive</em>.</li> + <li><strong>Bo per al SEO:</strong> els motors de cerca donen més importància a les paraules clau dels encapçalaments, enllaços, etc. que les paraules clau incloses als <code><div></code> no semàntics, etc., de manera que els vostres clients podran trobar més fàcilment els vostres documents.</li> +</ol> + +<p>Continuem i vegem l'HTML accessible amb més detall.</p> + +<div class="note"> +<p><strong>Nota</strong>: És una bona idea tenir instal·lat un lector de pantalla a l'ordinador local perquè pugueu provar els exemples que es mostren a continuació. Consulteu la nostra <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Screen readers guide</a> per obtenir més informació.</p> +</div> + +<h2 id="Bona_semàntica">Bona semàntica</h2> + +<p>Ja hem parlat de la importància d'una semàntica adequada i de per què hauríem d'utilitzar l'element HTML adequat per a cada cosa. Això no es pot ignorar, ja que és un dels principals llocs on l'accessibilitat es trenca greument si no es gestiona correctament.</p> + +<p>Al web, la veritat és que la gent fa coses molt estranyes amb el marcatge HTML. Alguns abusos d'HTML es deuen a pràctiques heretades que no s'han oblidat completament, i algunes són simplement ignorància. En qualsevol cas, hauríeu de substituir aquest codi tan dolent.</p> + +<p>De vegades no esteu en condicions de desfer-vos del marcat terrible: les vostres pàgines podrien ser generades per algun tipus de <em lang="en">framework</em> del servidor sobre el qual no teniu el control total, o bé podríeu tenir contingut de tercers a la vostra pàgina (com ara banners publicitaris) sobre els quals no teniu control.</p> + +<p>L'objectiu no és "tot o res". Tot i això, totes les millores que pugueu fer ajudaran a la causa de l’accessibilitat.</p> + +<h3 id="Contingut_textual">Contingut textual</h3> + +<p>Una de les millors ajudes d’accessibilitat que pot tenir un usuari de lector de pantalla és una estructura de contingut excel·lent amb encapçalaments, paràgrafs, llistes, etc. Un exemple semàntic excel·lent pot semblar-se al següent:</p> + +<pre class="brush: html example-good line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">>El meu encapçalament</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Aquesta és la primera secció del meu document.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>Aquí hi afegiré un paràgraf també</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">> + +<ol> + <li>Aquí tenim</li> + <li>una llista</li> + <li>per llegir</li> +</ol></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">>El meu sotsencapçalament</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>Aquesta és la primera subsecció del document</span></span>. M'encantaria que tothom pogués trobar aquest document!<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">>El meu 2n sotsencapçalament</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>Aquesta és la segona subsecció del meu contingut</span></span>. Crec que és més interessant que l'anterior.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> + +<p>Hem preparat una versió amb text més llarg per provar-la amb un lector de pantalla (vegeu <a href="https://mdn.github.io/learning-area/accessibility/html/good-semantics.html">good-semantics.html</a>). Si proveu de navegar-hi, veureu que és bastant fàcil:</p> + +<ol> + <li>El lector de pantalla llegeix cada capçalera a mesura que avança pel contingut i us notifica què és un encapçalament, què és un paràgraf, etc.</li> + <li>S'atura després de cada element, deixant-te anar al ritme que sigui més còmode per a tu.</li> + <li>Podeu passar a l’encapçalament següent / anterior en molts lectors de pantalla.</li> + <li>També podeu mostrar una llista de tots els encapçalaments a molts lectors de pantalla, cosa que us permetrà utilitzar-los com una taula de contingut útil per trobar contingut específic.</li> +</ol> + +<p>De vegades, la gent escriu encapçalaments, paràgrafs, etc. mitjançant HTML de presentació i salts de línia, com ara el següent:</p> + +<pre class="brush: html example-bad line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>7<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code>El meu encapçalament<code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +</code>Aquesta és la primera secció del meu document.<code class="language-html"> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +</code>Aquí hi afegiré un paràgraf també.<code class="language-html"> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> +1. </span></span></code>Aquí tenim<code class="language-html"><span class="tag token"><span class="punctuation token"> +</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> +2. </span></span></code>una llista<code class="language-html"><span class="tag token"><span class="punctuation token"> +</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> +3. </span></span></code>per llegir<code class="language-html"><span class="tag token"><span class="punctuation token"> +</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code>El meu sotsencapçalament<code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +</code>Aquesta és la primera subsecció del document. M'encantaria que tothom pogués trobar aquest document!<code class="language-html"> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code>El meu 2n sotsencapçalament<code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +</code>Aquesta és la segona subsecció del meu contingut. Crec que és més interessant que l'anterior.</pre> + +<p>Si proveu la nostra versió més llarga amb un lector de pantalla (vegeu <a href="https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a>), no tindreu una experiència molt bona: el lector de pantalla no té res a utilitzar com a indicador, de manera que no podeu recuperar una útil taula de continguts i tota la pàgina es veu com un bloc gegant únic, de manera que només es llegeix d’una sola vegada, tot alhora.</p> + +<p>Hi ha altres qüestions més enllà de l’accessibilitat: és més difícil donar estils al contingut mitjançant CSS o manipular-lo amb JavaScript, per exemple, perquè no hi ha elements que s’utilitzin com a selectors.</p> + +<h4 id="Utilitzar_un_llenguatge_clar">Utilitzar un llenguatge clar</h4> + +<p>El llenguatge que utilitzeu també pot afectar l'accessibilitat. En general, heu d’utilitzar un llenguatge clar que no sigui massa complex i que no faci servir termes d’argot innecessaris. Això no només beneficia les persones amb discapacitats cognitives o d’altres; beneficia els lectors per als quals el text no està escrit en la seva primera llengua, la gent més jove... tothom, de fet! A part d'això, heu d'intentar evitar l'ús de llenguatge i caràcters que el lector de pantalla no llegeixi amb claredat. Per exemple:</p> + +<ul> + <li>No utilitzeu guions si podeu evitar-ho. En lloc d’escriure 5-7, escriviu 5 a 7.</li> + <li>Amplieu les abreviatures: en lloc d’escriure Gen, escriviu gener.</li> + <li>Amplieu les sigles, almenys una o dues vegades. En lloc d’escriure HTML en primera instància, escriviu Hypertext Markup Language.</li> +</ul> + +<h3 id="Disposicions_de_pàgina">Disposicions de pàgina</h3> + +<p>Antigament, la gent solia crear dissenys de pàgines amb taules HTML: utilitzaven diferents cel·les de taula per contenir la capçalera, el peu de pàgina, la barra lateral, la columna de contingut principal, etc. No és una bona idea perquè els lectors de pantalla faran lectures confuses, sobretot si el disseny és complex i té moltes taules imbricades.</p> + +<p>Proveu el nostre exemple <a href="https://mdn.github.io/learning-area/accessibility/html/table-layout.html">table-layout.html</a>, que té un aspecte semblant a aquest:</p> + +<pre class="brush: html notranslate"><table width="1200"> + <!-- main heading row --> + <tr id="heading"> + <td colspan="6"> + + <h1 align="center">Header</h1> + + </td> + </tr> + <!-- nav menu row --> + <tr id="nav" bgcolor="#ffffff"> + <td width="200"> + <a href="#" align="center">Home</a> + </td> + <td width="200"> + <a href="#" align="center">Our team</a> + </td> + <td width="200"> + <a href="#" align="center">Projects</a> + </td> + <td width="200"> + <a href="#" align="center">Contact</a> + </td> + <td width="300"> + <form width="300"> + <input type="search" name="q" placeholder="Search query" width="300"> + </form> + </td> + <td width="100"> + <button width="100">Go!</button> + </td> + </tr> + <!-- spacer row --> + <tr id="spacer" height="10"> + <td> + + </td> + </tr> + <!-- main content and aside row --> + <tr id="main"> + <td id="content" colspan="4" bgcolor="#ffffff"> + + <!-- main content goes here --> + </td> + <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> + <h2>Related</h2> + + <!-- aside content goes here --> + + </td> + </tr> + <!-- spacer row --> + <tr id="spacer" height="10"> + <td> + + </td> + </tr> + <!-- footer row --> + <tr id="footer" bgcolor="#ffffff"> + <td colspan="6"> + <p>©Copyright 2050 by nobody. All rights reversed.</p> + </td> + </tr> + </table></pre> + +<p>Si intenteu navegar-hi mitjançant un lector de pantalla, probablement us dirà que hi ha una taula que cal mirar (tot i que alguns lectors de pantalla poden endevinar la diferència entre els dissenys amb taules i les taules de dades). És probable que (depenent del lector de pantalla que utilitzeu) hàgeu de baixar a la taula com a objecte i mirar-ne les cel·les una a una i tornar a sortir de la taula per continuar navegant pel contingut.</p> + +<p>Els dissenys de taules són una relíquia del passat: tenien sentit quan el suport de CSS no estava estès als navegadors, però ara només creen confusió per als usuaris de lectors de pantalla. A més, el seu codi font requereix més marcatge, cosa que els fa menys flexibles i més difícils de mantenir. Podeu verificar aquestes afirmacions comparant la vostra experiència anterior amb un <a href="https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">exemple d’estructura de lloc web més modern</a>, que podria semblar-se a:</p> + +<pre class="brush: html notranslate"><header> + <h1>Header</h1> +</header> + +<nav> + <!-- main navigation in here --> +</nav> + +<!-- Here is our page's main content --> +<main> + + <!-- It contains an article --> + <article> + <h2>Article heading</h2> + + <!-- article content in here --> + </article> + + <aside> + <h2>Related</h2> + + <!-- aside content in here --> + </aside> + +</main> + +<!-- And here is our main footer that is used across all the pages of our website --> + +<footer> + <!-- footer content in here --> +</footer></pre> + +<p>Si proveu el nostre exemple d’estructura més modern amb un lector de pantalla, veureu que l’etiquetatge de disseny ja no s’interposa i confon la lectura del contingut. També és molt més lleuger i reduït pel que fa a la mida del codi, cosa que significa que és més fàcil mantenir el codi i que necessita menys amplada de banda per a l'usuari (especialment important per a aquells que tenen connexions lentes).</p> + +<p>Una altra consideració a l’hora de crear dissenys és l’ús d’elements semàntics HTML5 tal com es veu a l’exemple anterior (vegeu <a href="/ca/docs/Web/HTML/Element#Seccionament_del_contingut">seccionat de contingut</a>): podeu crear un disseny utilitzant només elements {{htmlelement("div")}}) imbricats, però és millor utilitzar elements adequats per marcar la vostra navegació principal ({{htmlelement("nav")}}), peu de pàgina ({{htmlelement("footer")}}), unitats de contingut ({{htmlelement("article")}}), etc. Aquests proporcionen una semàntica addicional per als lectors de pantalla (i altres eines) per donar a l'usuari pistes addicionals sobre el contingut que navega (vegeu <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Screen Reader Support for new HTML5 Section Elements</a> per fer-vos una idea de com és el suport en els lectors de pantalla).</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> A més de tenir una bona semàntica i un disseny atractiu, el vostre contingut hauria de tenir un sentit lògic en el seu ordre de codi; sempre podeu col·locar-lo allà on vulgueu mitjançant CSS, però hauríeu de crear un ordre de codi correcte de sortida, de forma que el que es llegeixi als usuaris de lectors de pantalla tingui sentit.</p> +</div> + +<h3 id="Controls_dinterfície_dusuari">Controls d'interfície d'usuari</h3> + +<p>Per controls d’interfície d’usuari ens referim a les parts principals dels documents web amb les quals interactuen els usuaris, normalment botons, enllaços i controls de formulari. En aquesta secció analitzarem les qüestions bàsiques d’accessibilitat que cal tenir en compte a l’hora de crear aquests controls. Articles posteriors sobre WAI-ARIA i multimèdia examinaran altres aspectes de l'accessibilitat de la interfície d'usuari.</p> + +<p>Un aspecte clau de l’accessibilitat dels controls d’interfície d’usuari és que, per defecte, els navegadors permeten manipular-los mitjançant el teclat. Podeu provar-ho amb el nostre exemple <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">native-keyboard-accessibility.html</a> (consulteu el <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">codi font</a>). Obriu-lo en una pestanya nova i proveu de prémer la tecla de tabulació; després de prémer algunes vegades, hauríeu de veure com el focus de la pestanya comença a moure's pels diferents elements enfocables. Els elements enfocats tenen un estil predeterminat ressaltat en tots els navegadors (difereix lleugerament entre els diferents navegadors) de manera que pugueu saber quin element està enfocat.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p> + +<p>A continuació, podeu prémer Enter / Return per seguir un enllaç enfocat o prémer un botó (hem inclòs una mica de JavaScript per fer que els botons llancin un missatge) o començar a escriure per introduir text en una camp de formulari. Altres elements del formulari tenen controls diferents, per exemple, l'element {{htmlelement ("select")}}} pot mostrar les seves opcions i circular entre elles amb les tecles de fletxa amunt i avall.</p> + +<div class="note"> +<p><strong>Nota</strong>: Els diferents navegadors poden tenir diferents opcions de control de teclat disponibles. Consulteu <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Using native keyboard accessibility</a> per obtenir més informació.</p> +</div> + +<p>Essencialment, obteniu aquest comportament gratis només fent servir els elements adequats, p.ex:</p> + +<pre class="brush: html example-good notranslate"><h1>Enllaços</h1> + +<p>Això és un enllaç a <a href="https://www.mozilla.org">Mozilla</a>.</p> + +<p>Un altre enllaç, a la <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p> + +<h2>Botons</h2> + +<p> + <button data-message="Això és del primer botó">Fes-me clic!</button> + <button data-message="Això és del segon botó">Fes-me clic també!</button> + <button data-message="Això és del tercer botó">I a mi!</button> +</p> + +<h2>Formulari</h2> + +<form> + <div> + <label for="nom">Entra el teu nom:</label> + <input type="text" id="nom" name="nom"> + </div> + <div> + <label for="edat">Entra la teva edat:</label> + <input type="text" id="edat" name="edat"> + </div> + <div> + <label for="mood">Tria el teu humor:</label> + <select id="humor" name="humor"> + <option>Feliç</option> + <option>Trist(a)</option> + <option>Enfadat/da</option> + <option>Preocupat/da</option> + </select> + </div> +</form></pre> + +<p>Això vol dir utilitzar adequadament enllaços, botons, elements de formulari i etiquetes (inclòs l'element {{htmlelement("label")}}) per als controls de formulari).</p> + +<p>Tanmateix, es torna a donar el cas que la gent de vegades fa coses estranyes amb HTML. Per exemple, de vegades veieu botons marcats amb {{htmlelement("div")}}s, per exemple:</p> + +<pre class="brush: html example-bad notranslate"><div data-message="Això és del primer botó">Fes-me clic!</div> +<div data-message="Això és del segon botó">Fes-me clic també!</div> +<div data-message="Això és del tercer botó">I a mi!</div></pre> + +<p>Però no s’aconsella l’ús d’aquest codi: perdeu immediatament l’accessibilitat nativa de teclat que hauríeu tingut si acabeu d’utilitzar elements {{htmlelement("button")}}), a més de no obtenir cap estil CSS predeterminat.</p> + +<h4 id="Tornar_a_afegir_laccessibilitat_de_teclat">Tornar a afegir l'accessibilitat de teclat</h4> + +<p>Afegir aquests avantatges requereix una mica de feina (podeu veure un exemple al nostre exemple <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a>; també podeu veure el <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">codi font</a>). Aquí hem donat als nostres botons falsos amb <code><div></code> la possibilitat d'agafar el focus (inclòs mitjançant la tecla de tabulació) donant a cadascun l'atribut <code>tabindex="0"</code>:</p> + +<pre class="brush: html notranslate"><div data-message="Això és del primer botó" tabindex="0">Fes-me clic!</div> +<div data-message="Això és del segon botó" tabindex="0">Fes-me clic també!</div> +<div data-message="Això és del tercer botó" tabindex="0">I a mi!</div></pre> + +<p>Bàsicament, l'atribut {{htmlattrxref("tabindex")}} està pensat principalment per permetre que els elements tabulables puguin tenir un ordre de tabulació personalitzat (especificat en ordre numèric positiu), en comptes del seu ordre de codi per defecte. Aquesta és gairebé sempre una mala idea, ja que pot provocar confusions importants. Utilitzeu-la només si ho necessiteu de debò; per exemple, si el disseny mostra les coses en un ordre visual molt diferent al codi font i voleu que les coses funcionin de manera més lògica. Hi ha dues opcions més per a tabindex:</p> + +<ul> + <li><code>tabindex = "0"</code>: tal com s'ha indicat anteriorment, aquest valor permet que els elements que normalment no són tabulables passin a ser tabulables. Aquest és el valor més útil de <code>tabindex</code>.</li> + <li><code>tabindex = "- 1"</code>: això permet que els elements no tabulables normalment puguin rebre el focus per programació, per exemple, mitjançant JavaScript o com a objectiu dels enllaços.</li> +</ul> + +<p>Tot i que l’addició anterior ens permet arribar als botons amb lña tecla de tabulació, no ens permet activar-los mitjançant la tecla Enter / Retorn. Per fer-ho, hem hagut d'afegir el següent truc amb JavaScript:</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">13</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// La tecla Enter/Return</span> + document<span class="punctuation token">.</span>activeElement<span class="punctuation token">.</span><span class="function token">click</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<p>Aquí afegim un 'listener' (oient) a l'objecte <code>document</code> per detectar quan s'ha premut un botó al teclat. Comprovem quin botó s'ha premut mitjançant la propietat <code>keyCode</code> de l'objecte d'esdeveniment; si és el codi de tecla que coincideix amb Return / Enetr, executem la funció emmagatzemada al controlador <code>onclick</code> del botó mitjançant <code>document.activeElement.click()</code>. <code>activeElement</code> ens proporciona l'element que té actualment el focus a la pàgina.</p> + +<p>Això suposa un munt de molèsties addicionals per recuperar la funcionalitat. I segurament hi haurà altres problemes. Millor utilitzar l’element adequat per al treball adequat en primer lloc.</p> + +<h4 id="Etiquetes_de_text_significatives">Etiquetes de text significatives</h4> + +<p>Les etiquetes de text dels controls de la interfície d’usuari són molt útils per a tots els usuaris, però fer-les correctament és particularment important per als usuaris amb discapacitat.</p> + +<p>Assegureu-vos que les etiquetes de text del botó i de l'enllaç siguin comprensibles i distintives. No només utilitzeu "Feu clic aquí" per a les etiquetes, ja que els usuaris del lector de pantalla de vegades obtenen una llista de botons i controls de formulari. La següent captura de pantalla mostra el que VoiceOver llista els nostres controls en Mac.</p> + +<p><img alt="Form controls. Click me! button. Click me too! button. And me! button. Fill me in: edit text. Fill me in: edit text. Happy collapsed pop up button. Happy menu item. Sad menu item. Angry menu item. Worried menu item." src="https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png" style="display: block; height: 604px; margin: 0px auto; width: 802px;"></p> + +<p>Assegureu-vos que les vostres etiquetes tinguin sentit fora del context, llegides per si mateixes, així com en el context del paràgraf en què es troben. Per exemple, el següent mostra un exemple de text de bon enllaç:</p> + +<pre class="brush: html example-good notranslate"><p>Les balenes són criatures realment fantàstiques. <a href="whales.html">Aprèn més sobre les balenes</a>.</p></pre> + +<p>Però això és mal text d'enllaç:</p> + +<pre class="brush: html example-bad notranslate"><p>Les balenes són criatures realment fantàstiques. Per tal d'aprendre més sobre les balenes, <a href="whales.html">fes clic aquí</a>.</p></pre> + +<div class="note"> +<p><strong>Nota</strong>: Podeu trobar molt més sobre la implementació d’enllaços i les pràctiques recomanades al nostre article Creació d’enllaços. També podeu veure alguns exemples bons i dolents a <a href="https://mdn.github.io/learning-area/accessibility/html/good-links.html">good-links.html</a> i <a href="https://mdn.github.io/learning-area/accessibility/html/bad-links.html">bad-links.html</a>.</p> +</div> + +<p>Les etiquetes del formulari també són importants per donar-vos una idea del que heu d’introduir a cada entrada del formulari. El següent sembla un exemple prou raonable:</p> + +<pre class="brush: html example-bad notranslate">Entra el teu nom: <input type="text" id="nom" name="nom"></pre> + +<p>Tot i això, això no és tan útil per a usuaris amb discapacitat. No hi ha res a l’exemple anterior per associar l’etiqueta sense ambigüitats amb l’entrada del formulari i deixar clar com emplenar-la si no la podeu veure. Si hi accediu amb alguns lectors de pantalla, podria ser que només se us donés una descripció seguint la línia de "edita text".</p> + +<p>El següent és un exemple molt millor:</p> + +<pre class="brush: html example-good notranslate"><div> + <label for="nom">Entra el teu nom:</label> + <input type="text" id="nom" name="nom"> +</div></pre> + +<p>Amb un codi com aquest, l'etiqueta s'associarà clarament a l'entrada; la descripció serà més semblant a "Entra el teu nom nom: editeu text".<br> + </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14337/voiceover-good-form-label.png" style="display: block; margin: 0 auto;"></p> + +<p>Com a avantatge addicional, a la majoria de navegadors si associeu una etiqueta amb una entrada de formulari, podeu fer clic a l’etiqueta per seleccionar o activar l’element de formulari. Això proporciona a l’entrada una zona d’èxit més gran, cosa que facilita la selecció.</p> + +<div class="note"> +<p><strong>Nota</strong>: podeu veure alguns exemples de formularis bons i dolents a <a href="https://mdn.github.io/learning-area/accessibility/html/good-form.html">good-form.html</a> i <a href="https://mdn.github.io/learning-area/accessibility/html/bad-form.html">bad-form.html</a>.</p> +</div> + +<ol> +</ol> + +<h2 id="Taules_de_dades_accessibles">Taules de dades accessibles</h2> + +<p>Es pot escriure una taula de dades bàsica amb un marcatge molt senzill, per exemple:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <td>Nom</td> + <td>Edat</td> + <td>Gènere</td> + </tr> + <tr> + <td>Gabriel</td> + <td>13</td> + <td>Masculí</td> + </tr> + <tr> + <td>Elva</td> + <td>8</td> + <td>Femení</td> + </tr> + <tr> + <td>Freida</td> + <td>5</td> + <td>Femení</td> + </tr> +</table></pre> + +<p>Però això té problemes: un usuari del lector de pantalla no pot associar files o columnes juntes com a agrupacions de dades. Per fer-ho, hauria de saber quines són les cel·les amb capçaleres i si encapçalen files, columnes, etc. Això només es pot fer visualment per a la taula anterior (consulteu <a href="https://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a> i proveu l'exemple vosaltres mateixos).</p> + +<p>Vegeu ara el nostre <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">exemple de taula de grups de punk</a>: podeu veure algunes ajudes d’accessibilitat en funcionament:</p> + +<ul> + <li>Les capçaleres de les taules es defineixen mitjançant elements {{htmlelement("th")}}); també podeu especificar si són capçaleres per a files o columnes mitjançant l'atribut <code>scope</code>. Això us proporciona grups complets de dades que els lectors de pantalla poden consumir com a unitats individuals.</li> + <li>L'element {{htmlelement("caption")}}} i l'atribut <code>summary</code> de <code><table></code> fan tasques similars: actuen com a text alternatiu per a una taula, donant a l'usuari de lector de pantalla un resum ràpid i útil del contingut de la taula. Generalment es prefereix l'element <code><caption></code>, ja que fa que el seu contingut és accessible també per als usuaris vidents, que també poden trobar-los útils. Realment no necessiteu les dues coses.</li> +</ul> + +<p>Nota: Consulteu l'article sobre funcions avançades i accessibilitat de la nostra taula HTML per obtenir més informació sobre les taules de dades accessibles.</p> + +<div class="note"> +<p><strong>Nota</strong>: Consulteu el nostre article <a href="/ca/docs/Learn/HTML/Taules_HTML/Taula_HTML_caracter%C3%ADstiques_avan%C3%A7ades_i_laccessibilitat">Taules HTML: característiques avançades i accessibilitat</a> per saber més sobre les taules de dades accessibles.</p> +</div> + +<h2 id="Alternatives_de_text">Alternatives de text</h2> + +<p>Mentre que el contingut textual és intrínsecament accessible, no es pot dir el mateix necessàriament del contingut multimèdia: les persones amb discapacitat visual no poden veure el contingut d’imatges ni de vídeo i les persones amb discapacitat auditiva no poden sentir l'àudio. Cobrim detalladament el contingut de vídeo i àudio a <a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a>, però per a aquest article analitzarem l'accessibilitat de l'humil element {{htmlelement ("img")}}.</p> + +<p>Tenim un exemple senzill escrit, <a href="https://mdn.github.io/learning-area/accessibility/html/accessible-image.html">accessible-image.html</a>, que inclou quatre còpies de la mateixa imatge:</p> + +<pre class="notranslate"><img src="dinosaur.png"> + +<img src="dinosaur.png" + alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> + +<img src="dinosaur.png" + alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." + title="The Mozilla red dinosaur"> + + +<img src="dinosaur.png" aria-labelledby="dino-label"> + +<p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p> +</pre> + +<p>La primera imatge, quan la veu un lector de pantalla, no ofereix realment molta ajuda a l'usuari: VoiceOver, per exemple, llegeix "/dinosaur.png, imatge". Es llegeix el nom del fitxer per intentar proporcionar ajuda. En aquest exemple, l'usuari almenys sabrà que és un dinosaure d'alguna mena, però sovint es poden penjar fitxers amb noms de fitxers generats automàticament (per exemple, des d'una càmera digital) i és probable que aquests noms de fitxers no proporcionin context al contingut de la imatge.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> és per això que no heu d’incloure mai contingut de text dins d’una imatge; els lectors de pantalla simplement no hi poden accedir. També hi ha altres desavantatges: no podeu seleccionar-lo ni copiar-lo / enganxar-lo. Simplement no ho feu!</p> +</div> + +<p>Quan un lector de pantalla troba la segona imatge, llegeix l’atribut alt complet: "Un tiranosaure vermell Rex: un dinosaure de dues potes dret com un humà, amb braços petits i un cap gran amb moltes dents afilades".</p> + +<p>Això posa de manifest la importància d’utilitzar no només noms de fitxers significatius en cas que l’anomenat <strong>text alternatiu</strong> no estigui disponible, sinó també assegurar-se que el text alternatiu s’ofereixi en atributs <code>alt</code> sempre que sigui possible. Tingueu en compte que el contingut de l'atribut <code>alt</code> sempre ha de proporcionar una representació directa de la imatge i del que transmet visualment. Aquí no s’hi hauria d’incloure cap coneixement personal ni cap descripció addicional, ja que no és útil per a persones que no s’han trobat amb la imatge abans.</p> + +<p>Una cosa a tenir en compte és si les vostres imatges tenen significat dins del vostre contingut o si són exclusivament per a la decoració visual i, per tant, no tenen cap sentit. Si són decoratives, és millor escriure un text buit com a valor de l'atribut <code>alt</code> (ho veurem més endavant en aquest mateix article) o simplement incloure'ls a la pàgina com a imatges de fons CSS.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Llegiu <a href="/ca/docs/Learn/HTML/Multim%C3%A8dia_i_incrustar/Images_in_HTML">Imatges en HTML</a> i <a href="/ca/docs/Learn/HTML/Multim%C3%A8dia_i_incrustar/Imatges_sensibles">Imatges responsives</a> per obtenir molta més informació sobre la implementació d'imatges i les pràctiques recomanades.</p> +</div> + +<p>Si voleu proporcionar informació contextual addicional, l'heu de posar al text que envolta la imatge o dins d'un atribut de títol, tal com es mostra a continuació. En aquest cas, la majoria de lectors de pantalla llegiran el text alternatiu, l'atribut <code>title</code> i el nom del fitxer. A més, els navegadors mostren el text del títol quan es passa el ratolí per sobre.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png" style="display: block; margin: 0 auto;"></p> + +<p>Fem una altra ullada ràpida al quart mètode:</p> + +<pre class="brush: html notranslate"><img src="dinosaur.png" aria-labelledby="dino-label"> + +<p id="dino-label">The Mozilla red Tyrannosaurus ... </p></pre> + +<p>En aquest cas, no utilitzem en absolut l’atribut <code>alt</code>; en canvi, hem presentat la nostra descripció de la imatge com a paràgraf de text normal, li hem donat un id i, a continuació, hem utilitzat l’atribut <code>aria-labelledby</code> per referir-nos a aquest id, que fa que els lectors de pantalla utilitzin aquest paràgraf com a text alternatiu / etiqueta per a aquesta imatge. Això és especialment útil si voleu utilitzar el mateix text com a etiqueta per a diverses imatges, cosa que no és possible amb <code>alt</code>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> <code>aria-labelledby</code> forma part de l'especificació <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a>, que permet als desenvolupadors afegir semàntica addicional al seu marcatge per millorar l'accessibilitat del lector de pantalla quan sigui necessari. Per obtenir més informació sobre com funciona, llegiu el nostre article <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA Basics</a>.</p> +</div> + +<h3 id="Daltres_mecanismes_de_text_alternatiu">D'altres mecanismes de text alternatiu</h3> + +<p>Les imatges també tenen un altre mecanisme disponible per proporcionar text descriptiu. Per exemple, hi ha un atribut <code>longdesc</code> destinat a apuntar a un document web independent que conté una descripció ampliada de la imatge, per exemple:</p> + +<pre class="brush: html notranslate"><img src="dinosaur.png" longdesc="dino-info.html"></pre> + +<p>Sembla una bona idea, especialment per a infografies i grans gràfics amb molta informació, que potser es podrien representar com una taula de dades accessible (n'hem parlat en aquest mateix article). No obstant això, <code>longdesc</code> no és compatible amb tots els lectors de pantalla i el contingut és completament inaccessible per als usuaris que no utilitzin lectors de pantalla. Sens dubte, és molt millor incloure la descripció llarga a la mateixa pàgina que la imatge o enllaçar-la amb un enllaç normal.</p> + +<p>HTML5 inclou dos elements nous: {{htmlelement("figure")}} i {{htmlelement("figcaption")}} que se suposa que associen una figura d'algun tipus (pot ser qualsevol cosa, no necessàriament una imatge) amb un títol de figura:</p> + +<pre class="brush: html notranslate"><figure> + <img src="dinosaur.png" alt="The Mozilla Tyrannosaurus"> + <figcaption>A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</figcaption> +</figure></pre> + +<p>Malauradament, la majoria dels lectors de pantalla sembla que encara no associen els subtítols de figures amb les seves figures. Dit això, l'estructura de l'element és útil per a aplicar-hi estil CSS; a més, proporciona una manera de col·locar una descripció de la imatge al costat al codi font.</p> + +<h3 id="Atributs_alt_buits">Atributs alt buits</h3> + +<pre class="brush: html notranslate"><h3> + <img src="article-icon.png" alt=""> + Tyrannosaurus Rex: the king of the dinosaurs +</h3></pre> + +<p>Pot haver-hi ocasions en què s’inclogui una imatge al disseny d’una pàgina, però el seu propòsit principal sigui la decoració visual. Notareu a l’exemple de codi anterior que l’atribut <code>alt</code> de la imatge és buit: es tracta de fer que els lectors de pantalla reconeguin la imatge, però no intentin descriure-la (en lloc d’això, només dirien “imatge” o alguna cosa similar).</p> + +<p>La raó per utilitzar un <code>alt</code> buit en lloc de no incloure'l és perquè molts lectors de pantalla anuncien tota la URL de la imatge si no es proporciona cap <code>alt</code>. A l'exemple anterior, la imatge actua com a decoració visual de l'encapçalament amb què s'associa. En casos com aquest, i en els casos en què una imatge només sigui decorativa i no tingui cap valor de contingut, hauríeu d'incloure un <code>alt</code> buit als elements <code>img</code>. Una altra alternativa és utilitzar l'atribut aria <code>role="presentation"</code>, ja que també impedeix que els lectors de pantalla llegeixin el text alternatiu.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> si és possible, heu d’utilitzar CSS per mostrar imatges només decoratives.</p> +</div> + +<h2 id="Més_sobre_els_enllaços">Més sobre els enllaços</h2> + +<p>Els enllaços (l'element <code><a></code> amb un atribut <code>href</code>), en funció de com s'utilitzin, poden ajudar o perjudicar l'accessibilitat. Per defecte, els enllaços són accessibles en aparença. Poden millorar l’accessibilitat ajudant l’usuari a navegar ràpidament a les diferents seccions d’un document. També poden perjudicar l’accessibilitat si s’elimina l’estil accessible o si JavaScript fa que es comportin de manera inesperada.</p> + +<h4 id="Estil_d’enllaç">Estil d’enllaç</h4> + +<p>Per defecte, els enllaços són visualment diferents de la resta del text en color i en decoració de text, amb els enllaços de color blau i subratllats per defecte, de color porpra i subratllats si s'han visitat, i amb un anell de focus quan reben el focus del teclat.</p> + +<p>No s’ha d’utilitzar el color com a únic mètode per distingir els enllaços del contingut que no enllaça. El color del text de l’enllaç, com tot el text, ha de diferir significativament del color de fons (<a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast">un contrast de 4,5:1</a>). A més, els enllaços han de ser significativament diferents del text que no enllaça. Amb un requisit de contrast mínim de 3:1 entre el text de l'enllaç i el text circumdant i entre els estats predeterminat, visitat i focus / actiu i un contrast de 4:5 entre tots els colors d'estat i el color de fons.</p> + +<h3 id="Esdeveniments_onclick">Esdeveniments onclick</h3> + +<p>Sovint s'abusa de les etiquetes d'ancoratge amb l'esdeveniment <code>onclick</code> per crear pseudo-botons configurant <strong>href</strong> a <code>"#"</code> o <code>"javascript:void(0)"</code> per evitar que la pàgina s'actualitzi.</p> + +<p>Aquests valors causen un comportament inesperat en copiar o arrossegar enllaços, en obrir enllaços en una pestanya o finestra nova, en afegir adreces d'interès i, quan el JavaScript encara s'està descarregant, es produeix un error o es desactiva. Això també transmet una semàntica incorrecta a les tecnologies d'assistència (per exemple, lectors de pantalla). En aquests casos, es recomana utilitzar un {{HTMLElement("button")}}. En general, només heu d'utilitzar un àncora per a la navegació mitjançant un URL adequat.</p> + +<h3 id="Enllaços_externs_i_enllaços_a_recursos_no_HTML">Enllaços externs i enllaços a recursos no HTML</h3> + +<p>Els enllaços que s'obrin en una nova pestanya o finestra mitjançant la declaració <code>target="_ blank"</code> i els enllaços el valor <code>href</code> dels quals apunti a un recurs de fitxer han d'incloure un indicador sobre el comportament que es produirà quan s'activi l'enllaç.</p> + +<p>Les persones amb problemes de visió baixa, que naveguen amb l'ajut de tecnologies de lectura de pantalla o que tenen problemes cognitius, poden confondre's quan s'obre inesperadament la nova pestanya, finestra o aplicació. És possible que versions antigues del programari de lectura de pantalla ni tan sols anunciïn el comportament.</p> + +<h4 id="Enllaç_que_obre_una_nova_pestanya_o_finestra">Enllaç que obre una nova pestanya o finestra</h4> + +<pre class="brush: html notranslate"><a target="_blank" href="https://www.wikipedia.org/">Wikipedia (opens in a new window)</a> +</pre> + +<h4 id="Enllaç_a_un_recurs_no_HTML">Enllaç a un recurs no HTML</h4> + +<pre class="brush: html notranslate"><a target="_blank" href="2017-annual-report.ppt">2017 Annual Report (PowerPoint)</a> +</pre> + +<p>Si s'utilitza una icona en comptes de text per assenyalar aquest tipus de comportament d'enllaç, assegureu-vos que inclou una {{HTMLAttrxRef("alt", "img", "descripció alternativa", "true")}}.</p> + +<ul> + <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.2 explanations</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200: Opening new windows and tabs from a link only when necessary | W3C Techniques for WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window | W3C Techniques for WCAG 2.0</a></li> +</ul> + +<h3 id="Enllaços_de_salt">Enllaços de salt</h3> + +<p>Un enllaç de salt, també conegut com a "skipnav", és un element situat tan a prop com sigui possible de l'element d'obertura {{HTMLElement ("body")}} que enllaça amb el començament del contingut principal de la pàgina. Aquest enllaç permet saltar el contingut que es repeteix en diverses pàgines d’un lloc web, com ara la capçalera d’un lloc web i la navegació principal.</p> + +<p>Els enllaços de salt són especialment útils per a les persones que naveguen amb l'ajuda de tecnologies d'assistència, com ara controls de commutació, ordres de veu o les varetes de cap / boca, on el fet de moure's per enllaços repetitius pot ser una tasca laboriosa.</p> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li> + <li><a href="https://www.a11yproject.com/posts/2013-05-11-skip-nav-links/">How–to: Use Skip Navigation links - The A11Y Project</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Proximitat">Proximitat</h3> + +<p>Les grans quantitats de contingut interactiu (incloses les àncores) situades molt a prop les unes de les altres haurien de tenir espai inserit per separar-les. Aquest espaiat és beneficiós per a les persones que pateixen problemes de control motor fi i poden activar accidentalment el contingut interactiu equivocat durant la navegació.</p> + +<p>Es pot crear espai mitjançant propietats CSS com ara {{CSSxRef ("margin")}}.</p> + +<ul> + <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem - Axess Lab</a></li> +</ul> + +<h2 id="Posa_a_prova_les_teves_habilitats!">Posa a prova les teves habilitats!</h2> + +<p>Heu arribat al final d’aquest article, però recordeu la informació més important? Consulteu <a href="/en-US/docs/Learn/Accessibility/Test_your_skills:_HTML_accessibility">Test your skills: HTML Accessibility</a> per verificar que heu conservat aquesta informació abans de continuar.</p> + +<h2 id="Resum">Resum</h2> + +<p>Ara hauríeu de tenir un bon coneixement de l’escriptura d’HTML accessible per a la majoria de les ocasions. El nostre article de fonaments de WAI-ARIA ajudarà a omplir els buits d’aquest coneixement, però aquest article s’ha ocupat dels conceptes bàsics. A continuació, explorarem CSS i JavaScript i com es veu afectada l’accessibilitat pel seu bon o mal ús.</p> + +<p>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> +</ul> |