접근성을 고려한 프런트엔드 UI 샘플 - Frend

#1967

Frend(프랜드?) 발음은 잘 모르겠습니다만.. 접근성을 고려한 최신 프런트 엔드 구성요소입니다. 자바스크립트는 ES2015 모듈을 사용하고 있다고 합니다. 이 사이트는 많이들 사용하고 있는 Jekyll로 구성된 사이트네요. 사이트에 사용된 CSS는 BEM을 적용시켰다는 등등 여러 정보가 있지만, 이런 건 둘째치고 사이트에서 제공하고 있는 샘플들은 공부하기에 적당한 것 같습니다.

사이트 구조는 Frend에서 제공하는 샘플이 전부입니다. 각 샘플들의 페이지에서는 각 샘플에 대한 개요와 설치방법, 사용법, 옵션, 지원 브라우저 현황(데스크톱, 모바일 포함) 등에 대해서 설명해 주고 있는 구조를 가지고 있습니다.

Frend — A collection of accessible, modern front-end components.

MENU

1. Accordion
2. Bypass links
3. Dialog Modal
4. Off Canvas
5. Tabs
6. Tooltip
7. Dropdown Navigation(Comming soon)

Accordion

흔히 사용되는 Accordion 화면의 샘플입니다.

 Bypass links

흔히 본문 바로가기로 불리는 링크에 대한 샘플입니다. 링크에는 Tab을 사용해서 접근 가능합니다.

Dialog Modal

많이 사용되는 레이어로 접근 가능한 Dialog Modal 샘플입니다. Tab을 통해 이동 가능하며 팝업창 내에서 포커스가 벋어 나지 않습니다.

Off Canvas

모바일에서 주로 사용되는 사이드에서 나오는 UI 샘플입니다. 1은 왼쪽에서 2는 오른쪽에서 슬라이드 되어 표시됩니다. 이게 맞는 건지는 모르겠지만, 모달 창처럼 표시된 창내에서 포커스가 제어되지 않고 밖으로 빠져나오던데 이것까지 제어가 되었으면 좋았을 것 같다는 생각은 드네요.

Tabs

많이 사용되는 Tab 형식의 메뉴이며 각각의 Tab은 화살표 커서로만 이동이 가능하며 해당 콘텐츠에 접근하기 위해선 각 Tab메뉴에서 Tab 키를 사용해야만 콘텐츠에 접근이 가능합니다.

Tooltip

커서에 반응하는 많이 사용되는 툴팁 UI 샘플입니다.

Dropdown Navigation이 아직 공개되지 않아 조금 아쉽긴 하지만, 전체적으로 깔끔하게 정리되어 있어서 참고할 만한 내용도 많고 공부에 도움이 되었던 것 같습니다.

지원되는 브라우저 현황은 다음과 같습니다.

• Chrome 8+
• Firefox 3.6+
• Safari 5.1+
• Opera 15+
• Edge 12+
• IE 10+
• iOS Safari 5.1+
• Android Browser 3+