Who reads the page
Accessibility means everyone can use a page, however they use a computer. A blind user hears it through a screen reader, a program that reads the page aloud. Others use only a keyboard, never a mouse.
From your HTML the browser builds an accessibility tree. Each node has a role (what it is), a name (what it is called) and sometimes a state (such as expanded). Screen readers read this tree, not the pixels.
HTML that explains itself
Line 1 can be styled to look like a button, but a div means nothing. Its node gets the role generic and no name, so the reader just says "Save". Tab skips it and Enter does nothing.
Line 2 is a real button. Its node gets the role button and takes its name from its text, Save. The reader says "Save, button". Tab reaches it, and Enter or Space presses it. No extra code needed.
Line 3 is an image. Its alt attribute becomes the node's name, so the reader says "Cup, image". Leave alt out and some readers read the file name instead. A decorative image gets alt="" and is skipped.
Line 4's label points at the input with id="q" on line 5, so the field's name becomes Search. Clicking the word Search also puts the cursor in the box. type="search" gives the role searchbox.
ARIA edits the tree
The line 6 button shows only ×, which tells a listener nothing. ARIA (Accessible Rich Internet Applications) is a set of attributes that edit the tree. aria-label="Close" names it: "Close, button". It looks the same.
Line 7 adds a state: aria-expanded="false" says the menu this button opens is closed. The reader says "Menu, button, collapsed". ARIA only describes; it opens nothing on its own.
When the menu opens, your JavaScript must also set aria-expanded to "true". The node's state becomes expanded, and the reader says so. Forget it, and the reader keeps saying collapsed while the menu is open.
Keyboard and the first rule
Keyboard users press Tab to move between controls, in the order they appear in the HTML. Focus lands on Save, the search box, Close, then Menu. The div and the image are skipped: they are not controls.
role="button" makes the div a button in the tree, but Tab still skips it and Enter does nothing: you would add those yourself. The first rule of ARIA: use the real HTML element when one exists.
What happens
;; step 1/11 · who accessibility everyone can use the page screen reader speaks the page (NVDA, JAWS, VoiceOver) keyboard only Tab, Enter, Space, arrow keys both need HTML that says what each part IS
The tree on the right is simplified. A real one also holds the page itself, the label's own text and plain text nodes; the div's word "Save" sits there as plain text, which is why it is still read. Screen readers word things differently (NVDA, JAWS and VoiceOver each have their own phrasing and order). The figure shows the name, role and state they all receive.