diff --git a/react/src/components/related-button.tsx b/react/src/components/related-button.tsx
index e82a8974..f163e816 100644
--- a/react/src/components/related-button.tsx
+++ b/react/src/components/related-button.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useId } from 'react'
 
 import './related.css'
 import { article_link } from '../navigation/links'
@@ -69,6 +69,8 @@ function RelatedList(props: { articleType: string, buttonType: string, regions:
         return name
     }
 
+    const checkId = useId()
+
     return (
         <li className="list_of_lists">
             <div style={{ display: 'flex' }}>
@@ -78,6 +80,7 @@ function RelatedList(props: { articleType: string, buttonType: string, regions:
                             name=""
                             setting_key={setting_key}
                             classNameToUse="related_checkbox"
+                            id={checkId}
                         />
                     </div>
                 </div>
@@ -95,7 +98,9 @@ function RelatedList(props: { articleType: string, buttonType: string, regions:
                                             paddingTop: '1pt', fontWeight: 500,
                                         }}
                                     >
-                                        {displayName(relationship_type)}
+                                        <label htmlFor={checkId}>
+                                            {displayName(relationship_type)}
+                                        </label>
                                     </li>
                                     {
                                         regions.map((row, i) => (
diff --git a/react/src/components/sidebar.tsx b/react/src/components/sidebar.tsx
index 0dbdfcdb..bac0d7a1 100644
--- a/react/src/components/sidebar.tsx
+++ b/react/src/components/sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useId } from 'react'
 
 import '../style.css'
 import './sidebar.css'
@@ -101,7 +101,7 @@ export function Sidebar(): ReactNode {
 // type representing a key of SettingsDictionary that have boolean values
 type BooleanSettingKey = keyof { [K in keyof SettingsDictionary as SettingsDictionary[K] extends boolean ? K : never]: boolean }
 
-export function CheckboxSetting<K extends BooleanSettingKey>(props: { name: string, setting_key: K, classNameToUse?: string }): ReactNode {
+export function CheckboxSetting<K extends BooleanSettingKey>(props: { name: string, setting_key: K, classNameToUse?: string, id?: string }): ReactNode {
     const [checked, setChecked] = useSetting(props.setting_key)
 
     return (
@@ -118,21 +118,25 @@ export function CheckboxSetting<K extends BooleanSettingKey>(props: { name: stri
                 }
             }}
             classNameToUse={props.classNameToUse}
+            id={props.id}
         />
     )
 };
 
-export function CheckboxSettingCustom<K extends string>(props: { name: string, setting_key: K, settings: Record<K, boolean>, set_setting: (key: K, value: boolean) => void, classNameToUse?: string }): ReactNode {
+export function CheckboxSettingCustom<K extends string>(props: { name: string, setting_key: K, settings: Record<K, boolean>, set_setting: (key: K, value: boolean) => void, classNameToUse?: string, id?: string }): ReactNode {
     // like CheckboxSetting, but doesn't use useSetting, instead using the callbacks
+    const id = useId()
+    const inputId = props.id ?? id
     return (
         <div className={props.classNameToUse ?? 'checkbox-setting'}>
             <input
+                id={inputId}
                 type="checkbox"
                 checked={props.settings[props.setting_key] || false}
                 onChange={(e) => { props.set_setting(props.setting_key, e.target.checked) }}
                 style={{ accentColor: '#5a7dc3' }}
             />
-            <label>{props.name}</label>
+            <label htmlFor={inputId}>{props.name}</label>
         </div>
     )
 };