A visual dictionary
Web
38IntersectionObserverThe list that refills itself. Every time you reach the bottom, ten more arrive and the footer moves further away.
IntersectionObserverThe list beside the article, with one link lit up on whatever section you have scrolled to.
text-overflow: ellipsisThe long name that gets cut and leaves a "…" behind, with the rest still reachable somewhere.
role="radiogroup"The joined row of buttons where one stays lit, and the highlight slides over to whichever you press.
aria-roledescription="carousel"The strip that flips through banners with two arrows and a row of dots. Most people only ever see the first slide.
popover="auto" + role="dialog"The small box that opens next to a button, holds things you can press, and closes the moment you click outside.
role="dialog" + role="combobox"Hit Cmd+K, type the name of what you want, and it runs before you have found the menu it lives in.
role="menu" + role="menuitem"The panel that opens from a three dot button or a right click, where every row runs a command and then it closes itself.
<header> + <nav>The strip across the top of every page: logo at one end, section links beside it, search and account at the other end.
<aside> / <nav>The column down the side of an app that holds every page, and stays put wherever you go.
<hr> / role="separator"One thin line carrying three different meanings. Your eye cannot tell them apart; the accessibility tree can.
<article>The box with a picture, a title, two lines of text, and a button. Everyone just calls it a card.
<table> + <th scope>Rows and columns that let you compare numbers straight down a line, with a header you press to re-sort.
<img alt> / AvatarGroupThe little circle with a photo in it, and your initials when there is no photo.
role="alert"The message that keeps its place in the page and never leaves on its own, either beside the field or as a strip across the top.
role="status" / badgeContentThe small number parked on the corner of an icon. You cannot press it, you press the icon.
role="progressbar"The bar tells you how far along you are. The spinner only tells you to wait.
<input type="file">Press it and your computer opens its own file window, or drag the file straight in from the desktop.
role="combobox"Type two letters and the list underneath shrinks until the thing you wanted is the only one left.
<input type="text">The box you type your name into. The plainest thing on the page, and the one with the most parts nobody can name.
<input type="range">The line with a handle you drag, and the number moves with your finger.
role="radiogroup"The row of little circles where picking one empties the one you picked before.
<input type="checkbox">The little square you tick. Check as many as you want, and none of them cancels another.
<label for>The label on top, the small line underneath, and the error text. One unit, and every piece has its own job.
role="dialog" / inset-inline-startThe panel that slides in from one edge and leaves the page still showing behind it.
<Empty> / noRowsOverlayThe screen you land on when there is nothing to show. It still has to tell you what to do next.
<button> / role="option"The little capsule you press to filter by. The × on its edge removes it.
role="switch"The little switch that takes effect the moment you press it. There is no Save button and nothing to wait for.
<nav aria-label="pagination">The row of numbers under the results. Unlike infinite scroll, page 7 has a link you can send.
role="dialog" aria-modal="true"The window that dims the page behind it and will not let you past until you answer.
<select> / role="listbox"The box with the little down arrow that opens a list so you pick one thing.
role="tooltip" + aria-describedbyThe small bubble that appears when you rest the pointer on an icon and tells you what it does.
role="tablist"The row of labels you click to swap the panel underneath, without leaving the page.
aria-current="step"The row of numbered circles above a form that tells you which step you are on and how many are left.
aria-busy="true"The grey outline of the page that shows before the data lands, with a light that sweeps across it.
aria-expanded + aria-controlsA stack of headers. Press one and its panel opens underneath, and the one that was open usually closes.
role="status"The small box that slides into a corner, says "Saved", then disappears on its own.
aria-current="page"The small row of links above the title that tells you where you are in the site.