test-checklist.txt

Test importanti da eseguire

- verificare se abbiamo pianto a sufficienza

Accessibilità:
- Elementi interattivi:
    - Link circolari / Link rotti
    - Tutti raggiungibili col tab
    - Tutti gli input con label (errore sotto l'input)
    - Tutte le pagine con breadcrumb
    - Tab su ogni link e delemento tab si vede sempre a schermo
    - Test con Screen Reader (SCRIVERE SU RELAZIONE SE E' STATO FATTO)
    - alt immagini (SOLO DOVE NECESSARIO)
    - Accessibilità tabelle (se presenti)
    - Numero cambiamenti per secondo (max 3/secondo)
    - abbr con title o comunque con spiegazione
    - Link per accessibilità (torna su, vai al contenuto, vai alla fine, vai alla categoria (per non leggere ogni volta la card) ecc)

- Colori:
    - Contrasti AA:
        - Testo piccolo (< 1.5em) / bg: 4.5
        - Testo grande (> 1.5em) / bg: 3
    - Contrasti AAA:
        - Testo piccolo (< 1.5em) / bg: 7
        - Testo grande (> 1.5em) / bg: 4.5
    - Contrasti link attivi / testo
    - Contrasti link visitati / testo
    - Contrasti link sottolineati / testo
    - Contrasto testo e bg-color quando bg-image non viene caricata
    - Contrasti colore testo e bg
    - Attenzione alle ombreggiature
    - Molti preferiscono bianco su sfondo nero


- Non avere buchi tra gli h (non h1 e h3)
- Tutte le pagine raggiungibili
- Gestione errori (es 404 -> Ops! Sembra tu sia stato bocciato - Accipicchia, non troviamo la ricetta! / 5xx -> Mannaggia all'arrosto, abbiamo sbagliato una ricetta! Risolviamo e siamo subito da te!.)
- Attenzione all'ordine dei tag, gli sr seguono quelli
- Velocità sito
- font accessibili
- attr. lang su parole straniere
- sicurezza dei form (es. get controlli anche lato server, ' OR 1=1; -- ecc.)
- MEASURE UNIT CON ABBR, nel senso che è una abbr e quindi va messa la parola per intero (ragionare se a questo punto vale scriverle per intero, es. gr -> grammi, q.b. -> quanto basta, ecc.)
- Codice HTML e CSS DEVE ESSERE VALIDO NELLA SUA INTEREZZA
- Presenza file css per stampa, mobile e normale
- Unico file css per tutte le cose css (ovviamente uno per tipo ma contiene le info per tutte le pagine)
- Testare PHP e JS
- Per indicazioni di trasporto bene aggiungere info anche per trasporti pubblici (es. magari si mette Come raggiungere? in macchina -> indirizzo, con mezzi pubblici -> prendi il bus per Hogwarts e scendi alla fermata numero 9 e 3/4)
- Mappe con descrizione nascosta (per mappa Google si può lasciar far leggere, openstreetmap omettere la lettura da parte dello screen reader)
- Controllare vada bene senza le immagini


FALSI POSITIVI:
(all) salta al contenuto deve essere la prima
(all) label sono prima di input in hamburger e altro
(all) aria-label nella breadcrumb
(index) label scopri se fa per te non unica
(catalogo) order by non ha il submit
(catalogo) onchange non dovrebbe chiamare il submit ma ci serve
(catalogo) #top funziona da se https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier
(aboutus) legend in fieldset proposta

STRUMENTI
W3ba11y

in teoria per ogni img mostra lunghezza dell'alt, peso e altro. Risulta importante anche per gli header.
Non si trova né nelle estensioni di ff né in quelle di chrome, ma penso che la repo sia questa: https://github.com/fabbricca/w3ba11y

ARC TOOLKIT

Non è più possibile scaricarla per chrome (forse per i recenti cambiamenti sulle estensioni) ma su ff c'è ancora. Sito credo ufficiale: https://www.tpgi.com/arc-platform/arc-toolkit/

WAVE WebAim

https://wave.webaim.org/extension/

SILKTIDE

https://chromewebstore.google.com/detail/silktide-accessibility-ch/mpobacholfblmnpnfbiomjkecoojakah
La professoressa consiglia però fare affidamento più su TOTAL VALIDATOR

WCAG (Contrasto colori)

https://chromewebstore.google.com/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf

HTML 5 (staccato) outliner

Per vedere quello che google vede, ottimo per vedere se ci sono cose vuote che non servono a nulla

https://gsnedders.html5.org/outliner/

Color Oracle

https://colororacle.org/

Colorsafe

http://colorsafe.co/