Com millorar l’accessibilitat dels portals web de PortalEdu

Imatge Categoria Formació

Descobrix com millorar l’accessibilitat dels portals web allotjats en PortalEdu per a garantir que tots els usuaris, siguen quals siguen les seues condicions, puguen accedir i utilitzar amb comoditat el contingut d’estos portals sense barreres.

A continuació, se citen alguns dels errors més freqüents de falta d’accessibilitat en les nostres publicacions i quina seria la solució perquè el contingut complisca els estàndards d’accessibilitat.

  1. Utilitza text alternatiu per a descriure les teues imatges

Les imatges han de tindre la propietat ‘Alt’ amb un text que descriga la imatge perquè les persones amb discapacitat visual, tinguen l’oportunitat de comprendre al complet la pàgina web. Esta propietat és utilitzada pels lectors de pantalla, per a verbalitzar el contingut d’una imatge.

Solució: emplena el quadre de text ‘Text alternatiu’ amb el text que descriga la imatge
en la pantalla de ‘Detalls’ que s’accedix en polsar sobre la imatge a la ‘Biblioteca de mitjans’.

Imatge com introduir text alternatiu

2. Utilitza text descriptiu per als enllaços

Els enllaços han de tindre un text descriptiu perquè els lectors de pantalla, utilitzats per les persones amb limitació en la seua capacitat visual, puguen dictar correctament l’enllaç.

Solució: Intenta evitar l’edició HTML directa en PortalEdu i empra l’editor Gutenberg per a implementar correctament l’enllaç tal com es mostra en la següent imatge:

Pestaña que muestra cómo incluir correctamente un hipervínculo en el editor Gutenberg.

3. Etiqueta correctament els encapçalats (H1, H2…)

Els encapçalats han de contindre el text ben etiquetat, és a dir, incloure correctament les etiqueta d’inici i tancament, com per exemple ‘<h1>Títol</h1>’ perquè no aparega sense contingut.

Solució: Intenta evitar l’edició HTML directa en PortalEdu i empra l’editor Gutenberg per a etiquetar correctament l’encapçalat tal com es mostra en la següent imatge:

Pestaña que muestra cómo incluir correctamente un encabezado en el editor Gutenberg.

4. Utilitza un contrast alt en els textos

Els textos han de ressaltar sobre el seu fons, perquè siguen còmodament visibles pels usuaris. Per a això, entre el color de la font i el color del fons ha d’haver-hi un alt contrast, aplicable tant per a entrades, com per a pàgines i botons.

Solució: Utilitza un color adequat en el panell dret ‘Ajustos – apartat Colors – Text‘.

Pestaña que muestra cómo modificar correctamente el color del título en el editor Gutenberg.

Si tens dubte sobre el contrast dels colors que has aplicat, llig el següent apartat, on t’expliquem com comprovar l’accessibilitat de la teua pàgina o post.

Comprova l’accessibilitat del teu portal

Existixen ferramentes automàtiques d’anàlisis d’accessibilitat web per a la detecció de contingut no accessible. Visita la nostra entrada sobre Wave per a conéixer com fer esta anàlisi en el teu portal.

Comprova l’accessibilitat del teu portal

Existixen ferramentes automàtiques d’anàlisis d’accessibilitat web per a la detecció de contingut no accessible en el nostre portal. En este post et parlarem de la ferramenta Wave, que ens permet comprovar les fallades que puga presentar una pàgina o post publicat.

Com utilitzar Wave?

1) Accedix a https://wave.webaim.org/ i introduïx en el camp ‘Web page address’ la url de la pàgina a analitzar, ja que no analitza el lloc web complet:

Página web del editor 'Wave'.

2) Veurem que la ferramenta mostra abundant informació. És important arreglar els errors. També podem revisar els advertiments i valorar la seua correcció. Els errors i advertiments d’accessibilitat apareixen en el panell esquerre. En polsar sobre l’element detectat es posiciona la pàgina sobre este error en el panell dret. Així mateix en el panell inferior es mostra el codi font de l’error detectat. Serà llavors quan comptem amb tota la informació necessària per a rectificar estos errors.

Panel de errores de accesibilidad ofrecido por la herramienta Wave.

A vegades, la ferramenta en línia no pot accedir a pàgines que no són públiques, és a dir, les que estiguen encara en esborrany. Si volem analitzar l’accessibilitat de pàgines que no estiguen publicades, podem instal·lar-nos en el navegador el complement que ens oferix Wave en la seua pàgina web principal:

Página web principal de la herramienta 'Wave' con el apartado destacado para descargar su extensión.

Després, una vegada instal·lada en el nostre navegador habitual, només cal polsar sobre el menú de complements en l’opció ‘Wave Evaluation Tool’:

Actualització de PortalEdu a WordPress 6.3

Imatge Categoria Millores

