Accessibility

accessibility - is a practice of website development. most commonly it includes instruments, which help screen readers to read the content

• besides, accessibility instruments help search engines to parse a web page
• some content can be added to the page for screen readers needs only. it is visually hidden via CSS
• a11y - numeronym

ARIA

Accessible Rich Internet Applications (ARIA) - specification designed to increase the accessibility of web pages with the help of ARIA attributes

• use case: add accessibility to <div> or <span>, which pretend to be a button
• native HTML instruments are still always preferable. specialized interactive elements, like <button>, are partly accessible by default

Attributes

role - defines the purpose of an element. there is specified list of roles

• e.g. role="button"

aria-checked - indicates whether checkbox or radio-button is checked
aria-pressed - indicates whether toggle button is pressed

• use case: reflect the state of accordion

aria-disabled - indicates disabled element
aria-hidden - hides an element from screen reader

aria-label - provides a name for an element, which doesn't have content. e.g. button with icon

• if content is present, aria-label will override it for screen readers

aria-labelledby