Closed matheusgnreis closed 4 years ago
O pior índice que temos é de acessibilidade :disappointed:
Ao mesmo tempo é o mais fácil de resolver, então... Quem se habilita @matheusgnreis @vitorrgg @talissonf ?
Nota especial ao :100: em best practices! Rumo ao overall :smile:
Fala mano @leomp12 . Não achei os pontos 2, 3 e 4. Talvez já tenha sido ajustado. Os outros to mandando o PR agora
@igorsfreitas acho que é porque não tá configurado estas redes sociais no CMS desta loja demo, mas acho que isto é no footer, dá uma olhada em template/pages/@/layout/footer.ejs
por favor.
Talvez no header também..
Ainda temos problemas aqui:
{
"accessibility": {
"id": "accessibility",
"title": "Accessibility",
"description": "These checks highlight opportunities to [improve the accessibility of your web app](https://developers.google.com/web/fundamentals/accessibility). Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.",
"score": 0.85,
"manualDescription": "These items address areas which an automated testing tool cannot cover. Learn more in our guide on [conducting an accessibility review](https://developers.google.com/web/fundamentals/accessibility/how-to-review).",
"auditRefs": [
{
"id": "accesskeys",
"weight": 0,
"group": "a11y-navigation"
},
{
"id": "aria-allowed-attr",
"weight": 10,
"group": "a11y-aria"
},
{
"id": "aria-required-attr",
"weight": 10,
"group": "a11y-aria"
},
{
"id": "aria-required-children",
"weight": 10,
"group": "a11y-aria"
},
{
"id": "aria-required-parent",
"weight": 10,
"group": "a11y-aria"
},
{
"id": "aria-roles",
"weight": 10,
"group": "a11y-aria"
},
{
"id": "aria-valid-attr-value",
"weight": 10,
"group": "a11y-aria"
},
{
"id": "aria-valid-attr",
"weight": 10,
"group": "a11y-aria"
},
{
"id": "audio-caption",
"weight": 0,
"group": "a11y-audio-video"
},
{
"id": "button-name",
"weight": 10,
"group": "a11y-names-labels"
},
{
"id": "bypass",
"weight": 3,
"group": "a11y-navigation"
},
{
"id": "color-contrast",
"weight": 3,
"group": "a11y-color-contrast"
},
{
"id": "definition-list",
"weight": 0,
"group": "a11y-tables-lists"
},
{
"id": "dlitem",
"weight": 0,
"group": "a11y-tables-lists"
},
{
"id": "document-title",
"weight": 3,
"group": "a11y-names-labels"
},
{
"id": "duplicate-id",
"weight": 1,
"group": "a11y-best-practices"
},
{
"id": "frame-title",
"weight": 3,
"group": "a11y-names-labels"
},
{
"id": "html-has-lang",
"weight": 3,
"group": "a11y-language"
},
{
"id": "html-lang-valid",
"weight": 3,
"group": "a11y-language"
},
{
"id": "image-alt",
"weight": 10,
"group": "a11y-names-labels"
},
{
"id": "input-image-alt",
"weight": 0,
"group": "a11y-names-labels"
},
{
"id": "label",
"weight": 0,
"group": "a11y-names-labels"
},
{
"id": "layout-table",
"weight": 0,
"group": "a11y-tables-lists"
},
{
"id": "link-name",
"weight": 3,
"group": "a11y-names-labels"
},
{
"id": "list",
"weight": 3,
"group": "a11y-tables-lists"
},
{
"id": "listitem",
"weight": 3,
"group": "a11y-tables-lists"
},
{
"id": "meta-refresh",
"weight": 0,
"group": "a11y-best-practices"
},
{
"id": "meta-viewport",
"weight": 10,
"group": "a11y-best-practices"
},
{
"id": "object-alt",
"weight": 0,
"group": "a11y-names-labels"
},
{
"id": "tabindex",
"weight": 0,
"group": "a11y-navigation"
},
{
"id": "td-headers-attr",
"weight": 0,
"group": "a11y-tables-lists"
},
{
"id": "th-has-data-cells",
"weight": 0,
"group": "a11y-tables-lists"
},
{
"id": "valid-lang",
"weight": 0,
"group": "a11y-language"
},
{
"id": "video-caption",
"weight": 0,
"group": "a11y-audio-video"
},
{
"id": "video-description",
"weight": 0,
"group": "a11y-audio-video"
},
{
"id": "logical-tab-order",
"weight": 0
},
{
"id": "focusable-controls",
"weight": 0
},
{
"id": "interactive-element-affordance",
"weight": 0
},
{
"id": "managed-focus",
"weight": 0
},
{
"id": "focus-traps",
"weight": 0
},
{
"id": "custom-controls-labels",
"weight": 0
},
{
"id": "custom-controls-roles",
"weight": 0
},
{
"id": "visual-order-follows-dom",
"weight": 0
},
{
"id": "offscreen-content-hidden",
"weight": 0
},
{
"id": "heading-levels",
"weight": 0
},
{
"id": "use-landmarks",
"weight": 0
}
]
}
}
Acabei de subir uma PR com o item 4. O 2 procurei por iframe no storefront template e não achei, você saberia informar @leomp12 ?
Acho que esse pode fechar, assim que subir a alteração do iframe não terá mais erro de acessibilidade pelo lighthouse
1) Buttons do not have an accessible name (link):
<button class="btn header__toggler" type="button" onclick="toggleSidenav()">
<button class="d-lg-none btn btn-lg btn-light" id="mobile-search-btn" type="button" data-toggle="collapse" data-target="#search-bar" aria-expanded="false" aria-controls="search-bar">
<button type="button" id="ec-user-popover" title="" class="btn btn-lg btn-light" data-original-title="Minha conta">
<a id="cart-button" class="btn btn-lg btn-light" role="button" href="/app/#/cart" data-toggle="tooltip" data-placement="bottom" data-original-title="Abrir carrinho">
<button class="glide__bullet glide__bullet--active" data-glide-dir="=0"></button>
<button class="btn glide__arrow glide__arrow--left" data-glide-dir="<">
<button class="btn glide__arrow glide__arrow--right" data-glide-dir=">
<button class="btn glide__arrow glide__arrow--left" data-glide-dir="<">
<button class="btn glide__arrow glide__arrow--right" data-glide-dir=">
<button class="btn glide__arrow glide__arrow--left" data-glide-dir="<">
<button class="btn glide__arrow glide__arrow--right" data-glide-dir=">
2) <frame> or <iframe> elements do not have a title (link)
<iframe src="https://passport.e-com.plus/v1/1024/4aPiC3GLIytD3Vr1QykZHYEyPUC977Qv/13850106/oauth-session" style="width:0;height:0;border:0;border:none;"></iframe>
3) Form elements do not have associated labels (link)
<input type="email" class="form-control" data-inputmask="" name="fields[email]" value="" placeholder="Seu melhor Email">
4) Links do not have a discernible name (link)
<a href="https://www.facebook.com/alimentostiasonia" target="_blank" rel="noopener" style="color: #3b5998">
<a href="https://www.youtube.com/alimentostiasonia" target="_blank" rel="noopener" style="color: #ff0000">
<a href="https://instagram.com/tiasoniaoficial/" target="_blank" rel="noopener" style="color: #e1306c">