ecomplus / storefront

Modern and high performant headless eCommerce Storefront. PWA & JAMstack architecture ready for E-Com Plus APIs. Built with Vue.js, extensible through widgets and editable with Netlify CMS.
https://developers.e-com.plus/storefront/
MIT License
101 stars 36 forks source link

Accessibility problems lighthouse #35

Closed matheusgnreis closed 4 years ago

matheusgnreis commented 5 years ago

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">

leomp12 commented 4 years ago

O pior índice que temos é de acessibilidade :disappointed:

lighthouse

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:

igorsfreitas commented 4 years ago

Fala mano @leomp12 . Não achei os pontos 2, 3 e 4. Talvez já tenha sido ajustado. Os outros to mandando o PR agora

leomp12 commented 4 years ago

@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.

leomp12 commented 4 years ago

Talvez no header também..

leomp12 commented 4 years ago

https://github.com/ecomclub/storefront-template/pull/140

leomp12 commented 4 years ago

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
        }
      ]
    }
}
matheusgnreis commented 4 years ago

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 ?

leomp12 commented 4 years ago

Acho que é daqui https://github.com/ecomclub/ecomplus-passport-client/blob/master/src/lib/create-iframe.js

matheusgnreis commented 4 years ago

Acho que esse pode fechar, assim que subir a alteração do iframe não terá mais erro de acessibilidade pelo lighthouse