[web] 메모


Semantic markup

HTML: A good basis for accessibility - Learn web development | MDN

HTML elements for their intended purpose

1. Easier to develop with — as mentioned above, you get some functionality for free, plus it is arguably easier to understand. 2. Better on mobile — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive. 3. Good for SEO — search engines give more importance to keywords inside headings, links, etc. than keywords included in non-semantic <div>s, etc., so your documents will be more findable by customers.


Using ARIA: Roles, states, and properties - Accessibility | MDN


웹에서 일반적으로 사용되는 content block landmark roles -> 구조 파악에 도움이 됨.

[WAI-ARIA Roles - Accessibility MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)

그 외에도 주로 사용되는 UI에서 사용됩


properties & state

markup에 추가적인 의미 전달 필요시 사용. markup을 줄 수 없는 상황, 혹은 부가적으로 더 설명해야 하는 경우에 사용.

element의 상태 정보를 나타내어 준다. 여러 가지 탭이 있을때, 해당 탭이 선택되었는가 아닌가 input이 disable인가 아닌가 등에 대한.

app의 life cycle 내에서 #웹접근성