HTML5, ARIA, UI 간략 정리

• UI를 따라 만들어보며, 과연 저는 좋은 코드를 작성하고 있는지, 오버 엔지니어링을 하고 있지 않은지
• 효율적이지 않은 방법으로 코드를 작성하고 있지는 않은지 고민이 많았습니다.
• 상황에 맞는 태그를 쓰는 게 얼마나 어려운 일이며 끊임없이 공부해야 하는 것을 알게 되었습니다.

https://www.youtube.com/channel/UCnUYZLuoy1rq1aVMwx4aTzw

• scientific-notation

https://developer.mozilla.org/en-US/docs/Web/CSS/number

CSS value 값으로 볼 수 있는 1e3px 같은 경우들을 의미합니다.

• :root = 전역 CSS 변수 선언, 문서의 루트 요소 선택

[embed]:root - CSS: Cascading Style Sheets | MDN CSS :root 의사 클래스는 문서 트리의 루트 요소를 선택합니다 HTML의 루트 요소는 요소이므로, :root의 명시도가 더 낮다는 점을 제외하면 html 선택자와 똑같습니다.developer.mozilla.org

• CSS 커스텀 프로퍼티

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

두 개의 붙임표로 시작하는 속성의 이름 (대소문자를 구분함)

사용은 var함수를 이용합니다.

element {   
    --main-bg-color: brown;     
}

element {
     background-color: var(--main-bg-color);  
}

• accent-color

https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color

사용자 인터페이스 control의 강조 색상을 설정합니다. (즉, input 태그와 같은 우리의 입력을 활용하는 데에서, 체크했을 때 어떠한 색상이 보여질 것인지 결정한다고 생각하면 될 거 같습니다.)

• prefers-color-scheme

https://developer.mozilla.org/ko/docs/Web/CSS/@media/prefers-color-scheme

사용자 시스템이 light or Dark 테마를 사용하는지 탐지하는 데 사용합니다.

• :indetermediate

https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate

radio 버튼이 체크되지 않았거나, progress 엘리먼트 상태가 결정되지 않았을 때

• User Agent StyleSheet?

https://web.dev/color-scheme/

페이지의 기본 모양과 느낌을 결정 -> User Agent에 의존하게 됨

Chrome, Firefox, Safari 별로 다르듯이 (대부분의 항목은 비슷, 차이점도 존재함)

다크 모드에 맞는 페이지 모양을 조절 => color-scheme, prefers-color-scheme

• appearance

[embed]appearance | CSS-Tricks The appearance property is used to display an element using a platform-native styling based on the users' operating…css-tricks.com

[embed]appearance - CSS: Cascading Style Sheets | MDN The appearance CSS property is used to control native appearance of UI controls, that are based on operating system's…developer.mozilla.org

OS 시스템 테마를 기본으로 하는 네이티브 표현을 조절하는 데 사용됩니다.

platform 별 스타일 지정 제거 or 없는 요소에 platform 별 스타일 지정 목적으로 사용한다고 합니다.

• ARIA Live Legion?

JS => 전체 페이지를 다시 로드 X, 페이지의 일부를 동적으로 변경 가능

보조 기술 사용자에게 분명하지 않을 수 있어서 나왔다고 합니다.

동적 콘텐츠 변경 사항을 프로그래밍 방식으로 노출하는 방식 제공

페이지 reload 없이 update되는 동적 컨텐츠 => 영역 or 위젯

interactive하지 않은 단순한 콘텐츠 변경 => 라이브 영역으로 표시되어야 함

live 영역 => aria-live 속성을 사용!

• Keyboard로 Javascript Widget에 접근

키보드 액세스를 JS를 사용하지 않고 제어할 수 있다면?

https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets

일반적 JS Widget : 기본적으로 Desktop에 있는 것과 동일한 키보드 기능을 제공하지 않는 <div> 및 <span> 요소로 구성됨

tabIndex를 사용 => 0과 음수 값만 사용하자

• MDN의 지침

element.focus()를 사용해 focus 설정

onfocus를 통해 현재 포커스 추적

— 모든 엘리먼트에서 사용이 가능한 onfocus, onblur

— document.activeElement, document.hasFocus를 고려해보자

IE는 영어,숫자 키가 아닌 키에 keypress 이벤트가 발생하지 X => onKeyDown 이벤트를 사용해야 합니다.

키보드와 마우스가 동일한 경험을 제공하는가?

키보드를 사용해서 요소를 활성화할 수 있도록 하려면? => 마우스 이벤트에 바인딩된 핸들러도 keyboard 이벤트에 바인딩해야 함

onclick="doSomething()" onkeydown="return event.keyCode != 13 || doSomething();"

Programming을 통해 focus를 받는 tabIndex=-1 요소에 대해 항상 focus를 표현해야 함

— IE가 Programming을 통해 focus를 받는 항목에 대해 focus outline을 자동으로 그려주지 않음

사용된 key event가 browser 기능 수행 방지해야 함

— 이벤트 핸들러가 return false를 하면 => 이벤트는 핸들러를 넘어 전파되지 않음

— 이것을 이용해서, 브라우저가 키 이벤트 처리를 못하도록 하는 것

key 반복에 대해 일관된 동작에 의존 X

— 브라우저,OS에 따라 반복 or 반복되지 않을 수 있음

HTML5의 올바른 태그 사용을 최우선으로 고려하고 ARIA를 사용하자