L'accessibilità

class: profilo
<h1>L'accessibilità</h1><h2 class="author">Stefano Bussolon</h2>
---

layout: true
<img src="https://www.bussolon.it/assets/logo_250.png" width="50px" height="50px" style="position:absolute;top:5px;left:5px;"/><div id="footer" style="position:fixed; bottom: 0px;left: 0px;height: 40px; padding:5px; width: 100%;display: flex;align-items: center;"></div>
---

# Accessibilità: definizioni

---

## Accessibilità, utente, contesto

3.15) **accessibilità**: la misura in cui prodotti, sistemi, servizi, ambienti, e infrastrutture possono essere usati dalle persone di una popolazione con la più ampia gamma di bisogni, caratteristiche e capacità per raggiungere i propri obiettivi in specifici contesti d'uso.  
3.1) **Utente**: persona che interagisce con un sistema, un prodotto, o un servizio  
3.10) **contesto d'uso**: il sistema che integra utenti, compiti, risorse (hardware, software, materiali), e l'ambiente fisico e sociale in cui sono usati.

[ISO 9241-112:2017(en), Ergonomics of human-system interaction — Part 112: Principles for the presentation of information](https://www.iso.org/obp/ui/#iso:std:iso:9241:-112:ed-1:v1:en)

**usabilità** il grado in cui un sistema, prodotto o servizio può essere usato da particolari utenti per raggiungere certi obiettivi con efficacia, efficienza e soddisfazione in uno specifico contesto d'uso.

* [ISO 9241-11:2018(en), Ergonomics of human-system interaction — Part 11: Usability: Definitions and concepts](https://www.iso.org/obp/ui/#iso:std:iso:9241:-11:ed-2:v1:en)

???

## Accessibility

> 3.1) **user**: person who interacts with a system, product or service  
> 3.10) **context of use**: users (3.1), tasks, equipment (hardware, software and materials), and the physical and social environments in which a product is used  
> 3.15) **accessibility**: extent to which products, systems, services, environments and facilities **can be used** by people from a population with the **widest range** of user (3.1) **needs**, **characteristics** and **capabilities** to achieve identified goals in identified contexts of use (3.10)

