{"id":1054,"date":"2020-04-14T13:58:24","date_gmt":"2020-04-14T11:58:24","guid":{"rendered":"http:\/\/blogs.uab.cat\/editorsweb\/?p=1054"},"modified":"2025-12-11T16:58:27","modified_gmt":"2025-12-11T14:58:27","slug":"siguem-accessibles","status":"publish","type":"post","link":"https:\/\/webs.uab.cat\/webedit\/2020\/04\/14\/siguem-accessibles\/","title":{"rendered":"Siguem accessibles"},"content":{"rendered":"\n<p class=\"wp-block-uab-entradeta entradeta\">Dins del vocabulari que fem servir a l\u2019equip web hi ha una s\u00e8rie de paraules recurrents que diem amb posat seri\u00f3s i que quan les invoquem sembla que no pot haver-hi res que els faci ombra. Alguns exemples serien: accessibilitat, usabilitat, transpar\u00e8ncia, posicionament a cercadors. Aquesta entrada la dedicarem a l\u2019Accessibilitat, veurem qu\u00e8 \u00e9s, quines implicacions t\u00e9 per la Universitat i qu\u00e8 podeu fer vosaltres com a editors per ajudar-nos a millorar-la.<\/p>\n\n\n\n<!--more-->\n\n\n\n<dl class=\"pir\">\n<dt>Qu\u00e8 \u00e9s l&#8217;accessibilitat?<\/dt>\n<\/dl>\n\n\n\n<p>Segons el diccionari \u00e9s la qualitat d\u2019accessible. Per\u00f2 dins del m\u00f3n de les p\u00e0gines web aix\u00f2 implica moltes coses. Que una p\u00e0gina web sigui accessible vol dir que l\u2019han de poder consultar totes les persones, des de qualsevol plataforma, entorn, resoluci\u00f3, dispositiu i navegador. Hem de tenir en compte que hi ha molts factors que donem per descomptats i que poden no ser certs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tothom veu la pantalla<\/li>\n\n\n\n<li>Tothom navega amb el ratol\u00ed<\/li>\n\n\n\n<li>Tots veiem els mateixos colors<\/li>\n\n\n\n<li>Tothom sap llegir<\/li>\n\n\n\n<li>Les icones s\u00f3n universalment reconegudes<\/li>\n\n\n\n<li>Tothom t\u00e9 auriculars \/ altaveus<\/li>\n\n\n\n<li>Tothom hi sent<\/li>\n<\/ul>\n\n\n\n<dl class=\"pir\">\n<dt>Per qu\u00e8 hem de tenir una p\u00e0gina web accessible?<\/dt>\n<\/dl>\n\n\n\n<p>Hi ha molts motius per\u00f2 un pesa molt m\u00e9s que els altres: la llei ens obliga. Actualment hi ha les normatives seg\u00fcents que ens afecten:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/eur-lex.europa.eu\/legal-content\/ES\/TXT\/?uri=uriserv:OJ.L_.2016.327.01.0001.01.SPA\" target=\"_blank\" rel=\"noopener noreferrer\">Directiva (UE) 2016\/2102<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.boe.es\/eli\/es\/rd\/2018\/09\/07\/1112\/con\" target=\"_blank\" rel=\"noopener noreferrer\">Real Decreto 1112\/2018<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-uab-alerta missatge alerta\">El comprom\u00eds de la UAB \u00e9s arribar a complir el nivell de conformitat \u2018Doble-A\u2019 (AA), tal com exigeixen a les administracions p\u00fabliques les legislacions europea i estatal.<\/p>\n\n\n\n<dl class=\"pir\">\n<dt>Qu\u00e8 pots fer tu per l&#8217;accessibilitat del web de la UAB?<\/dt>\n<\/dl>\n\n\n\n<p>Hi ha un seguit de bones pr\u00e0ctiques que podem fer quan generem o editem contingut per la nostra p\u00e0gina web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Textos alternatius pels elements no textuals<\/h2>\n\n\n\n<p>Qualsevol informaci\u00f3 (imatges, botons, v\u00eddeos) ha de tenir el seu equivalent en text.<br>Aix\u00f2 implica que sempre que donem d\u2019alta un asset imatge dins del gestor, hem d\u2019emplenar tots els camps \u201cTexte ALT\u201d. En el cas de que inserim la imatge directament en el text gen\u00e8ric emplenar sempre el camp \u201cText alternatiu\u201d.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/webs.uab.cat\/edicio-web\/wp-content\/uploads\/sites\/31\/2019\/04\/Text_alt_inserir_img.gif\"><img decoding=\"async\" src=\"https:\/\/webs.uab.cat\/edicio-web\/wp-content\/uploads\/sites\/31\/2019\/04\/Text_alt_inserir_img.gif\" alt=\"Ubicaci\u00f3 del camp Text alternatiu a la finestra de Propietats de la imatge\" class=\"wp-image-1061\"\/><\/a><\/figure>\n<\/div>\n\n\n<p>Els textos alternatius de les imatges han de ser descriptius i explicar el mateix que volem dir amb la imatge.<br>Exemple: La rectora lliura el diploma a Marie Paule Kieny.<\/p>\n\n\n\n<p>Si en comptes d&#8217;inserir una imatge hem fet servir un <a href=\"https:\/\/webs.uab.cat\/webedit\/bones-practiques-2__trashed\/edicio-de-continguts\/manual\/embed-2\/\" data-type=\"page\" data-id=\"4091\">asset Multim\u00e8dia de tipus Embed<\/a>, cal que emplenem correctament el camp T\u00edtol.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Textos dels enlla\u00e7os<\/h2>\n\n\n\n<p>Un enlla\u00e7 ha d\u2019explicar on va i cal evitar expressions gen\u00e8riques del tipus \u201cM\u00e9s informaci\u00f3\u201d o \u201cclica aqu\u00ed\u201d.<br>Exemple: Horaris de 1r curs del grau de Matem\u00e0tiques<\/p>\n\n\n\n<p>Igualment, cal evitar que en una mateixa p\u00e0gina hi hagi m\u00e9s d&#8217;un enlla\u00e7 on el text sigui igual per\u00f2 el dest\u00ed de l&#8217;enlla\u00e7 sigui diferent. De vegades \u00e9s inevitable com per exemple en la p\u00e0gina dels <a href=\"https:\/\/www.uab.cat\/web\/estudiar\/grau\/oferta-de-graus\/centres-docents-1345664532351.html\" target=\"_blank\" rel=\"noopener noreferrer\">centres docents de la Universitat<\/a>. Si tamb\u00e9 \u00e9s el vostre cas, consulteu l&#8217;entrada seg\u00fcent: <a href=\"https:\/\/webs.uab.cat\/webedit\/2020\/06\/08\/un-mateix-text-denllac-pero-diferents-url-de-desti\/\">Un mateix text d\u2019enlla\u00e7 per\u00f2 diferents url de dest\u00ed?<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Confecci\u00f3 de taules<\/h2>\n\n\n\n<p>Nom\u00e9s quan sigui necessari. Per exemple, no s\u2019han de fer servir si el que volem \u00e9s \u201cmaquetar\u201d elements dins d\u2019un text. Si teniu dubtes, contacteu-nos i us ajudarem a trobar la soluci\u00f3 m\u00e9s adequada.<\/p>\n\n\n\n<p>Exemple correcte:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"137\" src=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2020\/05\/taula-desktop.gif\" alt=\"Visualitzaci\u00f3 de la taula en format desktop\" class=\"wp-image-6610\"\/><\/figure>\n\n\n\n<p>Exemple incorrecte:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><a href=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2018\/11\/alerta.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"310\" height=\"236\" class=\"alignnone size-full wp-image-931\" src=\"https:\/\/webs.uab.cat\/edicio-web\/wp-content\/uploads\/sites\/31\/2018\/11\/alerta.jpg\" alt=\"Imatge d'alerta\"><\/a><\/td><td>Text explicatiu al costat de la imatge. S&#8217;ha fet servir una taula per fer la maquetaci\u00f3<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Les taules han de ser senzilles, evitant combinar cel\u00b7les. En el moment de generar-la, omplirem el camp \u201cT\u00edtol de la taula\u201d. Per fer una taula correctament caldr\u00e0 que seguiu les instruccions de l&#8217;entrada seg\u00fcent: <a href=\"https:\/\/blogs.uab.cat\/webedit\/2020\/05\/28\/bones-practiques-a-lhora-de-fer-taules\/\">Bones pr\u00e0ctiques a l\u2019hora de fer taules<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Llistats<\/h2>\n\n\n\n<p>Crear les llistes amb els botons del ckeditor, d\u2019aquesta manera, l\u2019html estar\u00e0 ben estructurat i ser\u00e0 comprensible pels lectors de pantalla. Teniu dos botons per fer llistats:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>El bot\u00f3 de llistats enumerats: <a href=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2019\/04\/LlistaOrdenada.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"20\" height=\"20\" class=\"alignnone size-full wp-image-1022\" src=\"https:\/\/webs.uab.cat\/edicio-web\/wp-content\/uploads\/sites\/31\/2019\/04\/LlistaOrdenada.gif\" alt=\"Bot\u00f3 de llista enumerada\"><\/a><\/li>\n\n\n\n<li>El bot\u00f3 de llistats sense enumerar: <a href=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2019\/04\/LlistaPunts.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"20\" height=\"20\" class=\"alignnone size-full wp-image-1023\" src=\"https:\/\/webs.uab.cat\/edicio-web\/wp-content\/uploads\/sites\/31\/2019\/04\/LlistaPunts.gif\" alt=\"Bot\u00f3 de llista sense enumerar\"><\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Format dels textos<\/h2>\n\n\n\n<p>El text i el fons ha de tenir un bon <a href=\"https:\/\/contrastchecker.com\/\">contrast<\/a>. En aquest sentit, el full d&#8217;estils del web ja s&#8217;encarrega d&#8217;aix\u00f2. Com a editors no cal que modifiqueu el color de la tipografia. Tampoc cal que modifiqueu l&#8217;alineaci\u00f3 del text: <a href=\"https:\/\/webs.uab.cat\/webedit\/2016\/12\/02\/justificar-o-no-justificar-he-aqui-la-questio\/\">els textos en web sempre van alineats a l&#8217;esquerra<\/a>.<br>Si enmig d\u2019un text cal canviar l\u2019idioma, ho indicarem fent servir el bot\u00f3 de Definir idioma: <a href=\"https:\/\/webs.uab.cat\/webedit\/wp-content\/uploads\/sites\/667\/2025\/07\/Idioma.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"40\" height=\"26\" class=\"alignnone size-full wp-image-1020\" src=\"https:\/\/webs.uab.cat\/edicio-web\/wp-content\/uploads\/sites\/31\/2019\/04\/Idioma.gif\" alt=\"Bot\u00f3 d'indicaci\u00f3 d'idioma excepcional\"><\/a><\/p>\n\n\n\n<p>Totes les p\u00e0gines tenen una estructura l\u00f2gica i abans de redactar un contingut hem de tenir en compte on s\u2019inserir\u00e0 i que estigui en conson\u00e0ncia amb la resta de seccions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Imatges<\/h2>\n\n\n\n<p>Totes les imatges han d&#8217;estar optimitzades per la web i han de tenir la mida adequada. Si teniu dubtes podeu consultar l&#8217;entrada seg\u00fcent: <a href=\"https:\/\/webs.uab.cat\/webedit\/2017\/04\/28\/millora-la-teva-imatge\/\">Millora la teva imatge<\/a><strong><br><\/strong><span style=\"font-size: 19.2px\">Evitar les imatges que facin pampallugues.<\/span><br>Tampoc \u00e9s aconsellable posar textos dins o sobre d&#8217;una imatge.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Documents<\/h2>\n\n\n\n<p>Els arxius que pugem a la p\u00e0gina web tamb\u00e9 han de complir uns requisits d&#8217;accessibilitat. En el moment de crear-los hem de tenir present seguir una s\u00e8rie bones pr\u00e0ctiques. La Generalitat de Catalunya ha elaborat guies per fer documents Word i PDF accessibles. Us recomanem que les consulteu i les tingueu en compte d&#8217;ara en endavant: <a href=\"http:\/\/atenciociutadana.gencat.cat\/ca\/serveis\/webs\/accessibilitat\/fer-documents-accessibles\/\" target=\"_blank\" rel=\"noopener noreferrer\">&#8220;Com fer documents accessibles&#8221;<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mantenir la coher\u00e8ncia<\/h2>\n\n\n\n<p>Els elements sempre han de tenir el mateix comportament i ubicaci\u00f3. Nom\u00e9s pot ser diferent la portada.<br>L&#8217;usuari ha de poder anticipar quan li canviar\u00e0 la p\u00e0gina i aix\u00f2 nom\u00e9s pot passar quan clica a un bot\u00f3 o un enlla\u00e7.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":24,"featured_media":6691,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,10,13,72],"tags":[19],"class_list":["post-1054","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibilitat","category-edicio-dimatges","category-edicio-de-textos","category-novetats","tag-accessibilitat"],"_links":{"self":[{"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/posts\/1054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/comments?post=1054"}],"version-history":[{"count":11,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/posts\/1054\/revisions"}],"predecessor-version":[{"id":6704,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/posts\/1054\/revisions\/6704"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/media\/6691"}],"wp:attachment":[{"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/media?parent=1054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/categories?post=1054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webs.uab.cat\/webedit\/wp-json\/wp\/v2\/tags?post=1054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}