Markup & Styling

An element's accessible name is the short label assistive technology announces for it. The browser computes it per element type: a button's name comes from its own text content, an image's from its alt attribute.

tabindex="0" puts an element in the tab order at its DOM position; a negative value such as -1 makes it focusable by script or click but never by Tab; a positive value jumps it ahead of everything else and wrecks the order.

Give the button an accessible name with aria-label="Delete", with visually hidden real text inside it, or with aria-labelledby pointing at existing on-screen text. Hide the decorative icon with aria-hidden="true" so it adds nothing. A title tooltip alone is not enough.

aria-live="polite" queues the announcement until the screen reader finishes what it is saying; aria-live="assertive" interrupts immediately. role="status" implies polite, role="alert" implies assertive, and both imply aria-atomic="true".

The first rule of ARIA is to not use ARIA when a native HTML element already provides the semantics and behaviour you need. Reach for button, a with href, input and label first; add ARIA only to fill real gaps.

BEM names classes after a block (a standalone component, .card), its elements (parts that exist only inside it, .card__title), and modifiers (variant flags, .card--featured). Two underscores mark an element, two hyphens mark a modifier.

CSS selectors are matched against the entire document regardless of which file they were written in, so one .title rule styles every element with that class. Collisions are silent, and unrelated components end up restyling each other.

A single class keeps every rule at the same low weight, so a later rule can override it by source order alone. IDs and long descendant chains raise the weight, forcing every future override to be heavier still.

Utility-first composes many single-purpose classes in the markup, each setting one or two declarations. The semantic approach puts one meaning-based class on the element and defines all its styling in the stylesheet. The trade is markup noise versus an ever-growing stylesheet.

Under the default box-sizing: content-box, width sizes only the content box, so 100px width plus 20px padding on each side plus 2px borders renders 144px wide. With box-sizing: border-box the box stays 100px and the content area shrinks to 56px.