From c8a8733381885ab9d1676f339b844b95a58843d4 Mon Sep 17 00:00:00 2001
From: Benjamin Hofer <benjamin@gridscale.io>
Date: Tue, 14 Jul 2026 13:37:06 +0200
Subject: [PATCH 1/2] feat(ui): add screenreader accessibility groundwork (WCAG
 2.2 AA)

Make the CDS UI perceivable and operable with screenreaders (NVDA) and
keyboard, as a strictly non-visual retrofit: default rendering is pixel
identical; only attributes, announcements and tooling change.

- document language, page-title announcements on navigation (cdk
  LiveAnnouncer), landmark roles (banner/navigation/main), skip link
- form labels programmatically associated (nzFor + ids) across all
  views; aria-label fallbacks for placeholder-only inputs
- accessible names for icon-only buttons; alt texts; status icons
  expose their state as text (aria-label "Status: ...")
- keyboard/AT retrofit for non-interactive click targets via a new
  appClickable directive (role=button, tabindex, Enter/Space)
- shared tabs expose APG tab semantics (tablist/tab, aria-selected,
  arrow-key navigation); data-table gains aria-sort + keyboard sort
- run logs: step headers as disclosures (aria-expanded), role=log on
  streaming containers; run status changes announced politely
- workflow graph (libs/workflow-graph): focusable container with
  arrow-key navigation moving real DOM focus, per-node accessible
  names, selection announcements, +/-/0 zoom keys; key handling no
  longer intercepts arrows while typing in unrelated inputs
- toasts announced via ToastService (polite/assertive); nz-spin and
  banners exposed as role=status; Monaco editors labelled
- tooling: @angular-eslint/template accessibility rules enabled as
  warnings (ratchet baseline, 0 errors); conventions documented in
  ui/docs/accessibility.md; audit and phased plan with remaining
  visual-impact items in ui/docs/accessibility-plan.md

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Signed-off-by: Benjamin Hofer <benjamin@gridscale.io>
---
 ui/.eslintrc.js                               |  16 +-
 ui/docs/accessibility-plan.md                 | 267 ++++++++++++++++++
 ui/docs/accessibility.md                      |  47 +++
 .../workflow-graph/src/lib/graph.component.ts |  98 +++++++
 ui/libs/workflow-graph/src/lib/graph.html     |  11 +-
 ui/libs/workflow-graph/src/lib/graph.lib.ts   |  38 +++
 .../src/lib/node/fork-join-node.html          |   2 +-
 .../src/lib/node/job-node.component.ts        |  25 +-
 .../workflow-graph/src/lib/node/job-node.html |   6 +-
 .../src/lib/node/matrix-node.component.ts     |  28 +-
 .../src/lib/node/matrix-node.html             |   9 +-
 .../src/lib/node/stage-node.html              |   5 +-
 ui/src/app/app.component.html                 |  17 +-
 ui/src/app/app.component.ts                   |  11 +
 ui/src/app/shared/action/action.html          |  24 +-
 .../shared/action/step/form/step.form.html    |   2 +-
 ui/src/app/shared/action/step/step.html       |  17 +-
 .../ascode/save-form/ascode.save-form.html    |   8 +-
 .../shared/button/upload/upload.button.html   |   2 +-
 ui/src/app/shared/card/card.html              |   2 +-
 ui/src/app/shared/chart/chart.html            |   7 +-
 ui/src/app/shared/conditions/conditions.html  |   8 +-
 ui/src/app/shared/diff/item/diff.item.html    |   6 +-
 .../shared/directives/clickable.directive.ts  |  35 +++
 .../favorite-button.component.html            |   7 +-
 .../input/autofocus/autofocus.input.html      |   4 +-
 .../app/shared/input/editor/editor.input.html |   2 +-
 ui/src/app/shared/input/input-filter.html     |   2 +-
 ui/src/app/shared/keys/form/keys.form.html    |   4 +-
 ui/src/app/shared/keys/list/keys.list.html    |   4 +-
 .../labels/edit/labels.edit.component.html    |  14 +-
 .../shared/parameter/form/parameter.form.html |  10 +-
 .../app/shared/parameter/list/parameter.html  |   8 +-
 .../parameter/value/parameter.value.html      |  16 +-
 .../permission/form/permission.form.html      |   8 +-
 .../form/workflow-permission.form.html        |   6 +-
 .../permission/list/permission.list.html      |   6 +-
 .../repository-ref-select.html                |   6 +-
 .../requirements/form/requirements.form.html  |  14 +-
 .../value/requirements.value.html             |  22 +-
 .../resizable-panel/resizable-panel.html      |   4 +-
 ui/src/app/shared/scrollview/scrollview.html  |   2 +-
 ui/src/app/shared/searchable/searchable.html  |   4 +-
 ui/src/app/shared/shared.module.ts            |   3 +
 ui/src/app/shared/status/status.icon.html     |   4 +-
 .../app/shared/table/data-table.component.ts  |   8 +
 ui/src/app/shared/table/data-table.html       |  27 +-
 ui/src/app/shared/tabs/tab.html               |   2 +-
 ui/src/app/shared/tabs/tabs.component.ts      |  31 ++
 ui/src/app/shared/tabs/tabs.html              |  12 +-
 ui/src/app/shared/toast/ToastService.ts       |   6 +
 .../shared/variable/form/variable.form.html   |   6 +-
 ui/src/app/shared/variable/list/variable.html |  10 +-
 .../shared/variable/value/variable.value.html |   8 +-
 ui/src/app/shared/vcs/vcs.strategy.html       |  20 +-
 .../workflow-template.apply-form.html         |   4 +-
 .../workflow-template.apply-modal.html        |   4 +-
 .../workflow-template.param-form.html         |   4 +-
 .../menu/edit-hook/menu.edit.hook.html        |   6 +-
 .../menu/edit-node/menu.edit.node.html        |  24 +-
 .../hook/details/hook.details.component.html  |  26 +-
 .../workflow/node/run/node.run.param.html     |  14 +-
 .../workflow.sidebar.run.component.html       |   6 +-
 .../wizard/context/wizard.context.html        |   4 +-
 .../workflow/wizard/hook/hook.form.html       |  15 +-
 .../workflow/wizard/input/wizard.input.html   |   1 +
 .../workflow/wizard/node-add/node.wizard.html |  12 +-
 .../outgoinghook/wizard.outgoinghook.html     |  14 +-
 .../app/shared/workflow/wnode/hook/hook.html  |   2 +-
 .../shared/workflow/wnode/join/node.join.html |   2 +-
 .../wnode/pipeline/node.pipeline.html         |   6 +-
 .../shared/workflow/wnode/workflow.node.html  |   2 +-
 .../admin/hook-task/show/hook-task.show.html  |  16 +-
 .../admin/service/list/service.list.html      |  12 +-
 .../form/worker-model-pattern.form.html       |  48 ++--
 .../application/add/application.add.html      |  14 +-
 .../show/admin/application.admin.html         |  10 +-
 .../deployment/application.deployment.html    |  20 +-
 .../admin/repository/application.repo.html    |  10 +-
 .../views/application/show/application.html   |   2 +-
 .../app/views/auth/ask-reset/ask-reset.html   |   6 +-
 ui/src/app/views/auth/callback/callback.html  |  11 +-
 ui/src/app/views/auth/reset/reset.html        |   4 +-
 ui/src/app/views/auth/signin/signin.html      |  40 +--
 ui/src/app/views/auth/verify/verify.html      |   4 +-
 .../environment/add/environment.add.html      |   4 +-
 .../show/advanced/environment.advanced.html   |  12 +-
 .../environment/show/environment.show.html    |   2 +-
 ui/src/app/views/home/home.html               |   2 +-
 ui/src/app/views/navbar/navbar.html           |  32 ++-
 .../app/views/pipeline/add/pipeline.add.html  |  10 +-
 .../pipeline/show/admin/pipeline.admin.html   |   8 +-
 .../ascode-editor/pipeline.ascode.editor.html |   8 +-
 .../views/pipeline/show/pipeline.show.html    |   2 +-
 .../show/workflow/pipeline.workflow.html      |  20 +-
 .../stage/form/pipeline.stage.form.html       |   4 +-
 .../project/activity-bar/activity-bar.html    |  16 +-
 ui/src/app/views/project/add/project.add.html |  26 +-
 .../from/project.repomanager.form.html        |  48 ++--
 .../list/project.repomanager.list.html        |   6 +-
 .../settings/concurrency/concurrencies.html   |   4 +-
 .../concurrency.form.component.html           |  36 +--
 .../integrations/project.integrations.html    |  36 +--
 .../project/settings/keys/project.keys.html   |   4 +-
 .../settings/retention/retention.component.ts |   3 +-
 .../project/settings/retention/retention.html |   2 +-
 .../retention/retention.report.component.ts   |   3 +-
 .../settings/retention/retention.report.html  |   2 +-
 .../variablesets/items/variableset.item.html  |  16 +-
 .../settings/variablesets/variablesets.html   |   6 +-
 .../project/settings/webhooks/webhooks.html   |  16 +-
 .../show/application/application.list.html    |   2 +-
 .../show/environment/environment.list.html    |   2 +-
 .../project/show/pipeline/pipeline.list.html  |   2 +-
 ui/src/app/views/project/show/project.html    |   4 +-
 .../workflow/blocs/workflow.list.blocs.html   |  22 +-
 .../project/show/workflow/workflow.list.html  |  12 +-
 .../explore/explore-entity.component.ts       |   3 +-
 .../projectv2/explore/explore-overview.html   |  12 +-
 .../projectv2/explore/explore-repository.html |  20 +-
 .../projectv2/explore/explore-sidebar.html    |  36 +--
 .../repository-add/repository-add.html        |   4 +-
 .../projectv2/run-list/run-list-sidebar.html  |  12 +-
 .../views/projectv2/run-list/run-list.html    |  38 +--
 .../projectv2/run-start/run-gate-inputs.html  |  12 +-
 .../views/projectv2/run-start/run-start.html  |   2 +-
 .../projectv2/run/run-contexts.component.ts   |   3 +-
 .../views/projectv2/run/run-hook.component.ts |   3 +-
 ui/src/app/views/projectv2/run/run-info.html  |   6 +-
 ui/src/app/views/projectv2/run/run-job.html   |  28 +-
 .../projectv2/run/run-result.component.ts     |   3 +-
 .../app/views/projectv2/run/run-results.html  |  18 +-
 .../projectv2/run/run-sources.component.ts    |   3 +-
 .../views/projectv2/run/run-test.component.ts |   6 +-
 ui/src/app/views/projectv2/run/run-tests.html |  38 +--
 .../app/views/projectv2/run/run.component.ts  |   6 +
 ui/src/app/views/projectv2/run/run.html       |  62 ++--
 ui/src/app/views/search/search.html           |  18 +-
 .../settings/action/form/action.form.html     |  26 +-
 .../settings/action/help/action.help.html     |   2 +-
 .../settings/action/usage/action.usage.html   |   4 +-
 .../views/settings/group/edit/group.edit.html |  30 +-
 .../views/settings/queue/queue.component.html |   8 +-
 .../consumer-create-modal.html                |  26 +-
 .../consumer-create-modal/scope-detail.html   |   2 +-
 .../consumer-details-modal.html               |  10 +-
 .../consumer-display-signin-token.html        |   8 +-
 .../views/settings/user/edit/user.edit.html   |  61 ++--
 .../worker-model/edit/worker-model.edit.html  |   8 +-
 .../worker-model/form/worker-model.form.html  | 130 ++++-----
 .../worker-model/help/worker-model.help.html  |   4 +-
 .../worker-model/list/worker-model.list.html  |   2 +-
 .../edit/workflow-template.edit.html          |   2 +-
 .../editor/workflow-template.editor.html      |   4 +-
 .../form/workflow-template.form.html          |  52 ++--
 .../help/workflow-template.help.html          |   2 +-
 .../app/views/workflow/add/workflow.add.html  |  22 +-
 .../views/workflow/graph/workflow.graph.html  |   4 +-
 .../workflow/run/node/pipeline/pipeline.html  |   4 +-
 .../workflow-run-job/workflow-run-job.html    |  20 +-
 .../run/node/summary/run.summary.html         |  11 +-
 .../run/node/test/table/test.table.html       |   6 +-
 .../run/summary/workflow.run.summary.html     |  19 +-
 .../app/views/workflow/run/workflow.run.html  |  14 +-
 .../show/admin/workflow.admin.component.html  |  46 +--
 .../form/workflow.notifications.form.html     |  64 ++---
 .../list/workflow.notification.list.html      |  10 +-
 ui/src/app/views/workflow/show/workflow.html  |   9 +-
 .../workflow/sidebar/code/sidebar.code.html   |   6 +-
 ui/src/app/views/workflow/workflow.html       |   4 +-
 ui/src/index.html                             |   4 +-
 ui/src/styles.scss                            |  36 +++
 172 files changed, 1694 insertions(+), 985 deletions(-)
 create mode 100644 ui/docs/accessibility-plan.md
 create mode 100644 ui/docs/accessibility.md
 create mode 100644 ui/src/app/shared/directives/clickable.directive.ts

diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
index 33627410da..353b6a6d60 100644
--- a/ui/.eslintrc.js
+++ b/ui/.eslintrc.js
@@ -73,7 +73,21 @@ module.exports = {
                 ],
                 "@angular-eslint/template/prefer-control-flow": [
                     "off"
-                ]
+                ],
+                // Accessibility rules (see ui/docs/accessibility.md).
+                // Introduced as "warn"; flipped to "error" per rule once the
+                // corresponding remediation sweep is complete.
+                "@angular-eslint/template/alt-text": ["warn"],
+                "@angular-eslint/template/click-events-have-key-events": ["warn"],
+                "@angular-eslint/template/elements-content": ["warn"],
+                "@angular-eslint/template/interactive-supports-focus": ["warn"],
+                "@angular-eslint/template/label-has-associated-control": ["warn"],
+                "@angular-eslint/template/mouse-events-have-key-events": ["warn"],
+                "@angular-eslint/template/no-autofocus": ["off"],
+                "@angular-eslint/template/no-distracting-elements": ["warn"],
+                "@angular-eslint/template/role-has-required-aria": ["warn"],
+                "@angular-eslint/template/table-scope": ["warn"],
+                "@angular-eslint/template/valid-aria": ["warn"]
             }
         }
     ]
diff --git a/ui/docs/accessibility-plan.md b/ui/docs/accessibility-plan.md
new file mode 100644
index 0000000000..59823ec78b
--- /dev/null
+++ b/ui/docs/accessibility-plan.md
@@ -0,0 +1,267 @@
+# CDS UI — Screenreader Accessibility Plan
+
+**Goal:** Full screenreader support (NVDA, JAWS, VoiceOver) for the CDS web UI (`ui/`), targeting **WCAG 2.2 Level AA** conformance (the current normative standard, and the baseline required by EN 301 549 / the European Accessibility Act). Keyboard operability is treated as a prerequisite of screenreader support throughout — a control NVDA cannot reach is a control NVDA cannot announce.
+
+**Hard constraint for the first PR(s): zero visual change.** Sighted users must see pixel-identical rendering after the change. This plan therefore classifies every work item by visual impact (see §3) and defines a first-PR scope (§6) that is strictly non-visual. Visually observable improvements (better focus styles, a graph list view, reorder buttons, component migrations) are explicitly deferred to later, separately reviewable steps.
+
+**Scope:** `ui/src/**` (Angular 21 app, ng-zorro-antd) and `ui/libs/workflow-graph` (standalone SVG DAG library). Both UI generations are in scope: v1 (`views/workflow`, `views/pipeline`, …) and v2 (`views/projectv2`), with v2 prioritized.
+
+---
+
+## 1. Current state (audit summary)
+
+An audit of all 217 templates and 460 TypeScript files (2026-07) found:
+
+### Global / structural
+- **Zero hand-authored ARIA** in the entire app: no `aria-*`, no `role=`, no `[attr.aria…]` bindings. All existing semantics come implicitly from ng-zorro components.
+- `ui/src/index.html:2` — `<html>` has **no `lang` attribute** (WCAG 3.1.1 failure on every page).
+- **No landmark elements** anywhere: the shell (`src/app/app.component.html`) uses `nz-layout`/`nz-header`/`nz-content`, which render generic `<div>`s. No `<main>`, `<nav>`, `<header>`, `<footer>`, no skip link.
+- Page titles: `Title` service is wired via route `data.title` in `app.component.ts:199-220` — good foundation, but coverage per route is incomplete.
+- **No focus management, no live regions**: `@angular/cdk/a11y` (LiveAnnouncer, FocusMonitor, FocusTrap) is unused; only 2 `.focus()` calls in the whole app.
+- **No a11y linting**: `.eslintrc.js` extends only `plugin:@angular-eslint/template/recommended`; the accessibility ruleset is not enabled.
+
+### Semantics & controls
+- **Forms are the broadest defect**: 526 `<nz-form-label>` but only 12 `nzFor` associations; 200 `<input>` with only 13 `id`s; 0 native `<label for>`. Screenreaders announce most fields with no name (e.g. `views/auth/signin/signin.html:13-24`).
+- **28 fake links**: `<a class="pointing" (click)="…">` with no `href` — not focusable, not activatable by keyboard (e.g. `signin.html:28`, test filters in `views/workflow/run/node/test/table/test.table.html`).
+- **~38 click handlers on non-interactive elements** (`div`/`span`/`li`/`td`/`i`), including clickable table rows in `shared/table/data-table.html`.
+- **Icon-only buttons without accessible names** are common (navbar tool/settings triggers, `data-table.html:116` copy button, `workflow.notification.list.html:6,27`, graph controls). Some rely on `title=` only.
+- Headings exist but are ad hoc: many pages start at `<h2>`/`<h3>` with no `<h1>`, frequent level skips.
+- 3 `<img>` without `alt`; existing alts are weak (`alt="icon"`).
+
+### Custom widgets
+- **Workflow graph (v1 `views/workflow/graph/` and v2 `libs/workflow-graph/`)** — dagre-d3/SVG with Angular node components in `foreignObject`. Nodes are non-focusable `<div (click)>` (`job-node.html:1`); pan/zoom is d3-zoom (mouse-only); lasso multi-select is mouse-only. v2 has partial arrow-key navigation, but via `@HostListener('window:keydown')` (`graph.component.ts:187-245`) with **no tabindex, no roles, no focus indication, no announcements** — the graph is effectively invisible to a screenreader. v1 has no keyboard support at all.
+- **Run log viewer (`views/projectv2/run/run-job.html`)** — custom renderer: collapsible step blocks are clickable `<div>`s without button/`aria-expanded` semantics; lines stream in over WebSocket with no live region; manual scroll-windowing.
+- **Custom tabs (`shared/tabs/`)** — built as `<ul nz-menu><li nz-menu-item (click)>`: announced as a menu, not tabs; no `aria-selected`, no arrow-key support. Widely used for page sections.
+- **Drag-and-drop (ng2-dragula)** — pipeline stage reordering (`views/pipeline/show/workflow/pipeline.workflow.html:24`) and job/action step reordering (`shared/action/action.html:89`) are mouse-only with no keyboard alternative.
+- **Editors** — Monaco (via `nz-code-editor`) has strong built-in screenreader support but is never labeled by the app; CodeMirror 5 (`shared/codemirror.ts`, ~20 consumers) is largely inaccessible by design.
+- **Status indicators** — `shared/status/status.icon.html` conveys build state by icon + color class only, no text alternative; graph edges/forks are color-only.
+- **Live updates** — WebSocket-driven run/job status changes (`event-v2.service.ts`, `run-job.component.ts`) update the UI silently; toasts go through ng-zorro `NzNotificationService` (live-region behavior unverified).
+
+### Strengths to build on
+- Interactions overwhelmingly use real `<button>`/`nz-button` (350+).
+- Data tables use `nz-table` with real `<thead>`/`<th>`.
+- ng-zorro provides framework ARIA for `nz-modal` (focus trap, `role="dialog"`, Esc), `nz-select`, `nz-tabset`, `nz-dropdown`.
+- No positive `tabindex` values anywhere (no tab-order traps).
+- Run list/header status already uses distinct icon shapes per status, not color alone.
+- v2 graph already has a keyboard navigation model (`navigationGraph`) to attach real focus semantics to.
+
+---
+
+## 2. Standards & references
+
+| Standard | Use |
+|---|---|
+| WCAG 2.2 Level AA | Conformance target; every work item below maps to success criteria (SC) |
+| WAI-ARIA 1.2 + ARIA Authoring Practices Guide (APG) | Widget patterns: tabs, dialogs, disclosure, listbox, toolbar, feed |
+| EN 301 549 | EU procurement/EAA alignment (inherits WCAG 2.2 AA) |
+| Angular CDK `a11y` package | `LiveAnnouncer`, `FocusMonitor`, `cdkTrapFocus`, `ListKeyManager` — preferred implementation vehicle |
+
+Primary assistive-technology test matrix: **NVDA + Chrome** and **NVDA + Firefox** (primary), VoiceOver + Safari (secondary), JAWS spot checks.
+
+---
+
+## 3. Visual-impact classification & ground rules
+
+Every work item is tagged with one of:
+
+| Tag | Meaning | Ships in |
+|---|---|---|
+| **[A]** | **Zero visual impact in any state.** Attribute-only changes (`aria-*`, `role`, `id`, `lang`, `alt` on already-broken images), TypeScript-only changes (LiveAnnouncer, focus logic that doesn't add styles), off-screen DOM (`.sr-only` content), tooling/CI. | PR #1 wave (now) |
+| **[B]** | **Pixel-identical for mouse users; visible only during keyboard interaction.** Focus outlines on elements newly made focusable, the skip link (rendered off-screen, appears only on Tab focus). The default rendering of every page is untouched. | PR #2 wave (own review, explicitly flagged) |
+| **[C]** | **Visible UI change or element swap with styling risk.** New controls (list-view toggle, reorder buttons), element replacements (`<a>`→`<button>`, div→`<h2>`, custom tabs→`nz-tabset`), CSS additions. | **Open / To Do (visual impact)** — later, per-feature PRs with screenshots |
+
+### Techniques that keep [A] items truly invisible
+
+1. **Attribute-only retrofit instead of element swaps.** Where semantics call for a different element (`<button>`, `<h1>`, `<main>`), the first pass adds ARIA to the *existing* element instead: `role="button"` + `tabindex="0"` + Enter/Space handler on the clickable `<div>`/`<a>`; `role="heading" aria-level="1"` on the styled div; `role="main"`/`role="banner"`/`role="navigation"` on the existing layout containers. No DOM structure, classes, or CSS selectors change, so no style can shift. Element swaps become tracked [C] debt.
+2. **No new wrapper elements in PR #1.** Wrapping `<router-outlet>` in `<main>` could break descendant/child CSS selectors — use `role="main"` on the existing `div.content.inner-content` in `app.component.html` instead.
+3. **`.sr-only` utility class** (visually-hidden, standard clip-pattern) added once; all supplementary text for screenreaders (status text, table alternatives, instructions) uses it. Verify it isn't already themed by ng-zorro; name it `cds-sr-only` to avoid collisions.
+4. **No global CSS changes** in [A]/[B] waves. No `:focus-visible` overhauls yet — newly focusable elements simply get the browser's default focus ring (keyboard-only, [B]). The unified focus-style pass is [C].
+5. **`LiveAnnouncer` over focus moves** for route changes in wave 1: announcing the new page title is invisible; programmatically moving focus can paint a focus ring — that variant is [B].
+6. **Proof, not promise:** the PR runs a screenshot-diff pass (the testcafe e2e suite already captures screenshots via `-s screenshots`; add a compare step or BackstopJS/Playwright screenshot run over the main routes) demonstrating zero rendered-pixel change. This is the PR's headline evidence.
+
+### Known [A] risk points to verify during implementation
+- Adding `role`/`aria` attributes to elements ng-zorro also decorates (`nz-menu-item`, `nz-table` internals): confirm ng-zorro doesn't overwrite or conflict at runtime (it renders its own roles on some components). Test per component.
+- Adding `id`s to inputs: ensure no existing CSS `#id` selectors or tests collide; use a `cds-field-…` prefix.
+- Monaco `accessibilitySupport`/`ariaLabel` options: config-only, but verify no layout reflow (Monaco can reserve space differently in a11y mode when screen reader is detected — that behavior is user-triggered, not default rendering).
+
+---
+
+## 4. Phased plan
+
+Phases are ordered by (impact × reach) / effort. Sizing: S ≤ 2 dev-days, M ≤ 1 week, L = 2–4 weeks. Every item carries its visual-impact tag.
+
+### Phase 0 — Tooling, guardrails, baseline (S–M) — all [A]
+
+Stop the bleeding before fixing the backlog: every new template must be born accessible. Nothing in this phase touches the rendered app at all.
+
+1. **[A] Enable a11y linting** — extend `plugin:@angular-eslint/template/accessibility` in `.eslintrc.js` for `*.html`. Initially set noisy rules (`label-has-associated-control`, `click-events-have-key-events`, `interactive-supports-focus`, `alt-text`, `valid-aria`, `role-has-required-aria`) to `warn`, flip to `error` per rule as each remediation sweep lands. Add to `lint-staged` so new code is gated immediately.
+2. **[A] Automated a11y checks in CI** — integrate `axe-core`: jasmine/karma helper for component tests, and an axe pass over the main routes in the e2e suite (`@testcafe-community/axe`; if e2e migrates, `@axe-core/playwright`). Record the baseline violation count; CI fails on regression above baseline; baseline ratchets down.
+3. **[A] Visual-regression harness** — screenshot capture + diff over the main routes (light and dark theme), wired into CI or at least into the PR workflow. This is both the zero-visual-change proof for this initiative and a lasting safety net for all future UI work.
+4. **[A] Conventions & docs** — `ui/docs/accessibility.md`: the ARIA conventions of this codebase (attribute-retrofit rules from §3, `cds-sr-only`, id-prefix scheme, `aria-label` for icon buttons, LiveAnnouncer usage), plus a PR checklist. `@angular/cdk/a11y` needs no new dependency (`@angular/cdk` is already installed).
+5. **[A] Baseline manual audit protocol** — script a 30-minute NVDA smoke pass (signin → home → project → run list → run → logs → settings) and record current behavior as the reference point.
+
+**Exit criteria:** lint + axe + screenshot-diff running in CI with a ratcheting baseline; contributor doc merged. Zero runtime changes shipped.
+
+### Phase 1 — Global structure: language, landmarks, titles, announcements (S–M)
+
+1. **[A]** `index.html`: add `lang="en"` to `<html>` (SC 3.1.1). Add `role="status"` to the boot-loader div.
+2. **[A] Landmarks via roles, not wrappers**: `role="banner"` on the existing navbar header element, `role="navigation" aria-label="Main"` on the navbar's menu container, `role="main"` on the existing content `div` around `<router-outlet>` in `app.component.html`. (SC 1.3.1, 2.4.1)
+3. **[A] Route titles + announcements** — audit `app.routing.ts` and all lazy routing files for missing `data.title`; fill gaps (title bar text changes are not "visual rendering" of the app, but flag it in the PR). On `NavigationEnd`, announce the new title via cdk `LiveAnnouncer` so SPA navigation is perceivable. (SC 2.4.2)
+4. **[B] Skip link** — visually-hidden-until-focused "Skip to main content" as first focusable element, targeting the main container (`tabindex="-1"` on target, `outline: none` scoped to it). Mouse users never see it; keyboard users see it on first Tab. (SC 2.4.1)
+5. **[A] Heading semantics without element swaps** — where a page's visual title is a styled `div`/`nzTitle`, add `role="heading" aria-level="N"`; fix aria-level so each page exposes exactly one level-1 heading and no skips. Actual element conversion (`<h1>` etc.) is deferred [C] debt. (SC 1.3.1, 2.4.6)
+6. **[C — deferred] Unified `:focus-visible` styling pass** across both themes. Until then, browser-default focus rings apply to newly focusable elements ([B]).
+
+**Exit criteria:** NVDA landmark (`D`) and heading (`H`) navigation plus title announcements work on every top-level route; screenshot diff clean.
+
+### Phase 2 — Forms & names sweep (M–L, mechanical but wide) — almost entirely [A]
+
+The single broadest defect class (526 labels / 12 associations). Pure attribute work.
+
+1. **[A] Label association** — one canonical pattern applied everywhere: `<nz-form-label nzFor="cds-field-x">` + `id="cds-field-x"` on the control. Where no visible label exists (search/filter inputs), `aria-label`; placeholders are never the only label. Sweep order: auth → v2 (`views/projectv2`) → settings → project/application/pipeline/environment → workflow v1 → shared components. (SC 1.3.1, 3.3.2, 4.1.2)
+2. **[A] Icon-only buttons** — sweep all buttons whose content is only `nz-icon`/`<i>`: add `aria-label` (keep existing `title`/tooltip for sighted users). Priority: navbar triggers, `shared/table/data-table.html:116`, graph controls (`libs/workflow-graph/.../graph.html:40-53`), `workflow.notification.list.html`. (SC 4.1.2)
+3. **[A] Images** — add the 3 missing `alt`s (`shared/card/card.html:2`, `shared/status/status.icon.html:4` → `alt=""` decorative, `shared/table/data-table.html:55`); replace meaningless `alt="icon"` values. (SC 1.1.1)
+4. **[A] Status text alternatives** — `aria-label="Status: Success"` on status icons (`shared/status/`, run badges, graph nodes/edges); supplementary `cds-sr-only` text where labels can't attach. Color-only cues get an invisible text equivalent now; visible non-color cues (shapes/text) are [C] follow-up where still needed. (SC 1.1.1, 1.4.1)
+5. **[A] Error identification** — associate validation error text to fields via `aria-describedby`; verify ng-zorro 21's `nzErrorTip` association, add `role="alert"` where missing. (SC 3.3.1, 3.3.3)
+
+**Exit criteria:** axe `label`/`button-name`/`image-alt` counts at zero; corresponding ESLint rules flipped to `error`; NVDA forms-mode pass on signin, project creation, run-start, settings/profile; screenshot diff clean.
+
+### Phase 3 — Interactive semantics: fake links, click-targets, tabs, tables (M)
+
+First pass is attribute-retrofit ([A]/[B]); element swaps become tracked [C] debt for a dedicated styling-reviewed PR.
+
+1. **[A→B] Fake links** — the 28 `<a class="pointing" (click)>`: keep the `<a>` element; add `tabindex="0"`, `role="button"` (for actions) or `[routerLink]` (for navigation), and Enter/Space handling via a shared directive (`appClickable`) so behavior is uniform. Focusability is [B] (focus ring on Tab). Element conversion to `<button class="link-style">` is [C]. (SC 2.1.1, 4.1.2)
+2. **[A→B] Clickable non-interactive elements** (~38 `div`/`span`/`li`/`td`/`i` with `(click)`): same shared-directive retrofit — `role="button"`, `tabindex="0"`, key handling. (SC 2.1.1)
+3. **[A→B] Data table interactions** (`shared/table/data-table.html`, run list): sortable `<th>` get `aria-sort`, `role="button"`, `tabindex="0"`, key handling on the existing click target; clickable rows get the same retrofit plus an `aria-label` describing the target. Real in-cell links replacing row-click are [C]. (SC 1.3.1, 2.1.1)
+4. **[A→B] Custom tabs (`shared/tabs/`)** — retrofit APG tab semantics onto the existing markup: `role="tablist"` on the `ul`, `role="tab"`/`aria-selected` on the items, `role="tabpanel"` on the content container, arrow-key roving tabindex in the component class. Verify ng-zorro's `nz-menu` directive doesn't fight the overridden roles at runtime — if it does, drop the `nz-menu` directive while keeping identical classes/CSS (verify pixel parity via screenshot diff). Migration to `nz-tabset` is [C] and probably unnecessary once retrofitted. (SC 1.3.1, 2.1.1, 4.1.2)
+5. **[A] Custom scroll containers** — `app-scrollview`/resizable panels: `tabindex="0"` (scrollable regions are keyboard-scrollable — [B] focus ring), `role="region"` + `aria-label` where they hold primary content. (SC 2.1.1)
+
+**Exit criteria:** full keyboard walk-through (no mouse) of project explore, run list, run view, pipeline editor chrome, settings — every visible action reachable and operable; NVDA announces role/name/state for each; screenshot diff clean (default state).
+
+### Phase 4 — Dynamic content: live regions, toasts, streaming (M) — all [A]
+
+Screenreader users must *hear* what sighted users *see change*. All of this is TS-level or off-screen DOM: zero visual impact.
+
+1. **[A] Toasts** — verify NVDA announces ng-zorro `NzNotificationService` output; if not, mirror toast text through cdk `LiveAnnouncer` inside `ToastService` (`shared/toast/ToastService.ts` is the single choke point — one fix covers ~40 call sites). Errors `assertive`, success/info `polite`. (SC 4.1.3)
+2. **[A] Run/job status changes** — in the v2 run view (`run.component.ts` EventV2 subscription), announce meaningful transitions ("Job build: started / succeeded / failed") via `LiveAnnouncer`, debounced to avoid flooding; same for visible run-list state changes. (SC 4.1.3)
+3. **[A] Log streaming (`run-job.component.ts`)** — do *not* pipe raw log lines into a live region (flooding). Announce step start/end and failure summaries; add `role="log"` + `aria-live="polite"` on the active step's existing container as an opt-in. Step headers get disclosure retrofit: `role="button"`, `aria-expanded`, `tabindex="0"` on the existing `<div>`s ([A→B]); windowing buttons announce loaded ranges via `cds-sr-only`/LiveAnnouncer. (SC 4.1.3, 1.3.1)
+4. **[A] Loading states** — `role="status"` + `cds-sr-only` text on `nz-spin` blocks and the `displayResolver` spinner; long operations announce completion. (SC 4.1.3)
+5. **[A] Modal audit** — ng-zorro handles trap/Esc/role; verify each custom modal sets an accessible name (`nzTitle`/`aria-labelledby`), that focus returns to the invoking control on close (service-created modals in `workflow.component`, `user.edit`, …), and that icon-only buttons inside got Phase-2 names. (SC 2.4.3)
+
+**Exit criteria:** NVDA scripted scenario "start a run, hear it progress and finish, open the failing job, hear the failure" passes without looking at the screen; screenshot diff clean.
+
+### Phase 5 — Complex widgets (L — the differentiating work) — mixed; visible parts deferred
+
+#### 5a. Workflow graph (v2 `libs/workflow-graph` first, then v1)
+The DAG cannot be made fully AT-equivalent as pixels; the strategy is **make the graph itself focusable and navigable** *plus* (later) **an equivalent structured alternative**.
+
+1. **[A→B] Real focus semantics on the existing keyboard model**: move key handling from `window:keydown` onto a focusable graph container (`tabindex="0"`, `role="application"` with `aria-roledescription`/`aria-label` explaining arrow-key navigation). Each node root (`job-node.html`) gets `role="button"`, `tabindex="-1"` (roving), and an accessible name ("Job build-linux, status Success, stage Build") — attributes only. Reuse the existing `selected` CSS class as the focus indication (no new styles); announce selection changes via `LiveAnnouncer`. Enter/Space activation is already wired. (SC 2.1.1, 4.1.2)
+2. **[A] Keyboard equivalents for pointer-only features**: zoom in/out/reset already have buttons — add `+`/`-`/`0` key bindings; multi-select restart via Space toggling the per-node checkbox that already exists (mouse lasso becomes redundant, not required). (SC 2.1.1)
+3. **[A] Dependency info in accessible names**: node names include "needs: X, Y" so color-only edges become redundant for AT; a `cds-sr-only` run summary ("12 jobs: 10 success, 1 failed, 1 running") accompanies the graph. (SC 1.4.1, 1.1.1)
+4. **[C — deferred] Equivalent "List view" toggle** rendering the run DAG as nested semantic lists/table (stage → job → status → dependencies), sharing selection state with the graph. Highest-value visible feature; also serves sighted keyboard power users. The v2 run page already has the data structures (`initRunJobs()`).
+5. **v1 graph (`views/workflow/graph/`)**: apply item 1 or, if v1 is sunsetting, rely on the [C] list view — decide with product based on v1's remaining lifespan.
+
+#### 5b. Editors
+1. **[A] Monaco** (`nz-code-editor` consumers): set `ariaLabel` in each `EditorOptions` ("Workflow YAML editor", "Retention rule editor"); confirm `accessibilitySupport: 'auto'` isn't disabled; associate surrounding visible labels. Monaco's built-in a11y is good once labeled. (SC 4.1.2)
+2. **[A now, C later] CodeMirror 5** (`shared/codemirror.ts`, ~20 consumers) is not meaningfully fixable in place. Interim [A]: `aria-label` on the wrapper + document the limitation. Real fix [C]: migrate consumers to `nz-code-editor` (Monaco, already a dependency) or CodeMirror 6; a plain-`<textarea>` fallback toggle is an alternative [C].
+
+#### 5c. Drag-and-drop (dragula)
+**[C — deferred]** Keyboard alternative requires visible controls: "Move up / Move down" buttons on pipeline stages (`pipeline.workflow.component.ts`) and action steps (`action.component.ts`), reusing existing reorder handlers, with LiveAnnouncer confirmation ("Stage Deploy moved to position 2 of 4"). Interim [A]: `cds-sr-only` note that reordering has no keyboard path yet + tracked debt. (SC 2.1.1, 2.5.7)
+
+#### 5d. Charts (`shared/chart/`)
+**[A]** `role="img"` + `aria-label` summary on the ngx-charts container, plus a `cds-sr-only` data table with the same series (application home stats). A visible "view as table" toggle is optional [C]. (SC 1.1.1)
+
+**Exit criteria:** an NVDA user can, without a mouse: read a workflow DAG, navigate to a failing job, restart selected jobs, and edit workflow YAML. (Stage reordering waits for the [C] wave.)
+
+### Phase 6 — Verification, hardening, governance (M, then continuous)
+
+1. **[A]** Full manual audit against WCAG 2.2 AA: NVDA+Chrome and NVDA+Firefox across scripted journeys (signin/SSO, create project, explore repos, start run, monitor run, read logs, edit pipeline as-code, admin/settings, queue). VoiceOver secondary. Fix findings within their tags.
+2. **[A]** Regression protection: promote all Phase-0 lint rules to `error`; axe CI baseline at zero for covered rules; DOM-level role/name/live-region assertions in e2e (NVDA itself can't run in CI).
+3. **[A]** Documentation: accessibility conformance statement (VPAT/EN 301 549 if OVHcloud needs procurement docs); user docs for graph keyboard shortcuts.
+4. **[A]** Governance: PR-template accessibility checklist; "accessible by default" contributor-guide section; NVDA smoke test in release QA; a11y triage label.
+5. **[C backlog]** Schedule the deferred visible wave as individually reviewable PRs with before/after screenshots: focus-visible styling, skip link (if held back), element-swap debt (buttons/headings/links), graph list view, drag-drop reorder buttons, CodeMirror migration, non-color status cues.
+
+---
+
+## 5. Work breakdown summary
+
+| Phase | Theme | Size | Visual impact | Key WCAG SC | Depends on |
+|---|---|---|---|---|---|
+| 0 | Lint + axe + screenshot-diff CI + conventions | S–M | [A] none | — (guardrails) | — |
+| 1 | lang, landmark roles, titles, announcements, heading roles | S–M | [A] (+1 [B] skip link) | 1.3.1, 2.4.1/2/6, 3.1.1 | — |
+| 2 | Form labels, icon-button names, alt text, status text, errors | M–L | [A] | 1.1.1, 1.3.1, 1.4.1, 3.3.x, 4.1.2 | 0 |
+| 3 | Fake links, click-divs, tabs, tables retrofit | M | [A→B] | 1.3.1, 2.1.1, 4.1.2 | 0 |
+| 4 | Live regions, toasts, streaming logs, modals | M | [A] | 4.1.3, 2.4.3 | 1 |
+| 5 | Graph focus semantics, Monaco labels, chart alternatives | L | [A→B] (+[C] deferred) | 1.1.1, 1.3.1, 2.1.1 | 3, 4 |
+| 6 | Audit, hardening, governance, [C] backlog scheduling | M + ongoing | [A] | all | 1–5 |
+
+Phases 1–3 are parallelizable across contributors after Phase 0 lands. Phase 5a can start alongside 2–3 since it is isolated in `libs/workflow-graph`.
+
+## 6. PR wave 1 — concrete scope (strictly zero visual change)
+
+Everything tagged [A] above, deliverable as one PR or a small stack:
+
+- Phase 0 entirely (lint `warn`, axe baseline, screenshot-diff harness, `docs/accessibility.md`, `cds-sr-only` utility).
+- Phase 1 items 1–3, 5 (`lang`, landmark roles, titles + LiveAnnouncer, heading roles). Skip link ([B]) goes in wave 2.
+- Phase 2 entirely (labels/ids, `aria-label` on icon buttons, `alt`, status labels, `aria-describedby` errors).
+- Phase 4 entirely (toast/status/log announcements, `role="status"` loaders, modal name/focus-return audit).
+- Phase 5b-1, 5d (Monaco `ariaLabel`, chart labels + sr-only table).
+
+**PR evidence:** screenshot diff over main routes (both themes) showing zero pixel change; axe before/after counts; NVDA smoke-pass notes.
+
+**Wave 2 ([B] — keyboard-visible only, flagged for design sign-off):** skip link; `tabindex` retrofits from Phase 3 and Phase 5a (focus rings appear on Tab only, default browser style).
+
+**Wave 3+ ([C] — visible, per-feature PRs with screenshots):** focus-visible styling, element-swap debt, graph list view, drag-drop reorder buttons, CodeMirror migration, visible non-color status cues.
+
+## 7. What changes for developers (and what they gain)
+
+This initiative changes day-to-day frontend development in `ui/`. Communicate this up front — most of it is upside.
+
+### New obligations
+- **A11y lint gates**: `@angular-eslint/template/accessibility` rules run via `lint-staged` on every commit and in CI. New templates must have labeled controls, alt text, key handlers on click targets, valid ARIA. Rules arrive as `warn` and flip to `error` per completed sweep — no big-bang breakage of open branches.
+- **New conventions to follow** (all documented in `ui/docs/accessibility.md`): `cds-field-…` id scheme + `nzFor` on every form control; `aria-label` mandatory on icon-only buttons; the `appClickable` directive instead of raw `(click)` on non-interactive elements; `LiveAnnouncer` for async outcomes; `cds-sr-only` for AT-only text.
+- **PR checklist** gains an accessibility section; reviewers check roles/names/announcements like they check tests.
+- **axe + screenshot baselines in CI**: a PR that introduces new axe violations or unexpected pixel diffs fails.
+
+### Developer benefits (mostly free by-products)
+- **Screenshot-diff harness (Phase 0.3) protects *all* UI work**, not just a11y — theme regressions, ng-zorro upgrades, and CSS refactors get caught automatically. This is arguably the biggest DX win of the whole plan.
+- **Stable, semantic test selectors**: once controls have roles and accessible names, e2e and component tests can query "the button named *Restart job*" instead of brittle CSS-class chains — fewer flaky tests, and tests stop breaking on markup refactors.
+- **Uniform interaction patterns**: one `appClickable` directive and one form-field pattern replace today's five ad-hoc ways of making things clickable/labeled — less copy-paste divergence, easier reviews.
+- **Documented shared-component contracts**: the sweeps force overdue documentation of `shared/` components (data-table, tabs, status) and flush out dead code already found by the audit (`ng2-completer` is an unused dependency; `semantic.json` is leftover build config — both removable).
+- **Better debugging of async flows**: LiveAnnouncer call sites make the "what changed and when" of WebSocket-driven state explicit and loggable.
+- **Keyboard operability helps power users and devs**: full keyboard paths through run views and the graph speed up everyone, not just AT users.
+- **Future-proofing**: EN 301 549 / EAA compliance becomes a checklist, not a fire drill, and ng-zorro/Angular upgrades get safer thanks to the axe + screenshot safety nets.
+
+## 8. Implementation status (2026-07-14)
+
+**✅ Implemented — [A] and [B] waves** (attribute-only retrofits, announcements, tooling; zero visual change in default rendering, browser-default focus rings visible only during keyboard use):
+
+- `lang="en"`, `role="status"` boot loader (`index.html`); landmark roles (`role="banner"`, `role="navigation"`, `role="main"` + `id="main-content"`); skip link; `cds-sr-only` utility.
+- Route-title announcements via cdk `LiveAnnouncer` (`app.component.ts`); toast announcements via `ToastService` (polite/assertive); banners/spinners as `role="status"`.
+- `appClickable` directive (`shared/directives/clickable.directive.ts`) retrofitting `role="button"`/`tabindex`/Enter/Space onto clickable non-interactive elements; applied across views.
+- Forms sweep: `nzFor` + `cds-field-…` ids, `aria-label` fallbacks; icon-only buttons named; `alt` fixes; status icons labelled (`aria-label="Status: …"`); data-table `aria-sort` + keyboard sort; tabs ARIA retrofit; run-log disclosure (`aria-expanded`, `role="log"`); run status change announcements; Monaco `ariaLabel`s; workflow-graph focus semantics, roving focus, node labels, keyboard zoom, selection announcements.
+- ESLint template accessibility rules at `warn` (`.eslintrc.js`); conventions doc `ui/docs/accessibility.md`.
+
+**🔲 Open / To Do (visual impact)** — every remaining [C] item; each needs its own PR with before/after screenshots and design sign-off:
+
+- [ ] Unified `:focus-visible` styling across both themes (today: browser-default rings).
+- [ ] Element-swap debt: fake links → real `<button>`/`<a routerLink>` styled as links; `role="heading"` divs → real `<h1>`–`<h4>`; landmark roles → native `<main>`/`<header>`/`<nav>` elements.
+- [ ] Clickable table rows → real in-cell links (row-click stays as pointer enhancement).
+- [ ] Custom tabs → `nz-tabset` migration (if the ARIA retrofit proves insufficient with NVDA).
+- [ ] Workflow graph "List view" toggle — equivalent semantic list/table of the DAG, shared selection state.
+- [ ] Drag-and-drop keyboard alternative: visible "Move up / Move down" controls on pipeline stages and action steps.
+- [ ] CodeMirror 5 migration (to Monaco/`nz-code-editor` or CodeMirror 6); or visible plain-textarea fallback toggle.
+- [ ] Visible non-color status cues where still missing (graph edges/forks).
+- [ ] Charts: visible "view as table" toggle (sr-only fallback exists).
+- [ ] Visible-on-focus enhancements pass (e.g. making the skip link styling match final design).
+- [ ] axe-core CI integration + screenshot-diff harness (tooling; no runtime visual impact but not yet wired into CI).
+
+## 9. Definition of done (per screen)
+
+A screen is "screenreader-ready" when, under NVDA:
+1. Landmarks, one level-1 heading, and a correct page title are announced on arrival.
+2. Every interactive element is reachable by Tab/arrow keys, has a role, an accessible name, and announced state (expanded/selected/checked/sorted).
+3. Every form field announces its label, required state, and validation errors.
+4. No information is conveyed by color, icon, or position alone (an AT-perceivable equivalent exists).
+5. Asynchronous outcomes (saves, run status, errors) are announced without user-initiated re-reading.
+6. Focus never disappears: dialogs trap and restore it; deletions/route changes move it somewhere sensible.
+7. axe reports zero violations for the enabled rule set — and the screenshot diff for the change is clean unless the PR is an approved [C]-wave change.
diff --git a/ui/docs/accessibility.md b/ui/docs/accessibility.md
new file mode 100644
index 0000000000..c2cb1e5147
--- /dev/null
+++ b/ui/docs/accessibility.md
@@ -0,0 +1,47 @@
+# CDS UI accessibility conventions
+
+Target: **WCAG 2.2 Level AA**, screenreader support verified with **NVDA** (Chrome/Firefox).
+Companion document: `accessibility-plan.md` (audit, phases, open items).
+
+The current remediation wave is **strictly non-visual**: attribute-only retrofits, ARIA,
+and announcements. Element swaps and any change with visual impact are tracked in the
+plan as "Open / To Do (visual impact)".
+
+## Rules for all new/changed templates
+
+1. **Form controls**: every control gets an `id` with the `cds-field-` prefix and its
+   `<nz-form-label nzFor="…">` pointing at it. Controls without a visible label get an
+   `aria-label`. A placeholder is never the only label.
+2. **Icon-only buttons**: always `aria-label="…"` on the button; decorative icons inside
+   any labelled control get `aria-hidden="true"`. Keep `title`/`nz-tooltip` for sighted users.
+3. **Never put `(click)` on a non-interactive element** (`div`, `span`, `li`, `td`, `i`,
+   `a` without `href`). Use a real `<button>`/`<a [routerLink]>` for new code. For existing
+   markup that must not change visually, add the `appClickable` directive
+   (`shared/directives/clickable.directive.ts`) — it retrofits `role="button"`,
+   `tabindex="0"` and Enter/Space activation.
+4. **Screenreader-only text**: use the `cds-sr-only` class (defined in `src/styles.scss`).
+5. **Announce async outcomes** with `LiveAnnouncer` (`@angular/cdk/a11y`): `'polite'` for
+   success/info, `'assertive'` for errors. Toasts sent through `ToastService` are
+   announced automatically — do not double-announce.
+6. **State must be conveyed in text**, not only by icon or color: status icons carry
+   `aria-label="Status: …"`; disclosure elements carry `aria-expanded`; sortable table
+   headers carry `aria-sort`.
+7. **Landmarks and headings**: pages must expose exactly one level-1 heading
+   (`role="heading" aria-level="1"` on existing styled elements until the element-swap
+   wave lands) and live inside the `role="main"` container provided by the app shell.
+8. **Dialogs**: every modal needs an accessible name (`nzTitle` or `aria-labelledby`);
+   focus must return to the triggering control on close.
+
+## Linting & CI
+
+- `@angular-eslint/template/*` accessibility rules are enabled in `.eslintrc.js` at
+  `warn`; each rule is flipped to `error` when its sweep is finished. Do not introduce
+  new warnings.
+- Planned (see plan Phase 0): axe-core checks and a screenshot-diff harness in CI.
+
+## Manual NVDA smoke pass (run before releases)
+
+signin → home → select project → run list → open run → open failing job logs →
+settings/profile. Verify: page title announced on navigation, landmarks (`D`) and
+headings (`H`) navigate, every control reachable with Tab/arrows and announced with
+role + name + state, toasts and run-status changes are spoken.
diff --git a/ui/libs/workflow-graph/src/lib/graph.component.ts b/ui/libs/workflow-graph/src/lib/graph.component.ts
index aac93e519c..700345ca20 100644
--- a/ui/libs/workflow-graph/src/lib/graph.component.ts
+++ b/ui/libs/workflow-graph/src/lib/graph.component.ts
@@ -148,6 +148,8 @@ export class GraphComponent implements AfterViewInit, OnDestroy {
     hooksOn: any;
     selectedNodeNavigationKey: string;
     navigationGraph: NavigationGraph;
+    liveAnnouncement: string = '';
+    graphSummary: string = '';
     direction: GraphDirection = GraphDirection.HORIZONTAL;
     ready: boolean;
     hasStages = false;
@@ -186,6 +188,30 @@ export class GraphComponent implements AfterViewInit, OnDestroy {
 
     @HostListener('window:keydown', ['$event'])
     handleKeyDown(event: KeyboardEvent) {
+        const activeElement = document.activeElement as HTMLElement;
+        const focusInGraph = !!activeElement && this.host.nativeElement.contains(activeElement);
+        if (activeElement && !focusInGraph) {
+            const tag = activeElement.tagName;
+            if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || activeElement.isContentEditable) {
+                return;
+            }
+        }
+
+        if (focusInGraph) {
+            switch (event.key) {
+                case '+':
+                case '=':
+                    this.graph?.zoomIn();
+                    return;
+                case '-':
+                    this.graph?.zoomOut();
+                    return;
+                case '0':
+                    this.graph?.center();
+                    return;
+            }
+        }
+
         // Selection-mode shortcuts (handled regardless of navigationDisabled)
         switch (event.key) {
             case 'Shift':
@@ -231,9 +257,66 @@ export class GraphComponent implements AfterViewInit, OnDestroy {
             this.selectedNodeNavigationKey = newSelected;
             this.graph.selectNode(this.selectedNodeNavigationKey);
             this.graph.centerNode(this.selectedNodeNavigationKey, true);
+            this.graph.focusNode(this.selectedNodeNavigationKey);
+            this.announceSelection(this.selectedNodeNavigationKey);
         }
     }
 
+    announceSelection(navigationKey: string): void {
+        this.liveAnnouncement = this.describeNode(navigationKey);
+        this._cd.markForCheck();
+    }
+
+    describeNode(navigationKey: string): string {
+        for (const n of this.nodes) {
+            if (n.type === GraphNodeType.Stage) {
+                for (const sub of n.sub_graph) {
+                    const description = this.describeGraphNode(sub, navigationKey);
+                    if (description) {
+                        return description;
+                    }
+                }
+            } else {
+                const description = this.describeGraphNode(n, navigationKey);
+                if (description) {
+                    return description;
+                }
+            }
+        }
+        return navigationKey;
+    }
+
+    describeGraphNode(n: GraphNode, navigationKey: string): string {
+        const baseKey = n.job?.stage ? `${n.job.stage}-${n.name}` : n.name;
+        if (n.type === GraphNodeType.Matrix) {
+            if (!navigationKey.startsWith(`${baseKey}-`)) {
+                return null;
+            }
+            const matrixKey = navigationKey.substring(baseKey.length + 1);
+            let description = `Job ${n.name} ${matrixKey}`;
+            const run = (n.runs ?? []).find(r =>
+                Object.keys(r.matrix).sort().map(k => `${k}: ${r.matrix[k]}`).join(', ') === matrixKey);
+            if (run?.status) {
+                description += `, status ${run.status}`;
+            }
+            if (n.job?.stage) {
+                description += `, stage ${n.job.stage}`;
+            }
+            return description;
+        }
+        if (navigationKey !== baseKey) {
+            return null;
+        }
+        let description = `Job ${n.name}`;
+        if (n.run?.status) {
+            description += `, status ${n.run.status}`;
+        }
+        if (n.job?.stage) {
+            description += `, stage ${n.job.stage}`;
+        }
+        return description;
+    }
+
     @HostListener('window:keyup', ['$event'])
     handleKeyUp(event: KeyboardEvent) {
         if (event.key === 'Shift' && this.selectionModeActive) {
@@ -330,6 +413,21 @@ export class GraphComponent implements AfterViewInit, OnDestroy {
                 };
             });
         });
+
+        this.computeGraphSummary();
+    }
+
+    computeGraphSummary(): void {
+        if (!this._runJobs || this._runJobs.length === 0) {
+            this.graphSummary = '';
+            return;
+        }
+        const counts: { [status: string]: number } = {};
+        this._runJobs.forEach(j => {
+            counts[j.status] = (counts[j.status] ?? 0) + 1;
+        });
+        const details = Object.keys(counts).map(s => `${counts[s]} ${s.toLowerCase()}`).join(', ');
+        this.graphSummary = `Workflow graph with ${this._runJobs.length} jobs: ${details}.`;
     }
 
     initGraph() {
diff --git a/ui/libs/workflow-graph/src/lib/graph.html b/ui/libs/workflow-graph/src/lib/graph.html
index 2d02f3cc44..ebed6ab6c9 100644
--- a/ui/libs/workflow-graph/src/lib/graph.html
+++ b/ui/libs/workflow-graph/src/lib/graph.html
@@ -1,4 +1,8 @@
-<div class="svg-wrapper" #svgGraph></div>
+<div class="svg-wrapper" #svgGraph tabindex="0" role="application"
+  aria-label="Workflow graph. Use arrow keys to move between jobs, Enter to open, Shift to select multiple."></div>
+<span aria-live="polite"
+  style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">{{liveAnnouncement}}</span>
+<span style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">{{graphSummary}}</span>
 
 @if (_workflowRun) {
   <div class="hooks">
@@ -38,7 +42,8 @@
 }
 
 <div class="controls">
-  <button nz-button (click)="changeDirection()" nzSize="default">
+  <button nz-button (click)="changeDirection()" nzSize="default"
+    [attr.aria-label]="direction === 'horizontal' ? 'Rotate graph right' : 'Rotate graph left'">
     @if (direction === 'horizontal') {
       <span nz-icon nzType="rotate-right" nzTheme="outline"
       title="Rotate graph right"></span>
@@ -48,7 +53,7 @@
       title="Rotate graph left"></span>
     }
   </button>
-  <button nz-button (click)="clickOrigin()" nzSize="default" title="Center graph">
+  <button nz-button (click)="clickOrigin()" nzSize="default" title="Center graph" aria-label="Center graph">
     <span nz-icon nzType="aim" nzTheme="outline"></span>
   </button>
 </div>
\ No newline at end of file
diff --git a/ui/libs/workflow-graph/src/lib/graph.lib.ts b/ui/libs/workflow-graph/src/lib/graph.lib.ts
index dfd3158a52..cde857427d 100644
--- a/ui/libs/workflow-graph/src/lib/graph.lib.ts
+++ b/ui/libs/workflow-graph/src/lib/graph.lib.ts
@@ -303,6 +303,20 @@ export class WorkflowV2Graph<T extends InteractiveNode> {
         this.previousTransformed = null;
     }
 
+    zoomIn(): void {
+        if (!this.zoom || !this.svg) {
+            return;
+        }
+        this.svg.call(this.zoom.scaleBy, 1.2);
+    }
+
+    zoomOut(): void {
+        if (!this.zoom || !this.svg) {
+            return;
+        }
+        this.svg.call(this.zoom.scaleBy, 1 / 1.2);
+    }
+
     /**
      * Center and zoom the viewport on a specific stage node.
      * Computes optimal scale for the stage bounding box, capped at maxOriginScale.
@@ -645,6 +659,30 @@ export class WorkflowV2Graph<T extends InteractiveNode> {
         this.nodesComponent.forEach(n => n.instance.selectNode(navigationKey));
     }
 
+    focusNode(navigationKey: string): void {
+        for (let i = 0; i < this.nodes.length; i++) {
+            if (this.nodes[i].type === GraphNodeType.Stage) {
+                continue;
+            }
+            const component = this.nodesComponent.get(`node-${this.nodes[i].key}`);
+            if (component && component.instance.match(navigationKey)) {
+                const instance = component.instance as any;
+                if (instance.focusNode) {
+                    instance.focusNode(navigationKey);
+                }
+                return;
+            }
+        }
+        for (let i = 0; i < this.nodes.length; i++) {
+            if (this.nodes[i].type === GraphNodeType.Stage) {
+                const subGraph = (this.nodesComponent.get(`node-${this.nodes[i].key}`)?.instance as any)?.graph as WorkflowV2Graph<T>;
+                if (subGraph) {
+                    subGraph.focusNode(navigationKey);
+                }
+            }
+        }
+    }
+
     activateNode(navigationKey: string): void {
         this.nodesComponent.forEach(n => n.instance.activateNode(navigationKey));
     }
diff --git a/ui/libs/workflow-graph/src/lib/node/fork-join-node.html b/ui/libs/workflow-graph/src/lib/node/fork-join-node.html
index cfb4fc8ea3..66842b0f1a 100644
--- a/ui/libs/workflow-graph/src/lib/node/fork-join-node.html
+++ b/ui/libs/workflow-graph/src/lib/node/fork-join-node.html
@@ -1,4 +1,4 @@
-<div class="node pointing" [class.highlight]="highlight" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseOut()"
+<div class="node pointing" aria-hidden="true" [class.highlight]="highlight" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseOut()"
      [class.success]="status === nodeStatusEnum.SUCCESS"
      [class.inactive]="status === nodeStatusEnum.SKIPPED"
      [class.fail]="status === nodeStatusEnum.FAIL">
diff --git a/ui/libs/workflow-graph/src/lib/node/job-node.component.ts b/ui/libs/workflow-graph/src/lib/node/job-node.component.ts
index cd276d64e3..c9b7438452 100644
--- a/ui/libs/workflow-graph/src/lib/node/job-node.component.ts
+++ b/ui/libs/workflow-graph/src/lib/node/job-node.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, inject, Input, OnDestroy, OnInit } from '@angular/core';
 import { GraphNode } from '../graph.model'
 import { V2WorkflowRunJobStatus } from '../v2.workflow.run.model';
 import { Subscription, concatMap, from, interval } from 'rxjs';
@@ -35,12 +35,35 @@ export class GraphJobNodeComponent implements OnInit, OnDestroy, InteractiveNode
     conditionTooltip: string = '';
 
     private _cd = inject(ChangeDetectorRef);
+    private _host = inject(ElementRef);
 
     constructor() {
         this.setHighlight.bind(this);
         this.selectNode.bind(this);
     }
 
+    get ariaLabel(): string {
+        const name = this.node?.job?.name && this.node.job.name.indexOf('${{') !== 0 ? this.node.job.name : this.node?.name;
+        let label = `Job ${name}`;
+        if (this.node?.run?.status) {
+            label += `, status ${this.node.run.status}`;
+        }
+        if (this.node?.job?.stage) {
+            label += `, stage ${this.node.job.stage}`;
+        }
+        return label;
+    }
+
+    focusNode(navigationKey: string): void {
+        if (!this.match(navigationKey)) {
+            return;
+        }
+        const element = this._host.nativeElement.firstElementChild as HTMLElement;
+        if (element) {
+            element.focus({ preventScroll: true });
+        }
+    }
+
     ngOnDestroy(): void {
         if (this.delaySubs) {
             this.delaySubs.unsubscribe();
diff --git a/ui/libs/workflow-graph/src/lib/node/job-node.html b/ui/libs/workflow-graph/src/lib/node/job-node.html
index edc83a9ce5..f01fba7019 100644
--- a/ui/libs/workflow-graph/src/lib/node/job-node.html
+++ b/ui/libs/workflow-graph/src/lib/node/job-node.html
@@ -1,4 +1,5 @@
-<div class="node pointing" [class.highlight]="highlight && !selected" [class.active]="selected" (click)="onMouseClick()"
+<div class="node pointing" role="button" tabindex="-1" [attr.aria-label]="ariaLabel"
+  [class.highlight]="highlight && !selected" [class.active]="selected" (click)="onMouseClick()"
   (mouseenter)="onMouseEnter()" (mouseleave)="onMouseOut()" [class.success]="node?.run?.status === statusEnum.Success"
   [class.inactive]="node?.run?.status === statusEnum.Skipped || node?.run?.status === statusEnum.Cancelled"
   [class.fail]="node?.run?.status === statusEnum.Fail || node?.run?.status === statusEnum.Stopped"
@@ -104,7 +105,8 @@
     (click)="clickSelectionOverlay($event)" (dblclick)="$event.stopPropagation();">
     @if (selectionMode === 'active') {
       <div class="controls">
-        <label nz-checkbox [ngModel]="selectionActive" (ngModelChange)="clickSelectionOverlay()"></label>
+        <label nz-checkbox [ngModel]="selectionActive" (ngModelChange)="clickSelectionOverlay()"
+        [attr.aria-label]="'Select job ' + node?.name + ' for restart'"></label>
       </div>
     }
   </div>
diff --git a/ui/libs/workflow-graph/src/lib/node/matrix-node.component.ts b/ui/libs/workflow-graph/src/lib/node/matrix-node.component.ts
index f8f8241271..2993742258 100644
--- a/ui/libs/workflow-graph/src/lib/node/matrix-node.component.ts
+++ b/ui/libs/workflow-graph/src/lib/node/matrix-node.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, inject, Input, OnDestroy, OnInit } from '@angular/core';
 import { GraphNode } from '../graph.model'
 import { V2WorkflowRunJobStatus } from '../v2.workflow.run.model';
 import { concatMap, from, interval, Subscription } from 'rxjs';
@@ -43,12 +43,38 @@ export class GraphMatrixNodeComponent implements OnInit, OnDestroy, InteractiveN
     allMatrixSelected: boolean = false;
 
     private _cd = inject(ChangeDetectorRef);
+    private _host = inject(ElementRef);
 
     constructor() {
         this.setHighlight.bind(this);
         this.selectNode.bind(this);
     }
 
+    jobAriaLabel(key: string): string {
+        let label = `Job ${this.displayNames[key] ?? key}`;
+        if (this.status[key]) {
+            label += `, status ${this.status[key]}`;
+        }
+        if (this.node?.job?.stage) {
+            label += `, stage ${this.node.job.stage}`;
+        }
+        return label;
+    }
+
+    focusNode(navigationKey: string): void {
+        const baseKey = this.node.job.stage ? `${this.node.job.stage}-${this.node.name}` : this.node.name;
+        for (let i = 0; i < this.keys.length; i++) {
+            if (`${baseKey}-${this.keys[i]}` === navigationKey) {
+                const elements = this._host.nativeElement.querySelectorAll('.job');
+                const element = elements[i] as HTMLElement;
+                if (element) {
+                    element.focus({ preventScroll: true });
+                }
+                return;
+            }
+        }
+    }
+
     ngOnDestroy(): void {
         if (this.delaySubs) {
             this.delaySubs.unsubscribe();
diff --git a/ui/libs/workflow-graph/src/lib/node/matrix-node.html b/ui/libs/workflow-graph/src/lib/node/matrix-node.html
index 3ff3b4cc7d..608401129e 100644
--- a/ui/libs/workflow-graph/src/lib/node/matrix-node.html
+++ b/ui/libs/workflow-graph/src/lib/node/matrix-node.html
@@ -33,7 +33,8 @@
       (dblclick)="$event.stopPropagation();">
       @if (selectionMode === 'active') {
         <label nz-checkbox [ngModel]="allMatrixSelected"
-          (ngModelChange)="clickSelectionOverlay()">
+          (ngModelChange)="clickSelectionOverlay()"
+          [attr.aria-label]="'Select all jobs of ' + node?.name + ' for restart'">
         </label>
       }
     </div>
@@ -43,7 +44,8 @@
   <div class="jobs">
     @for (key of keys; track key) {
       <div class="job-wrapper">
-        <div class="job" [class.highlight]="highlightKey === key && selectedKey !== key"
+        <div class="job" role="button" tabindex="-1" [attr.aria-label]="jobAriaLabel(key)"
+          [class.highlight]="highlightKey === key && selectedKey !== key"
           [class.active]="selectedKey === key" (click)="onMouseClick(key)" (mouseenter)="onMouseEnter(key)"
           (mouseleave)="onMouseOut(key)" [class.success]="status[key] && status[key] === statusEnum.Success"
           [class.inactive]="status[key] && status[key] === statusEnum.Skipped"
@@ -131,7 +133,8 @@
     @if (selectionMode === 'active') {
       <div class="controls">
         <label nz-checkbox [ngModel]="selectedMatrixKeys.includes(key)"
-        (ngModelChange)="clickMatrixJobCheckbox(key)"></label>
+        (ngModelChange)="clickMatrixJobCheckbox(key)"
+        [attr.aria-label]="'Select job ' + (displayNames[key] ?? key) + ' for restart'"></label>
       </div>
     }
   </div>
diff --git a/ui/libs/workflow-graph/src/lib/node/stage-node.html b/ui/libs/workflow-graph/src/lib/node/stage-node.html
index 39f8e91779..8e8c296936 100644
--- a/ui/libs/workflow-graph/src/lib/node/stage-node.html
+++ b/ui/libs/workflow-graph/src/lib/node/stage-node.html
@@ -1,4 +1,5 @@
-<div class="stage" [class.highlight]="highlight" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseOut()">
+<div class="stage" role="group" [attr.aria-label]="'Stage ' + node?.name" [class.highlight]="highlight"
+     (mouseenter)="onMouseEnter()" (mouseleave)="onMouseOut()">
     <div class="title">
         <div class="info" title="Stage {{node?.name}}">
             {{node?.name}}
@@ -6,6 +7,8 @@
         <div class="controls">
             <span nz-tooltip nzTooltipTitle="Center graph on stage {{node?.name}}"
                   nz-icon nzType="expand" nzTheme="outline" title="Center graph on stage {{node?.name}}"
+                  role="button" tabindex="0" [attr.aria-label]="'Center graph on stage ' + node?.name"
+                  (keydown.enter)="$event.stopPropagation();clickCenter();"
                   (click)="$event.stopPropagation();clickCenter();"></span>
         </div>
     </div>
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 25fe70fa1f..cdb81ab3c4 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -1,6 +1,6 @@
 @if (loading) {
-  <div class="app-loader">
-    <span nz-icon [nzType]="'loading'"></span>CDS is loading
+  <div class="app-loader" role="status">
+    <span nz-icon [nzType]="'loading'" aria-hidden="true"></span>CDS is loading
   </div>
 }
 
@@ -30,26 +30,29 @@
     }
     @if (isAPIAvailable && (!isConnected || !maintenance || currentAuthSummary?.user?.ring === 'ADMIN')) {
       <nz-layout>
-        <nz-header>
+        <a class="cds-skip-link" href="#main-content" (click)="skipToMain($event)">Skip to main content</a>
+        <nz-header role="banner">
           <app-navbar></app-navbar>
         </nz-header>
         <nz-content>
           @if ((maintenance) && (!isConnected || currentAuthSummary?.user?.ring === 'ADMIN')) {
-            <div class="banner"
+            <div class="banner" role="status"
               >
               {{ 'maintenance_title' | translate }}
             </div>
           }
           @if (showUIUpdatedBanner) {
-            <div class="banner update" (click)="refresh()">
+            <div class="banner update" (click)="refresh()" role="button" tabindex="0"
+              (keydown.enter)="refresh()" (keydown.space)="$event.preventDefault(); refresh()">
               {{ 'ui_updated' | translate }}
             </div>
           }
           <div class="page" [class.connected]="isConnected && !hideNavBar">
-            <div class="content inner-content" [class.connected]="isConnected && !hideNavBar">
+            <div class="content inner-content" [class.connected]="isConnected && !hideNavBar"
+              role="main" id="main-content" tabindex="-1">
               <router-outlet></router-outlet>
               @if (displayResolver) {
-                <nz-spin nzTip="Loading..."></nz-spin>
+                <nz-spin nzTip="Loading..." role="status" aria-label="Loading page"></nz-spin>
               }
             </div>
           </div>
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index 3af7ba3a36..ea2ccd0e7a 100644
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -1,3 +1,4 @@
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { registerLocaleData } from '@angular/common';
 import localeEN from '@angular/common/locales/en';
 import { Component, inject, NgZone, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
@@ -52,6 +53,7 @@ export class AppComponent implements OnInit, OnDestroy {
     _nzNotificationService = inject(NzNotificationService);
     _configService = inject(NzConfigService);
     _eventV2Service = inject(EventV2Service)
+    _liveAnnouncer = inject(LiveAnnouncer);
 
     @ViewChild('templateRootToast') toastTemplate: TemplateRef<any>;
     toastSubs: Subscription;
@@ -214,6 +216,7 @@ export class AppComponent implements OnInit, OnDestroy {
                 if (routeData[0]['title']) {
                     let title = format(routeData[0]['title'], routeData[1]);
                     this._titleService.setTitle(title);
+                    this._liveAnnouncer.announce(title, 'polite');
                 } else {
                     this._titleService.setTitle('CDS');
                 }
@@ -243,4 +246,12 @@ export class AppComponent implements OnInit, OnDestroy {
             location.reload();
         });
     }
+
+    skipToMain(e: Event): void {
+        e.preventDefault();
+        const el = document.getElementById('main-content');
+        if (el) {
+            el.focus();
+        }
+    }
 }
diff --git a/ui/src/app/shared/action/action.html b/ui/src/app/shared/action/action.html
index 52c2d5aa6d..9b3fd6bfe9 100644
--- a/ui/src/app/shared/action/action.html
+++ b/ui/src/app/shared/action/action.html
@@ -4,10 +4,10 @@
       <nz-row>
         <nz-col [nzSpan]="7">
           <nz-form-item>
-            <nz-form-label>Name</nz-form-label>
+            <nz-form-label nzFor="cds-field-action-name">Name</nz-form-label>
             <nz-form-control>
               @if (edit;) {
-                <input nz-input type="text" name="actionName" [(ngModel)]="editableAction.name"
+                <input nz-input type="text" id="cds-field-action-name" name="actionName" [(ngModel)]="editableAction.name"
                   (keydown)="editableAction.hasChanged = true; keyEvent($event)">
               }
               @if (!edit;) {
@@ -18,10 +18,10 @@
         </nz-col>
         <nz-col [nzSpan]="10">
           <nz-form-item>
-            <nz-form-label>Description</nz-form-label>
+            <nz-form-label nzFor="cds-field-action-description">Description</nz-form-label>
             <nz-form-control>
               @if (edit;) {
-                <textarea nz-input [disabled]="!edit" name="actionDescription"
+                <textarea nz-input [disabled]="!edit" id="cds-field-action-description" name="actionDescription"
                   [(ngModel)]="editableAction.description" rows="{{getDescriptionHeight()}}"
                 (keydown)="editableAction.hasChanged = true; keyEvent($event)"></textarea>
               }
@@ -37,7 +37,7 @@
           [disabled]="!edit">Enabled</label>
         </nz-col>
         <nz-col [nzSpan]="4">
-          <a class="pointing"
+          <a class="pointing" appClickable
             (click)="prepareEditRequirements(); requirementModalVisible = true">
             {{ editableAction.requirements.length + ' '}}{{'common_requirements' | translate }}
           </a>
@@ -72,11 +72,11 @@ <h3 class="inline">Job steps@if (steps) {
         <div class="alignRight">
           <button nz-button (click)="collapsed = !collapsed">
             @if (collapsed) {
-              <span nz-icon nzType="eye-invisible" nzTheme="outline"></span>
+              <span nz-icon nzType="eye-invisible" nzTheme="outline" aria-hidden="true"></span>
               {{'common_hide_all' | translate}}
             }
             @if (!collapsed) {
-              <span nz-icon nzType="eye" nzTheme="outline"></span>
+              <span nz-icon nzType="eye" nzTheme="outline" aria-hidden="true"></span>
               {{'common_show_all' | translate}}
             }
           </button>
@@ -127,7 +127,7 @@ <h3 class="inline">Job steps@if (steps) {
               (click)="sendActionEvent('update')"
               [disabled]="!editableAction.hasChanged || editableAction.loading"
               [nzLoading]="editableAction.loading" nzBlock>
-              <i nz-icon nzType="save" nzTheme="outline"></i>
+              <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>
               @if (!editPipelineMode) {
                 <span>Save</span>
               }
@@ -137,15 +137,15 @@ <h3 class="inline">Job steps@if (steps) {
             </button>
           </div>
           <div nz-col nzSpan="4">
-            <button nz-button nz-dropdown class="menuBtn" [nzDropdownMenu]="menu" nzPlacement="topRight" nzTrigger="click" name="menuBtn">
-              <i nz-icon nzType="ellipsis" nzTheme="outline"></i>
+            <button nz-button nz-dropdown class="menuBtn" [nzDropdownMenu]="menu" nzPlacement="topRight" nzTrigger="click" name="menuBtn" aria-label="More actions">
+              <i nz-icon nzType="ellipsis" nzTheme="outline" aria-hidden="true"></i>
             </button>
             <nz-dropdown-menu #menu="nzDropdownMenu" >
               <ul nz-menu>
                 <li nz-menu-item>
                   <button nz-button nzBlock nzType="primary"
                     (click)="$event.stopPropagation(); initActionFromJob()">
-                    <i nz-icon nzType="share-alt" nzTheme="outline"></i>Init a new action from job
+                    <i nz-icon nzType="share-alt" nzTheme="outline" aria-hidden="true"></i>Init a new action from job
                   </button>
                 </li>
                 <li nz-menu-item>
@@ -155,7 +155,7 @@ <h3 class="inline">Job steps@if (steps) {
                     (nzOnConfirm)="sendActionEvent('delete')"
                     nzPopconfirmPlacement="topLeft"
                     nz-button>
-                    <i nz-icon nzType="delete" nzTheme="outline"></i>Delete
+                    <i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>Delete
                   </button>
                 </li>
               </ul>
diff --git a/ui/src/app/shared/action/step/form/step.form.html b/ui/src/app/shared/action/step/form/step.form.html
index 3d3bc4c3f8..94dfeccc4c 100644
--- a/ui/src/app/shared/action/step/form/step.form.html
+++ b/ui/src/app/shared/action/step/form/step.form.html
@@ -37,7 +37,7 @@
   }
   @if (!expended) {
     <button nz-button nzType="default" (click)="showActions()" name="addStepMenuBtn" nzBlock>
-      <i nz-icon nzType="plus-square" nzTheme="outline"></i>Add Step
+      <i nz-icon nzType="plus-square" nzTheme="outline" aria-hidden="true"></i>Add Step
     </button>
   }
 </div>
diff --git a/ui/src/app/shared/action/step/step.html b/ui/src/app/shared/action/step/step.html
index 2b30a752e3..f034015cb6 100644
--- a/ui/src/app/shared/action/step/step.html
+++ b/ui/src/app/shared/action/step/step.html
@@ -5,19 +5,19 @@
       @if (edit) {
         <span class="move pointing">↕</span>
       }
-      <span class="pointing" (click)="collapsed = !collapsed">
+      <span class="pointing" appClickable aria-label="Toggle step details" (click)="collapsed = !collapsed">
         @if (!collapsed) {
-          <i nz-icon nzType="caret-right" nzTheme="fill"></i>
+          <i nz-icon nzType="caret-right" nzTheme="fill" aria-hidden="true"></i>
         }
         @if (collapsed) {
-          <i nz-icon nzType="caret-down" nzTheme="fill"></i>
+          <i nz-icon nzType="caret-down" nzTheme="fill" aria-hidden="true"></i>
         }
       </span>
     </nz-col>
     <!-- Step name -->
     <nz-col [nzSpan]="5">
       @if (edit && step.type !== 'ActionAsCode') {
-        <input nz-input name="stepName" [(ngModel)]="step.step_name"  (keydown)="action.hasChanged = true">
+        <input nz-input name="stepName" aria-label="Step name" [(ngModel)]="step.step_name"  (keydown)="action.hasChanged = true">
       }
       @if (!edit || step.type === 'ActionAsCode') {
         {{step.step_name}}
@@ -25,8 +25,8 @@
     </nz-col>
     <!-- Link to documentation -->
     <nz-col [nzSpan]="1">
-      <a title="Documentation" [routerLink]="this.stepURL">
-        <i nz-icon nzType="book" nzTheme="outline"></i>
+      <a title="Documentation" aria-label="Documentation" [routerLink]="this.stepURL">
+        <i nz-icon nzType="book" nzTheme="outline" aria-hidden="true"></i>
       </a>
     </nz-col>
     <!-- deprecated icon -->
@@ -83,8 +83,9 @@
         name="deleteStepButton"
         nzPopconfirmTitle="Are you sure you want to delete this step ?"
         (nzOnConfirm)="removeStep()"
-        nzPopconfirmPlacement="topRight">
-        <i nz-icon nzType="delete" nzTheme="outline"></i>
+        nzPopconfirmPlacement="topRight"
+        aria-label="Delete step">
+        <i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>
       </button>
     </nz-col>
   </nz-row>
diff --git a/ui/src/app/shared/ascode/save-form/ascode.save-form.html b/ui/src/app/shared/ascode/save-form/ascode.save-form.html
index f1b8bcd74a..431f4a3452 100644
--- a/ui/src/app/shared/ascode/save-form/ascode.save-form.html
+++ b/ui/src/app/shared/ascode/save-form/ascode.save-form.html
@@ -2,9 +2,9 @@
   <nz-row>
     <nz-col [nzSpan]="24">
       <nz-form-item>
-        <nz-form-label>{{ 'ascode_modal_label_branch' | translate }}</nz-form-label>
+        <nz-form-label nzFor="cds-field-ascode-branch">{{ 'ascode_modal_label_branch' | translate }}</nz-form-label>
         <nz-form-control>
-          <input nz-input type="text" [(ngModel)]="selectedBranch" (keyup)="changeParam()" [nzAutocomplete]="auto" name="branch" (input)="onInput($event)" />
+          <input nz-input type="text" id="cds-field-ascode-branch" [(ngModel)]="selectedBranch" (keyup)="changeParam()" [nzAutocomplete]="auto" name="branch" (input)="onInput($event)" />
           <nz-autocomplete nzBackfill #auto>
             @for (option of branchesFiltered; track option) {
               <nz-auto-option [nzValue]="option">{{ option }}</nz-auto-option>
@@ -13,8 +13,8 @@
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
-        <nz-form-label>{{ 'ascode_modal_label_message' | translate }}</nz-form-label>
-        <textarea nz-input rows="2" [(ngModel)]="commitMessage" (keyup)="changeParam()" name="commitMessage"></textarea>
+        <nz-form-label nzFor="cds-field-ascode-message">{{ 'ascode_modal_label_message' | translate }}</nz-form-label>
+        <textarea nz-input rows="2" id="cds-field-ascode-message" [(ngModel)]="commitMessage" (keyup)="changeParam()" name="commitMessage"></textarea>
       </nz-form-item>
     </nz-col>
     <nz-col [nzSpan]="24">
diff --git a/ui/src/app/shared/button/upload/upload.button.html b/ui/src/app/shared/button/upload/upload.button.html
index beca5ce4d7..3243dd1d24 100644
--- a/ui/src/app/shared/button/upload/upload.button.html
+++ b/ui/src/app/shared/button/upload/upload.button.html
@@ -1,6 +1,6 @@
 <nz-upload [nzBeforeUpload]="fileEvent" [nzAccept]="accept">
     <button nz-button type="button">
-        <i nz-icon nzType="upload"></i>
+        <i nz-icon nzType="upload" aria-hidden="true"></i>
         Select File
     </button>
 </nz-upload>
diff --git a/ui/src/app/shared/card/card.html b/ui/src/app/shared/card/card.html
index 3798356ff3..2c2d76abc0 100644
--- a/ui/src/app/shared/card/card.html
+++ b/ui/src/app/shared/card/card.html
@@ -1,5 +1,5 @@
 <div class="entity-card" [class.short]="onlyTitle">
-  <img src="{{image}}">
+  <img src="{{image}}" alt="">
   <div class="title">{{title}}</div>
   @if (!onlyTitle) {
     <div class="description">
diff --git a/ui/src/app/shared/chart/chart.html b/ui/src/app/shared/chart/chart.html
index 0aac340830..3b06f8a6f6 100644
--- a/ui/src/app/shared/chart/chart.html
+++ b/ui/src/app/shared/chart/chart.html
@@ -1,7 +1,12 @@
 
 @switch (configuration.type) {
   @case ('area-stacked') {
-    <div class="graph">
+    <span class="cds-sr-only">
+      @for (d of configuration.datas; track d) {
+        <span>{{d.name}}: @for (s of d.series; track s) {<span>{{s.name}} {{s.value}}. </span>}</span>
+      }
+    </span>
+    <div class="graph" role="img" [attr.aria-label]="configuration.title ? 'Chart: ' + configuration.title : 'Chart'">
       <ngx-charts-area-chart-stacked
         [scheme]="configuration.colorScheme"
         [results]="configuration.datas"
diff --git a/ui/src/app/shared/conditions/conditions.html b/ui/src/app/shared/conditions/conditions.html
index 221c5ab39c..3e7137d710 100644
--- a/ui/src/app/shared/conditions/conditions.html
+++ b/ui/src/app/shared/conditions/conditions.html
@@ -16,8 +16,8 @@
             <th>Expected value</th>
             @if (!readonly) {
               <th>
-                <button nz-button nzType="primary" (click)="addEmptyCondition()">
-                  <i nz-icon nzType="plus" nzTheme="outline"></i>
+                <button nz-button nzType="primary" (click)="addEmptyCondition()" aria-label="Add condition">
+                  <i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i>
                 </button>
               </th>
             }
@@ -57,7 +57,7 @@
                     <label name="value" nz-checkbox [(ngModel)]="c.value"></label>
                   }
                   @if (c.variable !== 'cds.status' && c.variable !== 'cds.manual') {
-                    <input name="value" nz-input [(ngModel)]="c.value" (ngModelChange)="pushChange('all')" />
+                    <input name="value" aria-label="Expected value" nz-input [(ngModel)]="c.value" (ngModelChange)="pushChange('all')" />
                   }
                 } @else {
                   {{c.value}}
@@ -82,7 +82,7 @@ <h4>:</h4>
     </div>
     <nz-row>
       <nz-col [nzSpan]="18">
-        <codemirror [(ngModel)]="conditions.lua_script"
+        <codemirror [(ngModel)]="conditions.lua_script" aria-label="Lua condition script editor"
           (ngModelChange)="pushChange('codemirror', $event)" (change)="changeCodeMirror()"
         [config]="codeMirrorConfig" #textareaCodeMirror></codemirror>
       </nz-col>
diff --git a/ui/src/app/shared/diff/item/diff.item.html b/ui/src/app/shared/diff/item/diff.item.html
index d6f49edc64..7c78038543 100644
--- a/ui/src/app/shared/diff/item/diff.item.html
+++ b/ui/src/app/shared/diff/item/diff.item.html
@@ -4,7 +4,7 @@
       <nz-row>
         <nz-col [nzSpan]="24">
           <codemirror [(ngModel)]="contentLeft" [config]="codeMirrorConfig" (change)="onCodeLeftChange()"
-          #codeLeft></codemirror>
+          aria-label="Diff content" #codeLeft></codemirror>
         </nz-col>
       </nz-row>
     }
@@ -12,11 +12,11 @@
       <nz-row>
         <nz-col [nzSpan]="12">
           <codemirror [(ngModel)]="contentLeft" [config]="codeMirrorConfig" (change)="onCodeLeftChange()"
-          #codeLeft></codemirror>
+          aria-label="Original content" #codeLeft></codemirror>
         </nz-col>
         <nz-col [nzSpan]="12">
           <codemirror [(ngModel)]="contentRight" [config]="codeMirrorConfig" (change)="onCodeRightChange()"
-          #codeRight></codemirror>
+          aria-label="Modified content" #codeRight></codemirror>
         </nz-col>
       </nz-row>
     }
diff --git a/ui/src/app/shared/directives/clickable.directive.ts b/ui/src/app/shared/directives/clickable.directive.ts
new file mode 100644
index 0000000000..b2adc7a828
--- /dev/null
+++ b/ui/src/app/shared/directives/clickable.directive.ts
@@ -0,0 +1,35 @@
+import { Directive, ElementRef, HostListener, OnInit, inject } from '@angular/core';
+
+/**
+ * Retrofits keyboard and screenreader semantics onto a non-interactive element
+ * that carries a (click) handler, without changing its DOM structure or styling:
+ * role="button" (unless a role is already set), tabindex="0" (unless set) and
+ * Enter/Space activation. Prefer a real <button> for new code.
+ */
+@Directive({
+    standalone: false,
+    selector: '[appClickable]'
+})
+export class ClickableDirective implements OnInit {
+    _elementRef = inject(ElementRef);
+
+    ngOnInit(): void {
+        const el = this._elementRef.nativeElement as HTMLElement;
+        if (!el.hasAttribute('role')) {
+            el.setAttribute('role', 'button');
+        }
+        if (!el.hasAttribute('tabindex')) {
+            el.setAttribute('tabindex', '0');
+        }
+    }
+
+    @HostListener('keydown.enter', ['$event'])
+    @HostListener('keydown.space', ['$event'])
+    onKeyActivate(e: Event): void {
+        if (e.target !== this._elementRef.nativeElement) {
+            return;
+        }
+        e.preventDefault();
+        (this._elementRef.nativeElement as HTMLElement).click();
+    }
+}
diff --git a/ui/src/app/shared/favorite-button/favorite-button.component.html b/ui/src/app/shared/favorite-button/favorite-button.component.html
index 344af8dbf0..f799855ea1 100644
--- a/ui/src/app/shared/favorite-button/favorite-button.component.html
+++ b/ui/src/app/shared/favorite-button/favorite-button.component.html
@@ -1,9 +1,10 @@
 <div class="content">
   @if (loading) {
-    <span nz-icon nzType="loading"></span>
+    <span nz-icon nzType="loading" aria-hidden="true"></span>
   }
   @if (!loading) {
-    <span nz-icon nzType="star" nzTheme="fill" [class.active]="!!bookmark" (click)="click()"
-    [title]="(!!bookmark ? 'Remove' : 'Add') + ' ' + type + ' ' + (!!bookmark ? 'from' : 'to') + ' bookmarks'"></span>
+    <span nz-icon nzType="star" nzTheme="fill" [class.active]="!!bookmark" appClickable (click)="click()"
+    [title]="(!!bookmark ? 'Remove' : 'Add') + ' ' + type + ' ' + (!!bookmark ? 'from' : 'to') + ' bookmarks'"
+    [attr.aria-label]="(!!bookmark ? 'Remove' : 'Add') + ' ' + type + ' ' + (!!bookmark ? 'from' : 'to') + ' bookmarks'"></span>
   }
 </div>
\ No newline at end of file
diff --git a/ui/src/app/shared/input/autofocus/autofocus.input.html b/ui/src/app/shared/input/autofocus/autofocus.input.html
index 9e0f28657d..396c33da1b 100644
--- a/ui/src/app/shared/input/autofocus/autofocus.input.html
+++ b/ui/src/app/shared/input/autofocus/autofocus.input.html
@@ -1,6 +1,6 @@
 <nz-input-group [nzSuffix]="suffixIconSearch">
-    <input nz-input type="text" placeholder="{{'navbar_search' | translate}}" [(ngModel)]="model" (ngModelChange)="pushModification()" #searchinput>
+    <input nz-input type="text" placeholder="{{'navbar_search' | translate}}" [attr.aria-label]="'navbar_search' | translate" [(ngModel)]="model" (ngModelChange)="pushModification()" #searchinput>
 </nz-input-group>
 <ng-template #suffixIconSearch>
-    <i nz-icon nzType="search"></i>
+    <i nz-icon nzType="search" aria-hidden="true"></i>
 </ng-template>
diff --git a/ui/src/app/shared/input/editor/editor.input.html b/ui/src/app/shared/input/editor/editor.input.html
index 2e025eba53..1b2d76d98c 100644
--- a/ui/src/app/shared/input/editor/editor.input.html
+++ b/ui/src/app/shared/input/editor/editor.input.html
@@ -1,2 +1,2 @@
-<nz-code-editor #editor [ngModel]="code" (ngModelChange)="changeCode($event)" [nzEditorOption]="_config">
+<nz-code-editor #editor aria-label="Code editor" [ngModel]="code" (ngModelChange)="changeCode($event)" [nzEditorOption]="_config">
 </nz-code-editor>
diff --git a/ui/src/app/shared/input/input-filter.html b/ui/src/app/shared/input/input-filter.html
index fb1e9c5bcc..2a0f4e96e3 100644
--- a/ui/src/app/shared/input/input-filter.html
+++ b/ui/src/app/shared/input/input-filter.html
@@ -1,4 +1,4 @@
-<input [placeholder]="placeholder" nz-input [nzAutocomplete]="filterAutoComplete" [ngModel]="filterText"
+<input [placeholder]="placeholder" [attr.aria-label]="placeholder" nz-input [nzAutocomplete]="filterAutoComplete" [ngModel]="filterText"
   [title]="filterText ? 'Search for ' + filterText : placeholder" (ngModelChange)="onFilterTextChange($event)"
   #filterInput #filterInputDirective=nzAutocompleteTrigger (click)="onClickInput()" ngDefaultControl
   [ngModelOptions]="{standalone: true}" />
diff --git a/ui/src/app/shared/keys/form/keys.form.html b/ui/src/app/shared/keys/form/keys.form.html
index 27469349d3..1054a24f43 100644
--- a/ui/src/app/shared/keys/form/keys.form.html
+++ b/ui/src/app/shared/keys/form/keys.form.html
@@ -18,10 +18,10 @@
 <nz-row>
   <nz-col [nzSpan]="8">
     <nz-form-item>
-      <nz-form-label>Key name</nz-form-label>
+      <nz-form-label nzFor="cds-field-key-name">Key name</nz-form-label>
       <nz-form-control>
         <nz-input-group nzAddOnBefore="{{prefix}}">
-          <input type="text" nz-input [(ngModel)]="newKey.name" name="keyname"/>
+          <input type="text" nz-input id="cds-field-key-name" [(ngModel)]="newKey.name" name="keyname"/>
         </nz-input-group>
       </nz-form-control>
     </nz-form-item>
diff --git a/ui/src/app/shared/keys/list/keys.list.html b/ui/src/app/shared/keys/list/keys.list.html
index 72f12643c6..e597d738d7 100644
--- a/ui/src/app/shared/keys/list/keys.list.html
+++ b/ui/src/app/shared/keys/list/keys.list.html
@@ -22,10 +22,10 @@
       </td>
       <td nzBreakWord>
         @if (k.type === 'ssh') {
-          <input nz-input readonly [ngModel]="k.public">
+          <input nz-input readonly aria-label="Public key" [ngModel]="k.public">
         }
         @if (k.type === 'pgp') {
-          <textarea nz-input [ngModel]="k.public" readonly rows="29"></textarea>
+          <textarea nz-input aria-label="Public key" [ngModel]="k.public" readonly rows="29"></textarea>
         }
       </td>
       @if (edit) {
diff --git a/ui/src/app/shared/labels/edit/labels.edit.component.html b/ui/src/app/shared/labels/edit/labels.edit.component.html
index 46aafc5ce4..7f5632041a 100644
--- a/ui/src/app/shared/labels/edit/labels.edit.component.html
+++ b/ui/src/app/shared/labels/edit/labels.edit.component.html
@@ -9,7 +9,7 @@
           <nz-form-item>
             <nz-form-label>Name</nz-form-label>
             <nz-form-control>
-              <input nz-input type="text" name="{{label.name}}" placeholder="name" [(ngModel)]="label.name">
+              <input nz-input type="text" name="{{label.name}}" placeholder="name" aria-label="Name" [(ngModel)]="label.name">
             </nz-form-control>
           </nz-form-item>
         </nz-col>
@@ -17,7 +17,7 @@
           <nz-form-item>
             <nz-form-label>Color</nz-form-label>
             <nz-form-control>
-              <input nz-input type="text" name="color-{{label.name}}" placeholder="color" [(ngModel)]="label.color">
+              <input nz-input type="text" name="color-{{label.name}}" placeholder="color" aria-label="Color" [(ngModel)]="label.color">
             </nz-form-control>
           </nz-form-item>
         </nz-col>
@@ -38,17 +38,17 @@
     <nz-row>
       <nz-col [nzSpan]="8">
         <nz-form-item>
-          <nz-form-label>Name</nz-form-label>
+          <nz-form-label nzFor="cds-field-label-new-name">Name</nz-form-label>
           <nz-form-control>
-            <input nz-input type="text" name="newName" placeholder="Name" [(ngModel)]="newLabel.name">
+            <input nz-input type="text" id="cds-field-label-new-name" name="newName" placeholder="Name" [(ngModel)]="newLabel.name">
           </nz-form-control>
         </nz-form-item>
       </nz-col>
       <nz-col [nzSpan]="8">
         <nz-form-item>
-          <nz-form-label>Color</nz-form-label>
+          <nz-form-label nzFor="cds-field-label-new-color">Color</nz-form-label>
           <nz-form-control>
-            <input nz-input type="text" name="newColor" placeholder="#FF0000" [(ngModel)]="newLabel.color">
+            <input nz-input type="text" id="cds-field-label-new-color" name="newColor" placeholder="#FF0000" [(ngModel)]="newLabel.color">
           </nz-form-control>
         </nz-form-item>
       </nz-col>
@@ -63,7 +63,7 @@
         <nz-form-item>
           <nz-form-control>
             <button nz-button nzType="primary" [disabled]="loading" [nzLoading]="loading"
-              (click)="createLabel()"><i nz-icon nzType="plus" nzTheme="outline"></i>Add</button>
+              (click)="createLabel()"><i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i>Add</button>
             </nz-form-control>
           </nz-form-item>
         </nz-col>
diff --git a/ui/src/app/shared/parameter/form/parameter.form.html b/ui/src/app/shared/parameter/form/parameter.form.html
index 05b311ddd0..66a3fef9db 100644
--- a/ui/src/app/shared/parameter/form/parameter.form.html
+++ b/ui/src/app/shared/parameter/form/parameter.form.html
@@ -2,9 +2,9 @@
   <nz-row>
     <nz-col [nzSpan]="4">
       <nz-form-item>
-        <nz-form-label>Name</nz-form-label>
+        <nz-form-label nzFor="cds-field-parameter-name">Name</nz-form-label>
         <nz-form-control>
-          <input nz-input type="text" name="name" [(ngModel)]="newParameter.name">
+          <input nz-input type="text" id="cds-field-parameter-name" name="name" [(ngModel)]="newParameter.name">
         </nz-form-control>
       </nz-form-item>
     </nz-col>
@@ -30,9 +30,9 @@
     </nz-col>
     <nz-col [nzSpan]="6">
       <nz-form-item>
-        <nz-form-label>Description</nz-form-label>
+        <nz-form-label nzFor="cds-field-parameter-description">Description</nz-form-label>
         <nz-form-control>
-          <textarea nz-input [(ngModel)]="newParameter.description" name="description" rows="{{ _sharedService.getTextAreaheight(newParameter.description)}}"></textarea>
+          <textarea nz-input id="cds-field-parameter-description" [(ngModel)]="newParameter.description" name="description" rows="{{ _sharedService.getTextAreaheight(newParameter.description)}}"></textarea>
         </nz-form-control>
       </nz-form-item>
     </nz-col>
@@ -49,7 +49,7 @@
         <nz-form-label></nz-form-label>
         <nz-form-control>
           <button name="addBtn" nz-button nzType="primary" [disabled]="!newParameter.name">
-            <i nz-icon nzType="plus" nzTheme="outline"></i>Add
+            <i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i>Add
           </button>
         </nz-form-control>
       </nz-form-item>
diff --git a/ui/src/app/shared/parameter/list/parameter.html b/ui/src/app/shared/parameter/list/parameter.html
index 30fe5b281c..93951d981b 100644
--- a/ui/src/app/shared/parameter/list/parameter.html
+++ b/ui/src/app/shared/parameter/list/parameter.html
@@ -25,12 +25,12 @@
         <tr>
           <td>
             @if (mode === 'edit') {
-              <input nz-input [(ngModel)]="p.name" (keydown)="p.hasChanged = true"
+              <input nz-input aria-label="Parameter name" [(ngModel)]="p.name" (keydown)="p.hasChanged = true"
                 [disabled]="p.updating">
             }
             @if (mode === 'launcher') {
-              <span class="help" nz-tooltip [nzTooltipTitle]="p.description || 'No description'" nzTooltipPlacement="left">
-                <i nz-icon nzType="question-circle" nzTheme="outline"></i>
+              <span class="help" nz-tooltip [nzTooltipTitle]="p.description || 'No description'" nzTooltipPlacement="left" role="img" [attr.aria-label]="p.description || 'No description'">
+                <i nz-icon nzType="question-circle" nzTheme="outline" aria-hidden="true"></i>
               </span>
             }
             @if (mode !== 'edit') {
@@ -65,7 +65,7 @@
           @if (mode !== 'launcher' && mode !== 'job') {
             <td>
               @if (mode !== 'launcher') {
-                <textarea nz-input (keydown)="p.hasChanged = true;"
+                <textarea nz-input aria-label="Parameter description" (keydown)="p.hasChanged = true;"
                   [class.lock]="mode !== 'edit'" [(ngModel)]="p.description"
                   rows="{{_sharedService.getTextAreaheight(p.description)}}" [readonly]="mode === 'launcher'">
                 </textarea>
diff --git a/ui/src/app/shared/parameter/value/parameter.value.html b/ui/src/app/shared/parameter/value/parameter.value.html
index ad0fd58fc8..f765595b64 100644
--- a/ui/src/app/shared/parameter/value/parameter.value.html
+++ b/ui/src/app/shared/parameter/value/parameter.value.html
@@ -1,12 +1,12 @@
 @if (edit) {
   @switch (type) {
     @case ('number') {
-      <input nz-input type="number" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()"
+      <input nz-input type="number" aria-label="Parameter value" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()"
         name="value">
     }
     @case ('text') {
       <codemirror [(ngModel)]="editableValue" [config]="codeMirrorConfig" (change)="changeCodeMirror()" #codeMirror
-      (keydown)="sendValueChanged()"></codemirror>
+      (keydown)="sendValueChanged()" aria-label="Parameter value editor"></codemirror>
     }
     @case ('boolean') {
       <label nz-checkbox [(ngModel)]="editableValue" (ngModelChange)="valueChanged();sendValueChanged()" name="value"></label>
@@ -20,7 +20,7 @@
         </nz-select>
       }
       @if (!keys || (editableValue && keys && keys.ssh && !keyExist(editableValue.toString()))) {
-        <input nz-input type="text" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()"
+        <input nz-input type="text" aria-label="Parameter value" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()"
           name="value">
       }
     }
@@ -35,7 +35,7 @@
     }
     @case ('list') {
       @if (editList) {
-        <input nz-input type="text" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()"
+        <input nz-input type="text" aria-label="Parameter value" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()"
           name="value" placeholder="value1;value2;value3">
       }
       @if (!editList && editableValue && list) {
@@ -69,14 +69,14 @@
         </nz-select>
       }
       @if (selectedRepoManager && selectedRepoManager.name === 'Git Url') {
-        <input nz-input type="text"
+        <input nz-input type="text" aria-label="Parameter value"
           [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()" name="value"
           placeholder="{{'parameter_git_url' | translate }}">
       }
     }
     @default {
       <div>
-        <input nz-input [nzAutocomplete]="auto" type="text" [(ngModel)]="editableValue" (change)="valueChanged()"
+        <input nz-input aria-label="Parameter value" [nzAutocomplete]="auto" type="text" [(ngModel)]="editableValue" (change)="valueChanged()"
           (keydown)="sendValueChanged()" name="value" (ngModelChange)="onInput($event)">
         <nz-autocomplete nzBackfill #auto>
           @for (option of suggestFiltered; track option) {
@@ -90,13 +90,13 @@
 @if (!edit) {
   @switch (type) {
     @case ('text') {
-      <textarea nz-input readonly rows="{{_sharedService.getTextAreaheight(editableValue.toString())}}">{{editableValue}}</textarea>
+      <textarea nz-input aria-label="Parameter value" readonly rows="{{_sharedService.getTextAreaheight(editableValue.toString())}}">{{editableValue}}</textarea>
     }
     @case ('boolean') {
       <label nz-checkbox [(ngModel)]="editableValue" name="value" [nzDisabled]="true"></label>
     }
     @default {
-      <input nz-input readonly [ngModel]="editableValue">
+      <input nz-input aria-label="Parameter value" readonly [ngModel]="editableValue">
     }
   }
 }
diff --git a/ui/src/app/shared/permission/form/permission.form.html b/ui/src/app/shared/permission/form/permission.form.html
index 2fc0987c38..ca699fbd49 100644
--- a/ui/src/app/shared/permission/form/permission.form.html
+++ b/ui/src/app/shared/permission/form/permission.form.html
@@ -27,7 +27,7 @@
               </nz-select>
             }
             @if (manual) {
-              <input nz-input name="group-name" [(ngModel)]="newGroupPermission.group.name">
+              <input nz-input name="group-name" aria-label="Group name" [(ngModel)]="newGroupPermission.group.name">
             }
           </nz-form-control>
         </nz-form-item>
@@ -52,13 +52,13 @@
           <nz-form-control>
             @if (buttonType === 'submit') {
               <button name="saveBtn" (click)="create()" nz-button nzType="primary" [nzLoading]="loading" [disabled]="loading || !newGroupPermission.group.name || newGroupPermission.group.name === ''">
-                <i nz-icon nzType="save" nzTheme="outline"></i>Save
+                <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>Save
               </button>
             }
             @if (buttonType === 'button') {
               <button nz-button nzType="primary" [nzLoading]="loading"
-                [disabled]="loading || !newGroupPermission.group.name || newGroupPermission.group.name === ''">
-                <i nz-icon nzType="plus" nzTheme="outline"></i></button>
+                [disabled]="loading || !newGroupPermission.group.name || newGroupPermission.group.name === ''" aria-label="Add permission">
+                <i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i></button>
               }
             </nz-form-control>
           </nz-form-item>
diff --git a/ui/src/app/shared/permission/form/workflow-permission.form.html b/ui/src/app/shared/permission/form/workflow-permission.form.html
index 9f270e9117..850d7797fb 100644
--- a/ui/src/app/shared/permission/form/workflow-permission.form.html
+++ b/ui/src/app/shared/permission/form/workflow-permission.form.html
@@ -32,11 +32,11 @@
         <nz-form-control>
           @if (buttonType === 'submit') {
             <button nz-button type="submit" nzType="primary"  [nzLoading]="loading" [disabled]="loading || !newGroupPermission.group.name || newGroupPermission.group.name === ''">
-              <i nz-icon nzType="save" nzTheme="outline"></i>Save</button>
+              <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>Save</button>
             }
             @if (buttonType === 'button') {
-              <button nz-button type="submit" nzType="default" [nzLoading]="loading" [disabled]="loading || !newGroupPermission.group.name || newGroupPermission.group.name === ''">
-                <i nz-icon nzType="plus" nzTheme="outline"></i></button>
+              <button nz-button type="submit" nzType="default" [nzLoading]="loading" [disabled]="loading || !newGroupPermission.group.name || newGroupPermission.group.name === ''" aria-label="Add permission">
+                <i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i></button>
               }
             </nz-form-control>
           </nz-col>
diff --git a/ui/src/app/shared/permission/list/permission.list.html b/ui/src/app/shared/permission/list/permission.list.html
index 9ee1240549..6eaaf508d0 100644
--- a/ui/src/app/shared/permission/list/permission.list.html
+++ b/ui/src/app/shared/permission/list/permission.list.html
@@ -30,20 +30,20 @@
                 <button nz-button nzType="primary" [nzLoading]="gp.updating"
                   [disabled]="gp.updating" name="btnupdateperm"
                   (click)="sendEvent('update', gp)">
-                  <i nz-icon nzType="save" nzTheme="outline"></i>
+                  <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>
                   {{ 'btn_save' | translate}}
                 </button>
               }
               @if (mode === 'form') {
                 <button nz-button  nzType="primary" nzDanger [nzLoading]="gp.updating" (click)="sendEvent('delete', gp)">
-                  <i nz-icon nzType="delete" nzTheme="outline"></i>Delete
+                  <i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>Delete
                 </button>
               }
               @if (mode === 'submit' && !gp.hasChanged) {
                 <button nz-button nzType="primary" nzDanger [nzLoading]="gp.updating" name="deleteButton"
                   nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this permission ?"
                   (nzOnConfirm)="sendEvent('delete', gp)" nzPopconfirmPlacement="topLeft">
-                  <i nz-icon nzType="delete" nzTheme="outline"></i>Delete
+                  <i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>Delete
                 </button>
               }
             }
diff --git a/ui/src/app/shared/repository-ref-selector/repository-ref-select.html b/ui/src/app/shared/repository-ref-selector/repository-ref-select.html
index 7beecf151d..730d81f870 100644
--- a/ui/src/app/shared/repository-ref-selector/repository-ref-select.html
+++ b/ui/src/app/shared/repository-ref-selector/repository-ref-select.html
@@ -14,7 +14,7 @@
     @if (branches?.length > 0 || tags?.length > 0) {
       <div class="container" [class.night]="darkActive">
         <nz-input-group [nzSuffix]="suffixIconSearch">
-          <input type="text" nz-input placeholder="Search for ref" (input)="onFilterRefChange($event)" />
+          <input type="text" nz-input placeholder="Search for ref" aria-label="Search for ref" (input)="onFilterRefChange($event)" />
         </nz-input-group>
         <ng-template #suffixIconSearch>
           <span nz-icon nzType="search"></span>
@@ -29,7 +29,7 @@
               </ng-template>
               <div class="options">
                 @for (opt of filteredBranches; track opt) {
-                  <div class="option" [title]="opt.display_id"
+                  <div class="option" [title]="opt.display_id" appClickable
                     [class.active]="selectedRef === 'refs/heads/' + opt.display_id"
                   (click)="clickOption('refs/heads/' + opt.display_id)">{{opt.display_id}}</div>
                 }
@@ -45,7 +45,7 @@
               </ng-template>
               <div class="options">
                 @for (opt of filteredTags; track opt) {
-                  <div class="option" [title]="opt.tag"
+                  <div class="option" [title]="opt.tag" appClickable
                     [class.active]="selectedRef === 'refs/tags/' + opt.tag" (click)="clickOption('refs/tags/' + opt.tag)">
                   {{opt.tag}}</div>
                 }
diff --git a/ui/src/app/shared/requirements/form/requirements.form.html b/ui/src/app/shared/requirements/form/requirements.form.html
index b8a137167d..74dfc9fe88 100644
--- a/ui/src/app/shared/requirements/form/requirements.form.html
+++ b/ui/src/app/shared/requirements/form/requirements.form.html
@@ -26,13 +26,13 @@
         @if (workerModelLinked) {
           <nz-form-item>
             @if (workerModelLinked.is_official) {
-              <span nz-tooltip nzTooltipTitle="{{'worker_model_official_tooltip' | translate}}" nzTooltipPlacement="top"><i nz-icon nzType="check-circle" nzTheme="outline" class="green"></i></span>
+              <span nz-tooltip nzTooltipTitle="{{'worker_model_official_tooltip' | translate}}" nzTooltipPlacement="top" role="img" [attr.aria-label]="'worker_model_official_tooltip' | translate"><i nz-icon nzType="check-circle" nzTheme="outline" class="green" aria-hidden="true"></i></span>
             }
             @if (!workerModelLinked.is_official) {
-              <span nz-tooltip nzTooltipTitle="{{'worker_model_unofficial' | translate}}" nzTooltipPlacement="top"><i nz-icon nzType="close-circle" nzTheme="outline" class="red"></i></span>
+              <span nz-tooltip nzTooltipTitle="{{'worker_model_unofficial' | translate}}" nzTooltipPlacement="top" role="img" [attr.aria-label]="'worker_model_unofficial' | translate"><i nz-icon nzType="close-circle" nzTheme="outline" class="red" aria-hidden="true"></i></span>
             }
             @if (workerModelLinked.is_deprecated) {
-              <span nz-tooltip nzTooltipTitle="{{'worker_model_deprecated_tooltip' | translate}}" nzTooltipPlacement="top"><i nz-icon nzType="warning" nzTheme="outline" class="orange"></i></span>
+              <span nz-tooltip nzTooltipTitle="{{'worker_model_deprecated_tooltip' | translate}}" nzTooltipPlacement="top" role="img" [attr.aria-label]="'worker_model_deprecated_tooltip' | translate"><i nz-icon nzType="warning" nzTheme="outline" class="orange" aria-hidden="true"></i></span>
             }
           </nz-form-item>
         }
@@ -44,16 +44,16 @@
               nzTooltipPlacement="top"
               >
               <button nz-button nzType="primary" name="addBtn"
-                (click)="onSubmitAddRequirement()">
-                <i nz-icon nzType="plus" nzTheme="outline"></i>
+                (click)="onSubmitAddRequirement()" aria-label="Add requirement">
+                <i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i>
               </button>
             </div>
           }
           @if ((newRequirement.type !== 'model' || !config.disableModel) && (newRequirement.type !== 'hostname' || !config.disableHostname) && (newRequirement.type !== 'region' || !config.disableRegion)) {
             <div>
               <button nz-button nzType="primary" name="addBtn"
-                (click)="onSubmitAddRequirement()">
-                <i nz-icon nzType="plus" nzTheme="outline"></i>
+                (click)="onSubmitAddRequirement()" aria-label="Add requirement">
+                <i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i>
               </button>
             </div>
           }
diff --git a/ui/src/app/shared/requirements/value/requirements.value.html b/ui/src/app/shared/requirements/value/requirements.value.html
index b3966e5e37..040ebc6ef5 100644
--- a/ui/src/app/shared/requirements/value/requirements.value.html
+++ b/ui/src/app/shared/requirements/value/requirements.value.html
@@ -1,7 +1,7 @@
 @if (requirement.type === 'service') {
   @if (edit) {
     Hostname:
-    <input nz-input [nzAutocomplete]="autoSuggestService" [(ngModel)]="requirement.name" (input)="change(requirement)">
+    <input nz-input aria-label="Requirement name" [nzAutocomplete]="autoSuggestService" [(ngModel)]="requirement.name" (input)="change(requirement)">
     <nz-autocomplete [nzDataSource]="filteredSuggest" nzBackfill #autoSuggestService></nz-autocomplete>
   } @else {
     <span>{{requirement.name}}</span>
@@ -12,33 +12,33 @@
     @if (requirement.type === 'service') {
       Docker Image:
     }
-    <input nz-input [nzAutocomplete]="autoSuggestImage" [(ngModel)]="requirement.value" (input)="change(requirement)">
+    <input nz-input aria-label="Requirement value" [nzAutocomplete]="autoSuggestImage" [(ngModel)]="requirement.value" (input)="change(requirement)">
     <nz-autocomplete [nzDataSource]="filteredSuggest" nzBackfill #autoSuggestImage ></nz-autocomplete>
   }
   @if (requirement.type === 'os-architecture') {
-    <input nz-input [nzAutocomplete]="autoOsArch" name="value-os-architecture" [(ngModel)]="requirement.value" (input)="change(requirement)">
+    <input nz-input aria-label="Requirement value" [nzAutocomplete]="autoOsArch" name="value-os-architecture" [(ngModel)]="requirement.value" (input)="change(requirement)">
     <nz-autocomplete [nzDataSource]="filteredSuggest" nzBackfill #autoOsArch></nz-autocomplete>
   }
   @if (requirement.type === 'model' && workerModels) {
     <nz-row>
       <nz-col [nzSpan]="20">
-        <input nz-input name="value-workermodel" [nzAutocomplete]="autoWorkerModel" [(ngModel)]="requirement.value" (input)="change(requirement)">
+        <input nz-input name="value-workermodel" aria-label="Requirement value" [nzAutocomplete]="autoWorkerModel" [(ngModel)]="requirement.value" (input)="change(requirement)">
         <nz-autocomplete [nzDataSource]="filteredSuggest" nzBackfill #autoWorkerModel></nz-autocomplete>
       </nz-col>
       <nz-col [nzSpan]="3" [nzOffset]="1">
         @if (workerModels.get(requirement.value)?.nb_spawn_err > 0) {
-          <span nz-tooltip nzTooltipTitle="Model in error" nzTooltipPlacement="top">
-            <span class="icon status red" nz-icon nzType="warning" nzTheme="outline"></span>
+          <span nz-tooltip nzTooltipTitle="Model in error" nzTooltipPlacement="top" role="img" aria-label="Model in error">
+            <span class="icon status red" nz-icon nzType="warning" nzTheme="outline" aria-hidden="true"></span>
           </span>
         }
         @if (workerModels.get(requirement.value)?.is_official) {
-          <span nz-tooltip nzTooltipTitle="Official worker model maintained by CDS Administrators" nzTooltipPlacement="top">
-            <span class="icon status green" nz-icon nzType="check-circle" nzTheme="outline"></span>
+          <span nz-tooltip nzTooltipTitle="Official worker model maintained by CDS Administrators" nzTooltipPlacement="top" role="img" aria-label="Official worker model maintained by CDS Administrators">
+            <span class="icon status green" nz-icon nzType="check-circle" nzTheme="outline" aria-hidden="true"></span>
           </span>
         }
         @if (workerModels.get(requirement.value)?.is_deprecated) {
-          <span nz-tooltip nzTooltipTitle="This worker model is deprecated" nzTooltipPlacement="top">
-            <span class="icon status orange" nz-icon nzType="warning" nzTheme="outline"></span>
+          <span nz-tooltip nzTooltipTitle="This worker model is deprecated" nzTooltipPlacement="top" role="img" aria-label="This worker model is deprecated">
+            <span class="icon status orange" nz-icon nzType="warning" nzTheme="outline" aria-hidden="true"></span>
           </span>
         }
       </nz-col>
@@ -46,7 +46,7 @@
   }
   @if (requirement.type === 'model' || requirement.type === 'service') {
     {{ 'requirement_options' | translate }}
-    <textarea nz-input [(ngModel)]="requirement.opts" (ngModelChange)="change(requirement)" rows="3" placeholder="{{'requirement_placeholder_opts_' + requirement.type | translate}}"></textarea>
+    <textarea nz-input aria-label="Requirement options" [(ngModel)]="requirement.opts" (ngModelChange)="change(requirement)" rows="3" placeholder="{{'requirement_placeholder_opts_' + requirement.type | translate}}"></textarea>
   }
 } @else {
   <span>{{requirement.value}}</span>
diff --git a/ui/src/app/shared/resizable-panel/resizable-panel.html b/ui/src/app/shared/resizable-panel/resizable-panel.html
index c1e967710a..1c0143c563 100644
--- a/ui/src/app/shared/resizable-panel/resizable-panel.html
+++ b/ui/src/app/shared/resizable-panel/resizable-panel.html
@@ -1,7 +1,7 @@
 <div class="panel" [class.horizontal]="this.direction === 'horizontal'"
   [class.vertical]="this.direction === 'vertical'">
   @if (this.growDirection === 'before') {
-    <div class="grabber" (mousedown)="onMouseDownGrabber()" #grabber>
+    <div class="grabber" role="separator" aria-label="Resize panel" (mousedown)="onMouseDownGrabber()" #grabber>
       @if (this.direction === 'horizontal') {
         <i nz-icon nzType="more" nzTheme="outline"></i>
       }
@@ -14,7 +14,7 @@
     <ng-content></ng-content>
   </div>
   @if (this.growDirection === 'after') {
-    <div class="grabber" (mousedown)="onMouseDownGrabber()" #grabber>
+    <div class="grabber" role="separator" aria-label="Resize panel" (mousedown)="onMouseDownGrabber()" #grabber>
       @if (this.direction === 'horizontal') {
         <i nz-icon nzType="more" nzTheme="outline"></i>
       }
diff --git a/ui/src/app/shared/scrollview/scrollview.html b/ui/src/app/shared/scrollview/scrollview.html
index 39033983ce..df1642b4c6 100644
--- a/ui/src/app/shared/scrollview/scrollview.html
+++ b/ui/src/app/shared/scrollview/scrollview.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <div class="content">
+  <div class="content" tabindex="0" role="region" aria-label="Scrollable content">
     <div class="padding">
       <ng-content></ng-content>
     </div>
diff --git a/ui/src/app/shared/searchable/searchable.html b/ui/src/app/shared/searchable/searchable.html
index 4f07402449..e1a23d0427 100644
--- a/ui/src/app/shared/searchable/searchable.html
+++ b/ui/src/app/shared/searchable/searchable.html
@@ -1,5 +1,5 @@
 <ng-content></ng-content>
 <a class="search" [class.fixed]="fixed" [routerLink]="link" [queryParams]="params"
-	[queryParamsHandling]="paramsHandling" [title]="title ?? ''">
-	<span nz-icon nzType="search"></span>
+	[queryParamsHandling]="paramsHandling" [title]="title ?? ''" [attr.aria-label]="title ?? 'Search'">
+	<span nz-icon nzType="search" aria-hidden="true"></span>
 </a>
\ No newline at end of file
diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts
index bbe64be08b..230b6fb79d 100644
--- a/ui/src/app/shared/shared.module.ts
+++ b/ui/src/app/shared/shared.module.ts
@@ -101,6 +101,7 @@ import { WorkflowWNodeOutGoingHookComponent } from './workflow/wnode/outgoinghoo
 import { WorkflowWNodePipelineComponent } from './workflow/wnode/pipeline/wnode.pipeline.component';
 import { WorkflowWNodeComponent } from './workflow/wnode/wnode.component';
 import { NgxAutoScrollDirective } from 'app/shared/directives/auto-scroll.directive';
+import { ClickableDirective } from 'app/shared/directives/clickable.directive';
 import {
     NZ_CONFIG,
     NzConfig
@@ -461,6 +462,7 @@ const icons: IconDefinition[] = [
         NgForNumber,
         NgxAutoScrollDirective,
         NsAutoHeightTableDirective,
+        ClickableDirective,
         ParameterFormComponent,
         ParameterListComponent,
         ParameterValueComponent,
@@ -580,6 +582,7 @@ const icons: IconDefinition[] = [
         NgForNumber,
         NgxAutoScrollDirective,
         NsAutoHeightTableDirective,
+        ClickableDirective,
         NzAlertModule,
         NzAutocompleteModule,
         NzAvatarModule,
diff --git a/ui/src/app/shared/status/status.icon.html b/ui/src/app/shared/status/status.icon.html
index cdd23f2d64..50c83e2391 100644
--- a/ui/src/app/shared/status/status.icon.html
+++ b/ui/src/app/shared/status/status.icon.html
@@ -1,7 +1,7 @@
-<div class="status-icon" [ngSwitch]="status">
+<div class="status-icon" [ngSwitch]="status" role="img" [attr.aria-label]="'Status: ' + status">
     <div class="wrapper">
         <ng-container *ngSwitchCase="pipelineStatusEnum.BUILDING">
-            <img id="gifloader" height="24" width="24" src="./assets/images/loader.gif">
+            <img id="gifloader" height="24" width="24" src="./assets/images/loader.gif" alt="">
         </ng-container>
         <i *ngSwitchCase="pipelineStatusEnum.SUCCESS" nz-icon nzType="check" nzTheme="outline" class="green"></i>
         <i *ngSwitchCase="'Done'" nz-icon nzType="check" nzTheme="outline" class="green"></i>
diff --git a/ui/src/app/shared/table/data-table.component.ts b/ui/src/app/shared/table/data-table.component.ts
index fe4bc107c2..4289da78c5 100644
--- a/ui/src/app/shared/table/data-table.component.ts
+++ b/ui/src/app/shared/table/data-table.component.ts
@@ -247,6 +247,14 @@ export class DataTableComponent<T> extends Table<T> implements OnChanges {
         }
     }
 
+    lineKeyActivate(event: Event, i: number, d: T) {
+        if (!this.withLineClick || event.target !== event.currentTarget) {
+            return;
+        }
+        event.preventDefault();
+        this.lineClick(i, d);
+    }
+
     onSelectAllChange(e: any) {
         this.selectedAll = !this.selectedAll;
         this.allData.forEach(d => this.selected[(d as any).key()] = this.selectedAll);
diff --git a/ui/src/app/shared/table/data-table.html b/ui/src/app/shared/table/data-table.html
index 3c9e46e753..9dbe4171bb 100644
--- a/ui/src/app/shared/table/data-table.html
+++ b/ui/src/app/shared/table/data-table.html
@@ -1,7 +1,7 @@
 @if (filterFunc && allData && allData.length > 1) {
   <nz-row>
     <nz-col [nzSpan]="24">
-      <input nz-input type="text" placeholder="Filter" [(ngModel)]="filter"
+      <input nz-input type="text" placeholder="Filter" aria-label="Filter" [(ngModel)]="filter"
         (keyup)="filterKeyUp()">
     </nz-col>
   </nz-row>
@@ -19,6 +19,10 @@
           <th class="wide {{c.class}}" [class.sortable]="c.sortable && c !== sortedColumn"
             [class.ascending]="c === sortedColumn && sortedColumnDirection === 'asc'"
             [class.descending]="c === sortedColumn && sortedColumnDirection === 'desc'"
+            [attr.aria-sort]="c.sortable ? (c === sortedColumn ? (sortedColumnDirection === 'desc' ? 'descending' : 'ascending') : 'none') : null"
+            [attr.tabindex]="c.sortable ? 0 : null"
+            (keydown.enter)="columnClick($event, c)"
+            (keydown.space)="$event.preventDefault(); columnClick($event, c)"
             (click)="columnClick($event, c)">
             {{ c.name | translate }}
           </th>
@@ -30,6 +34,9 @@
     <tbody>
       @for (d of table.data; track d; let i = $index) {
         <tr (click)="lineClick(i, d)"
+          [attr.tabindex]="withLineClick ? 0 : null"
+          (keydown.enter)="lineKeyActivate($event, i, d)"
+          (keydown.space)="lineKeyActivate($event, i, d)"
           [class.pointing]="withLineClick" [class.active]="withLineClick && indexSelected === i">
           @if (withSelect) {
             <td class="wide">
@@ -52,7 +59,7 @@
                   @case ('img-text') {
                     <div class="vcenter">
                       @if (c.selector.img) {
-                        <img [src]="c.selector.img">
+                        <img [src]="c.selector.img" alt="">
                       }
                       <div class="{{c.selector.valueclass}}">
                         {{ c.selector.value }}
@@ -60,7 +67,7 @@
                     </div>
                   }
                   @case ('link-click') {
-                    <a (click)="c.selector.callback()">
+                    <a appClickable (click)="c.selector.callback()">
                       {{c.selector.value}}
                     </a>
                   }
@@ -77,8 +84,8 @@
                   @case ('router-link-with-icons') {
                     <a [routerLink]="c.selector.link">{{c.selector.value}}</a>
                     @for (i of c.selector.icons; track i) {
-                      <span nz-tooltip [nzTooltipTitle]="i.label | translate">
-                        {{' '}}<i nz-icon [nzType]="i.iconType" [nzTheme]="i.iconTheme" [class]="i.iconColor"></i>
+                      <span nz-tooltip [nzTooltipTitle]="i.label | translate" [attr.aria-label]="i.label | translate" role="img">
+                        {{' '}}<i nz-icon [nzType]="i.iconType" [nzTheme]="i.iconTheme" [class]="i.iconColor" aria-hidden="true"></i>
                       </span>
                     }
                   }
@@ -94,7 +101,7 @@
                 @case ('button') {
                   <button nz-button [nzType]="c.selector.buttonType" [nzDanger]="c.selector.buttonDanger" [class]="c.class"
                     (click)="c.selector.click()">
-                    <i nz-icon [nzType]="c.selector.iconType" [nzTheme]="c.selector.iconTheme" [class]="c.selector.iconColor"></i>
+                    <i nz-icon [nzType]="c.selector.iconType" [nzTheme]="c.selector.iconTheme" [class]="c.selector.iconColor" aria-hidden="true"></i>
                     {{c.selector.title | translate}}
                   </button>
                 }
@@ -110,10 +117,10 @@
                   <div>
                     @if (c.selector) {
                       <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
-                        <input nz-input type="text" value="{{c.selector}}"  />
+                        <input nz-input type="text" value="{{c.selector}}" aria-label="Value to copy"  />
                       </nz-input-group>
                       <ng-template #suffixIconButton>
-                        <button nzSearch nz-button nzType="primary" ngxClipboard [cbContent]="c.selector"><i nz-icon nzType="copy"></i></button>
+                        <button nzSearch nz-button nzType="primary" ngxClipboard [cbContent]="c.selector" aria-label="Copy to clipboard"><i nz-icon nzType="copy" aria-hidden="true"></i></button>
                       </ng-template>
                     }
                   </div>
@@ -131,9 +138,9 @@
                   <span>
                     {{c.selector.value | translate}}
                     @for (i of c.selector.icons; track i) {
-                      <span nz-tooltip [nzTooltipTitle]="i.label | translate" [nzTooltipTrigger]="i.trigger ? i.trigger : 'hover'">
+                      <span nz-tooltip [nzTooltipTitle]="i.label | translate" [nzTooltipTrigger]="i.trigger ? i.trigger : 'hover'" [attr.aria-label]="i.label | translate" role="img">
                         {{' '}}@if (i.type) {
-                        <i nz-icon [nzType]="i.type" [nzTheme]="i.theme" [class]="i.class"></i>
+                        <i nz-icon [nzType]="i.type" [nzTheme]="i.theme" [class]="i.class" aria-hidden="true"></i>
                       }
                     </span>
                   }
diff --git a/ui/src/app/shared/tabs/tab.html b/ui/src/app/shared/tabs/tab.html
index 74bb2bb2c9..45fd63b3fc 100644
--- a/ui/src/app/shared/tabs/tab.html
+++ b/ui/src/app/shared/tabs/tab.html
@@ -1,6 +1,6 @@
 @if (!tab.template) {
   @if (tab.icon) {
-    <span nz-icon [nzType]="tab.icon" [nzTheme]="tab.iconTheme" [class]="tab.iconClassColor"></span>
+    <span nz-icon [nzType]="tab.icon" [nzTheme]="tab.iconTheme" [class]="tab.iconClassColor" aria-hidden="true"></span>
   }
   {{tab.title}}
 }
diff --git a/ui/src/app/shared/tabs/tabs.component.ts b/ui/src/app/shared/tabs/tabs.component.ts
index 41b99234c8..1447c9f91d 100644
--- a/ui/src/app/shared/tabs/tabs.component.ts
+++ b/ui/src/app/shared/tabs/tabs.component.ts
@@ -92,6 +92,37 @@ export class TabsComponent implements OnInit, OnChanges, OnDestroy {
         return this.tabs[0];
     }
 
+    keyActivate(event: Event, tab: Tab) {
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+        event.preventDefault();
+        this.clickSelect(tab);
+    }
+
+    keyNavigate(event: Event, direction: number) {
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+        event.preventDefault();
+        const enabledTabs = this.tabs.filter(t => !t.disabled);
+        if (enabledTabs.length === 0) {
+            return;
+        }
+        const current = this.selected ?? this.getDefaultTab();
+        let idx = enabledTabs.findIndex(t => current && t.key === current.key);
+        if (idx === -1) {
+            idx = 0;
+        }
+        const next = enabledTabs[(idx + direction + enabledTabs.length) % enabledTabs.length];
+        this.clickSelect(next);
+        const items = (event.currentTarget as HTMLElement).parentElement?.querySelectorAll('li[role="tab"]');
+        const nextIndex = this.tabs.indexOf(next);
+        if (items && items[nextIndex]) {
+            (items[nextIndex] as HTMLElement).focus();
+        }
+    }
+
     clickSelect(tab: Tab) {
         if (this.selected && this.selected.key === tab.key) {
             return;
diff --git a/ui/src/app/shared/tabs/tabs.html b/ui/src/app/shared/tabs/tabs.html
index eeef75dafd..b9ed9c8d6c 100644
--- a/ui/src/app/shared/tabs/tabs.html
+++ b/ui/src/app/shared/tabs/tabs.html
@@ -1,6 +1,14 @@
-<ul nz-menu nzMode="horizontal">
+<ul nz-menu nzMode="horizontal" role="tablist">
   @for (t of tabs; track t) {
-    <li nz-menu-item [nzSelected]="selected && selected.key === t.key" (click)="clickSelect(t)" [nzDisabled]="t.disabled">
+    <li nz-menu-item role="tab"
+      [attr.aria-selected]="!!(selected && selected.key === t.key)"
+      [attr.aria-disabled]="t.disabled ? true : null"
+      [attr.tabindex]="selected && selected.key === t.key ? 0 : -1"
+      (keydown.arrowright)="keyNavigate($event, 1)"
+      (keydown.arrowleft)="keyNavigate($event, -1)"
+      (keydown.enter)="keyActivate($event, t)"
+      (keydown.space)="keyActivate($event, t)"
+      [nzSelected]="selected && selected.key === t.key" (click)="clickSelect(t)" [nzDisabled]="t.disabled">
       <app-tab [tab]="t"></app-tab>
     </li>
   }
diff --git a/ui/src/app/shared/toast/ToastService.ts b/ui/src/app/shared/toast/ToastService.ts
index 61de990f7b..b9c2b9c58c 100644
--- a/ui/src/app/shared/toast/ToastService.ts
+++ b/ui/src/app/shared/toast/ToastService.ts
@@ -1,3 +1,4 @@
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { Injectable, inject } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { HelpState } from 'app/store/help.state';
@@ -21,6 +22,7 @@ export class ToastService {
 
     _nzNotificationService = inject(NzNotificationService);
     _store = inject(Store)
+    _liveAnnouncer = inject(LiveAnnouncer);
 
     constructor() { }
 
@@ -30,17 +32,21 @@ export class ToastService {
 
     success(title: string, msg: string) {
         this._nzNotificationService.success(title, msg);
+        this._liveAnnouncer.announce(msg ? `${title}. ${msg}` : title, 'polite');
     }
 
     info(title: string, msg: string) {
         this._nzNotificationService.info(title, msg);
+        this._liveAnnouncer.announce(msg ? `${title}. ${msg}` : title, 'polite');
     }
 
     error(title: string, msg: string) {
         this._nzNotificationService.error(title, msg);
+        this._liveAnnouncer.announce(msg ? `Error: ${title}. ${msg}` : `Error: ${title}`, 'assertive');
     }
 
     errorHTTP(status: number, message: string, from: string, request_id: string) {
+        this._liveAnnouncer.announce(`Error: ${message}`, 'assertive');
         this._store.select(HelpState.last).pipe(
             filter((help) => help != null),
         ).subscribe(help => {
diff --git a/ui/src/app/shared/variable/form/variable.form.html b/ui/src/app/shared/variable/form/variable.form.html
index 40e4e7c4fc..b5d2673775 100644
--- a/ui/src/app/shared/variable/form/variable.form.html
+++ b/ui/src/app/shared/variable/form/variable.form.html
@@ -2,9 +2,9 @@
   <nz-row>
     <nz-col [nzSpan]="8">
       <nz-form-item>
-        <nz-form-label>Name</nz-form-label>
+        <nz-form-label nzFor="cds-field-variable-name">Name</nz-form-label>
         <nz-form-control>
-          <input nz-input type="text" name="name" [(ngModel)]="newVariable.name" [disabled]="loading">
+          <input nz-input type="text" id="cds-field-variable-name" name="name" [(ngModel)]="newVariable.name" [disabled]="loading">
         </nz-form-control>
       </nz-form-item>
     </nz-col>
@@ -32,7 +32,7 @@
     <nz-col [nzSpan]="4">
             <button nz-button nzType="primary" name="saveBtn" [nzLoading]="loading" [disabled]="loading || !newVariable.name || newVariable.name === '' ||
                 !newVariable.type || newVariable.type === ''">
-        <i nz-icon nzType="save" nzTheme="outline"></i>Save
+        <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>Save
       </button>
     </nz-col>
   </nz-row>
diff --git a/ui/src/app/shared/variable/list/variable.html b/ui/src/app/shared/variable/list/variable.html
index 33baf409a6..c0ceb54003 100644
--- a/ui/src/app/shared/variable/list/variable.html
+++ b/ui/src/app/shared/variable/list/variable.html
@@ -2,7 +2,7 @@
   <div class="variable">
     <nz-row>
       <nz-col [nzOffset]="20" [nzSpan]="4" class="alignRight">
-        <input nz-input type="text" placeholder="Filter" [(ngModel)]="filter" (ngModelChange)="filterVariables()">
+        <input nz-input type="text" placeholder="Filter" aria-label="Filter" [(ngModel)]="filter" (ngModelChange)="filterVariables()">
       </nz-col>
     </nz-row>
     <nz-table  [nzData]="filteredVariables" [nzNoResult]="novars" #varlist>
@@ -24,8 +24,8 @@
           <tr>
             @if (auditContext) {
               <td>
-                <button nz-button (click)="showAudit($event, v)">
-                  <i nz-icon nzType="calendar" nzTheme="outline"></i>
+                <button nz-button (click)="showAudit($event, v)" aria-label="Show audit">
+                  <i nz-icon nzType="calendar" nzTheme="outline" aria-hidden="true"></i>
                 </button>
               </td>
             }
@@ -33,7 +33,7 @@
               <div class="warname">
                 <div class="varname">
                   @if (mode === 'edit') {
-                    <input nz-input [(ngModel)]="v.name" (keydown)="v.hasChanged = true" name="varname" [disabled]="true">
+                    <input nz-input aria-label="Variable name" [(ngModel)]="v.name" (keydown)="v.hasChanged = true" name="varname" [disabled]="true">
                   }
                 </div>
               </div>
@@ -69,7 +69,7 @@
                     [disabled]="v.updating || v.type === 'key'"
                     name="btnupdatevar"
                     (click)="sendEvent('update', v)">
-                    <i nz-icon nzType="save" nzTheme="outline"></i>
+                    <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>
                     Save
                   </button>
                 } @else {
diff --git a/ui/src/app/shared/variable/value/variable.value.html b/ui/src/app/shared/variable/value/variable.value.html
index cdfc92d9d9..e56984198a 100644
--- a/ui/src/app/shared/variable/value/variable.value.html
+++ b/ui/src/app/shared/variable/value/variable.value.html
@@ -3,7 +3,7 @@
   <!-- Number -->
   @case ('number') {
     <div>
-      <input nz-input type="number" [(ngModel)]="value" (change)="valueChanged()" (keydown)="sendValueChanged()" [disabled]="disabled" name="value">
+      <input nz-input type="number" aria-label="Variable value" [(ngModel)]="value" (change)="valueChanged()" (keydown)="sendValueChanged()" [disabled]="disabled" name="value">
     </div>
   }
   <!-- Boolean -->
@@ -13,19 +13,19 @@
   <!-- Password -->
   @case ('password') {
     <div>
-      <input nz-input type="password" [(ngModel)]="value" (change)="valueChanged()" (keydown)="sendValueChanged()" name="value" [disabled]="disabled">
+      <input nz-input type="password" aria-label="Variable value" [(ngModel)]="value" (change)="valueChanged()" (keydown)="sendValueChanged()" name="value" [disabled]="disabled">
     </div>
   }
   <!-- Text -->
   @case ('text') {
     <div>
-      <textarea nz-input [disabled]="disabled" rows="{{_sharedService.getTextAreaheight(value?.toString())}}" [(ngModel)]="value" (change)="valueChanged()" (keydown)="sendValueChanged()" name="value"></textarea>
+      <textarea nz-input aria-label="Variable value" [disabled]="disabled" rows="{{_sharedService.getTextAreaheight(value?.toString())}}" [(ngModel)]="value" (change)="valueChanged()" (keydown)="sendValueChanged()" name="value"></textarea>
     </div>
   }
   <!-- String -->
   @default {
     <div>
-      <input nz-input [disabled]="disabled" type="text" [(ngModel)]="value" (change)="valueChanged()" (keydown)="sendValueChanged()" name="value">
+      <input nz-input aria-label="Variable value" [disabled]="disabled" type="text" [(ngModel)]="value" (change)="valueChanged()" (keydown)="sendValueChanged()" name="value">
     </div>
   }
 }
diff --git a/ui/src/app/shared/vcs/vcs.strategy.html b/ui/src/app/shared/vcs/vcs.strategy.html
index 8c5ba6e2e9..ff93fba9e5 100644
--- a/ui/src/app/shared/vcs/vcs.strategy.html
+++ b/ui/src/app/shared/vcs/vcs.strategy.html
@@ -22,24 +22,24 @@
             </app-parameter-value>
           </nz-form-control>
           @if (selectedPublicKey) {
-            <button nz-button [title]="'key_copy_public' | translate" ngxClipboard
+            <button nz-button [title]="'key_copy_public' | translate" [attr.aria-label]="'key_copy_public' | translate" ngxClipboard
               [cbContent]="selectedPublicKey" (click)="clickCopyKey()">
-              <i nz-icon nzType="copy" nzTheme="outline"></i>
+              <i nz-icon nzType="copy" nzTheme="outline" aria-hidden="true"></i>
             </button>
           }
         </nz-form-item>
       }
       @case (connectionType.HTTPS) {
         <nz-form-item>
-          <nz-form-label [nzSpan]="3">User</nz-form-label>
+          <nz-form-label [nzSpan]="3" nzFor="cds-field-vcs-user">User</nz-form-label>
           <nz-form-control [nzSpan]="7">
-            <input nz-input name="user" type="text" [(ngModel)]="strategy.user">
+            <input nz-input id="cds-field-vcs-user" name="user" type="text" [(ngModel)]="strategy.user">
           </nz-form-control>
         </nz-form-item>
         <nz-form-item>
-          <nz-form-label [nzSpan]="3">Password</nz-form-label>
+          <nz-form-label [nzSpan]="3" nzFor="cds-field-vcs-password">Password</nz-form-label>
           <nz-form-control [nzSpan]="7">
-            <input nz-input name="password" type="password" [(ngModel)]="strategy.password">
+            <input nz-input id="cds-field-vcs-password" name="password" type="password" [(ngModel)]="strategy.password">
           </nz-form-control>
         </nz-form-item>
       }
@@ -87,9 +87,9 @@
           </app-parameter-value>
         </nz-col>
         <nz-col [nzSpan]="1">
-          <button nz-button [title]="'key_copy_public' | translate" ngxClipboard
+          <button nz-button [title]="'key_copy_public' | translate" [attr.aria-label]="'key_copy_public' | translate" ngxClipboard
             [cbContent]="selectedPublicKey" (click)="clickCopyKey()">
-            <i nz-icon nzType="copy" nzTheme="outline"></i>
+            <i nz-icon nzType="copy" nzTheme="outline" aria-hidden="true"></i>
           </button>
         </nz-col>
       </nz-row>
@@ -100,7 +100,7 @@
           User:
         </nz-col>
         <nz-col [nzSpan]="7"  [nzOffset]="1">
-          <input nz-input name="user" type="text" [(ngModel)]="strategy.user">
+          <input nz-input name="user" aria-label="User" type="text" [(ngModel)]="strategy.user">
         </nz-col>
       </nz-row>
     }
@@ -110,7 +110,7 @@
           Password:
         </nz-col>
         <nz-col [nzSpan]="7" [nzOffset]="1">
-          <input nz-input name="password" type="password"[(ngModel)]="strategy.password">
+          <input nz-input name="password" aria-label="Password" type="password"[(ngModel)]="strategy.password">
         </nz-col>
       </nz-row>
     }
diff --git a/ui/src/app/shared/workflow-template/apply-form/workflow-template.apply-form.html b/ui/src/app/shared/workflow-template/apply-form/workflow-template.apply-form.html
index f2d314a632..e244cf75ba 100644
--- a/ui/src/app/shared/workflow-template/apply-form/workflow-template.apply-form.html
+++ b/ui/src/app/shared/workflow-template/apply-form/workflow-template.apply-form.html
@@ -1,9 +1,9 @@
 <nz-row>
   <nz-col [nzSpan]="24">
     <nz-form-item>
-      <nz-form-label>Workflow name*</nz-form-label>
+      <nz-form-label nzFor="cds-field-workflow-name">Workflow name*</nz-form-label>
       <nz-form-control>
-        <input nz-input type="text" name="workflow_name" [(ngModel)]="parameterName"
+        <input nz-input type="text" id="cds-field-workflow-name" name="workflow_name" [(ngModel)]="parameterName"
           [disabled]="!!workflowTemplateInstance">
       </nz-form-control>
     </nz-form-item>
diff --git a/ui/src/app/shared/workflow-template/apply-modal/workflow-template.apply-modal.html b/ui/src/app/shared/workflow-template/apply-modal/workflow-template.apply-modal.html
index 5d47698786..bdbfb92cf6 100644
--- a/ui/src/app/shared/workflow-template/apply-modal/workflow-template.apply-modal.html
+++ b/ui/src/app/shared/workflow-template/apply-modal/workflow-template.apply-modal.html
@@ -23,7 +23,7 @@
         Name
       </nz-col>
       <nz-col [nzSpan]="8">
-        <input nz-input type="text" name="name" [disabled]="true" [ngModel]="workflowTemplate.name">
+        <input nz-input type="text" name="name" aria-label="Name" [disabled]="true" [ngModel]="workflowTemplate.name">
       </nz-col>
     </nz-row>
     <nz-row>
@@ -31,7 +31,7 @@
         Group
       </nz-col>
       <nz-col [nzSpan]="8">
-        <input nz-input type="text" name="group" [disabled]="true" [ngModel]="workflowTemplate.group.name">
+        <input nz-input type="text" name="group" aria-label="Group" [disabled]="true" [ngModel]="workflowTemplate.group.name">
       </nz-col>
       <nz-col [nzSpan]="4" [nzOffset]="8">
         @if (workflowTemplateInstance.workflow_template_version === workflowTemplate.version) {
diff --git a/ui/src/app/shared/workflow-template/param-form/workflow-template.param-form.html b/ui/src/app/shared/workflow-template/param-form/workflow-template.param-form.html
index a0efc64889..565c78b4db 100644
--- a/ui/src/app/shared/workflow-template/param-form/workflow-template.param-form.html
+++ b/ui/src/app/shared/workflow-template/param-form/workflow-template.param-form.html
@@ -9,11 +9,11 @@ <h3>Parameters</h3>
     </nz-col>
     <nz-col [nzSpan]="12">
         <div [ngSwitch]="parameter.type">
-            <input nz-input *ngSwitchDefault type="text" name="parameter-{{parameter.key}}"
+            <input nz-input *ngSwitchDefault type="text" name="parameter-{{parameter.key}}" aria-label="Parameter {{parameter.key}}"
                 [ngModel]="parameterValues[parameter.key]" (ngModelChange)="changeParam(parameter.key, $event)">
             <label *ngSwitchCase="'boolean'" nz-checkbox name="parameter-{{parameter.key}}"
                 [ngModel]="parameterValues[parameter.key]" (ngModelChange)="changeParam(parameter.key, $event)"></label>
-            <codemirror *ngSwitchCase="'json'" name="parameter-{{parameter.key}}"
+            <codemirror *ngSwitchCase="'json'" name="parameter-{{parameter.key}}" aria-label="Parameter {{parameter.key}} editor"
                 [ngModel]="parameterValues[parameter.key]" [config]="codeMirrorConfig"
                 (ngModelChange)="changeParam(parameter.key, $event)" #codemirror>
             </codemirror>
diff --git a/ui/src/app/shared/workflow/menu/edit-hook/menu.edit.hook.html b/ui/src/app/shared/workflow/menu/edit-hook/menu.edit.hook.html
index 831ea0258d..793d6d45aa 100644
--- a/ui/src/app/shared/workflow/menu/edit-hook/menu.edit.hook.html
+++ b/ui/src/app/shared/workflow/menu/edit-hook/menu.edit.hook.html
@@ -1,7 +1,7 @@
 <ul>
   @if (hook.hook_model_name !== 'Workflow') {
     <li>
-      <a [class.disabled]="isRun && (!hookEventUUID || hookEventUUID !== hook.uuid)" (click)="sendEvent('logs')">Display logs</a>
+      <a appClickable [class.disabled]="isRun && (!hookEventUUID || hookEventUUID !== hook.uuid)" (click)="sendEvent('logs')">Display logs</a>
     </li>
   }
   @if (hook.hook_model_name === 'Workflow' && hookEvent?.parent_workflow?.key) {
@@ -11,7 +11,7 @@
   }
   <hr>
     <li>
-      <a (click)="sendEvent('edit')">
+      <a appClickable (click)="sendEvent('edit')">
         @if (readonly) {
           <span>Show context configuration</span>
         }
@@ -23,7 +23,7 @@
     <hr>
       <li>
         @if (!readonly) {
-          <a nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this hook ?" (nzOnConfirm)="sendEvent('delete')">Delete</a>
+          <a appClickable nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this hook ?" (nzOnConfirm)="sendEvent('delete')">Delete</a>
         }
         @if (readonly) {
           <span><a disabled>Delete</a></span>
diff --git a/ui/src/app/shared/workflow/menu/edit-node/menu.edit.node.html b/ui/src/app/shared/workflow/menu/edit-node/menu.edit.node.html
index c2c7e11e04..553fc3b026 100644
--- a/ui/src/app/shared/workflow/menu/edit-node/menu.edit.node.html
+++ b/ui/src/app/shared/workflow/menu/edit-node/menu.edit.node.html
@@ -2,7 +2,7 @@
   <ul>
     @if (workflowrun) {
       <li>
-        <a (click)="sendEvent('run')" [class.disabled]="!runnable">
+        <a appClickable (click)="sendEvent('run')" [class.disabled]="!runnable">
           Run pipeline
         </a>
       </li>
@@ -10,47 +10,47 @@
       }
       @if (node && !workflowrun) {
         <li>
-          <a (click)="sendEvent('pipeline')"
+          <a appClickable (click)="sendEvent('pipeline')"
             [class.disabled]="readonly">
             Add a pipeline
           </a>
         </li>
         <li>
-          <a (click)="sendEvent('parent')"
+          <a appClickable (click)="sendEvent('parent')"
             [class.disabled]="workflow.workflow_data.node.id !== node.id || readonly">
             Add a parent pipeline
           </a>
         </li>
         <li>
-          <a (click)="sendEvent('fork')" [class.disabled]="readonly">
+          <a appClickable (click)="sendEvent('fork')" [class.disabled]="readonly">
             Add a fork
           </a>
         </li>
         <li>
-          <a (click)="sendEvent('join')" [class.disabled]="readonly">
+          <a appClickable (click)="sendEvent('join')" [class.disabled]="readonly">
             Add a join
           </a>
         </li>
         <li>
-          <a (click)="sendEvent('join_link')" [class.disabled]="readonly">
+          <a appClickable (click)="sendEvent('join_link')" [class.disabled]="readonly">
             Link to a join
           </a>
         </li>
         <hr>
           <li>
-            <a (click)="sendEvent('hook')"
+            <a appClickable (click)="sendEvent('hook')"
               [class.disabled]="!workflow.workflow_data || workflow.workflow_data.node.id !== node.id || readonly">
               Add a hook
             </a>
           </li>
           <li>
-            <a (click)="sendEvent('outgoinghook')" [class.disabled]="readonly">
+            <a appClickable (click)="sendEvent('outgoinghook')" [class.disabled]="readonly">
               Add an outgoing hook
             </a>
           </li>
           <hr>
             <li>
-              <a class="item" (click)="sendEvent('edit')">
+              <a class="item" appClickable (click)="sendEvent('edit')">
                 @if (readonly) {
                   <span>Show context configuration</span>
                 }
@@ -70,7 +70,7 @@
             <hr>
               <li>
                 @if (!readonly && node.id !== workflow.workflow_data.node.id) {
-                  <a (click)="sendEvent('delete')">
+                  <a appClickable (click)="sendEvent('delete')">
                     Delete
                   </a>
                 }
@@ -78,7 +78,7 @@
             }
             @if (node && noderun && node.type === 'pipeline') {
               <li>
-                <a (click)="sendEvent('logs')">
+                <a appClickable (click)="sendEvent('logs')">
                   Display logs
                 </a>
               </li>
@@ -86,7 +86,7 @@
               }
               @if (node && workflowrun) {
                 <li>
-                  <a (click)="sendEvent('edit')">
+                  <a appClickable (click)="sendEvent('edit')">
                     Show context configuration
                   </a>
                 </li>
diff --git a/ui/src/app/shared/workflow/node/hook/details/hook.details.component.html b/ui/src/app/shared/workflow/node/hook/details/hook.details.component.html
index d5e8000656..1d68d649a0 100644
--- a/ui/src/app/shared/workflow/node/hook/details/hook.details.component.html
+++ b/ui/src/app/shared/workflow/node/hook/details/hook.details.component.html
@@ -30,13 +30,14 @@ <h3>Hook configuration</h3>
           @if (task.config) {
             @for (k of task.config | keys; track k) {
               <nz-form-item>
-                <nz-form-label [nzSpan]="4">{{k}}</nz-form-label>
+                <nz-form-label [nzSpan]="4" nzFor="cds-field-hook-{{k}}">{{k}}</nz-form-label>
                 <nz-form-control [nzSpan]="20">
                   @if (k !== 'payload') {
-                    <input nz-input type="text" name="value-{{k}}" [ngModel]="task.config[k].value" [readonly]="true">
+                    <input nz-input type="text" id="cds-field-hook-{{k}}" name="value-{{k}}" [ngModel]="task.config[k].value" [readonly]="true">
                   }
                   @if (k === 'payload') {
                     <codemirror name="value-{{k}}"
+                      aria-label="Hook payload"
                       [ngModel]="task.config[k].value"
                       [config]="codeMirrorConfig"
                       #textareaCodeMirror>
@@ -52,17 +53,17 @@ <h3>Hook configuration</h3>
           <h3>Hook's log</h3>
           @if (task.workflow_run) {
             <nz-form-item>
-              <nz-form-label [nzSpan]="4">Workflow run</nz-form-label>
+              <nz-form-label [nzSpan]="4" nzFor="cds-field-hook-run">Workflow run</nz-form-label>
               <nz-form-control [nzSpan]="20">
-                <input nz-input type="text" [value]="task.workflow_run" [readonly]="true" name="run">
+                <input nz-input type="text" id="cds-field-hook-run" [value]="task.workflow_run" [readonly]="true" name="run">
               </nz-form-control>
             </nz-form-item>
           }
           <nz-form-item>
-            <nz-form-label [nzSpan]="4">Status</nz-form-label>
+            <nz-form-label [nzSpan]="4" nzFor="cds-field-hook-status">Status</nz-form-label>
             <nz-form-control [nzSpan]="20">
               <nz-input-group [nzSuffix]="suffixIconSearch">
-                <input nz-input type="text" [value]="task.status" name="status" readonly>
+                <input nz-input type="text" id="cds-field-hook-status" [value]="task.status" name="status" readonly>
               </nz-input-group>
               <ng-template #suffixIconSearch>
                 @if (task.status === hookStatus.DONE) {
@@ -81,22 +82,22 @@ <h3>Hook's log</h3>
             </nz-form-control>
           </nz-form-item>
           <nz-form-item>
-            <nz-form-label [nzSpan]="4">Begin</nz-form-label>
+            <nz-form-label [nzSpan]="4" nzFor="cds-field-hook-begin">Begin</nz-form-label>
             <nz-form-control [nzSpan]="20">
-              <input nz-input type="text" [value]="(task.timestamp / 1000000) | date:'short'" [readonly]="true" name="begin">
+              <input nz-input type="text" id="cds-field-hook-begin" [value]="(task.timestamp / 1000000) | date:'short'" [readonly]="true" name="begin">
             </nz-form-control>
           </nz-form-item>
           <nz-form-item>
-            <nz-form-label [nzSpan]="4">End</nz-form-label>
+            <nz-form-label [nzSpan]="4" nzFor="cds-field-hook-end">End</nz-form-label>
             <nz-form-control [nzSpan]="20">
-              <input nz-input type="text" [value]="(task.processing_timestamp / 1000000) | date:'short'" [readonly]="true" name="end">
+              <input nz-input type="text" id="cds-field-hook-end" [value]="(task.processing_timestamp / 1000000) | date:'short'" [readonly]="true" name="end">
             </nz-form-control>
           </nz-form-item>
           @if (task.last_error) {
             <nz-form-item>
-              <nz-form-label [nzSpan]="4">Error</nz-form-label>
+              <nz-form-label [nzSpan]="4" nzFor="cds-field-hook-error">Error</nz-form-label>
               <nz-form-control [nzSpan]="20">
-                <input nz-input type="text" [value]="task.last_error" [readonly]="true" name="error">
+                <input nz-input type="text" id="cds-field-hook-error" [value]="task.last_error" [readonly]="true" name="error">
               </nz-form-control>
             </nz-form-item>
           }
@@ -105,6 +106,7 @@ <h3>Hook's log</h3>
               <nz-form-label [nzSpan]="4">Body</nz-form-label>
               <nz-form-control [nzSpan]="20">
                 <codemirror name="body"
+                  aria-label="Hook body"
                   [ngModel]="body"
                   [config]="codeMirrorConfig"
                   #code>
diff --git a/ui/src/app/shared/workflow/node/run/node.run.param.html b/ui/src/app/shared/workflow/node/run/node.run.param.html
index 1398ffd759..3c1b41d4a7 100644
--- a/ui/src/app/shared/workflow/node/run/node.run.param.html
+++ b/ui/src/app/shared/workflow/node/run/node.run.param.html
@@ -14,7 +14,7 @@ <h3>{{ 'workflow_node_context_payload' | translate}}</h3>
     <h3>{{ 'workflow_node_context_payload_read_only' | translate}}</h3>
   }
   @if (!loadingBranches) {
-    <codemirror [class.invalid]="invalidJSON" [(ngModel)]="payloadString" [config]="codeMirrorConfig"
+    <codemirror [class.invalid]="invalidJSON" [(ngModel)]="payloadString" [config]="codeMirrorConfig" aria-label="Run payload editor"
       (click)="changeCodeMirror(textareaCodeMirror, $event)"
       (change)="changeCodeMirror(textareaCodeMirror, $event)" #textareaCodeMirror>
     </codemirror>
@@ -52,17 +52,17 @@ <h3>Commit list</h3>
     </button>
     @if (!loading && currentNodeRun) {
       <button nz-button nzType="primary" nz-dropdown [nzDropdownMenu]="menu"
-        nzPlacement="bottomRight">
-        <i nz-icon nzType="down"></i>
+        nzPlacement="bottomRight" aria-label="More run options">
+        <i nz-icon nzType="down" aria-hidden="true"></i>
       </button>
     }
     <nz-dropdown-menu #menu="nzDropdownMenu">
       <ul nz-menu>
-        <li nz-menu-item [nzDisabled]="workflow?.from_repository" (click)="run(true, false)" nz-tooltip nzTooltipTitle="When you resync this run, it will update the pipelines linked to this run with your last editions. It won't resync your project variables.">
-          <i nz-icon nzType="sync" nzTheme="outline"></i>{{'workflow_resync' | translate }}
+        <li nz-menu-item appClickable [nzDisabled]="workflow?.from_repository" (click)="run(true, false)" nz-tooltip nzTooltipTitle="When you resync this run, it will update the pipelines linked to this run with your last editions. It won't resync your project variables.">
+          <i nz-icon nzType="sync" nzTheme="outline" aria-hidden="true"></i>{{'workflow_resync' | translate }}
         </li>
-        <li nz-menu-item [nzDisabled]="currentNodeRun?.status !== 'Fail'" (click)="run(false, true)">
-          <i nz-icon nzType="bug" nzTheme="outline"></i>{{'workflow_run_only_failed' | translate }}
+        <li nz-menu-item appClickable [nzDisabled]="currentNodeRun?.status !== 'Fail'" (click)="run(false, true)">
+          <i nz-icon nzType="bug" nzTheme="outline" aria-hidden="true"></i>{{'workflow_run_only_failed' | translate }}
         </li>
       </ul>
     </nz-dropdown-menu>
diff --git a/ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.html b/ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.html
index f09387b0d6..80ef978362 100644
--- a/ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.html
+++ b/ui/src/app/shared/workflow/sidebar/run-list/workflow.sidebar.run.component.html
@@ -9,7 +9,7 @@
     [scrollWindow]="false" (scrolled)="scroll()">
     @if (workflowRuns.length > 0) {
       @for (r of workflowRuns; track r) {
-        <div class="item pointing" (click)="changeRun(r.num)"
+        <div class="item pointing" appClickable [attr.aria-label]="'Run ' + (r.version ? r.version : r.num)" (click)="changeRun(r.num)"
           [class.active]="currentWorkflowRunNumber === r.num"
           [class.success]="r.status === pipelineStatusEnum.SUCCESS"
           [class.waiting]="r.status === pipelineStatusEnum.BUILDING || r.status === pipelineStatusEnum.WAITING || r.status === pipelineStatusEnum.PENDING"
@@ -27,9 +27,9 @@
                     [class.never]="r.status === pipelineStatusEnum.NEVER_BUILT || r.status === pipelineStatusEnum.SKIPPED || r.status === pipelineStatusEnum.DISABLED">{{r.version
                   ? r.version : r.num}}</span>
                 </div>
-                <a title="Copy version" ngxClipboard [cbContent]="r.version ? r.version : '' + r.num"
+                <a title="Copy version" aria-label="Copy version" appClickable ngxClipboard [cbContent]="r.version ? r.version : '' + r.num"
                   (click)="confirmCopy();$event.stopPropagation();"> <i nz-icon nzType="copy"
-                nzTheme="outline"></i></a>
+                nzTheme="outline" aria-hidden="true"></i></a>
               </div>
               <ng-template #popupTemplate>
                 <ul>
diff --git a/ui/src/app/shared/workflow/wizard/context/wizard.context.html b/ui/src/app/shared/workflow/wizard/context/wizard.context.html
index 16b3ae7c5e..5e6dca75f5 100644
--- a/ui/src/app/shared/workflow/wizard/context/wizard.context.html
+++ b/ui/src/app/shared/workflow/wizard/context/wizard.context.html
@@ -10,9 +10,9 @@
       }
     </nz-form-item>
     <nz-form-item>
-      <nz-form-label [nzSpan]="6">Name</nz-form-label>
+      <nz-form-label [nzSpan]="6" nzFor="cds-field-node-name">Name</nz-form-label>
       <nz-form-control [nzSpan]="12">
-        <input name="name" nz-input [(ngModel)]="node.name" (ngModelChange)="pushChange()" [disabled]="readonly">
+        <input name="name" id="cds-field-node-name" nz-input [(ngModel)]="node.name" (ngModelChange)="pushChange()" [disabled]="readonly">
       </nz-form-control>
     </nz-form-item>
     <nz-form-item>
diff --git a/ui/src/app/shared/workflow/wizard/hook/hook.form.html b/ui/src/app/shared/workflow/wizard/hook/hook.form.html
index 74800ca8a7..04081d32ed 100644
--- a/ui/src/app/shared/workflow/wizard/hook/hook.form.html
+++ b/ui/src/app/shared/workflow/wizard/hook/hook.form.html
@@ -6,10 +6,10 @@
     </div>
     <h3>Hook configuration</h3>
     <nz-form-item>
-        <nz-form-label [nzSm]="6" [nzXs]="24">hook type</nz-form-label>
+        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="cds-field-hookform-type">hook type</nz-form-label>
         <nz-form-control [nzSm]="14" [nzXs]="24">
             <ng-container *ngIf="isRun">
-                <input nz-input name="modelName" [value]="hook?.hook_model_name" [readOnly]="true">
+                <input nz-input id="cds-field-hookform-type" name="modelName" [value]="hook?.hook_model_name" [readOnly]="true">
             </ng-container>
             <ng-container *ngIf="!isRun">
                 <ng-container *ngIf="!loadingModels">
@@ -21,23 +21,23 @@ <h3>Hook configuration</h3>
         </nz-form-control>
     </nz-form-item>
     <nz-form-item *ngIf="hook?.uuid">
-        <nz-form-label [nzSm]="6" [nzXs]="24">uuid</nz-form-label>
+        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="cds-field-hookform-uuid">uuid</nz-form-label>
         <nz-form-control [nzSm]="14" [nzXs]="24">
-                <input nz-input name="uuid" [value]="hook.uuid" [readOnly]="true">
+                <input nz-input id="cds-field-hookform-uuid" name="uuid" [value]="hook.uuid" [readOnly]="true">
         </nz-form-control>
     </nz-form-item>
     <ng-container *ngIf="hook?.model && displayConfig">
         <ng-container *ngIf="hook.config && hook.model.name !== 'Workflow'">
             <nz-form-item *ngFor="let k of hook.config | keys">
-                <nz-form-label [nzSm]="6" [nzXs]="24">{{k}}</nz-form-label>
+                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="cds-field-hookform-{{k}}">{{k}}</nz-form-label>
                 <nz-form-control [nzSm]="14" [nzXs]="24">
                     <!-- STRING -->
                     <ng-container *ngIf="k !== 'payload' && (hook.config[k].type === 'string' || !hook.config[k].type)">
-                        <input nz-input name="{{k}}" [(ngModel)]="hook.config[k].value" [readonly]="!hook.config[k].configurable || mode === 'ro'"/>
+                        <input nz-input id="cds-field-hookform-{{k}}" name="{{k}}" [(ngModel)]="hook.config[k].value" [readonly]="!hook.config[k].configurable || mode === 'ro'"/>
                     </ng-container>
                     <!-- PASSWORD -->
                     <ng-container  *ngIf="k !== 'payload' && hook.config[k].type === 'password'">
-                        <input nz-input name="{{k}}" type="password" [(ngModel)]="hook.config[k].value"
+                        <input nz-input id="cds-field-hookform-{{k}}" name="{{k}}" type="password" [(ngModel)]="hook.config[k].value"
                                [readonly]="!hook.config[k].configurable || mode === 'ro'"/>
                     </ng-container>
                     <!-- MULTICHOICE -->
@@ -51,6 +51,7 @@ <h3>Hook configuration</h3>
                     <!-- PAYLOAD -->
                     <ng-container *ngIf="k === 'payload' && hook.config[k].type === 'string'">
                         <codemirror name="{{k}}"
+                                aria-label="Hook payload editor"
                                 [class.invalid]="invalidJSON"
                                 [(ngModel)]="hook.config[k].value"
                                 [config]="codeMirrorConfig"
diff --git a/ui/src/app/shared/workflow/wizard/input/wizard.input.html b/ui/src/app/shared/workflow/wizard/input/wizard.input.html
index 4483d31520..c4be0ced26 100644
--- a/ui/src/app/shared/workflow/wizard/input/wizard.input.html
+++ b/ui/src/app/shared/workflow/wizard/input/wizard.input.html
@@ -35,6 +35,7 @@
         @if (!loadingBranches) {
           <codemirror
             name="payload"
+            aria-label="Payload editor"
             [class.invalid]="invalidJSON"
             [(ngModel)]="payloadString"
             [config]="codeMirrorConfig"
diff --git a/ui/src/app/shared/workflow/wizard/node-add/node.wizard.html b/ui/src/app/shared/workflow/wizard/node-add/node.wizard.html
index 49a903588a..3e6dde63af 100644
--- a/ui/src/app/shared/workflow/wizard/node-add/node.wizard.html
+++ b/ui/src/app/shared/workflow/wizard/node-add/node.wizard.html
@@ -48,9 +48,9 @@
                                 </nz-tab>
                                 <nz-tab nzTitle="Create a new pipeline">
                                     <nz-form-item>
-                                        <nz-form-label>New pipeline name</nz-form-label>
+                                        <nz-form-label nzFor="cds-field-new-pipeline-name">New pipeline name</nz-form-label>
                                         <nz-form-control>
-                                            <input nz-input type="text" name="pipname" [(ngModel)]="newPipeline.name">
+                                            <input nz-input type="text" id="cds-field-new-pipeline-name" name="pipname" [(ngModel)]="newPipeline.name">
                                         </nz-form-control>
                                     </nz-form-item>
                                     <nz-alert nzType="error" *ngIf="errorPipelineNamePattern" nzMessage="Invalid pipeline name. Allowed pattern is: a-zA-Z0-9._-"></nz-alert>
@@ -109,9 +109,9 @@
                                 </nz-tab>
                                 <nz-tab nzTitle="Create a new application">
                                     <nz-form-item>
-                                        <nz-form-label>New application name</nz-form-label>
+                                        <nz-form-label nzFor="cds-field-new-application-name">New application name</nz-form-label>
                                         <nz-form-control>
-                                            <input nz-input type="text" name="appname" [(ngModel)]="newApplication.name">
+                                            <input nz-input type="text" id="cds-field-new-application-name" name="appname" [(ngModel)]="newApplication.name">
                                         </nz-form-control>
                                     </nz-form-item>
                                     <nz-alert nzType="error" nzMessage="Invalid application name. Allowed pattern is: a-zA-Z0-9._-" *ngIf="errorPipelineNamePattern"></nz-alert>
@@ -150,9 +150,9 @@
                                 </nz-tab>
                                 <nz-tab nzTitle="Create a new environment">
                                     <nz-form-item>
-                                        <nz-form-label>New environment name</nz-form-label>
+                                        <nz-form-label nzFor="cds-field-new-environment-name">New environment name</nz-form-label>
                                         <nz-form-control>
-                                            <input nz-input type="text" name="envname" [(ngModel)]="newEnvironment.name">
+                                            <input nz-input type="text" id="cds-field-new-environment-name" name="envname" [(ngModel)]="newEnvironment.name">
                                         </nz-form-control>
                                     </nz-form-item>
                                 </nz-tab>
diff --git a/ui/src/app/shared/workflow/wizard/outgoinghook/wizard.outgoinghook.html b/ui/src/app/shared/workflow/wizard/outgoinghook/wizard.outgoinghook.html
index d396fba324..2a6b68f154 100644
--- a/ui/src/app/shared/workflow/wizard/outgoinghook/wizard.outgoinghook.html
+++ b/ui/src/app/shared/workflow/wizard/outgoinghook/wizard.outgoinghook.html
@@ -21,22 +21,22 @@ <h3>Hook configuration</h3>
     @if (outgoingHook.outgoing_hook.config && selectedOutgoingHookModel.name !== 'Workflow') {
       @for (k of outgoingHook.outgoing_hook.config | keys; track k) {
         <nz-form-item>
-          <nz-form-label [nzSm]="6" [nzXs]="24">{{k}}</nz-form-label>
+          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="cds-field-outgoinghook-{{k}}">{{k}}</nz-form-label>
           <nz-form-control [nzSm]="14" [nzXs]="24">
             @if (k !== 'payload' && (outgoingHook.outgoing_hook.config[k].type === 'string' || !outgoingHook.outgoing_hook.config[k].type)) {
-              <input nz-input name="{{k}}" [(ngModel)]="outgoingHook.outgoing_hook.config[k].value"
+              <input nz-input id="cds-field-outgoinghook-{{k}}" name="{{k}}" [(ngModel)]="outgoingHook.outgoing_hook.config[k].value"
                 (ngModelChange)="pushChange()"
                 [readonly]="!outgoingHook.outgoing_hook.config[k].configurable || mode === 'ro'"
                 />
             }
             @if (k !== 'payload' && outgoingHook.outgoing_hook.config[k].type === 'password') {
-              <input nz-input name="{{k}}" type="password" [(ngModel)]="outgoingHook.outgoing_hook.config[k].value"
+              <input nz-input id="cds-field-outgoinghook-{{k}}" name="{{k}}" type="password" [(ngModel)]="outgoingHook.outgoing_hook.config[k].value"
                 (ngModelChange)="pushChange()"
                 [readonly]="!outgoingHook.outgoing_hook.config[k].configurable || mode === 'ro'"
                 />
             }
             @if (k === 'payload' && outgoingHook.outgoing_hook.config[k].type === 'string') {
-              <codemirror name="{{k}}" [class.invalid]="invalidJSON"
+              <codemirror name="{{k}}" aria-label="Payload editor" [class.invalid]="invalidJSON"
                 [(ngModel)]="outgoingHook.outgoing_hook.config[k].value" [config]="codeMirrorConfig"
                 (change)="changeCodeMirror($event)" #textareaCodeMirror>
               </codemirror>
@@ -47,9 +47,9 @@ <h3>Hook configuration</h3>
     }
     @if (selectedOutgoingHookModel.name === 'Workflow') {
       <nz-form-item>
-        <nz-form-label [nzSm]="6" [nzXs]="24">project</nz-form-label>
+        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="cds-field-outgoinghook-project">project</nz-form-label>
         <nz-form-control [nzSm]="14" [nzXs]="24">
-          <input nz-input name="project" [(ngModel)]="outgoingHook.outgoing_hook.config['target_project'].value" [disabled]="true"/>
+          <input nz-input id="cds-field-outgoinghook-project" name="project" [(ngModel)]="outgoingHook.outgoing_hook.config['target_project'].value" [disabled]="true"/>
         </nz-form-control>
       </nz-form-item>
       @if (availableWorkflows) {
@@ -82,7 +82,7 @@ <h3>Hook configuration</h3>
         <nz-form-item>
           <nz-form-label [nzSm]="6" [nzXs]="24">payload</nz-form-label>
           <nz-form-control [nzSm]="14" [nzXs]="24">
-            <codemirror [class.invalid]="invalidJSON" name="payload"
+            <codemirror [class.invalid]="invalidJSON" name="payload" aria-label="Payload editor"
               [(ngModel)]="outgoingHook.outgoing_hook.config['payload'].value" [config]="codeMirrorConfig"
               (change)="changeCodeMirror($event)" #textareaCodeMirror>
             </codemirror>
diff --git a/ui/src/app/shared/workflow/wnode/hook/hook.html b/ui/src/app/shared/workflow/wnode/hook/hook.html
index c80ed64de3..a13958464c 100644
--- a/ui/src/app/shared/workflow/wnode/hook/hook.html
+++ b/ui/src/app/shared/workflow/wnode/hook/hook.html
@@ -19,7 +19,7 @@
   }
   @if (hookEvent && hookEvent.parent_workflow && hookEvent.parent_workflow.name) {
     <i nz-icon nzType="{{icon | lowercase }}" nzTheme="outline" [class.green]="hookEvent.uuid === hook.uuid"
-    nz-tooltip nzTooltipTitle="{{hookEvent.parent_workflow.key}}/{{hookEvent.parent_workflow.name}} #{{hookEvent.parent_workflow.run}}"></i>
+    nz-tooltip nzTooltipTitle="{{hookEvent.parent_workflow.key}}/{{hookEvent.parent_workflow.name}} #{{hookEvent.parent_workflow.run}}" role="img" aria-label="{{hookEvent.parent_workflow.key}}/{{hookEvent.parent_workflow.name}} #{{hookEvent.parent_workflow.run}}"></i>
   }
   @if (!hookEvent || !hookEvent.parent_workflow) {
     @if (icon === 'bitbucket') {
diff --git a/ui/src/app/shared/workflow/wnode/join/node.join.html b/ui/src/app/shared/workflow/wnode/join/node.join.html
index 00fe4e01a5..b57b4d7221 100644
--- a/ui/src/app/shared/workflow/wnode/join/node.join.html
+++ b/ui/src/app/shared/workflow/wnode/join/node.join.html
@@ -2,7 +2,7 @@
   [class.success]="noderunStatus === pipelineStatus.SUCCESS" [class.fail]="noderunStatus === pipelineStatus.FAIL || noderunStatus === pipelineStatus.STOPPED"
   [class.inactive]="noderunStatus === pipelineStatus.DISABLED || noderunStatus === pipelineStatus.SKIPPED">
   @if (nodeToLink) {
-    <svg width="32" height="32" (click)="$event.stopPropagation(); selectJoinToLink()">
+    <svg width="32" height="32" role="button" tabindex="0" aria-label="Link to this join" (keydown.enter)="$event.preventDefault(); selectJoinToLink()" (keydown.space)="$event.preventDefault(); selectJoinToLink()" (click)="$event.stopPropagation(); selectJoinToLink()">
       <circle cx="16" cy="16" r="16" style="fill:grey;">
         <animate attributeName="opacity" values="0;1;0" dur="1.5s" repeatCount="indefinite" />
       </circle>
diff --git a/ui/src/app/shared/workflow/wnode/pipeline/node.pipeline.html b/ui/src/app/shared/workflow/wnode/pipeline/node.pipeline.html
index b1c12fb840..07fb977832 100644
--- a/ui/src/app/shared/workflow/wnode/pipeline/node.pipeline.html
+++ b/ui/src/app/shared/workflow/wnode/pipeline/node.pipeline.html
@@ -18,8 +18,8 @@
     </div>
     @if (warnings > 0) {
       <div nz-tooltip nzTooltipPlacement="right"
-        [nzTooltipTitle]="'warning_build_title' | translate: {nb: warnings}" class="warn">
-        <span nz-icon nzType="warning" nzTheme="outline" class="orange"></span>
+        [nzTooltipTitle]="'warning_build_title' | translate: {nb: warnings}" class="warn" role="img" [attr.aria-label]="'warning_build_title' | translate: {nb: warnings}">
+        <span nz-icon nzType="warning" nzTheme="outline" class="orange" aria-hidden="true"></span>
       </div>
     }
     @if (noderun && noderun.subnumber) {
@@ -65,7 +65,7 @@
       <div class="actions">
         @if (noderun) {
           <div class="action">
-            <span class="logs" nz-icon nzType="file-text" nzTheme="outline" title="Logs"  (click)="$event.stopPropagation(); displayLogs()"></span>
+            <span class="logs" nz-icon nzType="file-text" nzTheme="outline" title="Logs" aria-label="Logs" appClickable (click)="$event.stopPropagation(); displayLogs()"></span>
           </div>
         }
       </div>
diff --git a/ui/src/app/shared/workflow/wnode/workflow.node.html b/ui/src/app/shared/workflow/wnode/workflow.node.html
index 0dcf2b6b1f..8dbcbda9d5 100644
--- a/ui/src/app/shared/workflow/wnode/workflow.node.html
+++ b/ui/src/app/shared/workflow/wnode/workflow.node.html
@@ -1,4 +1,4 @@
-<div class="node-wrapper" (click)="clickOnNode()" (dblclick)="$event.stopPropagation(); dblClickOnNode()"
+<div class="node-wrapper" appClickable [attr.aria-label]="'Workflow node ' + node.name" (click)="clickOnNode()" (dblclick)="$event.stopPropagation(); dblClickOnNode()"
   nz-popover [nzPopoverContent]="popupNode" nzPopoverPlacement="right" nzPopoverTrigger="click" [(nzPopoverVisible)]="menuVisible">
   @switch (node.type) {
     @case ('pipeline') {
diff --git a/ui/src/app/views/admin/hook-task/show/hook-task.show.html b/ui/src/app/views/admin/hook-task/show/hook-task.show.html
index 6a170cefd7..ad91feb7b5 100644
--- a/ui/src/app/views/admin/hook-task/show/hook-task.show.html
+++ b/ui/src/app/views/admin/hook-task/show/hook-task.show.html
@@ -9,10 +9,10 @@ <h2>Hook configuration</h2>
           @if (task && task.config) {
             @for (k of task.config | keys; track k) {
               <nz-form-item>
-                <nz-form-label [nzSpan]="2">{{k}}</nz-form-label>
+                <nz-form-label [nzSpan]="2" nzFor="cds-field-{{k}}">{{k}}</nz-form-label>
                 <nz-form-control>
                   @if (k !== 'payload') {
-                    <input nz-input type="text" name="value-{{k}}" [ngModel]="task.config[k].value" [readonly]="true">
+                    <input nz-input type="text" name="value-{{k}}" id="cds-field-{{k}}" [ngModel]="task.config[k].value" [readonly]="true">
                   }
                   @if (k === 'payload') {
                     <codemirror class="code"name="value-{{k}}" [ngModel]="task.config[k].value" [config]="codeMirrorConfig"
@@ -35,23 +35,23 @@ <h2>Executions</h2>
             <h2>{{'workflow_hook_log_title' | translate}}</h2>
             @if (selectedExecution.workflow_run) {
               <nz-form-item>
-                <nz-form-label [nzSpan]="3">{{'workflow_hook_log_workflow_run' | translate}}</nz-form-label>
+                <nz-form-label [nzSpan]="3" nzFor="cds-field-hook-log">{{'workflow_hook_log_workflow_run' | translate}}</nz-form-label>
                 <nz-form-control>
-                  <input nz-input type="text" name="hook_log" [value]="selectedExecution?.workflow_run" [readonly]="true">
+                  <input nz-input type="text" name="hook_log" id="cds-field-hook-log" [value]="selectedExecution?.workflow_run" [readonly]="true">
                 </nz-form-control>
               </nz-form-item>
             }
             <nz-form-item>
-              <nz-form-label [nzSpan]="3">Status</nz-form-label>
+              <nz-form-label [nzSpan]="3" nzFor="cds-field-hook-status">Status</nz-form-label>
               <nz-form-control>
-                <input nz-input type="text" name="hook_status" [value]="selectedExecution.status" [readonly]="true">
+                <input nz-input type="text" name="hook_status" id="cds-field-hook-status" [value]="selectedExecution.status" [readonly]="true">
               </nz-form-control>
             </nz-form-item>
             @if (selectedExecution.last_error) {
               <nz-form-item>
-                <nz-form-label [nzSpan]="3">{{'common_error' | translate}}</nz-form-label>
+                <nz-form-label [nzSpan]="3" nzFor="cds-field-hook-error">{{'common_error' | translate}}</nz-form-label>
                 <nz-form-control>
-                  <input nz-input type="text" name="hook_error" [value]="selectedExecution?.last_error" [readonly]="true">
+                  <input nz-input type="text" name="hook_error" id="cds-field-hook-error" [value]="selectedExecution?.last_error" [readonly]="true">
                 </nz-form-control>
               </nz-form-item>
             }
diff --git a/ui/src/app/views/admin/service/list/service.list.html b/ui/src/app/views/admin/service/list/service.list.html
index 33810d8e95..26c0fb918d 100644
--- a/ui/src/app/views/admin/service/list/service.list.html
+++ b/ui/src/app/views/admin/service/list/service.list.html
@@ -9,10 +9,10 @@
               <h1>
                 CDS Services
                 <div class="floatRight">
-                  <nz-tag class="pointer" [nzColor]="globalStatus.status==='AL'?'error':(globalStatus.status==='WARN'?'warning': 'success')" (click)="filter=globalStatus.status">
+                  <nz-tag class="pointer" appClickable [nzColor]="globalStatus.status==='AL'?'error':(globalStatus.status==='WARN'?'warning': 'success')" (click)="filter=globalStatus.status">
                     {{globalStatus.name}} {{globalStatus.status}} - {{globalStatus.value}}
                   </nz-tag>
-                  <nz-tag class="pointer" (click)="filter='/Version'" [ngClass]="{'red': globalVersion.status==='AL', 'orange': globalVersion.status==='WARN', 'green': globalVersion.status==='OK'}">
+                  <nz-tag class="pointer" appClickable (click)="filter='/Version'" [ngClass]="{'red': globalVersion.status==='AL', 'orange': globalVersion.status==='WARN', 'green': globalVersion.status==='OK'}">
                     {{globalVersion.name}} {{globalVersion.status}} - {{globalVersion.value}}
                   </nz-tag>
                 </div>
@@ -40,18 +40,18 @@ <h1>
                         <li>
                           <div class="floatRight">
                             <span class="pointer" nz-icon nzType="filter" nzTheme="outline" nz-tooltip nzTooltipTitle="Click for filter list"
-                            popupPlacement="top left" (click)="filter=srv.name"></span>
+                            popupPlacement="top left" appClickable aria-label="Filter list on {{srv.name}}" (click)="filter=srv.name"></span>
                           </div>
                           <a [routerLink]="[srv.name]" nz-tooltip nzTooltipTitle="See details">
                             @switch (srv.status) {
                               @case ('OK') {
-                                <span nz-icon nzType="check" nzTheme="outline"  class="green" title="{{srv.status}}"></span>
+                                <span nz-icon nzType="check" nzTheme="outline"  class="green" title="{{srv.status}}" role="img" aria-label="{{srv.status}}"></span>
                               }
                               @case ('AL') {
-                                <span nz-icon nzType="close" nzTheme="outline"  class="red" title="{{srv.status}}"></span>
+                                <span nz-icon nzType="close" nzTheme="outline"  class="red" title="{{srv.status}}" role="img" aria-label="{{srv.status}}"></span>
                               }
                               @case ('WARN') {
-                                <span nz-icon nzType="warning" nzTheme="outline"  class="orange" title="{{srv.status}}"></span>
+                                <span nz-icon nzType="warning" nzTheme="outline"  class="orange" title="{{srv.status}}" role="img" aria-label="{{srv.status}}"></span>
                               }
                             }
                             {{srv.name}}
diff --git a/ui/src/app/views/admin/worker-model-pattern/form/worker-model-pattern.form.html b/ui/src/app/views/admin/worker-model-pattern/form/worker-model-pattern.form.html
index 40236c24c3..bd1902b05e 100644
--- a/ui/src/app/views/admin/worker-model-pattern/form/worker-model-pattern.form.html
+++ b/ui/src/app/views/admin/worker-model-pattern/form/worker-model-pattern.form.html
@@ -6,17 +6,17 @@
           <nz-row>
             <nz-col [nzSpan]="12">
               <nz-form-item>
-                <nz-form-label>Name</nz-form-label>
+                <nz-form-label nzFor="cds-field-pattern-name">Name</nz-form-label>
                 <nz-form-control>
-                  <input nz-input type="text" name="name" [(ngModel)]="pattern.name" [disabled]="loading">
+                  <input nz-input type="text" name="name" id="cds-field-pattern-name" [(ngModel)]="pattern.name" [disabled]="loading">
                 </nz-form-control>
               </nz-form-item>
             </nz-col>
             <nz-col [nzSpan]="11" [nzOffset]="1">
               <nz-form-item>
-                <nz-form-label>Type</nz-form-label>
+                <nz-form-label nzFor="cds-field-pattern-type">Type</nz-form-label>
                 <nz-form-control>
-                  <nz-select nzShowSearch name="type" nzPlaceHolder="{{'common_select' | translate}}"
+                  <nz-select nzShowSearch name="type" id="cds-field-pattern-type" nzPlaceHolder="{{'common_select' | translate}}"
                     [nzDisabled]="loading" [(ngModel)]="pattern.type" #selectType>
                     @for (option of workerModelTypes; track option) {
                       <nz-option [nzValue]="option" [nzLabel]="option">
@@ -31,9 +31,9 @@
             <nz-row>
               <nz-col [nzSpan]="24">
                 <nz-form-item>
-                  <nz-form-label>Shell command</nz-form-label>
+                  <nz-form-label nzFor="cds-field-pattern-shell">Shell command</nz-form-label>
                   <nz-form-control>
-                    <input nz-input name="shell" type="text" placeholder="sh -c" name="shell"
+                    <input nz-input name="shell" type="text" placeholder="sh -c" id="cds-field-pattern-shell" name="shell"
                       [(ngModel)]="pattern.model.shell">
                   </nz-form-control>
                 </nz-form-item>
@@ -43,9 +43,9 @@
           <nz-row>
             <nz-col [nzSpan]="24">
               <nz-form-item>
-                <nz-form-label>Pre worker command</nz-form-label>
+                <nz-form-label nzFor="cds-field-pattern-pre-cmd">Pre worker command</nz-form-label>
                 <nz-form-control>
-                  <textarea nz-input name="pre_cmd" [(ngModel)]="pattern.model.pre_cmd" [disabled]="loading"></textarea>
+                  <textarea nz-input name="pre_cmd" id="cds-field-pattern-pre-cmd" [(ngModel)]="pattern.model.pre_cmd" [disabled]="loading"></textarea>
                 </nz-form-control>
               </nz-form-item>
             </nz-col>
@@ -53,9 +53,9 @@
           <nz-row>
             <nz-col [nzSpan]="24">
               <nz-form-item>
-                <nz-form-label>Main worker command <i nz-icon nzType="question-circle" nzTheme="outline"></i></nz-form-label>
+                <nz-form-label nzFor="cds-field-pattern-cmd">Main worker command <i nz-icon nzType="question-circle" nzTheme="outline" aria-hidden="true"></i></nz-form-label>
                 <nz-form-control>
-                  <input nz-input type="text" name="cmd" [(ngModel)]="pattern.model.cmd" [disabled]="loading">
+                  <input nz-input type="text" name="cmd" id="cds-field-pattern-cmd" [(ngModel)]="pattern.model.cmd" [disabled]="loading">
                 </nz-form-control>
               </nz-form-item>
             </nz-col>
@@ -63,23 +63,23 @@
           @if (pattern.type && pattern.type === 'docker') {
             <nz-row>
               <nz-form-item>
-                <nz-form-label nz-tooltip [nzTooltipTitle]="'worker_model_env_tooltip' | translate"> {{'worker_model_env' | translate}} <i nz-icon nzType="question-circle" nzTheme="outline"></i></nz-form-label>
+                <nz-form-label nz-tooltip [nzTooltipTitle]="'worker_model_env_tooltip' | translate"> {{'worker_model_env' | translate}} <i nz-icon nzType="question-circle" nzTheme="outline" aria-hidden="true"></i></nz-form-label>
               </nz-form-item>
             </nz-row>
             @if (pattern.model.envs) {
               @for (envName of envNames; track envName) {
                 <nz-row class="envLine">
                   <nz-col [nzSpan]="11">
-                    <input nz-input type="text" name="name-{{envName}}" [placeholder]="'common_name' | translate"
+                    <input nz-input type="text" name="name-{{envName}}" [placeholder]="'common_name' | translate" [attr.aria-label]="'common_name' | translate"
                       [value]="envName" disabled>
                   </nz-col>
                   <nz-col [nzSpan]="10" nzOffset="1">
-                    <input nz-input type="text" name="value-{{envName}}" [placeholder]="'common_value' | translate"
+                    <input nz-input type="text" name="value-{{envName}}" [placeholder]="'common_value' | translate" [attr.aria-label]="'common_value' | translate"
                       [(ngModel)]="pattern.model.envs[envName]">
                   </nz-col>
                   <nz-col [nzSpan]="1" nzOffset="1">
-                    <button nz-button nzDanger nzType="primary" (click)="clickDeleteEnv(envName)">
-                      <i nz-icon nzType="delete" nzTheme="outline"></i>
+                    <button nz-button nzDanger nzType="primary" aria-label="Delete environment variable {{envName}}" (click)="clickDeleteEnv(envName)">
+                      <i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>
                     </button>
                   </nz-col>
                 </nz-row>
@@ -87,16 +87,16 @@
             }
             <nz-row class="envLine">
               <nz-col [nzSpan]="11">
-                <input nz-input type="text" name="newEnvName" [placeholder]="'common_name' | translate"
+                <input nz-input type="text" name="newEnvName" [placeholder]="'common_name' | translate" [attr.aria-label]="'common_name' | translate"
                   [(ngModel)]="newEnvName">
               </nz-col>
               <nz-col [nzSpan]="10" nzOffset="1">
-                <input nz-input type="text" name="newEnvValue" [placeholder]="'common_value' | translate"
+                <input nz-input type="text" name="newEnvValue" [placeholder]="'common_value' | translate" [attr.aria-label]="'common_value' | translate"
                   [(ngModel)]="newEnvValue">
               </nz-col>
               <nz-col [nzSpan]="1" nzOffset="1">
-                <button nz-button nzType="primary"  (click)="clickAddEnv()">
-                  <i nz-icon nzType="plus" nzTheme="outline"></i>
+                <button nz-button nzType="primary"  aria-label="Add environment variable" (click)="clickAddEnv()">
+                  <i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i>
                 </button>
               </nz-col>
             </nz-row>
@@ -105,9 +105,9 @@
             <nz-row>
               <nz-col [nzSpan]="24">
                 <nz-form-item>
-                  <nz-form-label>{{'worker_model_post_cmd' | translate}}</nz-form-label>
+                  <nz-form-label nzFor="cds-field-pattern-post-cmd">{{'worker_model_post_cmd' | translate}}</nz-form-label>
                   <nz-form-control>
-                    <textarea nz-input name="post_cmd" [(ngModel)]="pattern.model.post_cmd"
+                    <textarea nz-input name="post_cmd" id="cds-field-pattern-post-cmd" [(ngModel)]="pattern.model.post_cmd"
                     [disabled]="loading"></textarea>
                   </nz-form-control>
                 </nz-form-item>
@@ -118,21 +118,21 @@
             <nz-col [nzSpan]="12">
               <button nz-button nzDanger nzType="primary" nz-popconfirm
                 nzPopconfirmTitle="Are you sure you want to delete this pattern ?" (nzOnConfirm)="clickDeleteButton()">
-                <i nz-icon nzType="delete" nzTheme="outline"></i>Delete
+                <i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>Delete
               </button>
             </nz-col>
             <nz-col [nzSpan]="12" class="alignRight">
               <button nz-button nzType="primary" [nzLoading]="loading"
                 [disabled]="!pattern.type || !pattern.name || !pattern.model.cmd"
                 (click)="clickSaveButton()">
-                <i nz-icon nzType="save" nzTheme="outline"></i>{{ (pattern.id ? 'btn_save' : 'btn_add') | translate }}
+                <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>{{ (pattern.id ? 'btn_save' : 'btn_add') | translate }}
               </button>
             </nz-col>
           </nz-row>
         </nz-col>
         <nz-col [nzSpan]="6" [nzOffset]="1">
           <div class="nzSegment">
-            <h2><i nz-icon nzType="book" nzTheme="outline"></i>Tips</h2>
+            <h2><i nz-icon nzType="book" nzTheme="outline" aria-hidden="true"></i>Tips</h2>
             <p>See Worker Model Pattern documentation:
               <a class="item" target="_blank" rel="noopener noreferrer"
                 href="#" [routerLink]="['/docs', 'docs', 'concepts', 'worker-model', 'patterns']">
diff --git a/ui/src/app/views/application/add/application.add.html b/ui/src/app/views/application/add/application.add.html
index f88ab224fa..150508909b 100644
--- a/ui/src/app/views/application/add/application.add.html
+++ b/ui/src/app/views/application/add/application.add.html
@@ -6,9 +6,9 @@ <h2>Create new application</h2>
         <nz-row>
           <nz-col [nzSpan]="16" [nzOffset]="4">
             <nz-form-item>
-              <nz-form-label [nzSpan]="6">Application name *</nz-form-label>
+              <nz-form-label [nzSpan]="6" nzFor="cds-field-appname">Application name *</nz-form-label>
               <nz-form-control>
-                <input nz-input type="text" name="appname" [(ngModel)]="selectedName">
+                <input nz-input type="text" id="cds-field-appname" name="appname" [(ngModel)]="selectedName">
               </nz-form-control>
             </nz-form-item>
             @if (appPatternError) {
@@ -16,9 +16,9 @@ <h2>Create new application</h2>
             }
 
             <nz-form-item>
-              <nz-form-label [nzSpan]="6">Description</nz-form-label>
+              <nz-form-label [nzSpan]="6" nzFor="cds-field-appdescription">Description</nz-form-label>
               <nz-form-control>
-                <textarea nz-input type="text" name="applicationdescription" [(ngModel)]="description"></textarea>
+                <textarea nz-input type="text" id="cds-field-appdescription" name="applicationdescription" [(ngModel)]="description"></textarea>
               </nz-form-control>
             </nz-form-item>
 
@@ -27,7 +27,7 @@ <h2>Create new application</h2>
               <nz-form-control>
                 @if (!fileTooLarge && img) {
                   <div>
-                    <img class="app-icon" [src]="img" alt="icon" />
+                    <img class="app-icon" [src]="img" alt="Preview of the selected application icon" />
                   </div>
                 }
                 <app-upload-button accept=".png,.jpg,.jpeg" [image]="true" (event)="fileEvent($event)">
@@ -53,9 +53,9 @@ <h2>Create new application</h2>
 
             @if (typeofCreation === 'clone') {
               <nz-form-item>
-                <nz-form-label>Application to clone</nz-form-label>
+                <nz-form-label nzFor="cds-field-appclone">Application to clone</nz-form-label>
                 <nz-form-control>
-                  <nz-select nzShowSearch name="appClone" [ngModel]="selectedApplicationName" (ngModelChange)="updateSelectedApplicationToClone($event)">
+                  <nz-select nzShowSearch id="cds-field-appclone" name="appClone" [ngModel]="selectedApplicationName" (ngModelChange)="updateSelectedApplicationToClone($event)">
                     @for (app of project.application_names; track app) {
                       <nz-option [nzValue]="app.name" [nzLabel]="app.name"></nz-option>
                     }
diff --git a/ui/src/app/views/application/show/admin/application.admin.html b/ui/src/app/views/application/show/admin/application.admin.html
index f55f0ee2bf..639e8703a6 100644
--- a/ui/src/app/views/application/show/admin/application.admin.html
+++ b/ui/src/app/views/application/show/admin/application.admin.html
@@ -2,9 +2,9 @@
   <nz-card nzTitle="Settings" class="coloredTitle">
     <form nz-form #applicationUpdateFrom="ngForm">
       <nz-form-item>
-        <nz-form-label [nzSpan]="3">Name</nz-form-label>
+        <nz-form-label [nzSpan]="3" nzFor="cds-field-appname">Name</nz-form-label>
         <nz-form-control>
-          <input nz-input type="text" name="formApplicationUpdateName" [(ngModel)]="newName" required
+          <input nz-input type="text" id="cds-field-appname" name="formApplicationUpdateName" [(ngModel)]="newName" required
             #formApplicationUpdateName="ngModel" pattern="[a-zA-Z0-9._-]*" [disabled]="loading">
           @if (formApplicationUpdateName.invalid && !formApplicationUpdateName.pristine) {
             <nz-alert nzType="error"
@@ -13,9 +13,9 @@
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
-        <nz-form-label [nzSpan]="3">Description</nz-form-label>
+        <nz-form-label [nzSpan]="3" nzFor="cds-field-appdescription">Description</nz-form-label>
         <nz-form-control>
-          <textarea nz-input class="app-description" type="text" name="formApplicationUpdateDescription"
+          <textarea nz-input class="app-description" type="text" id="cds-field-appdescription" name="formApplicationUpdateDescription"
             [(ngModel)]="application.description" required #formApplicationUpdateDescription="ngModel"
             [disabled]="loading">
           </textarea>
@@ -26,7 +26,7 @@
         <nz-form-control>
           <div>
             @if (application.icon) {
-              <img class="app-icon" [src]="application.icon" alt="application icon">
+              <img class="app-icon" [src]="application.icon" alt="Current application icon">
             }
           </div>
           <app-upload-button accept=".png,.jpg,.jpeg" [image]="true"
diff --git a/ui/src/app/views/application/show/admin/deployment/application.deployment.html b/ui/src/app/views/application/show/admin/deployment/application.deployment.html
index f64c1c63d8..26bb6df493 100644
--- a/ui/src/app/views/application/show/admin/deployment/application.deployment.html
+++ b/ui/src/app/views/application/show/admin/deployment/application.deployment.html
@@ -5,9 +5,9 @@ <h3>Link an new integration</h3>
   <nz-row>
     <nz-col [nzSpan]="8">
       <nz-form-item>
-        <nz-form-label>Integration/Deployment</nz-form-label>
+        <nz-form-label nzFor="cds-field-deployment-integration">Integration/Deployment</nz-form-label>
         <nz-form-control>
-          <nz-select nzShowSearch name="selectIntegration" [(ngModel)]="selectedIntegration" >
+          <nz-select nzShowSearch id="cds-field-deployment-integration" name="selectIntegration" [(ngModel)]="selectedIntegration" >
             @for (t of deploymentIntegrations; track t) {
               <nz-option [nzLabel]="t.name" [nzValue]="t"></nz-option>
             }
@@ -22,7 +22,7 @@ <h3>{{ 'integration_configuration' | translate }}</h3>
           <div>
             <div class="six wide field">
               <nz-form-item>
-                <nz-form-label [nzSpan]="6">
+                <nz-form-label [nzSpan]="6" nzFor="cds-field-new-{{k}}">
                   {{k}}
                   @if (selectedIntegration.model.additional_default_config[k].description) {
                     <i nz-icon nzType="info-circle" nzTheme="outline" nz-tooltip nzTooltipPlacement="right"
@@ -31,15 +31,15 @@ <h3>{{ 'integration_configuration' | translate }}</h3>
                 </nz-form-label>
                 <nz-form-control>
                   @if (selectedIntegration.model.additional_default_config[k].type === 'string') {
-                    <input nz-input name="{{k}}-value" type="text" [(ngModel)]="selectedIntegration.model.additional_default_config[k].value"
+                    <input nz-input id="cds-field-new-{{k}}" name="{{k}}-value" type="text" [(ngModel)]="selectedIntegration.model.additional_default_config[k].value"
                       >
                   }
                   @if (selectedIntegration.model.additional_default_config[k].type === 'password') {
-                    <input nz-input name="{{k}}-value" type="password" [(ngModel)]="selectedIntegration.model.additional_default_config[k].value"
+                    <input nz-input id="cds-field-new-{{k}}" name="{{k}}-value" type="password" [(ngModel)]="selectedIntegration.model.additional_default_config[k].value"
                       >
                   }
                   @if (selectedIntegration.model.additional_default_config[k].type === 'text') {
-                    <textarea nz-input name="{{k}}-value" rows="3" [(ngModel)]="selectedIntegration.model.additional_default_config[k].value"
+                    <textarea nz-input id="cds-field-new-{{k}}" name="{{k}}-value" rows="3" [(ngModel)]="selectedIntegration.model.additional_default_config[k].value"
                     ></textarea>
                   }
                 </nz-form-control>
@@ -77,7 +77,7 @@ <h3>Linked integration</h3>
                 <form nz-form>
                   @for (k of application.deployment_strategies[pf] | keys; track k) {
                     <nz-form-item>
-                      <nz-form-label [nzSpan]="6">
+                      <nz-form-label [nzSpan]="6" nzFor="cds-field-{{pf}}-{{k}}">
                         {{k}}
                         @if (application.deployment_strategies[pf][k].description) {
                           <i nz-icon nzType="info-circle" nzTheme="outline" nz-tooltip
@@ -86,15 +86,15 @@ <h3>Linked integration</h3>
                       </nz-form-label>
                       <nz-form-control>
                         @if (application.deployment_strategies[pf][k].type === 'string') {
-                          <input nz-input type="text" name="{{k}}-value" [(ngModel)]="application.deployment_strategies[pf][k].value"
+                          <input nz-input type="text" id="cds-field-{{pf}}-{{k}}" name="{{k}}-value" [(ngModel)]="application.deployment_strategies[pf][k].value"
                             >
                         }
                         @if (application.deployment_strategies[pf][k].type === 'password') {
-                          <input nz-input type="password" name="{{k}}-value" [(ngModel)]="application.deployment_strategies[pf][k].value"
+                          <input nz-input type="password" id="cds-field-{{pf}}-{{k}}" name="{{k}}-value" [(ngModel)]="application.deployment_strategies[pf][k].value"
                             >
                         }
                         @if (application.deployment_strategies[pf][k].type === 'text') {
-                          <textarea nz-input name="{{k}}-value" rows="3" [(ngModel)]="application.deployment_strategies[pf][k].value"
+                          <textarea nz-input id="cds-field-{{pf}}-{{k}}" name="{{k}}-value" rows="3" [(ngModel)]="application.deployment_strategies[pf][k].value"
                           ></textarea>
                         }
                       </nz-form-control>
diff --git a/ui/src/app/views/application/show/admin/repository/application.repo.html b/ui/src/app/views/application/show/admin/repository/application.repo.html
index 7e4c98c892..70a5377a7f 100644
--- a/ui/src/app/views/application/show/admin/repository/application.repo.html
+++ b/ui/src/app/views/application/show/admin/repository/application.repo.html
@@ -4,9 +4,9 @@
       <div nz-row>
         <div nz-col [nzSpan]="8">
           <nz-form-item>
-            <nz-form-label>Repository manager</nz-form-label>
+            <nz-form-label nzFor="cds-field-repomanager">Repository manager</nz-form-label>
             <nz-form-control>
-              <nz-select nzShowSearch name="repomanname" [(ngModel)]="selectedRepoManager" (ngModelChange)="updateListRepo(false)" [disabled]="loadingRepos || application.from_repository">
+              <nz-select nzShowSearch id="cds-field-repomanager" name="repomanname" [(ngModel)]="selectedRepoManager" (ngModelChange)="updateListRepo(false)" [disabled]="loadingRepos || application.from_repository">
                 @for (r of project?.vcs_servers; track r) {
                   <nz-option [nzValue]="r.name" [nzLabel]="r.name"></nz-option>
                 }
@@ -16,9 +16,9 @@
         </div>
         <div nz-col [nzSpan]="8">
           <nz-form-item>
-            <nz-form-label>Repository</nz-form-label>
+            <nz-form-label nzFor="cds-field-repository">Repository</nz-form-label>
             <nz-form-control>
-              <nz-select nzShowSearch name="repository" nzPlaceHolder="Choose a repository"  (nzOnSearch)="filterRepositories($event)"
+              <nz-select nzShowSearch id="cds-field-repository" name="repository" nzPlaceHolder="Choose a repository"  (nzOnSearch)="filterRepositories($event)"
                 [(ngModel)]="selectedRepo" [disabled]="loadingRepos || application.from_repository">
                 @for (r of reposFiltered; track r) {
                   <nz-option [nzValue]="r.fullname" [nzLabel]="r.fullname"></nz-option>
@@ -65,7 +65,7 @@
         <ng-template #repoTemp>
           <div nz-row class="alert">
             <div nz-col [nzSpan]="2">
-              <i nz-icon nzType="warning" nzTheme="fill" class="orange"></i>
+              <i nz-icon nzType="warning" nzTheme="fill" class="orange" aria-hidden="true"></i>
             </div>
             <div nz-col [nzSpan]="22">
               <div class="header">Missing configuration</div>
diff --git a/ui/src/app/views/application/show/application.html b/ui/src/app/views/application/show/application.html
index b99ce18cd4..04912e1e82 100644
--- a/ui/src/app/views/application/show/application.html
+++ b/ui/src/app/views/application/show/application.html
@@ -5,7 +5,7 @@
       <nz-tag class="labelFeature" [title]="'workflow_from_repository_btn' | translate"
         [nzColor]="application?.from_repository?'green':''" nz-popover nzPopoverTrigger="click"
         [nzPopoverContent]="popupFromRepository" nzPopoverPlacement="leftBottom"><i nz-icon nzType="code"
-      nzTheme="outline"></i>as code</nz-tag>
+      nzTheme="outline" aria-hidden="true"></i>as code</nz-tag>
       <ng-template #popupFromRepository>
         <div class="content infoPopup">
           @if (application && application.from_repository) {
diff --git a/ui/src/app/views/auth/ask-reset/ask-reset.html b/ui/src/app/views/auth/ask-reset/ask-reset.html
index a68b54805a..be7f560995 100644
--- a/ui/src/app/views/auth/ask-reset/ask-reset.html
+++ b/ui/src/app/views/auth/ask-reset/ask-reset.html
@@ -10,12 +10,12 @@ <h3>Forgotten password</h3>
     <form nz-form (ngSubmit)="askReset(askResetForm)" #askResetForm="ngForm">
       @if (!showSuccessMessage) {
         <nz-form-item class="field">
-          <nz-form-label>Mail address</nz-form-label>
-          <input nz-input type="email" name="email" ngModel required [disabled]="loading">
+          <nz-form-label nzFor="cds-field-email">Mail address</nz-form-label>
+          <input nz-input type="email" name="email" id="cds-field-email" ngModel required [disabled]="loading">
         </nz-form-item>
       }
       <div class="alignRight">
-        <a class="pointing" (click)="navigateToSignin()">{{ 'account_login_title' | translate }}</a>
+        <a class="pointing" appClickable (click)="navigateToSignin()">{{ 'account_login_title' | translate }}</a>
         &nbsp;&nbsp;&nbsp;
         @if (!showSuccessMessage) {
           <button nz-button nzType="primary" [disabled]="loading" [nzLoading]="loading"
diff --git a/ui/src/app/views/auth/callback/callback.html b/ui/src/app/views/auth/callback/callback.html
index 02070fe801..6275482787 100644
--- a/ui/src/app/views/auth/callback/callback.html
+++ b/ui/src/app/views/auth/callback/callback.html
@@ -8,15 +8,16 @@
           <nz-alert nzType="info" nzMessage="You can now copy this command to your terminal to finish login then close this tab."></nz-alert>
           <form nz-form>
             <nz-form-item class="field">
-              <nz-form-label>Command</nz-form-label>
+              <nz-form-label nzFor="cds-field-cmd">Command</nz-form-label>
               <nz-form-control>
                 <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
-                  <input nz-input type="text" value="{{cmd}}" [readonly]="true" />
+                  <input nz-input type="text" id="cds-field-cmd" value="{{cmd}}" [readonly]="true" />
                 </nz-input-group>
                 <ng-template #suffixIconButton>
                   <button nz-button nzSearch [title]="'common_copy_clipboard' | translate"
+                    [attr.aria-label]="'common_copy_clipboard' | translate"
                     ngxClipboard [cbContent]="cmd" (click)="confirmCopy()">
-                    <span nz-icon nzType="copy"></span></button>
+                    <span nz-icon nzType="copy" aria-hidden="true"></span></button>
                   </ng-template>
                 </nz-form-control>
               </nz-form-item>
@@ -28,9 +29,9 @@
             <nz-alert nzType="info" nzMessage="If you just generated the CDS configuration you can give an optional init token."></nz-alert>
             <form nz-form (ngSubmit)="signin(signinForm)" #signinForm="ngForm">
               <nz-form-item>
-                <nz-form-label>Initialization token</nz-form-label>
+                <nz-form-label nzFor="cds-field-init-token">Initialization token</nz-form-label>
                 <nz-form-control>
-                  <input nz-input type="password" name="init_token" ngModel required>
+                  <input nz-input type="password" name="init_token" id="cds-field-init-token" ngModel required>
                 </nz-form-control>
               </nz-form-item>
               <nz-form-item nzJustify="end">
diff --git a/ui/src/app/views/auth/reset/reset.html b/ui/src/app/views/auth/reset/reset.html
index aae52b7173..1fbabdd3a5 100644
--- a/ui/src/app/views/auth/reset/reset.html
+++ b/ui/src/app/views/auth/reset/reset.html
@@ -12,9 +12,9 @@ <h3>
   @if (!showSuccessMessage) {
     <form nz-form (ngSubmit)="resetPassword(loginForm)" #loginForm="ngForm">
       <nz-form-item>
-        <nz-form-label>New password</nz-form-label>
+        <nz-form-label nzFor="cds-field-password">New password</nz-form-label>
         <nz-form-control>
-          <input nz-input type="password" name="password" (keyup)="onChangeSignupPassword($event)" ngModel
+          <input nz-input type="password" name="password" id="cds-field-password" (keyup)="onChangeSignupPassword($event)" ngModel
             required
             [disabled]="loading">
           @if (!passwordError && passwordLevel !== null) {
diff --git a/ui/src/app/views/auth/signin/signin.html b/ui/src/app/views/auth/signin/signin.html
index 72dcdaa247..5f50fb0d1d 100644
--- a/ui/src/app/views/auth/signin/signin.html
+++ b/ui/src/app/views/auth/signin/signin.html
@@ -11,21 +11,21 @@
             <nz-tab nzTitle="Sign in" (click)="clickShowLocalSignin()">
               <form nz-form (ngSubmit)="signin(signinForm)" #signinForm="ngForm">
                 <nz-form-item>
-                  <nz-form-label [nzSpan]="4">Username*</nz-form-label>
+                  <nz-form-label [nzSpan]="4" nzFor="cds-field-signin-username">Username*</nz-form-label>
                   <nz-form-control>
-                    <input nz-input type="text" name="username" ngModel required>
+                    <input nz-input type="text" name="username" id="cds-field-signin-username" ngModel required>
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSpan]="4">Password*</nz-form-label>
+                  <nz-form-label [nzSpan]="4" nzFor="cds-field-signin-password">Password*</nz-form-label>
                   <nz-form-control>
-                    <input nz-input type="password" name="password" ngModel required>
+                    <input nz-input type="password" name="password" id="cds-field-signin-password" ngModel required>
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
                 </nz-form-item>
                 <nz-form-item nzJustify="end">
-                  <a class="pointing" (click)="navigateToAskReset()">Forgotten password</a>
+                  <a class="pointing" appClickable (click)="navigateToAskReset()">Forgotten password</a>
                   <button nz-button nzType="primary" type="submit">Sign in</button>
                 </nz-form-item>
               </form>
@@ -37,27 +37,27 @@
               @if (!showSuccessSignup) {
                 <form nz-form (ngSubmit)="signup(signupForm)" #signupForm="ngForm">
                   <nz-form-item>
-                    <nz-form-label [nzSpan]="4">Username*</nz-form-label>
+                    <nz-form-label [nzSpan]="4" nzFor="cds-field-signup-username">Username*</nz-form-label>
                     <nz-form-control>
-                      <input nz-input type="text" name="username" ngModel required>
+                      <input nz-input type="text" name="username" id="cds-field-signup-username" ngModel required>
                     </nz-form-control>
                   </nz-form-item>
                   <nz-form-item>
-                    <nz-form-label [nzSpan]="4">Fullname*</nz-form-label>
+                    <nz-form-label [nzSpan]="4" nzFor="cds-field-signup-fullname">Fullname*</nz-form-label>
                     <nz-form-control>
-                      <input nz-input type="text" name="fullname" ngModel required>
+                      <input nz-input type="text" name="fullname" id="cds-field-signup-fullname" ngModel required>
                     </nz-form-control>
                   </nz-form-item>
                   <nz-form-item>
-                    <nz-form-label [nzSpan]="4">Email*</nz-form-label>
+                    <nz-form-label [nzSpan]="4" nzFor="cds-field-signup-email">Email*</nz-form-label>
                     <nz-form-control>
-                      <input nz-input type="email" name="email" ngModel required>
+                      <input nz-input type="email" name="email" id="cds-field-signup-email" ngModel required>
                     </nz-form-control>
                   </nz-form-item>
                   <nz-form-item>
-                    <nz-form-label [nzSpan]="4">Password*</nz-form-label>
+                    <nz-form-label [nzSpan]="4" nzFor="cds-field-signup-password">Password*</nz-form-label>
                     <nz-form-control>
-                      <input nz-input type="password" name="password"
+                      <input nz-input type="password" name="password" id="cds-field-signup-password"
                         (keyup)="onChangeSignupPassword($event)" ngModel required>
                       @if (!passwordError && passwordLevel !== null) {
                         <nz-progress
@@ -87,22 +87,22 @@
             <nz-tab nzTitle="LDAP Sign in" (click)="clickShowLDAPSignin()">
               <form nz-form (ngSubmit)="ldapSignin(signinForm)" #signinForm="ngForm">
                 <nz-form-item>
-                  <nz-form-label [nzSpan]="4">LDAP Bind*</nz-form-label>
+                  <nz-form-label [nzSpan]="4" nzFor="cds-field-ldap-bind">LDAP Bind*</nz-form-label>
                   <nz-form-control>
-                    <input nz-input type="text" name="bind" ngModel required>
+                    <input nz-input type="text" name="bind" id="cds-field-ldap-bind" ngModel required>
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSpan]="4">Password*</nz-form-label>
+                  <nz-form-label [nzSpan]="4" nzFor="cds-field-ldap-password">Password*</nz-form-label>
                   <nz-form-control>
-                    <input nz-input type="password" name="password" ngModel required>
+                    <input nz-input type="password" name="password" id="cds-field-ldap-password" ngModel required>
                   </nz-form-control>
                 </nz-form-item>
                 @if (isFirstConnection) {
                   <nz-form-item>
-                    <nz-form-label [nzSpan]="4">Initialization token</nz-form-label>
+                    <nz-form-label [nzSpan]="4" nzFor="cds-field-ldap-init-token">Initialization token</nz-form-label>
                     <nz-form-control>
-                      <input nz-input type="password" name="init_token" ngModel required>
+                      <input nz-input type="password" name="init_token" id="cds-field-ldap-init-token" ngModel required>
                     </nz-form-control>
                   </nz-form-item>
                 }
@@ -121,7 +121,7 @@
               <button nz-button nzBlock nzType="primary"
                 [routerLink]="'/auth/ask-signin/'+driver.type"
                 [queryParams]="{redirect_uri: redirect, require_mfa: mfa}">
-                <i nz-icon nzType="{{driver.icon}}" nzTheme="outline"></i>
+                <i nz-icon nzType="{{driver.icon}}" nzTheme="outline" aria-hidden="true"></i>
                 {{ 'auth_button_signin_with' | translate: {consumer: driver.type} }}
               </button>
             }
diff --git a/ui/src/app/views/auth/verify/verify.html b/ui/src/app/views/auth/verify/verify.html
index e32ed6a3aa..6806710e92 100644
--- a/ui/src/app/views/auth/verify/verify.html
+++ b/ui/src/app/views/auth/verify/verify.html
@@ -9,9 +9,9 @@
           <nz-alert nzType="info" nzMessage="If you just generated the CDS configuration you can give an optional init token."></nz-alert>
           <form nz-form (ngSubmit)="verify(verifyForm)" #verifyForm="ngForm">
             <nz-form-item>
-              <nz-form-label>Initialization token</nz-form-label>
+              <nz-form-label nzFor="cds-field-init-token">Initialization token</nz-form-label>
               <nz-form-control>
-                <input nz-input type="password" name="init_token" ngModel required>
+                <input nz-input type="password" name="init_token" id="cds-field-init-token" ngModel required>
               </nz-form-control>
             </nz-form-item>
             <nz-form-item nzJustify="end">
diff --git a/ui/src/app/views/environment/add/environment.add.html b/ui/src/app/views/environment/add/environment.add.html
index bc4de1c2d6..d027504fac 100644
--- a/ui/src/app/views/environment/add/environment.add.html
+++ b/ui/src/app/views/environment/add/environment.add.html
@@ -6,9 +6,9 @@ <h2>Add an environment</h2>
         <nz-row>
           <nz-col [nzSpan]="24">
             <nz-form-item>
-              <nz-form-label>Environment name *</nz-form-label>
+              <nz-form-label nzFor="cds-field-envname">Environment name *</nz-form-label>
               <nz-form-control>
-                <input nz-input type="text" name="envname" [(ngModel)]="newEnvironment.name"
+                <input nz-input type="text" id="cds-field-envname" name="envname" [(ngModel)]="newEnvironment.name"
                   (ngModelChange)="checkPattern(newEnvironment.name)">
                 @if (envPatternError) {
                   <nz-alert nzType="error" nzMessage="Invalid environment name. Allowed pattern is: a-zA-Z0-9._-"></nz-alert>
diff --git a/ui/src/app/views/environment/show/advanced/environment.advanced.html b/ui/src/app/views/environment/show/advanced/environment.advanced.html
index dde422a9ee..dc0c5e6a8b 100644
--- a/ui/src/app/views/environment/show/advanced/environment.advanced.html
+++ b/ui/src/app/views/environment/show/advanced/environment.advanced.html
@@ -2,9 +2,9 @@
   <nz-card nzTitle="Settings" class="coloredTitle">
     <form nz-form #environmentUpdateFrom="ngForm">
       <nz-form-item>
-        <nz-form-label>Name</nz-form-label>
+        <nz-form-label nzFor="cds-field-envname">Name</nz-form-label>
         <nz-form-control>
-          <input nz-input type="text" name="formEnvironmentUpdateName" [(ngModel)]="environment.name" required
+          <input nz-input type="text" id="cds-field-envname" name="formEnvironmentUpdateName" [(ngModel)]="environment.name" required
             #formEnvironmentUpdateName="ngModel" pattern="[a-zA-Z0-9._-]*" [disabled]="loading">
           @if (formEnvironmentUpdateName.invalid && !formEnvironmentUpdateName.pristine) {
             <nz-alert nzType="error">
@@ -16,7 +16,7 @@
       <nz-form-item nzJustify="end">
         <button nz-button nzType="primary" (click)="cloneModalVisible = true" type="button" name="clonebtn"
           [nzLoading]="loading" [disabled]="loading"><i
-        class="copy icon"></i>Clone
+        class="copy icon" aria-hidden="true"></i>Clone
       </button>
       <button nz-button nzType="primary" [nzLoading]="loading" name="updateNameButton"
         (click)="onSubmitEnvironmentUpdate()"
@@ -41,9 +41,9 @@
   <div *nzModalContent>
     <form nz-form>
       <nz-form-item>
-        <nz-form-label>Name</nz-form-label>
+        <nz-form-label nzFor="cds-field-clonename">Name</nz-form-label>
         <nz-form-control>
-          <input nz-input type="text" name="name" placeholder="{{'environment_clone_placeholder' | translate}}"
+          <input nz-input type="text" id="cds-field-clonename" name="name" placeholder="{{'environment_clone_placeholder' | translate}}"
             [(ngModel)]="cloneName">
         </nz-form-control>
       </nz-form-item>
@@ -53,7 +53,7 @@
     <button nz-button (click)="cloneModalVisible = false">Cancel</button>
     <button nz-button nzType="primary" [disabled]="!cloneName"
       [nzLoading]="loading" (click)="cloneEnvironment()">
-      <i nz-icon nzType="copy" nzTheme="outline"></i>Clone
+      <i nz-icon nzType="copy" nzTheme="outline" aria-hidden="true"></i>Clone
     </button>
   </div>
 </nz-modal>
diff --git a/ui/src/app/views/environment/show/environment.show.html b/ui/src/app/views/environment/show/environment.show.html
index 090761482d..e25f836797 100644
--- a/ui/src/app/views/environment/show/environment.show.html
+++ b/ui/src/app/views/environment/show/environment.show.html
@@ -5,7 +5,7 @@
       <nz-tag class="labelFeature" [title]="'workflow_from_repository_btn' | translate"
         [nzColor]="environment?.from_repository?'green':''" nz-popover nzPopoverTrigger="click"
         [nzPopoverContent]="popupFromRepository" nzPopoverPlacement="leftBottom"><i nz-icon nzType="code"
-      nzTheme="outline"></i>as code</nz-tag>
+      nzTheme="outline" aria-hidden="true"></i>as code</nz-tag>
       <ng-template #popupFromRepository>
         <div class="content infoPopup">
           @if (environment.from_repository) {
diff --git a/ui/src/app/views/home/home.html b/ui/src/app/views/home/home.html
index 67cc165b01..4b1af4a545 100644
--- a/ui/src/app/views/home/home.html
+++ b/ui/src/app/views/home/home.html
@@ -39,7 +39,7 @@ <h4 nz-typography>Bookmarks</h4>
                 }
               </div>
               <button nz-button nzType="text" nzDanger (click)="deleteBookmark($event, b)"
-                title="Remove {{b.type}} from bookmarks"><i nz-icon nzType="delete" nzTheme="outline"></i></button>
+                title="Remove {{b.type}} from bookmarks" aria-label="Remove {{b.type}} from bookmarks"><i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i></button>
               </a>
             </nz-list-item>
           }
diff --git a/ui/src/app/views/navbar/navbar.html b/ui/src/app/views/navbar/navbar.html
index 29161c0d60..e007e06214 100644
--- a/ui/src/app/views/navbar/navbar.html
+++ b/ui/src/app/views/navbar/navbar.html
@@ -1,4 +1,4 @@
-<nz-header [class.not-dark]="!darkActive" class="navbar">
+<nz-header [class.not-dark]="!darkActive" class="navbar" role="navigation" aria-label="Main navigation">
   @if (!homeActive) {
     <a href="#" [routerLink]="['/']" class="logo">
       <img src="assets/images/cds.png" alt="CDS logo" title="{{'navbar_home' | translate}}" />
@@ -8,7 +8,7 @@
     <!-- PROJECTS -->
     <nz-select nzShowSearch nzPlaceHolder="Select a project..." [ngModel]="selectedProjectKey"
       (ngModelChange)="navigateToProject($event)" [class.not-dark]="!darkActive"
-      [nzDropdownMatchSelectWidth]="false">
+      [nzDropdownMatchSelectWidth]="false" aria-label="Select a project">
       @for (p of projects; track p) {
         <nz-option [nzLabel]="p.name + ' - ' + p.key" [nzValue]="p.key"></nz-option>
       }
@@ -19,7 +19,7 @@
     <!-- BOOKMARKS -->
     <button nz-dropdown [nzDropdownMenu]="bookmarksMenu" nz-button nzType="text" style="margin-right: 20px;">
       Bookmarks
-      <i nz-icon nzType="caret-down" nzTheme="fill"></i>
+      <i nz-icon nzType="caret-down" nzTheme="fill" aria-hidden="true"></i>
     </button>
     <nz-dropdown-menu #bookmarksMenu="nzDropdownMenu">
       <ul nz-menu>
@@ -54,11 +54,11 @@
   <div class="menu-right">
     <!-- Maintainer part -->
     @if (currentAuthSummary && currentAuthSummary.isMaintainer()) {
-      <button nz-dropdown [nzDropdownMenu]="adminMenu" nz-button nzType="text">
+      <button nz-dropdown [nzDropdownMenu]="adminMenu" nz-button nzType="text" aria-label="Administration">
         <div>
-          <i nz-icon nzType="tool" nzTheme="fill"></i>
+          <i nz-icon nzType="tool" nzTheme="fill" aria-hidden="true"></i>
         </div>
-        <i nz-icon nzType="caret-down" nzTheme="fill"></i>
+        <i nz-icon nzType="caret-down" nzTheme="fill" aria-hidden="true"></i>
       </button>
       <nz-dropdown-menu #adminMenu="nzDropdownMenu">
         <div nz-menu>
@@ -71,11 +71,11 @@
     }
 
     <!-- Settings -->
-    <button nz-dropdown [nzDropdownMenu]="settings" nz-button nzType="text">
+    <button nz-dropdown [nzDropdownMenu]="settings" nz-button nzType="text" aria-label="Settings">
       <div>
-        <i nz-icon nzType="setting" nzTheme="fill"></i>
+        <i nz-icon nzType="setting" nzTheme="fill" aria-hidden="true"></i>
       </div>
-      <i nz-icon nzType="caret-down" nzTheme="fill"></i>
+      <i nz-icon nzType="caret-down" nzTheme="fill" aria-hidden="true"></i>
     </button>
     <nz-dropdown-menu #settings="nzDropdownMenu">
       <div nz-menu>
@@ -132,12 +132,13 @@
         }
 
         <div nz-menu-item>
-          <nz-switch [ngModel]="darkActive" (ngModelChange)="changeTheme()"></nz-switch>Dark mode
+          <nz-switch [ngModel]="darkActive" (ngModelChange)="changeTheme()" aria-label="Dark mode"></nz-switch>Dark mode
         </div>
 
         @if (currentAuthSummary) {
           <div nz-menu-divider></div>
-          <a nz-menu-item (click)="clickLogout()">{{ 'navbar_disconnect' | translate }}</a>
+          <a nz-menu-item (click)="clickLogout()" role="button" tabindex="0"
+            (keydown.enter)="clickLogout()">{{ 'navbar_disconnect' | translate }}</a>
         }
       </div>
     </nz-dropdown-menu>
@@ -145,8 +146,8 @@
     <!-- HELP -->
     @if (help?.content?.length > 0) {
       <div nz-popover [nzPopoverContent]="popupTemplateHelp"
-        nzPopoverPlacement="bottomRight">
-        <i nz-icon nzType="phone" nzTheme="fill"></i>
+        nzPopoverPlacement="bottomRight" role="button" tabindex="0" aria-label="Help and contact">
+        <i nz-icon nzType="phone" nzTheme="fill" aria-hidden="true"></i>
         <ng-template #popupTemplateHelp>
           <markdown [data]="help.content"></markdown>
         </ng-template>
@@ -166,8 +167,9 @@
       }
       @if (currentAuthSummary.user.ring === 'ADMIN' && !currentAuthSummary.isAdmin()) {
         <nz-tag nzColor="#f50"
-          style="cursor: pointer;" (click)="mfaLogin()" title="Elevate to admin">
-          Maintainer <i nz-icon nzType="unlock" nzTheme="fill"></i>
+          style="cursor: pointer;" (click)="mfaLogin()" title="Elevate to admin"
+          role="button" tabindex="0" aria-label="Elevate to admin" (keydown.enter)="mfaLogin()">
+          Maintainer <i nz-icon nzType="unlock" nzTheme="fill" aria-hidden="true"></i>
         </nz-tag>
       }
       @if (currentAuthSummary.isAdmin()) {
diff --git a/ui/src/app/views/pipeline/add/pipeline.add.html b/ui/src/app/views/pipeline/add/pipeline.add.html
index 45fafeef9f..88166c24b3 100644
--- a/ui/src/app/views/pipeline/add/pipeline.add.html
+++ b/ui/src/app/views/pipeline/add/pipeline.add.html
@@ -24,7 +24,7 @@ <h2>Create a pipeline</h2>
             <nz-divider nzText="OR"></nz-divider>
           </nz-col>
           <nz-col nzOffset="2" nzSpan="20">
-            <codemirror name="pipToImport" [(ngModel)]="pipToImport" (keydown)="updated = true"
+            <codemirror name="pipToImport" aria-label="Pipeline as code YAML editor" [(ngModel)]="pipToImport" (keydown)="updated = true"
             [config]="codeMirrorConfig" #codeMirror></codemirror>
           </nz-col>
           <nz-col nzOffset="2" nzSpan="20" class="footer">
@@ -42,18 +42,18 @@ <h2>Create a pipeline</h2>
         <nz-row>
           <nz-col nzSpan="20" nzOffset="2">
             <nz-form-item>
-              <nz-form-label nzSpan="3">Pipeline name</nz-form-label>
+              <nz-form-label nzSpan="3" nzFor="cds-field-pipname">Pipeline name</nz-form-label>
               <nz-form-control>
-                <input nz-input type="text" name="pipname" [(ngModel)]="newPipeline.name">
+                <input nz-input type="text" id="cds-field-pipname" name="pipname" [(ngModel)]="newPipeline.name">
               </nz-form-control>
               @if (pipPatternError) {
                 <nz-alert nzType="error" nzMessage="Invalid pipeline name. Allowed pattern is: a-zA-Z0-9._-"></nz-alert>
               }
             </nz-form-item>
             <nz-form-item>
-              <nz-form-label nzSpan="3">Description</nz-form-label>
+              <nz-form-label nzSpan="3" nzFor="cds-field-pipdescription">Description</nz-form-label>
               <nz-form-control>
-                <textarea nz-input type="text" name="pipdescription" [(ngModel)]="newPipeline.description"></textarea>
+                <textarea nz-input type="text" id="cds-field-pipdescription" name="pipdescription" [(ngModel)]="newPipeline.description"></textarea>
               </nz-form-control>
             </nz-form-item>
           </nz-col>
diff --git a/ui/src/app/views/pipeline/show/admin/pipeline.admin.html b/ui/src/app/views/pipeline/show/admin/pipeline.admin.html
index 46d7e36bdf..020e321b23 100644
--- a/ui/src/app/views/pipeline/show/admin/pipeline.admin.html
+++ b/ui/src/app/views/pipeline/show/admin/pipeline.admin.html
@@ -2,15 +2,15 @@
     <nz-card nzTitle="Settings" class="coloredTitle">
         <form nz-form #pipelineUpdateFrom="ngForm" (ngSubmit)="updatePipeline()">
             <nz-form-item>
-                <nz-form-label>Pipeline name</nz-form-label>
+                <nz-form-label nzFor="cds-field-pipname">Pipeline name</nz-form-label>
                 <nz-form-control>
-                    <input nz-input type="text" [(ngModel)]="editablePipeline.name" name="pipname" [disabled]="loading">
+                    <input nz-input type="text" id="cds-field-pipname" [(ngModel)]="editablePipeline.name" name="pipname" [disabled]="loading">
                 </nz-form-control>
             </nz-form-item>
             <nz-form-item>
-                <nz-form-label>Description</nz-form-label>
+                <nz-form-label nzFor="cds-field-pipdesc">Description</nz-form-label>
                 <nz-form-control>
-                    <textarea nz-input type="text" [(ngModel)]="editablePipeline.description" name="pipdesc" [disabled]="loading"></textarea>
+                    <textarea nz-input type="text" id="cds-field-pipdesc" [(ngModel)]="editablePipeline.description" name="pipdesc" [disabled]="loading"></textarea>
                 </nz-form-control>
             </nz-form-item>
             <nz-form-item nzJustify="end">
diff --git a/ui/src/app/views/pipeline/show/ascode-editor/pipeline.ascode.editor.html b/ui/src/app/views/pipeline/show/ascode-editor/pipeline.ascode.editor.html
index 3651db29c9..cf33d8c31d 100644
--- a/ui/src/app/views/pipeline/show/ascode-editor/pipeline.ascode.editor.html
+++ b/ui/src/app/views/pipeline/show/ascode-editor/pipeline.ascode.editor.html
@@ -3,7 +3,7 @@
     @if (!exportedPip) {
       <nz-spin nzTip="Loading..."></nz-spin>
     }
-    <codemirror [(ngModel)]="exportedPip" (keydown)="updated = true; keyEvent($event)"
+    <codemirror aria-label="Pipeline as code YAML editor" [(ngModel)]="exportedPip" (keydown)="updated = true; keyEvent($event)"
       [config]="codeMirrorConfig" #codeMirror>
     </codemirror>
   </div>
@@ -13,17 +13,17 @@
         <nz-col nzSpan="24">
           <button nz-button nzType="primary" nzBlock name="previewbtn" [disabled]="pipeline.from_repository || loading || !project.permissions.writable" [nzLoading]="loading"
             (click)="preview()">
-            <span nz-icon nzType="eye" nzTheme="outline"></span> Preview
+            <span nz-icon nzType="eye" nzTheme="outline" aria-hidden="true"></span> Preview
           </button>
         </nz-col>
         <nz-col [nzSpan]="11">
           <button nz-button nzBlock nzType="primary" name="updatebtn" [disabled]="pipeline.from_repository || loading || !project.permissions.writable" [nzLoading]="loading" (click)="save()">
-            <span nz-icon nzType="save" nzTheme="outline"></span>Save
+            <span nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></span>Save
           </button>
         </nz-col>
         <nz-col [nzSpan]="11" [nzOffset]="2">
           <button nz-button nzBlock nzDanger nzType="primary" name="cancelbtn" [disabled]="loading" [nzLoading]="loading" (click)="cancel()">
-            <span nz-icon nzType="close" nzTheme="outline"></span>Cancel
+            <span nz-icon nzType="close" nzTheme="outline" aria-hidden="true"></span>Cancel
           </button>
         </nz-col>
       </nz-row>
diff --git a/ui/src/app/views/pipeline/show/pipeline.show.html b/ui/src/app/views/pipeline/show/pipeline.show.html
index 27edcb0128..1cab67e67c 100644
--- a/ui/src/app/views/pipeline/show/pipeline.show.html
+++ b/ui/src/app/views/pipeline/show/pipeline.show.html
@@ -5,7 +5,7 @@
       [remote]="remote" [branch]="branch">
       <nz-tag class="labelFeature" [title]="'workflow_from_repository_btn' | translate" [nzColor]="nzTagColor"
         nz-popover nzPopoverTrigger="click" [nzPopoverContent]="popupFromRepository"
-        nzPopoverPlacement="bottom"><i nz-icon nzType="code" nzTheme="outline"></i>as code</nz-tag>
+        nzPopoverPlacement="bottom"><i nz-icon nzType="code" nzTheme="outline" aria-hidden="true"></i>as code</nz-tag>
         <ng-template #popupFromRepository>
           <div class="content infoPopup">
             @if (pipeline?.workflow_ascode_holder) {
diff --git a/ui/src/app/views/pipeline/show/workflow/pipeline.workflow.html b/ui/src/app/views/pipeline/show/workflow/pipeline.workflow.html
index 5888e985e7..3c0856f975 100644
--- a/ui/src/app/views/pipeline/show/workflow/pipeline.workflow.html
+++ b/ui/src/app/views/pipeline/show/workflow/pipeline.workflow.html
@@ -4,15 +4,15 @@
     <nz-row>
       <nz-col [nzSpan]="24" class="center">
         <button nz-button nzType="primary" (click)="showAsCodeEditor()">
-          <span nz-icon nzType="code" nzTheme="outline"></span> Edit as code
+          <span nz-icon nzType="code" nzTheme="outline" aria-hidden="true"></span> Edit as code
           @if (previewMode) {
-            <span nz-icon nzType="warning" nzTheme="outline" class="orange" nz-tooltip
+            <span nz-icon nzType="warning" nzTheme="outline" class="orange" nz-tooltip role="img" aria-label="Your pipeline is in preview mode"
             nzTooltipTitle="Your pipeline is in preview mode"></span>
           }
         </button>
         @if (previewMode) {
           <button class="saveBtn" nz-button nzType="primary" (click)="savePreview()">
-            <span nz-icon nzType="save" nzTheme="outline"></span> Save
+            <span nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></span> Save
           </button>
         }
       </nz-col>
@@ -29,13 +29,13 @@
               [class.four]="pipeline.stages.length === 3" [class.five]="pipeline.stages.length === 4"
               [class.six]="pipeline.stages.length === 5" [class.seven]="pipeline.stages.length === 6">
               <div class="stageItem">
-                <a class="pointing" (click)="openEditModal(stage)"><i
-                class="setting icon"></i>{{stage.name}}</a>
-                <span class="move floatRight pointing">&harr;</span>
+                <a class="pointing" appClickable (click)="openEditModal(stage)"><i
+                class="setting icon" aria-hidden="true"></i>{{stage.name}}</a>
+                <span class="move floatRight pointing" aria-hidden="true">&harr;</span>
                 <ul>
                   @for (j of stage.jobs; track j; let i = $index) {
                     <li id="Job{{i}}">
-                      <div class="job nzSegment pointing" [class.inactive]="!j.enabled"
+                      <div class="job nzSegment pointing" appClickable [class.inactive]="!j.enabled"
                                      (click)="selectJob(j, stage)" [class.active]="selectedJob &&
                                         (!j.ref && j.pipeline_action_id === selectedJob?.pipeline_action_id) ||
                                         (j.ref && j.ref === selectedJob?.ref)">
@@ -45,7 +45,7 @@
                   }
                   @if (!readOnly) {
                     <li class="new job">
-                      <div class="new job nzSegment pointing" (click)="addJob(stage)">
+                      <div class="new job nzSegment pointing" appClickable (click)="addJob(stage)">
                         <span class="ellipsis" title="{{ 'step_add_job' | translate }}">
                           {{ 'step_add_job' | translate }}
                         </span>
@@ -64,7 +64,7 @@
               <div class="new stageItem">
                 <ul>
                   <li class="job">
-                    <div id="AddStageAndJob" class="new job nzSegment pointing"
+                    <div id="AddStageAndJob" class="new job nzSegment pointing" appClickable
                       (click)="addStageAndJob()">
                       <span class="ellipsis" title="{{ 'step_add_job' | translate }}">
                         {{ 'step_add_job' | translate }}
@@ -118,7 +118,7 @@
         (nzOnConfirm)="stageEvent('delete')"
         nzPopconfirmPlacement="topLeft"
         nz-button>
-        <i nz-icon nzType="delete" nzTheme="outline"></i>Delete
+        <i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>Delete
       </button>
     }
   </div>
diff --git a/ui/src/app/views/pipeline/show/workflow/stage/form/pipeline.stage.form.html b/ui/src/app/views/pipeline/show/workflow/stage/form/pipeline.stage.form.html
index 5922405653..72d1e440f6 100644
--- a/ui/src/app/views/pipeline/show/workflow/stage/form/pipeline.stage.form.html
+++ b/ui/src/app/views/pipeline/show/workflow/stage/form/pipeline.stage.form.html
@@ -1,10 +1,10 @@
 @if (project && pipeline && stage) {
   <form nz-form nzLayout="vertical">
     <nz-form-item>
-      <nz-form-label>Name:</nz-form-label>
+      <nz-form-label nzFor="cds-field-stagename">Name:</nz-form-label>
       <nz-form-control>
         @if (!readOnly) {
-          <input nz-input type="text" name="stageName" [(ngModel)]="stage.name" (keydown)="stage.hasChanged = true">
+          <input nz-input type="text" id="cds-field-stagename" name="stageName" [(ngModel)]="stage.name" (keydown)="stage.hasChanged = true">
         }
         @if (readOnly) {
           <span>{{stage.name}}</span>
diff --git a/ui/src/app/views/project/activity-bar/activity-bar.html b/ui/src/app/views/project/activity-bar/activity-bar.html
index 98ef8e9782..90b6845c7f 100644
--- a/ui/src/app/views/project/activity-bar/activity-bar.html
+++ b/ui/src/app/views/project/activity-bar/activity-bar.html
@@ -1,28 +1,28 @@
 @if (projectv1) {
   <a [routerLink]="['/project', project.key]" [class.active]="homeActive">
-    <button nz-button nzType="text" nzSize="large" nzBlock>
-      <span nz-icon nzType="home" nzTheme="outline"></span>
+    <button nz-button nzType="text" nzSize="large" nzBlock aria-label="Project home">
+      <span nz-icon nzType="home" nzTheme="outline" aria-hidden="true"></span>
     </button>
   </a>
 }
 <a [routerLink]="['/project', project.key, 'explore']" routerLinkActive="active" title="Explore">
-  <button nz-button nzType="text" nzSize="large" nzBlock (click)="clickActivity($event, 'explore')">
-    <span nz-icon nzType="folder" nzTheme="outline"></span>
+  <button nz-button nzType="text" nzSize="large" nzBlock aria-label="Explore" (click)="clickActivity($event, 'explore')">
+    <span nz-icon nzType="folder" nzTheme="outline" aria-hidden="true"></span>
   </button>
   @if (projectv1) {
     <div class="label">v2</div>
   }
 </a>
 <a [routerLink]="['/project', project.key, 'run']" routerLinkActive="active" title="Workflow V2 run list">
-  <button nz-button nzType="text" nzSize="large" nzBlock (click)="clickActivity($event, 'run')">
-    <span nz-icon nzType="play-circle" nzTheme="outline"></span>
+  <button nz-button nzType="text" nzSize="large" nzBlock aria-label="Workflow V2 run list" (click)="clickActivity($event, 'run')">
+    <span nz-icon nzType="play-circle" nzTheme="outline" aria-hidden="true"></span>
   </button>
   @if (projectv1) {
     <div class="label">v2</div>
   }
 </a>
 <a [routerLink]="['/project', project.key, 'settings']" routerLinkActive="active" title="Project settings">
-  <button nz-button nzType="text" nzSize="large" nzBlock>
-    <span nz-icon nzType="setting" nzTheme="outline"></span>
+  <button nz-button nzType="text" nzSize="large" nzBlock aria-label="Project settings">
+    <span nz-icon nzType="setting" nzTheme="outline" aria-hidden="true"></span>
   </button>
 </a>
\ No newline at end of file
diff --git a/ui/src/app/views/project/add/project.add.html b/ui/src/app/views/project/add/project.add.html
index e164cf4ec0..b5b464e35a 100644
--- a/ui/src/app/views/project/add/project.add.html
+++ b/ui/src/app/views/project/add/project.add.html
@@ -4,27 +4,27 @@
       <h2>Create a new project</h2>
       <form nz-form (ngSubmit)="createProject()" nzLayout="vertical">
         <nz-form-item>
-          <nz-form-label>Project name</nz-form-label>
+          <nz-form-label nzFor="cds-field-projectname">Project name</nz-form-label>
           <nz-form-control>
-            <input nz-input name="projectname" [(ngModel)]="project.name" (keyup)="generateKey($event.target.value)">
+            <input nz-input id="cds-field-projectname" name="projectname" [(ngModel)]="project.name" (keyup)="generateKey($event.target.value)">
           </nz-form-control>
         </nz-form-item>
         @if (nameError) {
           <nz-alert nzType="error" nzMessage="project name is mandatory"></nz-alert>
         }
         <nz-form-item>
-          <nz-form-label>Project unique key</nz-form-label>
+          <nz-form-label nzFor="cds-field-projectkey">Project unique key</nz-form-label>
           <nz-form-control>
-            <input nz-input name="projectkey" [(ngModel)]="project.key">
+            <input nz-input id="cds-field-projectkey" name="projectkey" [(ngModel)]="project.key">
           </nz-form-control>
         </nz-form-item>
         @if (keyError) {
           <nz-alert nzType="error" nzMessage="project unique key is mandatory and must be in upper case"></nz-alert>
         }
         <nz-form-item>
-          <nz-form-label>Description</nz-form-label>
+          <nz-form-label nzFor="cds-field-projectdescription">Description</nz-form-label>
           <nz-form-control>
-            <textarea nz-input name="projectdescription" [(ngModel)]="project.description"></textarea>
+            <textarea nz-input id="cds-field-projectdescription" name="projectdescription" [(ngModel)]="project.description"></textarea>
           </nz-form-control>
         </nz-form-item>
         <nz-form-item>
@@ -32,7 +32,7 @@ <h2>Create a new project</h2>
           <nz-form-control>
             @if (!fileTooLarge && project.icon) {
               <div>
-                <img class="proj-icon" [src]="project.icon" alt="icon"/>
+                <img class="proj-icon" [src]="project.icon" alt="Preview of the selected project icon"/>
               </div>
             }
             <app-upload-button accept=".png,.jpg,.jpeg" [image]="true" (event)="fileEvent($event)"></app-upload-button>
@@ -44,11 +44,11 @@ <h2>Create a new project</h2>
         <hr>
           <nz-alert nzType="info" nzMessage="{{'project_add_group_help' | translate}}"></nz-alert>
           <nz-form-item>
-            <nz-form-label>
-              {{ 'project_permission_form_wizard_title' | translate }} <a class="pointing" (click)="groupModalVisible = true">{{ 'project_permission_form_wizard_new' | translate }}</a>
+            <nz-form-label nzFor="cds-field-group">
+              {{ 'project_permission_form_wizard_title' | translate }} <a class="pointing" appClickable (click)="groupModalVisible = true">{{ 'project_permission_form_wizard_new' | translate }}</a>
             </nz-form-label>
             <nz-form-control>
-              <nz-select name="group" nzShowSearch [ngModel]="group?.id" (ngModelChange)="setGroup($event)">
+              <nz-select id="cds-field-group" name="group" nzShowSearch [ngModel]="group?.id" (ngModelChange)="setGroup($event)">
                 @for (g of groupList; track g) {
                   <nz-option [nzValue]="g.id" [nzLabel]="g.name"></nz-option>
                 }
@@ -58,7 +58,7 @@ <h2>Create a new project</h2>
           <nz-form-item nzJustify="end">
             <nz-form-control>
               <button nz-button nzType="primary" name="createproject" [nzLoading]="loading">
-                <i nz-icon nzType="save" nzTheme="outline"></i>Create
+                <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>Create
               </button>
             </nz-form-control>
           </nz-form-item>
@@ -70,9 +70,9 @@ <h2>Create a new project</h2>
     <div *nzModalContent>
       <form nz-form>
         <nz-form-item>
-          <nz-form-label>Group name</nz-form-label>
+          <nz-form-label nzFor="cds-field-groupname">Group name</nz-form-label>
           <nz-form-control>
-            <input nz-input type="text" name="groupname" [(ngModel)]="newGroup.name">
+            <input nz-input type="text" id="cds-field-groupname" name="groupname" [(ngModel)]="newGroup.name">
           </nz-form-control>
         </nz-form-item>
       </form>
diff --git a/ui/src/app/views/project/settings/advanced/repomanager/from/project.repomanager.form.html b/ui/src/app/views/project/settings/advanced/repomanager/from/project.repomanager.form.html
index 22e610ba0f..e18d05a93a 100644
--- a/ui/src/app/views/project/settings/advanced/repomanager/from/project.repomanager.form.html
+++ b/ui/src/app/views/project/settings/advanced/repomanager/from/project.repomanager.form.html
@@ -10,9 +10,9 @@
           <!-- Type selector: editable only on create, read-only on edit -->
           @if (!isEditing) {
             <nz-form-item nz-rows>
-              <nz-form-label [nzSm]="6">Type</nz-form-label>
+              <nz-form-label [nzSm]="6" nzFor="cds-field-vcs-type">Type</nz-form-label>
               <nz-form-control [nzSm]="14">
-                <nz-select [(ngModel)]="vcsProject.type" name="type" nzPlaceholder="Select a type">
+                <nz-select id="cds-field-vcs-type" [(ngModel)]="vcsProject.type" name="type" nzPlaceholder="Select a type">
                   @for (t of reposManagerList; track t) {
                     <nz-option [nzValue]="t" [nzLabel]="t"></nz-option>
                   }
@@ -22,28 +22,28 @@
           }
           @if (isEditing) {
             <nz-form-item nz-rows>
-              <nz-form-label [nzSm]="6">Type</nz-form-label>
+              <nz-form-label [nzSm]="6" nzFor="cds-field-vcs-type">Type</nz-form-label>
               <nz-form-control [nzSm]="14">
-                <input nz-input type="text" disabled [(ngModel)]="vcsProject.type" name="type">
+                <input nz-input type="text" id="cds-field-vcs-type" disabled [(ngModel)]="vcsProject.type" name="type">
               </nz-form-control>
             </nz-form-item>
           }
           <nz-form-item nz-rows>
-            <nz-form-label [nzSm]="6">Name</nz-form-label>
+            <nz-form-label [nzSm]="6" nzFor="cds-field-vcs-name">Name</nz-form-label>
             <nz-form-control [nzSm]="14">
-              <input nz-input type="text" [(ngModel)]="vcsProject.name" name="name">
+              <input nz-input type="text" id="cds-field-vcs-name" [(ngModel)]="vcsProject.name" name="name">
             </nz-form-control>
           </nz-form-item>
           <nz-form-item nz-rows>
-            <nz-form-label [nzSm]="6">Description</nz-form-label>
+            <nz-form-label [nzSm]="6" nzFor="cds-field-vcs-description">Description</nz-form-label>
             <nz-form-control [nzSm]="14">
-              <input nz-input type="text" [(ngModel)]="vcsProject.description" name="description">
+              <input nz-input type="text" id="cds-field-vcs-description" [(ngModel)]="vcsProject.description" name="description">
             </nz-form-control>
           </nz-form-item>
           <nz-form-item nz-rows>
-            <nz-form-label [nzSm]="6">URL</nz-form-label>
+            <nz-form-label [nzSm]="6" nzFor="cds-field-vcs-url">URL</nz-form-label>
             <nz-form-control [nzSm]="14">
-              <input nz-input type="text" [(ngModel)]="vcsProject.url" name="url">
+              <input nz-input type="text" id="cds-field-vcs-url" [(ngModel)]="vcsProject.url" name="url">
             </nz-form-control>
           </nz-form-item>
           <nz-form-item>
@@ -81,15 +81,15 @@ <h3>Authentication</h3>
               CDS needs to call VCS API (getting repos, commits, etc...). These fields are mandatory.
             </nz-form-item>
             <nz-form-item nz-rows>
-              <nz-form-label [nzSm]="6">Username</nz-form-label>
+              <nz-form-label [nzSm]="6" nzFor="cds-field-vcs-username">Username</nz-form-label>
               <nz-form-control [nzSm]="14">
-                <input nz-input type="text" [(ngModel)]="vcsProject.auth.username" name="username">
+                <input nz-input type="text" id="cds-field-vcs-username" [(ngModel)]="vcsProject.auth.username" name="username">
               </nz-form-control>
             </nz-form-item>
             <nz-form-item>
-              <nz-form-label [nzSm]="6">Token</nz-form-label>
+              <nz-form-label [nzSm]="6" nzFor="cds-field-vcs-token">Token</nz-form-label>
               <nz-form-control [nzSm]="14">
-                <input nz-input type="password" [(ngModel)]="vcsProject.auth.token" name="token">
+                <input nz-input type="password" id="cds-field-vcs-token" [(ngModel)]="vcsProject.auth.token" name="token">
               </nz-form-control>
             </nz-form-item>
             <nz-form-item>
@@ -100,9 +100,9 @@ <h3>Authentication</h3>
                 </app-parameter-value>
               </nz-form-control>
               @if (selectedPublicKey) {
-                <button nz-button [title]="'key_copy_public' | translate" ngxClipboard
+                <button nz-button [title]="'key_copy_public' | translate" [attr.aria-label]="'key_copy_public' | translate" ngxClipboard
                   [cbContent]="selectedPublicKey" (click)="clickCopyKey()">
-                  <i nz-icon nzType="copy" nzTheme="outline"></i>
+                  <i nz-icon nzType="copy" nzTheme="outline" aria-hidden="true"></i>
                 </button>
               }
             </nz-form-item>
@@ -113,27 +113,27 @@ <h3>Gerrit Authentication</h3>
               CDS needs to call Gerrit API. SSH Auth is used to access gerrit event stream. User and Token are used to add a review on Changes.
             </nz-form-item>
             <nz-form-item nz-rows>
-              <nz-form-label [nzSm]="6">SSH Username</nz-form-label>
+              <nz-form-label [nzSm]="6" nzFor="cds-field-vcs-sshusername">SSH Username</nz-form-label>
               <nz-form-control [nzSm]="14">
-                <input nz-input type="text" [(ngModel)]="vcsProject.auth.sshUsername" name="sshUsername">
+                <input nz-input type="text" id="cds-field-vcs-sshusername" [(ngModel)]="vcsProject.auth.sshUsername" name="sshUsername">
               </nz-form-control>
             </nz-form-item>
             <nz-form-item>
-              <nz-form-label [nzSm]="6">SSH Port</nz-form-label>
+              <nz-form-label [nzSm]="6" nzFor="cds-field-vcs-sshport">SSH Port</nz-form-label>
               <nz-form-control [nzSm]="14">
-                <input nz-input type="text" [(ngModel)]="vcsProject.auth.sshPort" name="sshPort">
+                <input nz-input type="text" id="cds-field-vcs-sshport" [(ngModel)]="vcsProject.auth.sshPort" name="sshPort">
               </nz-form-control>
             </nz-form-item>
             <nz-form-item>
-              <nz-form-label [nzSm]="6">Reviewer User</nz-form-label>
+              <nz-form-label [nzSm]="6" nzFor="cds-field-vcs-revieweruser">Reviewer User</nz-form-label>
               <nz-form-control [nzSm]="14">
-                <input nz-input type="text" [(ngModel)]="vcsProject.auth.username" name="username">
+                <input nz-input type="text" id="cds-field-vcs-revieweruser" [(ngModel)]="vcsProject.auth.username" name="username">
               </nz-form-control>
             </nz-form-item>
             <nz-form-item>
-              <nz-form-label [nzSm]="6">Reviewer Token</nz-form-label>
+              <nz-form-label [nzSm]="6" nzFor="cds-field-vcs-reviewertoken">Reviewer Token</nz-form-label>
               <nz-form-control [nzSm]="14">
-                <input nz-input type="password" [(ngModel)]="vcsProject.auth.token" name="token">
+                <input nz-input type="password" id="cds-field-vcs-reviewertoken" [(ngModel)]="vcsProject.auth.token" name="token">
               </nz-form-control>
             </nz-form-item>
           }
diff --git a/ui/src/app/views/project/settings/advanced/repomanager/list/project.repomanager.list.html b/ui/src/app/views/project/settings/advanced/repomanager/list/project.repomanager.list.html
index d7cd867120..e7af54d789 100644
--- a/ui/src/app/views/project/settings/advanced/repomanager/list/project.repomanager.list.html
+++ b/ui/src/app/views/project/settings/advanced/repomanager/list/project.repomanager.list.html
@@ -2,7 +2,7 @@
   <div class="list-header">
     @if (canAdd) {
       <button nz-button nzType="primary" (click)="openCreate()">
-        <i nz-icon nzType="plus"></i> Add
+        <i nz-icon nzType="plus" aria-hidden="true"></i> Add
       </button>
     }
   </div>
@@ -27,8 +27,8 @@
           <td>{{r.type}}</td>
           <td>{{r.url}}</td>
           <td class="rightAlign">
-            <button nz-button nzType="text" (click)="openEdit(r)" title="Edit">
-              <i nz-icon nzType="edit"></i>
+            <button nz-button nzType="text" (click)="openEdit(r)" title="Edit" aria-label="Edit repository manager {{r.name}}">
+              <i nz-icon nzType="edit" aria-hidden="true"></i>
             </button>
           </td>
         </tr>
diff --git a/ui/src/app/views/project/settings/concurrency/concurrencies.html b/ui/src/app/views/project/settings/concurrency/concurrencies.html
index 73b193738a..735440b519 100644
--- a/ui/src/app/views/project/settings/concurrency/concurrencies.html
+++ b/ui/src/app/views/project/settings/concurrency/concurrencies.html
@@ -15,8 +15,8 @@ <h3>Concurrencies list:</h3>
     <tbody>
       @for (data of table.data; track data) {
         <tr>
-          <td (click)="selectConcurrency(data)">{{data.name}}</td>
-          <td (click)="selectConcurrency(data)">{{data.description}}</td>
+          <td appClickable (click)="selectConcurrency(data)">{{data.name}}</td>
+          <td appClickable (click)="selectConcurrency(data)">{{data.description}}</td>
           <td>
             <button nz-button nzDanger nzType="primary" [nzLoading]="loading.action" nz-popconfirm
               nzPopconfirmTitle="Are you sure you want to delete this variableset ? it will remove all items"
diff --git a/ui/src/app/views/project/settings/concurrency/concurrency.form.component.html b/ui/src/app/views/project/settings/concurrency/concurrency.form.component.html
index 08f1125211..55ac1eadfd 100644
--- a/ui/src/app/views/project/settings/concurrency/concurrency.form.component.html
+++ b/ui/src/app/views/project/settings/concurrency/concurrency.form.component.html
@@ -3,11 +3,11 @@
     <nz-row>
       <nz-col [nzSpan]="10">
         <nz-form-item>
-          <nz-form-label>
+          <nz-form-label nzFor="cds-field-concurrency-name">
             Name
           </nz-form-label>
           <nz-form-control>
-            <input nz-input name="name" id="name" [(ngModel)]="concurrency.name">
+            <input nz-input name="name" id="cds-field-concurrency-name" [(ngModel)]="concurrency.name">
             @if (errorName) {
               <nz-alert nzType="warning" nzMessage="Name cannot be empty and must match pattern `^[a-zA-Z0-9_-]{1,}$`"></nz-alert>
             }
@@ -16,11 +16,11 @@
       </nz-col>
       <nz-col [nzSpan]="13" [nzOffset]="1">
         <nz-form-item>
-          <nz-form-label>
+          <nz-form-label nzFor="cds-field-concurrency-description">
             Description
           </nz-form-label>
           <nz-form-control>
-            <input nz-input name="description" id="description" [(ngModel)]="concurrency.description">
+            <input nz-input name="description" id="cds-field-concurrency-description" [(ngModel)]="concurrency.description">
             @if (errorDescription) {
               <nz-alert nzType="warning" nzMessage="Description cannot be empty"></nz-alert>
             }
@@ -31,9 +31,9 @@
     <nz-row>
       <nz-col [nzSpan]="3">
         <nz-form-item>
-          <nz-form-label>Order</nz-form-label>
+          <nz-form-label nzFor="cds-field-concurrency-order">Order</nz-form-label>
           <nz-form-control>
-            <nz-select [(ngModel)]="concurrency.order" name="order">
+            <nz-select id="cds-field-concurrency-order" [(ngModel)]="concurrency.order" name="order">
               @for (o of orders; track o) {
                 <nz-option [nzLabel]="o" [nzValue]="o"></nz-option>
               }
@@ -46,9 +46,9 @@
       </nz-col>
       <nz-col [nzSpan]="3" [nzOffset]="1">
         <nz-form-item>
-          <nz-form-label [nzSpan]="6">Pool</nz-form-label>
+          <nz-form-label [nzSpan]="6" nzFor="cds-field-concurrency-pool">Pool</nz-form-label>
           <nz-form-control>
-            <input nz-input type="number" name="pool" id="pool" [(ngModel)]="concurrency.pool">
+            <input nz-input type="number" name="pool" id="cds-field-concurrency-pool" [(ngModel)]="concurrency.pool">
             @if (errorPool) {
               <nz-alert nzType="warning" nzMessage="Pool must be greater than 0"></nz-alert>
             }
@@ -65,9 +65,9 @@
       </nz-col>
       <nz-col [nzSpan]="9">
         <nz-form-item>
-          <nz-form-label [nzSpan]="6">If</nz-form-label>
+          <nz-form-label [nzSpan]="6" nzFor="cds-field-concurrency-if">If</nz-form-label>
           <nz-form-control>
-            <input nz-input name="if" id="if" [(ngModel)]="concurrency.if">
+            <input nz-input name="if" id="cds-field-concurrency-if" [(ngModel)]="concurrency.if">
           </nz-form-control>
         </nz-form-item>
       </nz-col>
@@ -81,18 +81,18 @@
 @if (verticalOrientation) {
   <form nz-form (ngSubmit)="createConcurrency()">
     <nz-form-item>
-      <nz-form-label [nzSpan]="4">Description</nz-form-label>
+      <nz-form-label [nzSpan]="4" nzFor="cds-field-concurrency-v-description">Description</nz-form-label>
       <nz-form-control>
-        <input nz-input name="description" id="description" [(ngModel)]="concurrency.description">
+        <input nz-input name="description" id="cds-field-concurrency-v-description" [(ngModel)]="concurrency.description">
         @if (errorDescription) {
           <nz-alert nzType="warning" nzMessage="Description cannot be empty"></nz-alert>
         }
       </nz-form-control>
     </nz-form-item>
     <nz-form-item>
-      <nz-form-label [nzSpan]="4">Order</nz-form-label>
+      <nz-form-label [nzSpan]="4" nzFor="cds-field-concurrency-v-order">Order</nz-form-label>
       <nz-form-control>
-        <nz-select [(ngModel)]="concurrency.order" name="order">
+        <nz-select id="cds-field-concurrency-v-order" [(ngModel)]="concurrency.order" name="order">
           @for (o of orders; track o) {
             <nz-option [nzLabel]="o" [nzValue]="o"></nz-option>
           }
@@ -103,18 +103,18 @@
       </nz-form-control>
     </nz-form-item>
     <nz-form-item>
-      <nz-form-label [nzSpan]="4">Pool</nz-form-label>
+      <nz-form-label [nzSpan]="4" nzFor="cds-field-concurrency-v-pool">Pool</nz-form-label>
       <nz-form-control>
-        <input nz-input type="number" name="pool" id="pool" [(ngModel)]="concurrency.pool">
+        <input nz-input type="number" name="pool" id="cds-field-concurrency-v-pool" [(ngModel)]="concurrency.pool">
         @if (errorPool) {
           <nz-alert nzType="warning" nzMessage="Pool must be greater than 0"></nz-alert>
         }
       </nz-form-control>
     </nz-form-item>
     <nz-form-item>
-      <nz-form-label [nzSpan]="4">If</nz-form-label>
+      <nz-form-label [nzSpan]="4" nzFor="cds-field-concurrency-v-if">If</nz-form-label>
       <nz-form-control>
-        <input nz-input name="if" id="if" [(ngModel)]="concurrency.if">
+        <input nz-input name="if" id="cds-field-concurrency-v-if" [(ngModel)]="concurrency.if">
       </nz-form-control>
     </nz-form-item>
     <nz-form-item>
diff --git a/ui/src/app/views/project/settings/integrations/project.integrations.html b/ui/src/app/views/project/settings/integrations/project.integrations.html
index 6a9f31bdc9..9092d2f467 100644
--- a/ui/src/app/views/project/settings/integrations/project.integrations.html
+++ b/ui/src/app/views/project/settings/integrations/project.integrations.html
@@ -2,9 +2,9 @@
   <h3>Create an integration:</h3>
   <form nz-form>
     <nz-form-item>
-      <nz-form-label>Model</nz-form-label>
+      <nz-form-label nzFor="cds-field-integration-model">Model</nz-form-label>
       <nz-form-control>
-        <nz-select nzShowSearch name="model" [ngModel]="newIntegration.model" (ngModelChange)="updateConfig($event)">
+        <nz-select nzShowSearch id="cds-field-integration-model" name="model" [ngModel]="newIntegration.model" (ngModelChange)="updateConfig($event)">
           @for (m of models; track m) {
             <nz-option [nzLabel]="m.name" nzCustomContent [nzValue]="m">
               <div>{{ m.name }}</div>
@@ -27,14 +27,14 @@ <h3>Create an integration:</h3>
     </nz-form-item>
     @if (newIntegration.model) {
       <nz-form-item>
-        <nz-form-label [nzSpan]="5">Integration name</nz-form-label>
+        <nz-form-label [nzSpan]="5" nzFor="cds-field-integration-name">Integration name</nz-form-label>
         <nz-form-control>
-          <input nz-input name="name" type="text" [(ngModel)]="newIntegration.name">
+          <input nz-input id="cds-field-integration-name" name="name" type="text" [(ngModel)]="newIntegration.name">
         </nz-form-control>
       </nz-form-item>
       @for (k of newIntegration.model.default_config | keys; track k) {
         <nz-form-item>
-          <nz-form-label [nzSpan]="5">
+          <nz-form-label [nzSpan]="5" nzFor="cds-field-new-{{k}}">
             {{k}}
             @if (newIntegration.config[k].description) {
               <span nz-tooltip
@@ -49,15 +49,15 @@ <h3>Create an integration:</h3>
               [(ngModel)]="newIntegration.config[k].value"></label>
             }
             @if (newIntegration.config[k].type === 'string') {
-              <input nz-input type="text" name="{{k}}" [(ngModel)]="newIntegration.config[k].value"
+              <input nz-input type="text" id="cds-field-new-{{k}}" name="{{k}}" [(ngModel)]="newIntegration.config[k].value"
                 >
             }
             @if (newIntegration.config[k].type === 'text') {
-              <codemirror [(ngModel)]="newIntegration.config[k].value" [config]="codeMirrorConfig" #codeMirror>
+              <codemirror aria-label="{{k}}" [(ngModel)]="newIntegration.config[k].value" [config]="codeMirrorConfig" #codeMirror>
               </codemirror>
             }
             @if (newIntegration.config[k].type === 'password') {
-              <input nz-input type="password" name="{{k}}" [(ngModel)]="newIntegration.config[k].value"
+              <input nz-input type="password" id="cds-field-new-{{k}}" name="{{k}}" [(ngModel)]="newIntegration.config[k].value"
                 >
             }
           </nz-form-control>
@@ -93,8 +93,8 @@ <h3>Integrations list:</h3>
           <td>
             {{ p.name }}
             @if (p.model.public) {
-              <span nz-tooltip nzTooltipTitle="Public integration" nzTooltipPlacement="top">
-                <i nz-icon nzType="check-circle" nzTheme="outline" class="green"></i>
+              <span nz-tooltip nzTooltipTitle="Public integration" nzTooltipPlacement="top" role="img" aria-label="Public integration">
+                <i nz-icon nzType="check-circle" nzTheme="outline" class="green" aria-hidden="true"></i>
               </span>
             }
           </td>
@@ -105,7 +105,7 @@ <h3>Integrations list:</h3>
             <form nz-form>
               @for (k of p.config | keys; track k) {
                 <nz-form-item>
-                  <nz-form-label [nzSpan]="12">
+                  <nz-form-label [nzSpan]="12" nzFor="cds-field-{{p.name}}-{{k}}">
                     {{k}}
                     @if (p.config[k].description) {
                       <span nz-tooltip [nzTooltipTitle]="p.config[k].description"
@@ -117,38 +117,38 @@ <h3>Integrations list:</h3>
                   <nz-form-control>
                     @if (p.config[k].static) {
                       @if (p.config[k].type !== 'password') {
-                        <input nz-input type="text" name="{{k}}-value"
+                        <input nz-input type="text" id="cds-field-{{p.name}}-{{k}}" name="{{k}}-value"
                           [(ngModel)]="p.config[k].value" readonly>
                       }
                       @if (p.config[k].type === 'password') {
-                        <input nz-input type="password" name="{{k}}-value"
+                        <input nz-input type="password" id="cds-field-{{p.name}}-{{k}}" name="{{k}}-value"
                           [(ngModel)]="p.config[k].value" readonly>
                       }
                     }
                     @if (!p.config[k].static) {
                       @if (p.config[k].type === 'boolean') {
-                        <input type="checkbox" name="{{k}}-value" [(ngModel)]="p.config[k].value"
+                        <input type="checkbox" id="cds-field-{{p.name}}-{{k}}" name="{{k}}-value" [(ngModel)]="p.config[k].value"
                           (keydown)="p.hasChanged = true"
                           [readonly]="p.model.public" />
                       }
                       @if (p.config[k].type === 'string') {
-                        <input nz-input type="text" name="{{k}}-value" [(ngModel)]="p.config[k].value"
+                        <input nz-input type="text" id="cds-field-{{p.name}}-{{k}}" name="{{k}}-value" [(ngModel)]="p.config[k].value"
                           (keydown)="p.hasChanged = true" [readonly]="p.model.public">
                       }
                       @if (p.config[k].type === 'text') {
                         @if (p.model.public) {
-                          <codemirror name="{{k}}-value" [(ngModel)]="p.config[k].value"
+                          <codemirror aria-label="{{k}}" name="{{k}}-value" [(ngModel)]="p.config[k].value"
                             [config]="codeMirrorConfigRO" #codeMirror (keydown)="p.hasChanged = true">
                           </codemirror>
                         }
                         @if (!p.model.public) {
-                          <codemirror name="{{k}}-value" [(ngModel)]="p.config[k].value"
+                          <codemirror aria-label="{{k}}" name="{{k}}-value" [(ngModel)]="p.config[k].value"
                             [config]="codeMirrorConfig" #codeMirror (keydown)="p.hasChanged = true">
                           </codemirror>
                         }
                       }
                       @if (p.config[k].type === 'password') {
-                        <input nz-input type="password" name="{{k}}-value" [(ngModel)]="p.config[k].value"
+                        <input nz-input type="password" id="cds-field-{{p.name}}-{{k}}" name="{{k}}-value" [(ngModel)]="p.config[k].value"
                           (keydown)="p.hasChanged = true" [readonly]="p.model.public">
                       }
                     }
diff --git a/ui/src/app/views/project/settings/keys/project.keys.html b/ui/src/app/views/project/settings/keys/project.keys.html
index 5ebbfed737..93ef449b6b 100644
--- a/ui/src/app/views/project/settings/keys/project.keys.html
+++ b/ui/src/app/views/project/settings/keys/project.keys.html
@@ -30,10 +30,10 @@ <h3>Keys list:</h3>
         </td>
         <td nzBreakWord>
           @if (k.type === 'ssh') {
-            <input nz-input readonly [ngModel]="k.public">
+            <input nz-input readonly aria-label="Public key of {{k.name}}" [ngModel]="k.public">
           }
           @if (k.type === 'pgp') {
-            <textarea nz-input [ngModel]="k.public" readonly rows="29"></textarea>
+            <textarea nz-input aria-label="Public key of {{k.name}}" [ngModel]="k.public" readonly rows="29"></textarea>
           }
         </td>
         @if (project.permissions.writable) {
diff --git a/ui/src/app/views/project/settings/retention/retention.component.ts b/ui/src/app/views/project/settings/retention/retention.component.ts
index e5bd346e07..ab2fc5dc25 100644
--- a/ui/src/app/views/project/settings/retention/retention.component.ts
+++ b/ui/src/app/views/project/settings/retention/retention.component.ts
@@ -74,7 +74,8 @@ export class ProjectRunRetentionComponent implements OnInit {
     ngOnInit(): void {
         this.editorOption = {
             language: 'yaml',
-            minimap: { enabled: false }
+            minimap: { enabled: false },
+            ariaLabel: 'Workflow run retention rules editor'
         };
         this._v2ProjectService.getRetentionSchema(this.project.key).pipe(first()).subscribe(j => {
             this.jsonSchema = j;
diff --git a/ui/src/app/views/project/settings/retention/retention.html b/ui/src/app/views/project/settings/retention/retention.html
index cdb6af32cf..ce8674beca 100644
--- a/ui/src/app/views/project/settings/retention/retention.html
+++ b/ui/src/app/views/project/settings/retention/retention.html
@@ -26,7 +26,7 @@ <h4>Report ID: {{retention.last_report.id}}</h4>
   <ng-container *nzModalContent>
     <div class="modalHeight">
       @if (!dryRunReport) {
-        <i nz-icon nzType="loading" zTheme="outline"></i>  Dry run ongoing
+        <i nz-icon nzType="loading" zTheme="outline" aria-hidden="true"></i>  Dry run ongoing
       }
       @if (dryRunReport) {
         <app-project-run-retention-report [report]="dryRunReport"></app-project-run-retention-report>
diff --git a/ui/src/app/views/project/settings/retention/retention.report.component.ts b/ui/src/app/views/project/settings/retention/retention.report.component.ts
index 7b9a3e08ba..30aef6409d 100644
--- a/ui/src/app/views/project/settings/retention/retention.report.component.ts
+++ b/ui/src/app/views/project/settings/retention/retention.report.component.ts
@@ -23,7 +23,8 @@ export class ProjectRunRetentionReportComponent implements OnInit {
     constructor(private _cd: ChangeDetectorRef) {
         this.editorOption = {
             language: 'yaml',
-            minimap: { enabled: false }
+            minimap: { enabled: false },
+            ariaLabel: 'Run retention report'
         };
     }
 
diff --git a/ui/src/app/views/project/settings/retention/retention.report.html b/ui/src/app/views/project/settings/retention/retention.report.html
index d34ff80f89..7a7cf51cf3 100644
--- a/ui/src/app/views/project/settings/retention/retention.report.html
+++ b/ui/src/app/views/project/settings/retention/retention.report.html
@@ -5,7 +5,7 @@
       (ngModelChange)="onEditorChange($event)"></nz-code-editor>
     }
     @if (!report?.workflows) {
-      <i nz-icon nzType="stop" nzTheme="outline"></i>No workflow runs have been deleted
+      <i nz-icon nzType="stop" nzTheme="outline" aria-hidden="true"></i>No workflow runs have been deleted
     }
   </div>
 }
diff --git a/ui/src/app/views/project/settings/variablesets/items/variableset.item.html b/ui/src/app/views/project/settings/variablesets/items/variableset.item.html
index 62f30157d8..e0eff1749a 100644
--- a/ui/src/app/views/project/settings/variablesets/items/variableset.item.html
+++ b/ui/src/app/views/project/settings/variablesets/items/variableset.item.html
@@ -3,11 +3,11 @@ <h2> Create a new variableset item</h2>
   <nz-row>
     <nz-col [nzSpan]="16">
       <nz-form-item>
-        <nz-form-label [nzSpan]="3">
+        <nz-form-label [nzSpan]="3" nzFor="cds-field-itemname">
           Item name
         </nz-form-label>
         <nz-form-control>
-          <input nz-input name="name" id="itemname" [(ngModel)]="newItem.name">
+          <input nz-input name="name" id="cds-field-itemname" [(ngModel)]="newItem.name">
           @if (errorItemName) {
             <nz-alert nzType="warning" nzMessage="Name must respect pattern ^[a-zA-Z0-9_-]{1,}$"></nz-alert>
           }
@@ -18,11 +18,11 @@ <h2> Create a new variableset item</h2>
   <nz-row>
     <nz-col [nzSpan]="16">
       <nz-form-item>
-        <nz-form-label [nzSpan]="3">
+        <nz-form-label [nzSpan]="3" nzFor="cds-field-itemtype">
           Item Type
         </nz-form-label>
         <nz-form-control>
-          <nz-select [(ngModel)]="newItem.type" name="type">
+          <nz-select id="cds-field-itemtype" [(ngModel)]="newItem.type" name="type">
             <nz-option nzValue="string" nzLabel="string"></nz-option>
             <nz-option nzValue="secret" nzLabel="secret"></nz-option>
           </nz-select>
@@ -33,15 +33,15 @@ <h2> Create a new variableset item</h2>
   <nz-row>
     <nz-col [nzSpan]="16">
       <nz-form-item>
-        <nz-form-label [nzSpan]="3">
+        <nz-form-label [nzSpan]="3" nzFor="cds-field-itemvalue">
           Item value
         </nz-form-label>
         <nz-form-control>
           @if (newItem.type === 'secret') {
-            <input nz-input type="password" name="value" [(ngModel)]="newItem.value">
+            <input nz-input type="password" id="cds-field-itemvalue" name="value" [(ngModel)]="newItem.value">
           }
           @if (newItem.type !== 'secret') {
-            <textarea nz-input  name="value" id="itemvalue" [(ngModel)]="newItem.value"></textarea>
+            <textarea nz-input  name="value" id="cds-field-itemvalue" [(ngModel)]="newItem.value"></textarea>
           }
           @if (errorItemValue) {
             <nz-alert nzType="warning" nzMessage="Value must not be empty"></nz-alert>
@@ -74,7 +74,7 @@ <h2> List of existing variablesets</h2>
         <td>{{data.name}}</td>
         <td>{{data.type}}</td>
         <td>
-          <textarea nz-input  name="value" id="itemvalue" [(ngModel)]="data.value" (ngModelChange)="data.changed = true"></textarea>
+          <textarea nz-input  name="value" id="cds-field-item-{{data.name}}" aria-label="Value of item {{data.name}}" [(ngModel)]="data.value" (ngModelChange)="data.changed = true"></textarea>
         </td>
         <td>
           @if (data.changed) {
diff --git a/ui/src/app/views/project/settings/variablesets/variablesets.html b/ui/src/app/views/project/settings/variablesets/variablesets.html
index 4ca0c424e0..3816174dfa 100644
--- a/ui/src/app/views/project/settings/variablesets/variablesets.html
+++ b/ui/src/app/views/project/settings/variablesets/variablesets.html
@@ -3,9 +3,9 @@ <h3>Create a variables set</h3>
   <nz-row>
     <nz-col [nzSpan]="12">
       <nz-form-item>
-        <nz-form-label>Name</nz-form-label>
+        <nz-form-label nzFor="cds-field-vsname">Name</nz-form-label>
         <nz-form-control>
-          <input nz-input name="name" id="vsname" [(ngModel)]="newVariableSetName">
+          <input nz-input name="name" id="cds-field-vsname" [(ngModel)]="newVariableSetName">
         </nz-form-control>
       </nz-form-item>
     </nz-col>
@@ -30,7 +30,7 @@ <h3>Variables sets list:</h3>
     <tbody>
       @for (data of table.data; track data) {
         <tr>
-          <td (click)="selectVariableSet(data)">{{data.name}}</td>
+          <td appClickable (click)="selectVariableSet(data)">{{data.name}}</td>
           <td>
             <button nz-button nzDanger nzType="primary" [nzLoading]="loading.action" nz-popconfirm
               nzPopconfirmTitle="Are you sure you want to delete this variableset ? it will remove all items"
diff --git a/ui/src/app/views/project/settings/webhooks/webhooks.html b/ui/src/app/views/project/settings/webhooks/webhooks.html
index 66c638d55b..781d164664 100644
--- a/ui/src/app/views/project/settings/webhooks/webhooks.html
+++ b/ui/src/app/views/project/settings/webhooks/webhooks.html
@@ -10,11 +10,11 @@ <h3>Create a Webhook</h3>
   <nz-row>
     <nz-col [nzSpan]="newWebhook.type === 'repository' ? 6: 4">
       <nz-form-item>
-        <nz-form-label>
+        <nz-form-label nzFor="cds-field-hooktype">
           Hook Type
         </nz-form-label>
         <nz-form-control>
-          <nz-select name="type" id="type" [(ngModel)]="newWebhook.type">
+          <nz-select name="type" id="cds-field-hooktype" [(ngModel)]="newWebhook.type">
             @for (n of hookTypes; track n) {
               <nz-option [nzLabel]="n" [nzValue]="n"></nz-option>
             }
@@ -24,11 +24,11 @@ <h3>Create a Webhook</h3>
     </nz-col>
     <nz-col [nzSpan]="newWebhook.type === 'repository' ? 6: 4" [nzOffset]="1">
       <nz-form-item>
-        <nz-form-label>
+        <nz-form-label nzFor="cds-field-vcs">
           Vcs server
         </nz-form-label>
         <nz-form-control>
-          <nz-select name="vcs" id="vcs" [(ngModel)]="newWebhook.vcs_server">
+          <nz-select name="vcs" id="cds-field-vcs" [(ngModel)]="newWebhook.vcs_server">
             @for (n of vcss; track n) {
               <nz-option [nzLabel]="n.name" [nzValue]="n.name"></nz-option>
             }
@@ -38,11 +38,11 @@ <h3>Create a Webhook</h3>
     </nz-col>
     <nz-col [nzSpan]="newWebhook.type === 'repository' ? 6: 4" [nzOffset]="1">
       <nz-form-item>
-        <nz-form-label>
+        <nz-form-label nzFor="cds-field-repository">
           Repository
         </nz-form-label>
         <nz-form-control>
-          <input nz-input name="repository" id="repository" [(ngModel)]="newWebhook.repository">
+          <input nz-input name="repository" id="cds-field-repository" [(ngModel)]="newWebhook.repository">
           @if (errorRepository) {
             <nz-alert nzType="warning" nzMessage="Repository cannot be empty"></nz-alert>
           }
@@ -52,11 +52,11 @@ <h3>Create a Webhook</h3>
     @if (newWebhook.type === 'workflow') {
       <nz-col [nzSpan]="5" [nzOffset]="1">
         <nz-form-item>
-          <nz-form-label>
+          <nz-form-label nzFor="cds-field-workflow">
             Workflow
           </nz-form-label>
           <nz-form-control>
-            <input nz-input name="workflow" id="workflow" [(ngModel)]="newWebhook.workflow">
+            <input nz-input name="workflow" id="cds-field-workflow" [(ngModel)]="newWebhook.workflow">
             @if (errorWorkflow) {
               <nz-alert nzType="warning" nzMessage="Workflow cannot be empty"></nz-alert>
             }
diff --git a/ui/src/app/views/project/show/application/application.list.html b/ui/src/app/views/project/show/application/application.list.html
index 1fd6fc9e47..a8e9707853 100644
--- a/ui/src/app/views/project/show/application/application.list.html
+++ b/ui/src/app/views/project/show/application/application.list.html
@@ -15,7 +15,7 @@ <h3>List of applications in the project</h3>
     @if (project.application_names && project.application_names.length > 0) {
       <nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32 }">
         @for (app of filteredApplications; track app) {
-          <nz-col class="cardContainer" [routerLink]="['./application', app.name]" [nzSpan]="6">
+          <nz-col class="cardContainer" appClickable [routerLink]="['./application', app.name]" [nzSpan]="6">
             <app-card [title]="app.name" [description]="app.description" [image]="app.icon"></app-card>
           </nz-col>
         }
diff --git a/ui/src/app/views/project/show/environment/environment.list.html b/ui/src/app/views/project/show/environment/environment.list.html
index 45bee2fe9e..02fac1a2aa 100644
--- a/ui/src/app/views/project/show/environment/environment.list.html
+++ b/ui/src/app/views/project/show/environment/environment.list.html
@@ -15,7 +15,7 @@ <h3>List of environments in the project</h3>
     @if (project.environment_names && project.environment_names.length > 0) {
       <nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32 }">
         @for (env of filteredEnvironments; track env) {
-          <nz-col class="cardContainer" [routerLink]="['./environment', env.name]" [nzSpan]="6">
+          <nz-col class="cardContainer" appClickable [routerLink]="['./environment', env.name]" [nzSpan]="6">
             <app-card [title]="env.name" [onlyTitle]="true"></app-card>
           </nz-col>
         }
diff --git a/ui/src/app/views/project/show/pipeline/pipeline.list.html b/ui/src/app/views/project/show/pipeline/pipeline.list.html
index 042116c56a..8d8fb7a0fa 100644
--- a/ui/src/app/views/project/show/pipeline/pipeline.list.html
+++ b/ui/src/app/views/project/show/pipeline/pipeline.list.html
@@ -16,7 +16,7 @@ <h3>List of pipelines in the project</h3>
     @if (project.pipeline_names && project.pipeline_names.length > 0) {
       <nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32 }">
         @for (pip of filteredPipelines; track pip) {
-          <nz-col class="cardContainer" [routerLink]="['./pipeline', pip.name]" [nzSpan]="6">
+          <nz-col class="cardContainer" appClickable [routerLink]="['./pipeline', pip.name]" [nzSpan]="6">
             <app-card [title]="pip.name" [description]="pip.description"></app-card>
           </nz-col>
         }
diff --git a/ui/src/app/views/project/show/project.html b/ui/src/app/views/project/show/project.html
index 31b9d905c4..11d8f395c1 100644
--- a/ui/src/app/views/project/show/project.html
+++ b/ui/src/app/views/project/show/project.html
@@ -1,5 +1,5 @@
 <ng-template #tabPermissionTemplate>
-  <span nz-icon nzType="user-switch" nzTheme="outline"></span>
+  <span nz-icon nzType="user-switch" nzTheme="outline" aria-hidden="true"></span>
   Permissions
   <ng-template #warnPermission>
     Following groups that are not from organization "{{project.organization}}" can read the
@@ -13,7 +13,7 @@
   @if (project && groupsOutsideOrganization && groupsOutsideOrganization.length > 0) {
     <i nz-icon nzType="warning"
       class="orange" nzTheme="fill" nz-popover [nzPopoverContent]="warnPermission"
-    nzPopoverPlacement="bottomLeft"></i>
+    nzPopoverPlacement="bottomLeft" role="img" aria-label="Warning: groups outside the organization can read this project"></i>
   }
 </ng-template>
 <div id="ProjectShow">
diff --git a/ui/src/app/views/project/show/workflow/blocs/workflow.list.blocs.html b/ui/src/app/views/project/show/workflow/blocs/workflow.list.blocs.html
index 09a033b1af..2ec6c2a4c9 100644
--- a/ui/src/app/views/project/show/workflow/blocs/workflow.list.blocs.html
+++ b/ui/src/app/views/project/show/workflow/blocs/workflow.list.blocs.html
@@ -2,7 +2,7 @@
   <nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32 }">
     @for (wf of workflows; track wf) {
       <nz-col class="cardContainer" [nzSpan]="6">
-        <app-card [routerLink]="['./workflow', wf.name]" [title]="wf.name" [description]="wf.description" [image]="wf.icon"></app-card>
+        <app-card appClickable [routerLink]="['./workflow', wf.name]" [title]="wf.name" [description]="wf.description" [image]="wf.icon"></app-card>
         <div class="nzSegment extra">
           <span>
             @for (label of wf?.labels?.slice(0, 3); track label) {
@@ -19,8 +19,10 @@
               [nzPopoverContent]="popupTemplate"
               nzPopoverTrigger="click"
               nzPopoverTitle="Labels"
-              nzPopoverPlacement="rightTop">
-              <i nz-icon nzType="tags" nzTheme="outline"></i>
+              nzPopoverPlacement="rightTop"
+              appClickable
+              aria-label="Manage labels of workflow {{wf.name}}">
+              <i nz-icon nzType="tags" nzTheme="outline" aria-hidden="true"></i>
             </span>
           }
         </div>
@@ -28,23 +30,23 @@
           <div class="content">
             <div class="field">
               <nz-input-group [nzSuffix]="suffixIconSearch">
-                <input nz-input type="text" placeholder="FIlter or create" [(ngModel)]="labelFilter"(keyup.enter)="confirmLabel(wf.name, labelFilter)">
+                <input nz-input type="text" placeholder="FIlter or create" aria-label="Filter or create a label" [(ngModel)]="labelFilter"(keyup.enter)="confirmLabel(wf.name, labelFilter)">
               </nz-input-group>
               <ng-template #suffixIconSearch>
-                <i nz-icon nzType="search"></i>
+                <i nz-icon nzType="search" aria-hidden="true"></i>
               </ng-template>
             </div>
             <nz-list nzSize="small">
               @for (label of filteredLabels; track label) {
                 <nz-list-item>
                   <div class="content">
-                    <span class="pointing" (click)="!workflowLabelsMap[wf.name][label.name] && linkLabelToWorkflow(wf.name, label)">
-                      <div class="round" [style.background-color]="label.color"></div>
+                    <span class="pointing" appClickable (click)="!workflowLabelsMap[wf.name][label.name] && linkLabelToWorkflow(wf.name, label)">
+                      <div class="round" [style.background-color]="label.color" aria-hidden="true"></div>
                       {{label.name}}
                     </span>
                     @if (workflowLabelsMap[wf.name][label.name]) {
-                      <span class="pointing alignRight" (click)="unlinkLabelToWorkflow(wf.name, label)">
-                        <i nz-icon nzType="close-circle" nzTheme="outline"></i>
+                      <span class="pointing alignRight" appClickable aria-label="Remove label {{label.name}}" (click)="unlinkLabelToWorkflow(wf.name, label)">
+                        <i nz-icon nzType="close-circle" nzTheme="outline" aria-hidden="true"></i>
                       </span>
                     }
                   </div>
@@ -53,7 +55,7 @@
             </nz-list>
           </div>
           <div class="footer">
-            <a class="pointing alignRight" (click)="editLabels()"><i nz-icon nzType="edit" nzTheme="outline"></i> Edit labels</a>
+            <a class="pointing alignRight" appClickable (click)="editLabels()"><i nz-icon nzType="edit" nzTheme="outline" aria-hidden="true"></i> Edit labels</a>
           </div>
         </ng-template>
       </nz-col>
diff --git a/ui/src/app/views/project/show/workflow/workflow.list.html b/ui/src/app/views/project/show/workflow/workflow.list.html
index 2e8b3c6b7a..15a6584d54 100644
--- a/ui/src/app/views/project/show/workflow/workflow.list.html
+++ b/ui/src/app/views/project/show/workflow/workflow.list.html
@@ -8,14 +8,14 @@ <h3>List of workflows in the project</h3>
     <nz-row>
       <nz-col [nzSpan]="8">
         <nz-space-compact>
-          <button nz-button [nzType]="viewMode === 'blocs'?'primary':'default'" (click)="setViewMode('blocs')">
-            <i nz-icon nzType="table" nzTheme="outline"></i>
+          <button nz-button [nzType]="viewMode === 'blocs'?'primary':'default'" aria-label="Display workflows as blocs" (click)="setViewMode('blocs')">
+            <i nz-icon nzType="table" nzTheme="outline" aria-hidden="true"></i>
           </button>
-          <button nz-button [nzType]="viewMode === 'labels'?'primary':'default'" (click)="setViewMode('labels')">
-            <i nz-icon nzType="tags" nzTheme="outline"></i>
+          <button nz-button [nzType]="viewMode === 'labels'?'primary':'default'" aria-label="Display workflows grouped by labels" (click)="setViewMode('labels')">
+            <i nz-icon nzType="tags" nzTheme="outline" aria-hidden="true"></i>
           </button>
-          <button nz-button [nzType]="viewMode === 'lines'?'primary':'default'" (click)="setViewMode('lines')">
-            <i nz-icon nzType="unordered-list" nzTheme="outline"></i>
+          <button nz-button [nzType]="viewMode === 'lines'?'primary':'default'" aria-label="Display workflows as lines" (click)="setViewMode('lines')">
+            <i nz-icon nzType="unordered-list" nzTheme="outline" aria-hidden="true"></i>
           </button>
         </nz-space-compact>
       </nz-col>
diff --git a/ui/src/app/views/projectv2/explore/explore-entity.component.ts b/ui/src/app/views/projectv2/explore/explore-entity.component.ts
index ad9c1b0d43..c913a851a6 100644
--- a/ui/src/app/views/projectv2/explore/explore-entity.component.ts
+++ b/ui/src/app/views/projectv2/explore/explore-entity.component.ts
@@ -92,7 +92,8 @@ export class ProjectV2ExploreEntityComponent implements OnInit, OnDestroy {
 			language: 'yaml',
 			minimap: { enabled: false },
 			readOnly: true,
-			scrollBeyondLastLine: false
+			scrollBeyondLastLine: false,
+			ariaLabel: 'Entity definition editor'
 		};
 
 		this.panelSize = this._store.selectSnapshot(PreferencesState.panelSize(ProjectV2ExploreEntityComponent.PANEL_KEY));
diff --git a/ui/src/app/views/projectv2/explore/explore-overview.html b/ui/src/app/views/projectv2/explore/explore-overview.html
index 4429536743..ea039aad02 100644
--- a/ui/src/app/views/projectv2/explore/explore-overview.html
+++ b/ui/src/app/views/projectv2/explore/explore-overview.html
@@ -1,18 +1,18 @@
 <div class="actions">
-	<div title="Start a Workflow" (click)="openRunStartDrawer()">
-		<span nz-icon nzType="play-circle" [nzTheme]="isNight ? 'fill' : 'outline'"></span>
+	<div title="Start a Workflow" appClickable (click)="openRunStartDrawer()">
+		<span nz-icon nzType="play-circle" [nzTheme]="isNight ? 'fill' : 'outline'" aria-hidden="true"></span>
 		Start a Workflow
 	</div>
 	<a [routerLink]="['/project', project.key, 'run']" title="Workflow Runs">
-		<span nz-icon nzType="unordered-list" nzTheme="outline"></span>
+		<span nz-icon nzType="unordered-list" nzTheme="outline" aria-hidden="true"></span>
 		Show Workflow Runs
 	</a>
-	<div title="Add a Repository" (click)="openRepositoryAddDrawer()">
-		<span nz-icon nzType="plus-circle" [nzTheme]="isNight ? 'fill' : 'outline'"></span>
+	<div title="Add a Repository" appClickable (click)="openRepositoryAddDrawer()">
+		<span nz-icon nzType="plus-circle" [nzTheme]="isNight ? 'fill' : 'outline'" aria-hidden="true"></span>
 		Add a Repository
 	</div>
 	<a [routerLink]="['/project', project.key, 'settings']" title="Edit settings">
-		<span nz-icon nzType="setting" [nzTheme]="isNight ? 'fill' : 'outline'"></span>
+		<span nz-icon nzType="setting" [nzTheme]="isNight ? 'fill' : 'outline'" aria-hidden="true"></span>
 		Edit settings
 	</a>
 </div>
\ No newline at end of file
diff --git a/ui/src/app/views/projectv2/explore/explore-repository.html b/ui/src/app/views/projectv2/explore/explore-repository.html
index 7b48186a0c..4707e81a2b 100644
--- a/ui/src/app/views/projectv2/explore/explore-repository.html
+++ b/ui/src/app/views/projectv2/explore/explore-repository.html
@@ -17,7 +17,7 @@
       {{repository.created_by}}</nz-descriptions-item>
     </nz-descriptions>
     <div class="events">
-      <h3>Repository events <i (click)="loadHookEvents()" nz-icon nzType="sync" [nzSpin]="loadingHooks"
+      <h3>Repository events <i (click)="loadHookEvents()" appClickable aria-label="Refresh repository events" nz-icon nzType="sync" [nzSpin]="loadingHooks"
       nzTheme="outline" class="pointing"></i> </h3>
       <nz-table [nsAutoHeightTable]="85" [nzLoading]="loadingHooks" [nzData]="hookEvents"
         [nzFrontPagination]="false" nzSize="small" #hooksTable>
@@ -37,9 +37,9 @@ <h3>Repository events <i (click)="loadHookEvents()" nz-icon nzType="sync" [nzSpi
         </thead>
         <tbody>
           @for (h of hooksTable.data; track h) {
-            <tr (click)="displayDetail(h)" class="pointing">
+            <tr (click)="displayDetail(h)" class="pointing" tabindex="0" (keydown.enter)="displayDetail(h)">
               <td>
-                <app-status-icon [status]="h.status" nz-tooltip="{{h.last_error}}"></app-status-icon>
+                <app-status-icon [status]="h.status" nz-tooltip="{{h.last_error}}" role="img" [attr.aria-label]="'Status: ' + h.status"></app-status-icon>
               </td>
               <td><app-date-from-now [value]="h.created_string"></app-date-from-now></td>
               <td>{{h.uuid}}</td>
@@ -50,23 +50,23 @@ <h3>Repository events <i (click)="loadHookEvents()" nz-icon nzType="sync" [nzSpi
                 @for (a of h?.analyses; track a) {
                   @if (a.project_key === project.key) {
                     <app-status-icon
-                    [status]="a.status"></app-status-icon>
+                    [status]="a.status" role="img" [attr.aria-label]="'Status: ' + a.status"></app-status-icon>
                   }
                 }
               </td>
               <td>
                 @switch (h.nbFailed > 0? 'fail': (h.nbScheduled > 0? 'scheduled': (h.nbDone >0? 'success': 'skipped'))) {
                   @case ('fail') {
-                    <app-status-icon [status]="'Error'"></app-status-icon>
+                    <app-status-icon [status]="'Error'" role="img" aria-label="Status: Error"></app-status-icon>
                   }
                   @case ('success') {
-                    <app-status-icon [status]="'Success'"></app-status-icon>
+                    <app-status-icon [status]="'Success'" role="img" aria-label="Status: Success"></app-status-icon>
                   }
                   @case ('scheduled') {
-                    <app-status-icon [status]="'Scheduled'"></app-status-icon>
+                    <app-status-icon [status]="'Scheduled'" role="img" aria-label="Status: Scheduled"></app-status-icon>
                   }
                   @case ('skipped') {
-                    <app-status-icon [status]="'Skipped'"></app-status-icon>
+                    <app-status-icon [status]="'Skipped'" role="img" aria-label="Status: Skipped"></app-status-icon>
                   }
                 }
               </td>
@@ -175,12 +175,12 @@ <h3>Workflows</h3>
           @for (w of selectedHookEvent.workflows; track w) {
             <nz-list-item>
               @if (w.status === 'Done') {
-                <app-status-icon [status]="'Success'" title="Done"></app-status-icon>
+                <app-status-icon [status]="'Success'" title="Done" role="img" aria-label="Status: Done"></app-status-icon>
                 <a
                 [routerLink]="['/project', w.project_key, 'run', w.run_id]">{{w.project_key}}/{{w.workflow_name}}#{{w.run_number}}</a>
               }
               @if (w.status !== 'Done') {
-                <app-status-icon [status]="w.status" [title]="w.status"></app-status-icon>
+                <app-status-icon [status]="w.status" [title]="w.status" role="img" [attr.aria-label]="'Status: ' + w.status"></app-status-icon>
                 <span>{{w.project_key}}/{{w.workflow_name}}{{w.error ? ' - Error: ' + w.error : ''}}</span>
               }
             </nz-list-item>
diff --git a/ui/src/app/views/projectv2/explore/explore-sidebar.html b/ui/src/app/views/projectv2/explore/explore-sidebar.html
index a4d9995a11..a1156c158b 100644
--- a/ui/src/app/views/projectv2/explore/explore-sidebar.html
+++ b/ui/src/app/views/projectv2/explore/explore-sidebar.html
@@ -2,23 +2,23 @@
   <a class="title" title="Show overview" [routerLink]="['/project', project.key, 'explore']">
     Workspace
   </a>
-  <button class="collapse" nz-button nzType="text" nzSize="small" nz-tooltip
+  <button class="collapse" nz-button nzType="text" nzSize="small" nz-tooltip aria-label="Collapse folders"
     nzTooltipTitle="Collapse folders" (click)="collapseAll()">
-    <i nz-icon nzType="menu-fold" nzTheme="outline"></i>
+    <i nz-icon nzType="menu-fold" nzTheme="outline" aria-hidden="true"></i>
   </button>
-  <button class="refresh" nz-button nzType="text" nzSize="small" nz-tooltip
+  <button class="refresh" nz-button nzType="text" nzSize="small" nz-tooltip aria-label="Refresh the workspace"
     nzTooltipTitle="Click to refresh the workspace" (click)="load()">
-    <i nz-icon nzType="sync" [nzSpin]="loading" nzTheme="outline"></i>
+    <i nz-icon nzType="sync" [nzSpin]="loading" nzTheme="outline" aria-hidden="true"></i>
   </button>
 </div>
 <div class="content">
   @for (vcs of vcss; track vcs) {
-    <div class="tree-node-header large" (click)="clickVCS(vcs)">
-      <span nz-icon [nzType]="!treeExpandState[vcs.name] ? 'caret-right' : 'caret-down'" nzTheme="fill"></span>
+    <div class="tree-node-header large" appClickable [attr.aria-expanded]="!!treeExpandState[vcs.name]" (click)="clickVCS(vcs)">
+      <span nz-icon [nzType]="!treeExpandState[vcs.name] ? 'caret-right' : 'caret-down'" nzTheme="fill" aria-hidden="true"></span>
       <div class="name">{{vcs.name}}</div>
       <button nz-button nzSize="small" title="Add a new Repository"
         (click)="openRepositoryAddDrawer(vcs.name);$event.stopPropagation()">
-        <i nz-icon nzType="plus" nzTheme="outline"></i>
+        <i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i>
         Repository
       </button>
     </div>
@@ -29,9 +29,9 @@
           nzMessage="No repository found"></nz-alert>
         }
         @for (repo of repositories[vcs.name]; track repo) {
-          <div class="tree-node-header large" (click)="clickRepository(vcs, repo)">
+          <div class="tree-node-header large" appClickable [attr.aria-expanded]="!!treeExpandState[vcs.name+'/'+repo.name]" (click)="clickRepository(vcs, repo)">
             <span nz-icon [nzType]="!treeExpandState[vcs.name+'/'+repo.name] ? 'caret-right' : 'caret-down'"
-            nzTheme="fill"></span>
+            nzTheme="fill" aria-hidden="true"></span>
             <a class="name"
               [routerLink]="['/project', project.key, 'explore', 'vcs', vcs.name, 'repository', repo.name, 'settings']"
               routerLinkActive="active" (click)="clickRepositoryLink(vcs, repo, $event)"
@@ -51,20 +51,20 @@
               }
               <ng-template #noResource>
                 No resource found
-                <button class="analyze" nz-button nzType="text" nzSize="small" nz-tooltip
+                <button class="analyze" nz-button nzType="text" nzSize="small" nz-tooltip aria-label="Trigger an analysis for the current ref"
                   nzTooltipTitle="Click to trigger an analysis for the current ref"
                   (click)="openTriggerAnalysisDrawer(vcs.name+'/'+repo.name, refSelectState[vcs.name+'/'+repo.name])">
-                  <i nz-icon nzType="sync" [nzSpin]="loading" nzTheme="outline"></i>
+                  <i nz-icon nzType="sync" [nzSpin]="loading" nzTheme="outline" aria-hidden="true"></i>
                 </button>
               </ng-template>
               @if (loadingEntities[vcs.name+'/'+repo.name]) {
                 <nz-spin nzSimple></nz-spin>
               }
               @for (entity of entities[vcs.name+'/'+repo.name] | keyvalue; track entity) {
-                <div class="tree-node-header" (click)="clickEntityType(vcs, repo, entity.key)">
+                <div class="tree-node-header" appClickable [attr.aria-expanded]="!!treeExpandState[vcs.name+'/'+repo.name+'/'+entity.key]" (click)="clickEntityType(vcs, repo, entity.key)">
                   <span nz-icon
                     [nzType]="!treeExpandState[vcs.name+'/'+repo.name+'/'+entity.key] ? 'folder' : 'folder-open'"
-                  nzTheme="outline"></span>
+                  nzTheme="outline" aria-hidden="true"></span>
                   <div class="name">{{entity.key}}</div>
                 </div>
                 @if (treeExpandState[vcs.name+'/'+repo.name+'/'+entity.key]) {
@@ -75,7 +75,7 @@
                           [routerLink]="['/project', project.key, 'explore', 'vcs', vcs.name, 'repository', repo.name, v.type.toLowerCase(), v.name]"
                           [queryParams]="{ref: refSelectState[vcs.name+'/'+repo.name]}"
                           routerLinkActive="active" [title]="v.name">
-                          <span nz-icon nzType="file"></span>{{v.name}}
+                          <span nz-icon nzType="file" aria-hidden="true"></span>{{v.name}}
                         </a>
                         @if (v.type === 'Workflow') {
                           <app-favorite-button type="workflow"
@@ -84,16 +84,16 @@
                         @if (v.type === 'Workflow') {
                           <button nz-button nzType="text" nzSize="small"
                             (click)="openRunStartDrawer(vcs.name+'/'+repo.name+'/'+v.name, refSelectState[vcs.name+'/'+repo.name])"
-                            title="Start workflow">
-                            <span nz-icon nzType="caret-right" nzTheme="fill"></span>
+                            title="Start workflow" aria-label="Start workflow">
+                            <span nz-icon nzType="caret-right" nzTheme="fill" aria-hidden="true"></span>
                           </button>
                         }
                         @if (v.type === 'Workflow') {
                           <a nz-button nzType="text" nzSize="small"
                             [routerLink]="['/', 'project', project.key, 'run']"
                             [queryParams]="{ workflow: vcs.name+'/'+repo.name+'/'+v.name, workflow_ref: refSelectState[vcs.name+'/'+repo.name]}"
-                            (click)="$event.stopPropagation();" title="Display workflow runs">
-                            <span nz-icon nzType="unordered-list" nzTheme="outline"></span>
+                            (click)="$event.stopPropagation();" title="Display workflow runs" aria-label="Display workflow runs">
+                            <span nz-icon nzType="unordered-list" nzTheme="outline" aria-hidden="true"></span>
                           </a>
                         }
                       </div>
diff --git a/ui/src/app/views/projectv2/explore/repository-add/repository-add.html b/ui/src/app/views/projectv2/explore/repository-add/repository-add.html
index b8221a756d..7bfc65166b 100644
--- a/ui/src/app/views/projectv2/explore/repository-add/repository-add.html
+++ b/ui/src/app/views/projectv2/explore/repository-add/repository-add.html
@@ -22,8 +22,8 @@
           }
         </nz-select>
         <button nz-button nzType="primary" (click)="resyncRepositories($event)" [nzLoading]="isLoading()"
-          [disabled]="validateForm.disabled" title="Resync Repositories"><span nz-icon
-        nzType="reload"></span></button>
+          [disabled]="validateForm.disabled" title="Resync Repositories" aria-label="Resync Repositories"><span nz-icon
+        nzType="reload" aria-hidden="true"></span></button>
       </nz-row>
 
       @if (validateForm.controls.vcs && vcsProject) {
diff --git a/ui/src/app/views/projectv2/run-list/run-list-sidebar.html b/ui/src/app/views/projectv2/run-list/run-list-sidebar.html
index 13daaf4b81..f07a16b38f 100644
--- a/ui/src/app/views/projectv2/run-list/run-list-sidebar.html
+++ b/ui/src/app/views/projectv2/run-list/run-list-sidebar.html
@@ -24,10 +24,10 @@
 					</a>
 					@if (canManage) {
 						<button nz-button nzType="primary" nzDanger nzSize="small"
-							nz-tooltip nzTooltipTitle="Delete shared filter"
+							nz-tooltip nzTooltipTitle="Delete shared filter" aria-label="Delete shared filter"
 							nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this shared filter?"
 							(nzOnConfirm)="deleteSharedFilter(f.name)" (click)="$event.stopPropagation()">
-							<i nz-icon nzType="delete" nzTheme="outline"></i>
+							<i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>
 						</button>
 					}
 				</div>
@@ -48,16 +48,16 @@
 					</a>
 					@if (canManage) {
 						<button nz-button nzType="default" nzSize="small"
-							nz-tooltip nzTooltipTitle="Share this filter with the project"
+							nz-tooltip nzTooltipTitle="Share this filter with the project" aria-label="Share this filter with the project"
 							(click)="sharePersonalFilter(s); $event.stopPropagation()">
-							<i nz-icon nzType="share-alt" nzTheme="outline"></i>
+							<i nz-icon nzType="share-alt" nzTheme="outline" aria-hidden="true"></i>
 						</button>
 					}
 					<button nz-button nzType="primary" nzDanger nzSize="small"
-						nz-tooltip nzTooltipTitle="Delete my filter"
+						nz-tooltip nzTooltipTitle="Delete my filter" aria-label="Delete my filter"
 						nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this filter?"
 						(nzOnConfirm)="deleteSearch(s.name)" (click)="$event.stopPropagation()">
-						<i nz-icon nzType="delete" nzTheme="outline"></i>
+						<i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>
 					</button>
 				</div>
 			}
diff --git a/ui/src/app/views/projectv2/run-list/run-list.html b/ui/src/app/views/projectv2/run-list/run-list.html
index cd24dc5ca5..de73f2845c 100644
--- a/ui/src/app/views/projectv2/run-list/run-list.html
+++ b/ui/src/app/views/projectv2/run-list/run-list.html
@@ -8,12 +8,12 @@
 <div class="content">
 	<div class="header">
 		<button nz-button nzType="default" title="Start new run" (click)="openRunStartDrawer()"><span nz-icon
-				nzType="caret-right" nzTheme="fill"></span> New run</button>
+				nzType="caret-right" nzTheme="fill" aria-hidden="true"></span> New run</button>
 		<ng-template #saveSearchTemplate>
 			<form class="save-search-form" nz-form (ngSubmit)="submitSaveSearch()">
 				<nz-form-item>
 					<nz-form-control>
-						<input placeholder="Name" [ngModel]="searchName" (ngModelChange)="onSearchNameChange($event)" nz-input
+						<input placeholder="Name" aria-label="Search name" [ngModel]="searchName" (ngModelChange)="onSearchNameChange($event)" nz-input
 							ngDefaultControl [ngModelOptions]="{standalone: true}" />
 					</nz-form-control>
 				</nz-form-item>
@@ -28,18 +28,18 @@
 			</nz-form-item>
 			<nz-form-item>
 				<nz-form-control>
-					<button nz-button nzType="primary" (click)="refresh($event)" title="Refresh results"><span nz-icon
-							[nzType]="filterText === previousFilterText ? 'reload' : 'search'"></span></button>
+					<button nz-button nzType="primary" (click)="refresh($event)" title="Refresh results" aria-label="Refresh results"><span nz-icon
+							[nzType]="filterText === previousFilterText ? 'reload' : 'search'" aria-hidden="true"></span></button>
 				</nz-form-control>
 			</nz-form-item>
 		</form>
-		<button nz-button nzType="default" nz-popconfirm [nzPopconfirmTitle]="saveSearchTemplate" title="Save search"
-			(nzOnConfirm)="confirmSaveSearch()" #saveSearchButton=nzPopconfirm><span nz-icon nzType="save"></span></button>
+		<button nz-button nzType="default" nz-popconfirm [nzPopconfirmTitle]="saveSearchTemplate" title="Save search" aria-label="Save search"
+			(nzOnConfirm)="confirmSaveSearch()" #saveSearchButton=nzPopconfirm><span nz-icon nzType="save" aria-hidden="true"></span></button>
 		<ng-template #saveSearchTemplate>
 			<form class="save-search-form" nz-form (ngSubmit)="submitSaveSearch()">
 				<nz-form-item>
 					<nz-form-control>
-						<input placeholder="Name" [ngModel]="searchName" (ngModelChange)="onSearchNameChange($event)" nz-input
+						<input placeholder="Name" aria-label="Search name" [ngModel]="searchName" (ngModelChange)="onSearchNameChange($event)" nz-input
 							ngDefaultControl [ngModelOptions]="{standalone: true}" />
 					</nz-form-control>
 				</nz-form-item>
@@ -55,22 +55,22 @@
 				<nz-list-item-meta [nzTitle]="runTitle" [nzAvatar]="runAvatar" [nzDescription]="runDescription">
 				</nz-list-item-meta>
 				<ng-template #runAvatar>
-					<div class="run-avatar" [title]="'Status: ' + run.status">
+					<div class="run-avatar" [title]="'Status: ' + run.status" role="img" [attr.aria-label]="'Status: ' + run.status">
 						<span *ngIf="run.status === 'Success'" class="success" nz-icon nzType="check-circle"
-							nzTheme="outline"></span>
+							nzTheme="outline" aria-hidden="true"></span>
 						<span *ngIf="run.status === 'Cancelled'" class="cancelled" nz-icon nzType="close-circle"
-							nzTheme="outline"></span>
-						<span *ngIf="run.status === 'Fail'" class="fail" nz-icon nzType="close-circle" nzTheme="outline"></span>
-						<span *ngIf="run.status === 'Stopped'" class="stopped" nz-icon>
+							nzTheme="outline" aria-hidden="true"></span>
+						<span *ngIf="run.status === 'Fail'" class="fail" nz-icon nzType="close-circle" nzTheme="outline" aria-hidden="true"></span>
+						<span *ngIf="run.status === 'Stopped'" class="stopped" nz-icon aria-hidden="true">
 							<svg>
 								<path d="M 760 260 h -500 v 500 h 500 z"></path>
 							</svg>
 						</span>
 						<span *ngIf="run.status === 'Building'" class="building" nz-icon nzType="play-circle"
-							nzTheme="outline"></span>
+							nzTheme="outline" aria-hidden="true"></span>
 						<span *ngIf="run.status === 'Blocked'" class="blocked" nz-icon nzType="pause-circle"
-							nzTheme="outline"></span>
-						<span *ngIf="run.status === 'Skipped'" class="skipped" nz-icon nzType="stop" nzTheme="outline"></span>
+							nzTheme="outline" aria-hidden="true"></span>
+						<span *ngIf="run.status === 'Skipped'" class="skipped" nz-icon nzType="stop" nzTheme="outline" aria-hidden="true"></span>
 					</div>
 				</ng-template>
 				<ng-template #runTitle>
@@ -117,7 +117,7 @@
 					<ng-container *ngFor="let annotation of run.annotations | keyvalue">
 						<app-searchable [link]="['/project', project.key, 'run']"
 							[params]="generateAnnotationQueryParams(annotation)" paramsHandling="merge">
-							<nz-tag *ngIf="annotation.value !== 'true'" nzColor="default" style="cursor: copy;"
+							<nz-tag *ngIf="annotation.value !== 'true'" nzColor="default" style="cursor: copy;" appClickable
 								title="key: {{annotation.key}} - value: {{annotation.value}}"
 								(click)="confirmCopyAnnotationValue($event, annotation.value)">
 								<b>{{annotation.key}}:</b> {{annotation.value}}
@@ -134,8 +134,8 @@
 						<app-date-from-now [value]="run.started"></app-date-from-now>
 					</nz-list-item-action>
 					<nz-list-item-action>
-						<button nz-button nzType="default" title="Run options" nz-dropdown [nzDropdownMenu]="menu"><span nz-icon
-								nzType="more" nzTheme="outline"></span></button>
+						<button nz-button nzType="default" title="Run options" aria-label="Run options" nz-dropdown [nzDropdownMenu]="menu"><span nz-icon
+								nzType="more" nzTheme="outline" aria-hidden="true"></span></button>
 						<nz-dropdown-menu #menu="nzDropdownMenu">
 							<ul nz-menu nzSelectable>
 								<li nz-menu-item>
@@ -158,7 +158,7 @@
 	</nz-list>
 	<div *ngIf="totalCount > 0" class="footer">
 		{{totalCount}} results - sorted by
-		<nz-select [ngModel]="sort" (ngModelChange)="onSortChange($event)" nzBorderless>
+		<nz-select [ngModel]="sort" (ngModelChange)="onSortChange($event)" nzBorderless aria-label="Sort runs">
 			<nz-option nzValue="last_modified:desc" nzLabel="last modification desc"></nz-option>
 			<nz-option nzValue="last_modified:asc" nzLabel="last modification asc"></nz-option>
 			<nz-option nzValue="started:desc" nzLabel="started desc"></nz-option>
diff --git a/ui/src/app/views/projectv2/run-start/run-gate-inputs.html b/ui/src/app/views/projectv2/run-start/run-gate-inputs.html
index bac6f0b269..f0217077d8 100644
--- a/ui/src/app/views/projectv2/run-start/run-gate-inputs.html
+++ b/ui/src/app/views/projectv2/run-start/run-gate-inputs.html
@@ -18,7 +18,7 @@
                         @case('choice') {
                             @if (input.value.options.multiple) {
                                 <nz-select nzMode="multiple" [nzDisabled]="disabled || values[gate.key].withJobOverrides"
-                                    [ngModel]="values[gate.key].global[input.key.toString()]"
+                                    [ngModel]="values[gate.key].global[input.key.toString()]" [attr.aria-label]="input.key"
                                     (ngModelChange)="onGateValueChange(gate.key, input.key.toString(), $event)">
                                     @for(opt of input.value.options.values; track opt) {
                                         <nz-option [nzValue]="opt" [nzLabel]="opt"></nz-option>
@@ -26,7 +26,7 @@
                                 </nz-select>
                             } @else {
                                 <nz-select [nzDisabled]="disabled || values[gate.key].withJobOverrides"
-                                    [ngModel]="values[gate.key].global[input.key.toString()]"
+                                    [ngModel]="values[gate.key].global[input.key.toString()]" [attr.aria-label]="input.key"
                                     (ngModelChange)="onGateValueChange(gate.key, input.key.toString(), $event)">
                                     @for(opt of input.value.options.values; track opt) {
                                         <nz-option [nzValue]="opt" [nzLabel]="opt"></nz-option>
@@ -36,7 +36,7 @@
                         }
                         @default {
                             <input nz-input [disabled]="disabled || values[gate.key].withJobOverrides"
-                                [ngModel]="values[gate.key].global[input.key.toString()]"
+                                [ngModel]="values[gate.key].global[input.key.toString()]" [attr.aria-label]="input.key"
                                 (ngModelChange)="onGateValueChange(gate.key, input.key.toString(), $event)">
                         }
                     }
@@ -71,7 +71,7 @@
                             @case ('choice') {
                                 @if (input.value.options.multiple) {
                                      <nz-select nzMode="multiple" [nzDisabled]="disabled"
-                                        [ngModel]="values[gate.key].jobs[job.key][input.key.toString()]"
+                                        [ngModel]="values[gate.key].jobs[job.key][input.key.toString()]" [attr.aria-label]="input.key"
                                         (ngModelChange)="onJobValueChange(gate.key, job.key, input.key.toString(), $event)">
                                         @for(opt of input.value.options.values; track opt) {
                                             <nz-option [nzValue]="opt" [nzLabel]="opt"></nz-option>
@@ -79,7 +79,7 @@
                                     </nz-select>
                                 } @else {
                                     <nz-select [nzDisabled]="disabled" [ngModel]="values[gate.key].jobs[job.key][input.key.toString()]"
-                                        (ngModelChange)="onJobValueChange(gate.key, job.key, input.key.toString(), $event)">
+                                        [attr.aria-label]="input.key" (ngModelChange)="onJobValueChange(gate.key, job.key, input.key.toString(), $event)">
                                         @for(opt of input.value.options.values; track opt) {
                                             <nz-option [nzValue]="opt" [nzLabel]="opt"></nz-option>
                                         }
@@ -88,7 +88,7 @@
                             }
                             @default {
                                 <input nz-input [disabled]="disabled" [ngModel]="values[gate.key].jobs[job.key][input.key.toString()]"
-                                    (ngModelChange)="onJobValueChange(gate.key, job.key, input.key.toString(), $event)">
+                                    [attr.aria-label]="input.key" (ngModelChange)="onJobValueChange(gate.key, job.key, input.key.toString(), $event)">
                             }
                         }
                     </nz-form-control>
diff --git a/ui/src/app/views/projectv2/run-start/run-start.html b/ui/src/app/views/projectv2/run-start/run-start.html
index 68581e0941..314ff23584 100644
--- a/ui/src/app/views/projectv2/run-start/run-start.html
+++ b/ui/src/app/views/projectv2/run-start/run-start.html
@@ -31,7 +31,7 @@
   <nz-form-item *ngIf="this.validateForm.controls.sourceRepository.value">
     <nz-form-label [nzSpan]="6" nzFor="sourceRepository">Source repository</nz-form-label>
     <nz-form-control [nzSpan]="14">
-      <input formControlName="sourceRepository" nz-input type="text" />
+      <input formControlName="sourceRepository" nz-input type="text" id="sourceRepository" />
     </nz-form-control>
   </nz-form-item>
   <nz-form-item *ngIf="this.validateForm.controls.sourceRepository.value">
diff --git a/ui/src/app/views/projectv2/run/run-contexts.component.ts b/ui/src/app/views/projectv2/run/run-contexts.component.ts
index 3d772e9e5f..9559c1717d 100644
--- a/ui/src/app/views/projectv2/run/run-contexts.component.ts
+++ b/ui/src/app/views/projectv2/run/run-contexts.component.ts
@@ -45,7 +45,8 @@ export class RunContextsComponent implements OnInit, OnChanges, OnDestroy {
 			language: 'json',
 			minimap: { enabled: false },
 			readOnly: true,
-			scrollBeyondLastLine: false
+			scrollBeyondLastLine: false,
+			ariaLabel: 'Run contexts viewer'
 		};
 
 		this.resizingSubscription = this._store.select(PreferencesState.resizing).subscribe(resizing => {
diff --git a/ui/src/app/views/projectv2/run/run-hook.component.ts b/ui/src/app/views/projectv2/run/run-hook.component.ts
index fdd5e9a7ff..7f296e7f94 100644
--- a/ui/src/app/views/projectv2/run/run-hook.component.ts
+++ b/ui/src/app/views/projectv2/run/run-hook.component.ts
@@ -46,7 +46,8 @@ export class RunHookComponent implements OnInit, OnChanges, OnDestroy {
 			language: 'json',
 			minimap: { enabled: false },
 			readOnly: true,
-			scrollBeyondLastLine: false
+			scrollBeyondLastLine: false,
+			ariaLabel: 'Hook event viewer'
 		};
 
 		this.resizingSubscription = this._store.select(PreferencesState.resizing).subscribe(resizing => {
diff --git a/ui/src/app/views/projectv2/run/run-info.html b/ui/src/app/views/projectv2/run/run-info.html
index 9259016433..8022f90b64 100644
--- a/ui/src/app/views/projectv2/run/run-info.html
+++ b/ui/src/app/views/projectv2/run/run-info.html
@@ -2,13 +2,13 @@
   @for (i of info; track i) {
     <div class="line">
       @if (i.level === 'error') {
-        <span class="error" nz-icon nzType="close-circle" nzTheme="fill"></span>
+        <span class="error" nz-icon nzType="close-circle" nzTheme="fill" role="img" aria-label="Error"></span>
       }
       @if (i.level === 'warning') {
-        <span class="warning" nz-icon nzType="warning" nzTheme="fill"></span>
+        <span class="warning" nz-icon nzType="warning" nzTheme="fill" role="img" aria-label="Warning"></span>
       }
       @if (i.level==='info') {
-        <span class="info" nz-icon nzType="info-circle" nzTheme="fill"></span>
+        <span class="info" nz-icon nzType="info-circle" nzTheme="fill" role="img" aria-label="Info"></span>
       }
       <div class="message" [title]="i.message">
         {{i.message}}
diff --git a/ui/src/app/views/projectv2/run/run-job.html b/ui/src/app/views/projectv2/run/run-job.html
index d85acfd87e..31cc5ff7f2 100644
--- a/ui/src/app/views/projectv2/run/run-job.html
+++ b/ui/src/app/views/projectv2/run/run-job.html
@@ -7,7 +7,7 @@
       }
     }
     @if (jobRun?.retry > 0) {
-      <nz-select nzSize="small" [ngModel]="selectedRetry" (ngModelChange)="onRetryChange($event)" nzPlaceHolder="Select Retry" title="Job retry">
+      <nz-select nzSize="small" [ngModel]="selectedRetry" (ngModelChange)="onRetryChange($event)" nzPlaceHolder="Select Retry" title="Job retry" aria-label="Job retry">
         @for (jobRetry of jobRetries; track jobRetry) {
           <nz-option [nzValue]="jobRetry.retry" [nzLabel]="jobRetry.retry"></nz-option>
         }
@@ -27,16 +27,16 @@
     <!-- Display job services and steps -->
     @for (logBlock of tabs[currentTabIndex].logBlocks; track trackStepElement(i, logBlock); let i = $index) {
       <div class="step"
-        >
-        <div class="line info" (click)="clickOpenClose(logBlock)">
+        [attr.role]="websocket && !logBlock.closed ? 'log' : null">
+        <div class="line info" appClickable [attr.aria-expanded]="!logBlock.closed" (click)="clickOpenClose(logBlock)">
           <div class="number">
             @if (logBlock.totalLinesCount > 0 && !logBlock.loading && logBlock.closed) {
               <span nz-icon
-              nzType="caret-right" nzTheme="fill"></span>
+              nzType="caret-right" nzTheme="fill" aria-hidden="true"></span>
             }
             @if (logBlock.totalLinesCount > 0 && !logBlock.loading && !logBlock.closed) {
               <span nz-icon
-              nzType="caret-down" nzTheme="fill"></span>
+              nzType="caret-down" nzTheme="fill" aria-hidden="true"></span>
             }
             @if (logBlock.lines.length === 0 && logBlock.loading) {
               <span nz-icon [nzType]="'loading'"></span>
@@ -67,8 +67,8 @@
             @if (logBlock?.link) {
               <a
                 [href]="'./cdscdn/item/' + logBlock.link.item_type + '/' + logBlock.link.api_ref + '/download?refresh=5'"
-                target="_blank" rel="noopener noreferrer" title="Share/download the step"
-                (click)="$event.stopPropagation()"><i nz-icon nzType="export" nzTheme="outline"></i></a>
+                target="_blank" rel="noopener noreferrer" title="Share/download the step" aria-label="Share/download the step"
+                (click)="$event.stopPropagation()"><i nz-icon nzType="export" nzTheme="outline" aria-hidden="true"></i></a>
               }
             </div>
           </div>
@@ -94,10 +94,10 @@
               </div>
             }
             @if (logBlock.lines.length + logBlock.endLines.length < logBlock.totalLinesCount) {
-              <div class="line expand"
+              <div class="line expand" appClickable aria-label="Load next lines"
                 (click)="clickExpandStepDown(logBlock.name, $event)">
                 <div class="number">
-                  <i nz-icon nzType="caret-down" nzTheme="fill"></i>
+                  <i nz-icon nzType="caret-down" nzTheme="fill" aria-hidden="true"></i>
                   {{logBlock.firstDisplayedLineNumber +
                   logBlock.lines.length + 1}}
                 </div>
@@ -105,9 +105,9 @@
               </div>
             }
             @if (logBlock.lines.length + logBlock.endLines.length < (logBlock.totalLinesCount - expandLoadLinesCount) - 1) {
-              <div class="line expand"
+              <div class="line expand" appClickable aria-label="Load previous lines"
                 (click)="clickExpandStepUp(logBlock.name)">
-                <div class="number"><i nz-icon nzType="caret-up" nzTheme="fill"></i>{{(logBlock.firstDisplayedLineNumber
+                <div class="number"><i nz-icon nzType="caret-up" nzTheme="fill" aria-hidden="true"></i>{{(logBlock.firstDisplayedLineNumber
                 +
                 logBlock.totalLinesCount) - logBlock.endLines.length}}
               </div>
@@ -140,9 +140,9 @@
       </div>
     }
     <div class="footer">
-      <div class="goto" (click)="clickScroll(scrollTargets.BOTTOM)">Bottom<i nz-icon nzType="caret-down"
-      nzTheme="fill"></i></div>
-      <div class="goto" (click)="clickScroll(scrollTargets.TOP)">Top<i nz-icon nzType="caret-up" nzTheme="fill"></i>
+      <div class="goto" appClickable (click)="clickScroll(scrollTargets.BOTTOM)">Bottom<i nz-icon nzType="caret-down"
+      nzTheme="fill" aria-hidden="true"></i></div>
+      <div class="goto" appClickable (click)="clickScroll(scrollTargets.TOP)">Top<i nz-icon nzType="caret-up" nzTheme="fill" aria-hidden="true"></i>
     </div>
   </div>
 </div>
diff --git a/ui/src/app/views/projectv2/run/run-result.component.ts b/ui/src/app/views/projectv2/run/run-result.component.ts
index 254ae7cb8e..aa4bb033d2 100644
--- a/ui/src/app/views/projectv2/run/run-result.component.ts
+++ b/ui/src/app/views/projectv2/run/run-result.component.ts
@@ -48,7 +48,8 @@ export class RunResultComponent implements OnInit, OnChanges, OnDestroy {
 			language: 'json',
 			minimap: { enabled: false },
 			readOnly: true,
-			scrollBeyondLastLine: false
+			scrollBeyondLastLine: false,
+			ariaLabel: 'Run result viewer'
 		};
 
 		this.resizingSubscription = this._store.select(PreferencesState.resizing).subscribe(resizing => {
diff --git a/ui/src/app/views/projectv2/run/run-results.html b/ui/src/app/views/projectv2/run/run-results.html
index 226070901d..b9d2de2667 100644
--- a/ui/src/app/views/projectv2/run/run-results.html
+++ b/ui/src/app/views/projectv2/run/run-results.html
@@ -1,13 +1,13 @@
 <div class="form">
   <nz-input-group [nzSuffix]="suffixIcon">
-    <input type="text" nz-input placeholder="Search" [ngModel]="searchValue" (ngModelChange)="updateSearch($event)" />
+    <input type="text" nz-input placeholder="Search" aria-label="Search results" [ngModel]="searchValue" (ngModelChange)="updateSearch($event)" />
   </nz-input-group>
   <ng-template #suffixIcon>
-    <span nz-icon nzType="search"></span>
+    <span nz-icon nzType="search" aria-hidden="true"></span>
   </ng-template>
   <button [class.active]="filtered" nz-button nzType="default" nz-popover [nzPopoverContent]="contentFilter"
-    nzPopoverPlacement="bottomRight" nzPopoverTrigger="click">
-    <span nz-icon nzType="filter" nzTheme="outline"></span>
+    nzPopoverPlacement="bottomRight" nzPopoverTrigger="click" aria-label="Filter results">
+    <span nz-icon nzType="filter" nzTheme="outline" aria-hidden="true"></span>
     @if (filtered && results?.length > 0) {
       <span>{{filteredResults?.length}}/{{results?.length}}</span>
     }
@@ -18,17 +18,17 @@
 </div>
 <nz-list nzSize="small" [nzDataSource]="filteredResults">
   @for (item of filteredResults; track item) {
-    <nz-list-item (click)="clickResult(item.result)">
+    <nz-list-item appClickable (click)="clickResult(item.result)">
       <span class="identifier" [title]="item.result.identifier">{{item.result.identifier}}</span>
       <span class="label" [title]="item.result.label">{{item.result.label}}</span>
       @if (item.downloadLink) {
         <a [href]="item.downloadLink" target="_blank" rel="noopener noreferrer"
-          title="Download the result" (click)="$event.stopPropagation()"><i nz-icon nzType="download"
-        nzTheme="outline"></i></a>
+          title="Download the result" aria-label="Download the result" (click)="$event.stopPropagation()"><i nz-icon nzType="download"
+        nzTheme="outline" aria-hidden="true"></i></a>
       }
       @if (item.viewLink) {
-        <a [href]="item.viewLink" target="_blank" rel="noopener noreferrer" title="View the result"
-          (click)="$event.stopPropagation()"><i nz-icon nzType="export" nzTheme="outline"></i></a>
+        <a [href]="item.viewLink" target="_blank" rel="noopener noreferrer" title="View the result" aria-label="View the result"
+          (click)="$event.stopPropagation()"><i nz-icon nzType="export" nzTheme="outline" aria-hidden="true"></i></a>
         }
       </nz-list-item>
     }
diff --git a/ui/src/app/views/projectv2/run/run-sources.component.ts b/ui/src/app/views/projectv2/run/run-sources.component.ts
index 73b88fa481..ec2545f6f6 100644
--- a/ui/src/app/views/projectv2/run/run-sources.component.ts
+++ b/ui/src/app/views/projectv2/run/run-sources.component.ts
@@ -56,7 +56,8 @@ export class RunSourcesComponent implements OnInit, OnChanges, OnDestroy {
 			language: 'yaml',
 			minimap: { enabled: false },
 			readOnly: true,
-			scrollBeyondLastLine: false
+			scrollBeyondLastLine: false,
+			ariaLabel: 'Workflow sources viewer'
 		};
 
 		this.resizingSubscription = this._store.select(PreferencesState.resizing).subscribe(resizing => {
diff --git a/ui/src/app/views/projectv2/run/run-test.component.ts b/ui/src/app/views/projectv2/run/run-test.component.ts
index a45d25afe0..082e06bb02 100644
--- a/ui/src/app/views/projectv2/run/run-test.component.ts
+++ b/ui/src/app/views/projectv2/run/run-test.component.ts
@@ -52,14 +52,16 @@ export class RunTestComponent implements OnInit, OnChanges, OnDestroy {
 			minimap: { enabled: false },
 			readOnly: true,
 			wordWrap: 'on',
-			scrollBeyondLastLine: false
+			scrollBeyondLastLine: false,
+			ariaLabel: 'Test report viewer'
 		};
 		this.editorOptionRaw = {
 			language: 'text',
 			minimap: { enabled: false },
 			readOnly: true,
 			wordWrap: 'on',
-			scrollBeyondLastLine: false
+			scrollBeyondLastLine: false,
+			ariaLabel: 'Test output viewer'
 		};
 
 		this.resizingSubscription = this._store.select(PreferencesState.resizing).subscribe(resizing => {
diff --git a/ui/src/app/views/projectv2/run/run-tests.html b/ui/src/app/views/projectv2/run/run-tests.html
index f010b2d931..dd4fcd6aed 100644
--- a/ui/src/app/views/projectv2/run/run-tests.html
+++ b/ui/src/app/views/projectv2/run/run-tests.html
@@ -1,13 +1,13 @@
 <div class="form">
   <nz-input-group [nzSuffix]="suffixIcon">
-    <input type="text" nz-input placeholder="Search" [ngModel]="searchValue" (ngModelChange)="updateSearch($event)" />
+    <input type="text" nz-input placeholder="Search" aria-label="Search tests" [ngModel]="searchValue" (ngModelChange)="updateSearch($event)" />
   </nz-input-group>
   <ng-template #suffixIcon>
-    <span nz-icon nzType="search"></span>
+    <span nz-icon nzType="search" aria-hidden="true"></span>
   </ng-template>
   <button [class.active]="filtered" nz-button nzType="default" nz-popover [nzPopoverContent]="contentFilter"
-    nzPopoverPlacement="bottomRight" nzPopoverTrigger="click">
-    <span nz-icon nzType="filter" nzTheme="outline"></span>
+    nzPopoverPlacement="bottomRight" nzPopoverTrigger="click" aria-label="Filter tests">
+    <span nz-icon nzType="filter" nzTheme="outline" aria-hidden="true"></span>
     @if (filtered && ((tests?.ok ?? 0) + (tests?.ko ?? 0) + (tests?.skipped ?? 0)) > 0) {
       <span>
       {{countDisplayedTests}}/{{(tests?.ok ?? 0) + (tests?.ko ?? 0) + (tests?.skipped ?? 0)}}</span>
@@ -19,25 +19,25 @@
 </div>
 <div class="content">
   @for (node of nodes; track node) {
-    <div class="tree-node-header large" (click)="clickTestSuite(node.key)">
-      <span nz-icon [nzType]="!treeExpandState[node.key] ? 'caret-right' : 'caret-down'" nzTheme="fill"></span>
+    <div class="tree-node-header large" appClickable [attr.aria-expanded]="!!treeExpandState[node.key]" (click)="clickTestSuite(node.key)">
+      <span nz-icon [nzType]="!treeExpandState[node.key] ? 'caret-right' : 'caret-down'" nzTheme="fill" aria-hidden="true"></span>
       <div class="name" [title]="node.title">
         <span class="title">
           {{node.title}}
         </span>
         @if (node.success > 0) {
-          <span class="ok">
-            <span nz-icon nzType="check" nzTheme="outline"></span>{{node.success}}
+          <span class="ok" [attr.aria-label]="node.success + ' passed'">
+            <span nz-icon nzType="check" nzTheme="outline" aria-hidden="true"></span>{{node.success}}
           </span>
         }
         @if (node.skipped > 0) {
-          <span class="skipped">
-            <span nz-icon nzType="warning" nzTheme="fill"></span>{{node.skipped}}
+          <span class="skipped" [attr.aria-label]="node.skipped + ' skipped'">
+            <span nz-icon nzType="warning" nzTheme="fill" aria-hidden="true"></span>{{node.skipped}}
           </span>
         }
         @if (node.failed > 0) {
-          <span class="ko">
-            <span nz-icon nzType="close" nzTheme="outline"></span>{{node.failed}}
+          <span class="ko" [attr.aria-label]="node.failed + ' failed'">
+            <span nz-icon nzType="close" nzTheme="outline" aria-hidden="true"></span>{{node.failed}}
           </span>
         }
       </div>
@@ -46,20 +46,20 @@
     @if (treeExpandState[node.key]) {
       <div class="tree-node-content">
         @for (child of node.children; track child) {
-          <div class="tree-node-header" (click)="clickTestCase(child.key)">
+          <div class="tree-node-header" appClickable (click)="clickTestCase(child.key)">
             @if (child.status ==='success') {
-              <span class="ok">
-                <span nz-icon nzType="check" nzTheme="outline"></span>
+              <span class="ok" role="img" aria-label="Status: success">
+                <span nz-icon nzType="check" nzTheme="outline" aria-hidden="true"></span>
               </span>
             }
             @if (child.status ==='skipped') {
-              <span class="skipped">
-                <span nz-icon nzType="warning" nzTheme="fill"></span>
+              <span class="skipped" role="img" aria-label="Status: skipped">
+                <span nz-icon nzType="warning" nzTheme="fill" aria-hidden="true"></span>
               </span>
             }
             @if (child.status ==='failed') {
-              <span class="ko">
-                <span nz-icon nzType="close" nzTheme="outline"></span>
+              <span class="ko" role="img" aria-label="Status: failed">
+                <span nz-icon nzType="close" nzTheme="outline" aria-hidden="true"></span>
               </span>
             }
             <div class="name title" [title]="child.title">
diff --git a/ui/src/app/views/projectv2/run/run.component.ts b/ui/src/app/views/projectv2/run/run.component.ts
index f54e3f0863..24f2d4b5ea 100644
--- a/ui/src/app/views/projectv2/run/run.component.ts
+++ b/ui/src/app/views/projectv2/run/run.component.ts
@@ -21,6 +21,7 @@ import { NzDrawerService } from "ng-zorro-antd/drawer";
 import { ProjectV2RunStartComponent, ProjectV2RunStartComponentParams } from "../run-start/run-start.component";
 import { HttpClient, HttpHeaders, HttpParams } from "@angular/common/http";
 import { Clipboard } from '@angular/cdk/clipboard';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { GraphComponent } from "../../../../../libs/workflow-graph/src/public-api";
 import { Title } from "@angular/platform-browser";
 import { WebsocketV2Filter, WebsocketV2FilterType } from "app/model/websocket-v2";
@@ -119,6 +120,7 @@ export class ProjectV2RunComponent implements AfterViewInit, OnDestroy {
     private _titleService = inject(Title);
     private _http = inject(HttpClient);
     private _eventV2Service = inject(EventV2Service);
+    private _liveAnnouncer = inject(LiveAnnouncer);
 
     constructor() {
         this.paramsSub = this._route.params.pipe(
@@ -158,6 +160,10 @@ export class ProjectV2RunComponent implements AfterViewInit, OnDestroy {
             if (!event || [EventV2Type.EventRunCrafted, EventV2Type.EventRunBuilding, EventV2Type.EventRunEnded, EventV2Type.EventRunRestart].indexOf(event.type) === -1) { return; }
             if (!this.runs) { return; }
             const idx = this.runs.findIndex(run => run.id === event.workflow_run_id);
+            if (idx !== -1 && this.workflowRun && event.workflow_run_id === this.workflowRun.id
+                && this.runs[idx].status !== event.payload.status) {
+                this._liveAnnouncer.announce(`Run ${event.payload.run_number} ${event.payload.status}`, 'polite');
+            }
             delete (this.animatedRuns[event.payload.id]);
             this._cd.detectChanges();
             if (idx !== -1) {
diff --git a/ui/src/app/views/projectv2/run/run.html b/ui/src/app/views/projectv2/run/run.html
index 5dfe58dc1e..2c677c0ad9 100644
--- a/ui/src/app/views/projectv2/run/run.html
+++ b/ui/src/app/views/projectv2/run/run.html
@@ -8,18 +8,18 @@
   <div class="tests">
     Tests
     @if (tests && tests.ok > 0) {
-      <span class="ok">
-        <span nz-icon nzType="check" nzTheme="outline"></span>{{tests.ok}}
+      <span class="ok" [attr.aria-label]="tests.ok + ' passed'">
+        <span nz-icon nzType="check" nzTheme="outline" aria-hidden="true"></span>{{tests.ok}}
       </span>
     }
     @if (tests && tests.skipped > 0) {
-      <span class="skipped">
-        <span nz-icon nzType="warning" nzTheme="fill"></span>{{tests.skipped}}
+      <span class="skipped" [attr.aria-label]="tests.skipped + ' skipped'">
+        <span nz-icon nzType="warning" nzTheme="fill" aria-hidden="true"></span>{{tests.skipped}}
       </span>
     }
     @if (tests && tests.ko > 0) {
-      <span class="ko">
-        <span nz-icon nzType="close" nzTheme="outline"></span>{{tests.ko}}
+      <span class="ko" [attr.aria-label]="tests.ko + ' failed'">
+        <span nz-icon nzType="close" nzTheme="outline" aria-hidden="true"></span>{{tests.ko}}
       </span>
     }
   </div>
@@ -43,21 +43,21 @@
             [class.skipped]="run.status === 'Skipped'">#{{run.run_number}}</span>
             <ng-template #runDetails>
               <div class="run-details">
-                <div class="run-avatar" [title]="'Status: ' + run.status">
+                <div class="run-avatar" [title]="'Status: ' + run.status" role="img" [attr.aria-label]="'Status: ' + run.status">
                   @if (run.status === 'Success') {
                     <span class="success" nz-icon nzType="check-circle"
-                    nzTheme="outline"></span>
+                    nzTheme="outline" aria-hidden="true"></span>
                   }
                   @if (run.status === 'Cancelled') {
                     <span class="cancelled" nz-icon nzType="close-circle"
-                    nzTheme="outline"></span>
+                    nzTheme="outline" aria-hidden="true"></span>
                   }
                   @if (run.status === 'Fail') {
                     <span class="fail" nz-icon nzType="close-circle"
-                    nzTheme="outline"></span>
+                    nzTheme="outline" aria-hidden="true"></span>
                   }
                   @if (run.status === 'Stopped') {
-                    <span class="stopped" nz-icon>
+                    <span class="stopped" nz-icon aria-hidden="true">
                       <svg>
                         <path d="M 760 260 h -500 v 500 h 500 z"></path>
                       </svg>
@@ -65,15 +65,15 @@
                   }
                   @if (run.status === 'Building') {
                     <span class="building" nz-icon nzType="play-circle"
-                    nzTheme="outline"></span>
+                    nzTheme="outline" aria-hidden="true"></span>
                   }
                   @if (run.status === 'Blocked') {
                     <span class="blocked" nz-icon nzType="pause-circle"
-                    nzTheme="outline"></span>
+                    nzTheme="outline" aria-hidden="true"></span>
                   }
                   @if (run.status === 'Skipped') {
                     <span class="skipped" nz-icon nzType="stop"
-                    nzTheme="outline"></span>
+                    nzTheme="outline" aria-hidden="true"></span>
                   }
                 </div>
                 <div class="run-info">
@@ -101,7 +101,7 @@
             @if (workflowRun.run_attempt > 1 && selectedRunAttempt) {
               <nz-select
                 [ngModel]="selectedRunAttempt" (ngModelChange)="changeRunAttempt($event)" nzSize="small"
-                title="Select run attempt">
+                title="Select run attempt" aria-label="Select run attempt">
                 @for (item of [].constructor(workflowRun.run_attempt); track item; let i = $index) {
                   <nz-option
                   [nzValue]="workflowRun.run_attempt-i" [nzLabel]="workflowRun.run_attempt-i"></nz-option>
@@ -110,14 +110,14 @@
             }
             <button nz-button nzType="default" nzSize="small" title="Show workflow sources"
               (click)="openPanel('sources')"><span nz-icon nzType="file-text"
-            nzTheme="outline"></span>Sources</button>
+            nzTheme="outline" aria-hidden="true"></span>Sources</button>
             <button nz-button nzType="default" nzSize="small" title="Show workflow run contexts"
               (click)="openPanel('contexts')"><span nz-icon nzType="read"
-            nzTheme="outline"></span>Contexts</button>
+            nzTheme="outline" aria-hidden="true"></span>Contexts</button>
             <a nz-button nzType="link" title="Show workflow in Explore view"
               [routerLink]="['/project', projectKey, 'explore', 'vcs', workflowRun.vcs_server, 'repository', workflowRun.repository, 'workflow', workflowRun.workflow_name]"
               [queryParams]="{ref: workflowRun.workflow_ref}">
-              <span nz-icon nzType="folder-view" nzTheme="outline"></span>Show in Explore</a>
+              <span nz-icon nzType="folder-view" nzTheme="outline" aria-hidden="true"></span>Show in Explore</a>
             </nz-page-header-title>
             <nz-page-header-content>
               <span nz-typography nzType="secondary">
@@ -127,7 +127,7 @@
                     [routerLink]="['/project', workflowRun.contexts.cds.workflow_template_project_key, 'explore', 'vcs', workflowRun.contexts.cds.workflow_template_vcs_server, 'repository', workflowRun.contexts.cds.workflow_template_repository, 'workflowtemplate', workflowRun.contexts.cds.workflow_template]">
                   {{workflowRun.contexts.cds.workflow_template_vcs_server}}/{{workflowRun.contexts.cds.workflow_template_repository}}/{{workflowRun.contexts.cds.workflow_template}}</a>
                   <span class="templateDetails" nz-icon nzType="eye" nzTheme="outline" nz-tooltip
-                  [nzTooltipTitle]="templateTooltip"></span>
+                  [nzTooltipTitle]="templateTooltip" role="img" aria-label="Template details"></span>
                   <ng-template #templateTooltip>
                     Repository: <a
                     href="{{workflowRun.contexts.cds.workflow_template_repository_web_url}}"
@@ -190,7 +190,7 @@
       <app-searchable [link]="['/project', projectKey, 'run']"
         [params]="generateAnnotationQueryParams(annotation)">
         @if (annotation.value !== 'true') {
-          <nz-tag nzColor="default" style="cursor: copy;"
+          <nz-tag nzColor="default" style="cursor: copy;" appClickable
             title="key: {{annotation.key}} - value: {{annotation.value}}"
             (click)="confirmCopyAnnotationValue($event, annotation.value)">
             <b>{{annotation.key}}:</b> {{annotation.value}}
@@ -241,8 +241,8 @@
         </button>
       }
       <button nz-button nzSize="large" nz-dropdown [nzDropdownMenu]="menu" nzPlacement="topRight"
-        [nzLoading]="loading.restart">
-        <span nz-icon nzType="ellipsis"></span>
+        [nzLoading]="loading.restart" aria-label="More job selection options">
+        <span nz-icon nzType="ellipsis" aria-hidden="true"></span>
         <nz-dropdown-menu #menu="nzDropdownMenu">
           <ul nz-menu>
             @if (hasJobsFailed) {
@@ -265,8 +265,8 @@
     run</button>
   }
   <div class="help" nz-tooltip [nzTooltipTitle]="keyboardShortcutsTooltip" nzTooltipPlacement="top"
-    [nzTooltipOverlayStyle]="{maxWidth: '350px'}">
-    <nz-icon nzType="question-circle" nzTheme="outline" />
+    [nzTooltipOverlayStyle]="{maxWidth: '350px'}" role="img" aria-label="Keyboard shortcuts help">
+    <nz-icon nzType="question-circle" nzTheme="outline" aria-hidden="true" />
   </div>
   <ng-template #keyboardShortcutsTooltip>
     <div class="shortcuts-tooltip">
@@ -315,16 +315,16 @@
     (onGrabbingStart)="panelStartResize()" (onGrabbingEnd)="jobPanelEndResize($event)"
     (dblclick)="$event.stopPropagation(); dblClickOnPanel()">
     <div class="controls">
-      <div class="control" title="Close panel" (click)="clickClosePanel()">
-        <span nz-icon nzType="close" nzTheme="outline"></span>
+      <div class="control" title="Close panel" appClickable aria-label="Close panel" (click)="clickClosePanel()">
+        <span nz-icon nzType="close" nzTheme="outline" aria-hidden="true"></span>
       </div>
-      <div class="control" title="Expand/Reduce panel" [class.expand]="!panelExpanded"
-        [class.expanded]="panelExpanded" (click)="clickExpandPanel()">
-        <span nz-icon nzType="vertical-align-top" nzTheme="outline"></span>
+      <div class="control" title="Expand/Reduce panel" appClickable aria-label="Expand or reduce panel" [class.expand]="!panelExpanded"
+        [class.expanded]="panelExpanded" (click)="clickExpandPanel()" [attr.aria-expanded]="panelExpanded">
+        <span nz-icon nzType="vertical-align-top" nzTheme="outline" aria-hidden="true"></span>
       </div>
-      <a class="control" title="Copy share link" [href]="selectedItemShareLink" #shareLink
+      <a class="control" title="Copy share link" aria-label="Copy share link" [href]="selectedItemShareLink" #shareLink
         (click)="confirmCopy($event)">
-        <span nz-icon nzType="share-alt" nzTheme="outline"></span>
+        <span nz-icon nzType="share-alt" nzTheme="outline" aria-hidden="true"></span>
       </a>
     </div>
     @if (selectedItemType === 'job') {
diff --git a/ui/src/app/views/search/search.html b/ui/src/app/views/search/search.html
index 87c251275a..d5e4f8d77d 100644
--- a/ui/src/app/views/search/search.html
+++ b/ui/src/app/views/search/search.html
@@ -53,7 +53,7 @@
                   }
                 }
                 @if (item.result.variants.length > 3 && !item.unfold) {
-                  <a title="{{item.result.variants.length-3}} more"
+                  <a title="{{item.result.variants.length-3}} more" appClickable
                     (click)="unfoldItem(item.result.id)">
                     ...{{item.result.variants.length-3}} more
                   </a>
@@ -66,26 +66,26 @@
           <nz-list-item-action>
             @if (item.result.type === 'project') {
               <a class="action" [routerLink]="item.exploreLink.path"
-                [queryParams]="item.exploreLink.params" title="Explore" nz-button>
-                <span nz-icon nzType="folder" nzTheme="outline"></span>
+                [queryParams]="item.exploreLink.params" title="Explore" aria-label="Explore" nz-button>
+                <span nz-icon nzType="folder" nzTheme="outline" aria-hidden="true"></span>
               </a>
             }
             @if (item.result.type === 'project') {
               <a class="action" [routerLink]="item.runLink.path"
-                [queryParams]="item.runLink.params" title="Run list" nz-button>
-                <span nz-icon nzType="play-circle" nzTheme="outline"></span>
+                [queryParams]="item.runLink.params" title="Run list" aria-label="Run list" nz-button>
+                <span nz-icon nzType="play-circle" nzTheme="outline" aria-hidden="true"></span>
               </a>
             }
             @if (item.result.type === 'workflow') {
               <a class="action" [routerLink]="item.exploreLink.path"
-                [queryParams]="item.exploreLink.params" title="Show sources" nz-button>
-                <span nz-icon nzType="file-text" nzTheme="outline"></span>
+                [queryParams]="item.exploreLink.params" title="Show sources" aria-label="Show sources" nz-button>
+                <span nz-icon nzType="file-text" nzTheme="outline" aria-hidden="true"></span>
               </a>
             }
             @if (item.result.type === 'workflow') {
               <a class="action" [routerLink]="item.runLink.path"
-                [queryParams]="item.runLink.params" title="Run list" nz-button>
-                <span nz-icon nzType="play-circle" nzTheme="outline"></span>
+                [queryParams]="item.runLink.params" title="Run list" aria-label="Run list" nz-button>
+                <span nz-icon nzType="play-circle" nzTheme="outline" aria-hidden="true"></span>
               </a>
             }
           </nz-list-item-action>
diff --git a/ui/src/app/views/settings/action/form/action.form.html b/ui/src/app/views/settings/action/form/action.form.html
index f89045d716..7fc8e507d4 100644
--- a/ui/src/app/views/settings/action/form/action.form.html
+++ b/ui/src/app/views/settings/action/form/action.form.html
@@ -3,19 +3,19 @@
     <nz-row>
       <nz-col [nzSpan]="8">
         <nz-form-item>
-          <nz-form-label>Name</nz-form-label>
+          <nz-form-label nzFor="cds-field-action-name">Name</nz-form-label>
           <nz-form-control>
-            <input nz-input name="actionName" placeholder="Action name" [(ngModel)]="action.name"
+            <input nz-input name="actionName" id="cds-field-action-name" placeholder="Action name" [(ngModel)]="action.name"
               (keydown)="action.hasChanged = true; keyEvent($event)" [readonly]="!action.editable">
           </nz-form-control>
         </nz-form-item>
       </nz-col>
       <nz-col [nzSpan]="8">
         <nz-form-item>
-          <nz-form-label>Group</nz-form-label>
+          <nz-form-label nzFor="cds-field-action-group">Group</nz-form-label>
           <nz-form-control>
             @if (groups && action.editable) {
-              <nz-select nzShowSearch name="group" nzPlaceHolder="Group name"
+              <nz-select nzShowSearch name="group" id="cds-field-action-group" nzPlaceHolder="Group name"
                 [(ngModel)]="action.group_id" (ngModelChange)="refreshActions()">
                 @for (group of groups; track group) {
                   <nz-option [nzValue]="group.id"
@@ -25,7 +25,7 @@
             }
             @if (!action.editable) {
               @if (!action.editable) {
-                <input nz-input type="text" name="group" [ngModel]="action.group?.name"
+                <input nz-input type="text" name="group" id="cds-field-action-group-ro" [ngModel]="action.group?.name"
                   [readonly]="true">
               }
             }
@@ -39,7 +39,7 @@
       <nz-col [nzSpan]="4">
         <nz-form-item>
           <nz-form-control>
-            <a class="pointing"
+            <a class="pointing" appClickable
               (click)="prepareEditRequirements(); requirementModalVisible = true">
               {{ action.requirements.length + ' '}}{{'common_requirements' | translate }}
             </a>
@@ -70,10 +70,10 @@
     <nz-row>
       <nz-col [nzSpan]="16">
         <nz-form-item>
-          <nz-form-label>Description</nz-form-label>
+          <nz-form-label nzFor="cds-field-action-description">Description</nz-form-label>
           <nz-form-control>
             @if (action.editable;) {
-              <textarea nz-input [disabled]="!action.editable" name="actionDescription"
+              <textarea nz-input [disabled]="!action.editable" name="actionDescription" id="cds-field-action-description"
                 placeholder="description"
                 [(ngModel)]="action.description" rows="{{getDescriptionHeight()}}"
               (keydown)="action.hasChanged = true; keyEvent($event)"></textarea>
@@ -114,11 +114,11 @@
       <div class="jobSectionTitle">
         <button nz-button (click)="collapsed = !collapsed" class="hideButton">
           @if (collapsed) {
-            <i nz-icon nzType="eye-invisible" nzTheme="outline"></i>
+            <i nz-icon nzType="eye-invisible" nzTheme="outline" aria-hidden="true"></i>
             Hide all
           }
           @if (!collapsed) {
-            <i nz-icon nzType="eye" nzTheme="outline"></i>
+            <i nz-icon nzType="eye" nzTheme="outline" aria-hidden="true"></i>
             Show all
           }
         </button>
@@ -162,20 +162,20 @@
         @if (action.id) {
           <button (click)="saveAction()" nzType="primary" class="validButton" name="updatebtn" [nzLoading]="loading"
             nz-button>
-            <i nz-icon nzType="save" nzTheme="outline"></i>Save
+            <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>Save
           </button>
           <button nz-popconfirm nzDanger class="validButton ml10"
             nzType="default"
             nzPopconfirmTitle="Are you sure you want to delete this action?"
             (nzOnConfirm)="deleteAction()"
             nzPopconfirmPlacement="topLeft"
-            nz-button><i nz-icon nzType="delete" nzTheme="outline"></i>Delete
+            nz-button><i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>Delete
           </button>
         }
         @if (!action.id) {
           <div nz-col nzSpan="24">
             <button nz-button nzType="primary" name="addbtn" (click)="saveAction()" [nzLoading]="loading" nzBlock>
-              <i nz-icon nzType="save" nzTheme="outline"></i>Create
+              <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>Create
             </button>
           </div>
         }
diff --git a/ui/src/app/views/settings/action/help/action.help.html b/ui/src/app/views/settings/action/help/action.help.html
index 64fc310294..a07b94fb7f 100644
--- a/ui/src/app/views/settings/action/help/action.help.html
+++ b/ui/src/app/views/settings/action/help/action.help.html
@@ -1,6 +1,6 @@
 
     <div class="nzSegment">
-        <h2><span nz-icon nzType="book" nzTheme="outline"></span> {{ 'settings_tips' | translate }}</h2>
+        <h2><span nz-icon nzType="book" nzTheme="outline" aria-hidden="true"></span> {{ 'settings_tips' | translate }}</h2>
         <a class="item" href="#" [routerLink]="['/docs', 'docs', 'actions']" target="_blank" rel="noopener noreferrer">{{'action_help_line_1'
                 | translate}}</a>
     </div>
diff --git a/ui/src/app/views/settings/action/usage/action.usage.html b/ui/src/app/views/settings/action/usage/action.usage.html
index ece330f849..b623ba4055 100644
--- a/ui/src/app/views/settings/action/usage/action.usage.html
+++ b/ui/src/app/views/settings/action/usage/action.usage.html
@@ -9,7 +9,7 @@ <h3>{{ 'action_usage_pipelines_using' | translate }}</h3>
               {{p.project_name}} - {{p.pipeline_name}} - {{p.action_name}}
             </a>
             @if (p.warning) {
-              <i class="warning" nz-icon nzType="warning" nzTheme="fill" nz-tooltip nzTooltipTitle="The pipeline will not be able to run this action because of missing group permission."></i>
+              <i class="warning" nz-icon nzType="warning" nzTheme="fill" nz-tooltip nzTooltipTitle="The pipeline will not be able to run this action because of missing group permission." role="img" aria-label="The pipeline will not be able to run this action because of missing group permission."></i>
             }
           </li>
         }
@@ -23,7 +23,7 @@ <h3>{{ 'action_usage_actions_using' | translate }}</h3>
             <a [routerLink]="['/settings/action', a.group_name, a.parent_action_name]">
             {{a.group_name ? a.group_name+'/' : ''}}{{a.parent_action_name}}</a>
             @if (a.warning) {
-              <i class="warning" nz-icon nzType="warning" nzTheme="fill" nz-tooltip nzTooltipTitle="The parent action will not be able to run this action because they are not in the same group."></i>
+              <i class="warning" nz-icon nzType="warning" nzTheme="fill" nz-tooltip nzTooltipTitle="The parent action will not be able to run this action because they are not in the same group." role="img" aria-label="The parent action will not be able to run this action because they are not in the same group."></i>
             }
           </li>
         }
diff --git a/ui/src/app/views/settings/group/edit/group.edit.html b/ui/src/app/views/settings/group/edit/group.edit.html
index 273c7192da..45ffda9898 100644
--- a/ui/src/app/views/settings/group/edit/group.edit.html
+++ b/ui/src/app/views/settings/group/edit/group.edit.html
@@ -7,9 +7,9 @@
           <nz-row>
             <nz-col [nzSpan]="24">
               <nz-form-item>
-                <nz-form-label>Group name</nz-form-label>
+                <nz-form-label nzFor="cds-field-name">Group name</nz-form-label>
                 <nz-form-control>
-                  <input nz-input type="text" name="name" [(ngModel)]="group.name"
+                  <input nz-input type="text" name="name" id="cds-field-name" [(ngModel)]="group.name"
                     [readonly]="loading">
                 </nz-form-control>
               </nz-form-item>
@@ -19,9 +19,9 @@
             <nz-row>
               <nz-col [nzSpan]="24">
                 <nz-form-item>
-                  <nz-form-label>Organization</nz-form-label>
+                  <nz-form-label nzFor="cds-field-organization">Organization</nz-form-label>
                   <nz-form-control>
-                    <input nz-input type="text" name="organization"
+                    <input nz-input type="text" name="organization" id="cds-field-organization"
                       [ngModel]="group.organization" readonly>
                   </nz-form-control>
                 </nz-form-item>
@@ -32,13 +32,13 @@
             <nz-row>
               <nz-col [nzSpan]="24">
                 <button nz-button nzType="primary" [nzLoading]="loading" (click)="saveGroup()">
-                  <i nz-icon nzType="save" nzTheme="outline"></i>Save
+                  <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>Save
                 </button>
                 @if (group.id) {
                   <button nz-button nzDanger nzType="primary" (nzOnConfirm)="clickDelete()"
                     [nzLoading]="deleteLoading" nzPopconfirmPlacement="topLeft"
                     nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this group ?">
-                    <i nz-icon nzType="delete" nzTheme="outline"></i>Delete
+                    <i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>Delete
                   </button>
                 }
               </nz-col>
@@ -50,9 +50,9 @@
             @if (currentAuthSummary.isAdmin() || currentUserIsAdminOnGroup) {
               <form nz-form>
                 <nz-form-item>
-                  <nz-form-label>Members</nz-form-label>
+                  <nz-form-label nzFor="cds-field-members">Members</nz-form-label>
                   <nz-form-control>
-                    <nz-select nzShowSearch name="username" [nzLoading]="loading" [(ngModel)]="addUserUsername">
+                    <nz-select nzShowSearch name="username" id="cds-field-members" [nzLoading]="loading" [(ngModel)]="addUserUsername">
                       @for (user of users; track user) {
 <nz-option [nzValue]="user.username" nzLabel="{{user.fullname}} - {{user.username}} {{user.organization ?
                                             '(' + user.organization + ')' : ''}}"></nz-option>
@@ -60,7 +60,7 @@
                     </nz-select>
                   </nz-form-control>
                   <button nz-button nzType="primary" [nzLoading]="loading" (click)="clickAddMember()">
-                    <i nz-icon nzType="plus" nzTheme="outline"></i>Add
+                    <i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i>Add
                   </button>
                 </nz-form-item>
               </form>
@@ -75,7 +75,7 @@
                     <th>
                       Username
                       <nz-filter-trigger [(nzVisible)]="usernameFilterVisible" [nzActive]="usernameFilter?.length > 0" [nzDropdownMenu]="usernameDropdown">
-                        <i nz-icon nzType="search"></i>
+                        <i nz-icon nzType="search" aria-hidden="true"></i>
                       </nz-filter-trigger>
                     </th>
                     <th>Fullname</th>
@@ -87,7 +87,7 @@
                     <tr>
                       <td>
                         @if (m.admin) {
-                          <span nz-icon nzType="crown" nzTheme="outline" title="{{ 'group_user_is_admin' | translate }}"></span>
+                          <span nz-icon nzType="crown" nzTheme="outline" title="{{ 'group_user_is_admin' | translate }}" role="img" [attr.aria-label]="'group_user_is_admin' | translate"></span>
                         }
                         {{m?.username}}
                       </td>
@@ -100,19 +100,19 @@
                             <button nz-button nzDanger nzType="primary" [nzLoading]="deleteLoading"
                               (nzOnConfirm)="clickRemoveMember(m.username)"
                               nz-popconfirm nzPopconfirmTitle="Are you sure you want to remove {{m.fullname}} from this group ?">
-                              <i nz-icon nzType="delete" nzTheme="outline"></i>Remove
+                              <i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>Remove
                             </button>
                           }
                           @if (!m.admin) {
                             <button nz-button
                               [nzLoading]="loading" (click)="clickSetAdmin(m.username)">
-                              <i nz-icon nzType="plus" nzTheme="outline"></i>Admin
+                              <i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i>Admin
                             </button>
                           }
                           @if (m.admin) {
                             <button nz-button
                               [nzLoading]="loading" (click)="clickUnsetAdmin(m.username)">
-                              <span nz-icon nzType="minus" nzTheme="outline"></span>Admin
+                              <span nz-icon nzType="minus" nzTheme="outline" aria-hidden="true"></span>Admin
                             </button>
                           }
                         }
@@ -125,7 +125,7 @@
             <nz-dropdown-menu #usernameDropdown="nzDropdownMenu">
               <div class="ant-table-filter-dropdown">
                 <div class="search-box">
-                  <input type="text" nz-input placeholder="Search name" [(ngModel)]="usernameFilter" />
+                  <input type="text" nz-input placeholder="Search name" aria-label="Search name" [(ngModel)]="usernameFilter" />
                   <button nz-button nzSize="small" nzType="primary" (click)="searchUsername()" class="search-button">Search</button>
                   <button nz-button nzSize="small" (click)="usernameFilter = ''; searchUsername()">Reset</button>
                 </div>
diff --git a/ui/src/app/views/settings/queue/queue.component.html b/ui/src/app/views/settings/queue/queue.component.html
index 43f55b8782..a47f183b54 100644
--- a/ui/src/app/views/settings/queue/queue.component.html
+++ b/ui/src/app/views/settings/queue/queue.component.html
@@ -49,8 +49,8 @@
       </tbody>
     </nz-table>
     <div class="footer">
-      <button nz-button nzType="primary" (click)="loadJobsV1()" title="Refresh jobs"><span nz-icon
-      [nzType]="'reload'"></span></button>
+      <button nz-button nzType="primary" (click)="loadJobsV1()" title="Refresh jobs" aria-label="Refresh jobs"><span nz-icon
+      [nzType]="'reload'" aria-hidden="true"></span></button>
       {{jobsV1Table.data.length}} results
       <nz-pagination [nzPageIndex]="pageIndexV1" [nzPageSize]="100" [nzTotal]="jobsV1Table.data.length"
       (nzPageIndexChange)="pageIndexV1Change($event)"></nz-pagination>
@@ -99,8 +99,8 @@
       </tbody>
     </nz-table>
     <div class="footer">
-      <button nz-button nzType="primary" (click)="loadJobsV2()" title="Refresh jobs"><span nz-icon
-      [nzType]="'reload'"></span></button>
+      <button nz-button nzType="primary" (click)="loadJobsV2()" title="Refresh jobs" aria-label="Refresh jobs"><span nz-icon
+      [nzType]="'reload'" aria-hidden="true"></span></button>
       {{jobsV2totalCount}} results
       <nz-pagination [nzPageIndex]="pageIndexV2" [nzPageSize]="100" [nzTotal]="jobsV2totalCount"
       (nzPageIndexChange)="pageIndexV2Change($event)"></nz-pagination>
diff --git a/ui/src/app/views/settings/user/consumer-create-modal/consumer-create-modal.html b/ui/src/app/views/settings/user/consumer-create-modal/consumer-create-modal.html
index 97548f45aa..cbc3be25c7 100644
--- a/ui/src/app/views/settings/user/consumer-create-modal/consumer-create-modal.html
+++ b/ui/src/app/views/settings/user/consumer-create-modal/consumer-create-modal.html
@@ -11,18 +11,18 @@
                 <nz-row>
                   <nz-col [nzSpan]="10">
                     <nz-form-item>
-                      <nz-form-label>Name</nz-form-label>
+                      <nz-form-label nzFor="cds-field-name">Name</nz-form-label>
                       <nz-form-control>
-                        <input nz-input type="text" name="name"
+                        <input nz-input type="text" name="name" id="cds-field-name"
                           [(ngModel)]="newConsumer.name">
                       </nz-form-control>
                     </nz-form-item>
                   </nz-col>
                   <nz-col [nzSpan]="10" [nzOffset]="4">
                     <nz-form-item>
-                      <nz-form-label>Description</nz-form-label>
+                      <nz-form-label nzFor="cds-field-description">Description</nz-form-label>
                       <nz-form-control>
-                        <input nz-input type="text" name="group"
+                        <input nz-input type="text" name="group" id="cds-field-description"
                           [(ngModel)]="newConsumer.description">
                       </nz-form-control>
                     </nz-form-item>
@@ -31,9 +31,9 @@
                 <nz-row>
                   <nz-col [nzSpan]="10">
                     <nz-form-item>
-                      <nz-form-label>TTL (in days)</nz-form-label>
+                      <nz-form-label nzFor="cds-field-duration">TTL (in days)</nz-form-label>
                       <nz-form-control>
-                        <input nz-input type="number" name="duration" min="1" max="365"
+                        <input nz-input type="number" name="duration" id="cds-field-duration" min="1" max="365"
                           [(ngModel)]="newConsumer.validity_periods[0].duration">
                       </nz-form-control>
                     </nz-form-item>
@@ -80,27 +80,27 @@
                 <nz-row>
                   <nz-col [nzSpan]="8">
                     <nz-form-item>
-                      <nz-form-label>Name</nz-form-label>
+                      <nz-form-label nzFor="cds-field-service-name">Name</nz-form-label>
                       <nz-form-control>
-                        <input nz-input type="text" name="name"
+                        <input nz-input type="text" name="name" id="cds-field-service-name"
                           [(ngModel)]="newConsumer.auth_consumer_user.service_name">
                       </nz-form-control>
                     </nz-form-item>
                   </nz-col>
                   <nz-col [nzSpan]="7" [nzOffset]="1">
                     <nz-form-item>
-                      <nz-form-label>Type</nz-form-label>
+                      <nz-form-label nzFor="cds-field-service-type">Type</nz-form-label>
                       <nz-form-control>
-                        <input nz-input type="text" name="type"
+                        <input nz-input type="text" name="type" id="cds-field-service-type"
                           [(ngModel)]="newConsumer.auth_consumer_user.service_type">
                       </nz-form-control>
                     </nz-form-item>
                   </nz-col>
                   <nz-col [nzSpan]="7" [nzOffset]="1">
                     <nz-form-item>
-                      <nz-form-label>Region</nz-form-label>
+                      <nz-form-label nzFor="cds-field-service-region">Region</nz-form-label>
                       <nz-form-control>
-                        <input nz-input type="text" name="region"
+                        <input nz-input type="text" name="region" id="cds-field-service-region"
                           [(ngModel)]="newConsumer.auth_consumer_user.service_region">
                         <label nz-checkbox name="ignore" [(ngModel)]="newConsumer.auth_consumer_user.service_ignore_job_with_no_region">
                           Ignore job with no region
@@ -142,7 +142,7 @@
           nz-button nzType="primary"
           (click)="clickNext()">
           @if (activeStep === formStepName.SERVICE) {
-            <i nz-icon nzType="save" nzTheme="outline"></i>
+            <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>
             Create
           } @else {
             Next
diff --git a/ui/src/app/views/settings/user/consumer-create-modal/scope-detail.html b/ui/src/app/views/settings/user/consumer-create-modal/scope-detail.html
index 9457a90167..4c8eeb4412 100644
--- a/ui/src/app/views/settings/user/consumer-create-modal/scope-detail.html
+++ b/ui/src/app/views/settings/user/consumer-create-modal/scope-detail.html
@@ -5,7 +5,7 @@
         {{scopeDetail.scope}}
       </nz-col>
       <nz-col [nzSpan]="10" [nzOffset]="8">
-        <a class="pointing advanced" (click)="clickAdvanced()">Advanced</a>
+        <a class="pointing advanced" appClickable (click)="clickAdvanced()">Advanced</a>
         <label nz-checkbox [ngModel]="allReadRoutesSelected" (nzCheckedChange)="clickSelectAllRoutesRead()">Read</label>
         <label nz-checkbox [ngModel]="allWriteRoutesSelected" (nzCheckedChange)="clickSelectAllRoutesWrite()">Write</label>
         <label nz-checkbox [ngModel]="allRoutesSelected" (nzCheckedChange)="clickSelectAllRoutes()">All</label>
diff --git a/ui/src/app/views/settings/user/consumer-details-modal/consumer-details-modal.html b/ui/src/app/views/settings/user/consumer-details-modal/consumer-details-modal.html
index 6260113de2..2eabc53e7d 100644
--- a/ui/src/app/views/settings/user/consumer-details-modal/consumer-details-modal.html
+++ b/ui/src/app/views/settings/user/consumer-details-modal/consumer-details-modal.html
@@ -28,7 +28,7 @@
             {{groups}}
             @if (consumer.warnings) {
               <span nz-tooltip [nzTooltipTitle]="warningText">
-                {{' '}}<i nz-icon nzType="warning" nzTheme="fill" class="orange" nz-tooltip nzTooltipTitle="{{warningText}}"></i>
+                {{' '}}<i nz-icon nzType="warning" nzTheme="fill" class="orange" nz-tooltip nzTooltipTitle="{{warningText}}" role="img" [attr.aria-label]="warningText"></i>
               </span>
             }
           </nz-form-control>
@@ -63,7 +63,7 @@
         @if (menuItems?.size > 0) {
           <ul nz-menu nzMode="horizontal">
             @for (entry of menuItems | forMap; track entry) {
-              <li nz-menu-item [nzSelected]="selectedItem === entry.key" (click)="selectMenuItem(entry.key)">
+              <li nz-menu-item appClickable [nzSelected]="selectedItem === entry.key" (click)="selectMenuItem(entry.key)">
                 {{entry.value}}
               </li>
             }
@@ -125,12 +125,12 @@
                     <button nz-button nzType="primary" (click)="clickRegen(false)">Regen
                     </button>
                     <button nz-button nzType="primary" nz-dropdown [nzDropdownMenu]="menu"
-                      nzPlacement="bottomRight">
-                      <i nz-icon nzType="down"></i>
+                      nzPlacement="bottomRight" aria-label="More regenerate options">
+                      <i nz-icon nzType="down" aria-hidden="true"></i>
                     </button>
                     <nz-dropdown-menu #menu="nzDropdownMenu">
                       <ul nz-menu>
-                        <li nz-menu-item (click)="clickRegen(true)">
+                        <li nz-menu-item appClickable (click)="clickRegen(true)">
                           {{'auth_consumer_regen_revoke' | translate }}
                         </li>
                       </ul>
diff --git a/ui/src/app/views/settings/user/consumer-display-signin-token/consumer-display-signin-token.html b/ui/src/app/views/settings/user/consumer-display-signin-token/consumer-display-signin-token.html
index 2dd2a2f729..ffcfc2db86 100644
--- a/ui/src/app/views/settings/user/consumer-display-signin-token/consumer-display-signin-token.html
+++ b/ui/src/app/views/settings/user/consumer-display-signin-token/consumer-display-signin-token.html
@@ -4,15 +4,15 @@
       <nz-alert nzType="info" nzMessage="You can now use this token to signin with the consumer"></nz-alert>
       <form nz-form>
         <nz-form-item>
-          <nz-form-label>Token</nz-form-label>
+          <nz-form-label nzFor="cds-field-token">Token</nz-form-label>
           <nz-form-control>
             <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
-              <input type="text" nz-input value="{{signinToken}}" [readonly]="true" />
+              <input type="text" nz-input id="cds-field-token" value="{{signinToken}}" [readonly]="true" />
             </nz-input-group>
             <ng-template #suffixIconButton>
-              <button nz-button nzSearch title="Copy to clipboard"
+              <button nz-button nzSearch title="Copy to clipboard" aria-label="Copy to clipboard"
                 ngxClipboard [cbContent]="signinToken" (click)="confirmCopy()">
-                <span nz-icon nzType="copy" nzTheme="outline"></span>
+                <span nz-icon nzType="copy" nzTheme="outline" aria-hidden="true"></span>
               </button>
             </ng-template>
           </nz-form-control>
diff --git a/ui/src/app/views/settings/user/edit/user.edit.html b/ui/src/app/views/settings/user/edit/user.edit.html
index 792b710431..5530ddb12a 100644
--- a/ui/src/app/views/settings/user/edit/user.edit.html
+++ b/ui/src/app/views/settings/user/edit/user.edit.html
@@ -4,7 +4,7 @@
         <nz-col [nzSpan]="24">
             <ul nz-menu nzMode="horizontal" *ngIf="menuItems?.size > 0">
                 <ng-container *ngFor="let entry of menuItems | forMap">
-                    <li nz-menu-item [nzSelected]="selectedItem === entry.key" (click)="selectMenuItem(entry.key)">
+                    <li nz-menu-item appClickable [nzSelected]="selectedItem === entry.key" (click)="selectMenuItem(entry.key)">
                         {{entry.value}}
                     </li>
                 </ng-container>
@@ -15,14 +15,14 @@
         <app-scrollview class="scrollview" *ngIf="selectedItem" [ngSwitch]="selectedItem">
             <ng-container *ngSwitchCase="'links'">
                 <nz-form-item *ngFor="let d of linkDriver">
-                    <nz-form-label [nzSpan]="2">Link {{d}}</nz-form-label>
+                    <nz-form-label [nzSpan]="2" nzFor="cds-field-link-{{d}}">Link {{d}}</nz-form-label>
                     <nz-form-control>
                         <ng-container *ngIf="userLinks.has(d)">
-                            <input name="link-{{d}}" nz-input [readOnly]="true" [ngModel]="userLinks.get(d).username">
+                            <input name="link-{{d}}" id="cds-field-link-{{d}}" nz-input [readOnly]="true" [ngModel]="userLinks.get(d).username">
                         </ng-container>
                         <ng-container *ngIf="!userLinks.has(d)">
                             <button nz-button nzType="primary" (click)="linkUser(d)">
-                                <i nz-icon nzType="{{d}}" nzTheme="outline"></i>
+                                <i nz-icon nzType="{{d}}" nzTheme="outline" aria-hidden="true"></i>
                                 Link
                             </button>
                         </ng-container>
@@ -30,10 +30,10 @@
                 </nz-form-item>
                 <ng-container *ngFor="let k of userLinks.keys()">
                     <ng-container *ngIf="linkDriver.indexOf(k) === -1">
-                        <nz-form-label [nzSpan]="2">Link {{k}}</nz-form-label>
+                        <nz-form-label [nzSpan]="2" nzFor="cds-field-link-{{k}}">Link {{k}}</nz-form-label>
                          <nz-form-control>
-                            <input name="link-{{k}}" nz-input [readOnly]="true" [ngModel]="userLinks.get(k).username">
-                         </nz-form-control>   
+                            <input name="link-{{k}}" id="cds-field-link-{{k}}" nz-input [readOnly]="true" [ngModel]="userLinks.get(k).username">
+                         </nz-form-control>
                     </ng-container>
                 </ng-container>
             </ng-container>
@@ -44,37 +44,37 @@
                         <nz-row>
                             <nz-col [nzSpan]="24">
                                 <nz-form-item>
-                                    <nz-form-label [nzSpan]="2">Username</nz-form-label>
+                                    <nz-form-label [nzSpan]="2" nzFor="cds-field-username">Username</nz-form-label>
                                     <nz-form-control>
-                                        <input nz-input type="text" name="username" [(ngModel)]="user.username"
+                                        <input nz-input type="text" name="username" id="cds-field-username" [(ngModel)]="user.username"
                                                [disabled]="loading" readonly>
                                     </nz-form-control>
                                 </nz-form-item>
                                 <nz-form-item>
-                                    <nz-form-label [nzSpan]="2">Fullname</nz-form-label>
+                                    <nz-form-label [nzSpan]="2" nzFor="cds-field-fullname">Fullname</nz-form-label>
                                     <nz-form-control>
-                                        <input nz-input type="text" name="fullname" [(ngModel)]="user.fullname"
+                                        <input nz-input type="text" name="fullname" id="cds-field-fullname" [(ngModel)]="user.fullname"
                                                [disabled]="loading" [readonly]="!editable">
                                     </nz-form-control>
                                 </nz-form-item>
                                 <nz-form-item *ngIf="user.organization">
-                                    <nz-form-label [nzSpan]="2">Organization</nz-form-label>
+                                    <nz-form-label [nzSpan]="2" nzFor="cds-field-organization">Organization</nz-form-label>
                                     <nz-form-control>
-                                        <input nz-input type="text" name="organization"
+                                        <input nz-input type="text" name="organization" id="cds-field-organization"
                                                [ngModel]="user.organization" readonly>
                                     </nz-form-control>
                                 </nz-form-item>
                                 <nz-form-item>
-                                    <nz-form-label [nzSpan]="2">Ring</nz-form-label>
+                                    <nz-form-label [nzSpan]="2" nzFor="cds-field-ring">Ring</nz-form-label>
                                     <nz-form-control>
-                                        <nz-select name="admin" [nzDisabled]="loading" *ngIf="currentAuthSummary.isAdmin()"
+                                        <nz-select name="admin" id="cds-field-ring" [nzDisabled]="loading" *ngIf="currentAuthSummary.isAdmin()"
                                                    [(ngModel)]="user.ring">
                                             <nz-option nzValue="USER" nzLabel="USER"></nz-option>
                                             <nz-option nzValue="MAINTAINER" nzLabel="MAINTAINER"></nz-option>
                                             <nz-option nzValue="ADMIN" nzLabel="ADMIN"></nz-option>
                                         </nz-select>
                                         <input *ngIf="!currentAuthSummary.isAdmin()"nz-input type="text"
-                                               name="admin" [ngModel]="user.ring" [readonly]="true">
+                                               name="admin" id="cds-field-ring" [ngModel]="user.ring" [readonly]="true">
                                     </nz-form-control>
                                 </nz-form-item>
                             </nz-col>
@@ -84,14 +84,14 @@
                                 <button nz-button nzDanger nzType="primary"
                                         nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this user ?"
                                         (nzOnConfirm)="clickDelete()">
-                                    <i nz-icon nzType="delete" nzTheme="outline"></i>
+                                    <i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>
                                     Delete
                                 </button>
                             </nz-col>
                             <nz-col [nzSpan]="12" class="alignRight">
                                 <button nz-button nzType="primary" [nzLoading]="loading"
                                         (click)="clickSave()">
-                                    <i nz-icon nzType="save" nzTheme="outline"></i>Save
+                                    <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>Save
                                 </button>
                             </nz-col>
                         </nz-row>
@@ -116,7 +116,7 @@
             <div *ngSwitchCase="'authentication'">
                 <nz-row>
                     <nz-col [nzSpan]="24">
-                        <h1><span nz-icon nzType="idcard" nzTheme="outline"></span>Consumers</h1>
+                        <h1><span nz-icon nzType="idcard" nzTheme="outline" aria-hidden="true"></span>Consumers</h1>
                     </nz-col>
                 </nz-row>
                 <nz-row class="cardGrid" nzJustify="center">
@@ -125,7 +125,7 @@ <h1><span nz-icon nzType="idcard" nzTheme="outline"></span>Consumers</h1>
                             <div class="entity-card" [ngSwitch]="d.type">
                                 <ng-container *ngSwitchCase="'local'">
                                     <div class="image">
-                                        <span nz-icon nzType="lock" nzTheme="outline"></span>
+                                        <span nz-icon nzType="lock" nzTheme="outline" aria-hidden="true"></span>
                                     </div>
                                     <div class="content">
                                         Local
@@ -133,7 +133,7 @@ <h1><span nz-icon nzType="idcard" nzTheme="outline"></span>Consumers</h1>
                                 </ng-container>
                                 <ng-container *ngSwitchCase="'corporate-sso'">
                                     <div class="image">
-                                        <span nz-icon nzType="safety-certificate" nzTheme="outline"></span>
+                                        <span nz-icon nzType="safety-certificate" nzTheme="outline" aria-hidden="true"></span>
                                     </div>
                                     <div class="content">
                                         Corporate SSO
@@ -142,7 +142,7 @@ <h1><span nz-icon nzType="idcard" nzTheme="outline"></span>Consumers</h1>
                                 <ng-container *ngSwitchCase="'ldap'">
                                     <ng-container *ngIf="!showLDAPSigninForm">
                                         <div class="image">
-                                            <span nz-icon nzType="book" nzTheme="outline"></span>
+                                            <span nz-icon nzType="book" nzTheme="outline" aria-hidden="true"></span>
                                         </div>
                                         <div class="content">
                                             LDAP
@@ -151,15 +151,15 @@ <h1><span nz-icon nzType="idcard" nzTheme="outline"></span>Consumers</h1>
                                         <ng-container *ngIf="showLDAPSigninForm">
                                             <form nz-form #ldapSigninForm="ngForm">
                                                 <nz-form-item>
-                                                    <nz-form-label>LDAP Bind*</nz-form-label>
+                                                    <nz-form-label nzFor="cds-field-ldap-bind">LDAP Bind*</nz-form-label>
                                                     <nz-form-control>
-                                                        <input nz-input type="text" name="bind" ngModel required>
+                                                        <input nz-input type="text" name="bind" id="cds-field-ldap-bind" ngModel required>
                                                     </nz-form-control>
                                                 </nz-form-item>
                                                 <nz-form-item>
-                                                    <nz-form-label>{{ 'user_label_password' | translate }}*</nz-form-label>
+                                                    <nz-form-label nzFor="cds-field-ldap-password">{{ 'user_label_password' | translate }}*</nz-form-label>
                                                     <nz-form-control>
-                                                        <input nz-input type="password" name="password" ngModel required>
+                                                        <input nz-input type="password" name="password" id="cds-field-ldap-password" ngModel required>
                                                     </nz-form-control>
                                                 </nz-form-item>
                                             </form>
@@ -167,7 +167,7 @@ <h1><span nz-icon nzType="idcard" nzTheme="outline"></span>Consumers</h1>
                                 </ng-container>
                                 <ng-container *ngSwitchCase="'openid-connect'">
                                     <div class="image">
-                                        <span nz-icon nzType="lock" nzTheme="outline"></span>
+                                        <span nz-icon nzType="lock" nzTheme="outline" aria-hidden="true"></span>
                                     </div>
                                     <div class="content">
                                         OpenID Connect
@@ -175,7 +175,7 @@ <h1><span nz-icon nzType="idcard" nzTheme="outline"></span>Consumers</h1>
                                 </ng-container>
                                 <ng-container *ngSwitchDefault>
                                     <div class="image">
-                                        <span nz-icon nzType="{{d.type}}" nzTheme="outline"></span>
+                                        <span nz-icon nzType="{{d.type}}" nzTheme="outline" aria-hidden="true"></span>
                                     </div>
                                     <div class="content">
                                         {{d.type | titlecase}}
@@ -226,6 +226,7 @@ <h1><span nz-icon nzType="idcard" nzTheme="outline"></span>Consumers</h1>
                         <h2>
                             My consumers
                             <span nz-icon nzType="plus-circle" nzTheme="fill" class="green" *ngIf="user.id === currentAuthSummary.user.id"
+                                  appClickable aria-label="Create a new consumer"
                                   (click)="clickConsumerCreate()"></span>
                         </h2>
                         <app-data-table [withFilter]="filterConsumers" [withPagination]="10" [columns]="columnsConsumers"
@@ -262,7 +263,7 @@ <h2>Add a GPG Key</h2>
                                 <nz-form-item>
                                     <nz-form-control>
                                         <nz-input-group>
-                                            <textarea rows="4" nz-input [(ngModel)]="importPublicGPGKey" [ngModelOptions]="{standalone: true}" placeholder="Paste here a GPG public key "></textarea>
+                                            <textarea rows="4" nz-input [(ngModel)]="importPublicGPGKey" [ngModelOptions]="{standalone: true}" placeholder="Paste here a GPG public key " aria-label="GPG public key to add"></textarea>
                                         </nz-input-group>
                                     </nz-form-control>
                                 </nz-form-item>
@@ -290,7 +291,7 @@ <h2>My GPG Keys</h2>
                           <tr *ngFor="let data of gpgKeysTable.data">
                             <td>{{data.key_id}}</td>
                             <td>
-                                <textarea nz-input [ngModel]="data.public_key" readonly rows="10"></textarea>
+                                <textarea nz-input [ngModel]="data.public_key" readonly rows="10" aria-label="Public key {{data.key_id}}"></textarea>
                             </td>
                             <td>
                                 <button nz-button nzDanger nzType="primary" nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this key ?" (nzOnConfirm)="deleteGPGKey(data)">Delete</button>
diff --git a/ui/src/app/views/settings/worker-model/edit/worker-model.edit.html b/ui/src/app/views/settings/worker-model/edit/worker-model.edit.html
index aa5431b04c..2b14a21681 100644
--- a/ui/src/app/views/settings/worker-model/edit/worker-model.edit.html
+++ b/ui/src/app/views/settings/worker-model/edit/worker-model.edit.html
@@ -21,7 +21,7 @@
                     <div>
                       <h3>{{'common_created_by' | translate}}</h3>
                       <div>
-                        <span nz-icon nzType="user" nzTheme="outline"></span> {{workerModel.created_by?.fullname}}
+                        <span nz-icon nzType="user" nzTheme="outline" aria-hidden="true"></span> {{workerModel.created_by?.fullname}}
                         ({{workerModel.created_by?.username}})
                         @if (workerModel.created_by?.admin) {
                           <span><b>Admin</b></span>
@@ -29,7 +29,7 @@ <h3>{{'common_created_by' | translate}}</h3>
                       </div>
                       @if (workerModel.created_by?.email !== '') {
                         <div>
-                          <span nz-icon nzType="mail" nzTheme="outline"></span> {{workerModel.created_by?.email}}
+                          <span nz-icon nzType="mail" nzTheme="outline" aria-hidden="true"></span> {{workerModel.created_by?.email}}
                         </div>
                       }
                     </div>
@@ -68,12 +68,12 @@ <h3>{{'worker_model_capabilities' | translate}}
                   @if (!workerModel?.need_registration) {
                     <span nz-icon nzType="check" nzTheme="outline"
                       nz-tooltip nzTooltipTitle="{{'worker_model_capabilities_up_to_date' | translate}}"
-                    title="{{'worker_model_capabilities_up_to_date' | translate}}"></span>
+                    title="{{'worker_model_capabilities_up_to_date' | translate}}" role="img" aria-label="{{'worker_model_capabilities_up_to_date' | translate}}"></span>
                   }
                   @if (workerModel?.need_registration) {
                     <span nz-icon nzType="warning" nzTheme="outline"
                       nz-tooltip nzTooltipTitle="{{'worker_model_capabilities_need_refresh' | translate}}{{workerModel.last_registration}}"
-                    title="{{'worker_model_capabilities_need_refresh' | translate}}{{workerModel.last_registration}}"></span>
+                    title="{{'worker_model_capabilities_need_refresh' | translate}}{{workerModel.last_registration}}" role="img" aria-label="{{'worker_model_capabilities_need_refresh' | translate}}{{workerModel.last_registration}}"></span>
                   }
                 </h3>
                 <p>
diff --git a/ui/src/app/views/settings/worker-model/form/worker-model.form.html b/ui/src/app/views/settings/worker-model/form/worker-model.form.html
index 1d56118ae6..b22d9bda3c 100644
--- a/ui/src/app/views/settings/worker-model/form/worker-model.form.html
+++ b/ui/src/app/views/settings/worker-model/form/worker-model.form.html
@@ -13,26 +13,26 @@
         <nz-row>
           <nz-col [nzSpan]="6">
             <nz-form-item>
-              <nz-form-label>Name</nz-form-label>
+              <nz-form-label nzFor="cds-field-wm-name">Name</nz-form-label>
               <nz-form-control>
-                <input nz-input type="text" name="name" [(ngModel)]="workerModel.name"
+                <input nz-input type="text" name="name" id="cds-field-wm-name" [(ngModel)]="workerModel.name"
                   [readonly]="!workerModel.editable">
               </nz-form-control>
             </nz-form-item>
           </nz-col>
           <nz-col [nzSpan]="6">
             <nz-form-item>
-              <nz-form-label>Group</nz-form-label>
+              <nz-form-label nzFor="cds-field-wm-group">Group</nz-form-label>
               <nz-form-control>
                 @if (groups && workerModel.editable) {
-                  <nz-select nzShowSearch name="group" [nzLoading]="loading" [(ngModel)]="workerModel.group_id">
+                  <nz-select nzShowSearch name="group" id="cds-field-wm-group" [nzLoading]="loading" [(ngModel)]="workerModel.group_id">
                     @for (group of groups; track group) {
                       <nz-option [nzValue]="group.id" [nzLabel]="group.name"></nz-option>
                     }
                   </nz-select>
                 }
                 @if (!workerModel.editable) {
-                  <input  nz-input type="text" name="group"
+                  <input  nz-input type="text" name="group" id="cds-field-wm-group-ro"
                     [ngModel]="workerModel.group?.name" [readonly]="true">
                 }
               </nz-form-control>
@@ -59,9 +59,9 @@
       <nz-row>
         <nz-col [nzSpan]="24">
           <nz-form-item>
-            <nz-form-label>Description</nz-form-label>
+            <nz-form-label nzFor="cds-field-wm-description">Description</nz-form-label>
             <nz-form-control>
-              <textarea nz-input name="description" [(ngModel)]="workerModel.description"
+              <textarea nz-input name="description" id="cds-field-wm-description" [(ngModel)]="workerModel.description"
                 (ngModelChange)="descriptionChange()" [rows]="descriptionRows"
               [readonly]="!workerModel.editable"></textarea>
             </nz-form-control>
@@ -71,18 +71,18 @@
       <nz-row>
         <nz-col [nzSpan]="12">
           <nz-form-item>
-            <nz-form-label>Operating system</nz-form-label>
+            <nz-form-label nzFor="cds-field-wm-os">Operating system</nz-form-label>
             <nz-form-control>
-              <input nz-input type="text" name="os" [(ngModel)]="workerModel.registered_os"
+              <input nz-input type="text" name="os" id="cds-field-wm-os" [(ngModel)]="workerModel.registered_os"
                 [disabled]="true">
             </nz-form-control>
           </nz-form-item>
         </nz-col>
         <nz-col [nzSpan]="12">
           <nz-form-item>
-            <nz-form-label>Architecture</nz-form-label>
+            <nz-form-label nzFor="cds-field-wm-arch">Architecture</nz-form-label>
             <nz-form-control>
-              <input nz-input type="text" name="arch" [(ngModel)]="workerModel.registered_arch"
+              <input nz-input type="text" name="arch" id="cds-field-wm-arch" [(ngModel)]="workerModel.registered_arch"
                 [disabled]="true">
             </nz-form-control>
           </nz-form-item>
@@ -98,7 +98,7 @@
                 @if (!workerModel.disabled) {
                   <nz-row nzAlign="middle">
                     <nz-col [nzSpan]="4">
-                      <i nz-icon nzType="check" nzTheme="outline" class="success"></i>
+                      <i nz-icon nzType="check" nzTheme="outline" class="success" aria-hidden="true"></i>
                     </nz-col>
                     <nz-col [nzSpan]="16">
                       <p>This worker model is enabled</p>
@@ -113,7 +113,7 @@
                 @if (workerModel.disabled) {
                   <nz-row nzAlign="middle">
                     <nz-col [nzSpan]="4">
-                      <i nz-icon nzType="warning" nzTheme="outline" class="fail"></i>
+                      <i nz-icon nzType="warning" nzTheme="outline" class="fail" aria-hidden="true"></i>
                     </nz-col>
                     <nz-col [nzSpan]="16">
                       <p>This worker model is disabled</p>
@@ -137,7 +137,7 @@
                   <ng-template #errorTpl>
                     <nz-row>
                       <nz-col [nzSpan]="4">
-                        <i nz-icon nzType="warning" nzTheme="outline" class="fail"></i>
+                        <i nz-icon nzType="warning" nzTheme="outline" class="fail" aria-hidden="true"></i>
                       </nz-col>
                       <nz-col [nzSpan]="20">
                         <h3>{{ 'worker_model_error' | translate }}</h3>
@@ -184,10 +184,10 @@ <h4>{{ 'worker_model_error_log' | translate }}
       <nz-row>
         <nz-col [nzSpan]="12">
           <nz-form-item>
-            <nz-form-label>Type</nz-form-label>
+            <nz-form-label nzFor="cds-field-wm-type">Type</nz-form-label>
             <nz-form-control>
               @if (types && workerModel.editable) {
-                <nz-select name="modelType" nzShowSearch [nzLoading]="loading" [(ngModel)]="workerModel.type"
+                <nz-select name="modelType" id="cds-field-wm-type" nzShowSearch [nzLoading]="loading" [(ngModel)]="workerModel.type"
                   (ngModelChange)="typeChange()">
                   @for (type of types; track type) {
                     <nz-option [nzValue]="type" [nzLabel]="type"></nz-option>
@@ -195,7 +195,7 @@ <h4>{{ 'worker_model_error_log' | translate }}
                 </nz-select>
               }
               @if (!workerModel.editable) {
-                <input nz-input type="text" name="type"
+                <input nz-input type="text" name="type" id="cds-field-wm-type-ro"
                   [ngModel]="workerModel.type" [readonly]="true">
               }
             </nz-form-control>
@@ -207,9 +207,9 @@ <h4>{{ 'worker_model_error_log' | translate }}
         <nz-row>
           <nz-col [nzSpan]="20">
             <nz-form-item>
-              <nz-form-label>Image</nz-form-label>
+              <nz-form-label nzFor="cds-field-wm-docker-image">Image</nz-form-label>
               <nz-form-control>
-                <input nz-input type="text" name="image"
+                <input nz-input type="text" name="image" id="cds-field-wm-docker-image"
                   [(ngModel)]="workerModel.model_docker.image" [readonly]="!workerModel.editable">
               </nz-form-control>
             </nz-form-item>
@@ -217,7 +217,7 @@ <h4>{{ 'worker_model_error_log' | translate }}
           <nz-col [nzSpan]="4">
             <label nz-checkbox name="private" [(ngModel)]="workerModel.model_docker.private" [disabled]="!workerModel.editable" nz-tooltip
               nzTooltipTitle="If your image comes from a private registry requiring some credentials">
-              Private registry <i nz-icon nzType="question-circle" nzTheme="outline" class="tooltip"></i>
+              Private registry <i nz-icon nzType="question-circle" nzTheme="outline" class="tooltip" aria-hidden="true"></i>
             </label>
           </nz-col>
         </nz-row>
@@ -226,9 +226,9 @@ <h4>{{ 'worker_model_error_log' | translate }}
           <nz-row>
             <nz-col [nzSpan]="8">
               <nz-form-item>
-                <nz-form-label>Registry URL</nz-form-label>
+                <nz-form-label nzFor="cds-field-wm-registry-url">Registry URL</nz-form-label>
                 <nz-form-control>
-                  <input nz-input type="text" name="registry_url"
+                  <input nz-input type="text" name="registry_url" id="cds-field-wm-registry-url"
                     placeholder="https://index.docker.io/v1/"
                     [(ngModel)]="workerModel.model_docker.registry"
                     [disabled]="loading || (!currentAuthSummary.isAdmin() && !workerModel.restricted)">
@@ -237,9 +237,9 @@ <h4>{{ 'worker_model_error_log' | translate }}
             </nz-col>
             <nz-col [nzSpan]="8">
               <nz-form-item>
-                <nz-form-label>Username</nz-form-label>
+                <nz-form-label nzFor="cds-field-wm-registry-username">Username</nz-form-label>
                 <nz-form-control>
-                  <input nz-input type="text" name="registry_username"
+                  <input nz-input type="text" name="registry_username" id="cds-field-wm-registry-username"
                     [(ngModel)]="workerModel.model_docker.username"
                     [disabled]="loading || (!currentAuthSummary.isAdmin() && !workerModel.restricted)">
                 </nz-form-control>
@@ -247,9 +247,9 @@ <h4>{{ 'worker_model_error_log' | translate }}
             </nz-col>
             <nz-col [nzSpan]="8">
               <nz-form-item>
-                <nz-form-label>Password</nz-form-label>
+                <nz-form-label nzFor="cds-field-wm-registry-password">Password</nz-form-label>
                 <nz-form-control>
-                  <input nz-input type="password" name="registry_password"
+                  <input nz-input type="password" name="registry_password" id="cds-field-wm-registry-password"
                     [(ngModel)]="workerModel.model_docker.password"
                     [disabled]="loading || (!currentAuthSummary.isAdmin() && !workerModel.restricted)">
                 </nz-form-control>
@@ -261,9 +261,9 @@ <h4>{{ 'worker_model_error_log' | translate }}
         <nz-row>
           <nz-col [nzSpan]="12">
             <nz-form-item>
-              <nz-form-label>Pattern of configuration scripts</nz-form-label>
+              <nz-form-label nzFor="cds-field-wm-pattern">Pattern of configuration scripts</nz-form-label>
               <nz-form-control>
-                <nz-select nzShowSearch  name="pattern" [(ngModel)]="patternSelected" [nzDisabled]="!workerModel.editable"
+                <nz-select nzShowSearch  name="pattern" id="cds-field-wm-pattern" [(ngModel)]="patternSelected" [nzDisabled]="!workerModel.editable"
                   (ngModelChange)="patternChange()" nzPlaceHolder="Select...">
                   <nz-option></nz-option>
                   @for (p of patternsFiltered; track p) {
@@ -275,9 +275,9 @@ <h4>{{ 'worker_model_error_log' | translate }}
           </nz-col>
           <nz-col [nzSpan]="12">
             <nz-form-item>
-              <nz-form-label>Shell command</nz-form-label>
+              <nz-form-label nzFor="cds-field-wm-shell">Shell command</nz-form-label>
               <nz-form-control>
-                <input nz-input type="text" name="shell" placeholder="sh -c"
+                <input nz-input type="text" name="shell" id="cds-field-wm-shell" placeholder="sh -c"
                   [(ngModel)]="workerModel.model_docker.shell"
                   [disabled]="loading || (!currentAuthSummary.isAdmin() && !workerModel.restricted)">
               </nz-form-control>
@@ -287,13 +287,13 @@ <h4>{{ 'worker_model_error_log' | translate }}
         <nz-row>
           <nz-col [nzSpan]="24">
             <nz-form-item>
-              <nz-form-label>
+              <nz-form-label nzFor="cds-field-wm-cmd">
                 <span nz-tooltip nzTooltipTitle="The command must end with ./worker">
-                  Command <i nz-icon nzType="question-circle" nzTheme="outline" class="tooltip"></i>
+                  Command <i nz-icon nzType="question-circle" nzTheme="outline" class="tooltip" aria-hidden="true"></i>
                 </span>
               </nz-form-label>
               <nz-form-control>
-                <input nz-input type="text" name="cmd" [(ngModel)]="workerModel.model_docker.cmd"
+                <input nz-input type="text" name="cmd" id="cds-field-wm-cmd" [(ngModel)]="workerModel.model_docker.cmd"
                   [disabled]="loading || (!currentAuthSummary.isAdmin() && !workerModel.restricted)">
               </nz-form-control>
             </nz-form-item>
@@ -304,7 +304,7 @@ <h4>{{ 'worker_model_error_log' | translate }}
             <nz-form-item>
               <nz-form-label>
                 <span nz-tooltip nzTooltipTitle="You can set environment variables to put in your worker. If you have no specific need, the default environment variables will be added automatically at the creation">
-                  Environment variables <i nz-icon nzType="question-circle" nzTheme="outline" class="tooltip"></i>
+                  Environment variables <i nz-icon nzType="question-circle" nzTheme="outline" class="tooltip" aria-hidden="true"></i>
                 </span>
               </nz-form-label>
             </nz-form-item>
@@ -316,19 +316,19 @@ <h4>{{ 'worker_model_error_log' | translate }}
             <nz-row>
               <nz-col [nzSpan]="10">
                 <input nz-input type="text" name="name-{{envName}}"
-                  [placeholder]="'common_name' | translate" [value]="envName" readonly>
+                  [placeholder]="'common_name' | translate" [attr.aria-label]="'common_name' | translate" [value]="envName" readonly>
               </nz-col>
               <nz-col [nzSpan]="10">
                 <input nz-input type="text" name="value-{{envName}}"
-                  [placeholder]="'common_value' | translate"
+                  [placeholder]="'common_value' | translate" [attr.aria-label]="'common_value' | translate"
                   [(ngModel)]="workerModel.model_docker.envs[envName]"
                   [readonly]="!workerModel.editable">
               </nz-col>
               <nz-col [nzSpan]="4">
                 @if (workerModel.editable) {
                   <button nz-button nzDanger (click)="deleteEnv(envName, index)"
-                    >
-                    <i nz-icon nzType="delete" nzTheme="outline"></i>
+                    aria-label="Delete environment variable {{envName}}">
+                    <i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>
                   </button>
                 }
               </nz-col>
@@ -339,23 +339,23 @@ <h4>{{ 'worker_model_error_log' | translate }}
         <nz-row>
           <nz-col [nzSpan]="10">
             <nz-form-item>
-              <nz-form-label>Name</nz-form-label>
+              <nz-form-label nzFor="cds-field-wm-env-name">Name</nz-form-label>
               <nz-form-control>
-                <input nz-input type="text" name="newEnvName" [(ngModel)]="newEnvName">
+                <input nz-input type="text" name="newEnvName" id="cds-field-wm-env-name" [(ngModel)]="newEnvName">
               </nz-form-control>
             </nz-form-item>
           </nz-col>
           <nz-col [nzSpan]="10">
             <nz-form-item>
-              <nz-form-label>Value</nz-form-label>
+              <nz-form-label nzFor="cds-field-wm-env-value">Value</nz-form-label>
               <nz-form-control>
-                <input nz-input type="text" name="newEnvValue" [(ngModel)]="newEnvValue">
+                <input nz-input type="text" name="newEnvValue" id="cds-field-wm-env-value" [(ngModel)]="newEnvValue">
               </nz-form-control>
             </nz-form-item>
           </nz-col>
           <nz-col [nzSpan]="4">
-            <button nz-button nzType="primary" (click)="addEnv(newEnvName, newEnvValue)">
-              <i nz-icon nzType="plus" nzTheme="outline"></i>
+            <button nz-button nzType="primary" (click)="addEnv(newEnvName, newEnvValue)" aria-label="Add environment variable">
+              <i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i>
             </button>
           </nz-col>
         </nz-row>
@@ -365,9 +365,9 @@ <h4>{{ 'worker_model_error_log' | translate }}
         <nz-row>
           <nz-col [nzSpan]="12">
             <nz-form-item>
-              <nz-form-label>Image</nz-form-label>
+              <nz-form-label nzFor="cds-field-wm-vm-image">Image</nz-form-label>
               <nz-form-control>
-                <input nz-input type="text" name="image"
+                <input nz-input type="text" name="image" id="cds-field-wm-vm-image"
                   [(ngModel)]="workerModel.model_virtual_machine.image"
                   [readonly]="!workerModel.editable">
               </nz-form-control>
@@ -376,9 +376,9 @@ <h4>{{ 'worker_model_error_log' | translate }}
           @if (workerModel.type === 'openstack') {
             <nz-col [nzSpan]="12">
               <nz-form-item>
-                <nz-form-label>Flavor</nz-form-label>
+                <nz-form-label nzFor="cds-field-wm-flavor">Flavor</nz-form-label>
                 <nz-form-control>
-                  <input nz-input type="text" name="flavor"
+                  <input nz-input type="text" name="flavor" id="cds-field-wm-flavor"
                     [(ngModel)]="workerModel.model_virtual_machine.flavor"
                     [readonly]="!workerModel.editable">
                 </nz-form-control>
@@ -389,9 +389,9 @@ <h4>{{ 'worker_model_error_log' | translate }}
         <nz-row>
           <nz-col [nzSpan]="12">
             <nz-form-item>
-              <nz-form-label>Patterns of configuration scripts</nz-form-label>
+              <nz-form-label nzFor="cds-field-wm-vm-pattern">Patterns of configuration scripts</nz-form-label>
               <nz-form-control>
-                <nz-select nzShowSearch name="pattern" [(ngModel)]="patternSelected" nzPlaceHolder="Select..."
+                <nz-select nzShowSearch name="pattern" id="cds-field-wm-vm-pattern" [(ngModel)]="patternSelected" nzPlaceHolder="Select..."
                   (ngModelChange)="patternChange()">
                   @for (p of patternsFiltered; track p) {
                     <nz-option [nzValue]="p" [nzLabel]="p.name"></nz-option>
@@ -405,9 +405,9 @@ <h4>{{ 'worker_model_error_log' | translate }}
           <nz-row>
             <nz-col [nzSpan]="12">
               <nz-form-item>
-                <nz-form-label>Username</nz-form-label>
+                <nz-form-label nzFor="cds-field-wm-vm-username">Username</nz-form-label>
                 <nz-form-control>
-                  <input nz-input type="text" name="registry_username"
+                  <input nz-input type="text" name="registry_username" id="cds-field-wm-vm-username"
                     [(ngModel)]="workerModel.model_virtual_machine.user"
                     [readonly]="loading || !currentAuthSummary.isAdmin()">
                 </nz-form-control>
@@ -415,9 +415,9 @@ <h4>{{ 'worker_model_error_log' | translate }}
             </nz-col>
             <nz-col [nzSpan]="12">
               <nz-form-item>
-                <nz-form-label>Password</nz-form-label>
+                <nz-form-label nzFor="cds-field-wm-vm-password">Password</nz-form-label>
                 <nz-form-control>
-                  <input nz-input type="password" name="registry_password"
+                  <input nz-input type="password" name="registry_password" id="cds-field-wm-vm-password"
                     [(ngModel)]="workerModel.model_virtual_machine.password"
                     [disabled]="loading || !currentAuthSummary.isAdmin()">
                 </nz-form-control>
@@ -428,9 +428,9 @@ <h4>{{ 'worker_model_error_log' | translate }}
         <nz-row>
           <nz-col [nzSpan]="24">
             <nz-form-item>
-              <nz-form-label>Pre worker command</nz-form-label>
+              <nz-form-label nzFor="cds-field-wm-pre-cmd">Pre worker command</nz-form-label>
               <nz-form-control>
-                <textarea nz-input name="pre_cmd"
+                <textarea nz-input name="pre_cmd" id="cds-field-wm-pre-cmd"
                   [(ngModel)]="workerModel.model_virtual_machine.pre_cmd"
                   [disabled]="loading || (!currentAuthSummary.isAdmin() && !workerModel.restricted)">
                 </textarea>
@@ -441,13 +441,13 @@ <h4>{{ 'worker_model_error_log' | translate }}
         <nz-row>
           <nz-col [nzSpan]="24">
             <nz-form-item>
-              <nz-form-label>
+              <nz-form-label nzFor="cds-field-wm-vm-cmd">
                 <span nz-tooltip nzTooltipTitle="The command must end with ./worker">
-                  Main worker command <i nz-icon nzType="question-circle" nzTheme="outline" class="tooltip"></i>
+                  Main worker command <i nz-icon nzType="question-circle" nzTheme="outline" class="tooltip" aria-hidden="true"></i>
                 </span>
               </nz-form-label>
               <nz-form-control>
-                <input nz-input type="text" name="cmd"
+                <input nz-input type="text" name="cmd" id="cds-field-wm-vm-cmd"
                   [(ngModel)]="workerModel.model_virtual_machine.cmd"
                   [disabled]="loading || (!currentAuthSummary.isAdmin() && !workerModel.restricted)">
               </nz-form-control>
@@ -457,9 +457,9 @@ <h4>{{ 'worker_model_error_log' | translate }}
         <nz-row>
           <nz-col [nzSpan]="24">
             <nz-form-item>
-              <nz-form-label>Post worker command</nz-form-label>
+              <nz-form-label nzFor="cds-field-wm-post-cmd">Post worker command</nz-form-label>
               <nz-form-control>
-                <textarea nz-input name="post_cmd"
+                <textarea nz-input name="post_cmd" id="cds-field-wm-post-cmd"
                   [(ngModel)]="workerModel.model_virtual_machine.post_cmd"
                   [disabled]="loading || (!currentAuthSummary.isAdmin() && !workerModel.restricted)">
                 </textarea>
@@ -473,11 +473,11 @@ <h4>{{ 'worker_model_error_log' | translate }}
           <nz-col [nzSpan]="24">
             <button nz-button nzType="primary" [class.loading]="loading"
               [class.disabled]="!canSave()" (click)="clickSave()">
-              <i nz-icon nzType="save" nzTheme="outline"></i>{{ 'btn_save' | translate }}
+              <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>{{ 'btn_save' | translate }}
             </button>
             @if (workerModel.id) {
               <button nz-button nzDanger nzType="primary" nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this worker model? "
-                (nzOnConfirm)="clickDelete()"> <i nz-icon nzType="delete" nzTheme="outline"></i>Delete</button>
+                (nzOnConfirm)="clickDelete()"> <i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>Delete</button>
               }
             </nz-col>
           </nz-row>
@@ -500,11 +500,11 @@ <h4>{{ 'worker_model_error_log' | translate }}
           <nz-row>
             <nz-col [nzSpan]="24">
               <button nz-button nzType="primary" [nzLoading]="loading" (click)="clickSaveAsCode()" [disabled]="!workerModel.editable">
-                <i nz-icon nzType="save" nzTheme="outline"></i>{{ 'btn_save' | translate }}
+                <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>{{ 'btn_save' | translate }}
               </button>
               @if (workerModel.id) {
                 <button nz-button nzType="primary" nzDanger nz-popconfirm (nzOnConfirm)="clickDelete()" nzPopconfirmTitle="Are you sure you want to delete this worker model ?">
-                  <i nz-icon nzType="delete" nzTheme="outline"></i>Delete
+                  <i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>Delete
                 </button>
               }
             </nz-col>
diff --git a/ui/src/app/views/settings/worker-model/help/worker-model.help.html b/ui/src/app/views/settings/worker-model/help/worker-model.help.html
index 36376b1794..83981d1882 100644
--- a/ui/src/app/views/settings/worker-model/help/worker-model.help.html
+++ b/ui/src/app/views/settings/worker-model/help/worker-model.help.html
@@ -1,10 +1,10 @@
 <div class="nzSegment">
-        <h2><span nz-icon nzType="book" nzTheme="outline"></span> Tips</h2>
+        <h2><span nz-icon nzType="book" nzTheme="outline" aria-hidden="true"></span> Tips</h2>
         <p>The goal of CDS is to start a worker when you need it, which should match all your requirements exactly.
             In order to scale automatically on demand, it is possible to register a worker model.</p>
         <p>The goal of a worker model is to describe the capabilities of a given docker/iso image in terms of architecture,
             pre-installed binaries or libraries..</p>
-        <div> <span nz-icon nzType="question-circle" nzTheme="outline"></span> {{'worker_model_help_howtos' | translate}}</div>
+        <div> <span nz-icon nzType="question-circle" nzTheme="outline" aria-hidden="true"></span> {{'worker_model_help_howtos' | translate}}</div>
         <ul>
             <li>
                 <a class="item" target="_blank" rel="noopener noreferrer"
diff --git a/ui/src/app/views/settings/worker-model/list/worker-model.list.html b/ui/src/app/views/settings/worker-model/list/worker-model.list.html
index 272f19a526..9daf6c9916 100644
--- a/ui/src/app/views/settings/worker-model/list/worker-model.list.html
+++ b/ui/src/app/views/settings/worker-model/list/worker-model.list.html
@@ -6,7 +6,7 @@
     <nz-row>
       <nz-col [nzSpan]="12">
         <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
-          <input nz-input type="text" [placeholder]="'worker_model_binary_capability' | translate" [(ngModel)]="binaryValue">
+          <input nz-input type="text" [placeholder]="'worker_model_binary_capability' | translate" [attr.aria-label]="'worker_model_binary_capability' | translate" [(ngModel)]="binaryValue">
         </nz-input-group>
         <ng-template #suffixButton>
           @if (!binarySelected) {
diff --git a/ui/src/app/views/settings/workflow-template/edit/workflow-template.edit.html b/ui/src/app/views/settings/workflow-template/edit/workflow-template.edit.html
index 042dc51eae..5f03623f95 100644
--- a/ui/src/app/views/settings/workflow-template/edit/workflow-template.edit.html
+++ b/ui/src/app/views/settings/workflow-template/edit/workflow-template.edit.html
@@ -51,7 +51,7 @@ <h3>Last modified</h3>
           <nz-row>
             <nz-col [nzSpan]="12" nzOffset="12">
               <button nz-button nzType="primary" (click)="clickCreateBulk()">
-                <span nz-icon nzType="folder" nzTheme="outline"></span>{{ 'workflow_template_btn_create_bulk' | translate }}
+                <span nz-icon nzType="folder" nzTheme="outline" aria-hidden="true"></span>{{ 'workflow_template_btn_create_bulk' | translate }}
               </button>
             </nz-col>
             <nz-col [nzSpan]="24">
diff --git a/ui/src/app/views/settings/workflow-template/editor/workflow-template.editor.html b/ui/src/app/views/settings/workflow-template/editor/workflow-template.editor.html
index 668b44786d..ebdea44bca 100644
--- a/ui/src/app/views/settings/workflow-template/editor/workflow-template.editor.html
+++ b/ui/src/app/views/settings/workflow-template/editor/workflow-template.editor.html
@@ -1,8 +1,8 @@
 <codemirror #code class="code" [ngModel]="value" [config]="codeMirrorConfig" (change)="valueChange($event)">
 </codemirror>
 @if (editable && removable) {
-  <button nz-button nzDanger nzType="primary" class="codeButton" (click)="clickRemove()">
-    <i nz-icon nzType="delete" nzTheme="outline"></i>
+  <button nz-button nzDanger nzType="primary" class="codeButton" aria-label="Remove this element" (click)="clickRemove()">
+    <i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>
   </button>
 }
 @if (this.error) {
diff --git a/ui/src/app/views/settings/workflow-template/form/workflow-template.form.html b/ui/src/app/views/settings/workflow-template/form/workflow-template.form.html
index 0678292f5b..bd5c00bd20 100644
--- a/ui/src/app/views/settings/workflow-template/form/workflow-template.form.html
+++ b/ui/src/app/views/settings/workflow-template/form/workflow-template.form.html
@@ -8,28 +8,28 @@
     <nz-row>
       <nz-col [nzSpan]="6">
         <nz-form-item>
-          <nz-form-label>Name*</nz-form-label>
+          <nz-form-label nzFor="cds-field-wt-name">Name*</nz-form-label>
           <nz-form-control>
-            <input nz-input type="text" name="name" [(ngModel)]="workflowTemplate.name"
+            <input nz-input type="text" name="name" id="cds-field-wt-name" [(ngModel)]="workflowTemplate.name"
               [readonly]="!workflowTemplate.editable">
           </nz-form-control>
         </nz-form-item>
       </nz-col>
       <nz-col [nzSpan]="6">
         <nz-form-item>
-          <nz-form-label>Slug*</nz-form-label>
+          <nz-form-label nzFor="cds-field-wt-slug">Slug*</nz-form-label>
           <nz-form-control>
-            <input nz-input type="text" name="slug" [ngModel]="workflowTemplate.slug" [disabled]="true">
+            <input nz-input type="text" name="slug" id="cds-field-wt-slug" [ngModel]="workflowTemplate.slug" [disabled]="true">
           </nz-form-control>
         </nz-form-item>
       </nz-col>
       <nz-col [nzSpan]="6">
         <nz-form-item>
-          <nz-form-label>Group*</nz-form-label>
+          <nz-form-label nzFor="cds-field-wt-group">Group*</nz-form-label>
           <nz-form-control>
             @if (groups && workflowTemplate.editable) {
               <nz-select nzShowSearch [nzDisabled]="loading"
-                name="group" [(ngModel)]="workflowTemplate.group_id">
+                name="group" id="cds-field-wt-group" [(ngModel)]="workflowTemplate.group_id">
                 @for (group of groups; track group) {
                   <nz-option [nzValue]="group.id"
                   [nzLabel]="group.name"></nz-option>
@@ -37,7 +37,7 @@
               </nz-select>
             }
             @if (!workflowTemplate.editable) {
-              <input nz-input type="text" name="group"
+              <input nz-input type="text" name="group" id="cds-field-wt-group-ro"
                 [ngModel]="workflowTemplate.group?.name" [readonly]="true">
             }
           </nz-form-control>
@@ -45,9 +45,9 @@
       </nz-col>
       <nz-col [nzSpan]="6">
         <nz-form-item>
-          <nz-form-label>Version</nz-form-label>
+          <nz-form-label nzFor="cds-field-wt-version">Version</nz-form-label>
           <nz-form-control>
-            <input nz-input type="text" name="version" [ngModel]="workflowTemplate.version"
+            <input nz-input type="text" name="version" id="cds-field-wt-version" [ngModel]="workflowTemplate.version"
               [disabled]="true">
           </nz-form-control>
         </nz-form-item>
@@ -56,9 +56,9 @@
     <nz-row>
       <nz-col [nzSpan]="24">
         <nz-form-item>
-          <nz-form-label>Description</nz-form-label>
+          <nz-form-label nzFor="cds-field-wt-description">Description</nz-form-label>
           <nz-form-control>
-            <textarea nz-input name="description" [(ngModel)]="workflowTemplate.description"
+            <textarea nz-input name="description" id="cds-field-wt-description" [(ngModel)]="workflowTemplate.description"
               (ngModelChange)="descriptionChange()" [rows]="descriptionRows"
             [readonly]="!workflowTemplate.editable"></textarea>
           </nz-form-control>
@@ -76,7 +76,7 @@ <h3>Parameters</h3>
           <nz-col [nzSpan]="12">
             <nz-form-item>
               <nz-form-control>
-                <input nz-input type="text" name="parameter-key-{{index}}" placeholder="Name"
+                <input nz-input type="text" name="parameter-key-{{index}}" placeholder="Name" aria-label="Parameter name"
                   [(ngModel)]="parameterValues[k].key" [readonly]="!workflowTemplate.editable">
               </nz-form-control>
             </nz-form-item>
@@ -112,9 +112,9 @@ <h3>Parameters</h3>
           <nz-col [nzSpan]="2">
             <nz-form-item nzJustify="end">
               @if (workflowTemplate.editable) {
-                <button nz-button nzDanger nzType="primary"
+                <button nz-button nzDanger nzType="primary" aria-label="Remove parameter"
                   (click)="clickRemoveParameter(k)">
-                  <i nz-icon nzType="delete" nzTheme="outline"></i>
+                  <i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>
                 </button>
               }
             </nz-form-item>
@@ -125,7 +125,7 @@ <h3>Parameters</h3>
         <nz-col [nzSpan]="12">
           <nz-form-item>
             <nz-form-control>
-              <input nz-input type="text" name="parameter-key-add" placeholder="Name"
+              <input nz-input type="text" name="parameter-key-add" placeholder="Name" aria-label="New parameter name"
                 [(ngModel)]="parameterValueAdd.key">
             </nz-form-control>
           </nz-form-item>
@@ -153,8 +153,8 @@ <h3>Parameters</h3>
         </nz-col>
         <nz-col [nzSpan]="2">
           <nz-form-item nzJustify="end">
-            <button nz-button nzType="primary" (click)="clickAddParameter()">
-              <i nz-icon nzType="plus" nzTheme="outline"></i>
+            <button nz-button nzType="primary" aria-label="Add parameter" (click)="clickAddParameter()">
+              <i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i>
             </button>
           </nz-form-item>
         </nz-col>
@@ -185,8 +185,8 @@ <h3 class="subItem">Pipelines</h3>
         }
         <nz-row>
           @if (workflowTemplate.editable) {
-            <button nz-button nzType="primary" (click)="clickAddPipeline()">
-              <i nz-icon nzType="plus" nzTheme="outline"></i>
+            <button nz-button nzType="primary" aria-label="Add pipeline" (click)="clickAddPipeline()">
+              <i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i>
             </button>
           }
         </nz-row>
@@ -207,9 +207,9 @@ <h3 class="subItem">Applications</h3>
         }
         <nz-row>
           @if (workflowTemplate.editable) {
-            <button nz-button nzType="primary"
+            <button nz-button nzType="primary" aria-label="Add application"
               (click)="clickAddApplication()">
-              <i nz-icon nzType="plus" nzTheme="outline"></i>
+              <i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i>
             </button>
           }
         </nz-row>
@@ -230,9 +230,9 @@ <h3 class="subItem">Environments</h3>
         }
         <nz-row>
           @if (workflowTemplate.editable) {
-            <button nz-button nzType="primary"
+            <button nz-button nzType="primary" aria-label="Add environment"
               (click)="clickAddEnvironment()">
-              <i nz-icon nzType="plus" nzTheme="outline"></i>
+              <i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i>
             </button>
           }
         </nz-row>
@@ -241,7 +241,7 @@ <h3 class="subItem">Environments</h3>
         <nz-row class="subItem">
           <nz-col [nzSpan]="24">
             <textarea nz-input name="changeMessage" [(ngModel)]="changeMessage"
-            [placeholder]="'workflow_template_change_message' | translate" [rows]="3"></textarea>
+            [placeholder]="'workflow_template_change_message' | translate" [attr.aria-label]="'workflow_template_change_message' | translate" [rows]="3"></textarea>
           </nz-col>
         </nz-row>
       }
@@ -250,13 +250,13 @@ <h3 class="subItem">Environments</h3>
       <nz-row class="subItem">
         <nz-col [nzSpan]="24">
           <button nz-button nzType="primary" class="floatRight" [nzLoading]="loading" (click)="clickSave()">
-            <i nz-icon nzType="save" nzTheme="outline"></i>Save
+            <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>Save
           </button>
           @if (mode === 'edit') {
             <button class="floatRight" nz-button nzDanger nzType="primary"
               [nzLoading]="loading" nz-popconfirm
               nzPopconfirmTitle="Are you sure you want to delete this template ?" (nzOnConfirm)="clickDelete()">
-              <i nz-icon nzType="delete" nzTheme="outline"></i>Delete
+              <i nz-icon nzType="delete" nzTheme="outline" aria-hidden="true"></i>Delete
             </button>
           }
         </nz-col>
diff --git a/ui/src/app/views/settings/workflow-template/help/workflow-template.help.html b/ui/src/app/views/settings/workflow-template/help/workflow-template.help.html
index f0d55736ce..f1e6af64a1 100644
--- a/ui/src/app/views/settings/workflow-template/help/workflow-template.help.html
+++ b/ui/src/app/views/settings/workflow-template/help/workflow-template.help.html
@@ -1,6 +1,6 @@
 
     <div class="nzSegment">
-        <h2><span nz-icon nzType="book" nzTheme="outline"></span> Tips</h2>
+        <h2><span nz-icon nzType="book" nzTheme="outline" aria-hidden="true"></span> Tips</h2>
         <p>A workflow template allows you to quickly create then update a workflow and its components.</p>
 
         <a class="item" target="_blank" rel="noopener noreferrer"
diff --git a/ui/src/app/views/workflow/add/workflow.add.html b/ui/src/app/views/workflow/add/workflow.add.html
index df6bc4f6ed..28fa9a2865 100644
--- a/ui/src/app/views/workflow/add/workflow.add.html
+++ b/ui/src/app/views/workflow/add/workflow.add.html
@@ -52,9 +52,9 @@ <h2>Create a workflow</h2>
                       <nz-row>
                         <nz-col [nzSpan]="20" [nzOffset]="2">
                           <nz-form-item>
-                            <nz-form-label>Workflow name</nz-form-label>
+                            <nz-form-label nzFor="cds-field-workflow-name">Workflow name</nz-form-label>
                             <nz-form-control>
-                              <input nz-input name="name" [(ngModel)]="workflow.name"
+                              <input nz-input name="name" id="cds-field-workflow-name" [(ngModel)]="workflow.name"
                                 pattern="^[a-zA-Z0-9._-]{1,}$"
                                 (ngModelChange)="duplicateWorkflowName = false" #name="ngModel">
                             </nz-form-control>
@@ -68,9 +68,9 @@ <h2>Create a workflow</h2>
                             }
                           </nz-form-item>
                           <nz-form-item>
-                            <nz-form-label>Workflow description</nz-form-label>
+                            <nz-form-label nzFor="cds-field-workflow-description">Workflow description</nz-form-label>
                             <nz-form-control>
-                              <textarea nz-input name="description"
+                              <textarea nz-input name="description" id="cds-field-workflow-description"
                               [(ngModel)]="workflow.description"></textarea>
                             </nz-form-control>
                           </nz-form-item>
@@ -79,7 +79,7 @@ <h2>Create a workflow</h2>
                             <nz-form-control>
                               @if (!fileTooLarge && workflow.icon) {
                                 <div>
-                                  <img width="32" class="app-icon" [src]="workflow.icon" alt="icon" />
+                                  <img width="32" class="app-icon" [src]="workflow.icon" alt="Workflow icon preview" />
                                 </div>
                               }
                               <app-upload-button accept=".png,.jpg,.jpeg" [image]="true"
@@ -142,10 +142,10 @@ <h2>Create a workflow</h2>
                           <nz-row>
                             <nz-col [nzSpan]="24">
                               <nz-form-item>
-                                <nz-form-label>{{ 'workflow_wizard_select_template' |
+                                <nz-form-label nzFor="cds-field-template-path">{{ 'workflow_wizard_select_template' |
                                 translate}}</nz-form-label>
                                 <nz-form-control>
-                                  <nz-select name="selectedTemplatePath" nzShowSearch
+                                  <nz-select name="selectedTemplatePath" nzId="cds-field-template-path" nzShowSearch
                                     [(ngModel)]="selectedTemplatePath"
                                     (ngModelChange)="showTemplateForm($event)"
                                     (nzOnSearch)="filterTemplate($event)" #select>
@@ -163,17 +163,17 @@ <h2>Create a workflow</h2>
                                 <nz-row>
                                   <nz-col [nzSpan]="12">
                                     <nz-form-item>
-                                      <nz-form-label>Name</nz-form-label>
+                                      <nz-form-label nzFor="cds-field-template-name">Name</nz-form-label>
                                       <nz-form-control>
-                                        <input nz-input type="text" name="name"
+                                        <input nz-input type="text" name="name" id="cds-field-template-name"
                                           [disabled]="true" [ngModel]="selectedTemplate.name">
                                       </nz-form-control>
                                     </nz-form-item>
                                   </nz-col>
                                   <nz-col [nzSpan]="11" [nzOffset]="1">
-                                    <nz-form-label>Group</nz-form-label>
+                                    <nz-form-label nzFor="cds-field-template-group">Group</nz-form-label>
                                     <nz-form-control>
-                                      <input nz-input type="text" name="group" [disabled]="true"
+                                      <input nz-input type="text" name="group" id="cds-field-template-group" [disabled]="true"
                                         [ngModel]="selectedTemplate.group.name">
                                     </nz-form-control>
                                   </nz-col>
diff --git a/ui/src/app/views/workflow/graph/workflow.graph.html b/ui/src/app/views/workflow/graph/workflow.graph.html
index f67b1ee485..2aff9eb4e8 100644
--- a/ui/src/app/views/workflow/graph/workflow.graph.html
+++ b/ui/src/app/views/workflow/graph/workflow.graph.html
@@ -1,3 +1,3 @@
-<div class="svg-wrapper" #svgGraph>
-    <button nz-button nzSize="large" class="origin" (click)="clickOrigin()">⌖</button>
+<div class="svg-wrapper" #svgGraph tabindex="0" role="group" aria-label="Workflow graph">
+    <button nz-button nzSize="large" class="origin" (click)="clickOrigin()" aria-label="Center graph">⌖</button>
 </div>
diff --git a/ui/src/app/views/workflow/run/node/pipeline/pipeline.html b/ui/src/app/views/workflow/run/node/pipeline/pipeline.html
index a4ab132830..380f992abd 100644
--- a/ui/src/app/views/workflow/run/node/pipeline/pipeline.html
+++ b/ui/src/app/views/workflow/run/node/pipeline/pipeline.html
@@ -36,13 +36,13 @@
                             [class.inactive]="mapJobStatus?.get(j.pipeline_action_id) && (mapJobStatus?.get(j.pipeline_action_id).status === pipelineStatusEnum.DISABLED || mapJobStatus?.get(j.pipeline_action_id).status === pipelineStatusEnum.SKIPPED)"
                             [class.fail]="mapJobStatus?.get(j.pipeline_action_id) && mapJobStatus?.get(j.pipeline_action_id).status === pipelineStatusEnum.FAIL"
                             [class.building]="mapJobStatus?.get(j.pipeline_action_id) && (mapJobStatus?.get(j.pipeline_action_id).status === pipelineStatusEnum.BUILDING || mapJobStatus?.get(j.pipeline_action_id).status === pipelineStatusEnum.WAITING)"
-                            (click)="selectedJobManual(j.pipeline_action_id)">
+                            appClickable (click)="selectedJobManual(j.pipeline_action_id)">
                             @if (mapJobStatus?.get(j.pipeline_action_id)?.warnings > 0) {
                               <div class="warningPip"
                                 nz-tooltip
                                 nzTooltipTitle="The build is in success state but there are/is {{mapJobStatus?.get(j.pipeline_action_id)?.warnings}} optional step(s) in error"
                                 nzTooltipPlacement="top">
-                                <span nz-icon nzType="warning" nzTheme="outline" class="orange"></span>
+                                <span nz-icon nzType="warning" nzTheme="outline" class="orange" role="img" aria-label="Warning: optional step(s) in error"></span>
                               </div>
                             }
                             <div class="title">
diff --git a/ui/src/app/views/workflow/run/node/pipeline/workflow-run-job/workflow-run-job.html b/ui/src/app/views/workflow/run/node/pipeline/workflow-run-job/workflow-run-job.html
index 34f6472a75..36a37fc121 100644
--- a/ui/src/app/views/workflow/run/node/pipeline/workflow-run-job/workflow-run-job.html
+++ b/ui/src/app/views/workflow/run/node/pipeline/workflow-run-job/workflow-run-job.html
@@ -21,7 +21,7 @@
     @if (currentTabIndex === 0) {
       @for (step of steps; track trackStepElement(i, step); let i = $index) {
         <div class="step">
-          <div class="line info" (click)="clickOpen(step)">
+          <div class="line info" appClickable [attr.aria-expanded]="!!step.open" (click)="clickOpen(step)">
             <div class="number">
               @if (step.totalLinesCount > 0 && !step.loading && !step.open) {
                 <span nz-icon nzType="caret-right" nzTheme="fill"></span>
@@ -59,8 +59,8 @@
                 @if (step?.link) {
                   <a
                     [href]="'./cdscdn/item/' + step.link.item_type + '/' + step.link.api_ref + '/download?refresh=5'"
-                    target="_blank" rel="noopener noreferrer" title="Share/download the step"
-                    (click)="$event.stopPropagation()"><i nz-icon nzType="export" nzTheme="outline"></i></a>
+                    target="_blank" rel="noopener noreferrer" title="Share/download the step" aria-label="Share/download the step"
+                    (click)="$event.stopPropagation()"><i nz-icon nzType="export" nzTheme="outline" aria-hidden="true"></i></a>
                   }
                 </div>
               }
@@ -88,7 +88,7 @@
               }
               @if (step.lines.length + step.endLines.length < step.totalLinesCount) {
                 <div class="line expand"
-                  (click)="clickExpandStepDown(i, $event)">
+                  appClickable aria-label="Show more lines" (click)="clickExpandStepDown(i, $event)">
                   <div class="number">
                     <i nz-icon nzType="caret-down" nzTheme="fill"></i>
                     {{step.firstDisplayedLineNumber +
@@ -99,7 +99,7 @@
               }
               @if (step.lines.length + step.endLines.length < (step.totalLinesCount - expandLoadLinesCount) - 1) {
                 <div class="line expand"
-                  (click)="clickExpandStepUp(i, $event)">
+                  appClickable aria-label="Show more lines" (click)="clickExpandStepUp(i, $event)">
                   <div class="number"><i nz-icon nzType="caret-up" nzTheme="fill"></i>{{(step.firstDisplayedLineNumber +
                   step.totalLinesCount) - step.endLines.length}}
                 </div>
@@ -133,7 +133,7 @@
     }
     <!-- Display service logs -->
     @if (currentTabIndex > 0) {
-      <div class="step">
+      <div class="step" role="log">
         @for (line of services[currentTabIndex-1].lines; track trackLineElement(j, line); let j = $index) {
           <div class="line"
             >
@@ -145,7 +145,7 @@
         }
         @if (services[currentTabIndex-1].lines.length + services[currentTabIndex-1].endLines.length < services[currentTabIndex-1].totalLinesCount) {
           <div class="line expand"
-            (click)="clickExpandServiceDown(currentTabIndex-1)">
+            appClickable aria-label="Show more lines" (click)="clickExpandServiceDown(currentTabIndex-1)">
             <div class="number"><i nz-icon nzType="caret-down" nzTheme="fill"></i>{{services[currentTabIndex-1].lines.length + 1}}
           </div>
           <div class="value">…</div>
@@ -153,7 +153,7 @@
       }
       @if (services[currentTabIndex-1].lines.length + services[currentTabIndex-1].endLines.length < (services[currentTabIndex-1].totalLinesCount - expandLoadLinesCount) - 1) {
         <div class="line expand"
-          (click)="clickExpandServiceUp(currentTabIndex-1)">
+          appClickable aria-label="Show more lines" (click)="clickExpandServiceUp(currentTabIndex-1)">
           <div class="number"><i nz-icon nzType="caret-up" nzTheme="fill"></i>{{(services[currentTabIndex-1].totalLinesCount) -
           services[currentTabIndex-1].endLines.length}}
         </div>
@@ -175,8 +175,8 @@
   </div>
 }
 <div class="footer">
-  <div class="goto" (click)="clickScroll(scrollTargets.BOTTOM)">Bottom<i nz-icon nzType="caret-down" nzTheme="fill"></i></div>
-  <div class="goto" (click)="clickScroll(scrollTargets.TOP)">Top<i nz-icon nzType="caret-up" nzTheme="fill"></i></div>
+  <div class="goto" appClickable (click)="clickScroll(scrollTargets.BOTTOM)">Bottom<i nz-icon nzType="caret-down" nzTheme="fill" aria-hidden="true"></i></div>
+  <div class="goto" appClickable (click)="clickScroll(scrollTargets.TOP)">Top<i nz-icon nzType="caret-up" nzTheme="fill" aria-hidden="true"></i></div>
 </div>
 </div>
 }
diff --git a/ui/src/app/views/workflow/run/node/summary/run.summary.html b/ui/src/app/views/workflow/run/node/summary/run.summary.html
index 66e281da43..b5cdb1b74e 100644
--- a/ui/src/app/views/workflow/run/node/summary/run.summary.html
+++ b/ui/src/app/views/workflow/run/node/summary/run.summary.html
@@ -10,6 +10,7 @@
           [class.fail]="nodeRunStatus === pipelineStatusEnum.FAIL || nodeRunStatus === pipelineStatusEnum.STOPPED"
           [class.inactive]="nodeRunStatus === pipelineStatusEnum.DISABLED || nodeRunStatus === pipelineStatusEnum.SKIPPED">
           <div class="content">
+            <span class="cds-sr-only">{{'Status: ' + nodeRunStatus}}</span>
             <nz-row>
               @if (node && node.context && node.context.pipeline_id) {
                 <nz-col [nzSpan]="8" title="{{ 'common_pipeline' | translate }}"
@@ -18,7 +19,7 @@
                     <a href="#"
                       [routerLink]="['/project', project.key, 'pipeline', workflow.pipelines[node.context.pipeline_id].name]"
                       [queryParams]="{ workflow: workflow.name, run: nodeRunNum, node: nodeRunID, wpipeline: workflow.pipelines[node.context.pipeline_id].name }">
-                      <span nz-icon nzType="apartment" nzTheme="outline"></span>
+                      <span nz-icon nzType="apartment" nzTheme="outline" aria-hidden="true"></span>
                       {{workflow.pipelines[node.context.pipeline_id].name + ' ' + nodeRunNum + '.' + nodeRunSubNum}}
                     </a>
                   }
@@ -26,13 +27,13 @@
               }
               <nz-col [nzSpan]="8" class="center"
                 title="{{ 'common_pipeline_start_title' | translate }}">
-                <i nz-icon nzType="calendar" nzTheme="outline"></i>{{nodeRunStart | amLocal | amDateFormat: 'DD/MM/YYYY HH:mm' }}
+                <i nz-icon nzType="calendar" nzTheme="outline" aria-hidden="true"></i>{{nodeRunStart | amLocal | amDateFormat: 'DD/MM/YYYY HH:mm' }}
               </nz-col>
               <nz-col [nzSpan]="8" title="{{ 'common_duration_title' | translate }}">
                 @if (nodeRunStatus !== pipelineStatusEnum.BUILDING && nodeRunStatus !== pipelineStatusEnum.WAITING) {
                   <div class="right floated"
                     >
-                    <i nz-icon nzType="clock-circle" nzTheme="outline"></i>{{duration}}
+                    <i nz-icon nzType="clock-circle" nzTheme="outline" aria-hidden="true"></i>{{duration}}
                   </div>
                 }
               </nz-col>
@@ -44,7 +45,7 @@
                     <a href="#"
                       [routerLink]="['/project', project.key, 'application', workflow.applications[node.context.application_id].name]"
                       [queryParams]="{ workflow: workflow.name, run: nodeRunNum, node: nodeRunID, wpipeline: workflow.pipelines[node.context.pipeline_id].name }">
-                      <i nz-icon nzType="rocket" nzTheme="outline"></i>
+                      <i nz-icon nzType="rocket" nzTheme="outline" aria-hidden="true"></i>
                       {{workflow.applications[node.context.application_id].name}}
                     </a>
                   }
@@ -53,7 +54,7 @@
                   @if (node.context.environment_id) {
                     <a href="#" [routerLink]="['/project', project.key]"
                       [queryParams]="{ tab: 'environments', envName: workflow.environments[node.context.environment_id].name,workflow: workflow.name, run: nodeRunNum, node: nodeRunID, wpipeline: workflow.pipelines[node.context.pipeline_id].name }">
-                      <i nz-icon nzType="environment" nzTheme="outline"></i>
+                      <i nz-icon nzType="environment" nzTheme="outline" aria-hidden="true"></i>
                       {{workflow.environments[node.context.environment_id].name}}
                     </a>
                   }
diff --git a/ui/src/app/views/workflow/run/node/test/table/test.table.html b/ui/src/app/views/workflow/run/node/test/table/test.table.html
index 835013c806..fe439ce7a4 100644
--- a/ui/src/app/views/workflow/run/node/test/table/test.table.html
+++ b/ui/src/app/views/workflow/run/node/test/table/test.table.html
@@ -2,7 +2,7 @@
   <div class="summary">
     <nz-row>
       <nz-col [nzSpan]="5" [nzOffset]="3">
-        <a class="pointing" (click)="statusFilter('all')">
+        <a class="pointing" appClickable (click)="statusFilter('all')">
           {{tests.total}}
           @if (tests.total > 1) {
             <span>{{'pipeline_run_test_total_title_s' | translate}}</span>
@@ -13,7 +13,7 @@
         </a>
       </nz-col>
       <nz-col [nzSpan]="5" [nzOffset]="3">
-        <a class="pointing" (click)="statusFilter('failed')">
+        <a class="pointing" appClickable (click)="statusFilter('failed')">
           {{ tests.ko }}
           @if (tests.ko > 1) {
             <span>{{'pipeline_run_test_failed_title_s' | translate}}</span>
@@ -24,7 +24,7 @@
         </a>
       </nz-col>
       <nz-col [nzSpan]="5" [nzOffset]="3">
-        <a class="pointing" (click)="statusFilter('skipped')">
+        <a class="pointing" appClickable (click)="statusFilter('skipped')">
           {{ tests.skipped }}
           @if (tests.skipped > 1) {
             <span>{{'pipeline_run_test_skipped_title_s' | translate}}</span>
diff --git a/ui/src/app/views/workflow/run/summary/workflow.run.summary.html b/ui/src/app/views/workflow/run/summary/workflow.run.summary.html
index b079114ddf..ccfa76f90d 100644
--- a/ui/src/app/views/workflow/run/summary/workflow.run.summary.html
+++ b/ui/src/app/views/workflow/run/summary/workflow.run.summary.html
@@ -8,9 +8,10 @@
             [class.success]="workflowRun.status === pipelineStatusEnum.SUCCESS"
             [class.fail]="workflowRun.status === pipelineStatusEnum.FAIL || workflowRun.status === pipelineStatusEnum.STOPPED"
             [class.inactive]="workflowRun.status === pipelineStatusEnum.DISABLED || workflowRun.status === pipelineStatusEnum.SKIPPED || workflowRun.status === pipelineStatusEnum.NEVER_BUILT">
+            <span class="cds-sr-only">{{'Status: ' + workflowRun.status}}</span>
             <nz-row>
               <nz-col [nzSpan]="7">
-                <i nz-icon nzType="calendar" nzTheme="outline"></i>
+                <i nz-icon nzType="calendar" nzTheme="outline" aria-hidden="true"></i>
                 <span>{{workflowRun.start | amLocal | amDateFormat: 'DD/MM/YYYY HH:mm' }}</span>
               </nz-col>
               <nz-col [nzSpan]="10" class="center">
@@ -18,7 +19,7 @@
               </nz-col>
               <nz-col [nzSpan]="7" class="alignRight">
                 @if (workflowRun.status !== pipelineStatusEnum.BUILDING && workflowRun.status !== pipelineStatusEnum.WAITING) {
-                  <i nz-icon nzType="calendar" nzTheme="outline"></i>
+                  <i nz-icon nzType="calendar" nzTheme="outline" aria-hidden="true"></i>
                   <span>{{workflowRun.last_execution | amLocal | amDateFormat: 'DD/MM/YYYY HH:mm' }}</span>
                 }
               </nz-col>
@@ -28,14 +29,14 @@
                 @if (direction === 'TB') {
                   <button nz-button class="direction"
                     (click)="changeDirection()">
-                    <i nz-icon nzType="arrow-right" nzTheme="outline"></i>
+                    <i nz-icon nzType="arrow-right" nzTheme="outline" aria-hidden="true"></i>
                     Workflow layout
                   </button>
                 }
                 @if (direction === 'LR') {
                   <button nz-button class="direction"
                     (click)="changeDirection()">
-                    <i nz-icon nzType="arrow-down" nzTheme="outline"></i>
+                    <i nz-icon nzType="arrow-down" nzTheme="outline" aria-hidden="true"></i>
                     Workflow layout
                   </button>
                 }
@@ -43,7 +44,7 @@
               <nz-col [nzSpan]="10" class="center">
                 @if (author) {
                   <div>
-                    <i nz-icon nzType="user" nzTheme="outline"></i>
+                    <i nz-icon nzType="user" nzTheme="outline" aria-hidden="true"></i>
                   </div>
                   {{author}}
                 }
@@ -65,7 +66,7 @@
                   <button nz-button nz-tooltip nzTooltipTitle="This action will resend to your repository manager the current status of all your pipelines"
                     [nzLoading]="loadingAction"
                     (click)="resyncVCSStatus()">
-                    <i nz-icon nzType="sync" nzTheme="outline"></i>
+                    <i nz-icon nzType="sync" nzTheme="outline" aria-hidden="true"></i>
                     {{ 'workflow_resync_vcs' | translate }}
                   </button>
                 </nz-col>
@@ -86,16 +87,16 @@
               </nz-row>
             }
           </nz-card>
-          <div class="semicircle" (click)="showInfos = !showInfos"
+          <div class="semicircle" appClickable aria-label="Run information" [attr.aria-expanded]="showInfos" (click)="showInfos = !showInfos"
             [class.building]="workflowRun.status === pipelineStatusEnum.PENDING || workflowRun.status === pipelineStatusEnum.BUILDING || workflowRun.status === pipelineStatusEnum.WAITING"
             [class.success]="workflowRun.status === pipelineStatusEnum.SUCCESS"
             [class.fail]="workflowRun.status === pipelineStatusEnum.FAIL || workflowRun.status === pipelineStatusEnum.STOPPED"
             [class.inactive]="workflowRun.status === pipelineStatusEnum.DISABLED || workflowRun.status === pipelineStatusEnum.SKIPPED || workflowRun.status === pipelineStatusEnum.NEVER_BUILT">
             @if (!showInfos) {
-              <i nz-icon nzType="down" nzTheme="outline"></i>
+              <i nz-icon nzType="down" nzTheme="outline" aria-hidden="true"></i>
             }
             @if (showInfos) {
-              <i nz-icon nzType="up" nzTheme="outline"></i>
+              <i nz-icon nzType="up" nzTheme="outline" aria-hidden="true"></i>
             }
           </div>
         </nz-col>
diff --git a/ui/src/app/views/workflow/run/workflow.run.html b/ui/src/app/views/workflow/run/workflow.run.html
index 268e9ed87e..73c56ad712 100644
--- a/ui/src/app/views/workflow/run/workflow.run.html
+++ b/ui/src/app/views/workflow/run/workflow.run.html
@@ -12,7 +12,7 @@
                 @if (info.type === 'Error') {
                   <nz-collapse-panel [nzActive]="first" [nzHeader]="headerTmpl">
                     <ng-template #headerTmpl>
-                      <i nz-icon nzType="warning" nzTheme="fill" class="header"></i>
+                      <i nz-icon nzType="warning" nzTheme="fill" class="header" aria-hidden="true"></i>
                       @if (!errorsMap[info.message.id]) {
                         <span>{{info.message.id}}</span>
                       }
@@ -32,7 +32,7 @@
                     <p>
                       @if (errorsMap[info.message.id] && errorsMap[info.message.id].link) {
                         <span>
-                          <i nz-icon nzType="book" nzTheme="outline"></i>{{'common_find_help' | translate}}
+                          <i nz-icon nzType="book" nzTheme="outline" aria-hidden="true"></i>{{'common_find_help' | translate}}
                           <a target="_blank" rel="noopener noreferrer" [href]="errorsMap[info.message.id]?.link">{{'common_here' | translate}}</a>.
                         </span>
                       }
@@ -54,7 +54,7 @@
           @for (info of warnings; track info; let first = $first) {
             <nz-collapse-panel [nzActive]="first" [nzHeader]="headerWarnTmpl">
               <ng-template #headerWarnTmpl>
-                <i nz-icon nzType="warning" nzTheme="fill" class="header warning"></i>
+                <i nz-icon nzType="warning" nzTheme="fill" class="header warning" aria-hidden="true"></i>
                 @if (warningsMap[info.message.id]) {
                   <span>{{warningsMap[info.message.id].title |
                   translate}}</span>
@@ -69,7 +69,7 @@
                 </p>
                 @if (warningsMap[info.message.id]) {
                   <p>
-                    <i nz-icon nzType="book" nzTheme="outline"></i>{{'common_find_help' | translate}}
+                    <i nz-icon nzType="book" nzTheme="outline" aria-hidden="true"></i>{{'common_find_help' | translate}}
                     <a target="_blank" rel="noopener noreferrer" [href]="warningsMap[info.message.id].link">{{'common_here' | translate}}</a>
                   </p>
                 }
@@ -86,7 +86,7 @@
         <nz-collapse>
           <nz-collapse-panel [nzHeader]="headerROTmpl">
             <ng-template #headerROTmpl>
-              <i nz-icon nzType="warning" nzTheme="outline" class="header info"></i>
+              <i nz-icon nzType="warning" nzTheme="outline" class="header info" aria-hidden="true"></i>
               <span>{{'workflow_run_readonly_title' | translate}}</span>
             </ng-template>
             <p>{{'workflow_run_readonly_content' | translate}}</p>
@@ -105,7 +105,7 @@
       <div class="loading">
         <div class="col">
           @if (!runDelayed) {
-            <div class="sk-fold">
+            <div class="sk-fold" aria-hidden="true">
               <div class="sk-fold-cube"></div>
               <div class="sk-fold-cube"></div>
               <div class="sk-fold-cube"></div>
@@ -115,7 +115,7 @@
           }
           @if (runDelayed) {
             <div>
-              <i nz-icon nzType="hourglass" nzTheme="outline"></i>
+              <i nz-icon nzType="hourglass" nzTheme="outline" aria-hidden="true"></i>
               {{'workflow_run_delayed' | translate }}
             </div>
           }
diff --git a/ui/src/app/views/workflow/show/admin/workflow.admin.component.html b/ui/src/app/views/workflow/show/admin/workflow.admin.component.html
index 4de52d43d4..b25c25f134 100644
--- a/ui/src/app/views/workflow/show/admin/workflow.admin.component.html
+++ b/ui/src/app/views/workflow/show/admin/workflow.admin.component.html
@@ -32,9 +32,9 @@
   <nz-card nzTitle="Settings" class="coloredTitle">
     <form nz-form (ngSubmit)="onSubmitWorkflowUpdate()">
       <nz-form-item>
-        <nz-form-label [nzSpan]="6">Workflow name</nz-form-label>
+        <nz-form-label [nzSpan]="6" nzFor="cds-field-admin-name">Workflow name</nz-form-label>
         <nz-form-control>
-          <input nz-input type="text" name="formWorkflowUpdateName"
+          <input nz-input type="text" name="formWorkflowUpdateName" id="cds-field-admin-name"
             [disabled]="loading || (workflow.from_repository && workflow.from_repository.length > 0)"
             [(ngModel)]="workflow.name" [disabled]="loading" required #formWorkflowUpdateName="ngModel"
             pattern="^[a-zA-Z0-9._-]{1,}$">
@@ -45,26 +45,26 @@
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
-        <nz-form-label [nzSpan]="6">Description</nz-form-label>
+        <nz-form-label [nzSpan]="6" nzFor="cds-field-admin-description">Description</nz-form-label>
         <nz-form-control>
-          <textarea nz-input name="description" [(ngModel)]="_workflow.description"
+          <textarea nz-input name="description" id="cds-field-admin-description" [(ngModel)]="_workflow.description"
           [disabled]="loading"></textarea>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
-        <nz-form-label [nzSpan]="6">
+        <nz-form-label [nzSpan]="6" nzFor="cds-field-admin-tags">
           Add sidebar's tags
         </nz-form-label>
         <nz-form-control>
           @if (existingTags.length > 0) {
             <div class="selectTag">
-              <nz-select name="tags" nzShowSearch [nzLoading]="loading" [(ngModel)]="tagsToAdd" nzMode="multiple">
+              <nz-select name="tags" nzId="cds-field-admin-tags" nzShowSearch [nzLoading]="loading" [(ngModel)]="tagsToAdd" nzMode="multiple">
                 @for (i of existingTags; track i) {
                   <nz-option [nzValue]="i" [nzLabel]="i"></nz-option>
                 }
               </nz-select>
-              <button nz-button (click)="updateTagMetadata()" type="button" [disabled]="!tagsToAdd">
-                <i nz-icon nzType="plus" nzTheme="outline"></i>
+              <button nz-button (click)="updateTagMetadata()" type="button" [disabled]="!tagsToAdd" aria-label="Add sidebar's tags">
+                <i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i>
               </button>
             </div>
           }
@@ -80,7 +80,7 @@
                 <nz-tag>
                   {{t + ' '}}
                   @if (workflow.permissions.writable) {
-                    <i nz-icon nzType="close" nzTheme="outline"  (click)="removeFromSelectedTags(i)"></i>
+                    <i nz-icon nzType="close" nzTheme="outline" appClickable [attr.aria-label]="'Remove tag ' + t" (click)="removeFromSelectedTags(i)"></i>
                   }
                 </nz-tag>
               }
@@ -93,9 +93,9 @@
       </nz-form-item>
       @if (!retentionRunsPolicyEnabled) {
         <nz-form-item>
-          <nz-form-label [nzSpan]="6">Maximum number of workflow runs</nz-form-label>
+          <nz-form-label [nzSpan]="6" nzFor="cds-field-admin-history-length">Maximum number of workflow runs</nz-form-label>
           <nz-form-control>
-            <input nz-input type="number" name="formWorkflowUpdateHistory" [disabled]="loading"
+            <input nz-input type="number" name="formWorkflowUpdateHistory" id="cds-field-admin-history-length" [disabled]="loading"
               [(ngModel)]="_workflow.history_length" required
               #formWorkflowUpdateHistory="ngModel" min="1" max="500">
           </nz-form-control>
@@ -103,16 +103,16 @@
       }
       @if (!retentionRunsPolicyEnabled) {
         <nz-form-item>
-          <nz-form-label [nzSpan]="6">Purge tags</nz-form-label>
+          <nz-form-label [nzSpan]="6" nzFor="cds-field-admin-purge-tags">Purge tags</nz-form-label>
           <nz-form-control>
             <div class="selectTag">
-              <nz-select nzShowSearch nzMode="multiple" name="sidebartagzonehistory" [(ngModel)]="tagsToAddPurge" [nzLoading]="loading">
+              <nz-select nzShowSearch nzMode="multiple" name="sidebartagzonehistory" nzId="cds-field-admin-purge-tags" [(ngModel)]="tagsToAddPurge" [nzLoading]="loading">
                 @for (i of existingTagsPurge; track i) {
                   <nz-option [nzValue]="i" [nzLabel]="i">
                   </nz-option>
                 }
               </nz-select>
-              <button nz-button (click)="updateTagPurge()" type="button" [disabled]="!tagsToAddPurge"><i nz-icon nzType="plus" nzTheme="outline"></i></button>
+              <button nz-button (click)="updateTagPurge()" type="button" [disabled]="!tagsToAddPurge" aria-label="Add purge tags"><i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i></button>
             </div>
           </nz-form-control>
         </nz-form-item>
@@ -128,7 +128,7 @@
                   <nz-tag>
                     {{t + ' '}}
                     @if (workflow.permissions.writable) {
-                      <i nz-icon nzType="close" nzTheme="outline"
+                      <i nz-icon nzType="close" nzTheme="outline" appClickable [attr.aria-label]="'Remove purge tag ' + t"
                       (click)="removeFromSelectedTagsPurge(i)"></i>
                     }
                   </nz-tag>
@@ -201,13 +201,13 @@
                 }
                 <div class="alignRight">
                   @if (dryRunStatus === 'INCOMING') {
-                    <i nz-icon [nzType]="'sync'" [nzSpin]="true" class="blue"></i>
+                    <i nz-icon [nzType]="'sync'" [nzSpin]="true" class="blue" role="img" aria-label="Status: in progress"></i>
                   }
                   @if (dryRunStatus === 'ERROR') {
-                    <i nz-icon nzType="close-circle" nzTheme="outline" class="red"></i>
+                    <i nz-icon nzType="close-circle" nzTheme="outline" class="red" role="img" aria-label="Status: error"></i>
                   }
                   @if (dryRunStatus === 'DONE') {
-                    <i nz-icon nzType="check-circle" nzTheme="outline" class="green"></i>
+                    <i nz-icon nzType="check-circle" nzTheme="outline" class="green" role="img" aria-label="Status: done"></i>
                   }
                   {{dryRunAnalyzedRuns + ' / ' + dryRunMaxDatas + ' run analyzed ( ' +
                   dryRunDatas.length + ' runs kept )'}}
@@ -231,9 +231,9 @@ <h4>{{'workflow_retention_result_title' | translate }}</h4>
         </nz-form-item>
       }
       <nz-form-item>
-        <nz-form-label>Current run number</nz-form-label>
+        <nz-form-label nzFor="cds-field-admin-run-number">Current run number</nz-form-label>
         <nz-form-control>
-          <input nz-input type="number" name="formWorkflowRunNumUpdateNumber"
+          <input nz-input type="number" name="formWorkflowRunNumUpdateNumber" id="cds-field-admin-run-number"
             [(ngModel)]="runnumber" required
             #formWorkflowRunNumUpdateNumber="ngModel">
         </nz-form-control>
@@ -254,15 +254,15 @@ <h4>{{'workflow_retention_result_title' | translate }}</h4>
   <nz-card nzTitle="Integrations" class="coloredTitle">
     <form nz-form>
       <nz-form-item>
-        <nz-form-label>Link an integration</nz-form-label>
+        <nz-form-label nzFor="cds-field-admin-integration">Link an integration</nz-form-label>
         <nz-form-control>
           <div class="selectTag">
-            <nz-select nzShowSearch name="selectIntegration" [(ngModel)]="selectedIntegration" placeholder="Link an integration...">
+            <nz-select nzShowSearch name="selectIntegration" nzId="cds-field-admin-integration" [(ngModel)]="selectedIntegration" placeholder="Link an integration...">
               @for (t of filteredIntegrations; track t) {
                 <nz-option [nzValue]="t" [nzLabel]="t.name"></nz-option>
               }
             </nz-select>
-            <button nz-button type="button" nzType="primary" [nzLoading]="loading" (click)="addIntegration()"><i nz-icon nzType="plus" nzTheme="outline"></i>Link</button>
+            <button nz-button type="button" nzType="primary" [nzLoading]="loading" (click)="addIntegration()"><i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i>Link</button>
           </div>
         </nz-form-control>
       </nz-form-item>
diff --git a/ui/src/app/views/workflow/show/notification/form/workflow.notifications.form.html b/ui/src/app/views/workflow/show/notification/form/workflow.notifications.form.html
index 957672c7e3..d95bd5f34a 100644
--- a/ui/src/app/views/workflow/show/notification/form/workflow.notifications.form.html
+++ b/ui/src/app/views/workflow/show/notification/form/workflow.notifications.form.html
@@ -7,34 +7,34 @@
       <nz-row>
         <nz-col [nzSpan]="10">
           <nz-form-item>
-            <nz-form-label>Notification type</nz-form-label>
+            <nz-form-label nzFor="cds-field-notif-type">Notification type</nz-form-label>
             <nz-form-control>
               @if (!readOnly) {
-                <nz-select nzShowSearch name="type" [(ngModel)]="notification.type" (ngModelChange)="formatNode()">
+                <nz-select nzShowSearch name="type" nzId="cds-field-notif-type" [(ngModel)]="notification.type" (ngModelChange)="formatNode()">
                   @for (notifType of types; track notifType) {
                     <nz-option [nzValue]="notifType" [nzLabel]="notifType"></nz-option>
                   }
                 </nz-select>
               }
               @if (readOnly) {
-                <input nz-input type="text" name="type" [ngModel]="notification.type"
+                <input nz-input type="text" name="type" id="cds-field-notif-type" [ngModel]="notification.type"
                   [readonly]="true">
               }
             </nz-form-control>
           </nz-form-item>
         </nz-col>
         <nz-col [nzSpan]="14">
-          <nz-form-label>Pipelines</nz-form-label>
+          <nz-form-label nzFor="cds-field-notif-pipelines">Pipelines</nz-form-label>
           <nz-form-control>
             @if (!readOnly) {
-              <nz-select nzShowSearch name="nodes" nzMode="multiple" [(ngModel)]="notification.source_node_ref">
+              <nz-select nzShowSearch name="nodes" nzId="cds-field-notif-pipelines" nzMode="multiple" [(ngModel)]="notification.source_node_ref">
                 @for (n of nodes; track n) {
                   <nz-option [nzLabel]="n.name" [nzValue]="n.name"></nz-option>
                 }
               </nz-select>
             }
             @if (readOnly) {
-              <input nz-input type="text" name="nodes"
+              <input nz-input type="text" name="nodes" id="cds-field-notif-pipelines"
                 [ngModel]="notification.source_node_ref ? notification.source_node_ref.join(',') : ''"
                 [readonly]="true">
             }
@@ -45,11 +45,11 @@
         <nz-row >
           <nz-col [nzSpan]="8">
             <nz-form-item>
-              <nz-form-label>Send on success</nz-form-label>
+              <nz-form-label nzFor="cds-field-notif-on-success">Send on success</nz-form-label>
               <nz-form-control>
                 @if (notification && notification.settings && notification.settings.on_success && notifOnSuccess) {
                   @if (!readOnly) {
-                    <nz-select nzShowSearch name="onsuccess"
+                    <nz-select nzShowSearch name="onsuccess" nzId="cds-field-notif-on-success"
                       [(ngModel)]="notification.settings.on_success" >
                       @for (n of notifOnSuccess; track n) {
                         <nz-option [nzValue]="n" [nzLabel]="n">
@@ -58,7 +58,7 @@
                     </nz-select>
                   }
                   @if (readOnly) {
-                    <input nz-inputtype="text" name="onsuccess"
+                    <input nz-inputtype="text" name="onsuccess" id="cds-field-notif-on-success"
                       [ngModel]="notification.settings.on_success" [readonly]="true">
                   }
                 }
@@ -67,10 +67,10 @@
           </nz-col>
           <nz-col [nzSpan]="8">
             <nz-form-item>
-              <nz-form-label>Send on error</nz-form-label>
+              <nz-form-label nzFor="cds-field-notif-on-failure">Send on error</nz-form-label>
               <nz-form-control>
                 @if (!readOnly) {
-                  <nz-select nzShowSearch name="onfailure"
+                  <nz-select nzShowSearch name="onfailure" nzId="cds-field-notif-on-failure"
                     [(ngModel)]="notification.settings.on_failure">
                     @for (n of notifOnFailure; track n) {
                       <nz-option [nzValue]="n" [nzLabel]="n">
@@ -79,7 +79,7 @@
                   </nz-select>
                 }
                 @if (readOnly) {
-                  <input nz-input type="text" name="onfailure"
+                  <input nz-input type="text" name="onfailure" id="cds-field-notif-on-failure"
                     [ngModel]="notification.settings.on_failure" [readonly]="true">
                 }
               </nz-form-control>
@@ -87,9 +87,9 @@
           </nz-col>
           <nz-col [nzSpan]="8">
             <nz-form-item>
-              <nz-form-label>Send on start</nz-form-label>
+              <nz-form-label nzFor="cds-field-notif-on-start">Send on start</nz-form-label>
               <nz-form-control>
-                <nz-switch [disabled]="readOnly" name="onstart"
+                <nz-switch [disabled]="readOnly" name="onstart" nzId="cds-field-notif-on-start"
                   [(ngModel)]="notification.settings.on_start"
                   [nzCheckedChildren]="checkedTemplate"
                   [nzUnCheckedChildren]="unCheckedTemplate"
@@ -101,17 +101,17 @@
         <nz-row>
           <nz-col [nzSpan]="12">
             <nz-form-item>
-              <nz-form-label>Mails</nz-form-label>
+              <nz-form-label nzFor="cds-field-notif-mails">Mails</nz-form-label>
               <nz-form-control>
-                <input nz-input type="text" name="users" [(ngModel)]="selectedUsers" [readonly]="readOnly">
+                <input nz-input type="text" name="users" id="cds-field-notif-mails" [(ngModel)]="selectedUsers" [readonly]="readOnly">
               </nz-form-control>
             </nz-form-item>
           </nz-col>
           <nz-col [nzSpan]="6">
             <nz-form-item>
-              <nz-form-label>Send to group</nz-form-label>
+              <nz-form-label nzFor="cds-field-notif-to-group">Send to group</nz-form-label>
               <nz-form-control>
-                <nz-switch [disabled]="readOnly" name="togroup"
+                <nz-switch [disabled]="readOnly" name="togroup" nzId="cds-field-notif-to-group"
                   [(ngModel)]="notification.settings.send_to_groups"
                   [nzCheckedChildren]="checkedTemplate"
                   [nzUnCheckedChildren]="unCheckedTemplate"
@@ -121,9 +121,9 @@
           </nz-col>
           <nz-col [nzSpan]="6">
             <nz-form-item>
-              <nz-form-label>Send to initiator</nz-form-label>
+              <nz-form-label nzFor="cds-field-notif-to-initiator">Send to initiator</nz-form-label>
               <nz-form-control>
-                <nz-switch [disabled]="readOnly" name="toInitiator"
+                <nz-switch [disabled]="readOnly" name="toInitiator" nzId="cds-field-notif-to-initiator"
                   [(ngModel)]="notification.settings.send_to_author"
                   [nzCheckedChildren]="checkedTemplate"
                   [nzUnCheckedChildren]="unCheckedTemplate"
@@ -135,9 +135,9 @@
         <nz-row>
           <nz-col [nzSpan]="24">
             <nz-form-item>
-              <nz-form-label>Subject</nz-form-label>
+              <nz-form-label nzFor="cds-field-notif-subject">Subject</nz-form-label>
               <nz-form-control>
-                <input nz-input type="text" name="title" [(ngModel)]="notification.settings.template.subject"
+                <input nz-input type="text" name="title" id="cds-field-notif-subject" [(ngModel)]="notification.settings.template.subject"
                   [readonly]="readOnly">
               </nz-form-control>
             </nz-form-item>
@@ -146,10 +146,10 @@
         <nz-row>
           <nz-col [nzSpan]="24">
             <nz-form-item>
-              <nz-form-label>Message</nz-form-label>
+              <nz-form-label nzFor="cds-field-notif-email-body">Message</nz-form-label>
               <nz-form-control>
                 <textarea nz-input type="text" rows="8" [(ngModel)]="notification.settings.template.body" name="body"
-                [readonly]="readOnly"></textarea>
+                id="cds-field-notif-email-body" [readonly]="readOnly"></textarea>
               </nz-form-control>
             </nz-form-item>
           </nz-col>
@@ -174,9 +174,9 @@
         <nz-row>
           <nz-col [nzSpan]="8">
             <nz-form-item>
-              <nz-form-label>Send status on commit</nz-form-label>
+              <nz-form-label nzFor="cds-field-notif-status-enabled">Send status on commit</nz-form-label>
               <nz-form-control>
-                <nz-switch [disabled]="readOnly" name="statusEnabled"
+                <nz-switch [disabled]="readOnly" name="statusEnabled" nzId="cds-field-notif-status-enabled"
                   [(ngModel)]="statusEnabled"
                   [nzCheckedChildren]="checkedTemplate"
                   [nzUnCheckedChildren]="unCheckedTemplate"
@@ -186,9 +186,9 @@
           </nz-col>
           <nz-col [nzSpan]="8">
             <nz-form-item>
-              <nz-form-label>Pull-request's comment enabled</nz-form-label>
+              <nz-form-label nzFor="cds-field-notif-pr-enabled">Pull-request's comment enabled</nz-form-label>
               <nz-form-control>
-                <nz-switch [disabled]="readOnly" name="prEnabled"
+                <nz-switch [disabled]="readOnly" name="prEnabled" nzId="cds-field-notif-pr-enabled"
                   [(ngModel)]="commentEnabled"
                   [nzCheckedChildren]="checkedTemplate"
                   [nzUnCheckedChildren]="unCheckedTemplate"
@@ -198,9 +198,9 @@
           </nz-col>
           <nz-col [nzSpan]="8">
             <nz-form-item>
-              <nz-form-label>Always send</nz-form-label>
+              <nz-form-label nzFor="cds-field-notif-always-send">Always send</nz-form-label>
               <nz-form-control>
-                <nz-switch [disabled]="!commentEnabled || readOnly" name="alwaysSend"
+                <nz-switch [disabled]="!commentEnabled || readOnly" name="alwaysSend" nzId="cds-field-notif-always-send"
                   [(ngModel)]="alwaysSend"
                   [nzCheckedChildren]="checkedTemplate"
                   [nzUnCheckedChildren]="unCheckedTemplate"
@@ -212,10 +212,10 @@
         <nz-row>
           <nz-col [nzSpan]="24">
             <nz-form-item>
-              <nz-form-label>Pull-request's comment body</nz-form-label>
+              <nz-form-label nzFor="cds-field-notif-vcs-body">Pull-request's comment body</nz-form-label>
               <nz-form-control>
                 <textarea nz-input type="text" rows="8" [(ngModel)]="notification.settings.template.body"
-                [disabled]="!commentEnabled" name="body" [readonly]="readOnly"></textarea>
+                [disabled]="!commentEnabled" name="body" id="cds-field-notif-vcs-body" [readonly]="readOnly"></textarea>
               </nz-form-control>
             </nz-form-item>
           </nz-col>
diff --git a/ui/src/app/views/workflow/show/notification/list/workflow.notification.list.html b/ui/src/app/views/workflow/show/notification/list/workflow.notification.list.html
index cffb87b43b..200cb9a248 100644
--- a/ui/src/app/views/workflow/show/notification/list/workflow.notification.list.html
+++ b/ui/src/app/views/workflow/show/notification/list/workflow.notification.list.html
@@ -3,10 +3,10 @@
     <nz-col [nzSpan]="6">
       <div class="section">
         <h3>Workflow notifications</h3>
-        <button nz-button [disabled]="readOnly" (click)="openNewNotifArea()"><i nz-icon nzType="plus" nzTheme="outline"></i></button>
+        <button nz-button [disabled]="readOnly" (click)="openNewNotifArea()" aria-label="Add notification"><i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i></button>
       </div>
       @for (n of workflow.notifications; track n; let i = $index) {
-        <div class="item" (click)="openEditionArea(i)" [class.active]="this.selectedNotification === i">
+        <div class="item" appClickable (click)="openEditionArea(i)" [class.active]="this.selectedNotification === i">
           <div class="content">
             <div class="title">
               {{n.type}}
@@ -24,7 +24,7 @@ <h3>Workflow notifications</h3>
       }
       <div class="section">
         <h3>Events integration</h3>
-        <button nz-button (click)="openNewEventArea()"><i nz-icon nzType="plus" nzTheme="outline"></i></button>
+        <button nz-button (click)="openNewEventArea()" aria-label="Add event integration"><i nz-icon nzType="plus" nzTheme="outline" aria-hidden="true"></i></button>
       </div>
       @for (eventIntegration of workflow.integrations | callback: filterEvent; track eventIntegration) {
         <div class="item">
@@ -69,7 +69,7 @@ <h3>Events integration</h3>
         @if (eventIntegrations && eventIntegrations.length > 0) {
           <nz-form-item>
             <nz-form-control>
-              <nz-select nzShowSearch [(ngModel)]="selectedIntegration" name="integ" class="integrationsList">
+              <nz-select nzShowSearch [(ngModel)]="selectedIntegration" name="integ" class="integrationsList" aria-label="Event integration">
                 @for (o of eventIntegrations; track o) {
                   <nz-option [nzLabel]="o.name" [nzValue]="o"></nz-option>
                 }
@@ -81,7 +81,7 @@ <h3>Events integration</h3>
           <button nz-button nzType="primary" [nzLoading]="loading"
             [disabled]="!selectedIntegration || loading"
             (click)="addEvent(selectedIntegration)">
-            <i nz-icon nzType="save" nzTheme="outline"></i>Add
+            <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>Add
           </button>
         </nz-form-item>
       </form>
diff --git a/ui/src/app/views/workflow/show/workflow.html b/ui/src/app/views/workflow/show/workflow.html
index 5c20ee9cf2..d86af0f4d4 100644
--- a/ui/src/app/views/workflow/show/workflow.html
+++ b/ui/src/app/views/workflow/show/workflow.html
@@ -18,28 +18,29 @@
                             <nz-col [nzSpan]="7">
                                 <button nz-button *ngIf="direction === 'TB'" class="direction"
                                         (click)="changeDirection()">
-                                    <i nz-icon nzType="arrow-right" nzTheme="outline"></i>
+                                    <i nz-icon nzType="arrow-right" nzTheme="outline" aria-hidden="true"></i>
                                     Workflow layout
                                 </button>
                                 <button nz-button *ngIf="direction === 'LR'" class="direction"
                                         (click)="changeDirection()">
-                                    <i nz-icon nzType="arrow-down" nzTheme="outline"></i>
+                                    <i nz-icon nzType="arrow-down" nzTheme="outline" aria-hidden="true"></i>
                                     Workflow layout
                                 </button>
                             </nz-col>
                             <nz-col [nzSpan]="10" class="center">
                                 <button nz-button nzType="primary" (click)="showAsCodeEditor()"
                                      [nzLoading]="loading">
-                                    <i nz-icon nzType="code" nzTheme="outline"></i>
+                                    <i nz-icon nzType="code" nzTheme="outline" aria-hidden="true"></i>
                                     Edit as code
                                     <i nz-icon nzType="warning" nzTheme="outline" class="orange" *ngIf="previewWorkflow"
+                                        role="img" aria-label="Your workflow is in preview mode"
                                         nz-tooltip nzTooltipTitle="Your workflow is in preview mode"></i>
                                 </button>
                                 <button nz-button nzType="primary" *ngIf="previewWorkflow"
                                      (click)="savePreview()" class="savePreview"
                                      [class.disabled]="!detailedWorkflow.permissions.writable"
                                      [nzLoading]="loading">
-                                    <i nz-icon nzType="save" nzTheme="outline"></i>Save
+                                    <i nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></i>Save
                                 </button>
                             </nz-col>
                             <nz-col [nzSpan]="7" class="alignRight">
diff --git a/ui/src/app/views/workflow/sidebar/code/sidebar.code.html b/ui/src/app/views/workflow/sidebar/code/sidebar.code.html
index caf4d218ce..5857444ae0 100644
--- a/ui/src/app/views/workflow/sidebar/code/sidebar.code.html
+++ b/ui/src/app/views/workflow/sidebar/code/sidebar.code.html
@@ -10,17 +10,17 @@
       <nz-row>
         <nz-col [nzSpan]="24">
           <button nz-button nzBlock  name="previewbtn" [disabled]="loading || (workflow.from_repository && workflow.from_repository.length > 0) || !workflow.permissions.writable" [nzLoading]="loading" (click)="preview()">
-            <span nz-icon nzType="eye" nzTheme="outline"></span> Preview
+            <span nz-icon nzType="eye" nzTheme="outline" aria-hidden="true"></span> Preview
           </button>
         </nz-col>
         <nz-col [nzSpan]="11">
           <button nz-button nzBlock nzType="primary" name="updatebtn" [disabled]="loading || (workflow.from_repository && workflow.from_repository.length > 0) || !workflow.permissions.writable" [nzLoading]="loading" (click)="save()">
-            <span nz-icon nzType="save" nzTheme="outline"></span>Save
+            <span nz-icon nzType="save" nzTheme="outline" aria-hidden="true"></span>Save
           </button>
         </nz-col>
         <nz-col [nzSpan]="11" [nzOffset]="2">
           <button nz-button nzBlock nzDanger nzType="primary" name="cancelbtn" [disabled]="loading" [nzLoading]="loading" (click)="cancel()">
-            <span nz-icon nzType="close" nzTheme="outline"></span>Close
+            <span nz-icon nzType="close" nzTheme="outline" aria-hidden="true"></span>Close
           </button>
         </nz-col>
       </nz-row>
diff --git a/ui/src/app/views/workflow/workflow.html b/ui/src/app/views/workflow/workflow.html
index 4b8bae8981..4783874d22 100644
--- a/ui/src/app/views/workflow/workflow.html
+++ b/ui/src/app/views/workflow/workflow.html
@@ -3,7 +3,7 @@
     <nz-tag class="labelFeature" [title]="'workflow_from_template_btn' | translate"
       [nzColor]="workflow && workflow.from_template ? (workflow.template_up_to_date ? 'green' : 'orange') : ''"
       nz-popover nzPopoverTrigger="click" [nzPopoverContent]="popupFromTemplate"
-      nzPopoverPlacement="bottomRight"><i nz-icon nzType="copy" nzTheme="outline"></i>template</nz-tag>
+      nzPopoverPlacement="bottomRight"><i nz-icon nzType="copy" nzTheme="outline" aria-hidden="true"></i>template</nz-tag>
       <ng-template #popupFromTemplate>
         <div class="content infoPopup">
           @if (workflow && workflow.from_template) {
@@ -35,7 +35,7 @@
       </ng-template>
       <nz-tag class="labelFeature" [title]="'workflow_from_repository_btn' | translate" [nzColor]="asCodeTagColor"
         nz-popover nzPopoverTrigger="click" [nzPopoverContent]="popupFromRepository"
-        nzPopoverPlacement="bottomRight"><i nz-icon nzType="code" nzTheme="outline"></i>as code</nz-tag>
+        nzPopoverPlacement="bottomRight"><i nz-icon nzType="code" nzTheme="outline" aria-hidden="true"></i>as code</nz-tag>
         <ng-template #popupFromRepository>
           <div class="content infoPopup">
             @if (workflow && (workflow.from_repository || (workflow.as_code_events && workflow.as_code_events.length > 0))) {
diff --git a/ui/src/index.html b/ui/src/index.html
index 2db9f519cc..ca507a5ae4 100644
--- a/ui/src/index.html
+++ b/ui/src/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
 
 <head>
     <meta charset="utf-8">
@@ -16,7 +16,7 @@
 
 <body>
     <app-root>
-        <div class="app-loader">
+        <div class="app-loader" role="status">
             <span nz-icon [nzType]="'loading'"></span>CDS is loading
         </div>
     </app-root>
diff --git a/ui/src/styles.scss b/ui/src/styles.scss
index 3aad70e9d5..277802e974 100644
--- a/ui/src/styles.scss
+++ b/ui/src/styles.scss
@@ -13,6 +13,42 @@ body {
     overflow-y: hidden;
 }
 
+// Screenreader-only content: visually hidden, still announced by AT.
+.cds-sr-only {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap !important;
+    border: 0 !important;
+}
+
+// Skip link: rendered off-screen, becomes visible only while keyboard-focused.
+.cds-skip-link {
+    position: absolute;
+    left: -9999px;
+    top: 0;
+    z-index: 2000;
+    padding: 8px 16px;
+    background: #fff;
+    color: #1890ff;
+    border: 1px solid #d4d4d5;
+    border-radius: 0 0 3px 3px;
+
+    &:focus {
+        left: 0;
+    }
+}
+
+// Programmatic focus target for the skip link; no visible ring on the page body.
+#main-content:focus {
+    outline: none;
+}
+
 .app-loader {
     position: absolute;
     top: 50%;

From 1535eb2959f2fad74085b83cd1b72b0470ed3f88 Mon Sep 17 00:00:00 2001
From: Benjamin Hofer <benjamin@gridscale.io>
Date: Wed, 15 Jul 2026 17:28:43 +0200
Subject: [PATCH 2/2] docs(ui): rework accessibility spec for review

Replace the historical audit/phasing plan with a single spec that
describes how accessibility works in the current codebase and the
rules to follow for future template changes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 ui/.eslintrc.js               |   4 +-
 ui/docs/accessibility-plan.md | 267 ----------------------------------
 ui/docs/accessibility.md      | 106 +++++++++++---
 3 files changed, 85 insertions(+), 292 deletions(-)
 delete mode 100644 ui/docs/accessibility-plan.md

diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
index 353b6a6d60..16f5522b2d 100644
--- a/ui/.eslintrc.js
+++ b/ui/.eslintrc.js
@@ -75,8 +75,8 @@ module.exports = {
                     "off"
                 ],
                 // Accessibility rules (see ui/docs/accessibility.md).
-                // Introduced as "warn"; flipped to "error" per rule once the
-                // corresponding remediation sweep is complete.
+                // A rule runs at "warn" while legacy templates still trigger it
+                // and is switched to "error" once the codebase is clean for it.
                 "@angular-eslint/template/alt-text": ["warn"],
                 "@angular-eslint/template/click-events-have-key-events": ["warn"],
                 "@angular-eslint/template/elements-content": ["warn"],
diff --git a/ui/docs/accessibility-plan.md b/ui/docs/accessibility-plan.md
deleted file mode 100644
index 59823ec78b..0000000000
--- a/ui/docs/accessibility-plan.md
+++ /dev/null
@@ -1,267 +0,0 @@
-# CDS UI — Screenreader Accessibility Plan
-
-**Goal:** Full screenreader support (NVDA, JAWS, VoiceOver) for the CDS web UI (`ui/`), targeting **WCAG 2.2 Level AA** conformance (the current normative standard, and the baseline required by EN 301 549 / the European Accessibility Act). Keyboard operability is treated as a prerequisite of screenreader support throughout — a control NVDA cannot reach is a control NVDA cannot announce.
-
-**Hard constraint for the first PR(s): zero visual change.** Sighted users must see pixel-identical rendering after the change. This plan therefore classifies every work item by visual impact (see §3) and defines a first-PR scope (§6) that is strictly non-visual. Visually observable improvements (better focus styles, a graph list view, reorder buttons, component migrations) are explicitly deferred to later, separately reviewable steps.
-
-**Scope:** `ui/src/**` (Angular 21 app, ng-zorro-antd) and `ui/libs/workflow-graph` (standalone SVG DAG library). Both UI generations are in scope: v1 (`views/workflow`, `views/pipeline`, …) and v2 (`views/projectv2`), with v2 prioritized.
-
----
-
-## 1. Current state (audit summary)
-
-An audit of all 217 templates and 460 TypeScript files (2026-07) found:
-
-### Global / structural
-- **Zero hand-authored ARIA** in the entire app: no `aria-*`, no `role=`, no `[attr.aria…]` bindings. All existing semantics come implicitly from ng-zorro components.
-- `ui/src/index.html:2` — `<html>` has **no `lang` attribute** (WCAG 3.1.1 failure on every page).
-- **No landmark elements** anywhere: the shell (`src/app/app.component.html`) uses `nz-layout`/`nz-header`/`nz-content`, which render generic `<div>`s. No `<main>`, `<nav>`, `<header>`, `<footer>`, no skip link.
-- Page titles: `Title` service is wired via route `data.title` in `app.component.ts:199-220` — good foundation, but coverage per route is incomplete.
-- **No focus management, no live regions**: `@angular/cdk/a11y` (LiveAnnouncer, FocusMonitor, FocusTrap) is unused; only 2 `.focus()` calls in the whole app.
-- **No a11y linting**: `.eslintrc.js` extends only `plugin:@angular-eslint/template/recommended`; the accessibility ruleset is not enabled.
-
-### Semantics & controls
-- **Forms are the broadest defect**: 526 `<nz-form-label>` but only 12 `nzFor` associations; 200 `<input>` with only 13 `id`s; 0 native `<label for>`. Screenreaders announce most fields with no name (e.g. `views/auth/signin/signin.html:13-24`).
-- **28 fake links**: `<a class="pointing" (click)="…">` with no `href` — not focusable, not activatable by keyboard (e.g. `signin.html:28`, test filters in `views/workflow/run/node/test/table/test.table.html`).
-- **~38 click handlers on non-interactive elements** (`div`/`span`/`li`/`td`/`i`), including clickable table rows in `shared/table/data-table.html`.
-- **Icon-only buttons without accessible names** are common (navbar tool/settings triggers, `data-table.html:116` copy button, `workflow.notification.list.html:6,27`, graph controls). Some rely on `title=` only.
-- Headings exist but are ad hoc: many pages start at `<h2>`/`<h3>` with no `<h1>`, frequent level skips.
-- 3 `<img>` without `alt`; existing alts are weak (`alt="icon"`).
-
-### Custom widgets
-- **Workflow graph (v1 `views/workflow/graph/` and v2 `libs/workflow-graph/`)** — dagre-d3/SVG with Angular node components in `foreignObject`. Nodes are non-focusable `<div (click)>` (`job-node.html:1`); pan/zoom is d3-zoom (mouse-only); lasso multi-select is mouse-only. v2 has partial arrow-key navigation, but via `@HostListener('window:keydown')` (`graph.component.ts:187-245`) with **no tabindex, no roles, no focus indication, no announcements** — the graph is effectively invisible to a screenreader. v1 has no keyboard support at all.
-- **Run log viewer (`views/projectv2/run/run-job.html`)** — custom renderer: collapsible step blocks are clickable `<div>`s without button/`aria-expanded` semantics; lines stream in over WebSocket with no live region; manual scroll-windowing.
-- **Custom tabs (`shared/tabs/`)** — built as `<ul nz-menu><li nz-menu-item (click)>`: announced as a menu, not tabs; no `aria-selected`, no arrow-key support. Widely used for page sections.
-- **Drag-and-drop (ng2-dragula)** — pipeline stage reordering (`views/pipeline/show/workflow/pipeline.workflow.html:24`) and job/action step reordering (`shared/action/action.html:89`) are mouse-only with no keyboard alternative.
-- **Editors** — Monaco (via `nz-code-editor`) has strong built-in screenreader support but is never labeled by the app; CodeMirror 5 (`shared/codemirror.ts`, ~20 consumers) is largely inaccessible by design.
-- **Status indicators** — `shared/status/status.icon.html` conveys build state by icon + color class only, no text alternative; graph edges/forks are color-only.
-- **Live updates** — WebSocket-driven run/job status changes (`event-v2.service.ts`, `run-job.component.ts`) update the UI silently; toasts go through ng-zorro `NzNotificationService` (live-region behavior unverified).
-
-### Strengths to build on
-- Interactions overwhelmingly use real `<button>`/`nz-button` (350+).
-- Data tables use `nz-table` with real `<thead>`/`<th>`.
-- ng-zorro provides framework ARIA for `nz-modal` (focus trap, `role="dialog"`, Esc), `nz-select`, `nz-tabset`, `nz-dropdown`.
-- No positive `tabindex` values anywhere (no tab-order traps).
-- Run list/header status already uses distinct icon shapes per status, not color alone.
-- v2 graph already has a keyboard navigation model (`navigationGraph`) to attach real focus semantics to.
-
----
-
-## 2. Standards & references
-
-| Standard | Use |
-|---|---|
-| WCAG 2.2 Level AA | Conformance target; every work item below maps to success criteria (SC) |
-| WAI-ARIA 1.2 + ARIA Authoring Practices Guide (APG) | Widget patterns: tabs, dialogs, disclosure, listbox, toolbar, feed |
-| EN 301 549 | EU procurement/EAA alignment (inherits WCAG 2.2 AA) |
-| Angular CDK `a11y` package | `LiveAnnouncer`, `FocusMonitor`, `cdkTrapFocus`, `ListKeyManager` — preferred implementation vehicle |
-
-Primary assistive-technology test matrix: **NVDA + Chrome** and **NVDA + Firefox** (primary), VoiceOver + Safari (secondary), JAWS spot checks.
-
----
-
-## 3. Visual-impact classification & ground rules
-
-Every work item is tagged with one of:
-
-| Tag | Meaning | Ships in |
-|---|---|---|
-| **[A]** | **Zero visual impact in any state.** Attribute-only changes (`aria-*`, `role`, `id`, `lang`, `alt` on already-broken images), TypeScript-only changes (LiveAnnouncer, focus logic that doesn't add styles), off-screen DOM (`.sr-only` content), tooling/CI. | PR #1 wave (now) |
-| **[B]** | **Pixel-identical for mouse users; visible only during keyboard interaction.** Focus outlines on elements newly made focusable, the skip link (rendered off-screen, appears only on Tab focus). The default rendering of every page is untouched. | PR #2 wave (own review, explicitly flagged) |
-| **[C]** | **Visible UI change or element swap with styling risk.** New controls (list-view toggle, reorder buttons), element replacements (`<a>`→`<button>`, div→`<h2>`, custom tabs→`nz-tabset`), CSS additions. | **Open / To Do (visual impact)** — later, per-feature PRs with screenshots |
-
-### Techniques that keep [A] items truly invisible
-
-1. **Attribute-only retrofit instead of element swaps.** Where semantics call for a different element (`<button>`, `<h1>`, `<main>`), the first pass adds ARIA to the *existing* element instead: `role="button"` + `tabindex="0"` + Enter/Space handler on the clickable `<div>`/`<a>`; `role="heading" aria-level="1"` on the styled div; `role="main"`/`role="banner"`/`role="navigation"` on the existing layout containers. No DOM structure, classes, or CSS selectors change, so no style can shift. Element swaps become tracked [C] debt.
-2. **No new wrapper elements in PR #1.** Wrapping `<router-outlet>` in `<main>` could break descendant/child CSS selectors — use `role="main"` on the existing `div.content.inner-content` in `app.component.html` instead.
-3. **`.sr-only` utility class** (visually-hidden, standard clip-pattern) added once; all supplementary text for screenreaders (status text, table alternatives, instructions) uses it. Verify it isn't already themed by ng-zorro; name it `cds-sr-only` to avoid collisions.
-4. **No global CSS changes** in [A]/[B] waves. No `:focus-visible` overhauls yet — newly focusable elements simply get the browser's default focus ring (keyboard-only, [B]). The unified focus-style pass is [C].
-5. **`LiveAnnouncer` over focus moves** for route changes in wave 1: announcing the new page title is invisible; programmatically moving focus can paint a focus ring — that variant is [B].
-6. **Proof, not promise:** the PR runs a screenshot-diff pass (the testcafe e2e suite already captures screenshots via `-s screenshots`; add a compare step or BackstopJS/Playwright screenshot run over the main routes) demonstrating zero rendered-pixel change. This is the PR's headline evidence.
-
-### Known [A] risk points to verify during implementation
-- Adding `role`/`aria` attributes to elements ng-zorro also decorates (`nz-menu-item`, `nz-table` internals): confirm ng-zorro doesn't overwrite or conflict at runtime (it renders its own roles on some components). Test per component.
-- Adding `id`s to inputs: ensure no existing CSS `#id` selectors or tests collide; use a `cds-field-…` prefix.
-- Monaco `accessibilitySupport`/`ariaLabel` options: config-only, but verify no layout reflow (Monaco can reserve space differently in a11y mode when screen reader is detected — that behavior is user-triggered, not default rendering).
-
----
-
-## 4. Phased plan
-
-Phases are ordered by (impact × reach) / effort. Sizing: S ≤ 2 dev-days, M ≤ 1 week, L = 2–4 weeks. Every item carries its visual-impact tag.
-
-### Phase 0 — Tooling, guardrails, baseline (S–M) — all [A]
-
-Stop the bleeding before fixing the backlog: every new template must be born accessible. Nothing in this phase touches the rendered app at all.
-
-1. **[A] Enable a11y linting** — extend `plugin:@angular-eslint/template/accessibility` in `.eslintrc.js` for `*.html`. Initially set noisy rules (`label-has-associated-control`, `click-events-have-key-events`, `interactive-supports-focus`, `alt-text`, `valid-aria`, `role-has-required-aria`) to `warn`, flip to `error` per rule as each remediation sweep lands. Add to `lint-staged` so new code is gated immediately.
-2. **[A] Automated a11y checks in CI** — integrate `axe-core`: jasmine/karma helper for component tests, and an axe pass over the main routes in the e2e suite (`@testcafe-community/axe`; if e2e migrates, `@axe-core/playwright`). Record the baseline violation count; CI fails on regression above baseline; baseline ratchets down.
-3. **[A] Visual-regression harness** — screenshot capture + diff over the main routes (light and dark theme), wired into CI or at least into the PR workflow. This is both the zero-visual-change proof for this initiative and a lasting safety net for all future UI work.
-4. **[A] Conventions & docs** — `ui/docs/accessibility.md`: the ARIA conventions of this codebase (attribute-retrofit rules from §3, `cds-sr-only`, id-prefix scheme, `aria-label` for icon buttons, LiveAnnouncer usage), plus a PR checklist. `@angular/cdk/a11y` needs no new dependency (`@angular/cdk` is already installed).
-5. **[A] Baseline manual audit protocol** — script a 30-minute NVDA smoke pass (signin → home → project → run list → run → logs → settings) and record current behavior as the reference point.
-
-**Exit criteria:** lint + axe + screenshot-diff running in CI with a ratcheting baseline; contributor doc merged. Zero runtime changes shipped.
-
-### Phase 1 — Global structure: language, landmarks, titles, announcements (S–M)
-
-1. **[A]** `index.html`: add `lang="en"` to `<html>` (SC 3.1.1). Add `role="status"` to the boot-loader div.
-2. **[A] Landmarks via roles, not wrappers**: `role="banner"` on the existing navbar header element, `role="navigation" aria-label="Main"` on the navbar's menu container, `role="main"` on the existing content `div` around `<router-outlet>` in `app.component.html`. (SC 1.3.1, 2.4.1)
-3. **[A] Route titles + announcements** — audit `app.routing.ts` and all lazy routing files for missing `data.title`; fill gaps (title bar text changes are not "visual rendering" of the app, but flag it in the PR). On `NavigationEnd`, announce the new title via cdk `LiveAnnouncer` so SPA navigation is perceivable. (SC 2.4.2)
-4. **[B] Skip link** — visually-hidden-until-focused "Skip to main content" as first focusable element, targeting the main container (`tabindex="-1"` on target, `outline: none` scoped to it). Mouse users never see it; keyboard users see it on first Tab. (SC 2.4.1)
-5. **[A] Heading semantics without element swaps** — where a page's visual title is a styled `div`/`nzTitle`, add `role="heading" aria-level="N"`; fix aria-level so each page exposes exactly one level-1 heading and no skips. Actual element conversion (`<h1>` etc.) is deferred [C] debt. (SC 1.3.1, 2.4.6)
-6. **[C — deferred] Unified `:focus-visible` styling pass** across both themes. Until then, browser-default focus rings apply to newly focusable elements ([B]).
-
-**Exit criteria:** NVDA landmark (`D`) and heading (`H`) navigation plus title announcements work on every top-level route; screenshot diff clean.
-
-### Phase 2 — Forms & names sweep (M–L, mechanical but wide) — almost entirely [A]
-
-The single broadest defect class (526 labels / 12 associations). Pure attribute work.
-
-1. **[A] Label association** — one canonical pattern applied everywhere: `<nz-form-label nzFor="cds-field-x">` + `id="cds-field-x"` on the control. Where no visible label exists (search/filter inputs), `aria-label`; placeholders are never the only label. Sweep order: auth → v2 (`views/projectv2`) → settings → project/application/pipeline/environment → workflow v1 → shared components. (SC 1.3.1, 3.3.2, 4.1.2)
-2. **[A] Icon-only buttons** — sweep all buttons whose content is only `nz-icon`/`<i>`: add `aria-label` (keep existing `title`/tooltip for sighted users). Priority: navbar triggers, `shared/table/data-table.html:116`, graph controls (`libs/workflow-graph/.../graph.html:40-53`), `workflow.notification.list.html`. (SC 4.1.2)
-3. **[A] Images** — add the 3 missing `alt`s (`shared/card/card.html:2`, `shared/status/status.icon.html:4` → `alt=""` decorative, `shared/table/data-table.html:55`); replace meaningless `alt="icon"` values. (SC 1.1.1)
-4. **[A] Status text alternatives** — `aria-label="Status: Success"` on status icons (`shared/status/`, run badges, graph nodes/edges); supplementary `cds-sr-only` text where labels can't attach. Color-only cues get an invisible text equivalent now; visible non-color cues (shapes/text) are [C] follow-up where still needed. (SC 1.1.1, 1.4.1)
-5. **[A] Error identification** — associate validation error text to fields via `aria-describedby`; verify ng-zorro 21's `nzErrorTip` association, add `role="alert"` where missing. (SC 3.3.1, 3.3.3)
-
-**Exit criteria:** axe `label`/`button-name`/`image-alt` counts at zero; corresponding ESLint rules flipped to `error`; NVDA forms-mode pass on signin, project creation, run-start, settings/profile; screenshot diff clean.
-
-### Phase 3 — Interactive semantics: fake links, click-targets, tabs, tables (M)
-
-First pass is attribute-retrofit ([A]/[B]); element swaps become tracked [C] debt for a dedicated styling-reviewed PR.
-
-1. **[A→B] Fake links** — the 28 `<a class="pointing" (click)>`: keep the `<a>` element; add `tabindex="0"`, `role="button"` (for actions) or `[routerLink]` (for navigation), and Enter/Space handling via a shared directive (`appClickable`) so behavior is uniform. Focusability is [B] (focus ring on Tab). Element conversion to `<button class="link-style">` is [C]. (SC 2.1.1, 4.1.2)
-2. **[A→B] Clickable non-interactive elements** (~38 `div`/`span`/`li`/`td`/`i` with `(click)`): same shared-directive retrofit — `role="button"`, `tabindex="0"`, key handling. (SC 2.1.1)
-3. **[A→B] Data table interactions** (`shared/table/data-table.html`, run list): sortable `<th>` get `aria-sort`, `role="button"`, `tabindex="0"`, key handling on the existing click target; clickable rows get the same retrofit plus an `aria-label` describing the target. Real in-cell links replacing row-click are [C]. (SC 1.3.1, 2.1.1)
-4. **[A→B] Custom tabs (`shared/tabs/`)** — retrofit APG tab semantics onto the existing markup: `role="tablist"` on the `ul`, `role="tab"`/`aria-selected` on the items, `role="tabpanel"` on the content container, arrow-key roving tabindex in the component class. Verify ng-zorro's `nz-menu` directive doesn't fight the overridden roles at runtime — if it does, drop the `nz-menu` directive while keeping identical classes/CSS (verify pixel parity via screenshot diff). Migration to `nz-tabset` is [C] and probably unnecessary once retrofitted. (SC 1.3.1, 2.1.1, 4.1.2)
-5. **[A] Custom scroll containers** — `app-scrollview`/resizable panels: `tabindex="0"` (scrollable regions are keyboard-scrollable — [B] focus ring), `role="region"` + `aria-label` where they hold primary content. (SC 2.1.1)
-
-**Exit criteria:** full keyboard walk-through (no mouse) of project explore, run list, run view, pipeline editor chrome, settings — every visible action reachable and operable; NVDA announces role/name/state for each; screenshot diff clean (default state).
-
-### Phase 4 — Dynamic content: live regions, toasts, streaming (M) — all [A]
-
-Screenreader users must *hear* what sighted users *see change*. All of this is TS-level or off-screen DOM: zero visual impact.
-
-1. **[A] Toasts** — verify NVDA announces ng-zorro `NzNotificationService` output; if not, mirror toast text through cdk `LiveAnnouncer` inside `ToastService` (`shared/toast/ToastService.ts` is the single choke point — one fix covers ~40 call sites). Errors `assertive`, success/info `polite`. (SC 4.1.3)
-2. **[A] Run/job status changes** — in the v2 run view (`run.component.ts` EventV2 subscription), announce meaningful transitions ("Job build: started / succeeded / failed") via `LiveAnnouncer`, debounced to avoid flooding; same for visible run-list state changes. (SC 4.1.3)
-3. **[A] Log streaming (`run-job.component.ts`)** — do *not* pipe raw log lines into a live region (flooding). Announce step start/end and failure summaries; add `role="log"` + `aria-live="polite"` on the active step's existing container as an opt-in. Step headers get disclosure retrofit: `role="button"`, `aria-expanded`, `tabindex="0"` on the existing `<div>`s ([A→B]); windowing buttons announce loaded ranges via `cds-sr-only`/LiveAnnouncer. (SC 4.1.3, 1.3.1)
-4. **[A] Loading states** — `role="status"` + `cds-sr-only` text on `nz-spin` blocks and the `displayResolver` spinner; long operations announce completion. (SC 4.1.3)
-5. **[A] Modal audit** — ng-zorro handles trap/Esc/role; verify each custom modal sets an accessible name (`nzTitle`/`aria-labelledby`), that focus returns to the invoking control on close (service-created modals in `workflow.component`, `user.edit`, …), and that icon-only buttons inside got Phase-2 names. (SC 2.4.3)
-
-**Exit criteria:** NVDA scripted scenario "start a run, hear it progress and finish, open the failing job, hear the failure" passes without looking at the screen; screenshot diff clean.
-
-### Phase 5 — Complex widgets (L — the differentiating work) — mixed; visible parts deferred
-
-#### 5a. Workflow graph (v2 `libs/workflow-graph` first, then v1)
-The DAG cannot be made fully AT-equivalent as pixels; the strategy is **make the graph itself focusable and navigable** *plus* (later) **an equivalent structured alternative**.
-
-1. **[A→B] Real focus semantics on the existing keyboard model**: move key handling from `window:keydown` onto a focusable graph container (`tabindex="0"`, `role="application"` with `aria-roledescription`/`aria-label` explaining arrow-key navigation). Each node root (`job-node.html`) gets `role="button"`, `tabindex="-1"` (roving), and an accessible name ("Job build-linux, status Success, stage Build") — attributes only. Reuse the existing `selected` CSS class as the focus indication (no new styles); announce selection changes via `LiveAnnouncer`. Enter/Space activation is already wired. (SC 2.1.1, 4.1.2)
-2. **[A] Keyboard equivalents for pointer-only features**: zoom in/out/reset already have buttons — add `+`/`-`/`0` key bindings; multi-select restart via Space toggling the per-node checkbox that already exists (mouse lasso becomes redundant, not required). (SC 2.1.1)
-3. **[A] Dependency info in accessible names**: node names include "needs: X, Y" so color-only edges become redundant for AT; a `cds-sr-only` run summary ("12 jobs: 10 success, 1 failed, 1 running") accompanies the graph. (SC 1.4.1, 1.1.1)
-4. **[C — deferred] Equivalent "List view" toggle** rendering the run DAG as nested semantic lists/table (stage → job → status → dependencies), sharing selection state with the graph. Highest-value visible feature; also serves sighted keyboard power users. The v2 run page already has the data structures (`initRunJobs()`).
-5. **v1 graph (`views/workflow/graph/`)**: apply item 1 or, if v1 is sunsetting, rely on the [C] list view — decide with product based on v1's remaining lifespan.
-
-#### 5b. Editors
-1. **[A] Monaco** (`nz-code-editor` consumers): set `ariaLabel` in each `EditorOptions` ("Workflow YAML editor", "Retention rule editor"); confirm `accessibilitySupport: 'auto'` isn't disabled; associate surrounding visible labels. Monaco's built-in a11y is good once labeled. (SC 4.1.2)
-2. **[A now, C later] CodeMirror 5** (`shared/codemirror.ts`, ~20 consumers) is not meaningfully fixable in place. Interim [A]: `aria-label` on the wrapper + document the limitation. Real fix [C]: migrate consumers to `nz-code-editor` (Monaco, already a dependency) or CodeMirror 6; a plain-`<textarea>` fallback toggle is an alternative [C].
-
-#### 5c. Drag-and-drop (dragula)
-**[C — deferred]** Keyboard alternative requires visible controls: "Move up / Move down" buttons on pipeline stages (`pipeline.workflow.component.ts`) and action steps (`action.component.ts`), reusing existing reorder handlers, with LiveAnnouncer confirmation ("Stage Deploy moved to position 2 of 4"). Interim [A]: `cds-sr-only` note that reordering has no keyboard path yet + tracked debt. (SC 2.1.1, 2.5.7)
-
-#### 5d. Charts (`shared/chart/`)
-**[A]** `role="img"` + `aria-label` summary on the ngx-charts container, plus a `cds-sr-only` data table with the same series (application home stats). A visible "view as table" toggle is optional [C]. (SC 1.1.1)
-
-**Exit criteria:** an NVDA user can, without a mouse: read a workflow DAG, navigate to a failing job, restart selected jobs, and edit workflow YAML. (Stage reordering waits for the [C] wave.)
-
-### Phase 6 — Verification, hardening, governance (M, then continuous)
-
-1. **[A]** Full manual audit against WCAG 2.2 AA: NVDA+Chrome and NVDA+Firefox across scripted journeys (signin/SSO, create project, explore repos, start run, monitor run, read logs, edit pipeline as-code, admin/settings, queue). VoiceOver secondary. Fix findings within their tags.
-2. **[A]** Regression protection: promote all Phase-0 lint rules to `error`; axe CI baseline at zero for covered rules; DOM-level role/name/live-region assertions in e2e (NVDA itself can't run in CI).
-3. **[A]** Documentation: accessibility conformance statement (VPAT/EN 301 549 if OVHcloud needs procurement docs); user docs for graph keyboard shortcuts.
-4. **[A]** Governance: PR-template accessibility checklist; "accessible by default" contributor-guide section; NVDA smoke test in release QA; a11y triage label.
-5. **[C backlog]** Schedule the deferred visible wave as individually reviewable PRs with before/after screenshots: focus-visible styling, skip link (if held back), element-swap debt (buttons/headings/links), graph list view, drag-drop reorder buttons, CodeMirror migration, non-color status cues.
-
----
-
-## 5. Work breakdown summary
-
-| Phase | Theme | Size | Visual impact | Key WCAG SC | Depends on |
-|---|---|---|---|---|---|
-| 0 | Lint + axe + screenshot-diff CI + conventions | S–M | [A] none | — (guardrails) | — |
-| 1 | lang, landmark roles, titles, announcements, heading roles | S–M | [A] (+1 [B] skip link) | 1.3.1, 2.4.1/2/6, 3.1.1 | — |
-| 2 | Form labels, icon-button names, alt text, status text, errors | M–L | [A] | 1.1.1, 1.3.1, 1.4.1, 3.3.x, 4.1.2 | 0 |
-| 3 | Fake links, click-divs, tabs, tables retrofit | M | [A→B] | 1.3.1, 2.1.1, 4.1.2 | 0 |
-| 4 | Live regions, toasts, streaming logs, modals | M | [A] | 4.1.3, 2.4.3 | 1 |
-| 5 | Graph focus semantics, Monaco labels, chart alternatives | L | [A→B] (+[C] deferred) | 1.1.1, 1.3.1, 2.1.1 | 3, 4 |
-| 6 | Audit, hardening, governance, [C] backlog scheduling | M + ongoing | [A] | all | 1–5 |
-
-Phases 1–3 are parallelizable across contributors after Phase 0 lands. Phase 5a can start alongside 2–3 since it is isolated in `libs/workflow-graph`.
-
-## 6. PR wave 1 — concrete scope (strictly zero visual change)
-
-Everything tagged [A] above, deliverable as one PR or a small stack:
-
-- Phase 0 entirely (lint `warn`, axe baseline, screenshot-diff harness, `docs/accessibility.md`, `cds-sr-only` utility).
-- Phase 1 items 1–3, 5 (`lang`, landmark roles, titles + LiveAnnouncer, heading roles). Skip link ([B]) goes in wave 2.
-- Phase 2 entirely (labels/ids, `aria-label` on icon buttons, `alt`, status labels, `aria-describedby` errors).
-- Phase 4 entirely (toast/status/log announcements, `role="status"` loaders, modal name/focus-return audit).
-- Phase 5b-1, 5d (Monaco `ariaLabel`, chart labels + sr-only table).
-
-**PR evidence:** screenshot diff over main routes (both themes) showing zero pixel change; axe before/after counts; NVDA smoke-pass notes.
-
-**Wave 2 ([B] — keyboard-visible only, flagged for design sign-off):** skip link; `tabindex` retrofits from Phase 3 and Phase 5a (focus rings appear on Tab only, default browser style).
-
-**Wave 3+ ([C] — visible, per-feature PRs with screenshots):** focus-visible styling, element-swap debt, graph list view, drag-drop reorder buttons, CodeMirror migration, visible non-color status cues.
-
-## 7. What changes for developers (and what they gain)
-
-This initiative changes day-to-day frontend development in `ui/`. Communicate this up front — most of it is upside.
-
-### New obligations
-- **A11y lint gates**: `@angular-eslint/template/accessibility` rules run via `lint-staged` on every commit and in CI. New templates must have labeled controls, alt text, key handlers on click targets, valid ARIA. Rules arrive as `warn` and flip to `error` per completed sweep — no big-bang breakage of open branches.
-- **New conventions to follow** (all documented in `ui/docs/accessibility.md`): `cds-field-…` id scheme + `nzFor` on every form control; `aria-label` mandatory on icon-only buttons; the `appClickable` directive instead of raw `(click)` on non-interactive elements; `LiveAnnouncer` for async outcomes; `cds-sr-only` for AT-only text.
-- **PR checklist** gains an accessibility section; reviewers check roles/names/announcements like they check tests.
-- **axe + screenshot baselines in CI**: a PR that introduces new axe violations or unexpected pixel diffs fails.
-
-### Developer benefits (mostly free by-products)
-- **Screenshot-diff harness (Phase 0.3) protects *all* UI work**, not just a11y — theme regressions, ng-zorro upgrades, and CSS refactors get caught automatically. This is arguably the biggest DX win of the whole plan.
-- **Stable, semantic test selectors**: once controls have roles and accessible names, e2e and component tests can query "the button named *Restart job*" instead of brittle CSS-class chains — fewer flaky tests, and tests stop breaking on markup refactors.
-- **Uniform interaction patterns**: one `appClickable` directive and one form-field pattern replace today's five ad-hoc ways of making things clickable/labeled — less copy-paste divergence, easier reviews.
-- **Documented shared-component contracts**: the sweeps force overdue documentation of `shared/` components (data-table, tabs, status) and flush out dead code already found by the audit (`ng2-completer` is an unused dependency; `semantic.json` is leftover build config — both removable).
-- **Better debugging of async flows**: LiveAnnouncer call sites make the "what changed and when" of WebSocket-driven state explicit and loggable.
-- **Keyboard operability helps power users and devs**: full keyboard paths through run views and the graph speed up everyone, not just AT users.
-- **Future-proofing**: EN 301 549 / EAA compliance becomes a checklist, not a fire drill, and ng-zorro/Angular upgrades get safer thanks to the axe + screenshot safety nets.
-
-## 8. Implementation status (2026-07-14)
-
-**✅ Implemented — [A] and [B] waves** (attribute-only retrofits, announcements, tooling; zero visual change in default rendering, browser-default focus rings visible only during keyboard use):
-
-- `lang="en"`, `role="status"` boot loader (`index.html`); landmark roles (`role="banner"`, `role="navigation"`, `role="main"` + `id="main-content"`); skip link; `cds-sr-only` utility.
-- Route-title announcements via cdk `LiveAnnouncer` (`app.component.ts`); toast announcements via `ToastService` (polite/assertive); banners/spinners as `role="status"`.
-- `appClickable` directive (`shared/directives/clickable.directive.ts`) retrofitting `role="button"`/`tabindex`/Enter/Space onto clickable non-interactive elements; applied across views.
-- Forms sweep: `nzFor` + `cds-field-…` ids, `aria-label` fallbacks; icon-only buttons named; `alt` fixes; status icons labelled (`aria-label="Status: …"`); data-table `aria-sort` + keyboard sort; tabs ARIA retrofit; run-log disclosure (`aria-expanded`, `role="log"`); run status change announcements; Monaco `ariaLabel`s; workflow-graph focus semantics, roving focus, node labels, keyboard zoom, selection announcements.
-- ESLint template accessibility rules at `warn` (`.eslintrc.js`); conventions doc `ui/docs/accessibility.md`.
-
-**🔲 Open / To Do (visual impact)** — every remaining [C] item; each needs its own PR with before/after screenshots and design sign-off:
-
-- [ ] Unified `:focus-visible` styling across both themes (today: browser-default rings).
-- [ ] Element-swap debt: fake links → real `<button>`/`<a routerLink>` styled as links; `role="heading"` divs → real `<h1>`–`<h4>`; landmark roles → native `<main>`/`<header>`/`<nav>` elements.
-- [ ] Clickable table rows → real in-cell links (row-click stays as pointer enhancement).
-- [ ] Custom tabs → `nz-tabset` migration (if the ARIA retrofit proves insufficient with NVDA).
-- [ ] Workflow graph "List view" toggle — equivalent semantic list/table of the DAG, shared selection state.
-- [ ] Drag-and-drop keyboard alternative: visible "Move up / Move down" controls on pipeline stages and action steps.
-- [ ] CodeMirror 5 migration (to Monaco/`nz-code-editor` or CodeMirror 6); or visible plain-textarea fallback toggle.
-- [ ] Visible non-color status cues where still missing (graph edges/forks).
-- [ ] Charts: visible "view as table" toggle (sr-only fallback exists).
-- [ ] Visible-on-focus enhancements pass (e.g. making the skip link styling match final design).
-- [ ] axe-core CI integration + screenshot-diff harness (tooling; no runtime visual impact but not yet wired into CI).
-
-## 9. Definition of done (per screen)
-
-A screen is "screenreader-ready" when, under NVDA:
-1. Landmarks, one level-1 heading, and a correct page title are announced on arrival.
-2. Every interactive element is reachable by Tab/arrow keys, has a role, an accessible name, and announced state (expanded/selected/checked/sorted).
-3. Every form field announces its label, required state, and validation errors.
-4. No information is conveyed by color, icon, or position alone (an AT-perceivable equivalent exists).
-5. Asynchronous outcomes (saves, run status, errors) are announced without user-initiated re-reading.
-6. Focus never disappears: dialogs trap and restore it; deletions/route changes move it somewhere sensible.
-7. axe reports zero violations for the enabled rule set — and the screenshot diff for the change is clean unless the PR is an approved [C]-wave change.
diff --git a/ui/docs/accessibility.md b/ui/docs/accessibility.md
index c2cb1e5147..ed6bcd16b2 100644
--- a/ui/docs/accessibility.md
+++ b/ui/docs/accessibility.md
@@ -1,13 +1,61 @@
-# CDS UI accessibility conventions
+# CDS UI accessibility
 
-Target: **WCAG 2.2 Level AA**, screenreader support verified with **NVDA** (Chrome/Firefox).
-Companion document: `accessibility-plan.md` (audit, phases, open items).
+Target: **WCAG 2.2 Level AA**. Screenreader support is verified with **NVDA** (Chromium/Firefox).
 
-The current remediation wave is **strictly non-visual**: attribute-only retrofits, ARIA,
-and announcements. Element swaps and any change with visual impact are tracked in the
-plan as "Open / To Do (visual impact)".
+This document describes how accessibility is implemented in the UI and the rules to
+follow when adding or changing templates.
 
-## Rules for all new/changed templates
+## How it works
+
+### Page structure
+- `<html lang="en">` is set in `src/index.html`.
+- The app shell (`src/app/app.component.html`) exposes landmarks via roles on the
+  existing layout elements: `role="banner"` (navbar), `role="navigation"` (menu),
+  `role="main"` + `id="main-content"` (content container) telling screenreader users where they are.
+- A "Skip to main content" link is the first focusable element; it is rendered
+  off-screen and only becomes visible on keyboard focus.
+- On navigation, the new page title is announced via CDK `LiveAnnouncer`
+  (`app.component.ts`). Page titles come from route `data.title`.
+
+### Screenreader-only content
+- The `cds-sr-only` class (`src/styles.scss`) renders text visually hidden but
+  available to assistive technology. Use it for supplementary text that has no
+  visible equivalent.
+
+### Announcements
+- Toasts sent through `ToastService` (`shared/toast/ToastService.ts`) are announced
+  automatically: `'polite'` for success/info, `'assertive'` for errors.
+- Other async outcomes (e.g. run status changes) are announced with `LiveAnnouncer`
+  (`@angular/cdk/a11y`), using the same politeness convention.
+- Loading spinners and banners expose `role="status"`.
+
+### Interactive elements
+- The `appClickable` directive (`shared/directives/clickable.directive.ts`) makes a
+  non-interactive element with a `(click)` handler keyboard-accessible: it adds
+  `role="button"`, `tabindex="0"` and Enter/Space activation. It exists to retrofit
+  legacy markup that must not change visually; new code uses real `<button>`/`<a>`.
+- Shared tabs (`shared/tabs/`) implement the APG tab pattern: `role="tablist"`/`tab`,
+  `aria-selected`, arrow-key navigation.
+- The shared data table (`shared/table/`) exposes `aria-sort` on sortable headers
+  and supports keyboard sorting.
+- Run log steps are disclosures (`aria-expanded`); streaming log containers use
+  `role="log"`.
+- Status icons carry their state as text (`aria-label="Status: …"`).
+
+### Workflow graph (`libs/workflow-graph`)
+- The graph container is focusable and explains its keyboard model via
+  `aria-roledescription`/`aria-label`.
+- Arrow keys move real DOM focus between nodes (roving `tabindex`); each node has an
+  accessible name including job, status and stage. Selection changes are announced.
+- `+`/`-`/`0` zoom in/out and re-center. Key handling is scoped to the graph and
+  does not intercept keys while typing in inputs.
+
+### Forms
+- Every form control has an `id` prefixed with `cds-field-`, associated to its
+  label via `<nz-form-label nzFor="…">`. Controls without a visible label carry an
+  `aria-label`.
+
+## Rules for new/changed templates
 
 1. **Form controls**: every control gets an `id` with the `cds-field-` prefix and its
    `<nz-form-label nzFor="…">` pointing at it. Controls without a visible label get an
@@ -15,29 +63,41 @@ plan as "Open / To Do (visual impact)".
 2. **Icon-only buttons**: always `aria-label="…"` on the button; decorative icons inside
    any labelled control get `aria-hidden="true"`. Keep `title`/`nz-tooltip` for sighted users.
 3. **Never put `(click)` on a non-interactive element** (`div`, `span`, `li`, `td`, `i`,
-   `a` without `href`). Use a real `<button>`/`<a [routerLink]>` for new code. For existing
-   markup that must not change visually, add the `appClickable` directive
-   (`shared/directives/clickable.directive.ts`) — it retrofits `role="button"`,
-   `tabindex="0"` and Enter/Space activation.
-4. **Screenreader-only text**: use the `cds-sr-only` class (defined in `src/styles.scss`).
-5. **Announce async outcomes** with `LiveAnnouncer` (`@angular/cdk/a11y`): `'polite'` for
-   success/info, `'assertive'` for errors. Toasts sent through `ToastService` are
-   announced automatically — do not double-announce.
+   `a` without `href`). Use a real `<button>`/`<a [routerLink]>` for new code. Only for
+   existing markup that must not change visually, use the `appClickable` directive.
+4. **Screenreader-only text**: use the `cds-sr-only` class.
+5. **Announce async outcomes** with `LiveAnnouncer`: `'polite'` for success/info,
+   `'assertive'` for errors. Toasts sent through `ToastService` are announced
+   automatically — do not double-announce.
 6. **State must be conveyed in text**, not only by icon or color: status icons carry
    `aria-label="Status: …"`; disclosure elements carry `aria-expanded`; sortable table
    headers carry `aria-sort`.
-7. **Landmarks and headings**: pages must expose exactly one level-1 heading
-   (`role="heading" aria-level="1"` on existing styled elements until the element-swap
-   wave lands) and live inside the `role="main"` container provided by the app shell.
+7. **Landmarks and headings**: each page exposes exactly one level-1 heading and lives
+   inside the `role="main"` container provided by the app shell. Where the visual title
+   is a styled non-heading element, use `role="heading" aria-level="1"` rather than
+   changing the element.
 8. **Dialogs**: every modal needs an accessible name (`nzTitle` or `aria-labelledby`);
    focus must return to the triggering control on close.
 
-## Linting & CI
+## Linting
+
+`@angular-eslint/template/*` accessibility rules are enabled in `.eslintrc.js`. Rules
+still reporting warnings on legacy templates run at `warn`; a rule is switched to
+`error` once the codebase is clean for it. Do not introduce new warnings.
+
+## Known limitations
+
+Accessibility fixes that require visible UI changes are out of scope of the
+attribute-only approach above and still open:
 
-- `@angular-eslint/template/*` accessibility rules are enabled in `.eslintrc.js` at
-  `warn`; each rule is flipped to `error` when its sweep is finished. Do not introduce
-  new warnings.
-- Planned (see plan Phase 0): axe-core checks and a screenshot-diff harness in CI.
+- No unified `:focus-visible` styling — newly focusable elements use the browser's
+  default focus ring.
+- Retrofitted elements (fake links, `role="heading"` divs, landmark roles) are not
+  yet swapped for their native elements (`<button>`, `<h1>`–`<h4>`, `<main>`/`<nav>`).
+- The workflow graph has no alternative list/table view.
+- Drag-and-drop reordering (pipeline stages, action steps) has no keyboard alternative.
+- CodeMirror 5 editors (`shared/codemirror.ts`) are largely inaccessible; Monaco
+  (`nz-code-editor`) is the accessible editor and is labeled via `ariaLabel`.
 
 ## Manual NVDA smoke pass (run before releases)