cc @danielaiozzo

Check if we can use a link to a "global" privacy page or if we need to develop a new page specific for cloud.italia.it

cc: @libremente

Contesto

Il reflow degli elementi di pagina allo zoom non deve nascondere o sovrapporre elementi
su desktop con zoom fino a 400% (partendo da una viewport di 1024px).
Più o meno corrispondente a zoom 100% (per una viewport di 256px).

Segnalazione 1 > Testata

Problema
Il logo si sovrappone allo slim header andando verso l'alto.
Dovrebbe rimanere separata questa fascia dallo slim header.

Possibili soluzioni
Valutare di nascondere il sottotitolo e di reinserirlo come div visibile solo a risoluzioni xs subito sotto allineandolo a sinistra.
Valutare altrimenti (scelta anche di comunicazione) una soluzione più radicale come quella adottata su innovazione.gov.it dove su risoluzioni xs rimane solo il logo centrato e la denominazione è visibile nella sola homepage, rendendo visibile un div normalmente nascosto.

Segnalazione 2 > Headings

Problema
Su mobile i titoli di sezione (visualizzati con classe css h1) se con parole troppo lunghe creano overflow orizzontale sulla pagina.

Possibile soluzione
Rdurre questi heading ad una classe css h2, sufficiente anche su desktop a creare rilevanza visiva.

Segnalazione 3 > Logo AgID nel footer

Problema
L'immagine non è responsive

Segnalazione 4 > Item risorse utili

Problema
Gli elementi sono poco leggibili perché le due colonne con molto padding laterale schiacciano molto i testi

Possibili soluzioni
A risoluzione xs togliere i padding e margin laterali di questi blocchi.
Valutare se è possibile far andare a capo la colonna di destra con il "Leggi su..." in modo da ottenere una visualizzazione a 1 sola colonna più ordinata

Check a11y issues after meeting with Daniele

Segnalazione

I due pulsanti bianchi del blocco La qualificazione dei servizi... non hanno focus visibile navigando da tastiera.

Segnalazione

Non sono convinto del link su tutta la card per i tre “social”. Di fatto l’aria-label del tag a potrebbe nascondere agli screen reader tutto il contenuto interno della card, che è molto articolato.

Possibile soluzione

Meglio collegare le parole giuste dentro il testo come link. In questo caso "Developers Italia su Slack".
Da valutare se collegare anche immagine e titolo della card, potrebbe creare link ridondanti troppo vicini e non aggiungere nulla all'usabilità.

The order of the events in the timeline must be from the future (top) to the past (bottom)

Replace hero images with new images

L'aria-label delle icone svg deve contenere il messaggio che veicolano:

• link esterno
• documento
• presentazione

Su segnalazione di @Fupete

Current:

Expected:

One of the CI checks is the html proofer.
Currently, it builds a docker container and runs the html proofer inside the container.

We should skip the build phase and use a docker registry.

The component contains blocks of links and must be collapsible.

The first block is always visible, the others can be revealed by clicking on an expand button.

Some texts like 'Open Data Cloud Marketplace' must have a smaller font-size in order to be compliant with the UI design

We need a new apple touch icon. The current one doesn't have transparency and it is ugly.

cc: @Fupete