> Assistive Technology (AT): equipment, product system, hardware, software or service that is used to increase, maintain or improve capabilities of individuals (from ISO/IEC Guide 71:2014

---

## Processo, principi, tecniche

L'accessibilità web si riferisce al processo inclusivo finalizzato a rimuovere le barriere che impediscono l'interazione o l'accesso a siti web a persone con disabilità.

È l'insieme di principi e tecniche da applicare nella progettazione, sviluppo, manutenzione e aggiornamento di siti web e applicazioni mobile al fine di renderli accessibili agli utenti, in particolare alle persone con disabilità.

[The European accessibility act](https://eur-lex.europa.eu/eli/dir/2016/2102/oj)

???

Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities.

In the context of this Directive, accessibility should be understood as principles and techniques to be observed when designing, constructing, maintaining, and updating websites and mobile applications in order to make them more accessible to users, in particular persons with disabilities.

---

## Universal design

Design universale si riferisce alla progettazione di prodotti, ambienti, programmi e servizi usabili per tutti, nel modo più inclusivo possibile, senza la necessità di adattamenti o design specializzato.
Il design universale non esclude l'utilizzo di tecnologie assistive da parte delle persone con disabilità, quando necessario.

Design universale: progettazione per tutti, compatibile con le tecnologie assistive.

**[Tecnologie assistive](https://it.wikipedia.org/wiki/Tecnologie_assistive)**: attrezzature, sistemi, hardware, software o servizi utilizzati per mantenere, aumentare o migliorare le capacità delle persone - ISO/IEC Guide 71:2014

[Convention on the Rights of Persons with Disabilities | OHCHR](https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-rights-persons-disabilities#:%7E:text=The%20purpose%20of%20the%20present,respect%20for%20their%20inherent%20dignity.)  
[Accessible EU Report](https://accessible-eu-centre.ec.europa.eu/document/download/335a6949-bc65-451b-9122-398103770fd8_en?filename=ACCESSIBLE%20EU%20REPORT%2002_%20Acc%20Legislation%20E.L.20230608_acc_0.pdf)

???

“accessibility should be achieved by the systematic removal and prevention of
barriers, preferably through a universal design or ‘design for all’ approach, which
contributes to ensuring access for persons with disabilities on an equal basis with
others.”

"Universal design" means the design of products, environments, programmes and services to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design. "Universal design" shall not exclude assistive devices for particular groups of persons with disabilities where this is needed.

---

## Perché è importante?

* **Obbligo di legge**: per le pubbliche amministrazioni e, dal 28 giugno 2025, per ogni azienda (ad esclusione delle micro-aziende, con meno di 9 dipendenti)

* Ragioni etiche: garantire a tutti l'inclusione: **universal design** - **design for all**

* Ha un impatto positivo sull'**usabilità**

* Può avere un impatto positivo sulla **SEO**

---

## Web Content Accessibility Guidelines (WCAG)

Sono le linee guida da seguire per rendere i siti e le applicazioni web accessibili a persone con disabilità visive, auditive, cognitive, neurologiche, fisiche, e del linguaggio.

[Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/)

Le WCAG sono elaborate da [Web Accessibility Initiative (WAI) | W3C](https://www.w3.org/WAI/)

---

## I 4 principi delle WCAG

1. **Percepibile** (Perceivable): Le informazioni e gli elementi dell'interfaccia utente devono essere presentate agli utenti in modalità che possano percepire.
2. **Utilizzabile** (Operable) Gli elementi dell'interfaccia utente e la navigazione devono essere utilizzabili dagli utenti.
3. **Comprensibile** (Understandable): le informazioni e le attività delle interfacce utente devono essere comprensibili.
4. **Robusto** (Robust): Il contenuto deve essere sufficientemente robusto da poter essere interpretato in modo affidabile da una vasta gamma di user agent, inclusi i dispositivi di assistenza.

???

1. **Perceivable:** Information and user interface components must be presentable to users in ways they can perceive.
2. **Operable:** User interface components and navigation must be operable.
3. **Understandable:** Information and the operation of user interfaces must be understandable.
4. **Robust:** Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

---

![percepire, comprendere, agire](https://bussolon.it/didattica/hci/slide/img/accessibility_1.svg)

---

![mvc ristorante](https://bussolon.it/didattica/hci/slide/img/mvc_ristorante.png)

---

## Controller, model, view

```python
@app.route('/get_restaurant', methods=['GET'])
def get_restaurant():
    # Controller: retrieve input from the request
    restaurant_id = request.args.get('id')

# Call the Model to fetch data from the database
    restaurant_data = get_restaurant_data(restaurant_id)

# Step 3: View - Render a template with the data
    return render_template('restaurant_page.html', restaurant=restaurant_data)
```

---

## Percepibile

Le informazioni e le componenti dell'interfaccia devono essere presentati in modo che ogni utente possa percepirle, a prescindere dalle proprie abilità sensoriali

* offrire **alternative testuali** a contenuti non testuali (es. immagini):
	* offrire una descrizione testuale alle immagini (con l'attributo `alt`) [1.1.1](https://www.w3.org/WAI/WCAG22/quickref/#non-text-content)
	* offrire sottotitoli [1.2.2](https://www.w3.org/WAI/WCAG22/quickref/#captions-prerecorded) o trascrizioni per materiali multimediali (audio, video) [1.2.1](https://www.w3.org/WAI/WCAG22/quickref/#audio-only-and-video-only-prerecorded)
* **Adattabile**: Creare contenuti che possano essere rappresentati in modalità differenti (ad esempio, con layout più semplici), senza perdere informazioni o struttura [1.3](https://www.w3.org/WAI/WCAG22/quickref/#info-and-relationships). 
* **Distinguibile**: Rendere più semplice agli utenti la visione e l'ascolto dei contenuti
	* evitare di utilizzare il **colore** come mezzo esclusivo per codificare le informazioni [1.4.1](https://www.w3.org/WAI/WCAG22/quickref/#use-of-color)
	* garantire un sufficiente **contrasto** e **dimensioni** dei font, e permettere di **ingrandire** i font [1.4.3 - 1.4.4 - 1.4.6 - 1.4.8](https://www.w3.org/WAI/WCAG22/quickref/#contrast-minimum).

---

![percepibile](https://bussolon.it/didattica/hci/slide/img/accessibility_perceivable.svg)

---

## Utilizzabile

Ogni utente deve poter interagire con l'interfaccia, a prescindere dalle proprie abilità percettive e motorie

* offrire la possibilità di interagire non solo con il mouse ma anche con la **tastiera** [2.1.1](https://www.w3.org/WAI/WCAG22/quickref/#keyboard)
* offrire ad ogni utente il **tempo** sufficiente per portare a termine i propri compiti [2.2](https://www.w3.org/WAI/WCAG22/quickref/#timing-adjustable)
* **Navigabile**: permettere agli utenti di navigare, trovare i contenuti, e comprendere dove si trovano in maniera semplice. I titoli delle pagine [2.4.2](https://www.w3.org/WAI/WCAG22/quickref/#page-titled), i link (2.4.4), i titoli di sezione (headings - 2.4.6) e le etichette (labels) devono essere corretti, informativi, coerenti
* **Localizzabile** [2.4.8](https://www.w3.org/WAI/WCAG22/quickref/#location): l'utente deve sapere dove si trova nel sito, usando le briciole di pane, la mappa del sito, la posizione nel menu di navigazione
* Modalità di **input**: l'utente deve poter utilizzare tipologie di input differenti

???

- Avoiding design elements that are known to cause seizures (like flashing lights above a certain frequency).

---

![utilizzabile](https://bussolon.it/didattica/hci/slide/img/accessibility_operable.svg)

---

## Comprensibile

Assicurarsi che le informazioni e l'utilizzo dell'interfaccia siano comprensibili da ogni utente

* **Leggibile**: rendere il testo facile da leggere e da comprendere: offrire definizioni di termini tecnici e abbreviazioni [ 3.1.3, 3.1.4](https://www.w3.org/WAI/WCAG22/quickref/#unusual-words), usare linguaggio semplice o offrire una versione semplice di linguaggio complicato [3.1.5](https://www.w3.org/WAI/WCAG22/quickref/#reading-level)
* **Prevedibile**: l'interfaccia deve avere aspetto e funzionamento prevedibili (consistenza esterna ed interna), con navigazione corerente [3.2.3](https://www.w3.org/WAI/WCAG22/quickref/#consistent-navigation) (consistenza interna)
* Offrire opzioni di **aiuto**, di assistenza nell'inserimento, di etichette informative [3.2.6](https://www.w3.org/WAI/WCAG22/quickref/#consistent-help)
* Offrire meccanismi che permettono di identificare [3.3.1, 3.3.3, 3.3.4](https://www.w3.org/WAI/WCAG22/quickref/#error-identification), **prevenire** e **correggere** gli errori, di fornire **suggerimenti** [3.3.3](https://www.w3.org/WAI/WCAG22/quickref/#error-suggestion)  attraverso meccanismi di controllo, conferma, reversibilità - [3.3.6](https://www.w3.org/WAI/WCAG22/quickref/#error-prevention-all)
* rendere accessibili i meccanismi di **autenticazione** [3.3.8](https://www.w3.org/WAI/WCAG22/quickref/#accessible-authentication-minimum)

---

## Robusto

I contenuti e l'interfaccia sono compatibili con un'ampia varietà di user agents, comprese le tecnologie assistive

* usare **codice** corretto, chiaro, che rispetti gli standard [4.1.1](https://www.w3.org/WAI/WCAG22/quickref/#parsing)
* assicurare la **compatibilità** nei browser e nei device più utilizzati

---

# Accessibilità e SEO

---

## [Linee guida Google](https://developers.google.com/search/docs/fundamentals/seo-starter-guide)

**Organizza il sito**

* usa url descrittive
* **raggruppa** argomenti simili in directory
* riduci i contenuti duplicati

**Immagini e video**

* Utilizza immagini e video di buona qualità
* Aggiungi **alternative testuali** descrittive alle immagini e ai video

**Rendi i contenuti interessanti e utili**

* Rendi il testo **facile** da leggere e ben **organizzato**: ben scritto, senza errori; spezza i contenuti lunghi in paragrafi e sezioni, e fornisci intestazioni (`headings`) che permettano di navigare nella pagina
* Crea contenuti originali (non copiati) e aggiornati
* Crea contenuti utili, affidabili, **centrati sulle persone**
* Evita pubblicità invadente
* Aggiungi link a risorse rilevanti, e usa dei testi appropriati

---

## Sinergia

Vi è una sinergia fra

* i principi e le linee guida di accessibilità
* alcuni principi cognitivi (fluenza percettiva, verbale, cognitiva)
* alcune euristiche e linee guida di usabilità
* alcune regole SEO

---

<table>
<thead>
<tr>
<th align="left">Principle</th>
<th align="left">Code</th>
<th align="left">Rule</th>
<th align="left">Fluency</th>
<th align="left">Guidelines</th>
<th align="left">Google SEO</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Perceivable</td>
<td align="left">1,1</td>
<td align="left">Text Alternatives</td>
<td align="left"></td>
<td align="left"></td>
<td align="left">Add descriptive alt text to the image</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">1,2</td>
<td align="left">Time-based Media</td>
<td align="left"></td>
<td align="left"></td>
<td align="left">Write descriptive text in the titles and description fields of a video</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">1,3</td>
<td align="left">Adaptable</td>
<td align="left"></td>
<td align="left">Responsive</td>
<td align="left">Create a mobile-friendly site</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">1,4</td>
<td align="left">Distinguishable</td>
<td align="left">Perceptual</td>
<td align="left">Visual design</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">Operable</td>
<td align="left">2,1</td>
<td align="left">Keyboard Accessible</td>
<td align="left"></td>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"></td>
<td align="left">2,2</td>
<td align="left">Enough Time</td>
<td align="left"></td>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"></td>
<td align="left">2,3</td>
<td align="left">Seizures and Physical Reactions</td>
<td align="left"></td>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"></td>
<td align="left">2,4</td>
<td align="left">Navigable</td>
<td align="left"></td>
<td align="left">Information architecture</td>
<td align="left">Write good link text</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">2,5</td>
<td align="left">Input Modalities</td>
<td align="left"></td>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr>
<td align="left">Understandable</td>
<td align="left">3,1</td>
<td align="left">Readable</td>
<td align="left">Linguistic</td>
<td align="left">Language</td>
<td align="left">The text easy to read and well organized</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">3,2</td>
<td align="left">Predictable</td>
<td align="left"></td>
<td align="left">Consistency, Information Architecture</td>
<td align="left">Group pages in directories</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">3,3</td>
<td align="left">Input Assistance</td>
<td align="left"></td>
<td align="left">Errors</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">Robust</td>
<td align="left">4,1</td>
<td align="left">Compatible with user agents</td>
<td align="left"></td>
<td align="left"></td>
<td align="left">"Crawlers friendly"</td>
</tr>
</tbody>
</table>

???

| Principle              | Code  | Rule                            | Fluency                 | Guidelines                            | Google SEO                                 |
|:-----------------------|:------|:--------------------------------|:------------------------|:--------------------------------------|:-------------------------------------------|
| Perceivable            | 1,1   | Text Alternatives               |                         |                                       | Add descriptive alt text to the image      |
|                        | 1,2   | Time-based Media                |                         |                                       | Write descriptive text in the titles and description fields of a video  |
|                        | 1,3   | Adaptable                       |                         | Responsive                            | Create a mobile-friendly site              |
|                        | 1,4   | Distinguishable                 | Perceptual              | Visual design                         |                                            |
| Operable               | 2,1   | Keyboard Accessible             |                         |                                       |                                            |
|                        | 2,2   | Enough Time                     |                         |                                       |                                            |
|                        | 2,3   | Seizures and Physical Reactions |                         |                                       |                                            |
|                        | 2,4   | Navigable                       |                         | Information architecture              | Write good link text                       |
|                        | 2,5   | Input Modalities                |                         |                                       |                                            |
| Understandable         | 3,1   | Readable                        | Linguistic              | Language                              | The text easy to read and well organized   |
|                        | 3,2   | Predictable                     |                         | Consistency, Information Architecture | Group pages in directories                 |
|                        | 3,3   | Input Assistance                |                         | Errors                                |                                            |
| Robust                 | 4,1   | Compatible with user agents     |                         |                                       | "Crawlers friendly"                        |

---

## Due strategie

**Facilitare** la **fruizione** (adattabile), **percezione** (distinguibile), la **comprensione** (leggibile, prevedibile), l'**utilizzo** (aiuto, identificazione, prevenzione e correzione degli errori), l'**interazione** (navigazione, localizzazione)

**Offrire alternative** **testuali** (alt), permettere l'**interazione** da tastiera,

****

Facilitare l'uso rispetta i principi di fluenza (percettiva, linguistica, cognitiva), migliora l'accessibilità, migliora l'usabilità e l'interpretabilità dei crawler (SEO)

Offrire alternative garantisce l'accessibilità e ha un impatto positivo sulla SEO

---

## Conclusioni

L'accessibilità dei siti web è un obbligo di legge. Ma non solo.

È un requisito per progettare e sviluppare in maniera corretta.

Ha un impatto positivo sulla user experience di ogni utente.

Ha un impatto positivo sulla SEO del sito web.

---

## Risorse

* [Web Accessibility Initiative (WAI) | W3C](https://www.w3.org/WAI/)  
* [WCAG 2 Overview | WAI | W3C](https://www.w3.org/WAI/standards-guidelines/wcag/)  
* [Design and Develop Overview | WAI | W3C](https://www.w3.org/WAI/design-develop/)  
* [Accessibility Principles | WAI | W3C](https://www.w3.org/WAI/fundamentals/accessibility-principles/)  
* [How to Meet WCAG (Quickref Reference)](https://www.w3.org/WAI/WCAG22/quickref/)

****

* [Home Page - Accessibilità Digitale](https://accessibilita.agid.gov.it/)  
* [Designers e Developers - Accessibilità Digitale](https://accessibilita.agid.gov.it/designer-e-developer/)

* [Accessibility Days](https://accessibilitydays.it/)  15 - 16 maggio 2025