Select-elementer skal have et tilgængeligt navn
Rullemenuer til størrelse, farve, antal, land eller sortering skal have et navn. Uden et navn hører skærmlæserbrugere kun »kombinationsboks« og kan ikke vide, hvad de vælger, og det fører til forkerte bestillinger eller køb, der går i stå i kassen.
- Regel-id
- select-name
- Kilde
- axe-core 4.13.0
- Alvorlighed
- Kritisk
- Rettelsesniveau
- ASSISTED
- på Shopify, Shopware, WooCommerce og Magento
- Status
- køres
Hvad kontrollen gør
Sørg for, at select-elementer har et tilgængeligt navn
Reglen tester hvert <select>, som hjælpemidler kan nå; et, der er skjult med display: none, springes over. Et select-element består med en af disse:
- et omsluttende
<label>med egen tekst - et
<label>med tekst, hvisformatcher select-elementetsid - en
aria-labelmed tekst, enaria-labelledby, der fører til tekst, eller entitlemed tekst role="none"ellerrole="presentation", men kun på et select-element, der ikke kan få fokus, for eksempel et deaktiveret
Tekst i valgmulighederne tæller aldrig: Et <label> eller en aria-labelledby, hvis eneste tekst kommer fra select-elementets egne valgmuligheder, består ikke.
Er et <label for> skjult for hjælpemidler, består select-elementet ikke, medmindre en anden kilde stadig giver det et navn. En visuelt skjult etiket, som skærmlæsere kan læse, accepteres.
Når ingen kilde giver select-elementet et navn, og en af disse kontroller ikke kan gennemføres, havner resultatet på axe-cores liste til gennemgang, som Validiscans scanner i øjeblikket ikke laver om til fund. Reglen vurderer ikke, om navnet fortæller en kunde, hvad valget gælder.
Sådan retter du det
Knyt en <label> til hver <select> via matchende for- og id-attributter, eller giv den aria-label eller aria-labelledby, for eksempel <label for="size">Størrelse</label>. Tag etiketteksten fra webshoppens oversatte navne på valgmulighederne.
WCAG-succeskriterier
- 4.1.2 Name, Role, Value, niveau A
Afsnit i EN 301 549
| WCAG-kriterium | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 4.1.2 | 9.4.1.2 | 9.4.1.2 |
Opskrifter, der angiver denne regel
Reglen har niveau ASSISTED. I et projekt følger et fund af reglen ASSISTED-forløbet, og disse opskrifter anvendes ikke på det.
Shopify: opskrift label-association
Vis før og efter (1)
sections/main-collection.liquid Ændringer i sections/main-collection.liquid: 2 tilføjet, 2 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 64 | 64 | <div class="collection__products"> | |
| 65 | 65 | <div class="collection__toolbar"> | |
| 66 | 66 | <div class="collection__sort"> | |
| 67 | Fjernet | <label class="collection__sort-label">Sort by</label> | |
| 68 | Fjernet | <select name="sort_by" class="select__select" form="FacetFiltersForm"> | |
| 67 | Tilføjet | <label class="collection__sort-label" for="SortBy-{{ section.id }}">Sort by</label> | |
| 68 | Tilføjet | <select name="sort_by" class="select__select" form="FacetFiltersForm" id="SortBy-{{ section.id }}"> | |
| 69 | 69 | <option value="manual" selected>Featured</option> | |
| 70 | 70 | <option value="best-selling">Best selling</option> | |
| 71 | 71 | <option value="price-ascending">Price, low to high</option> |
sections/main-product.liquid Ændringer i sections/main-product.liquid: 2 tilføjet, 2 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 94 | 94 | </div> | |
| 95 | 95 | {%- else %} | |
| 96 | 96 | <div class="product-form__input product-form__input--dropdown"> | |
| 97 | Fjernet | <p class="form__label">{{ option.name | escape }}</p> | |
| 97 | Tilføjet | <p class="form__label" id="Options-{{ section.id }}-{{ forloop.index0 }}-label">{{ option.name | escape }}</p> | |
| 98 | 98 | <div class="select"> | |
| 99 | Fjernet | <select class="select__select" name="options[{{ option.name | escape }}]" data-option-index="{{ option_index }}"> | |
| 99 | Tilføjet | <select class="select__select" name="options[{{ option.name | escape }}]" data-option-index="{{ option_index }}" aria-labelledby="Options-{{ section.id }}-{{ forloop.index0 }}-label"> | |
| 100 | 100 | {%- for value in option.values %} | |
| 101 | 101 | <option value="{{ value | escape }}"{% if value == option.selected_value %} selected{% endif %}>{{ value | escape }}</option> | |
| 102 | 102 | {%- endfor %} |
Shopware: opskrift label-association
Vis før og efter (1)
Resources/views/storefront/page/product-detail/configurator.html.twig Ændringer i Resources/views/storefront/page/product-detail/configurator.html.twig: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 13 | 13 | {% for group in product.configurator %} | |
| 14 | 14 | {% if group.display == 'select' %} | |
| 15 | 15 | <div class="product-detail-configurator-group"> | |
| 16 | Fjernet | <div class="product-detail-configurator-group-title">{{ group.name }}</div> | |
| 16 | Tilføjet | <label class="product-detail-configurator-group-title" for="configurator-{{ group.id }}">{{ group.name }}</label> | |
| 17 | 17 | <select class="form-select product-detail-configurator-select-input" | |
| 18 | 18 | id="configurator-{{ group.id }}" | |
| 19 | 19 | name="{{ group.id }}"{% if group.price|default(false) %} |
WooCommerce: opskrift label-association
Vis før og efter (1)
woocommerce/cart/cart.php Ændringer i woocommerce/cart/cart.php: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 62 | 62 | <tr> | |
| 63 | 63 | <td colspan="6" class="actions"> | |
| 64 | 64 | <div class="coupon"> | |
| 65 | Fjernet | <label class="screen-reader-text"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label> | |
| 65 | Tilføjet | <label class="screen-reader-text" for="coupon_code"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label> | |
| 66 | 66 | <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>"> | |
| 67 | 67 | <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>"><?php esc_html_e( 'Apply coupon', 'woocommerce' ); ?></button> | |
| 68 | 68 | </div> |
Magento: opskrift label-association
Vis før og efter (1)
app/design/frontend/Validiscan/fixture/Magento_Catalog/templates/product/list/toolbar.phtml Ændringer i app/design/frontend/Validiscan/fixture/Magento_Catalog/templates/product/list/toolbar.phtml: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 12 | 12 | <div class="toolbar-sorter sorter"> | |
| 13 | 13 | <!-- VALIDISCAN-SEEDED select-name + vs-forms-ecommerce: the "Sort By" text is a span, not a label for the select --> | |
| 14 | 14 | <?php /* Fixed variant: <label class="sorter-label" for="sorter">Sort By</label>. */ ?> | |
| 15 | Fjernet | <span class="sorter-label"><?= $escaper->escapeHtml(__('Sort By')) ?></span> | |
| 15 | Tilføjet | <label class="sorter-label" for="sorter"><?= $escaper->escapeHtml(__('Sort By')) ?></label> | |
| 16 | 16 | <select id="sorter" data-role="sorter" class="sorter-options"> | |
| 17 | 17 | <?php foreach ($block->getAvailableOrders() as $key => $order): ?> | |
| 18 | 18 | <option value="<?= $escaper->escapeHtmlAttr($key) ?>"<?= $block->isOrderCurrent($key) ? ' selected' : '' ?>><?= $escaper->escapeHtml(__($order)) ?></option> |
Begynd med et gratis tjek af din webshop.
Send din webshops adresse. Validiscan scanner den og svarer med hver fejl, scanningen kan påvise, med siden og koden.
Bestil et gratis tjekEller skriv til info@validiscan.com.
Hvad det gratis tjek omfatter, og hvad det udelader- Du sender
- din webshops adresse
- Sider, der scannes
- op til 15
- Du får
- hver fejl, scanningen kan påvise, med siden og koden
- På din webshop
- kun offentlige sider; intet login, intet købt, ingen formularer sendt
- Hvad det ikke er
- et fuldt audit