search

italia / bootstrap-italia

Bootstrap Italia è un tema basato su Bootstrap 5 conforme alle "Linee guida di design per i siti internet e i servizi digitali della Pubblica Amministrazione"
https://italia.github.io/bootstrap-italia
BSD 3-Clause "New" or "Revised" License
311 stars 162 forks source link

Componente `Sidebar`: semantica dei link secondari #1198

Open Mattia541993 opened 2 months ago

Mattia541993 commented 2 months ago

Esiste già una discussione sul tema che ti interessa, o su un tema simile?

Versione della libreria

2.9.0

Cosa

La semantica dei link secondari è esplicita solo a livello visivo, ma non c'è un modo per permettere alle tecnologie assistive di determinare programmaticamente la secondarietà di questi link. Si potrebbe utilizzare il tag <aside> per rendere esplicita la semantica, tuttavia non è completamente supportato da tutte le tecnologie assistive: in particolare Jaws for Windows e VoiceOver ignorano il tag <aside> (anche con <div role="complementary">). Si potrebbe aggiungere un'aria-label="link secondari" all'elenco puntato dei link o un'intestazione nascosta dopo l'apertura del tag <aside>.

Perché

In riferimento alle [WCAG 1.3.1] "Informazioni e correlazione"

Contesto

Aggiornato da @Fupete il 2/9/2024:

Verifiche di accessibilità sui componenti.

⚠️ Sarà da aggiornare lo status delle verifiche nella board census alla risoluzione.

Altro

Aggiornato da @Fupete il 2/9/2024:

Sarà da integrare anche in React kit e Angular kit alla risoluzione.

Fupete commented 2 months ago

Ciao @Mattia541993, grazie per la segnalazione.

Buona idea un aria-label="header link secondari" sul secondo <ul>.

Aggiungo in più che, tranne che nelle varianti "Annidata" e "Con fondo scuro", sarebbe secondo me anche da spostare l'h3 "Header" fuori subito prima dal primo elenco <ul>. In modo che il numero dei link di questo prima elenco sia annunciato correttamente.

Sul tag <aside> invece ho un dubbio più ampio: non è che tutta la sidebar dovrebbe in un mondo ideale essere raccolta dentro un <aside>? Essendo tutta la sidebar stessa per sua natura complementare al contenuto principale di pagina.... che è quanto indica un aside a livello semantico no? O, forse ancora meglio sarebbe raccoglierla dentro un <nav>, contenendo la sidebar solo link di navigazione... seguendo quanto già fatto per la sidebar di https://designers.italia.it/design-system/componenti. Questa sarebbe anche la soluzione gov.uk https://design-system.dwp.gov.uk/components/side-navigation/#d-item-1 per es.

Mattia541993 commented 2 months ago

La questione dell'h3 anche io l'ho notata, ma non ho trovato una linea guida specifica che dica che lì è sbagliato metterlo. Comunque a rigor di logica anche a me pare più corretto mettere l'h3 fuori dall'elenco.

Per quanto riguarda l'<aside> può essere che tutta la sidebar possa essere <aside>, ma che dentro la sidebar ce ne possa essere un altro. Non è importante che ci sia un solo aside dentro una pagina: In questo documento del W3C sono usati più aside nell'ultimo esempio.