diff --git a/webapp/src/assets/main.css b/webapp/src/assets/main.css
index c8f4aea..bea0142 100644
--- a/webapp/src/assets/main.css
+++ b/webapp/src/assets/main.css
@@ -171,3 +171,14 @@ pre code {
 html, body {
   overflow-x: hidden;
 }
+.sr-only {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
diff --git a/webapp/src/components/DFMapPopup.vue b/webapp/src/components/DFMapPopup.vue
index 48f5c7f..689a81b 100644
--- a/webapp/src/components/DFMapPopup.vue
+++ b/webapp/src/components/DFMapPopup.vue
@@ -1,8 +1,11 @@
 <template>
-  <v-sheet min-width="240">
+  <v-sheet min-width="240" role="dialog" aria-labelledby="df-map-popup-heading">
+    <h2 id="df-map-popup-heading" tabindex="-1" class="text-subtitle-1 font-weight-bold px-4 pt-3">
+      Camera details
+    </h2>
     <!--  TODO: if a field is unknown, prompt user to edit it -->
     <div class="position-relative">
-      <v-img v-if="imageUrl" cover width="100%" height="150px" :src="imageUrl" class="rounded mt-5" position="top" />
+      <v-img v-if="imageUrl" cover width="100%" height="150px" :src="imageUrl" :alt="cameraImageAlt" class="rounded mt-5" position="top" />
       <div v-if="imageUrl" class="position-absolute bottom-0 left-0 right-0 text-center text-white text-caption" style="background: rgba(0, 0, 0, 0.5);">
         {{ manufacturer }} {{ manufacturer.endsWith(' LPR') ? '' : ' LPR' }}
       </div>
@@ -57,6 +60,7 @@ import type { ALPR } from '@/types';
 import { VIcon, VList, VSheet, VListItem, VBtn, VImg, VListItemSubtitle, VDivider } from 'vuetify/components';
 import { useVendorStore } from '@/stores/vendorStore';
 import { md5 } from 'js-md5';
+import { getCameraManufacturer, getCameraOperator } from './mapAccessibility';
 
 const props = defineProps({
   alpr: {
@@ -65,13 +69,7 @@ const props = defineProps({
   }
 });
 
-const manufacturer = computed(() => (
-  props.alpr.tags.manufacturer || 
-    props.alpr.tags['surveillance:manufacturer'] || 
-    props.alpr.tags.brand || 
-    props.alpr.tags['surveillance:brand'] ||
-    'Unknown'
-));
+const manufacturer = computed(() => getCameraManufacturer(props.alpr.tags) || 'Unknown');
 
 const store = useVendorStore();
 const vendorImageUrl = ref<string | undefined | null>(undefined);
@@ -85,13 +83,13 @@ const imageUrl = computed(() => {
   return wikimediaImages.value?.thumbnail ?? vendorImageUrl.value;
 });
 
+const cameraImageAlt = computed(() => (
+  manufacturer.value === 'Unknown' ? 'Camera' : `${manufacturer.value} camera`
+));
+
 const abbreviatedOperator = computed(() => {
-  const operatorTagKeys = [
-    "operator",
-    "surveillance:operator"
-  ]
-  const operatorTagKey = operatorTagKeys.find(key => props.alpr.tags[key] !== undefined);
-  if (!operatorTagKey) {
+  const operator = getCameraOperator(props.alpr.tags);
+  if (!operator) {
     return undefined;
   }
 
@@ -101,7 +99,6 @@ const abbreviatedOperator = computed(() => {
     "Sheriffs Office": "SO",
   };
 
-  const operator = props.alpr.tags[operatorTagKey];
   for (const [full, abbr] of Object.entries(replacements)) {
     if (operator.includes(full)) {
       return operator.replace(full, abbr);
diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
index 5568d39..060a984 100644
--- a/webapp/src/components/LeafletMap.vue
+++ b/webapp/src/components/LeafletMap.vue
@@ -1,13 +1,13 @@
 <template>
-  <div id="map" :style="{
+  <div id="map" role="region" aria-label="ALPR camera map" :style="{
     height: isIframe ? '100dvh' : 'calc(100dvh - 64px)',
     marginTop: isIframe ? '0' : '64px',
   }">
-    <div class="topleft">
+    <div class="topleft" role="region" aria-label="Map search and controls">
       <slot name="topleft"></slot>
     </div>
 
-    <div class="topright">
+    <div class="topright" role="region" aria-label="Map controls">
       <!-- Controls -->
       <div v-if="!isIframe" class="d-flex flex-column ga-2">
         <!-- Clustering Toggle Switch -->
@@ -20,6 +20,7 @@
               </span>
               <v-switch
                 v-model="clusteringEnabled"
+                aria-label="Toggle camera grouping"
                 :disabled="currentZoom < 12"
                 hide-details
                 density="compact"
@@ -35,7 +36,16 @@
           <v-card-text class="py-2 px-3">
             <div class="d-flex align-center justify-space-between">
               <v-icon size="small" class="mr-2">mdi-map-outline</v-icon>
-              <v-btn-toggle v-model="boundaryMode" mandatory density="compact" divided variant="outlined" color="primary">
+              <v-btn-toggle
+                v-model="boundaryMode"
+                role="radiogroup"
+                aria-label="City boundary display"
+                mandatory
+                density="compact"
+                divided
+                variant="outlined"
+                color="primary"
+              >
                 <v-btn value="mask" size="x-small">Mask</v-btn>
                 <v-btn value="off" size="x-small">Off</v-btn>
                 <v-btn value="boundary" size="x-small">Border</v-btn>
@@ -70,17 +80,19 @@
           variant="text" 
           color="white"
           class="ml-2"
+          aria-label="Dismiss grouping warning"
           @click="dismissZoomWarning"
         >
           <v-icon size="small">mdi-close</v-icon>
         </v-btn>
       </div>
     </v-slide-y-transition>
+    <p class="sr-only" aria-live="polite" aria-atomic="true">{{ statusMessage }}</p>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, h, createApp, watch, ref, type PropType, type Ref } from 'vue';
+import { onBeforeUnmount, onMounted, h, createApp, nextTick, watch, ref, type App, type PropType, type Ref } from 'vue';
 import L, { type LatLngTuple, type FeatureGroup, type MarkerClusterGroup, type Marker, type CircleMarker } from 'leaflet';
 import type { ALPR } from '@/types';
 import DFMapPopup from './DFMapPopup.vue';
@@ -91,12 +103,14 @@ import 'leaflet.markercluster';
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
 import 'leaflet.markercluster/dist/MarkerCluster.css';
 import { useTheme } from 'vuetify';
+import { cameraAriaLabel, clusterAriaLabel, isActivationKey } from './mapAccessibility';
 
 const MARKER_COLOR = 'rgb(63,84,243)';
 const CLUSTER_DISABLE_ZOOM = 16; // Clustering disabled at zoom 16 and above
 
 // Internal State Management
 const markerMap = new Map<string, Marker | CircleMarker>();
+const keyboardEnabledMarkerElements = new WeakSet<Element>();
 const isInternalUpdate = ref(false);
 const isIframe = computed(() => window.self !== window.top);
 
@@ -104,6 +118,7 @@ const isIframe = computed(() => window.self !== window.top);
 const clusteringEnabled = ref(true);
 const currentZoom = ref(0);
 const zoomWarningDismissed = ref(false);
+const statusMessage = ref('');
 
 // City Boundaries Control
 type BoundaryMode = 'mask' | 'off' | 'boundary';
@@ -154,6 +169,38 @@ let map: L.Map;
 let circlesLayer: FeatureGroup;
 let clusterLayer: MarkerClusterGroup;
 let currentLocationLayer: FeatureGroup;
+let activePopupApp: App<Element> | null = null;
+let activePopup: L.Popup | null = null;
+let popupOpener: Marker | CircleMarker | null = null;
+let focusRestoreGeneration = 0;
+
+type MapPopupEvent = L.LeafletEvent & { popup: L.Popup };
+
+function createClusterIcon(cluster: L.MarkerCluster): L.DivIcon {
+  const count = cluster.getChildCount();
+  const accessibleLabel = clusterAriaLabel(count);
+  const size = count < 10 ? 'small' : count < 100 ? 'medium' : 'large';
+
+  cluster.options.keyboard = true;
+  cluster.options.title = accessibleLabel;
+  cluster.options.alt = accessibleLabel;
+
+  return L.divIcon({
+    html: `<div><span aria-hidden="true">${count}</span><span class="sr-only">${accessibleLabel}</span></div>`,
+    className: `marker-cluster marker-cluster-${size}`,
+    iconSize: L.point(40, 40),
+  });
+}
+
+function handleClusterKeydown(event: KeyboardEvent): void {
+  if (!isActivationKey(event.key) || !(event.target instanceof Element)) return;
+
+  const clusterElement = event.target.closest<HTMLElement>('.marker-cluster');
+  if (!clusterElement || !map.getContainer().contains(clusterElement)) return;
+
+  event.preventDefault();
+  clusterElement.click();
+}
 
 // Marker Creation Utilities
 function createSVGMarkers(alpr: ALPR): string {
@@ -256,6 +303,8 @@ function cardinalToDegrees(cardinal: string): number {
 }
 
 function createMarker(alpr: ALPR): Marker | CircleMarker {
+  const accessibleLabel = cameraAriaLabel(alpr);
+
   if (hasPlottableOrientation(alpr.tags.direction || alpr.tags['camera:direction'])) {
     const icon = L.divIcon({
       className: 'leaflet-data-marker',
@@ -264,7 +313,12 @@ function createMarker(alpr: ALPR): Marker | CircleMarker {
       iconAnchor: [30, 30],
       popupAnchor: [0, 0],
     });
-    return L.marker([alpr.lat, alpr.lon], { icon });
+    return L.marker([alpr.lat, alpr.lon], {
+      icon,
+      keyboard: true,
+      title: accessibleLabel,
+      alt: accessibleLabel,
+    });
   }
 
   return L.circleMarker([alpr.lat, alpr.lon], {
@@ -279,37 +333,154 @@ function createMarker(alpr: ALPR): Marker | CircleMarker {
   });
 }
 
+function enableMarkerKeyboardBehavior(marker: Marker | CircleMarker, alpr: ALPR): void {
+  const applyAccessibility = () => {
+    const element = marker.getElement();
+    if (!element) return;
+
+    element.setAttribute('role', 'button');
+    element.setAttribute('tabindex', '0');
+    element.setAttribute('aria-label', cameraAriaLabel(alpr));
+
+    if (keyboardEnabledMarkerElements.has(element)) return;
+
+    element.addEventListener('keydown', (event: Event) => {
+      if (!(event instanceof KeyboardEvent)) return;
+      if (!isActivationKey(event.key)) return;
+
+      event.preventDefault();
+      marker.fire('click', { originalEvent: event });
+    });
+    keyboardEnabledMarkerElements.add(element);
+  };
+
+  marker.on('add', applyAccessibility);
+  applyAccessibility();
+}
+
 const theme = useTheme();
 
+function rememberPopupOpener(marker: Marker | CircleMarker): void {
+  focusRestoreGeneration += 1;
+  popupOpener = marker;
+}
+
+function cleanupPopup(restoreFocus: boolean): void {
+  const popupApp = activePopupApp;
+  activePopupApp = null;
+  activePopup = null;
+
+  popupApp?.unmount();
+
+  const openerMarker = popupOpener;
+  popupOpener = null;
+  const restoreGeneration = ++focusRestoreGeneration;
+
+  if (restoreFocus && openerMarker) {
+    const restoreWhenVisible = (remainingFrames: number) => {
+      if (restoreGeneration !== focusRestoreGeneration) return;
+
+      const visibleOpener = map.hasLayer(clusterLayer)
+        ? clusterLayer.getVisibleParent(openerMarker as Marker)
+        : openerMarker;
+      const openerElement = visibleOpener?.getElement() as (Element & { focus: () => void }) | null;
+      if (openerElement?.isConnected) {
+        openerElement.focus();
+        return;
+      }
+
+      if (remainingFrames > 0) {
+        requestAnimationFrame(() => restoreWhenVisible(remainingFrames - 1));
+      } else {
+        map.getContainer().focus();
+      }
+    };
+
+    requestAnimationFrame(() => restoreWhenVisible(120));
+  }
+}
+
+function mountPopup(event: MapPopupEvent, marker: Marker | CircleMarker, alpr: ALPR): void {
+  if (activePopupApp) cleanupPopup(false);
+
+  rememberPopupOpener(marker);
+  const popupContent = document.createElement('div');
+  const popupApp = createApp({
+    render() {
+      return h(DFMapPopup, {
+        alpr: {
+          id: alpr.id,
+          lat: alpr.lat,
+          lon: alpr.lon,
+          tags: alpr.tags,
+          type: alpr.type,
+        }
+      });
+    }
+  }).use(createVuetify({
+    theme: {
+      defaultTheme: theme.global.name.value,
+    },
+  }));
+
+  activePopupApp = popupApp;
+  activePopup = event.popup;
+  popupApp.mount(popupContent);
+  event.popup.setContent(popupContent);
+  statusMessage.value = '';
+
+  void nextTick(() => {
+    if (activePopup !== event.popup || !popupContent.isConnected) return;
+    statusMessage.value = `${cameraAriaLabel(alpr)}. Details opened.`;
+    popupContent.querySelector<HTMLElement>('#df-map-popup-heading')?.focus();
+  });
+}
+
 function bindPopup(marker: L.CircleMarker | L.Marker, alpr: ALPR): L.CircleMarker | L.Marker {
   marker.bindPopup('');
 
-  marker.on('popupopen', (e: any) => {
-    const popupContent = document.createElement('div');
-    createApp({
-      render() {
-        return h(DFMapPopup, {
-          alpr: {
-            id: alpr.id,
-            lat: alpr.lat,
-            lon: alpr.lon,
-            tags: alpr.tags,
-            type: alpr.type,
-          }
-        });
+  marker.on('click', () => rememberPopupOpener(marker));
+  marker.on('popupopen', (event: MapPopupEvent) => {
+    mountPopup(event, marker, alpr);
+  });
+  marker.on('popupclose', (event: MapPopupEvent) => {
+    if (activePopup === event.popup) cleanupPopup(true);
+  });
+
+  return marker;
+}
+
+function openCamera(id: string): boolean {
+  const marker = markerMap.get(id);
+  if (!marker) return false;
+
+  map.setView(
+    marker.getLatLng(),
+    Math.max(map.getZoom(), CLUSTER_DISABLE_ZOOM),
+    { animate: false },
+  );
+
+  void nextTick(() => {
+    const activateWhenVisible = (remainingFrames: number) => {
+      const element = marker.getElement();
+      if (element?.isConnected) {
+        marker.fire('click');
+        return;
       }
-    }).use(createVuetify({
-      theme: {
-        defaultTheme: theme.global.name.value,
-      },
-    })).mount(popupContent);
 
-    e.popup.setContent(popupContent);
+      if (remainingFrames > 0) {
+        requestAnimationFrame(() => activateWhenVisible(remainingFrames - 1));
+      }
+    };
+
+    requestAnimationFrame(() => activateWhenVisible(120));
   });
 
-  return marker;
+  return true;
 }
 
+defineExpose({ openCamera });
+
 function hasPlottableOrientation(orientationDegrees: string) {
   if (!orientationDegrees) return false;
   
@@ -353,6 +524,7 @@ function initializeMap() {
     maxClusterRadius: 60,
     spiderfyOnEveryZoom: false,
     spiderfyOnMaxZoom: false,
+    iconCreateFunction: createClusterIcon,
   });
 
   circlesLayer = L.featureGroup();
@@ -362,6 +534,7 @@ function initializeMap() {
   currentZoom.value = props.zoom;
 
   map.addLayer(clusterLayer);
+  map.getContainer().addEventListener('keydown', handleClusterKeydown);
   registerMapEvents();
 
   if (props.geojson) {
@@ -389,6 +562,7 @@ function updateMarkers(newAlprs: ALPR[]): void {
       // Add new marker
       const marker = createMarker(alpr);
       bindPopup(marker, alpr);
+      enableMarkerKeyboardBehavior(marker, alpr);
       markerMap.set(alpr.id, marker);
       circlesLayer.addLayer(marker);
     }
@@ -491,6 +665,7 @@ function updateClusteringBehavior(): void {
     maxClusterRadius: 60,
     spiderfyOnEveryZoom: false,
     spiderfyOnMaxZoom: false,
+    iconCreateFunction: createClusterIcon,
   });
   
   // Transfer all markers to the new cluster layer
@@ -561,6 +736,8 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
+  cleanupPopup(false);
+  map?.getContainer().removeEventListener('keydown', handleClusterKeydown);
   map?.remove();
 });
 
diff --git a/webapp/src/components/__tests__/mapAccessibility.test.ts b/webapp/src/components/__tests__/mapAccessibility.test.ts
new file mode 100644
index 0000000..0f734e4
--- /dev/null
+++ b/webapp/src/components/__tests__/mapAccessibility.test.ts
@@ -0,0 +1,128 @@
+import { describe, expect, test } from "bun:test";
+import type { BoundingBoxLiteral } from "../../services/apiService";
+import type { ALPR } from "../../types";
+import {
+  cameraAriaLabel,
+  clusterAriaLabel,
+  filterCamerasInBounds,
+  getCameraManufacturer,
+  getCameraOperator,
+  isActivationKey,
+  paginateCameras,
+} from "../mapAccessibility";
+
+const camera = (id: string, lat: number, lon: number, tags: Record<string, string> = {}): ALPR => ({
+  id,
+  lat,
+  lon,
+  tags,
+  type: "camera",
+});
+
+describe("cameraAriaLabel", () => {
+  test("describes a camera with its vendor, operator, and coordinates", () => {
+    const alpr = camera("camera-1", 47.6062, -122.3321, {
+      manufacturer: "Flock Safety",
+      operator: "Seattle Police Department",
+    });
+
+    expect(cameraAriaLabel(alpr)).toBe(
+      "Camera: Flock Safety; operated by Seattle Police Department; coordinates 47.60620, -122.33210",
+    );
+  });
+
+  test("uses useful fallbacks when vendor and operator are unknown", () => {
+    expect(cameraAriaLabel(camera("camera-2", 0, 0))).toBe(
+      "Camera: unknown vendor; operated by unknown operator; coordinates 0.00000, 0.00000",
+    );
+  });
+
+  test("uses the same prefixed tag fallbacks as the camera popup", () => {
+    const alpr = camera("camera-3", 41.3083, -72.9279, {
+      "surveillance:manufacturer": "Motorola Solutions",
+      "surveillance:operator": "New Haven Police Department",
+    });
+
+    expect(cameraAriaLabel(alpr)).toBe(
+      "Camera: Motorola Solutions; operated by New Haven Police Department; coordinates 41.30830, -72.92790",
+    );
+  });
+});
+
+describe("camera tag resolution", () => {
+  test("preserves the popup's manufacturer and operator precedence", () => {
+    const tags = {
+      manufacturer: "Manufacturer",
+      "surveillance:manufacturer": "Surveillance manufacturer",
+      brand: "Brand",
+      "surveillance:brand": "Surveillance brand",
+      operator: "Operator",
+      "surveillance:operator": "Surveillance operator",
+    };
+
+    expect(getCameraManufacturer(tags)).toBe("Manufacturer");
+    expect(getCameraOperator(tags)).toBe("Operator");
+    expect(getCameraManufacturer({ brand: "Brand", "surveillance:brand": "Surveillance brand" })).toBe("Brand");
+    expect(getCameraManufacturer({ "surveillance:brand": "Surveillance brand" })).toBe("Surveillance brand");
+  });
+});
+
+describe("clusterAriaLabel", () => {
+  test("uses singular and plural camera wording", () => {
+    expect(clusterAriaLabel(1)).toBe("1 camera");
+    expect(clusterAriaLabel(7)).toBe("7 cameras");
+  });
+});
+
+describe("isActivationKey", () => {
+  test("accepts Enter and Space while rejecting unrelated keys", () => {
+    expect(isActivationKey("Enter")).toBe(true);
+    expect(isActivationKey(" ")).toBe(true);
+    expect(isActivationKey("Escape")).toBe(false);
+    expect(isActivationKey("ArrowDown")).toBe(false);
+  });
+});
+
+describe("filterCamerasInBounds", () => {
+  test("includes cameras on every boundary and excludes cameras outside", () => {
+    const bounds: BoundingBoxLiteral = {
+      minLat: 10,
+      maxLat: 20,
+      minLng: 30,
+      maxLng: 40,
+    };
+    const cameras = [
+      camera("south-west", 10, 30),
+      camera("north-east", 20, 40),
+      camera("inside", 15, 35),
+      camera("too-far-north", 20.00001, 35),
+      camera("too-far-west", 15, 29.99999),
+    ];
+
+    expect(filterCamerasInBounds(cameras, bounds).map(({ id }) => id)).toEqual([
+      "south-west",
+      "north-east",
+      "inside",
+    ]);
+  });
+});
+
+describe("paginateCameras", () => {
+  test("returns stable one-based pages and empty results when no page exists", () => {
+    const cameras = [
+      camera("first", 1, 1),
+      camera("second", 2, 2),
+      camera("third", 3, 3),
+      camera("fourth", 4, 4),
+      camera("fifth", 5, 5),
+    ];
+
+    expect(paginateCameras(cameras, { page: 2, pageSize: 2 }).map(({ id }) => id)).toEqual([
+      "third",
+      "fourth",
+    ]);
+    expect(paginateCameras(cameras, { page: 3, pageSize: 2 }).map(({ id }) => id)).toEqual(["fifth"]);
+    expect(paginateCameras(cameras, { page: 4, pageSize: 2 })).toEqual([]);
+    expect(paginateCameras([], { page: 1, pageSize: 2 })).toEqual([]);
+  });
+});
diff --git a/webapp/src/components/mapAccessibility.ts b/webapp/src/components/mapAccessibility.ts
new file mode 100644
index 0000000..c48c1d2
--- /dev/null
+++ b/webapp/src/components/mapAccessibility.ts
@@ -0,0 +1,51 @@
+import type { BoundingBoxLiteral } from "../services/apiService";
+import type { ALPR } from "../types";
+
+type CameraTags = ALPR["tags"];
+
+export function getCameraManufacturer(tags: CameraTags): string | undefined {
+  return tags.manufacturer ||
+    tags["surveillance:manufacturer"] ||
+    tags.brand ||
+    tags["surveillance:brand"];
+}
+
+export function getCameraOperator(tags: CameraTags): string | undefined {
+  return tags.operator || tags["surveillance:operator"];
+}
+
+export function cameraAriaLabel(camera: ALPR): string {
+  const vendor = getCameraManufacturer(camera.tags) || "unknown vendor";
+  const operator = getCameraOperator(camera.tags) || "unknown operator";
+
+  return `Camera: ${vendor}; operated by ${operator}; coordinates ${camera.lat.toFixed(5)}, ${camera.lon.toFixed(5)}`;
+}
+
+export function clusterAriaLabel(count: number): string {
+  return `${count} ${count === 1 ? "camera" : "cameras"}`;
+}
+
+export function isActivationKey(key: string): boolean {
+  return key === "Enter" || key === " ";
+}
+
+export function filterCamerasInBounds(
+  cameras: ALPR[],
+  bounds: BoundingBoxLiteral,
+): ALPR[] {
+  return cameras.filter(
+    ({ lat, lon }) =>
+      lat >= bounds.minLat &&
+      lat <= bounds.maxLat &&
+      lon >= bounds.minLng &&
+      lon <= bounds.maxLng,
+  );
+}
+
+export function paginateCameras(
+  cameras: ALPR[],
+  { page, pageSize }: { page: number; pageSize: number },
+): ALPR[] {
+  const start = (page - 1) * pageSize;
+  return cameras.slice(start, start + pageSize);
+}
diff --git a/webapp/src/views/Map.vue b/webapp/src/views/Map.vue
index d7c3d2a..b9d62cd 100644
--- a/webapp/src/views/Map.vue
+++ b/webapp/src/views/Map.vue
@@ -4,6 +4,7 @@
   <div class="map-container" @keyup="handleKeyUp">
     <leaflet-map
       v-if="center"
+      ref="leafletMap"
       v-model:center="center"
       v-model:zoom="zoom"
       :current-location="currentLocation"
@@ -21,6 +22,7 @@
             ref="searchField"
             prepend-inner-icon="mdi-magnify"
             placeholder="Search for a location"
+            aria-label="Search for a location"
             single-line
             variant="solo"
             clearable
@@ -29,7 +31,7 @@
             type="search"
           >
             <template v-slot:append-inner>
-              <v-btn :disabled="!searchInput" variant="text" flat color="#0080BC" @click="onSearch">
+              <v-btn aria-label="Search" :disabled="!searchInput" variant="text" flat color="#0080BC" @click="onSearch">
                 Go<v-icon end>mdi-chevron-right</v-icon>
               </v-btn>
             </template>
@@ -38,15 +40,74 @@
       </template>
 
       <template v-slot:bottomright>
-        <v-btn icon @click="shareDialogOpen = true" v-if="!isIframe">
+        <v-btn
+          icon
+          :aria-label="cameraListOpen ? 'Hide cameras in current map view' : 'Show cameras in current map view'"
+          aria-controls="camera-list-panel"
+          :aria-expanded="cameraListOpen"
+          @click="cameraListOpen = !cameraListOpen"
+        >
+          <v-icon>mdi-format-list-bulleted</v-icon>
+        </v-btn>
+        <v-btn icon aria-label="Share map" @click="shareDialogOpen = true" v-if="!isIframe">
           <v-icon>mdi-share-variant</v-icon>
         </v-btn>
-        <v-btn icon to="/report" style="color: unset" v-if="!isIframe">
+        <v-btn icon aria-label="Report a camera" to="/report" style="color: unset" v-if="!isIframe">
           <v-icon size="large">mdi-map-marker-plus</v-icon>
         </v-btn>
-        <v-btn icon @click="goToUserLocation">
+        <v-btn icon aria-label="Go to my location" @click="goToUserLocation">
           <v-icon>mdi-crosshairs-gps</v-icon>
         </v-btn>
+
+        <section
+          v-if="cameraListOpen"
+          id="camera-list-panel"
+          class="camera-list-panel"
+          aria-labelledby="camera-list-heading"
+        >
+          <h2 id="camera-list-heading" class="camera-list-heading">Cameras in current map view</h2>
+          <p class="camera-list-status" aria-live="polite">
+            {{ visibleCameras.length }} {{ visibleCameras.length === 1 ? 'camera' : 'cameras' }} found.
+            Page {{ cameraPage }} of {{ cameraPageCount }}.
+          </p>
+
+          <ul v-if="paginatedCameras.length" class="camera-list">
+            <li v-for="camera in paginatedCameras" :key="camera.id" class="camera-list-item">
+              <span>{{ cameraAriaLabel(camera) }}</span>
+              <v-btn
+                size="small"
+                variant="outlined"
+                :aria-label="`Show on map: ${cameraAriaLabel(camera)}`"
+                @click="showCameraOnMap(camera.id)"
+              >
+                Show on map
+              </v-btn>
+            </li>
+          </ul>
+          <p v-else class="camera-list-empty">No cameras are visible in the current map view.</p>
+
+          <nav class="camera-list-pagination" aria-label="Camera list pages">
+            <v-btn
+              size="small"
+              variant="text"
+              :disabled="cameraPage <= 1"
+              aria-label="Previous camera list page"
+              @click="cameraPage--"
+            >
+              Previous
+            </v-btn>
+            <span aria-current="page">Page {{ cameraPage }} of {{ cameraPageCount }}</span>
+            <v-btn
+              size="small"
+              variant="text"
+              :disabled="cameraPage >= cameraPageCount"
+              aria-label="Next camera list page"
+              @click="cameraPage++"
+            >
+              Next
+            </v-btn>
+          </nav>
+        </section>
       </template>
     </leaflet-map>
     <div v-else class="loader">
@@ -58,7 +119,7 @@
 
 <script setup lang="ts">
 import 'leaflet/dist/leaflet.css';
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, computed, watch } from 'vue';
 import { useRouter } from 'vue-router'
 import { useHead } from '@unhead/vue'
 
@@ -78,8 +139,14 @@ globalThis.L = L;
 import 'leaflet/dist/leaflet.css'
 import LeafletMap from '@/components/LeafletMap.vue';
 import ShareDialog from '@/components/ShareDialog.vue';
+import { cameraAriaLabel, filterCamerasInBounds, paginateCameras } from '@/components/mapAccessibility';
 
 const DEFAULT_ZOOM = 12;
+const CAMERA_PAGE_SIZE = 25;
+
+interface LeafletMapExposed {
+  openCamera(id: string): boolean;
+}
 
 const zoom: Ref<number> = ref(DEFAULT_ZOOM);
 const center: Ref<any|null> = ref(null);
@@ -89,12 +156,31 @@ const searchInput: Ref<string> = ref(''); // For the text input field
 const searchQuery: Ref<string> = ref(''); // For URL and boundaries (persistent)
 const geojson: Ref<GeoJSON.GeoJsonObject | null> = ref(null);
 const shareDialogOpen = ref(false);
+const leafletMap = ref<LeafletMapExposed | null>(null);
+const cameraListOpen = ref(false);
+const cameraPage = ref(1);
 const tilesStore = useTilesStore();
 
 const isIframe = computed(() => window.self !== window.top);
 
 const { fetchVisibleTiles } = tilesStore;
 const alprs = computed(() => tilesStore.allNodes);
+const visibleCameras = computed(() => bounds.value
+  ? filterCamerasInBounds(alprs.value, bounds.value)
+  : []);
+const cameraPageCount = computed(() => Math.max(1, Math.ceil(visibleCameras.value.length / CAMERA_PAGE_SIZE)));
+const paginatedCameras = computed(() => paginateCameras(visibleCameras.value, {
+  page: cameraPage.value,
+  pageSize: CAMERA_PAGE_SIZE,
+}));
+
+watch(visibleCameras, () => {
+  cameraPage.value = 1;
+});
+
+watch(cameraPageCount, (pageCount) => {
+  cameraPage.value = Math.min(cameraPage.value, pageCount);
+});
 
 const router = useRouter();
 const { xs } = useDisplay();
@@ -172,6 +258,12 @@ function goToUserLocation() {
     });
 }
 
+function showCameraOnMap(id: string): void {
+  if (leafletMap.value?.openCamera(id)) {
+    cameraListOpen.value = false;
+  }
+}
+
 function updateBounds(newBounds: any) {
   updateURL();
   
@@ -267,6 +359,72 @@ onMounted(() => {
   z-index: 1000;
 }
 
+.camera-list-panel {
+  box-sizing: border-box;
+  width: min(420px, calc(100vw - 24px));
+  max-height: min(70vh, 640px);
+  overflow-y: auto;
+  padding: 16px;
+  color: rgb(var(--v-theme-on-surface));
+  background: rgb(var(--v-theme-surface));
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
+}
+
+.camera-list-heading {
+  margin: 0;
+  font-size: 1.125rem;
+  line-height: 1.4;
+}
+
+.camera-list-status,
+.camera-list-empty {
+  margin: 8px 0;
+}
+
+.camera-list {
+  display: grid;
+  gap: 10px;
+  margin: 12px 0;
+  padding: 0;
+  list-style: none;
+}
+
+.camera-list-item {
+  display: grid;
+  gap: 8px;
+  padding-block: 10px;
+  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.2);
+}
+
+.camera-list-item .v-btn {
+  justify-self: start;
+}
+
+.camera-list-pagination {
+  position: sticky;
+  bottom: -16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  margin: 8px -8px -16px;
+  padding: 8px 0;
+  background: rgb(var(--v-theme-surface));
+}
+
+@media (max-width: 599px) {
+  .camera-list-panel {
+    max-height: 60vh;
+    padding: 12px;
+  }
+
+  .camera-list-pagination {
+    bottom: -12px;
+    margin-bottom: -12px;
+  }
+}
+
 .map-notif {
   position: absolute;
   text-align: center;