Accessibilità in WordPress Teoria, Strumenti e Metodologie WordCamp Roma 2017 – Roma 15/16 Dicembre 2017 Antonio Giovanni Schiavone

Antonio Giovanni Schiavone Chi sono? Antonio Giovanni Schiavone Dottore in Informatica Ex Assegnista di Ricerca c/o CNR (Pisa / Roma) Accessibilità Web Usabilità Web Data Visualization Semantic Web Consulente ICT c/o AgID Progetto Identità Digitali Contatti Web: www.antoniogiovannischiavone.it Twitter: @AGSchiavone Email: antonio.giovanni.schiavone@isti.cnr.it

1. Comprendere l’Accessibilità No, non parlo dell’oggetto costoso che non puoi permetterti

Definiamo l’Accessibilità ACCESSIBILITÀ: “La capacità dei sistemi informatici, nelle forme e nei limiti consentiti dalle conoscenze tecnologiche, di erogare servizi e fornire informazioni fruibili, senza discriminazioni, anche da parte di coloro che a causa di disabilità necessitano di tecnologie assistive o configurazioni particolari” Art. 2, Comma a, Legge 4/2004 – nota anche come Legge Stanca PUNTI CHIAVE: Focus sulla fruibilità di contenuti e servizi. Evitare discriminazioni, anche tecnologiche. Attenzione sopratutto, ma non solo, ai disabili.

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect Tim Berners-Lee Direttore del W3C e inventore del World Wide Web Vincitore del Premio Turing 2016

10%-20% Secondo varie ricerche, la percentuale della popolazione 16+ con qualche tipo di disabilità

Le Tecnologie Assistive TECNOLOGIE ASSISTIVE: Insieme di tutte le tecnologie realizzate ad hoc per rendere accessibili e usabili i prodotti informatici stessi (hardware o software) anche a persone diversamente abili. Lettori di Schermo Tastiere Braille Interfacce Neurali Puntatori Oculari

2. Leggi, Standard e Metodologie L’accessibilità è un obbligo? E come si valuta?

La normativa italiana In Italia la legge che regolamenta l’accessibilità dei siti web è la legge 9 gennaio 2004, n.4, recante «Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici». Essa è soprattutto nota come Legge Stanca, dall’ex Ministro per l'Innovazione Lucio Stanca. In seguito alla revisione del 2013, essa impone la conformità alle WCAG 2.0 livello di conformità AA per i siti web dei seguenti soggetti : SOGGETTI PUBBLICI Enti pubblici economici Aziende municipalizzate regionali Enti di assistenza e di riabilitazione pubblici Aziende di trasporto e di telecomunicazione a prevalente partecipazione di capitale pubblico. SOGGETTI PRIVATI Aziende appaltatrici di servizi informatici Aziende private concessionarie di servizi pubblici Soggetti che usufruiscono di contributi pubblici o agevolazioni per l’erogazione dei propri servizi tramite sistemi informativi o internet. (Ad es. i quotidiani!)

Le WCAG 2.0 Le Web Content Accessibility Guidelines (WCAG) sono le più importanti ed internazionalmente riconosciute linee guida per l’accessibilità dei siti Web. Pubblicate dal World Wide Web Consortium (W3C), la loro ultima versione (WCAG 2.0 del 2012) è anche uno standard ISO (ISO/IEC 40500:2012).

Le WCAG 2.0 Le WCAG sono un documento normativo, contenente insieme di raccomandazioni di tipo astratto su quali aspetti tenere in considerazione nello sviluppo di un sito accessibile. Ad esse si associano : Understanding WCAG 2.0: Documento di approfondimento che fornisce maggiori chiarimenti sui dettagli e sugli intenti delle WCAG. Techniques for WCAG 2.0: fornisce specifiche indicazioni per gli sviluppatori su come sviluppare contenuti Web accessibili, con esempi concreti per alcune tecnologie Web (HTML, CSS, WAI-ARIA, PDF, Scripting Client / Server Side, Flash, etc)

Un caso concreto WCAG 2.0 - 3.1.1 Lingua della pagina: L'impostazione della lingua predefinita di ogni pagina Web può essere determinata programmaticamente. (Livello A) Technique H57 - Using language attributes on the html element Examine the html element of the document. Check that the html element has a lang and/or xml:lang attribute. Check that the value of the lang attribute conforms to BCP 47: Tags for the Identification of Languages or its successor and reflects the primary language used by the Web page. Esempio: <!DOCTYPE html> <html lang="en"> <head> <title>Page in English</title> </head> ………

