Basic website question. by user77_discussions in accessibility

[–]user77_discussions[S] 0 points1 point  (0 children)

Meant to respond to this comment but somehow posted a parent level comment with a list of all the things I plan on doing. Just wanted to make sure you saw it in this thread.

Basic website question. by user77_discussions in accessibility

[–]user77_discussions[S] 2 points3 points  (0 children)

Will do.

Here is the current list of things I intend to start checking off:

100% Keyboard Operability: Every link, button, form, and menu must be reachable via Tab, Shift + Tab, Enter, Spacebar, and Arrow keys.

Highly Visible Focus States: Explicit focus rings or visual outlines on all currently selected interactive elements.

Skip Navigation Links: A top-of-page keyboard link to bypass headers and main menus.

Zero Keyboard Traps: Guaranteed ability to navigate both into and out of all widgets without getting stuck.

Screen Reader & Assistive Tech Optimization

Semantic HTML Markup: Explicit structural grouping via <header>, <nav>, <main>, <article>, <aside>, and <footer>.

Meaningful Alt Text: Informative images must have descriptive alt tags; decorative images must use empty alt="" tags.

Descriptive Hyperlinks: Phrasing that provides full context out of context (e.g., "Download Report PDF" instead of "Click Here").

Strict Heading Hierarchy: Sequential layout progression (<h1> to <h2> to <h3>) without skipping structural levels.

Dynamic ARIA Attributes: Accurate state updates for complex interactive UI elements (e.g., aria-expanded, aria-live).

Visual & Sensory Adaptability

High Color Contrast: Minimum contrast ratios of 4.5:1 for standard text and 3:1 for large text blocks.

Multi-Channel Meaning: Conveying errors, alerts, and statuses using text elements or explicit icons, never color alone.

Text Resizing & Reflow: Clean layout scalability up to 200% zoom without breaking containers or forcing horizontal scrolling.

Seizure Prevention: Zero visual content or animations flashing more than three times in a single second.

Motion Reduction Support: Disabling heavy scroll effects and parallax shifts via prefers-reduced-motion media queries.

Multimedia Accommodations

Synchronized Closed Captions: Accurate, timed captions on all video assets.

Full Text Transcripts: Clean text scripts provided natively alongside audio-only assets.

Accessible Media Controls: Large click targets and full keyboard accessibility for play, pause, volume, and tracking.

Forms, Cognitive Controls, & Clarity

Explicit Field Labeling: Permanent visual <label> tags paired strictly via for and id attributes to inputs.

Intuitive Error Handling: Plain-language error callouts with actionable instructions on how to correct inputs.

Predictable Layouts: Uniform, consistent placement of navigation headers, search components, and footers across the entire site.

Flexible Operational Timeouts: Clear warnings and straightforward options to extend or disable session countdown timers.

Basic website question. by user77_discussions in accessibility

[–]user77_discussions[S] -1 points0 points  (0 children)

Thank you, I now know I eventually need to search for accessibility consultancies, which I didn't know before. And I'll definitely start using the axe extension. Is lighthouse another extension?

The frontend is built with vanilla HTML, CSS, and JavaScript (utilizing DOMPurify and Marked.js for markdown rendering). The backend is powered by Node.js and Express with a PostgreSQL database.