Tags
#php
#kotlin
#bash
#go
#sql
#rust
#typescript
#html
#java
#python
#files
#utils
#strings
#http
#concurrency
#async
#json
#arrays
#security
#types
#crypto
#database
#dates
#format
HTML
ARIA Live Region for Dynamic Announcements
Use `aria-live` on a container so screen readers announce its content changes (toast notifications, form errors, loading states). `polite` waits for a pause; `assertive` interrupts.
@admin
HTML
Radio Group with Fieldset + Legend
Always wrap radio groups (and checkboxes that share semantics) in a `<fieldset>` with a `<legend>`. Screen readers announce the legend before each option — without it, the choice is contextless.
HTML
Navigation with aria-current
Use `<nav>` for primary navigation. Mark the currently-active link with `aria-current="page"` — screen readers will announce it, and you get a free CSS hook with `[aria-current]`.
HTML
Skip-to-Main-Content Link
Keyboard users (and screen-reader users) tab through every nav link before reaching content. A skip-link as the first focusable element jumps straight to <main>. Required for WCAG 2.1 AA.
HTML
Accessible Data Table
Real tables need `<caption>`, `<thead>` / `<tbody>` / `<tfoot>`, and `<th scope="col">` headers. Screen readers use these to announce column/row context on every cell.
HTML
Visually Hidden Utility (.sr-only)
Hides content from sighted users but keeps it discoverable by screen readers. Use for icon-only buttons, table-row context, and form-status announcements that don't need visible text.
HTML
Native <dialog> Modal
The HTML `<dialog>` element gives you a real modal — focus trap, Escape-to-close, backdrop overlay — without any JS library. Method `.showModal()` opens; `.close()` closes.
HTML
Loading State with aria-busy
`aria-busy="true"` tells assistive tech "this section is updating — wait until it's done before re-reading." Combine with a visual spinner and an `aria-live` status message for the best experience.
HTML
Search Form with Accessible Label
A search input usually has a visible-only icon — but screen readers need a real label. Pair a visually-hidden `<label>` with the icon, OR use `aria-label` on the input.
HTML
Audio Element
`<audio>` is video's simpler sibling. Use it for podcasts, music samples, sound effects on play. Same multi-`<source>` pattern for cross-browser format support.
HTML
Progress and Meter Elements
`<progress>` shows how much of a task is done (downloads, multi-step forms). `<meter>` shows a value within a known range (disk usage, password strength). Both render as native UI in every browser.
HTML
Tabs (ARIA tablist pattern)
The accessible tab pattern: a `role="tablist"` container, each tab as `role="tab"`, panels as `role="tabpanel"`. `aria-selected` + `aria-controls` link them and announce state.
HTML
Sortable Table (semantic markup + JS hook)
Use `<button>` inside `<th>` and `aria-sort` on the column so screen readers announce sort state. The button is the keyboard-accessible trigger; JS only handles the actual sort.
HTML
Video Element with Captions
`<video>` with multiple `<source>` formats (MP4 + WebM), `controls`, `poster`, and a captions track via `<track kind="captions">`. All shipped with the browser — no JS player needed.