<i class="fa fa-id-badge" aria-hidden="true"></i> Le WAI-ARIA Le WAI-ARIA sono una specifica del W3C che fornisce un metodo per specificare ruoli, stati e proprietà per widget "custom" in modo da renderli riconoscibili e utilizzabili per gli utenti delle tecnologie di supporto. Fornisce anche un meccanismo per assicurare che gli utenti di queste tecnologie si rendano sempre conto di un aggiornamento dei contenuti <i class="fa fa-id-badge" aria-hidden="true"></i> <div id="status" role="alert" aria-live=“polite"><p>You are online.</p></div> WAI-ARIA Roles HTML5 Semantic Tags

ESPERTI DI ACCESSIBILITÀ VALIDATORI DI ACCESSIBILITÀ Metodologie Le principali metodologie per la valutazione dell’accessibilità sono 3: ESPERTI DI ACCESSIBILITÀ Figure professionali esperte nella verifica dell’accessibilità dei sistemi informatici. A seconda delle necessità, possono fare riferimento diretto a determinate linee guida per l’accessibilità o svolgere la valutazione secondo la loro esperienza. GRUPPI DI VALUTAZIONE Gruppi costituiti da persone con varie tipologie di disabilità, i quali hanno il compito di accedere al sito web in esame, per testarne le funzionalità. Tali prove possono avvenire in contesti usuali o appositamente costituiti, in forma libera o con compiti prestabiliti. VALIDATORI DI ACCESSIBILITÀ Strumenti automatici in grado di verificare la conformità di un sito o di un’applicazione web rispetto ai criteri stabiliti da determinate linee guida per l’accessibilità. Comunemente il loro funzionamento si basa sull’analisi del codice sorgente dell’applicazione web in esame.

I validatori Una lista di vari validatori di accessibilità è disponibile sul sito del WAI, iniziativa del W3C dedicata all’Accessibilità Web: https://www.w3.org/WAI/ER/tools/ SOFTWARE COMMERCIALE SiteImprove SOFTWARE COMMERCIALE FREEMIUM TotalValidator Cynthia Says SOFTWARE GRATUITO / OPENSOURCE MAUVE ( ISTI / CNR - IT) AChecker (Università di Toronto - CA) Wave (WebAIM / Utah State University - US)

Report code-driven

Report grafico

3. Accessibilità e Wordpress Just another Accessible WordPress website

Le tappe 2003 - Prima versione del CMS, le tematiche legate all’accessibilità sono prese in considerazione solo in maniera molto marginale dal team di sviluppo. 2011 - Nasce il WordPress Accessibility Team, con l’obbiettivo di rendere accessibile l’ecosistema Wordpress, a partire dal Core (v 3.3) 2016 - Gli standard di accessibilità vengono inclusi nel Core Handbook. 2016 - Viene adottato come standard di riferimento per l’accessibilità le WCAG 2.0 AA, con l’obiettivo di rendere il Core e i temi ufficiali sempre più aderente a tale standard.

Non si vive di solo Core

Temi accessibility-ready Dal 2015 il processo di revisione dei temi della piattaforma Wordpress.org è stato arricchito dalla possibilità di indicare un tema come accessibile. I temi indicati come accessibili sono sottoposti ad un’ulteriore analisi per verificarne l’aderenza con gli standard di accessibilità richiesti. Solo in caso di esito positivo, il tag accessibility-ready verrà aggiunto a tale tema , e potrà essere selezionato tramite l’apposito filtro.

PLUGIN Al contrario dei temi, non vi è ancora possibilità di revisione e filtrare i plugin in base al loro comportamento rispetto ai requisiti di accessibilità. In compenso vi sono alcuni plugin che hanno lo scopo di migliorare l’accessibilità di un sito. Ad esempio: WP Accessibility Plugin Contact Form 7: Accessible defaults Genesis Accessible Gravity Forms WCAG 2.0 Form Fields

WP Accessibility Plugin sviluppato da Joe Dolson aiuta a risolvere alcuni problemi comuni di accessibilità dei temi di WordPress. Aggiunge attributi di lingua e direzione del testo all'elemento HTML Aggiunge la descrizione alle immagini, usando il campo "Descrizione" dell'immagine. Rimuove l'attributo target dai link. Forza un errore della pagina di ricerca quando viene effettuata una ricerca con una stringa di testo vuota. Aggiunge le etichette ai campi dei moduli WordPress standard se mancanti Mostra il contrasto cromatico tra due valori di colore esadecimali forniti. ……

4. Consigli Pratici Non accettare caramelle dagli sconosc… Ehm no, non quel tipo di consigli

Non rimandare

Scegliere bene i temi

Contenuti accessibili

Verificate il risultato

Domande? Grazie!