S’ha actualitzat el core de WordPress a la versió 6.3. També s’han actualitzat la majoria de plugins que conformen la funcionalitat de PortalEdu. Podreu consultar algunes de les millores funcionals de PortalEdu en els següents posts que hem preparat:

Actualització a WordPress 6.3: Descripció general

Actualització a WordPress 6.3: Nous blocs en l’editor

GenerateBlocks: Nous blocs i redundància

Configuració dels blocs de l’editor

Esperem que us siguen útils.

GenerateBlocks: Nous blocs i redundància

Després que PortalEdu haja incorporat el plugin GenerateBlocks, alguns dels nous blocs afegits per este plugin dupliquen funcionalitats dels blocs estàndard de Gutenberg, ja disponibles anteriorment en l’editor de blocs. Si béno és possible eliminar cap dels blocs duplicats, ja que això afectaria les entrades que hagueren fet ús d’ells, cada usuari pot ocultar, en l’editor, aquells blocs que no desitge utilitzar. Els blocs enriquits que aporta GenerateBlocks, es distingixen per aparéixer la seua icona en color blau, en lloc de negre. Veure més informació sobre aquest tema ací.

Els nous blocs afegits i la funcionalitat dels quals estaria replicada són: Imatge, Titular, Botó i Bucle de consulta. Estos blocs esmentats, si bé reproduïxen funcionalitats ja presents anteriorment, permeten més opcions de configuració, sobretot a nivell visual.

GenerateBlocks millora el bloc imatge amb el seu propi bloc anàleg, on existix la possibilitat d’editar la grandària, les vores, l’espaiat i altres opcions visuals sobre esta.

Replicant la funcionalitat del bloc encapçalament, el bloc Titular de GenerateBlocks afig més opcions de disseny com a vores, tipografies i colors.

Igual que per a la resta de blocs, GenerateBlocks afig més opcions de configuració a nivell visual amb el seu element botó.

El bloc Bucle de consulta de GenerateBlocks afig més dissenys per a la visualització de les entrades. Així com augmenta les possibilitats de filtrat de la consulta.

Configuració dels blocs de l’editor

Amb l’actualització a WordPress 6.3. s’ha afegit la possibilitat d’ocultar blocs en l’editor Gutenberg, de manera que un usuari pot decidir simplificar o reduir la quantitat de blocs que se li mostren en editar un post.
L’ocultació funciona per usuari, no per lloc. En cas que un usuari pertanga a més d’un lloc de PortalEdu, les preferències que haja configurat per a l’editor Gutenberg li acompanyaran, independentment del lloc en què treballe a cada moment.

Gutenberg_ocultar_blocs

Els passos necessaris per a accedir al diàleg d’ocultació són:

1.- Des de l’editor Gutenberg, fer clic sobre els «tres punts» de la cantonada superior dreta de la pantalla.

2.- Polsar sobre l’última opció de menú: «Preferències»

3.- En el diàleg que apareix, fer clic sobre l’opció «Blocs»

4.- Una vegada ací, desmarcar aquells blocs que no es vol que mostre l’editor.

Actualització a WordPress 6.3: Nous blocs en l’editor

Recopilació de blocs nous, moguts i suprimits de l’editor de blocs

Generate blocks

Apareixen dos blocs nous:

  • Bucle de consulta
  • Imatge

Text

Apareixen dos blocs nous:

  • Detalls
  • Notes al peu

Disseny

  • Apareixen dos blocs nous:
    • Fila
    • Pila
  • Es mouen al conjunt de blocs del tema els següents blocs:
    • Logo del lloc
    • Descripció del lloc
    • Títol del lloc
    • Títol de l’arxiu
    • Categories de les entrades
    • Etiquetes de l’entrada

Widgets

Desapareix giny tradicional

Tema

A més dels ginys moguts des de disseny, desapareix el giny “Contingut d’una entrada” i apareix el següent conjunt de ginys:

  • Navegació (Permet inserir menús)
  • Avatar
  • Autor de l’entrada
  • Nom de l’autor de l’entrada
  • Data de l’entrada
  • Data de modificació de l’entrada
  • Entrada següent
  • Entrada posterior
  • Llegir més
  • Descripció del terme
  • Títol de l’arxiu
  • Títols dels resultats de la cerca
  • Biografia de l’autor de l’entrada

Actualització a WordPress 6.3: Descripció general

Recentment PortalEdu ha sigut actualitzat a la versió WordPress 6.3, també conegut com “Ellery”. Esta introduïx una sèrie de millores significatives en la plataforma, incloent:

Millores en l’experiència d’edició:

  • Navegació millorada en l’editor de blocs: S’ha redissenyat la navegació de l’editor del lloc perquè siga més intuïtiva i fàcil d’usar.
  • Nou sistema de patrons de blocs: S’ha introduït un nou sistema de patrons de blocs més flexible i potent.
  • Paleta de comandaments: S’ha afegit una nova paleta de comandaments que permet accedir ràpidament a les funcions de l’editor.

