Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: added title attribute to input for searchSection block #555

Conversation

sabrina-bongiovanni
Copy link
Collaborator

No description provided.

@sabrina-bongiovanni sabrina-bongiovanni added a11y-accessibility Fixes accessibility issues or adds accessibility features v2 labels Feb 23, 2024
@sabrina-bongiovanni sabrina-bongiovanni self-assigned this Feb 23, 2024
giuliaghisini
giuliaghisini previously approved these changes Feb 26, 2024
@SaraBianchi
Copy link

@sabrina-bongiovanni lo scopo del title in questo caso qual'è?
Da quello che sappiamo il tag è più appropriato per gli Screen Reader, se poi non lo si vuole mostrare su FE bisogna aggiungere una classe per nasconderlo

@SaraBianchi
Copy link

Occhio che anche sulla v2 abbiamo il RELEASE.md da aggiornare

@sabrina-bongiovanni
Copy link
Collaborator Author

@SaraBianchi
per il title:
A programmatically determined name allows screen readers to tell the user what the control does. To add a name do one of the following: Use a LABEL element with the FOR attribute set to the ID of the form control Wrap a LABEL element around the form control Add a TITLE attribute Add an ARIA-LABELLEDBY attribute (not supported in all screen readers) Add an ARIA-LABEL attribute (not supported in all screen readers) INPUT elements labelled with the ARIA-LABEL attribute don't work in: SaToGo with IE11 (the previous heading is read instead of the label)

Serve per gli SR e per le analisi automatiche di accessibilità!

Per la release.md, vado ad aggiornarla

@SaraBianchi
Copy link

Perdonami ma la fonte quale sarebbe?

Non so ma io vedo che molti lo sconsigliano perchè il title di per sè ha altre funzionalità più specifiche per link ed immagini, https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute

Screenshot 2024-02-26 alle 10 50 24

Però non sono esperta per cui vedete voi

@sabrina-bongiovanni
Copy link
Collaborator Author

La fonte è il tool di analisi utilizzato per l'accessibilità, e il suggerimento di utilizzare "title" era da parte di Piero
Io non ci vedo grandi problemi, a livello di SR funziona, e il tool lo vede come corretto e quindi permette di far funzionare i check automatici.

@SaraBianchi
Copy link

Allora lo dirigo a @pnicolli , qui https://www.w3.org/WAI/tutorials/forms/labels/#associating-labels-implicitly che è una guida abbastanza ufficiale dice che mischiare aria-label e title è un po too much e forse si rischia un comportamento inatteso, inoltre dice:
This approach is generally less reliable and not recommended because some screen readers and assistive technologies do not interpret the title attribute as a replacement for the label element, possibly because the title attribute is often used to provide non-essential information

Sarei quindi per cambiarlo

@sabrina-bongiovanni
Copy link
Collaborator Author

Possiamo eliminare l'attributo title e utilizzare label con la classe sr-only, però rischiamo che venga letta due volte dagli sr
Bisognerebbe capire se necessario eliminare anche "aria-label" a quel punto

@giuliaghisini
Copy link

Possiamo eliminare l'attributo title e utilizzare label con la classe sr-only, però rischiamo che venga letta due volte dagli sr Bisognerebbe capire se necessario eliminare anche "aria-label" a quel punto

direi che aria-label è l'attributo che deve essere usato. E' fatto a posta per gli screen reader. Se lo screen reader non lo legge allora il problema è un'altro.

@sabrina-bongiovanni
Copy link
Collaborator Author

sabrina-bongiovanni commented Feb 26, 2024

Lo SR lo legge. Il punto è che stiamo/stanno cercando di fare analisi con strumenti automatici che rilevano problemi diversi e che vanno aggiustati per una questione di "certificati" di accessibilità. Per passare questi controlli, occorre ricorrere a tecniche per passare questi controlli.
A questo punto ci sono diverse cose da considerare.

  • Siamo tutti d'accordo che la tecnica migliore sarebbe utilizzare il tag label che viene poi nascosto all'occhio con la classe sr-only o visually-hidden in base alla versione di bootstrap. Il problema è che alcuni SR su alcuni browser potrebbero leggere due volte la label (tag label e aria-label) e dunque andrebbe eliminata anche aria-label
  • Il problema sollevato per l'attributo title per il tag input dà problemi solo su IE che comunque non è più supportato. Per il resto delle combinazioni browser-SR è 100% reliable. https://www.powermapper.com/tests/screen-readers/labelling/input-text-title/ Non ci sono quindi problemi in realtà ad utilizzare "title" appaiato a aria-label

@SaraBianchi @giuliaghisini

@pnicolli
Copy link
Member

Dunque, abbiamo recentemente analizzato la differenza tra title e aria-label durante la verifica di un'altra PR che però non ricordo assolutamente quale fosse, e avevamo visto come in effetti al giorno d'oggi fosse consigliato usare aria-label invece di title. Probabilmente il discorso fatto da me con Sabrina per usare il title è stato precedente e non ci siamo allineati dopo. Poco male, grazie per aver analizzato tutti la questione con attenzione, chiudiamo questa PR perché abbiamo visto comunque che aria-label che c'è già è sufficiente e che l'analisi del caso specifico che ha portato a questa PR è in origine su una customizzazione a cui manca proprio quell'aria-label perché è più vecchia, quindi questa PR non serve più.

@pnicolli pnicolli closed this Feb 29, 2024
@SaraBianchi SaraBianchi deleted the us_50639_v2_searchSection_block_does_not_have_label branch February 29, 2024 10:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y-accessibility Fixes accessibility issues or adds accessibility features v2
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants