diff --git a/src/components/absences/modals/AdminTeacherFields.tsx b/src/components/absences/modals/AdminTeacherFields.tsx
index 628fc872..123ef013 100644
--- a/src/components/absences/modals/AdminTeacherFields.tsx
+++ b/src/components/absences/modals/AdminTeacherFields.tsx
@@ -4,6 +4,7 @@ import {
   FormLabel,
   Text,
 } from '@chakra-ui/react';
+import { useId } from 'react';
 import { SearchDropdown } from './SearchDropdown';
 
 interface AdminTeacherFieldsProps {
@@ -28,14 +29,21 @@ export const AdminTeacherFields: React.FC<AdminTeacherFieldsProps> = ({
   setFormData,
   setErrors,
 }) => {
+  const id = useId();
+
   return (
     <>
       <FormControl isRequired isInvalid={!!errors.absentTeacherId}>
-        <FormLabel htmlFor="absentTeacher" sx={{ display: 'flex' }}>
+        <FormLabel
+          id={'absentTeacherLabel' + id}
+          as="p"
+          sx={{ display: 'flex' }}
+        >
           <Text textStyle="h4">Teacher Absent</Text>
         </FormLabel>
         <SearchDropdown
           id="absentTeacher"
+          ariaLabelledBy={'absentTeacherLabel' + id}
           excludedId={formData.substituteTeacherId}
           defaultValueId={Number(formData.absentTeacherId)}
           onChange={(value) => {
@@ -55,11 +63,16 @@ export const AdminTeacherFields: React.FC<AdminTeacherFieldsProps> = ({
       </FormControl>
 
       <FormControl>
-        <FormLabel htmlFor="substituteTeacher" sx={{ display: 'flex' }}>
+        <FormLabel
+          id={'substituteTeacherLabel' + id}
+          as="p"
+          sx={{ display: 'flex' }}
+        >
           <Text textStyle="h4">Substitute Teacher</Text>
         </FormLabel>
         <SearchDropdown
           id="substituteTeacher"
+          ariaLabelledBy={'substituteTeacherLabel' + id}
           excludedId={formData.absentTeacherId}
           defaultValueId={
             formData.substituteTeacherId
diff --git a/src/components/absences/modals/DateOfAbsence.tsx b/src/components/absences/modals/DateOfAbsence.tsx
index 58fbacd3..2d9631e2 100644
--- a/src/components/absences/modals/DateOfAbsence.tsx
+++ b/src/components/absences/modals/DateOfAbsence.tsx
@@ -9,7 +9,7 @@ import {
   PopoverTrigger,
   Text,
 } from '@chakra-ui/react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, useId } from 'react';
 import MiniCalendar from '../../calendar/MiniCalendar';
 
 interface DateOfAbsenceProps {
@@ -66,9 +66,11 @@ export const DateOfAbsence: React.FC<DateOfAbsenceProps> = ({
     [onDateSelect]
   );
 
+  const id = useId();
+
   return (
     <FormControl isRequired isInvalid={!!error}>
-      <FormLabel sx={{ display: 'flex' }}>
+      <FormLabel as="p" id={'dateOfAbsenceLabel' + id} sx={{ display: 'flex' }}>
         <Text textStyle="h4">{label}</Text>
       </FormLabel>
       <Popover
@@ -80,6 +82,7 @@ export const DateOfAbsence: React.FC<DateOfAbsenceProps> = ({
         <PopoverTrigger>
           <Box>
             <Input
+              aria-labelledby={'dateOfAbsenceLabel' + id}
               value={inputValue}
               onChange={handleInputChange}
               placeholder="YYYY-MM-DD"
diff --git a/src/components/absences/modals/InputDropdown.tsx b/src/components/absences/modals/InputDropdown.tsx
index d6a298f5..a16233c4 100644
--- a/src/components/absences/modals/InputDropdown.tsx
+++ b/src/components/absences/modals/InputDropdown.tsx
@@ -18,6 +18,7 @@ import { useCustomToast } from '../../CustomToast';
 export type Option = { name: string; id: number };
 
 interface InputDropdownProps {
+  ariaLabelledBy: string;
   label: string;
   type: 'location' | 'subject';
   onChange: (value: Option | null) => void;
@@ -25,6 +26,7 @@ interface InputDropdownProps {
 }
 
 export const InputDropdown: React.FC<InputDropdownProps> = ({
+  ariaLabelledBy,
   label,
   type,
   onChange,
@@ -120,6 +122,7 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
             value={selectedOption ? selectedOption.name : ''}
             readOnly
             _focusVisible={{ outline: 'none' }}
+            aria-labelledby={ariaLabelledBy}
           />
           <InputRightElement pointerEvents="none">
             {isOpen ? <IoChevronUp /> : <IoChevronDown />}
diff --git a/src/components/absences/modals/SearchDropdown.tsx b/src/components/absences/modals/SearchDropdown.tsx
index 68070bde..7fb25250 100644
--- a/src/components/absences/modals/SearchDropdown.tsx
+++ b/src/components/absences/modals/SearchDropdown.tsx
@@ -21,6 +21,7 @@ export type Option = { name: string; id: number; profilePicture: string };
 
 interface SearchDropdownProps {
   id: string;
+  ariaLabelledBy: string;
   excludedId?: string;
   defaultValueId?: number;
   onChange: (value: Option | null) => void;
@@ -28,6 +29,7 @@ interface SearchDropdownProps {
 
 export const SearchDropdown: React.FC<SearchDropdownProps> = ({
   id,
+  ariaLabelledBy,
   excludedId,
   defaultValueId,
   onChange,
@@ -174,6 +176,7 @@ export const SearchDropdown: React.FC<SearchDropdownProps> = ({
               id={id}
               name={id}
               ref={inputRef}
+              aria-labelledby={ariaLabelledBy}
               value={searchQuery}
               onChange={isSelected ? undefined : handleSearchChange}
               onClick={() => {
diff --git a/src/components/absences/modals/declare/DeclareAbsenceForm.tsx b/src/components/absences/modals/declare/DeclareAbsenceForm.tsx
index c69bd6c3..aa727c87 100644
--- a/src/components/absences/modals/declare/DeclareAbsenceForm.tsx
+++ b/src/components/absences/modals/declare/DeclareAbsenceForm.tsx
@@ -14,7 +14,7 @@ import { Absence, Prisma } from '@prisma/client';
 import { formatFullDate } from '@utils/dates';
 import { submitAbsence } from '@utils/submitAbsence';
 import { validateAbsenceForm } from '@utils/validateAbsenceForm';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { useCustomToast } from '../../../CustomToast';
 import { FileUpload } from '../../FileUpload';
 import { AdminTeacherFields } from '../AdminTeacherFields';
@@ -317,6 +317,8 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
   const isUrgent =
     (selectedDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24) <= 7;
 
+  const id = useId();
+
   return (
     <Box
       as="form"
@@ -337,10 +339,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
         )}
 
         <FormControl isRequired isInvalid={!!errors.subjectId}>
-          <FormLabel sx={{ display: 'flex' }}>
+          <FormLabel id={'subjectLabel' + id} as="p" sx={{ display: 'flex' }}>
             <Text textStyle="h4">Subject</Text>
           </FormLabel>
           <InputDropdown
+            ariaLabelledBy={'subjectLabel' + id}
             label="subject"
             type="subject"
             onChange={(value) => {
@@ -360,10 +363,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
         </FormControl>
 
         <FormControl isRequired isInvalid={!!errors.locationId}>
-          <FormLabel sx={{ display: 'flex' }}>
+          <FormLabel id={'locationLabel' + id} as="p" sx={{ display: 'flex' }}>
             <Text textStyle="h4">Location</Text>
           </FormLabel>
           <InputDropdown
+            ariaLabelledBy={'locationLabel' + id}
             label="location"
             type="location"
             onChange={(value) => {
@@ -381,11 +385,13 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
           />
           <FormErrorMessage>{errors.locationId}</FormErrorMessage>
         </FormControl>
+
         <FormControl>
-          <FormLabel htmlFor="roomNumber" sx={{ display: 'flex' }}>
+          <FormLabel id={'roomNumberLabel' + id} sx={{ display: 'flex' }}>
             <Text textStyle="h4">Room Number</Text>
           </FormLabel>
           <Input
+            aria-labelledby={'roomNumberLabel' + id}
             id="roomNumber"
             name="roomNumber"
             placeholder="e.g. 2131"
@@ -393,6 +399,7 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
             onChange={handleChange}
           />
         </FormControl>
+
         <DateOfAbsence
           dateValue={dateValue}
           onDateSelect={handleDateSelect}
@@ -400,10 +407,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
         />
 
         <FormControl isRequired isInvalid={!!errors.reasonOfAbsence}>
-          <FormLabel htmlFor="reasonOfAbsence" sx={{ display: 'flex' }}>
+          <FormLabel id={'reasonOfAbsenceLabel' + id} sx={{ display: 'flex' }}>
             <Text textStyle="h4">Reason of Absence</Text>
           </FormLabel>
           <Textarea
+            aria-labelledby={'reasonOfAbsenceLabel' + id}
             id="reasonOfAbsence"
             name="reasonOfAbsence"
             placeholder="Only visible to admin"
@@ -422,10 +430,11 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
         </FormControl>
 
         <FormControl>
-          <FormLabel htmlFor="notes" sx={{ display: 'flex' }}>
+          <FormLabel id={'notesLabel' + id} sx={{ display: 'flex' }}>
             <Text textStyle="h4">Notes</Text>
           </FormLabel>
           <Textarea
+            aria-labelledby={'notesLabel' + id}
             id="notes"
             name="notes"
             placeholder="Visible to everyone"
diff --git a/src/components/absences/modals/edit/EditAbsenceForm.tsx b/src/components/absences/modals/edit/EditAbsenceForm.tsx
index 8797509e..2b59d80a 100644
--- a/src/components/absences/modals/edit/EditAbsenceForm.tsx
+++ b/src/components/absences/modals/edit/EditAbsenceForm.tsx
@@ -17,7 +17,7 @@ import { formatFullDate } from '@utils/dates';
 import { submitAbsence } from '@utils/submitAbsence';
 import { EventDetails } from '@utils/types';
 import { validateAbsenceForm } from '@utils/validateAbsenceForm';
-import { useState } from 'react';
+import { useState, useId } from 'react';
 import { IoMailOutline } from 'react-icons/io5';
 import { useCustomToast } from '../../../CustomToast';
 import { FileUpload } from '../../FileUpload';
@@ -282,6 +282,8 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
     }
   };
 
+  const id = useId();
+
   return (
     <Box
       as="form"
@@ -300,10 +302,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
         )}
 
         <FormControl isRequired isInvalid={!!errors.subjectId}>
-          <FormLabel sx={{ display: 'flex' }}>
+          <FormLabel id={'subjectLabel' + id} as="p" sx={{ display: 'flex' }}>
             <Text textStyle="h4">Subject</Text>
           </FormLabel>
           <InputDropdown
+            ariaLabelledBy={'subjectLabel' + id}
             label="subject"
             type="subject"
             onChange={(value) => {
@@ -324,10 +327,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
         </FormControl>
 
         <FormControl isRequired isInvalid={!!errors.locationId}>
-          <FormLabel sx={{ display: 'flex' }}>
+          <FormLabel id={'locationLabel' + id} as="p" sx={{ display: 'flex' }}>
             <Text textStyle="h4">Location</Text>
           </FormLabel>
           <InputDropdown
+            ariaLabelledBy={'locationLabel' + id}
             label="location"
             type="location"
             onChange={(value) => {
@@ -348,10 +352,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
         </FormControl>
 
         <FormControl>
-          <FormLabel htmlFor="roomNumber" sx={{ display: 'flex' }}>
+          <FormLabel id={'roomNumberLabel' + id} sx={{ display: 'flex' }}>
             <Text textStyle="h4">Room Number</Text>
           </FormLabel>
           <Input
+            aria-labelledby={'roomNumberLabel' + id}
             id="roomNumber"
             name="roomNumber"
             placeholder="e.g. 2131"
@@ -367,10 +372,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
         />
 
         <FormControl isRequired isInvalid={!!errors.reasonOfAbsence}>
-          <FormLabel htmlFor="reasonOfAbsence" sx={{ display: 'flex' }}>
+          <FormLabel id={'reasonOfAbsenceLabel' + id} sx={{ display: 'flex' }}>
             <Text textStyle="h4">Reason of Absence</Text>
           </FormLabel>
           <Textarea
+            aria-labelledby={'reasonOfAbsenceLabel' + id}
             id="reasonOfAbsence"
             name="reasonOfAbsence"
             placeholder="Only visible to admin"
@@ -393,10 +399,11 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
         </FormControl>
 
         <FormControl>
-          <FormLabel htmlFor="notes" sx={{ display: 'flex' }}>
+          <FormLabel id={'notesLabel' + id} sx={{ display: 'flex' }}>
             <Text textStyle="h4">Notes</Text>
           </FormLabel>
           <Textarea
+            aria-labelledby={'notesLabel' + id}
             id="notes"
             name="notes"
             placeholder="Visible to everyone"