馃帹 #42: Dost臋pna tabela (a11y), ARIA,聽palety kolor贸w i聽skopany text聽input
6 min czytania

馃帹 #42: Dost臋pna tabela (a11y), ARIA,聽palety kolor贸w i聽skopany text聽input

jak widzisz, zmieni艂 si臋 tytu艂 maila. Od dzi艣 b臋dzie w nim jaka艣 zajawka m贸wi膮ca, co kryje si臋 w 艣rodku.

Czy takie tytu艂y s膮 dla Ciebie lepsze, czy wolisz po prostu uxowy.dev聽#42? A聽mo偶e masz jaki艣 lepszy pomys艂? 馃 Daj zna膰!

O czym b臋dzie dzisiaj?

  1. Jak zrobi膰 dost臋pn膮 tabel臋 (a11y)?
  2. 5 przyk艂ad贸w co si臋 stanie, je艣li nie u偶ywasz poprawnie ARIA
  3. [Film] Jak prosto i szybko stworzy膰 palet臋 kolor贸w?
  4. [Film] Co si臋 sta艂o z text inputem...?

No to ciep艂a kawka w d艂o艅 i zapraszam 馃憞


Jak zrobi膰 dost臋pn膮 tabel臋 (a11y)?

Tabela i korzystanie z VoiceOver na Safari (mo偶na go uruchomi膰 za pomoc膮 CMD+F5).

O tym, 偶e dost臋pno艣膰 jest wa偶na i 偶e developer powinien o to zadba膰, by艂o wspominane w #38 wydaniu uxowego zapodaj膮c do pos艂uchania podcast Design Practice z Wojtkiem. Warto nadrobi膰 zaleg艂o艣ci je艣li jeszcze przes艂ucha艂e艣/a艣. 馃檪

To zabierzmy si臋 za to... ma艂ymi kroczkami.
Na tapet dzisiaj wrzu膰my tabel臋 - <table>.

鈿狅笍
WA呕NE: Postaram si臋 zarzuci膰 tutaj jakie艣 podsumowanie, ale... wiadomo - "to zale偶y". Polecam przej艣膰 do pe艂nych 藕r贸de艂 podanych ni偶ej.

