3 frontendes hiba,

amiket mi elkövettünk, hogy neked ne kelljen!

kuix.co

Matkovsky Péter

frontend fejlesztő, társalapító

  • kuix.co
  • matkovsky.com
  • @matkovsky

„Two front-end developers are sitting at a bar. They have nothing to talk about.”

– Chris Coyier (The Great Divide)

„Front of the Frontend” „Back of the Frontend”

– Brad Frost (Shop Talk Show)

Front of the Frontend

  • szemantika
  • tartalom strukturálás
  • accessibility
  • layout
  • tipográfia
  • interakció-tervezés
  • animációk
  • reszponzivitás

Back of the Frontend

  • routing
  • state management
  • API-kkal kommunikáció
  • Build toolok konfigurálása (Webpack, Gulp, Grunt)

I. Megjelenés ≠ jelentés

🧠 Tanulság

  • Gondolj bele a jelentésbe!
  • CSS és JavaScript nélkül is működne?
  • Ne higgy el mindent a grafikusnak!

II. z-index: 9999999

Felhalmozási sorrend

  • Kisebb szám alul
  • Nagyobb szám felül

Felhalmozási környezet

Felhalmozási környezet

🧠 Tanulság

  • Tudd, mi hoz létre „csoportosítást”!
  • Lehet, hogy át kell alakítanod a DOM-ot.
  • Erre a célra érdemes „portalt” használnod.

III. Akadálymentesítés

:focus állapotok

Tartalom-elrejtés

A jövő

🤩

A jelen

😢

További A11Y hibák

  • Hiányzó <img alt=”“> attribútum
  • Csak :hover-re megjelenő tartalom
  • Input labelök nem használata
  • Különböző elrejtési megoldások
    • display: none;
    • visibility: hidden;
    • <div hidden>
    • .visually-hidden
  • aria-* használata a nem-szemantikus kód „fixálására”
  • Ikon fontok használata

🧠 Tanulság

  • Teszteld le a „csak billentyűzet” UX-et is!
  • Használj képernyőolvasót!
    • Apple VoiceOver
    • JAWS
  • Segítenek az eszközök…
    • Chrome Dev Tools (Audit, Accessibility pane)
    • Deque axe
    • Accessibility Insights for Web

https://noti.st/matkovsky