diff --git a/apps/site/components/withBanner.tsx b/apps/site/components/withBanner.tsx
index 670307e729a8e..2f58eef5227e0 100644
--- a/apps/site/components/withBanner.tsx
+++ b/apps/site/components/withBanner.tsx
@@ -1,5 +1,6 @@
 import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
 import Banner from '@node-core/ui-components/Common/Banner';
+import { useTranslations } from 'next-intl';
 
 import Link from '#site/components/Link';
 import { siteConfig } from '#site/next.json.mjs';
@@ -9,10 +10,20 @@ import type { FC } from 'react';
 
 const WithBanner: FC<{ section: string }> = ({ section }) => {
   const banner = siteConfig.websiteBanners[section];
+  const t = useTranslations();
 
   if (banner && dateIsBetween(banner.startDate, banner.endDate)) {
+    const ariaLabels = {
+      default: t('components.banner.announcement'),
+      warning: t('components.banner.warning'),
+      error: t('components.banner.error'),
+    } as const;
+
+    // Fallback to 'default' if no type is specified
+    const bannerType = banner.type || 'default';
+
     return (
-      <Banner type={banner.type}>
+      <Banner type={banner.type} aria-label={ariaLabels[bannerType]}>
         {banner.link ? (
           <Link href={banner.link}>{banner.text}</Link>
         ) : (
diff --git a/apps/site/components/withMetaBar.tsx b/apps/site/components/withMetaBar.tsx
index 7467753567b8c..dea25e5900e19 100644
--- a/apps/site/components/withMetaBar.tsx
+++ b/apps/site/components/withMetaBar.tsx
@@ -44,6 +44,7 @@ const WithMetaBar: FC = () => {
     <MetaBar
       heading={t('components.metabar.tableOfContents')}
       as={Link}
+      aria-label={t('components.metabar.metadata')}
       items={{
         [t('components.metabar.lastUpdated')]: lastUpdated,
         [t('components.metabar.readingTime')]: readingTimeText,
diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json
index ddf33a5874e37..34142b7142c94 100644
--- a/packages/i18n/src/locales/en.json
+++ b/packages/i18n/src/locales/en.json
@@ -280,7 +280,13 @@
       "contribute": "Contribute",
       "contributeText": "Edit this page",
       "viewAs": "View as",
-      "tableOfContents": "Table of Contents"
+      "tableOfContents": "Table of Contents",
+      "metadata": "Article metadata"
+    },
+    "banner": {
+      "announcement": "Announcement",
+      "warning": "Warning notification",
+      "error": "Error notification"
     },
     "search": {
       "searchPlaceholder": "Start typing...",
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index 6426a5130c8b9..87c217cd3fae4 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@node-core/ui-components",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "type": "module",
   "exports": {
     "./*": [
diff --git a/packages/ui-components/src/Common/Banner/index.tsx b/packages/ui-components/src/Common/Banner/index.tsx
index 0eb3f9faf73ef..b28ceade24816 100644
--- a/packages/ui-components/src/Common/Banner/index.tsx
+++ b/packages/ui-components/src/Common/Banner/index.tsx
@@ -1,18 +1,22 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
 
 import styles from './index.module.css';
 
 export type BannerProps = {
   type?: 'default' | 'warning' | 'error';
-};
+} & HTMLAttributes<HTMLElement>;
 
 const Banner: FC<PropsWithChildren<BannerProps>> = ({
   type = 'default',
   children,
+  ...props
 }) => (
-  <div className={`${styles.banner} ${styles[type] || styles.default}`}>
+  <section
+    className={`${styles.banner} ${styles[type] || styles.default}`}
+    {...props}
+  >
     {children}
-  </div>
+  </section>
 );
 
 export default Banner;
diff --git a/packages/ui-components/src/Containers/MetaBar/index.tsx b/packages/ui-components/src/Containers/MetaBar/index.tsx
index 2c314a61414ec..c761cfe07f643 100644
--- a/packages/ui-components/src/Containers/MetaBar/index.tsx
+++ b/packages/ui-components/src/Containers/MetaBar/index.tsx
@@ -2,7 +2,7 @@ import { Fragment, useMemo } from 'react';
 
 import type { LinkLike } from '#ui/types';
 import type { Heading } from '@vcarl/remark-headings';
-import type { FC } from 'react';
+import type { FC, HTMLAttributes } from 'react';
 
 import styles from './index.module.css';
 
@@ -14,13 +14,14 @@ type MetaBarProps = {
   };
   as?: LinkLike;
   heading: string;
-};
+} & HTMLAttributes<HTMLElement>;
 
 const MetaBar: FC<MetaBarProps> = ({
   items,
   headings,
   as: Component = 'a',
   heading,
+  ...props
 }) => {
   // The default depth of headings to display in the table of contents.
   const { minDepth = 2, items: headingItems = [] } = headings || {};
@@ -31,7 +32,7 @@ const MetaBar: FC<MetaBarProps> = ({
   );
 
   return (
-    <div className={styles.wrapper}>
+    <aside className={styles.wrapper} {...props}>
       <dl>
         {Object.entries(items)
           .filter(([, value]) => !!value)
@@ -65,7 +66,7 @@ const MetaBar: FC<MetaBarProps> = ({
           </>
         )}
       </dl>
-    </div>
+    </aside>
   );
 };