Característiques addicionals i millores de l’editor de llocs:

  • Nous blocs: S’han afegit nous blocs, com el bloc de “Navegació”, “Notes al peu” o “Detalls”.
  • Ferramentes de disseny millorades: S’han millorat les ferramentes de disseny de l’editor, com la ferramenta d’alineació i la ferramenta d’espaiat.

Millores en el rendiment i l’accessibilitat:

  • Optimització del lliurament de JavaScript: S’ha optimitzat el lliurament de JavaScript per a millorar el temps de càrrega de la pàgina.
  • Millores en el contrast: S’han realitzat millores en el contrast perquè l’editor del lloc web siga més accessible.
  • Millores per a l’ús de lectors de pantalla: S’han realitzat millores que afecten l’experiència d’usuaris que utilitzen lectors de pantalla amb determinats navegadors.

En la versió 6.3 de WordPress s’han introduït nous blocs, disponibles des de l’editor. En comparació amb la versió 5.8, estos són alguns dels més destacats:

Blocs nous:

  • Notes al peu de pàgina: Permet agregar notes al peu de pàgina a les teues publicacions i pàgines. Pots personalitzar l’estil del text, el color de l’enllaç i el disseny del bloc.
  • Detalls: Et permet mostrar informació detallada sobre un tema específic, com un projecte, una persona o un esdeveniment. Pots agregar imatges, text i altres blocs dins del bloc Detalls.
  • Patrons de blocs: Et permet guardar grups de blocs com a plantilles reutilitzables. Pots usar estos patrons per a crear dissenys de pàgina consistents en tot el teu lloc web.

Millores en blocs existents:

  • Coberta (Fons): S’ha millorat el bloc Portada (Coberta) amb noves opcions de disseny i la possibilitat d’agregar un vídeo de fons.

Altres millores:

  • S’ha afegit un nou filtre de bitó (dos tons) per a les imatges.
  • S’ha millorat l’accessibilitat de l’editor de blocs.
  • S’ha optimitzat el rendiment de l’editor de blocs.
  • S’han corregit diversos errors i bugs.

A més dels blocs nous i les millores en els blocs existents, la versió 6.3 de WordPress també manté i evoluciona pràctiques funcionalitats de l’editor de blocs, com:

  • Un mode de vista prèvia que et permet previsualitzar el teu contingut simulant diferents dispositius.
  • La possibilitat de desfer i refer accions.
  • La possibilitat de copiar i pegar blocs.
  • La possibilitat d’agrupar blocs.
  • La possibilitat d’exportar i importar blocs.

En general, la versió 6.3 de WordPress representa una important actualització de l’editor de blocs, amb noves funcions i millores que el fan més potent i flexible.

Avís de parada del portal

Imatge Categoria Incidències

Per tasques de manteniment, la plataforma PortalEdu podrà NO estar disponible al llarg del matí (7:30h a 8:30h) del divendres 12 d’abril de 2024. Disculpeu les molèsties.

Tancament Comunitats Mestreacasa

Logo Mestreacasa

Dins de les actuacions planificades per al tancament de Mestreacasa, s’ha deshabilitat l’accés a les Comunitats de Mestreacasa que no tenien activitat. Si penseu que es tracta d’un error, podeu posar un tiquet al SAI en la cua de Mestreacasa.

Gràcies per la vostra col·laboració.

Generateblocks, element contenidor

  1. Propòsit:
    • El bloc Contenidor té com a objectiu principal agrupar i contindre altres blocs. Proporciona un contenidor visual i estructural que permet organitzar i personalitzar la presentació dels elements dins d’ell.
  2. Característiques Clau:
    • Disseny Flexible: Permet ajustar l’ample del contenidor per a adaptar-se a les necessitats específiques del disseny.
    • Fons Personalitzable: Oferix opcions per a personalitzar el fons del contenidor, incloent-hi colors i gradients.
    • Marges i Farciments: Facilita el control precís dels marges i farciments al voltant del contenidor.
    • Opcions de Responsividad: Permet definir comportaments específics per a diferents grandàries de pantalla, assegurant una presentació adequada en dispositius mòbils i d’escriptori.
  3. Ús Comú:
    • Seccions i Blocs Complexos: Utilitzat per a crear seccions de pàgina o blocs més complexos en organitzar altres blocs dins d’ell.
    • Personalització Estilística: És fonamental per a la personalització estilística avançada de seccions específiques d’una pàgina.
  4. Integració amb Gutenberg:
    • Totalment integrat amb l’editor de blocs Gutenberg de WordPress, la qual cosa facilita la creació i personalització de contingut visualment atractiu.
  5. Compatibilitat amb GenerateBlocks:
    • Interactua sense problemes amb altres blocs proporcionats per GenerateBlocks, la qual cosa permet una flexibilitat i coherència en el disseny.