{"sha":"25707d2532a5bd0c29c50da322bd9e0c5e47b136","node_id":"MDY6Q29tbWl0NjM2NzMwMTk6MjU3MDdkMjUzMmE1YmQwYzI5YzUwZGEzMjJiZDllMGM1ZTQ3YjEzNg==","commit":{"author":{"name":"slrq4050","email":"vincent.aniort@orange.com","date":"2021-08-04T07:01:26Z"},"committer":{"name":"slrq4050","email":"vincent.aniort@orange.com","date":"2021-08-04T07:01:26Z"},"message":"correction relecture\n\tmodified: src/fr/web/exemples-de-composants/page-resultats-recherche/index.njk","tree":{"sha":"728bdbdf4eb5acc0c25a7987df755ca6158b4864","url":"https://api.github.com/repos/Orange-OpenSource/a11y-guidelines/git/trees/728bdbdf4eb5acc0c25a7987df755ca6158b4864"},"url":"https://api.github.com/repos/Orange-OpenSource/a11y-guidelines/git/commits/25707d2532a5bd0c29c50da322bd9e0c5e47b136","comment_count":0,"verification":{"verified":false,"reason":"unsigned","signature":null,"payload":null}},"url":"https://api.github.com/repos/Orange-OpenSource/a11y-guidelines/commits/25707d2532a5bd0c29c50da322bd9e0c5e47b136","html_url":"https://github.com/Orange-OpenSource/a11y-guidelines/commit/25707d2532a5bd0c29c50da322bd9e0c5e47b136","comments_url":"https://api.github.com/repos/Orange-OpenSource/a11y-guidelines/commits/25707d2532a5bd0c29c50da322bd9e0c5e47b136/comments","author":{"login":"Aniort","id":13222389,"node_id":"MDQ6VXNlcjEzMjIyMzg5","avatar_url":"https://avatars.githubusercontent.com/u/13222389?v=4","gravatar_id":"","url":"https://api.github.com/users/Aniort","html_url":"https://github.com/Aniort","followers_url":"https://api.github.com/users/Aniort/followers","following_url":"https://api.github.com/users/Aniort/following{/other_user}","gists_url":"https://api.github.com/users/Aniort/gists{/gist_id}","starred_url":"https://api.github.com/users/Aniort/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Aniort/subscriptions","organizations_url":"https://api.github.com/users/Aniort/orgs","repos_url":"https://api.github.com/users/Aniort/repos","events_url":"https://api.github.com/users/Aniort/events{/privacy}","received_events_url":"https://api.github.com/users/Aniort/received_events","type":"User","site_admin":false},"committer":{"login":"Aniort","id":13222389,"node_id":"MDQ6VXNlcjEzMjIyMzg5","avatar_url":"https://avatars.githubusercontent.com/u/13222389?v=4","gravatar_id":"","url":"https://api.github.com/users/Aniort","html_url":"https://github.com/Aniort","followers_url":"https://api.github.com/users/Aniort/followers","following_url":"https://api.github.com/users/Aniort/following{/other_user}","gists_url":"https://api.github.com/users/Aniort/gists{/gist_id}","starred_url":"https://api.github.com/users/Aniort/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Aniort/subscriptions","organizations_url":"https://api.github.com/users/Aniort/orgs","repos_url":"https://api.github.com/users/Aniort/repos","events_url":"https://api.github.com/users/Aniort/events{/privacy}","received_events_url":"https://api.github.com/users/Aniort/received_events","type":"User","site_admin":false},"parents":[{"sha":"60e9f293812035adfc9aa1c86e564a60b926ceca","url":"https://api.github.com/repos/Orange-OpenSource/a11y-guidelines/commits/60e9f293812035adfc9aa1c86e564a60b926ceca","html_url":"https://github.com/Orange-OpenSource/a11y-guidelines/commit/60e9f293812035adfc9aa1c86e564a60b926ceca"}],"stats":{"total":14,"additions":7,"deletions":7},"files":[{"sha":"e4e7580f9c45652975c8500ca484a9ace4b2b712","filename":"src/fr/web/exemples-de-composants/page-resultats-recherche/index.njk","status":"modified","additions":7,"deletions":7,"changes":14,"blob_url":"https://github.com/Orange-OpenSource/a11y-guidelines/blob/25707d2532a5bd0c29c50da322bd9e0c5e47b136/src%2Ffr%2Fweb%2Fexemples-de-composants%2Fpage-resultats-recherche%2Findex.njk","raw_url":"https://github.com/Orange-OpenSource/a11y-guidelines/raw/25707d2532a5bd0c29c50da322bd9e0c5e47b136/src%2Ffr%2Fweb%2Fexemples-de-composants%2Fpage-resultats-recherche%2Findex.njk","contents_url":"https://api.github.com/repos/Orange-OpenSource/a11y-guidelines/contents/src%2Ffr%2Fweb%2Fexemples-de-composants%2Fpage-resultats-recherche%2Findex.njk?ref=25707d2532a5bd0c29c50da322bd9e0c5e47b136","patch":"@@ -20,7 +20,7 @@ tags: componentsExamples_fr\n </form>\n \n
\n-Nota bene : bien sûr, il est toujours mieux de privilégier une étiquette de champ de formulaire visible pour tout utilisateur, cependant, pour un champ de recherche, seul élément de formulaire dans la page, c'est envisageable !\n+
Nota bene : bien sûr, il est toujours mieux de privilégier une étiquette de champ de formulaire visible pour tout utilisateur, cependant, lorsqu'il n'y a qu'un champ de recherche comme seul élément de formulaire dans la page, c'est envisageable !\n
\nAttention : lorsque plusieurs formulaires de recherche existent dans la page, il faut nommer spécifiquement chaque role=\"search\"
avec un aria-label
ou aria-labelledby
:
\n \n@@ -44,17 +44,17 @@ tags: componentsExamples_fr\n
Par exemple, \"2 résultats pour la recherche 'Fibre' - Orange.com\"
\n+Par exemple, \"2 résultats pour..... 'Fibre' - Orange.com\"
\n \nIl est plus pratique pour les utilisateurs de privilégier un rechargement asynchrone des résultats afin de ne pas charger une nouvelle page, toujours perturbant pour les utilisateurs.
\nQuoi qu'il en soit, le contenu principal de la page doit afficher les résultats trouvés. Ils doivent se situer juste après le formulaire de recherche afin d'être l'élément suivant de la navigation clavier, juste après le bouton d'envoi de la recherche.
\nIl faut faire précéder les résultats d'un titre de rubrique, reprenant le terme recherché et le nombre total de résultats et, si besoin, en cas de pagination, le nombre de résultats affichés ans la page.
\n-Ce titre de rubrique doit être notifié aux utilisateurs, y compris ceux utilisant des aides techniques et en particulier, des lecteurs d'écran. Pour cela, nous utilisons de l'ARIA, le role=\"alert\"
permettra une lecture dynamique du contenu de l'élément au AT.
Ce titre de rubrique doit être notifié aux utilisateurs, y compris ceux utilisant des aides techniques et en particulier, des lecteurs d'écran. Pour cela, nous utilisons de l'ARIA, le role=\"alert\"
permettra une lecture dynamique du contenu de l'élément au AT, sachant que nous rechargerons à chaque recherche cette partie de page (le role=\"alert\"
n'étant lu qu'une fois à la différence de aria-live=\"true\"
).
\n ...\n@@ -68,16 +68,16 @@ tags: componentsExamples_fr\n ...\n
\n \n-Nota bene : la pagination des résultats de recherche est une bonne option pour éviter des pages trop longue de résultats. Cependant, il ne faut pas utiliser de chargement dynamique infini au scroll qui est particulièrement inaccessible.
\n+Nota bene : la pagination des résultats de recherche est une bonne option pour éviter des pages de résultats trop longues. Cependant, il ne faut pas utiliser le chargement dynamique infini an particulier au scroll, car il est souvent inaccessible et peu utilisable.
\n \nSémantiquement, les résultats de la recherche à afficher sont, soit une liste (ordonnée ou pas), soit un tableau de données. Si des filtres, par exemple, permettent de classer les résultats par pertinence, nombre d'occurrences du terme recherché, par date... alors il faudra choisir une liste ordonnée ol
ou signifier cet ordre de tri dans le tableau de résultats. Le choix de la sémantique des résultats va dépendre de plusieurs critères :
\n
Pour ce qui est de la sémantique de chaque résultat, le titre de l'article, le nom du produit... doivent être un titre de rubrique, le chapeau, les détails... mis dans un paragraphe ou dans une cellule de tableau de données.
\n+Pour ce qui est de la sémantique de chaque résultat, le titre de l'article, le nom du produit... doivent être un titre de rubrique, le chapeau ou le résumé, les détails... mis dans un paragraphe ou dans une cellule de tableau de données.
\nRemarque, il est souhaitable de mettre en emphase visuelle (surligné, souligné...) et sémantique (em
, strong
...) le terme recherché dans les résultats affichés !