Co powinna zawiera膰 tabela, aby by艂a dost臋pna?

  • element <caption> - czyli tytu艂 tabeli
  • poprawn膮 semantyk臋, tj. <thead>, <th>
  • podajmy w <th> odpowiedni scope je艣li to potrzebne (scope="col" / scope="row")
  • upewnij si臋, 偶e tabela jest czytelna, przyk艂ad: u偶ywaj widcznych podzia艂贸w mi臋dzy kom贸rkami, rozr贸偶nij wizualnie <th> od <td>, zastosuj "zebr臋" dla 艂atwiejszego skanowania wierszy itd.
  • RWD: je艣li chcemy scrolla to zapewnijmy obs艂ug臋 za pomoc膮 strza艂ek, np. wrappuj膮c nasz膮 tabel臋 divem z "dodatkami" 馃槃: <div tabindex="0" class="table-wrapper" role="group" aria-labelledby="caption">
  • i cie艅 wskazuj膮cy na uci臋t膮 zawarto艣膰 (艣ci膮ga: https://codepen.io/smashingmag/pen/ExRNxpd)
  • RWD: je艣li chcemy zmieni膰 uk艂ad na "wszystkie dane wiersza jednen-pod-drugim", a.k.a. "stacking", pami臋tajmy o podaniu nazwy kolumny dla ka偶dej warto艣ci (艣ci膮ga: https://codepen.io/smashingmag/pen/bGKBNNr)
  • lub rozwa偶my sk艂adni臋 z <dl> zamiast <table> (przyk艂ad: https://inclusive-components.design/data-tables/#verynarrowviewports)
  • stosuj odpowiednie ARIA (wi臋cej o tym w 藕r贸d艂ach i w nast臋pnym wpisie w tym wydaniu)

Przyk艂ad prostej, dost臋pnej tabeli ze zdj臋cia wpisu (JSX):

<table>
    <caption>{this.props.caption}</caption>
    <tbody>
      <tr>
        {this.props.headers.map((header, i) => 
          <th scope="col" key={i}>{header}</th>
        )}
      </tr>
      {this.props.rows.map((row, i) => 
        <tr key={i}>
          {row.map((cell, i) =>
            (this.props.rowHeaders && i < 1) ? (
              <th scope="row" key={i}>{cell}</th>
            ) : (
              <td key={i}>{cell}</td>
            )
          )}
        </tr>
       )}
    </tbody>
  </table>
Fragment codepena: React Inclusive Table Component, Heydon Pickering 

Jak poprawnie u偶ywa膰 tabeli w HTML?

  • u偶ywaj jej tylko do pokazania tabelarycznych danych
  • nie u偶ywaj tabeli do tworzenia layoutu, ani niczego innego poza punktem powy偶szym

殴r贸d艂a do obczajki:

  1. Accessible Front-End Patterns For Responsive Tables (Part 1)
  2. Inclusive Components: Data Tables
  3. A Responsive Accessible Table

5 przyk艂ad贸w co si臋 stanie, je艣li nie u偶ywasz poprawnie ARIA

1. Obrazek

<img src="assets/images/8193903121.png" />

Czytnik ekranu przeczyta:

8193903121.png, image

Jak to naprawi膰?
Po prostu doda膰 alt obrazka:

<img
  src="assets/images/8193903121.png" 
  alt="A pug wearing a red party hat with white dots"
/>

Efekt:

A pug wearing a red party hat with white dots, image

2. Przycisk z disabled

<button disabled>Let's Go!</button>

Czytnik ekranu przeczyta:

Let鈥檚 Go!, button

Jak to naprawi膰?
Doda膰 odpowiednik ARIA: aria-disabled="true".

<button aria-label="Submit email" aria-disabled="true" disabled>Let's Go!</button>

Efekt:

Submit Email, dimmed button, Let鈥檚 Go!

3. Pole formularza z opisem

Comment:
<textarea></textarea>
<p> Your comment will be visible to all members of your organization.</p>

Czytnik ekranu przeczyta:

Edit Text, blank

Jak to naprawi膰?
U偶ywa膰 poprawnie <label>, aria-labelledby, aria-describedby.

<label id="comment-label" for="comment-box">Comment:</label>
<textarea 
  id="comment-box" 
  aria-labelledby="comment-label" 
  aria-describedby="comment-desc"
></textarea>
<p id="comment-desc">Your comment will be visible to all members of your organization.</p>

Efekt:

Comment, Edit Text. Your comment will be visible to all members of your organization

4. Tabela (znowu... 馃槀)

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Quantity</th>
      <th>Rating</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product 1</td>
      <td>5</td>
      <td>4.5</td>
    </tr>
    <tr>
      <td>Product 2</td>
      <td>3</td>
      <td>3.7</td>
    </tr>
  </tbody>
</table>

Czytnik ekranu podczas przechodzenia mi臋dzy 4.5 a 3.7 przeczyta:

Row 1 of 2, 4.5
Row 2 of 2, 3.7

Jak to naprawi膰?
U偶ywa膰 poprawnie <th> z odpowiednim scope, <caption>.

<table role="table">
  <caption>Product comparison</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Quantity</th>
      <th scope="col">Rating</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Product 1</th>
      <td>5</td>
      <td>4.5</td>
    </tr>
    <tr>
      <th scope="row">Product 2</th>
      <td>3</td>
      <td>3.7</td>
    </tr>
  </tbody>
</table>

Efekt:
Czytnik ekranu podczas przechodzenia mi臋dzy 4.5 a 3.7 przeczyta:

Row 1 of 2, Product 1, 4.5
Row 2 of 2, Product 2, 3.7

5. Nadu偶ywanie ARIA

<div 
  role="dialog" 
  aria-labelledby="modal-title" 
  aria-describedby="modal-description" 
  aria-modal="true" 
  aria-hidden="false" 
  aria-live="polite" 
  aria-atomic="true"
>
  <h2 id="modal-title">Modal Title</h2>
  <p id="modal-description">This is a modal window that contains important information for the user.</p>
  {...}
</div>

Tutaj troszk臋 przesadzono. W zale偶no艣膰i od ustawie艅, czytnik ekranu po pojawieniu si臋 modala mo偶e przedstawi膰 wszystkie dane z atrybut贸w ARIA.

Mo偶e to by膰 troszk臋 przyt艂aczaj膮ce i ma艂o zrozumia艂e dla odbiorcy.

Tak偶e nawalenie w ciemno to te偶 nie jest dobra praktyka 馃槀
Warto wspomaga膰 si臋 np.: Inclusive Components.


Jak prosto i szybko stworzy膰 palet臋 kolor贸w?

Narz臋dzi tego typu jest mn贸stwo. A偶 nie wiadomo, z kt贸rego skorzysta膰 i kt贸re b臋dzie dla nas dobre. A bardziej dla projektu, kt贸ry aktualnie realizujemy.

W tym filmie Jordan pokaza艂 jaki ma prosty spos贸b na utworzenie palety kolor贸w.

Zapraszam do oblukania:


Co si臋 sta艂o z text inputem...?

Zassa艂em to z dzisiejszego wydania unknowNews.
I musz臋 poda膰 Ci to dalej, bo jest zaje... przekozackie (udzieli艂o mi si臋).

鈿狅笍
Warning: autor ma do艣膰 wulgarny spos贸b wyra偶ania swoich my艣li. 呕eby nie by艂o - ostrzega艂em.

Link do wideo:
https://briefs.video/videos/what-happened-to-text-inputs/

What Happened To Text Inputs?
A video from Webbed Briefs

Je艣li nie przeszkadza Ci wulgarno艣膰 autora to zach臋cam do obejrzenia pozosta艂ych film贸w Heydona (btw. autora wcze艣niej wspominanego Inclusive Components, szacun).

Lista film贸w: https://briefs.video/#episodes


To wszystko na dzi艣!

Pozdrawiam i udanego weekendu! 鉀 锔忦煕

Miko艂aj Wa艣kowski
uxowy.dev

鉂わ笍
Chcesz pom贸c swoim znajomym i ziomkom z pracy?
Je艣li podoba Ci si臋 to, co wysy艂amy w 馃帹 uxowym, to jest du偶a szansa, 偶e im te偶 si臋 spodoba 馃槈. Pode艣lij im link do ostatnich wysy艂ek i niech ch艂on膮 wiedz臋 o UX/UI dla developera razem z nami!

Je艣li jeszcze nie ma Ci臋 na li艣cie 馃

Wysy艂amy jeden email tygodniowo, w ka偶dy pi膮tek, o godz. 12:00.
Warto艣ciowa wiedza o UI/UX dla developera mo偶e wyl膮dowa膰 do Twojej skrzynki.