diff --git a/react/features/base/ui/components/web/Checkbox.tsx b/react/features/base/ui/components/web/Checkbox.tsx
index 96b532735423..aca78a3a1c29 100644
--- a/react/features/base/ui/components/web/Checkbox.tsx
+++ b/react/features/base/ui/components/web/Checkbox.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { isMobileBrowser } from '../../../environment/utils';
@@ -61,6 +61,10 @@ const useStyles = makeStyles()(theme => {
             cursor: 'not-allowed'
         },
 
+        clickableLabel: {
+            cursor: 'pointer'
+        },
+
         activeArea: {
             display: 'grid',
             placeContent: 'center',
@@ -159,26 +163,64 @@ const Checkbox = ({
 }: ICheckboxProps) => {
     const { classes: styles, cx, theme } = useStyles();
     const isMobile = isMobileBrowser();
+    const labelRef = useRef<HTMLLabelElement>(null);
+
+    const toggleCheckbox = useCallback(() => {
+        labelRef.current?.click();
+    }, [ labelRef ]);
+
+    let inputId = id;
+
+    // Hack the useId hook.
+    // This is used rarely and the entropy is high enough to not worry about duplication.
+    // TODO: When v17->v18 is completed, remove this! Ref: https://github.com/jitsi/jitsi-meet/issues/15709
+    const useId = () => {
+        const alphabet = 'abcdefghijklmnopqrstuvwxyz1234567890';
+
+        let newId = '';
+
+        for (let i = 0; i < 10; i++) {
+            const index = Math.floor(Math.random() * alphabet.length);
+
+            newId += alphabet[index];
+        }
+
+        return newId;
+    };
+
+    if (!inputId) {
+        if (name) {
+            inputId = name;
+        } else {
+            inputId = `checkbox-${useId()}`;
+        }
+    }
 
     return (
-        <label className = { cx(styles.formControl, isMobile && 'is-mobile', className) }>
+        <div className = { cx(styles.formControl, isMobile && 'is-mobile', className) }>
             <div className = { cx(styles.activeArea, isMobile && 'is-mobile', disabled && styles.disabled) }>
                 <input
                     checked = { checked }
                     disabled = { disabled }
-                    id = { id }
+                    id = { inputId }
                     name = { name }
                     onChange = { onChange }
                     type = 'checkbox' />
                 <Icon
                     aria-hidden = { true }
                     className = 'checkmark'
-                    color = { disabled ? theme.palette.checkboxIconDisabled : theme.palette.checkboxIcon }
+                    color = { disabled ? theme.palette.icon03 : theme.palette.icon01 }
+                    onClick = { toggleCheckbox }
                     size = { 18 }
                     src = { IconCheck } />
             </div>
-            <div>{label}</div>
-        </label>
+            <label
+                className = { cx(styles.clickableLabel) }
+                htmlFor = { inputId }
+                ref = { labelRef }>
+                {label}
+            </label>
+        </div>
     );
 };
 
diff --git a/react/features/polls/components/web/PollAnswer.tsx b/react/features/polls/components/web/PollAnswer.tsx
index 094203ca71f9..6b11ddcee34d 100644
--- a/react/features/polls/components/web/PollAnswer.tsx
+++ b/react/features/polls/components/web/PollAnswer.tsx
@@ -19,6 +19,7 @@ const useStyles = makeStyles()(theme => {
             margin: '24px',
             padding: '16px',
             backgroundColor: theme.palette.pollsBackground,
+            border: `1px solid ${theme.palette.contrastBorder02}`,
             borderRadius: '8px',
             wordBreak: 'break-word'
         },
@@ -26,9 +27,6 @@ const useStyles = makeStyles()(theme => {
             cursor: 'pointer',
             float: 'right'
         },
-        header: {
-            marginBottom: '24px'
-        },
         question: {
             ...theme.typography.heading6,
             color: theme.palette.pollsQuestion,
@@ -36,7 +34,8 @@ const useStyles = makeStyles()(theme => {
         },
         creator: {
             ...theme.typography.bodyShortRegular,
-            color: theme.palette.pollsSubtitle
+            color: theme.palette.pollsSubtitle,
+            marginBottom: '12px'
         },
         answerList: {
             listStyleType: 'none',
@@ -76,7 +75,7 @@ const PollAnswer = ({
     const { classes } = useStyles();
 
     return (
-        <div
+        <form
             className = { classes.container }
             id = { `poll-${poll.pollId}` }>
             {
@@ -88,31 +87,27 @@ const PollAnswer = ({
                     src = { IconCloseLarge }
                     tabIndex = { 0 } />
             }
-            <div className = { classes.header }>
-                <div className = { classes.question }>
+            <fieldset className = { classes.answerList }>
+                <legend
+                    className = { classes.question }>
                     { poll.question }
-                </div>
-                <div className = { classes.creator }>
+                </legend>
+                <p className = { classes.creator }>
                     { t('polls.by', { name: creatorName }) }
-                </div>
-            </div>
-            <ul className = { classes.answerList }>
+                </p>
                 {
                     poll.answers.map((answer, index: number) => (
-                        <li
+                        <Checkbox
+                            checked = { checkBoxStates[index] }
                             className = { classes.answer }
-                            key = { index }>
-                            <Checkbox
-                                checked = { checkBoxStates[index] }
-                                disabled = { poll.saved }
-                                id = { `poll-answer-checkbox-${poll.pollId}-${index}` }
-                                key = { index }
-                                label = { answer.name }
-                                onChange = { ev => setCheckbox(index, ev.target.checked) } />
-                        </li>
+                            disabled = { poll.saved }
+                            id = { `poll-answer-checkbox-${poll.pollId}-${index}` }
+                            key = { index }
+                            label = { answer.name }
+                            onChange = { ev => setCheckbox(index, ev.target.checked) } />
                     ))
                 }
-            </ul>
+            </fieldset>
             <div className = { classes.footer } >
                 {
                     pollSaved ? <>
@@ -144,7 +139,7 @@ const PollAnswer = ({
                     </>
                 }
             </div>
-        </div>
+        </form>
     );
 };
 
diff --git a/react/features/polls/components/web/PollsList.tsx b/react/features/polls/components/web/PollsList.tsx
index 24e19827d1d6..733e6bdbca08 100644
--- a/react/features/polls/components/web/PollsList.tsx
+++ b/react/features/polls/components/web/PollsList.tsx
@@ -77,7 +77,7 @@ const PollsList = ({ setCreateMode }: IPollListProps) => {
                         className = { classes.emptyIcon }
                         color = { theme.palette.icon03 }
                         src = { IconMessage } />
-                    <span className = { classes.emptyMessage }>{t('polls.results.empty')}</span>
+                    <p className = { classes.emptyMessage }>{t('polls.results.empty')}</p>
                 </div>
                 : listPolls.map((id, index) => (
                     <PollItem