# A11y & customization / Maya Shavin

{%hackmd @ModernWeb/SyA2U6SmT %}

> 共筆請從這開始

## UI Component
- Reusable
- Stylable
- Customizable
- Accessible
- Responsive
- Isolate & Testable
- Visual Consistency
- Functional Consistency

## Build
- StorefrontUI (https://docs.storefrontui.io/v2/)
e-commerce components
priorize customization
mobile-first
accessible

4 aspect to build components
- Customization
- Accessibility
- Scalability
- Ease of use

## A11y

- What is accessibility?
Keyboard navigation
無法一手shift + del，因為他就是設計要你注意
- Color contrast
需考慮色盲色弱的使用者
- Landmarks & Content layout(200% and 400% zoom in) [Landmarks](https://a11y-101.com/development/landmarks)
當瀏覽器無法存取外部css時，需要保持網頁本身純HTML的架構(ex:h1,h2)
- Focus // like click by keyboard
- Form handlings
表單驗證錯誤時要如何顯示
- Understandable content
- Media
- Typography
- External/internal link behaviors
外部連結是其他網站通常會是開啟新頁面，而內部連結則是在本身頁面進行轉導
- Tab order(flow)
開發者期望的tab order和使用者實際期望的常常會不一樣

## Atomic design pattern
資料支援：https://medium.com/@janelle.wg/atomic-design-pattern-how-to-structure-your-react-application-2bb4d9ca5f97

1. Atoms
- Colors
- Focusable
- HTML landmark usage
- Informative content
- Typography
2. Molecules
- **Navigation Flows**
- **Layout landmark**
- Informative content
- Table/Form
- **Focus flow**
3. Organisms
- Navigation FLow
- Landmark
- Table/Form
- Focus flow
- **Content layout**
4. Templates
5. Pages
- repeat organisms

[ARIA](https://www.w3.org/WAI/ARIA/apg/)

## Dialog(Modal)
- Dialog/ AlertDialog type
- Autofocus on the first focusable element
- Focus stay inside
- Close by ESC, click on backdrop, or by button click
- Restore focus after dialog closes

## Tooltip

Hover在tablet上的行為不一樣，因為手指沒有滑上去

## Loading page

- keep the ref of the button
- Don't unmount the componebnt, just hide it
- Trigger re-focus when loading finished

## Question
Always open new tab is an anti-pattern
Every single external link should open a new tab (is wrong!)
- disrupted user navigation flow
- 關閉 tab 之後如何回到原本的 tab

## Guides
- only one `<h1>` and `<main>`
- give me back my focus
- the mouse is out of battery

## Customizability

## Scalability

## Ease of Use

## documentation
- clear code structure
- concise code comments
- short and concise instrunctions
- ready-to use ezmaples
- accessibilty guidelines
- automate, automate,automate

## takeaway

------

## 輔助參考資料
- [keyboard navigation - Testing](https://webaim.org/techniques/keyboard/#testing)
- [color contrast](https://webaim.org/resources/contrastchecker/)
- [ARIA Authoring Practices Guide (APG)
](https://www.w3.org/WAI/ARIA/apg/practices/)
- [pointer-events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
---

> 聊天室
> B 棟的冷氣比較冷

>
> 聽工作人員說她是以色列來的
> 前幾天還確認能不能來，畢竟那裏在打仗
> 她是,Founder & OrganizerFounder & Organizer VueJSIsrael Meetups

> 原來現在還是強調 mobile first
> 我很擔心是不是變成 AI First
> 我和世界脫節了（還好沒有）

> 好奇大家如果不用 div 會用哪個 tag
> 看區塊的用途吧
> 像是如果是畫區域的話我一時想不到除了 section 以外還有哪些適合
> 看用途決定啦，如果不知道這塊要幹嘛，其實我也會先叫他 div
> ~~不然 Table 你覺得如何~~

> Q：為什麼不建議使用 ARIA？
> 如果不需要就不要加

好快
> 不行了手速跟不上 XDDDD
copilot again