diff --git a/src/app/features/content-management/components/static-pages-editor.component.html b/src/app/features/content-management/components/static-pages-editor.component.html
index e08627d..f3992db 100644
--- a/src/app/features/content-management/components/static-pages-editor.component.html
+++ b/src/app/features/content-management/components/static-pages-editor.component.html
@@ -1,6 +1,6 @@
 <app-section-card>
   @if (fieldError('staticPages'); as msg) {
-    <p class="editor-error">{{ msg }}</p>
+    <p class="editor-error" role="alert">{{ msg }}</p>
   }
 
   @if (editingPage(); as page) {
diff --git a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html
index 3fb7181..6951746 100644
--- a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html
+++ b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html
@@ -45,6 +45,9 @@
     class="html-editor-surface"
     [hidden]="showCode()"
     contenteditable="true"
+    role="textbox"
+    aria-multiline="true"
+    [attr.aria-label]="'builder.htmlEditorCode' | translate"
     (input)="onInput()"
   ></div>
 </div>
diff --git a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss
index 9690c4a..67e070b 100644
--- a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss
+++ b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss
@@ -47,7 +47,7 @@
   .pi { font-size: var(--font-size-sm, 0.8125rem); }
 
   &:hover { background: var(--bg-tertiary, #e8ecea); }
-  &:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 1px; }
+  &:focus-visible { outline: 2px solid var(--primary-color, #2f8f5b); outline-offset: 1px; }
 }
 
 .html-editor-toolbar__btn--bold { font-weight: var(--font-weight-bold, 700); }
diff --git a/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html b/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html
index cd89441..4b06b3e 100644
--- a/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html
+++ b/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html
@@ -1,11 +1,11 @@
 <div class="project-editor-save-bar">
   @if (draftRestored()) {
-    <div class="project-editor-save-bar-notice">
+    <div class="project-editor-save-bar-notice" role="status">
       <span>{{ 'builder.draftRestored' | translate }}</span>
       <app-button variant="ghost" size="sm" (click)="dismissDraftRestoredNotice()">{{ 'builder.dismiss' | translate }}</app-button>
     </div>
   }
-  <div class="project-editor-save-bar-status">
+  <div class="project-editor-save-bar-status" role="status" aria-live="polite">
     <span>{{ (status() === 'published' ? 'builder.statusPublished' : 'builder.statusDraft') | translate }}</span>
     @if (dirty()) {
       <span class="project-editor-save-bar-dirty">{{ 'builder.unsavedChanges' | translate }}</span>
diff --git a/src/app/features/project-editor/pages/project-editor-page.component.html b/src/app/features/project-editor/pages/project-editor-page.component.html
index 4ad42ac..76cbf36 100644
--- a/src/app/features/project-editor/pages/project-editor-page.component.html
+++ b/src/app/features/project-editor/pages/project-editor-page.component.html
@@ -1,4 +1,5 @@
 <div class="project-editor-layout" [class.project-editor-layout--drawer-open]="mobileDrawerOpen()">
+  <a class="skip-link" href="#builder-main-content">{{ 'adminShell.skipToContent' | translate }}</a>
   @if (mobileDrawerOpen()) {
     <div class="project-editor-layout__backdrop" (click)="closeMobileDrawer()"></div>
   }
@@ -15,7 +16,7 @@
     <app-project-editor-nav (linkClicked)="closeMobileDrawer()" />
   </aside>
 
-  <main class="project-editor-layout__content">
+  <main id="builder-main-content" class="project-editor-layout__content" tabindex="-1">
     <header class="project-editor-layout__header">
       <button
         type="button"
diff --git a/src/app/features/project-editor/sections/footer-section.component.html b/src/app/features/project-editor/sections/footer-section.component.html
index 00d9d30..20bcb13 100644
--- a/src/app/features/project-editor/sections/footer-section.component.html
+++ b/src/app/features/project-editor/sections/footer-section.component.html
@@ -35,7 +35,7 @@
     <div class="full">
       <label><span>{{ 'builder.paymentIcons' | translate }}</span><small class="field-desc">{{ 'builder.paymentIconsDesc' | translate }}</small></label>
       @if (fieldError('footer.paymentIcons'); as msg) {
-        <p class="editor-error">{{ msg }}</p>
+        <p class="editor-error" role="alert">{{ msg }}</p>
       }
       <app-key-value-editor
         [rows]="paymentIconRows()"
@@ -56,7 +56,7 @@
     <div class="full">
       <label><span>{{ 'builder.socialLinks' | translate }}</span><small class="field-desc">{{ 'builder.socialLinksDesc' | translate }}</small></label>
       @if (fieldError('footer.socialLinks'); as msg) {
-        <p class="editor-error">{{ msg }}</p>
+        <p class="editor-error" role="alert">{{ msg }}</p>
       }
       <app-key-value-editor
         [rows]="socialLinkRows()"
@@ -86,16 +86,22 @@
       <label><span>{{ 'builder.footerColumns' | translate }}</span><small class="field-desc">{{ 'builder.footerColumnsDesc' | translate }}</small></label>
 
       <div class="footer-columns" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="dropColumn($event)">
-        @for (column of columns(); track column.id) {
+        @for (column of columns(); track column.id; let firstColumn = $first; let lastColumn = $last) {
           <div class="footer-column" cdkDrag>
             <div class="footer-column__head" cdkDragHandle>
               <app-icon name="grip" [size]="16" class="footer-column__grip" />
               <app-input [ngModel]="column.title" (ngModelChange)="updateColumnTitle(column.id, $event)" [placeholder]="'builder.footerColumnTitlePlaceholder' | translate" />
+              <button type="button" class="footer-column__reorder" [attr.aria-label]="'builder.widgetMoveUp' | translate" [disabled]="firstColumn" (click)="moveColumn(column.id, -1)">
+                <app-icon name="arrowUp" [size]="14" />
+              </button>
+              <button type="button" class="footer-column__reorder" [attr.aria-label]="'builder.widgetMoveDown' | translate" [disabled]="lastColumn" (click)="moveColumn(column.id, 1)">
+                <app-icon name="arrowDown" [size]="14" />
+              </button>
               <button type="button" class="footer-column__remove" (click)="removeColumn(column.id)" [attr.aria-label]="'builder.removeColumn' | translate">&times;</button>
             </div>
 
             <div class="footer-column__links" cdkDropList [cdkDropListData]="column.links" (cdkDropListDropped)="dropLink(column.id, $event)">
-              @for (link of column.links; track link.id) {
+              @for (link of column.links; track link.id; let firstLink = $first; let lastLink = $last) {
                 <div class="footer-link" cdkDrag>
                   <app-icon name="grip" [size]="14" cdkDragHandle class="footer-link__grip" />
                   <app-input [ngModel]="link.label" (ngModelChange)="updateLink(column.id, link.id, { label: $event })" [placeholder]="'builder.footerLinkLabelPlaceholder' | translate" />
@@ -115,7 +121,15 @@
                     <app-input type="url" [ngModel]="link.url" (ngModelChange)="updateLink(column.id, link.id, { url: $event })" placeholder="https://" />
                   }
 
-                  <button type="button" class="footer-link__remove" (click)="removeLink(column.id, link.id)" [attr.aria-label]="'builder.removeColumnLink' | translate">&times;</button>
+                  <div class="footer-link__actions">
+                    <button type="button" [attr.aria-label]="'builder.widgetMoveUp' | translate" [disabled]="firstLink" (click)="moveLink(column.id, link.id, -1)">
+                      <app-icon name="arrowUp" [size]="14" />
+                    </button>
+                    <button type="button" [attr.aria-label]="'builder.widgetMoveDown' | translate" [disabled]="lastLink" (click)="moveLink(column.id, link.id, 1)">
+                      <app-icon name="arrowDown" [size]="14" />
+                    </button>
+                    <button type="button" class="footer-link__remove" (click)="removeLink(column.id, link.id)" [attr.aria-label]="'builder.removeColumnLink' | translate">&times;</button>
+                  </div>
                 </div>
               }
             </div>
diff --git a/src/app/features/project-editor/sections/footer-section.component.scss b/src/app/features/project-editor/sections/footer-section.component.scss
index 03e4fda..4e0899e 100644
--- a/src/app/features/project-editor/sections/footer-section.component.scss
+++ b/src/app/features/project-editor/sections/footer-section.component.scss
@@ -47,6 +47,20 @@
 
 .footer-column__grip { cursor: grab; color: var(--text-secondary, #6b7280); }
 
+.footer-column__reorder {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--text-secondary, #6b7280);
+
+  &:hover:not(:disabled) { color: var(--text-primary, #1e3c38); }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
 .footer-column__remove {
   border: none;
   background: transparent;
@@ -83,8 +97,25 @@
 
 .footer-link__grip { grid-area: grip; cursor: grab; color: var(--text-secondary, #6b7280); }
 .footer-link app-input:first-of-type { grid-area: label; }
-.footer-link__remove {
+.footer-link__actions {
   grid-area: remove;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+
+  button {
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: var(--text-secondary, #6b7280);
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+}
+.footer-link__remove {
   border: none;
   background: transparent;
   cursor: pointer;
diff --git a/src/app/features/project-editor/sections/footer-section.component.ts b/src/app/features/project-editor/sections/footer-section.component.ts
index 7c59316..e28d862 100644
--- a/src/app/features/project-editor/sections/footer-section.component.ts
+++ b/src/app/features/project-editor/sections/footer-section.component.ts
@@ -127,6 +127,18 @@ export class ProjectEditorFooterSectionComponent {
     this.setColumns(columns);
   }
 
+  /** Keyboard-operable fallback for the drag-and-drop column reorder above (WCAG 2.1.1). */
+  moveColumn(columnId: string, direction: -1 | 1): void {
+    const columns = [...this.columns()];
+    const index = columns.findIndex(column => column.id === columnId);
+    const targetIndex = index + direction;
+    if (index === -1 || targetIndex < 0 || targetIndex >= columns.length) {
+      return;
+    }
+    moveItemInArray(columns, index, targetIndex);
+    this.setColumns(columns);
+  }
+
   addLink(columnId: string): void {
     const link: FooterLinkConfig = { id: `link-${Date.now()}`, label: '', pageKey: this.availablePages()[0]?.id ?? '', url: '' };
     this.setColumns(this.columns().map(column => column.id === columnId ? { ...column, links: [...column.links, link] } : column));
@@ -152,6 +164,22 @@ export class ProjectEditorFooterSectionComponent {
     this.setColumns(this.columns().map(c => c.id === columnId ? { ...c, links } : c));
   }
 
+  /** Keyboard-operable fallback for the drag-and-drop link reorder above (WCAG 2.1.1). */
+  moveLink(columnId: string, linkId: string, direction: -1 | 1): void {
+    const column = this.columns().find(c => c.id === columnId);
+    if (!column) {
+      return;
+    }
+    const links = [...column.links];
+    const index = links.findIndex(link => link.id === linkId);
+    const targetIndex = index + direction;
+    if (index === -1 || targetIndex < 0 || targetIndex >= links.length) {
+      return;
+    }
+    moveItemInArray(links, index, targetIndex);
+    this.setColumns(this.columns().map(c => c.id === columnId ? { ...c, links } : c));
+  }
+
   linkSourceMode(link: FooterLinkConfig): 'page' | 'custom' {
     return link.pageKey ? 'page' : 'custom';
   }
diff --git a/src/app/features/project-editor/sections/homepage-section.component.html b/src/app/features/project-editor/sections/homepage-section.component.html
index dbf3d5f..a3e338c 100644
--- a/src/app/features/project-editor/sections/homepage-section.component.html
+++ b/src/app/features/project-editor/sections/homepage-section.component.html
@@ -6,12 +6,12 @@
 <app-homepage-overview />
 <app-section-card [title]="'builder.homepage' | translate">
   @if (fieldError('pages'); as msg) {
-    <p class="editor-error">{{ msg }}</p>
+    <p class="editor-error" role="alert">{{ msg }}</p>
   }
   <p class="field-desc">{{ 'builder.homepageBlocksHint' | translate }}</p>
 
   <div cdkDropList class="block-list" (cdkDropListDropped)="drop($event)">
-    @for (section of sections(); track section.id) {
+    @for (section of sections(); track section.id; let first = $first; let last = $last) {
       <div class="block-card" cdkDrag [class.block-card--hidden]="section.visible === false">
         <div class="block-card__handle" cdkDragHandle [attr.aria-label]="'builder.dragToReorder' | translate">
           <app-icon name="grip" [size]="16" />
@@ -49,6 +49,12 @@
         </div>
 
         <div class="block-card__actions">
+          <button type="button" [attr.aria-label]="'builder.widgetMoveUp' | translate" [disabled]="first" (click)="moveBlock(section.id, -1)">
+            <app-icon name="arrowUp" [size]="16" />
+          </button>
+          <button type="button" [attr.aria-label]="'builder.widgetMoveDown' | translate" [disabled]="last" (click)="moveBlock(section.id, 1)">
+            <app-icon name="arrowDown" [size]="16" />
+          </button>
           <label class="block-card__visible-toggle">
             <app-toggle [ngModel]="section.visible !== false" (ngModelChange)="updateSection(section.id, 'visible', $event)" [ariaLabel]="'builder.visible' | translate" />
             <span>{{ 'builder.visible' | translate }}</span>
diff --git a/src/app/features/project-editor/sections/homepage-section.component.scss b/src/app/features/project-editor/sections/homepage-section.component.scss
index 51ac05a..90fa904 100644
--- a/src/app/features/project-editor/sections/homepage-section.component.scss
+++ b/src/app/features/project-editor/sections/homepage-section.component.scss
@@ -30,7 +30,7 @@
   align-items: center;
   justify-content: center;
   font-size: var(--font-size-2xl, 1.25rem);
-  color: var(--color-primary, #2f8f5b);
+  color: var(--primary-color, #2f8f5b);
 }
 
 .block-card__title-row { display: flex; align-items: center; gap: 8px; }
@@ -58,7 +58,12 @@
     cursor: pointer;
     color: var(--text-secondary, #6b7280);
 
-    &:hover { color: var(--text-primary, #1e3c38); }
+    &:hover:not(:disabled) { color: var(--text-primary, #1e3c38); }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
   }
 }
 
@@ -86,10 +91,10 @@
   font-size: var(--font-size-sm, 0.8125rem);
   color: var(--text-primary, #1e3c38);
 
-  .pi { font-size: var(--font-size-2xl, 1.25rem); color: var(--color-primary, #2f8f5b); }
+  .pi { font-size: var(--font-size-2xl, 1.25rem); color: var(--primary-color, #2f8f5b); }
 
-  &:hover { border-color: var(--color-primary, #2f8f5b); background: #fff; }
-  &:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; }
+  &:hover { border-color: var(--primary-color, #2f8f5b); background: #fff; }
+  &:focus-visible { outline: 2px solid var(--primary-color, #2f8f5b); outline-offset: 2px; }
 }
 
 @media (max-width: 640px) {
diff --git a/src/app/features/project-editor/sections/homepage-section.component.ts b/src/app/features/project-editor/sections/homepage-section.component.ts
index e4c6aa6..98a3d1c 100644
--- a/src/app/features/project-editor/sections/homepage-section.component.ts
+++ b/src/app/features/project-editor/sections/homepage-section.component.ts
@@ -93,6 +93,18 @@ export class ProjectEditorHomepageSectionComponent {
     this.replaceSections(sections.map((section, index) => ({ ...section, order: index + 1 })));
   }
 
+  /** Keyboard-operable fallback for the drag-and-drop block reorder above (WCAG 2.1.1). */
+  moveBlock(sectionId: string, direction: -1 | 1): void {
+    const sections = [...this.sections()];
+    const index = sections.findIndex(section => section.id === sectionId);
+    const targetIndex = index + direction;
+    if (index === -1 || targetIndex < 0 || targetIndex >= sections.length) {
+      return;
+    }
+    moveItemInArray(sections, index, targetIndex);
+    this.replaceSections(sections.map((section, i) => ({ ...section, order: i + 1 })));
+  }
+
   updateSection(sectionId: string, field: 'visible' | 'type', value: unknown): void {
     this.replaceSections(this.sections().map(section => section.id !== sectionId ? section : ({
       ...section,
diff --git a/src/app/features/project-editor/sections/languages-section.component.html b/src/app/features/project-editor/sections/languages-section.component.html
index 1e400ab..8f7dcac 100644
--- a/src/app/features/project-editor/sections/languages-section.component.html
+++ b/src/app/features/project-editor/sections/languages-section.component.html
@@ -2,19 +2,20 @@
   <app-locale-tabs [locales]="supportedLocales()" [defaultLocale]="tenantDefaultLocale()" (activeLocale)="onActiveLocaleChange($event)" />
   <small class="field-desc">{{ 'builder.languagesTabDesc' | translate }}</small>
   @if (fieldError('localization.supportedLocales'); as msg) {
-    <p class="editor-error">{{ msg }}</p>
+    <p class="editor-error" role="alert">{{ msg }}</p>
   }
 
   <div class="editor-actions">
     <app-input
       [ngModel]="newLocale()"
       (ngModelChange)="updateNewLocale($event)"
+      [ariaLabel]="'builder.newLanguageLabel' | translate"
       placeholder="de"
     />
     <app-button variant="primary" (click)="addLocale()">{{ 'builder.addLanguage' | translate }}</app-button>
   </div>
   @if (addLocaleError(); as addError) {
-    <p class="editor-error">{{ addError }}</p>
+    <p class="editor-error" role="alert">{{ addError }}</p>
   } @else {
     <small class="field-desc">{{ 'builder.newLanguageDesc' | translate }}</small>
   }
diff --git a/src/app/features/project-editor/sections/navigation-section.component.html b/src/app/features/project-editor/sections/navigation-section.component.html
index 0f89fd0..207b0a3 100644
--- a/src/app/features/project-editor/sections/navigation-section.component.html
+++ b/src/app/features/project-editor/sections/navigation-section.component.html
@@ -1,7 +1,7 @@
 <app-section-card [title]="'builder.navigationHeader' | translate">
   <app-locale-tabs [locales]="supportedLocales()" [defaultLocale]="defaultLocale()" (activeLocale)="onActiveLocaleChange($event)" />
   @if (fieldError('navigation.header'); as msg) {
-    <p class="editor-error">{{ msg }}</p>
+    <p class="editor-error" role="alert">{{ msg }}</p>
   }
 
   <div class="editor-actions">
@@ -68,6 +68,6 @@
       }
     </div>
   } @else {
-    <p class="editor-error">{{ 'builder.navigationFooterGrouped' | translate }}</p>
+    <p class="editor-error" role="alert">{{ 'builder.navigationFooterGrouped' | translate }}</p>
   }
 </app-section-card>
diff --git a/src/app/features/project-editor/sections/preview-section.component.html b/src/app/features/project-editor/sections/preview-section.component.html
index c4b4dd8..8e3a553 100644
--- a/src/app/features/project-editor/sections/preview-section.component.html
+++ b/src/app/features/project-editor/sections/preview-section.component.html
@@ -13,9 +13,9 @@
     <table class="preview-changes">
       <thead>
         <tr>
-          <th>{{ 'builder.previewChangeField' | translate }}</th>
-          <th>{{ 'builder.previewChangeBefore' | translate }}</th>
-          <th>{{ 'builder.previewChangeAfter' | translate }}</th>
+          <th scope="col">{{ 'builder.previewChangeField' | translate }}</th>
+          <th scope="col">{{ 'builder.previewChangeBefore' | translate }}</th>
+          <th scope="col">{{ 'builder.previewChangeAfter' | translate }}</th>
         </tr>
       </thead>
       <tbody>
@@ -40,7 +40,7 @@
     <app-button variant="secondary" (click)="importDraft()">{{ 'builder.importBootstrap' | translate }}</app-button>
   </div>
   @if (importError()) {
-    <p class="editor-error">{{ importError()! | translate }}</p>
+    <p class="editor-error" role="alert">{{ importError()! | translate }}</p>
   }
   <label>
     <span>{{ 'builder.exportedBootstrap' | translate }}</span>
diff --git a/src/app/features/project-editor/sections/section.shared.scss b/src/app/features/project-editor/sections/section.shared.scss
index 465b3cd..a599cd8 100644
--- a/src/app/features/project-editor/sections/section.shared.scss
+++ b/src/app/features/project-editor/sections/section.shared.scss
@@ -238,6 +238,6 @@ button.secondary {
   font-size: var(--font-size-sm, 0.8125rem); font-weight: var(--font-weight-semibold, 600);
   em { font-style: normal; font-weight: var(--font-weight-normal, 400); font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #6b7280); }
 }
-.languages-summary__chip--default { border-color: var(--color-primary, #2f8f5b); }
+.languages-summary__chip--default { border-color: var(--primary-color, #2f8f5b); }
 .languages-summary__manage { font-size: var(--font-size-sm, 0.8125rem); text-decoration: underline; color: var(--text-primary, #1e3c38); }
-.languages-summary__manage:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; }
+.languages-summary__manage:focus-visible { outline: 2px solid var(--primary-color, #2f8f5b); outline-offset: 2px; }
diff --git a/src/app/features/project-editor/sections/theme-section.component.html b/src/app/features/project-editor/sections/theme-section.component.html
index b57a9e8..000a1aa 100644
--- a/src/app/features/project-editor/sections/theme-section.component.html
+++ b/src/app/features/project-editor/sections/theme-section.component.html
@@ -1,14 +1,14 @@
 @if (bootstrap(); as bootstrap) {
 <app-section-card [title]="'builder.theme' | translate">
   <div class="editor-grid two">
-    <app-form-field [label]="'builder.primaryColor' | translate" [hint]="'builder.primaryColorDesc' | translate" [error]="fieldError('theme.palette.primary')"><app-color-picker [ngModel]="bootstrap.theme.palette.primary" (ngModelChange)="updatePalette('primary', $event)" /></app-form-field>
-    <app-form-field [label]="'builder.secondaryColor' | translate" [hint]="'builder.secondaryColorDesc' | translate" [error]="fieldError('theme.palette.secondary')"><app-color-picker [ngModel]="bootstrap.theme.palette.secondary" (ngModelChange)="updatePalette('secondary', $event)" /></app-form-field>
-    <app-form-field [label]="'builder.backgroundColor' | translate" [hint]="'builder.backgroundColorDesc' | translate" [error]="fieldError('theme.palette.backgroundPrimary')"><app-color-picker [ngModel]="bootstrap.theme.palette.backgroundPrimary" (ngModelChange)="updatePalette('backgroundPrimary', $event)" /></app-form-field>
-    <app-form-field [label]="'builder.surfaceColor' | translate" [hint]="'builder.surfaceColorDesc' | translate" [error]="fieldError('theme.palette.backgroundSecondary')"><app-color-picker [ngModel]="bootstrap.theme.palette.backgroundSecondary" (ngModelChange)="updatePalette('backgroundSecondary', $event)" /></app-form-field>
-    <app-form-field [label]="'builder.textColor' | translate" [hint]="'builder.textColorDesc' | translate" [error]="fieldError('theme.palette.textPrimary')"><app-color-picker [ngModel]="bootstrap.theme.palette.textPrimary" (ngModelChange)="updatePalette('textPrimary', $event)" /></app-form-field>
-    <app-form-field [label]="'builder.successColor' | translate" [hint]="'builder.successColorDesc' | translate" [error]="fieldError('theme.palette.success')"><app-color-picker [ngModel]="bootstrap.theme.palette.success" (ngModelChange)="updatePalette('success', $event)" /></app-form-field>
-    <app-form-field [label]="'builder.warningColor' | translate" [hint]="'builder.warningColorDesc' | translate" [error]="fieldError('theme.palette.warning')"><app-color-picker [ngModel]="bootstrap.theme.palette.warning" (ngModelChange)="updatePalette('warning', $event)" /></app-form-field>
-    <app-form-field [label]="'builder.dangerColor' | translate" [hint]="'builder.dangerColorDesc' | translate" [error]="fieldError('theme.palette.danger')"><app-color-picker [ngModel]="bootstrap.theme.palette.danger" (ngModelChange)="updatePalette('danger', $event)" /></app-form-field>
+    <app-form-field [label]="'builder.primaryColor' | translate" [hint]="'builder.primaryColorDesc' | translate" [error]="fieldError('theme.palette.primary')"><app-color-picker [ariaLabel]="'builder.primaryColor' | translate" [ngModel]="bootstrap.theme.palette.primary" (ngModelChange)="updatePalette('primary', $event)" /></app-form-field>
+    <app-form-field [label]="'builder.secondaryColor' | translate" [hint]="'builder.secondaryColorDesc' | translate" [error]="fieldError('theme.palette.secondary')"><app-color-picker [ariaLabel]="'builder.secondaryColor' | translate" [ngModel]="bootstrap.theme.palette.secondary" (ngModelChange)="updatePalette('secondary', $event)" /></app-form-field>
+    <app-form-field [label]="'builder.backgroundColor' | translate" [hint]="'builder.backgroundColorDesc' | translate" [error]="fieldError('theme.palette.backgroundPrimary')"><app-color-picker [ariaLabel]="'builder.backgroundColor' | translate" [ngModel]="bootstrap.theme.palette.backgroundPrimary" (ngModelChange)="updatePalette('backgroundPrimary', $event)" /></app-form-field>
+    <app-form-field [label]="'builder.surfaceColor' | translate" [hint]="'builder.surfaceColorDesc' | translate" [error]="fieldError('theme.palette.backgroundSecondary')"><app-color-picker [ariaLabel]="'builder.surfaceColor' | translate" [ngModel]="bootstrap.theme.palette.backgroundSecondary" (ngModelChange)="updatePalette('backgroundSecondary', $event)" /></app-form-field>
+    <app-form-field [label]="'builder.textColor' | translate" [hint]="'builder.textColorDesc' | translate" [error]="fieldError('theme.palette.textPrimary')"><app-color-picker [ariaLabel]="'builder.textColor' | translate" [ngModel]="bootstrap.theme.palette.textPrimary" (ngModelChange)="updatePalette('textPrimary', $event)" /></app-form-field>
+    <app-form-field [label]="'builder.successColor' | translate" [hint]="'builder.successColorDesc' | translate" [error]="fieldError('theme.palette.success')"><app-color-picker [ariaLabel]="'builder.successColor' | translate" [ngModel]="bootstrap.theme.palette.success" (ngModelChange)="updatePalette('success', $event)" /></app-form-field>
+    <app-form-field [label]="'builder.warningColor' | translate" [hint]="'builder.warningColorDesc' | translate" [error]="fieldError('theme.palette.warning')"><app-color-picker [ariaLabel]="'builder.warningColor' | translate" [ngModel]="bootstrap.theme.palette.warning" (ngModelChange)="updatePalette('warning', $event)" /></app-form-field>
+    <app-form-field [label]="'builder.dangerColor' | translate" [hint]="'builder.dangerColorDesc' | translate" [error]="fieldError('theme.palette.danger')"><app-color-picker [ariaLabel]="'builder.dangerColor' | translate" [ngModel]="bootstrap.theme.palette.danger" (ngModelChange)="updatePalette('danger', $event)" /></app-form-field>
     <app-form-field [label]="'builder.themeModeLabel' | translate" [hint]="'builder.themeModeDesc' | translate">
       <app-select [options]="themeModeSelectOptions()" [ngModel]="bootstrap.theme.mode" (ngModelChange)="updateThemeMode($event)" />
     </app-form-field>
diff --git a/src/app/features/project-editor/sections/widgets-section.component.html b/src/app/features/project-editor/sections/widgets-section.component.html
index 5ffa643..0a71f76 100644
--- a/src/app/features/project-editor/sections/widgets-section.component.html
+++ b/src/app/features/project-editor/sections/widgets-section.component.html
@@ -5,7 +5,7 @@
 } @else {
 <app-section-card [title]="'builder.widgets' | translate">
   @if (fieldError('pages'); as msg) {
-    <p class="editor-error">{{ msg }}</p>
+    <p class="editor-error" role="alert">{{ msg }}</p>
   }
   <div class="stack-list widget-list">
     @for (entry of widgets(); track entry.widget.id; let first = $first; let last = $last) {
@@ -98,7 +98,7 @@
                 <small class="field-desc">{{ 'builder.widgetJsonDesc' | translate }}</small>
                 <textarea rows="8" [ngModel]="widgetJsonValue(entry.widget.id, entry.widget.props)" (ngModelChange)="updateJson(entry.widget.id, $event)"></textarea>
                 @if (widgetJsonError(entry.widget.id); as jsonError) {
-                  <p class="editor-error">{{ jsonError }}</p>
+                  <p class="editor-error" role="alert">{{ jsonError }}</p>
                 }
               </label>
             </details>
diff --git a/src/app/i18n/en.ts b/src/app/i18n/en.ts
index 6de5d35..a841aec 100644
--- a/src/app/i18n/en.ts
+++ b/src/app/i18n/en.ts
@@ -721,6 +721,7 @@ export const en: Translations = {
     catalogNavMegaCategoryDesc: 'Expanded dropdown showing subcategories and featured items.',
     catalogNavTopCarousel: 'Top category carousel',
     catalogNavTopCarouselDesc: 'Horizontally scrollable category chips above the catalog grid.',
+    newLanguageLabel: 'New language code',
     newLanguageDesc: 'ISO language code to add as a supported storefront language (e.g. de, fr).',
     languageAlreadyAdded: 'This language is already supported.',
     languagesTabDesc: 'Languages available to shoppers. The default language is used as a fallback everywhere.',
diff --git a/src/app/i18n/hy.ts b/src/app/i18n/hy.ts
index 6d5ec98..9e56d22 100644
--- a/src/app/i18n/hy.ts
+++ b/src/app/i18n/hy.ts
@@ -721,6 +721,7 @@ export const hy: Translations = {
     catalogNavMegaCategoryDesc: 'Ընդարձակված dropdown ենթակատեգորիաներով և ընտրված ապրանքներով։',
     catalogNavTopCarousel: 'Վերևի կատեգորիաների կարուսել',
     catalogNavTopCarouselDesc: 'Հորիզոնական թերթվող կատեգորիաների chip-եր կատալոգի ցանցի վերևում։',
+    newLanguageLabel: 'Նոր լեզվի կոդ',
     newLanguageDesc: 'ISO լեզվի կոդ՝ որպես աջակցվող լեզու ավելացնելու համար (օր․՝ de, fr)։',
     languageAlreadyAdded: 'Այս լեզուն արդեն ավելացված է։',
     languagesTabDesc: 'Գնորդներին հասանելի լեզուներ։ Լռելյայն լեզուն օգտագործվում է որպես պահուստային ամենուր։',
diff --git a/src/app/i18n/ru.ts b/src/app/i18n/ru.ts
index b0ce757..f2fd121 100644
--- a/src/app/i18n/ru.ts
+++ b/src/app/i18n/ru.ts
@@ -721,6 +721,7 @@ export const ru: Translations = {
     catalogNavMegaCategoryDesc: 'Развёрнутый выпадающий список с подкатегориями и избранными товарами.',
     catalogNavTopCarousel: 'Карусель категорий сверху',
     catalogNavTopCarouselDesc: 'Горизонтально прокручиваемые чипы категорий над сеткой каталога.',
+    newLanguageLabel: 'Код нового языка',
     newLanguageDesc: 'Код языка ISO для добавления в поддерживаемые языки витрины (например, de, fr).',
     languageAlreadyAdded: 'Этот язык уже добавлен.',
     languagesTabDesc: 'Языки, доступные покупателям. Язык по умолчанию используется как резервный везде.',
diff --git a/src/app/i18n/translations.ts b/src/app/i18n/translations.ts
index ccd88d3..576ae66 100644
--- a/src/app/i18n/translations.ts
+++ b/src/app/i18n/translations.ts
@@ -719,6 +719,7 @@ export interface Translations {
     catalogNavMegaCategoryDesc: string;
     catalogNavTopCarousel: string;
     catalogNavTopCarouselDesc: string;
+    newLanguageLabel: string;
     newLanguageDesc: string;
     languageAlreadyAdded: string;
     languagesTabDesc: string;
diff --git a/src/app/shared/media/media-picker/media-picker.component.html b/src/app/shared/media/media-picker/media-picker.component.html
index f31dcd5..f2cb4e5 100644
--- a/src/app/shared/media/media-picker/media-picker.component.html
+++ b/src/app/shared/media/media-picker/media-picker.component.html
@@ -26,7 +26,7 @@
     </div>
 
     @if (facade.error()) {
-      <p class="media-picker__error">{{ facade.error() }}</p>
+      <p class="media-picker__error" role="alert">{{ facade.error() }}</p>
     }
 
     @if (facade.loading()) {