Les boutons n'ont pas de nom accessible

[Phenomene]

Bonjour, j'essaie d'améliorer la vitesse de chargement de mes pages. Quelqu'un saurait comment nommer du bouton recherche ?

Merci

J'utilise prestashop 1.6.1.12

[laetitias81]

Bonjour,

 

J'ai le même problème, avez vous trouvé une réponse à votre question depuis ?

[Mediacom87]

Le 18/04/2023 à 4:36 PM, Phenomene a dit :

j'essaie d'améliorer la vitesse de chargement de mes pages

Bonjour,

ce point n'a aucune incidence de performance, cela concerne l'accessibilité du site pour les personnes en situation de handicap.

[Phenomene]

C'est une bonne chose que les personnes en situation de handicap puissent accéder à n'importe qu'elle site internet. Mais concrètement, comment je fait pour que mon site soit accessible à toutes et à tous. Merci

[Lalaru]

Bonjour,

Il suffit d'ajouter l'attribut aria-label

<button aria-label="Recherche"   ...  >

Edited June 27, 2023 by Lalaru (see edit history)

[Phenomene]

Bonjour,

merci de votre réponse

Pouvez-vous me confirmer qu'il faut ajouter ce code dans le fichier block to search (ci dessous) ? Et a quel endroit l'insérer ?

Merci

/* block top search */
#search_block_top {
    position:absolute;
    right: 26%;
    top: 34px;
}
#search_block_top p {padding:0;}
#search_block_top #search_query_top {
    padding:0 5px;
    height:23px;
    width:300px;/* 310 */
    border:1px solid #666;
    border-right: 0 !important;
    color:#666;
    background:url(img/bg_search_input.png) repeat-x 0 0 #fff;
    float: left;
}

#search_block_top .button {
    border:none;
    border-radius:0;
    color:#fff;
    text-transform:uppercase;
    background:url(img/bg_search_submit.png) repeat-x 0 0 #101010;
    float: left;
    height: 25px;
}

form#searchbox{padding-top:5px}
form#searchbox label{color:#333;margin-bottom:1px}
form#searchbox input#search_query_block{
    border: 1px solid #CCCCCC;
    -webkit-border-radius:3px !important;
    -moz-border-radius:3px !important;
    border-radius:3px !important;
    height: 18px;
    margin-top:10px;
}
form#searchbox input#search_button{padding: 1px 4px;}

[Lalaru]

Il s'agit d'un attribut html à insérer dans la balise button, ce n'est pas une propriété CSS.

Dans le fichier tpl de votre theme, là où se trouve votre bouton <button>...</button>, il faut modifier pour ajouter cet attribut aria-label comme ceci : 

<button aria-label="Recherche">...</button>

[Phenomene]

Pouvez-vous me confirmer que c'est dans le fichier blocksearch-top.tpl qu'il faut que j'insère le code ?

Dois-je supprimer et mettre à la place <button aria-label="Recherche">...</button> à l'endroit ou j'ai barré le texte ? ou juste ajouter <button aria-label="Recherche">...</button> après ceci   <button type="submit" name="submit_search" class="btn btn-default button-search">
            <span>{l s='Search' mod='blocksearch'}</span>

 

Merci

 

<!-- Block search module TOP -->
<div id="search_block_top" class="col-sm-4 clearfix">
    <form id="searchbox" method="get" action="{$link->getPageLink('search', null, null, null, false, null, true)|escape:'html':'UTF-8'}" >
        <input type="hidden" name="controller" value="search" />
        <input type="hidden" name="orderby" value="position" />
        <input type="hidden" name="orderway" value="desc" />
        <input class="search_query form-control" type="text" id="search_query_top" name="search_query" placeholder="{l s='Search' mod='blocksearch'}" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" />
        <button type="submit" name="submit_search" class="btn btn-default button-search">
            <span>{l s='Search' mod='blocksearch'}</span>
        </button>
    </form>
</div>
<!-- /Block search module TOP -->

[Lalaru]

<!-- Block search module TOP -->
<div id="search_block_top" class="col-sm-4 clearfix">
    <form id="searchbox" method="get" action="{$link->getPageLink('search', null, null, null, false, null, true)|escape:'html':'UTF-8'}" >
        <input type="hidden" name="controller" value="search" />
        <input type="hidden" name="orderby" value="position" />
        <input type="hidden" name="orderway" value="desc" />
        <input class="search_query form-control" type="text" id="search_query_top" name="search_query" placeholder="{l s='Search' mod='blocksearch'}" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" />
        <button aria-label="{l s='Search' mod='blocksearch'}" type="submit" name="submit_search" class="btn btn-default button-search">
            <span>{l s='Search' mod='blocksearch'}</span>
        </button>
    </form>
</div>
<!-- /Block search module TOP -->