diff options
Diffstat (limited to 'files/ca/learn/accessibility')
-rw-r--r-- | files/ca/learn/accessibility/accessibility_troubleshooting/index.html | 122 | ||||
-rw-r--r-- | files/ca/learn/accessibility/css_and_javascript/index.html | 355 | ||||
-rw-r--r-- | files/ca/learn/accessibility/html/index.html | 596 | ||||
-rw-r--r-- | files/ca/learn/accessibility/index.html | 77 | ||||
-rw-r--r-- | files/ca/learn/accessibility/what_is_accessibility/index.html | 212 |
5 files changed, 0 insertions, 1362 deletions
diff --git a/files/ca/learn/accessibility/accessibility_troubleshooting/index.html b/files/ca/learn/accessibility/accessibility_troubleshooting/index.html deleted file mode 100644 index 170f46a570..0000000000 --- a/files/ca/learn/accessibility/accessibility_troubleshooting/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: 'Avaluació: solució de problemes d''accessibilitat' -slug: Learn/Accessibility/Accessibility_troubleshooting -translation_of: Learn/Accessibility/Accessibility_troubleshooting ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div> - -<p class="summary">A l'avaluació d'aquest mòdul, us presentem un lloc senzill amb diversos problemes d'accessibilitat que haureu de diagnosticar i solucionar.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Requisits previs:</th> - <td>Coneixement bàsic d'informàtica, comprensió bàsica d’HTML, CSS i JavaScript, <a href="/ca/docs/Learn/Accessibility">comprensió dels articles anteriors del curs</a>.</td> - </tr> - <tr> - <th scope="row">Objectiu:</th> - <td>Posar a prova els coneixements bàsics dels fonaments d'accessibilitat.</td> - </tr> - </tbody> -</table> - -<h2 id="Punt_de_partida">Punt de partida</h2> - -<p>Per començar aquesta avaluació, heu d'agafar el <a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">ZIP que conté els fitxers que formen l'exemple</a>. Descomprimiu el contingut en un directori nou en algun lloc de l'ordinador local.</p> - -<p>Com a alternativa, podeu fer servir un lloc com <a href="https://glitch.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a> per fer la vostra avaluació. Podeu enganxar l'HTML, CSS i JavaScript en un d'aquests editors en línia. Si l'editor en línia que utilitzeu no té un panell CSS / JS separat, no dubteu a posar-los en elements <code><style></code> / <code><script></code> adequats.</p> - -<p>El lloc d'avaluació acabat hauria de ser així:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p> - -<p>Veureu algunes diferències / problemes amb la visualització de l’estat inicial de l’avaluació; això es deu principalment a les diferències en el marcatge, que al seu torn provoquen alguns problemes d’estil, ja que el CSS no s’aplica correctament. No us preocupeu, solucionareu aquests problemes a les properes seccions.</p> - -<div class="blockIndicator note"> -<p><strong>Nota:</strong> si us quedeu atrapats, demaneu-nos ajuda; consulteu la secció {{anch("Avaluació o ajuda addicional")}} a la part inferior d'aquesta pàgina.</p> -</div> - -<h2 id="Brífing_del_projecte">Brífing del projecte</h2> - -<p>Per a aquest projecte, se us presenta un lloc de natura fictícia que mostra un article "factual" sobre els óssos. Tal com està, té diversos problemes d’accessibilitat: la vostra tasca és explorar el lloc existent i solucionar-los al màxim de les vostres capacitats, responent a les preguntes que es donen a continuació.</p> - -<h3 id="Color">Color</h3> - -<p>El text és difícil de llegir a causa de l’esquema de colors actual. Podeu fer una prova del contrast de color actual (text / fons), informar dels resultats de la prova i després corregir-la canviant els colors assignats?</p> - -<h3 id="HTML_semàntic">HTML semàntic</h3> - -<ol> - <li>El contingut encara no és gaire accessible: informeu del que passa quan intenteu navegar-hi mitjançant un lector de pantalla.</li> - <li>Podeu actualitzar el text de l'article per facilitar la navegació dels usuaris de lectors de pantalla?</li> - <li>La part del menú de navegació del lloc (marcada per <code><div class = "nav"> </div></code>) es podria fer més accessible posant-la en un element semàntic HTML5 adequat. A quin s'ha d'actualitzar? Feu l'actualització.</li> -</ol> - -<div class="blockIndicator note"> -<p><strong>Nota:</strong> haureu d'actualitzar els selectors de regles CSS que donen estil a les etiquetes als seus equivalents adequats per als encapçalaments semàntics. Un cop afegiu elements de paràgraf, notareu que l'estil té un aspecte millor.</p> -</div> - -<h3 id="Les_imatges">Les imatges</h3> - -<p>Actualment, les imatges no són accessibles als usuaris de lectors de pantalla. Podeu solucionar-ho?</p> - -<h3 id="El_reproductor_dàudio">El reproductor d'àudio</h3> - -<ol> - <li>El reproductor <code><audio></code> no és accessible per a persones amb discapacitat auditiva (sordes). Podeu afegir algun tipus d'alternativa accessible per a aquests usuaris?</li> - <li>El reproductor <code><audio></code> no és accessible per a aquells que utilitzen navegadors antics que no admeten àudio HTML5. Com es pot permetre que continuïn accedint a l'àudio?</li> -</ol> - -<h3 id="Els_formularis"><font>Els formularis</font></h3> - -<ol> - <li>A l'element <code><input></code> del formulari de cerca de la part superior se li podria posar una etiqueta, però no volem afegir una etiqueta de text visible que pugui malmetre el disseny i que no sigui realment necessària per als usuaris vidents. Com es pot afegir una etiqueta que només sigui accessible per als lectors de pantalla?</li> - <li>Els dos elements <code><input></code> del formulari de comentaris tenen etiquetes de text visibles, però no s’associen sense ambigüitats amb les seves etiquetes; com ho podem aconseguir? Tingueu en compte que també haureu d’actualitzar algunes de les regles CSS.</li> -</ol> - -<h3 id="El_control_de_mostrar_amagar_comentaris">El control de mostrar / amagar comentaris</h3> - -<p>El botó de control de mostrar / amagar comentaris no és accessible per teclat actualment. Es pot fer accessible al teclat, tant pel que fa a donar-hi focus mitjançant la tecla de tabulació com per activar-lo amb la tecla de retorn?</p> - -<h3 id="La_taula">La taula</h3> - -<p>Actualment, la taula de dades no és gaire accessible: és difícil per als usuaris de lectors de pantalla associar files i columnes de dades, i la taula tampoc no té cap mena de resum per deixar clar què mostra. Podeu afegir algunes funcions al vostre codi HTML per solucionar aquest problema?</p> - -<h3 id="Altres_consideracions">Altres consideracions?</h3> - -<p>Podeu enumerar dues idees més per millorar que faran que el lloc web sigui més accessible?</p> - -<h2 id="Avaluació_o_ajuda_addicional">Avaluació o ajuda addicional</h2> - -<p>Si voleu que el vostre treball sigui avaluat o esteu atrapats i voleu demanar ajuda:</p> - -<ol> - <li>Poseu el vostre treball en un editor compartible en línia com CodePen, jsFiddle o Glitch.</li> - <li>Escriviu un missatge demanant avaluació i/o ajuda a <a href="https://discourse.mozilla.org/c/mdn/learn">la categoria d’aprenentatge del fòrum Discourse de la MDN</a>. La vostra publicació ha d'incloure: - <ul> - <li>Un títol descriptiu com ara "Avaluació per solucionar problemes d'accessibilitat".</li> - <li>Detalls del que ja heu provat i del que voleu que fem. P.ex. si esteu atrapats i necessiteu ajuda o voleu una valoració. - <ul> - <li>Un enllaç a l'exemple que vulgueu que s'avalui o amb el qual necessiteu ajuda en un editor compartible en línia (tal com s'esmenta al pas 1 anterior). Aquesta és una bona pràctica a adquirir: és molt difícil ajudar algú amb un problema de codi si no podeu veure el seu codi.</li> - <li>Un enllaç a la pàgina de tasca o avaluació real, de manera que podem trobar la pregunta amb la qual voleu obtenir ajuda.</li> - </ul> - </li> - </ul> - </li> -</ol> - -<p><font>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</font></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> diff --git a/files/ca/learn/accessibility/css_and_javascript/index.html b/files/ca/learn/accessibility/css_and_javascript/index.html deleted file mode 100644 index 28aa1b9651..0000000000 --- a/files/ca/learn/accessibility/css_and_javascript/index.html +++ /dev/null @@ -1,355 +0,0 @@ ---- -title: Bones pràctiques d'accessibilitat en CSS i JavaScript -slug: Learn/Accessibility/CSS_and_JavaScript -translation_of: Learn/Accessibility/CSS_and_JavaScript ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> - -<p class="summary">El CSS i el JavaScript, quan s’utilitzen correctament, també tenen el potencial de permetre experiències web accessibles ... o poden perjudicar significativament l’accessibilitat si s’utilitzen malament. Aquest article descriu algunes de les pràctiques recomanades amb CSS i JavaScript que s’han de tenir en compte per garantir que fins i tot el contingut complex sigui el més accessible possible.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Requisits previs:</th> - <td>Alfabetització bàsica en informàtica, comprensió bàsica d’HTML, CSS i JavaScript, i comprensió de <a href="/ca/docs/Learn/Accessibility/Que_es_accessibilitat">què és l’accessibilitat.</a></td> - </tr> - <tr> - <th scope="row">Objectiu:</th> - <td>Familiaritzar-vos amb l’ús adequat de CSS i JavaScript als vostres documents web per maximitzar l’accessibilitat i no restar-li importància.</td> - </tr> - </tbody> -</table> - -<h2 id="CSS_i_JavaScript_són_accessibles">CSS i JavaScript són accessibles?</h2> - -<p>CSS i JavaScript no tenen la mateixa importància immediata per a l’accessibilitat que l’HTML, però tot i això poden ajudar o perjudicar l’accessibilitat, segons com s’utilitzin. Dit d'una altra manera, és important que tingueu en compte alguns consells sobre bones pràctiques per assegurar-vos que l'ús de CSS i JavaScript no arruïni l'accessibilitat dels vostres documents.</p> - -<h2 id="CSS">CSS</h2> - -<p>Comencem considerant CSS.</p> - -<h3 id="Semàntica_correcta_i_expectatives_dels_usuaris">Semàntica correcta i expectatives dels usuaris</h3> - -<p>És possible utilitzar CSS per fer que qualsevol element HTML sembli qualsevol cosa, però això no vol dir que ho hàgiu de fer. Tal com hem esmentat amb freqüència en el nostre article <a href="/ca/docs/Learn/Accessibility/HTML">HTML: Una bona base per a l'accessibilitat</a>, heu d’utilitzar l’element semàntic adequat per a cada funcionalitat, sempre que sigui possible. Si no ho feu, pot causar problemes de confusió i usabilitat per a tothom, però sobretot per als usuaris amb discapacitat. L’ús de semàntica correcta té molt a veure amb les expectatives dels usuaris: els elements tenen un aspecte i un comportament determinats segons la seva funcionalitat, i els usuaris esperen aquestes convencions habituals.</p> - -<p>Per exemple, un usuari de lector de pantalla no pot navegar per una pàgina a través dels seus elements d’encapçalament si el desenvolupador no ha utilitzat adequadament elements d’encapçalament per marcar el contingut. De la mateixa manera, un encapçalament perd el seu propòsit visual si hi apliqueu estil perquè no sembli un encapçalament.</p> - -<h4 id="Estructura_de_contingut_textual_estàndard">Estructura de contingut textual "estàndard"</h4> - -<p>Encapçalaments, paràgrafs, llistes — el contingut bàsic del text de la vostra pàgina:</p> - -<pre class="brush: html notranslate"><h1>Encapçalament</h1> - -<p>Paràgraf</p> - -<ul> - <li>La meva llista</li> - <li>té dos ítems.</li> -</ul></pre> - -<p>Un CSS típics pot tenir aquest aspecte:</p> - -<pre class="brush: css notranslate">h1 { - font-size: 5rem; -} - -p, li { - line-height: 1.5; - font-size: 1.6rem; -}</pre> - -<p>Hauríeu de:</p> - -<ul> - <li>Seleccionar mides de lletra, alçades de línia, espaiat entre lletres, etc. raonables per fer que el vostre text sigui lògic, llegible i còmode de llegir.</li> - <li>Assegurar-vos que els títols destaquen del cos de text, normalment grans i en negreta, com l'estil predeterminat. Les vostres llistes haurien de semblar llistes.</li> - <li>El color del text hauria de contrastar bé amb el color de fons.</li> -</ul> - -<p>Consulteu <a href="/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Fonaments_de_text_HTML">Fonaments de text HTML </a>i <a href="/ca/docs/Learn/CSS/Estilitzar_text">Estilitzar text</a> per obtenir més informació.</p> - -<h4 id="Text_emfatitzat">Text emfatitzat</h4> - -<p>Marcatge en línia que confereix un èmfasi específic al text que embolcalla:</p> - -<pre class="brush: html notranslate"><p>L'aigua està <em>molt calenta</em>.</p> - -<p><span class="tlid-translation translation" lang="ca"><span title="">Les gotes d’aigua que es recullen a les superfícies s’anomenen <strong>condensació</strong>.</p></span></span> </pre> - -<p>Potser voldreu afegir un color simple al text emfatitzat:</p> - -<pre class="brush: css notranslate">strong, em { - color: #a60000; -}</pre> - -<p>Tot i això, poques vegades haureu d'aplicar estil als elements d’èmfasi de manera significativa. Les convencions estàndard del text en negreta i cursiva són molt reconeixibles i canviar l’estil pot provocar confusió. Per obtenir més informació sobre l’èmfasi, vegeu <a href="/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Fonaments_de_text_HTML#%C3%88mfasi_i_import%C3%A0ncia">Èmfasi i importància</a>.</p> - -<h4 id="Abreviatures">Abreviatures</h4> - -<p>Un element que permet associar una abreviatura, acrònim o inicialització a la seva expansió:</p> - -<pre class="brush: html notranslate"><p>El contingut web es marca fent servir <abbr title="Hypertext Markup Language">HTML</abbr>.</p></pre> - -<p>De nou, és possible que vulgueu donar-li estil de manera senzilla:</p> - -<pre class="brush: css notranslate">abbr { - color: #a60000; -}</pre> - -<p>La convenció d’estil reconeguda per a les abreviatures és un subratllat puntejat i no és prudent desviar-se’n significativament. Per obtenir més informació sobre les abreviatures, vegeu <a href="/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Format_de_text_avan%C3%A7at#Abreviatures">Abreviatures</a>.</p> - -<h4 id="Enllaços">Enllaços</h4> - -<p>Hiperenllaços — la manera d’arribar a nous llocs del web:</p> - -<pre class="brush: html notranslate"><p>Visiteu la <a href="https://www.mozilla.org">pàgina d'inici de Mozilla</a>.</p></pre> - -<p>A continuació es mostra un estil d’enllaços molt senzill:</p> - -<pre class="brush: css notranslate">a { - color: #ff0000; -} - -a:hover, a:visited, a:focus { - color: #a60000; - text-decoration: none; -} - -a:active { - color: #000000; - background-color: #a60000; -}</pre> - -<p>Les convencions d’enllaç estàndard són el subratllat i un color diferent (per defecte, el blau) en el seu estat estàndard, una altra variació de color quan l’enllaç s’ha visitat prèviament (per defecte: porpra) i un altre color quan l’enllaç està activat (per defecte: vermell). A més, el cursor canvia a una icona de punter quan es passa per sobre dels enllaços i l’enllaç rep un ressaltat quan està enfocat (per exemple, mitjançant la tecla de tabulació) o activat. La imatge següent mostra el destacat tant a Firefox (rodejat de punts) com a Chrome (rodejat de blau):</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14371/focus-highlight-firefox.png" style="display: block; height: 173px; margin: 0px auto; width: 319px;"></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14369/focus-highlight-chrome.png" style="display: block; height: 169px; margin: 0px auto; width: 309px;"></p> - -<p>Podeu ser creatius amb els estils d’enllaços, sempre que continueu donant informació als usuaris quan interactuen amb els enllaços. Definitivament, alguna cosa hauria de passar quan els estats canvien i no heu d’eliminar el cursor del punter ni el destacat (<em>outline</em>): tots dos són ajudes d’accessibilitat molt importants per a aquells que fan servir controls de teclat.</p> - -<h4 id="Elements_de_formulari">Elements de formulari</h4> - -<p>Elements que permeten als usuaris introduir dades als llocs web:</p> - -<pre class="brush: html notranslate"><div> - <label for="name">Entra el teu nom</label> - <input type="text" id="name" name="name"> -</div></pre> - -<p>Podeu veure un bon exemple de CSS al nostre exemple <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">form-css.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/css/form-css.html">vegeu-lo també en viu</a>).</p> - -<p>La majoria de CSS que escriureu per als formularis serà per donar dimensions als elements, alinear etiquetes i entrades i aconseguir que es vegin ordenats i polits.</p> - -<p>Tanmateix, no us heu de desviar massa de la retroalimentació visual esperada que reben els elements de formulari quan prenen el focus, que és bàsicament la mateixa que als enllaços (vegeu més amunt). Podeu definir els estats de <em>focus</em> i <em>hover</em> del formulari per fer que aquest comportament sigui més coherent entre navegadors o que s’adapti millor al disseny de la vostra pàgina, però no us en desfeu del tot: de nou, la gent confia en aquestes pistes per ajudar-los a saber què passa.</p> - -<h4 id="Taules">Taules</h4> - -<p>Taules per presentar dades tabulars.</p> - -<p>Podeu veure un bon exemple d'HTML i CSS de taula al nostre exemple <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/css/table-css.html">vegeu-lo també en viu</a>).</p> - -<p>Generalment, el CSS de les taules serveix perquè la taula s’adapti millor al vostre disseny i sigui menys lletja. És una bona idea assegurar-se que les capçaleres de les taules destaquen (normalment amb negreta) i fer servir les tires de zebra per fer més fàcil analitzar les diferents files.</p> - -<h3 id="Color_i_contrast_de_color">Color i contrast de color</h3> - -<p>Quan trieu un esquema de colors per al vostre lloc web, assegureu-vos que el color del text (primer pla) contrasta bé amb el color de fons. El vostre disseny pot semblar genial, però no és bo si les persones amb deficiències visuals com el daltonisme no poden llegir el vostre contingut.</p> - -<p>Hi ha una manera fàcil de comprovar si el vostre contrast és prou gran per no causar problemes. Hi ha una sèrie d’eines de comprovació de contrast en línia on podeu introduir els colors de primer pla i de fons per comprovar-los. Per exemple, el <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a> de WebAIM és senzill d'utilitzar i proporciona una explicació del que necessiteu per adaptar-vos als criteris WCAG sobre contrast de color.</p> - -<div class="blockIndicator note"> -<p><strong>Nota:</strong> una relació de contrast elevada també permetrà que tothom que faci servir un telèfon intel·ligent o una tauleta amb pantalla brillant pugui llegir millor les pàgines quan es troba en un entorn brillant, com ara al sol.</p> -</div> - -<p>Un altre consell és no confiar només en el color per a les indicacions/informació, ja que no servirà per a aquells que no poden veure el color. En lloc de marcar els camps de formulari obligatoris en vermell, per exemple, marqueu-los amb un asterisc i en vermell.</p> - -<h3 id="Amagar_coses">Amagar coses</h3> - -<p>Hi ha molts casos en què un disseny visual requereix que no es mostri tot el contingut alhora. Per exemple, a l’exemple del <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">quadre d’informació amb pestanyes</a> (vegeu el <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">codi font</a>), tenim tres panells d’informació, però els <a href="/ca/docs/Learn/CSS/Disseny_CSS/Posicionament">posicionem</a> els uns sobre els altres i proporcionem pestanyes on es pot fer clic per mostrar-les (també és accessible per al teclat: podeu utilitzar alternativament el tabulador i Return/Enter per a seleccionar-les).</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> - -<p>Als usuaris del lector de pantalla no els importa res d’això: estan satisfets amb el contingut sempre que tingui sentit l’ordre al codi font i puguin arribar a tot. El posicionament absolut (tal com s’utilitza en aquest exemple) es considera generalment com un dels millors mecanismes per amagar el contingut per obtenir efectes visuals, perquè no impedeix que els lectors de pantalla hi accedeixin.</p> - -<p>D'altra banda, no heu d'utilitzar {{cssxref ("visibility")}}:<code>hidden</code> o {{cssxref ("display")}}<code>: none</code>, perquè oculten el contingut als lectors de pantalla. Tret que, per descomptat, hi hagi una bona raó per la qual vulgueu que aquest contingut quedi amagat als lectors de pantalla.</p> - -<div class="blockIndicator note"> -<p><strong>Nota:</strong> <span class="subtitle"><a href="http://webaim.org/techniques/css/invisiblecontent/">Invisible Content Just for Screen Reader Users</a> </span>té molts més detalls útils sobre aquest tema.</p> -</div> - -<h3 id="Accepteu_que_els_usuaris_poden_sobreescriure_els_estils">Accepteu que els usuaris poden sobreescriure els estils</h3> - -<p>Els usuaris poden sobreescriure els vostres estils amb els seus propis estils personalitzats, per exemple:</p> - -<ul> - <li>Consulteu <a class="external external-icon" href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/" rel="noopener">How to use a custom style sheet (CSS) with Firefox,</a> de Sarah Maddox, una útil guia sobre com fer-ho manualment a Firefox i <a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/">How to use a custom style sheet (CSS) with Internet Explorer</a> d'Adrian Gordon per a les instruccions equivalents a Internet Explorer.</li> - <li>Probablement sigui més fàcil fer-ho mitjançant una extensió. Per exemple, l’extensió <em>Stylish</em> està disponible per a <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a>, <a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a>, <a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a> i <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a>.</li> -</ul> - -<p>Els usuaris poden fer-ho per diversos motius. Un usuari amb discapacitat visual pot voler fer més gran el text a tots els llocs web que visita o un usuari amb deficiència de color severa pot voler posar tots els llocs web en colors d’alt contrast que siguin fàcils de veure. Qualsevol que sigui la necessitat, hauríeu de sentir-vos còmodes amb això i fer que els vostres dissenys siguin prou flexibles perquè aquests canvis funcionin al vostre disseny. Per exemple, és possible que vulgueu assegurar-vos que la vostra àrea de contingut principal pot admetre text més gran (potser començarà a desplaçar-se per permetre que es vegi tot), i no només l’amagarà, ni es trencarà completament.</p> - -<h2 id="JavaScript">JavaScript</h2> - -<p>El JavaScript també pot trencar l'accessibilitat, segons com s'utilitzi.</p> - -<p>El JavaScript modern és un llenguatge potent i podem fer-hi moltes coses, avui dia, des de contingut senzill i actualitzacions d’interfície d’usuari fins a jocs 2D i 3D completament desenvolupats. No hi ha cap regla que digui que tot el contingut ha de ser accessible al 100% per a totes les persones; però cal que feu tot el que pugueu i que les vostres aplicacions siguin tan accessibles com sigui possible.</p> - -<p>El contingut i la funcionalitat senzills són fàcils de fer accessibles — per exemple, text, imatges, taules, formularis i botons que activen les funcions. Tal com hem vist al nostre article <a href="/ca/docs/Learn/Accessibility/HTML">HTML: Una bona base per l'accessibilitat</a>, les consideracions clau són:</p> - -<ul> - <li>Bona semàntica: utilitzar l'element adequat per a cada cosa. Per exemple, assegureu-vos que utilitzeu encapçalaments i paràgrafs, i elements {{htmlelement ("button")}} i {{htmlelement ("a")}}}.</li> - <li>Assegureu-vos que el contingut estigui disponible en forma textual, ja sigui directament com a contingut textual, amb bones etiquetes textuals per a elements de formulari o bé alternatives textuals, com ara text alternatiu per a imatges.</li> -</ul> - -<p>També vam veure un exemple de com utilitzar JavaScript per generar funcionalitats que hi falten - vegeu <a href="/ca/docs/Learn/Accessibility/HTML#Tornar_a_afegir_laccessibilitat_de_teclat">Tornar a afegir l'accessibilitat de teclat</a>. Això no és l'ideal; de fet, només hauríeu d'utilitzar l'element adequat per a cada feina, però demostra que és possible en situacions en què per alguna raó no es pot controlar el marcatge que s'utilitza. Una altra manera de millorar l’accessibilitat dels ginys JavaScript no semàntics és utilitzar WAI-ARIA per proporcionar semàntica addicional als usuaris de lectors de pantalla. El següent article també tractarà això en detall.</p> - -<p>Les funcionalitats complexes, com ara els jocs en 3D, no són tan fàcils de fer accessibles: un joc en 3D complex creat amb WebGL es mostrarà en un element {{htmlelement ("canvas")}}), que actualment no té cap capacitat per proporcionar alternatives textuals o altres informacions per a usuaris amb discapacitats visuals greus. És discutible que un joc d’aquest tipus tingui realment aquest grup de persones com a part del seu públic objectiu principal, i no seria raonable esperar que es fes 100% accessible per a persones invidents, tot i que es podrien implementar controls de teclat perquè el puguin utilitzar usuaris que no fan servir el ratolí, i fer que l’esquema de colors sigui prou contrastat per ser utilitzat per persones amb deficiències de color.</p> - -<h3 id="El_problema_de_massa_JavaScript">El problema de massa JavaScript</h3> - -<p>El problema sol venir quan la gent confia massa en JavaScript. De vegades veureu un lloc web on tot s’ha fet amb JavaScript: l’HTML l’ha generat JavaScript, el CSS l’ha generat JavaScript, etc. Això comporta tota mena de problemes d’accessibilitat i altres d'associats, de manera que no és aconsellable.</p> - -<p>A més d'utilitzar l'element adequat per a cada feina, també us heu d'assegurar que utilitzeu la tecnologia adequada per a cada cosa. Penseu bé si necessiteu aquest brillant quadre d’informació 3D basat en JavaScript o si amb un simple text ja faríeu. Penseu bé si necessiteu un complex giny de formulari no estàndard o si una entrada de text serviria. I no genereu tot el vostre contingut HTML mitjançant JavaScript, si és possible.</p> - -<h3 id="Feu-ho_no_obstructiu">Feu-ho no obstructiu</h3> - -<p>Hauríeu de fer servir <strong>JavaScript no obstructiu</strong> quan creeu el vostre contingut. La idea del JavaScript no obstructiu és que s’ha d’utilitzar sempre que sigui possible per millorar funcionalitats i no per construir-la del tot: les funcions bàsiques haurien de funcionar idealment sense JavaScript, tot i que ja sabem que això no sempre és una opció. Un altre cop, una gran part és fer servir la funcionalitat integrada del navegador sempre que sigui possible.</p> - -<p>Un bon exemple d'usos de JavaScript no obstructiu inclou:</p> - -<ul> - <li>Proporcionar validació de formulari al costat del client, que avisa els usuaris de problemes amb les seves entrades de formulari ràpidament, sense haver d’esperar que el servidor comprovi les dades. Si no està disponible, el formulari continuarà funcionant, però la validació pot ser més lenta.</li> - <li>Proporcionar controls personalitzats per als <code><video></code>s HTML5 que siguin accessibles per als usuaris de teclat, juntament amb un enllaç directe al vídeo que es pot utilitzar per accedir-hi si JavaScript no està disponible (els controls predeterminats del navegador per a <code><video></code> no són accessibles per teclat a la majoria de navegadors).</li> -</ul> - -<p>Com a exemple, hem escrit un exemple de validació de formulari al client "ràpid i brut": vegeu <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> (vegeu també la <a href="http://mdn.github.io/learning-area/accessibility/css/form-validation.html">demostració en viu</a>). Aquí veureu un formulari senzill: quan intenteu enviar el formulari amb un o ambdós camps buits, l'enviament falla i apareix un quadre de missatge d'error per indicar-vos què no funciona.</p> - -<p>Aquest tipus de validació de formularis és no obstructiu: podeu utilitzar el formulari perfectament sense que estigui disponible JavaScript, i qualsevol implementació de formulari assenyada també tindrà activa la validació del servidor, perquè és massa fàcil per als usuaris malintencionats saltar-se la validació al client (per exemple, desactivant JavaScript al navegador). Però la validació al client és molt útil per informar d'errors: els usuaris poden veure els errors que cometen a l'instant, en lloc d'haver d'esperar un viatge d'anada i tornada al servidor i una recàrrega de la pàgina. Aquest és un avantatge clar d’usabilitat.</p> - -<div class="blockIndicator note"> -<p>Nota: La validació al servidor no s'ha implementat en aquesta senzilla demostració.</p> -</div> - -<p>També hem fet que la validació d’aquest formulari sigui força accessible. Hem utilitzat elements {{htmlelement ("label")}}}) per assegurar-nos que les etiquetes del formulari estiguin lligades sense ambigüitats a les seves entrades, de manera que els lectors de pantalla les puguin llegir conjuntament:</p> - -<pre class="brush: html notranslate"><label for="name">Entra el teu nom:</label> -<input type="text" name="name" id="name"></pre> - -<p>La validació només la fem quan s’envia el formulari, de manera que no actualitzem la interfície d’usuari massa sovint, cosa que pot confondre als usuaris de lectors de pantalla (i possiblement d’altres):</p> - -<pre class="brush: js notranslate">form.onsubmit = validate; - -function validate(e) { - errorList.innerHTML = ''; - for(let i = 0; i < formItems.length; i++) { - const testItem = formItems[i]; - if(testItem.input.value === '') { - errorField.style.left = '360px'; - createLink(testItem); - } - } - - if(errorList.innerHTML !== '') { - e.preventDefault(); - } -}</pre> - -<div class="note"> -<p><strong>Nota</strong>: En aquest exemple, amaguem i mostrem el quadre de missatge d'error mitjançant posicionament absolut en lloc d'un altre mètode, com ara <code>visibility</code> o <code>display</code>, perquè no interfereix amb el fet que el lector de pantalla pugui llegir-ne contingut.</p> -</div> - -<p>La validació real del formulari seria molt més complexa que això: voldríeu comprovar que el nom introduït sembli un nom, l’edat introduïda sigui realment un número i sigui realista (per exemple, no negativa i amb menys de 4 dígits). Aquí simplement hem implementat una comprovació senzilla: que s'ha introduït un valor a cada camp d'entrada (<code>if(testItem.input.value === '')</code>).</p> - -<p>Quan s’hagi realitzat la validació, si passa la prova, s’envia el formulari. Si hi ha errors (<code>if (errorList.innerHTML!== ")</code>), no enviem el formulari (utilitzant <code>preventDefault()</code>) i mostrem els missatges d'error creats (vegeu més avall). Aquest mecanisme significa que els errors només es mostraran si hi ha errors, cosa que és millor per a la usabilitat.</p> - -<p>Per a cada entrada que no tingui un valor completat quan s’envia el formulari, creem un element de llista amb un enllaç i l’inserim a <code>errorList</code>.</p> - -<pre class="brush: js notranslate">function createLink(testItem) { - const listItem = document.createElement('li'); - const anchor = document.createElement('a'); - - anchor.textContent = 'El camp ' + testItem.input.name + ' és buit: entreu ' + testItem.input.name + '.'; - anchor.href = '#' + testItem.input.name; - anchor.onclick = function() { - testItem.input.focus(); - }; - listItem.appendChild(anchor); - errorList.appendChild(listItem); -}</pre> - -<p>Cada enllaç té un doble propòsit: indica quin és l'error i, a més, permet fer-hi clic / activar-lo per saltar directament a l'element d'entrada en qüestió i corregir-lo.</p> - -<div class="blockIndicator note"> -<p><strong>Nota:</strong> la part <code>focus()</code> d’aquest exemple és una mica complicada. Chrome i Edge (i les versions més recents d’IE) donen focus a l’element quan es fa clic a l’enllaç, sense necessitat del bloc <code>onclick</code> / <code>focus()</code>. Safari només ressaltarà l’element del formulari amb l’enllaç, de manera que necessita el bloc <code>onclick</code> / <code>focus()</code> per donar-hi focus realment. Firefox no dona focus correctament a les entrades en aquest context, de manera que els usuaris de Firefox no poden aprofitar-ho actualment (tot i que la resta funciona bé). El problema a Firefox s'hauria de solucionar aviat — s'està treballant per proporcionar a Firefox un comportament equivalent al d'altres navegadors (vegeu {{bug(277178)}}).</p> -</div> - -<p>A més, l’<code>errorField</code> es col·loca a la part superior del codi font (tot i que es posiciona de manera diferent a la interfície d'usuari mitjançant CSS), cosa que significa que els usuaris poden esbrinar exactament què passa amb els enviaments del formulari i accedir als elements d’entrada en qüestió tornant al començament de la pàgina.</p> - -<p>Com a nota final, hem utilitzat alguns atributs WAI-ARIA a la nostra demostració per ajudar a resoldre els problemes d’accessibilitat causats per àrees de contingut que s’actualitzen constantment sense que es recarregui la pàgina (els lectors de pantalla no ho recolliran ni avisaran els usuaris per defecte):</p> - -<pre class="notranslate"><div class="errors" role="alert" aria-relevant="all"> - <ul> - </ul> -</div></pre> - -<p>Explicarem aquests atributs al nostre proper article, que cobreix <a href="/ca/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> amb molt més detall.</p> - -<div class="note"> -<p><strong>Nota</strong>: Probablement, alguns de vosaltres pensareu en el fet que els formularis HTML5 tenen mecanismes de validació integrats, com ara els atributs <code>required</code>, <code>min</code>/<code>minlength</code> i <code>max</code>/<code>maxlength</code> (vegeu la referència de l’element {{htmlelement("input")}}) per obtenir més informació ). No els hem utilitzat a la demostració perquè el suport de diversos navegadors per a ells és inadequat (per exemple, només existeix en IE10 i superior).</p> -</div> - -<div class="note"> -<p><strong>Nota</strong>: <a href="http://webaim.org/techniques/formvalidation/">Usable and Accessible Form Validation and Error Recovery</a>, de WebAIM, dona més informació útil sobre validació accessible de formularis.</p> -</div> - -<h3 id="Altres_problemes_d’accessibilitat_a_JavaScript">Altres problemes d’accessibilitat a JavaScript</h3> - -<p>Hi ha altres coses que cal tenir en compte a l’hora d’implementar JavaScript i pensar en l’accessibilitat. N’afegirem més a mesura que les trobem.</p> - -<h4 id="Esdeveniments_específics_del_ratolí">Esdeveniments específics del ratolí</h4> - -<p>Com ja deveu saber, la majoria de les interaccions dels usuaris s’implementen en JavaScript del costat del client mitjançant gestors d’esdeveniments (<em>event handlers</em>), que ens permeten executar funcions en resposta a determinats esdeveniments que succeeixen. Alguns esdeveniments poden tenir problemes d’accessibilitat. El principal exemple que trobareu són esdeveniments específics del ratolí, com ara <code>mouseover</code>, <code>mouseout</code>, <code>dblclick</code>, etc. La funcionalitat que s'executa en resposta a aquests esdeveniments no serà accessible mitjançant altres mecanismes, com ara els controls del teclat.</p> - -<p>Per mitigar aquests problemes, hauríeu de duplicar aquests esdeveniments amb esdeveniments similars que es puguin activar per altres mitjans (els anomenats controladors d’esdeveniments independents de dispositiu); <code>focus</code> i <code>blur</code> proporcionarien accessibilitat als usuaris de teclat.</p> - -<p>Vegem un exemple que destaca quan pot ser útil fer-ho. Potser volem proporcionar una imatge en miniatura que mostri una versió més gran de la imatge quan s'hi passi per sobre amb el ratolí o s'hi doni focus (com passaria en un catàleg de productes de comerç electrònic).</p> - -<p>Hem fet un exemple molt senzill que podeu trobar a <a href="http://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">mouse-and-keyboard-events.html</a> (vegeu també el <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">codi font</a>). El codi presenta dues funcions que mostren i amaguen la imatge ampliada; són executats per les línies següents que els configuren com a gestors d'esdeveniments:</p> - -<pre class="brush: js notranslate">imgThumb.onmouseover = showImg; -imgThumb.onmouseout = hideImg; - -imgThumb.onfocus = showImg; -imgThumb.onblur = hideImg;</pre> - -<p>Les dues primeres línies executen les funcions quan el punter del ratolí passa per sobre i surt de sobre de la miniatura, respectivament. Tot i això, no ens permetrà accedir a la vista ampliada mitjançant el teclat; per permetre-ho, hem inclòs les dues darreres línies, que executen les funcions quan la imatge agafa i perd focus. Això es pot fer prement el tabulador fins arribar a la imatge, perquè hi hem inclòs <code>tabindex="0"</code>.</p> - -<p>L’esdeveniment <code>click</code> és interessant: sembla que depengui del ratolí, però la majoria de navegadors activaran els controladors d’esdeveniments <code>onclick</code> en prémer Retorn sobre un enllaç o element de formulari que tingui focus, o quan es toqui a aquest element en un dispositiu de pantalla tàctil. Això no funciona de manera determinada, però, si permeteu que un esdeveniment al qual no es pot donar focus per defecte prengui el focus mitjançant <code>tabindex</code>. En aquests casos, heu de detectar específicament quan es prem aquesta tecla exacta (consulteu <a href="/ca/docs/Learn/Accessibility/HTML#Tornar_a_afegir_laccessibilitat_de_teclat">Tornar a afegir l'accessibilitat de teclat</a>).</p> - -<h2 id="Posa_a_prova_les_teves_habilitats!">Posa a prova les teves habilitats!</h2> - -<p>Heu arribat al final d’aquest article. En recordeu la informació més important? Podeu trobar algunes proves addicionals per verificar que reteniu aquesta informació abans de continuar. Vegeu <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility">Test your skills: CSS and JavaScript accessibility</a>.</p> - -<h2 id="Resum">Resum</h2> - -<p>Esperem que aquest article us hagi donat una bona quantitat de detalls i comprensió sobre els problemes d’accessibilitat relacionats amb l’ús de CSS i JavaScript a les pàgines web.</p> - -<p>Tot seguit, WAI-ARIA!</p> - -<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> - -<div> -<h2 id="En_aquest_mòdul">En aquest mòdul</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> -</div> diff --git a/files/ca/learn/accessibility/html/index.html b/files/ca/learn/accessibility/html/index.html deleted file mode 100644 index ddcb351f85..0000000000 --- a/files/ca/learn/accessibility/html/index.html +++ /dev/null @@ -1,596 +0,0 @@ ---- -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> diff --git a/files/ca/learn/accessibility/index.html b/files/ca/learn/accessibility/index.html deleted file mode 100644 index 398a9ee96f..0000000000 --- a/files/ca/learn/accessibility/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Accessibility -slug: Learn/Accessibility -tags: - - ARIA - - Accessibility - - Articles - - Beginner - - CSS - - CodingScripting - - HTML - - JavaScript - - Landing - - Learn - - Module - - NeedsTranslation - - TopicStub -translation_of: Learn/Accessibility ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer. Beyond mechanical use, it's important to learn how to use these technologies <strong>responsibly</strong> so that all readers might use your creations on the web. To help you achieve this, this module will cover general best practices (which are demonstrated throughout the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics), <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>, and some tips on enforcing accessibility from the start. We'll cover accessibility in special detail.</p> - -<h2 id="Overview">Overview</h2> - -<p>When someone describes a site as "accessible," they mean that any user can use all its features and content, regardless of how the user accesses the web — even and especially users with physical or mental impairments.</p> - -<ul> - <li>Sites should be accessible to keyboard, mouse, and touch screen users, and any other way users access the web, including screen readers and voice assistants like Alexa and Google Home.</li> - <li>Applications should be understandable and usable by people regardless of auditory, visual, physical, or cognitive abilities.</li> - <li>Sites should also not cause harm: web features like motion can cause migraines or epileptic seizures.</li> -</ul> - -<p><strong>By default, HTML is accessible, if used correctly.</strong> Web accessibility involves ensuring that content remains accessible, regardless of who and how the web is accessed.</p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>To get the most out of this module, it would be a good idea to either work through at least the first two modules of the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.</p> - -<div class="note"> -<p><strong>Note</strong>: If you are working on a computer/tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt> - <dd>This article starts off the module with a good look at what accessibility is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt> - <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are always used for the correct purpose . This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt> - <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt> - <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt> - <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives, so they can be understood by assistive technologies and their users. This article shows how.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt> - <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd> -</dl> - -<h2 id="Assessments">Assessments</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></dt> - <dd> - <p>In the assessment for this module, we present to you a simple site with several accessibility issues that you need to diagnose and fix.</p> - </dd> -</dl> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — an excellent series of video tutorials by Marcy Sutton.</li> - <li><a href="https://dequeuniversity.com/resources/">Deque University resources</a> — includes code examples, screen reader references, and other useful resources.</li> - <li><a href="http://webaim.org/resources/">WebAIM resources</a> — includes guides, checklists, tools, and more.</li> - <li><a href="https://www.w3.org/WAI/ER/tools/">Web Accessibility Evaluation Tools List</a> - includes a list of web accessibility evaluation tools.</li> -</ul> diff --git a/files/ca/learn/accessibility/what_is_accessibility/index.html b/files/ca/learn/accessibility/what_is_accessibility/index.html deleted file mode 100644 index 5978594345..0000000000 --- a/files/ca/learn/accessibility/what_is_accessibility/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: Què és l'accessibilitat? -slug: Learn/Accessibility/What_is_accessibility -translation_of: Learn/Accessibility/What_is_accessibility -original_slug: Learn/Accessibility/Que_es_accessibilitat ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</div> - -<p class="summary">Aquest article inicia el mòdul fent ullada a què és l’accessibilitat: aquesta visió general inclou quins grups de persones hem de considerar i per què, quines eines utilitzen les persones per a interactuar amb el web i com podem fer que l’accessibilitat sigui una part del nostre lloc web.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisits:</th> - <td>Coneixements bàsics d'informàtica i nocions bàsiques de com funcionen l'HTML i el CSS.</td> - </tr> - <tr> - <th scope="row">Objectiu:</th> - <td>Adquirir familiaritat amb l’accessibilitat, inclòs què és i com t’afecta com a desenvolupador web.</td> - </tr> - </tbody> -</table> - -<h2 id="Què_és_laccessibilitat">Què és l'accessibilitat?</h2> - -<p>L’accessibilitat és la pràctica de fer que els llocs web siguin utilitzables per tantes persones com sigui possible. Tradicionalment pensem que es tracta de persones amb discapacitat, però el fet de fer accessibles els llocs web també beneficia altres grups, com els qui utilitzen dispositius mòbils o els qui tenen connexions de xarxa lentes.</p> - -<p>També pots pensar en l’accessibilitat com el fet de tractar igual a tothom i oferir igualtat d’oportunitats, independentment de quines siguin les capacitats o les circumstàncies. De la mateixa manera que no està bé excloure algú d’accedir a un edifici perquè va en cadira de rodes (els edificis públics moderns solen tenir rampes o ascensors per a cadires de rodes), tampoc és correcte excloure d’un lloc web algú que té una discapacitat visual. Tots som diferents, però tots som humans, i tenim els mateixos drets com a humans.</p> - -<p>Per això hem de fer les coses accessibles. L’accessibilitat dels llocs web forma part de la legislació d’alguns països, i et pot obrir un mercat significatiu, que d'altra manera no podria utilitzar els teus serveis ni comprar els teus productes.</p> - -<p>La construcció de llocs accessibles beneficia a tothom:</p> - -<ul> - <li>Un HTML semàntic, que millora l’accessibilitat, també millora el posicionament en els motors de cerca (SEO), i incrementa la possibilitat que trobin el teu lloc web.</li> - <li>Preocupar-se per l’accessibilitat demostra valors ètics i morals, cosa que millora la teva imatge pública.</li> - <li>Altres bones pràctiques que milloren l’accessibilitat també milloren la usabilitat d’altres grups, com ara els usuaris de telèfons mòbils o els que tenen una velocitat d’accés a la xarxa lenta. De fet, tothom pot beneficiar-se de moltes d'aquestes millores.</li> - <li>Hem esmentat que també hi ha lleis al respecte en alguns països?</li> -</ul> - -<h2 id="En_quins_tipus_de_discapacitat_ens_hem_de_fixar">En quins tipus de discapacitat ens hem de fixar?</h2> - -<p>Les persones amb discapacitat són igual de diverses que les persones sense discapacitat, i també ho són les discapacitats. La lliçó clau aquí és pensar més enllà de com utilitzes el teu ordinador i el web i començar a aprendre com l'utilitzen els altres, <em>tu no ets els teus usuaris</em>. A continuació s’expliquen els tipus principals de discapacitat que pots tenir en compte i les eines especials que s’utilitzen per a accedir al contingut web (conegudes com a <strong>tecnologies d’assistència</strong> o <strong>AT</strong>, d’<em>assistive technologies</em>).</p> - -<div class="note"> -<p><strong>Nota</strong>: La fitxa informativa sobre <a href="https://www.who.int/en/news-room/fact-sheets/detail/disability-and-health">discapacitat i salut</a> de l'Organització Mundial de la Salut estableix que «Més d'un milió de persones, aproximadament el 15% de la població mundial, tenen algun tipus de discapacitat» i «Entre 110 i 190 milions d'adults tenen dificultats importants de funcionament».</p> -</div> - -<h3 id="Les_persones_amb_discapacitat_visual">Les persones amb discapacitat visual</h3> - -<p>Les persones amb discapacitat visual inclouen persones amb ceguesa, poca visió i daltonisme. Moltes persones amb deficiències visuals utilitzen lupes de pantalla, que poden ser lupes físiques o les funcions de zoom del programari. La majoria de navegadors i sistemes operatius actuals tenen la capacitat de fer zoom. Alguns usuaris confien en lectors de pantalla, un programari que llegeix el text digital en veu alta. Alguns exemples de lectors de pantalla són:</p> - -<ul> - <li>Uns són productes comercials de pagament, com ara <a class="external external-icon" href="https://www.freedomscientific.com/Products/software/JAWS/">JAWS</a> (Windows) i <a href="https://yourdolphin.com/screenreader">Dolphin Screen Reader</a> (Windows).</li> - <li>D’altres són productes gratuïts, com <a class="external external-icon" href="https://www.nvaccess.org/">NVDA</a> (Windows), <a class="external external-icon" href="https://www.chromevox.com/">ChromeVox</a> (Chrome, Windows i Mac OS X) i <a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux).</li> - <li>N’hi ha que estan incorporats dins el sistema operatiu, com <a class="external external-icon" href="https://www.apple.com/accessibility/mac/vision/">VoiceOver</a> (macOS, iPadOS, iOS), <a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a> (Microsoft Windows), <a class="external external-icon" href="https://www.chromevox.com/">ChromeVox</a> (al sistema operatiu Chrome) i <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li> -</ul> - -<p>Seria bo que et familiaritzessis amb els lectors de pantalla; també hauries de configurar un lector de pantalla i experimentar-hi per a fer-te una idea de com funciona. Consulta la nostra <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">guia de lectors de pantalla per a proves de compatibilitat creuada entre navegadors</a> per a obtenir més detalls sobre el seu ús. El vídeo següent proporciona un breu exemple de com és l'experiència.</p> - -<p>{{EmbedYouTube("IK97XMibEws")}}</p> - -<p>En termes estadístics, l'Organització Mundial de la Salut estima que «hi ha al voltant de 285 milions de persones amb deficiències visuals a tot el món: 39 milions són cegues i 246 tenen un nivell de visió baix». (Consulta l’informe sobre <a href="https://www.who.int/mediacentre/factsheets/fs282/en/">Dificultat visual i ceguesa</a>). Es tracta d'una població d’usuaris molt gran i significativa, que no pots deixar escapar perquè el teu lloc web no es codifiqui correctament (parlem de gairebé el mateix nombre de persones que viuen a Estats Units d’Amèrica).</p> - -<h3 id="Les_persones_amb_discapacitat_auditiva">Les persones amb discapacitat auditiva</h3> - -<p>Altrament conegudes com persones amb deficiències auditives o persones sordes, aquest grup de persones es diferencia per tenir nivells auditius baixos o perquè, directament, no tenen sentit de l’oïda. Les persones amb deficiències auditives utilitzen AT (consulta els <a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">Dispositius assistents per a persones amb trastorns de l’audició, la veu, la parla o el llenguatge</a>), però realment no hi ha AT específics per a l’ús d'un ordinador o un lloc web.</p> - -<p>Tanmateix, hi ha tècniques específiques que proporcionen alternatives textuals al contingut d'àudio, que van des de transcripcions de text senzilles fins a pistes de text (és a dir, subtítols) que es poden mostrar juntament amb un vídeo. Més endavant, tractarem aquest tema en un article.</p> - -<p>Les persones amb discapacitat auditiva també representen una base d’usuaris important. «466 milions de persones a tot el món tenen pèrdua auditiva», diu el full informatiu de l'Organització Mundial de la Salut per a la <a href="https://www.who.int/mediacentre/factsheets/fs300/en/">Sordesa i pèrdua auditiva</a>.</p> - -<h3 id="Les_persones_amb_problemes_de_mobilitat">Les persones amb problemes de mobilitat</h3> - -<p>Aquestes persones tenen discapacitats motrius, que poden ser per problemes purament físics (com la pèrdua de les extremitats o una paràlisi), o per trastorns neurològics/genètics que condueixen a debilitat o pèrdua de control en les extremitats. Algunes persones podrien tenir dificultats per a fer els moviments de mà necessaris per a utilitzar un ratolí, mentre que d’altres poden tenir afectacions més greus, potser una paràlisi significativa, fins al punt que necessitin utilitzar un <a href="https://www.performancehealth.com/baseball-cap-head-pointer">punter de cap</a> per a interactuar amb els ordinadors.</p> - -<p>Aquest tipus de discapacitat també pot ser conseqüència d'una edat avançada, més que d'un traumatisme o una condició específica, o bé de les limitacions del maquinari (pot ser que alguns usuaris no tinguin un ratolí).</p> - -<p>La manera en què afecta habitualment el treball del desenvolupador web és en el requisit que els controls siguin accessibles pel teclat; tractarem l’accessibilitat del teclat en articles posteriors del mòdul, però és una bona idea provar d’accedir a alguns llocs web utilitzant només el teclat per veure com te'n surts. Per exemple, pots utilitzar la tecla de tabulació per a desplaçar-te entre els diferents controls d'un formulari web? Pots trobar més detalls sobre els controls de teclat a la nostra secció <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Prova de compatibilitat creuada entre navegadors Ús original d’accessibilitat des del teclat</a>.</p> - -<p>En termes estadístics, un nombre important de persones presenta deficiències de mobilitat. Els centres dels EUA per al control i la prevenció de la <a href="https://www.cdc.gov/nchs/fastats/disability.htm">discapacitat i el funcionament (adults no institucionalitzats de més de 18 anys)</a> informen que el percentatge d’adults amb dificultats de motricitat física als Estats Units és del 16,1%.</p> - -<h3 id="Les_persones_amb_problemes_de_cognició">Les persones amb problemes de cognició</h3> - -<p>El deteriorament cognitiu es refereix a una àmplia gamma de discapacitats, des de persones amb discapacitat intel·lectual que tenen les capacitats més limitades, fins a tots nosaltres, que a mesura que envellim tenim més dificultats per a pensar i recordar. La gamma inclou les persones amb malalties mentals com la <a href="https://www.nimh.nih.gov/health/topics/depression/index.shtml">depressió</a> i l’<a href="https://www.nimh.nih.gov/health/topics/schizophrenia/index.shtml">esquizofrènia</a>. També inclou persones amb discapacitats d'aprenentatge com la <a href="https://www.ninds.nih.gov/Disorders/All-Disorders/Learning-Disabilities-Information-Page">dislèxia</a> o el <a href="https://www.nimh.nih.gov/health/topics/attention-deficit-hyperactivity-disorder-adhd/index.shtml">trastorn d'hiperactivitat i dèficit d'atenció</a>. És important destacar que, tot i que hi ha molta diversitat en les definicions clíniques de deficiències cognitives, les persones que les tenen experimenten un conjunt de problemes funcionals comuns, que inclouen dificultats per comprendre els continguts, recordar com fer tasques, i confusions causades per dissenys de pàgines web incoherents.</p> - -<p>Una bona base d’accessibilitat per a persones amb deficiències cognitives inclou:</p> - -<ul> - <li>proporcionar el contingut de més d'una manera, com ara de text a veu o en vídeo;</li> - <li>proporcionar continguts fàcils d’entendre, com ara text escrit amb estàndards de llenguatge normal;</li> - <li>centrar l’atenció en els continguts importants;</li> - <li>minimitzar les distraccions, com ara continguts innecessaris o anuncis;</li> - <li>proporcionar un sistema de navegació i un disseny de la pàgina web coherents;</li> - <li>fer servir elements familiars, com ara els enllaços subratllats en blau quan encara no s'han visitat i en violeta quan ja s'han visitat;</li> - <li>dividir els processos en passos lògics i essencials amb indicadors de progrés;</li> - <li>oferir un sistema d'autenticació de llocs web tan simple com sigui possible sense comprometre la seguretat; i</li> - <li>dissenyar formularis fàcils d’emplenar, amb missatges d’error clars i facilitat de recuperació dels errors.</li> -</ul> - -<h3 id="Notes">Notes</h3> - -<ul> - <li>Un disseny d’<a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility">accessibilitat cognitiva</a> dóna lloc a bones pràctiques de disseny. Això beneficia a tothom.</li> - <li>Moltes persones amb deficiències cognitives també tenen discapacitats físiques. Els llocs web han d’ajustar-se a les <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Directrius d’accessibilitat per als continguts web</a> del W3C, que inclouen les <a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility#Guidelines">directrius d’accessibilitat cognitiva</a>.</li> - <li>El Grup de <a href="https://www.w3.org/WAI/GL/task-forces/coga/">treball per a l'accessibilitat de persones amb discapacitats cognitives i d'aprenentatge</a> del W3C elabora directrius d'accessibilitat web per a persones amb deficiències cognitives.</li> - <li>WebAIM té una <a href="https://webaim.org/articles/cognitive/">pàgina sobre cognició</a>, amb informació i recursos rellevants<a name="_GoBack"></a>.</li> - <li>Els Centres de Control de Malalties dels Estats Units estimen que, del 2018 en endavant, 1 de cada 4 ciutadans dels Estats Units tenen alguna discapacitat, i que <a href="https://www.cdc.gov/media/releases/2018/p0816-disability.html">la més habitual en els joves és el deteriorament cognitiu</a>.</li> - <li>Als EUA, el terme «discapacitats intel·lectuals» és la nova manera de dir «retard mental». Al Regne Unit, les «discapacitats intel·lectuals» solen ser «discapacitats d'aprenentatge» o «dificultats d'aprenentatge».</li> -</ul> - -<h2 id="Implementar_laccessibilitat_del_teu_projecte">Implementar l'accessibilitat del teu projecte</h2> - -<p>Un mite comú de l’accessibilitat és que l’accessibilitat és un «cost afegit» a l'hora de crear un projecte. Aquest mite en realitat pot ser cert si:</p> - -<ul> - <li>Proves d’«incorporar» l'accessibilitat d’un lloc web que presenta problemes d'accessibilitat importants.</li> - <li>Has començat a plantejar-te l’accessibilitat i els problemes relacionats descoberts només en les últimes etapes d’un projecte.</li> -</ul> - -<p>Tanmateix, si consideres l'accessibilitat des del començament d'un projecte, el cost de fer la majoria del contingut accessible hauria de ser mínim.</p> - -<p>Quan planifiquis el teu projecte, inclou les proves d’accessibilitat en el teu règim de proves, conjuntament amb les proves per a qualsevol altre segment de públic objectiu important (per exemple, navegadors per a equips d’escriptori o per a dispositius mòbils). Fes les proves tan aviat com et sigui possible i de manera continuada, fes proves automatitzades per a descobrir les quines característiques de programació falten (com ara que falti el text alternatiu de les imatges o que hi hagi text d’enllaços erroni; observa les relacions entre els elements i el seu context) i fes proves amb grups d’usuaris discapacitats per veure com es desenvolupen amb els elements web més complexos. Per exemple:</p> - -<ul> - <li>La gent que utilitza lectors de pantalla pot fer servir el selector de dates?</li> - <li>Si el contingut s’actualitza de manera dinàmica, les persones amb deficiències visuals ho sabran?</li> - <li>Els botons d'interfície són accessibles des del teclat i les interfícies tàctils?</li> -</ul> - -<p>Pots i has de mantenir un seguiment de les possibles àrees problemàtiques del teu contingut que necessitaran més feina per a fer-lo accessible, assegura't que es fa una prova exhaustiva i pensa en solucions/alternatives. El contingut de text (com veuràs en l’article següent) és fàcil; però, i el contingut multimèdia i els gràfics 3D? Has de tenir present el pressupost del projecte i pensar de quines solucions disposes per a fer aquest contingut accessible. Una opció possible, tot i que costosa, és tenir transcrit tot el contingut multimèdia.</p> - -<p>Sigues realista. El «100% d'accessibilitat» és un ideal que no es pot assolir, sempre hi haurà algun cas que tingui com a resultat que un usuari determinat trobi uns continguts determinats difícils d'utilitzar, però tot i això, hauries de fer tot allò que et sigui possible. Si tens previst incloure un gràfic 3D elaborat amb WebGL, potser voldràs incloure una taula de dades com a representació alternativa accessible de les dades. O, simplement, voldràs incloure la taula i desfer-te del gràfic de taules 3D: és accessible per a tothom, més ràpida de codificar, empra menys recursos de la CPU i és més fàcil de mantenir.</p> - -<p>Ara bé, si treballes en un lloc web d’una galeria d’art que mostra obres d'art interessants en 3D, no seria raonable esperar que les obres fossin perfectament accessible per a persones amb deficiències visuals, ja que es tracta d'un mitjà totalment visual.</p> - -<p>Per demostrar que et preocupa i has pensat en l’accessibilitat, publica una declaració d’accessibilitat en el teu lloc web en què es detalli quina és la teva política d’accessibilitat i quins passos has fet per a aconseguir que el lloc sigui accessible. Si algú es queixa que el teu lloc web té un problema d’accessibilitat, estableix-hi un diàleg, mostra empatia i pren les mesures raonables per a intentar solucionar el problema.</p> - -<div class="note"> -<p><strong>Nota</strong>: El nostre article sobre la <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Gestió de problemes d’accessibilitat comuns</a> exposa especificacions d’accessibilitat que s’han de provar amb més detall.</p> -</div> - -<p>En resum:</p> - -<ul> - <li>Considera l’accessibilitat des de l’inici d’un projecte i prova-la tan aviat com et sigui possible i de manera continuada. Igual que qualsevol altre error, un problema d’accessibilitat es fa més car de resoldre com més tard es descobreix.</li> - <li>Tingues en compte que moltes pràctiques d’accessibilitat beneficien a tothom, no només els usuaris amb discapacitat. Per exemple, el marcatge semàntic no és bo només per als lectors de pantalla, sinó que a més resulta ràpid de carregar i presenta un bon rendiment. Això beneficia a tothom, sobretot els dispositius mòbils i les connexions lentes.</li> - <li>Publica una declaració d’accessibilitat al lloc web i relaciona't amb les persones que hi tinguin problemes.</li> -</ul> - -<h2 id="Directrius_d’accessibilitat_i_lleis">Directrius d’accessibilitat i lleis</h2> - -<p>Hi ha tantes llistes de comprovació i conjunts de pautes disponibles per a fonamentar les proves d’accessibilitat, que pot semblar aclaparador a primera vista. El nostre consell és que et familiaritzis amb les àrees bàsiques de què t’has d’ocupar i comprendre les estructures d’alt nivell de les directrius que més t'interessin.</p> - -<ul> - <li>Per començar, W3C ha publicat un document ampli i molt detallat que inclou criteris tecnològics i agnòstics molt precisos per a la conformitat de l'accessibilitat. S’anomenen <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">directrius d’accessibilitat per a continguts web</a> (WCAG) i no són en absolut una lectura curta. Els criteris es divideixen en quatre categories principals, que especifiquen com es pot aconseguir que les implementacions resultin percebudes, operables, comprensibles i coherents. El millor lloc per a obtenir una introducció lleugera i començar a aprendre és <a href="https://www.w3.org/WAI/standards-guidelines/wcag/glance/">WCAG at a Glance</a>. No cal que t’aprenguis el WCAG de memòria: tingues en compte les teves àrees de preocupació principals i utilitza diverses tècniques i eines per destacar les àrees que no s’ajusten als criteris del WCAG (continua més avall).</li> - <li>El teu país també pot disposar de legislació específica que reguli la necessitat que els llocs web al servei de la població siguin accessibles (per exemple, <a href="https://www.etsi.org/deliver/etsi_en/301500_301599/301549/02.01.02_60/en_301549v020102p.pdf">EN 301 549</a> a la UE, la <a href="https://www.section508.gov/training">secció 508 de la Llei de rehabilitació</a> als Estats Units, l'<a href="https://www.einfach-fuer-alle.de/artikel/bitv_english/">Ordenança Federal sobre Tecnologies de la Informació sense barreres</a> a Alemanya, les <a href="https://www.legislation.gov.uk/uksi/2018/952/introduction/made">Normes d’Accessibilitat del 2018</a> al Regne Unit, l'<a href="https://www.agid.gov.it/it/design-servizi/accessibilita-siti-web">Accessibilitat</a> a Itàlia, la <a href="https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014">Llei de discriminació per discapacitat</a> a Austràlia, etc.). L'W3C conté una <a href="https://www.w3.org/WAI/policies/">llista de les lleis i polítiques d’accessibilitat web</a> per país.</li> -</ul> - -<p>De manera que mentre que el WCAG és un conjunt de directrius, el teu país probablement disposa de lleis que regulen l’accessibilitat web o, almenys, l’accessibilitat dels serveis disponibles per al públic (que podrien incloure llocs web, televisió, espais físics, etc.). És una bona idea que et preocupis per esbrinar quines són aquestes lleis, perquè podria ser que tinguis algun tipus de responsabilitat legal si la gent es queixa.</p> - -<p>Tot i que sona molt seriós, de fet només cal que consideris l’accessibilitat com la prioritat principal de les teves pràctiques de desenvolupament web, tal com hem exposat abans. En cas de dubte, demana l’assessorament d’un advocat qualificat. Aquí no oferirem més consells sobre el tema, perquè no som advocats.</p> - -<h2 id="API_daccessibilitat">API d'accessibilitat</h2> - -<p>Els navegadors web fan ús de les <strong>API d’accessibilitat</strong> especial (proporcionades pel sistema operatiu subjacent), que exposen informació útil per a tecnologies assistencials (AT, <em>assistive technologies</em>): les AT solen fer ús d’informació semàntica, és a dir, que aquesta informació no inclou aplicació d’estil o JavaScript. Aquesta informació s’estructura en un arbre d’informació anomenat <strong>arbre d’accessibilitat</strong>.</p> - -<p>Els diferents sistemes operatius tenen diferents API d’accessibilitat disponibles:</p> - -<ul> - <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li> - <li>Mac OS X: NSAccessibility</li> - <li>Linux: AT-SPI</li> - <li>Android: Accessibility framework</li> - <li>iOS: UIAccessibility</li> -</ul> - -<p>Si cau la informació semàntica d’origen que proporcionen els elements HTML de les teves aplicacions web, pots completar-la amb funcions de l’<a href="https://www.w3.org/TR/wai-aria/">especificació WAI-ARIA</a>, que afegeixen informació semàntica a l’arbre d’accessibilitat per a millorar-ne l’accessibilitat. Pots obtenir més informació sobre WAI-ARIA en el nostre article <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA bàsic</a>.</p> - -<h2 id="Resum">Resum</h2> - -<p>Aquest article t'hauria d'haver proporcionat una panoràmica útil i de gran nivell sobre l'accessibilitat, i mostrat per què és important i com pots integrar-la en el teu flux de treball. Ara també hauries de frisar per conèixer els detalls d’implementació que poden fer que els llocs web siguin accessibles, i començarem a fer-ho en la secció següent, i veurem per què l’HTML és una bona base per a l'accessibilitat.</p> - -<p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p> - -<h2 id="En_aquest_mòdul">En aquest mòdul</h2> - -<ul> - <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">Què és l'accessibilitat?</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/HTML">L’HTML: Una bona base per a l'accessibilitat</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">Bones pràctiques d’accessibilitat en CSS i JavaScript</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">Conceptes bàsics de WAI-ARIA</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessibilitat multimèdia</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Accessibilitat mòbil</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Resolució de problemes amb accessibilitat</a></li> -</ul> - -<h2 id="Consulta_també">Consulta també</h2> - -<ul> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">WCAG</a> - - <ul> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable">Percebible</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable">Operable</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable">Comprensible</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust">Robust</a></li> - </ul> - </li> -</ul> |