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

A presentation at Frontside Workshop in May 2019 in Budapest, Hungary by Peter Matkovsky

Slide 1

Slide 1

3 frontendes hiba,

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

kuix.co

Slide 2

Slide 2

Slide 3

Slide 3

Slide 4

Slide 4

Matkovsky Péter

frontend fejlesztő, társalapító

Slide 5

Slide 5

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

– Chris Coyier (The Great Divide)

Slide 6

Slide 6

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

– Brad Frost (Shop Talk Show)

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

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)

Slide 10

Slide 10

I. Megjelenés ≠ jelentés

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

🧠 Tanulság

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

Slide 18

Slide 18

II. z-index: 9999999

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

Felhalmozási sorrend

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

Slide 24

Slide 24

Slide 25

Slide 25

Felhalmozási környezet

Slide 26

Slide 26

Felhalmozási környezet

Slide 27

Slide 27

Slide 28

Slide 28

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

Slide 29

Slide 29

III. Akadálymentesítés

Slide 30

Slide 30

Slide 31

Slide 31

Slide 32

Slide 32

:focus állapotok

Slide 33

Slide 33

Slide 34

Slide 34

Slide 35

Slide 35

Slide 36

Slide 36

Slide 37

Slide 37

Slide 38

Slide 38

Tartalom-elrejtés

Slide 39

Slide 39

Slide 40

Slide 40

Slide 41

Slide 41

Slide 42

Slide 42

A jövő

🤩

Slide 43

Slide 43

A jelen

😢

Slide 44

Slide 44

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

Slide 45

Slide 45

🧠 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

Slide 46

Slide 46

https://noti.st/matkovsky