The Basics of Web Accessibility
You've no doubt heard the term "accessibility" in relation to a website or web application. But what does that actually mean? In short, if a website is accessible, it can be operated by anyone, including by those who aren't in the narrow range of "typical users". An accessible website can be accessed and operated by users with an impairment or disability, be it temporary, permanent, physical, or non-physical.
Affordances and Semantics
Most assistive technologies (e.g., screen readers, braille display, a switch device) rely on programmatically expressed semantics in order to properly interact with a website. To understand that term, one must first understand affordances.
An affordance is any object that provides its user with the opportunity to perform an action. A good example would be a teapot — its physical design (i.e., the fact that it has a handle) gives the user an idea of how it should be operated. Since you've seen and interacted with other objects with handles, the fact that a teapot has a handle allows you to infer how it should be used.
When building UIs, CSS is used to add visual affordances (e.g., adding a drop shadow and border to a button to make it look like a "real" button). However, if a user can't see the screen, then visual affordances are not conveyed to them, so the UI must be constructed in such a way that the same affordances are conveyed to assistive technologies.
Semantics, then, is the non-visual exposure of a UI element's affordances.
Semantics and the Accessibility Tree
Assistive technologies interact with the accessibility tree. When an assistive technology, such as a screen reader, is being used, the browser turns the DOM tree into a form that's useful to the assistive technology. This modified version of the DOM tree is the accessibility tree. The browser can do this because most DOM elements have an implicit semantic meaning, due to the fact that the DOM uses native HTML elements that the browser recognizes and that have predictable behavior on a variety of platforms. This built-in accessibility means that accessibility for native HTML elements (e.g., links and buttons) can be handled automatically.
In order to determine which elements to add to the accessibility tree, the browser inspects each DOM node and determines if it's semantically "interesting"; if it is, the node is added to the accessibility tree. Assistive technologies then "walk" the accessibility tree, using it to provide an alternative UI to the user.
Semantically "uninteresting" nodes (e.g., <div> and <span>) are often removed from the accessibility tree, especially if their only purpose is to position their children with CSS. For example, if a <button> is nested inside of 5 divs, the browser will likely remove some of the divs in the middle in order to reduce noise.