Am facut un UI Kit focusat pe accesibilitate

Limbaje de Programare HTML & CSS
, , , ,
1

Salutare!

In anii recenti accesibilitatea a devenit o necesitate din ce in ce mai mare cand vine vorba de dezvoltarea site-urilor web. Am decis sa facem un update la UI Kit-ul nostru la versiunea 3 si l-am facut accessibility first. Este open source si licentiat sub MIT, deci faceti ce vreti cu ea. Ne-ar ajuta o steluta pe Github daca va place :slight_smile:

Demo: https://demo.themesberg.com/pixel-lite/index.html
Repo: https://github.com/themesberg/pixel-bootstrap-ui-kit/

1 Like
2

Câteva probleme care nu sunt ok dpdv al accesibilității:

  • Diferențele de culoare dintre normal/active (la butoane) sunt mult prea mici pentru mine (iar eu am ochi cât-de-cât funcționali).
  • Buton cu icon (cum e la cards -> follow): ai focus o dată pe text, a doua oară pe icon-ul de mail;
  • caruselul nu are nici un fel de highlight când e activ;
  • formular-> file nu are highlight vizibil. Select este foarte puțin vizibil (doar umbră)
  • Range Sliders sunt inutilizabile
  • la fel și butoanele radio sau checkbox
  • la fel și paginația.
  • am renunțat la modale. :smiley:

( Încearcă să navighezi în site cu tab, vezi cu e.)

Din punctul meu de vedere este departe de a fi accesibilă.

4 Likes
3

Merci pentru feedback!

O sa luam toate aceste metrici si vom aduce un update zilele astea :slight_smile:

Update: deja am rezolvat o mare parte din probleme. Acum lucram pe treaba cu focusurile + chestiile pentru screen readers.

4

Devforum driven development :smiley:

5 Likes
5

Am rezolvat problemele. E mai bine acum? :smiley:

6

Nu, dar îmi place cum ai făcut focus la butoane :slight_smile:

Încearcă să folosești doar tastatura, vezi dacă e ok (hint: nu e):

  • Meniul principal ar trebui ori să se deschidă când ai focus pe elementul principal ori să se deschidă când apeși enter. În momentul de față, la tab, iterează prin submeniu, dar submeniul este ascuns.
  • caruselul nu are nici un fel de focus, nu îți dai seama că este activ
  • la formulare, la câmpurile valide dar și la cele invalide nu se vede că ai focus
  • range sliders: acum au focus, dar nu poți schimba nimic doar din tastatură
  • butoanele radio nu au tabindex
  • modals: nu ai focus foarte vizibil pe ✕

Overall nu mi se pare un produs focusat pe accesibilitate, așa cum l-ai anunțat :slight_smile:

1 Like
7

Iti multumesc pentru feedback, dar cred ca este mai accessibil fata de versiunea anterioara. Trece de toate testele de WAVE si Achecker.

In orice caz, o sa rezolvam si toate probleme astea cu tab-urile :slight_smile:

8

Testele alea sunt așa… un punct de pornire, ca să zic așa. Accesibilitatea web are multe aspecte, dar se rezumă totul la „cum se descurcă cineva care a tras paiul scurt la genetică (sau la viață…) pe acest site?”. Iar asta înseamnă… orice (fără să ne limităm la) „Cât de bine poți naviga pe site dacă”:

  1. Nu ai maus (sau orice altă formă de pointing device). Ăsta a fost testul făcut de mine pentru că este cel mai la îndemână de făcut;
  2. Ai un tremurat incontrolabil (e.g. parkinson)
  3. Nu vezi culori deloc (gray scale mode on) [1]
  4. Nu vezi anumite culori (color blind, daltonism)
  5. Nu vezi deloc și folosești un screen reader
  6. Nu vezi prea bine și ești nevoit să faci zoom 500%
  7. Combinații între cele de mai sus.

Nu mă leg de „e mai accesibil decât era înainte” :slight_smile:

  1. Hint: cam nasol ↩︎

2 Likes
9

:green_heart: pentru explicatii, simple si la obiect

1 Like
10
  1. Ti-ai bagat mana unde nu trebuie.

Scuze, nu m-am putut abtine.

P.S. E o tipa care se ocupa cu accesibilitatea si care a devenit interesata de subiect dupa ce s-a lovit la mana (accidentare temporara): https://dev.to/lkopacz