diff --git a/react/features/authentication/components/web/LoginDialog.tsx b/react/features/authentication/components/web/LoginDialog.tsx
index 35a0f7f15..1d531cafe 100644
--- a/react/features/authentication/components/web/LoginDialog.tsx
+++ b/react/features/authentication/components/web/LoginDialog.tsx
@@ -268,6 +268,7 @@ class LoginDialog extends Component<IProps, IState> {
                 titleKey = { t('dialog.authenticationRequired') }>
                 <Input
                     autoFocus = { true }
+                    id = 'login-dialog-username'
                     label = { t('dialog.user') }
                     name = 'username'
                     onChange = { this._onUsernameChange }
@@ -277,6 +278,7 @@ class LoginDialog extends Component<IProps, IState> {
                 <br />
                 <Input
                     className = 'dialog-bottom-margin'
+                    id = 'login-dialog-password'
                     label = { t('dialog.userPassword') }
                     name = 'password'
                     onChange = { this._onPasswordChange }
diff --git a/react/features/base/ui/components/web/Input.tsx b/react/features/base/ui/components/web/Input.tsx
index cdb48a6a5..8359b9db9 100644
--- a/react/features/base/ui/components/web/Input.tsx
+++ b/react/features/base/ui/components/web/Input.tsx
@@ -15,7 +15,13 @@ interface IProps extends IInputProps {
     bottomLabel?: string;
     className?: string;
     iconClick?: () => void;
-    id?: string;
+
+    /**
+     * The id to set on the input element.
+     * This is required because we need it internally to tie the input to its
+     * info (label, error) so that screen reader users don't get lost.
+     */
+    id: string;
     maxLength?: number;
     maxRows?: number;
     minRows?: number;
@@ -168,7 +174,11 @@ const Input = React.forwardRef<any, IProps>(({
 
     return (
         <div className = { cx(styles.inputContainer, className) }>
-            {label && <span className = { cx(styles.label, isMobile && 'is-mobile') }>{label}</span>}
+            {label && <label
+                className = { cx(styles.label, isMobile && 'is-mobile') }
+                htmlFor = { id } >
+                {label}
+            </label>}
             <div className = { styles.fieldContainer }>
                 {icon && <Icon
                     { ...(iconClick ? { tabIndex: 0 } : {}) }
@@ -184,7 +194,7 @@ const Input = React.forwardRef<any, IProps>(({
                         className = { cx(styles.input, isMobile && 'is-mobile',
                             error && 'error', clearable && styles.clearableInput, icon && 'icon-input') }
                         disabled = { disabled }
-                        { ...(id ? { id } : {}) }
+                        id = { id }
                         maxLength = { maxLength }
                         maxRows = { maxRows }
                         minRows = { minRows }
@@ -198,6 +208,7 @@ const Input = React.forwardRef<any, IProps>(({
                         value = { value } />
                 ) : (
                     <input
+                        aria-describedby = { bottomLabel ? `${id}-description` : undefined }
                         aria-label = { accessibilityLabel }
                         autoComplete = { autoComplete }
                         autoFocus = { autoFocus }
@@ -205,7 +216,7 @@ const Input = React.forwardRef<any, IProps>(({
                             error && 'error', clearable && styles.clearableInput, icon && 'icon-input') }
                         data-testid = { testId }
                         disabled = { disabled }
-                        { ...(id ? { id } : {}) }
+                        id = { id }
                         maxLength = { maxLength }
                         name = { name }
                         onChange = { handleChange }
@@ -225,7 +236,9 @@ const Input = React.forwardRef<any, IProps>(({
                 </button>}
             </div>
             {bottomLabel && (
-                <span className = { cx(styles.bottomLabel, isMobile && 'is-mobile', error && 'error') }>
+                <span
+                    className = { cx(styles.bottomLabel, isMobile && 'is-mobile', error && 'error') }
+                    id = { `${id}-description` }>
                     {bottomLabel}
                 </span>
             )}
diff --git a/react/features/chat/components/web/ChatInput.tsx b/react/features/chat/components/web/ChatInput.tsx
index 2a8b40923..5919c0333 100644
--- a/react/features/chat/components/web/ChatInput.tsx
+++ b/react/features/chat/components/web/ChatInput.tsx
@@ -118,6 +118,7 @@ class ChatInput extends Component<IProps, IState> {
                         className = 'chat-input'
                         icon = { this.props._areSmileysDisabled ? undefined : IconFaceSmile }
                         iconClick = { this._toggleSmileysPanel }
+                        id = 'chat-input-messagebox'
                         maxRows = { 5 }
                         onChange = { this._onMessageChange }
                         onKeyPress = { this._onDetectSubmit }
diff --git a/react/features/display-name/components/web/DisplayNamePrompt.tsx b/react/features/display-name/components/web/DisplayNamePrompt.tsx
index 1bbd5c659..8e8943024 100644
--- a/react/features/display-name/components/web/DisplayNamePrompt.tsx
+++ b/react/features/display-name/components/web/DisplayNamePrompt.tsx
@@ -58,6 +58,7 @@ class DisplayNamePrompt extends AbstractDisplayNamePrompt<IState> {
                 <Input
                     autoFocus = { true }
                     className = 'dialog-bottom-margin'
+                    id = 'dialog-displayName'
                     label = { this.props.t('dialog.enterDisplayName') }
                     name = 'displayName'
                     onChange = { this._onDisplayNameChange }
diff --git a/react/features/embed-meeting/components/EmbedMeetingDialog.tsx b/react/features/embed-meeting/components/EmbedMeetingDialog.tsx
index e5ec41114..5455ab921 100644
--- a/react/features/embed-meeting/components/EmbedMeetingDialog.tsx
+++ b/react/features/embed-meeting/components/EmbedMeetingDialog.tsx
@@ -40,6 +40,7 @@ function EmbedMeeting({ t, url }: IProps) {
             <div className = 'embed-meeting-dialog'>
                 <Input
                     accessibilityLabel = { t('dialog.embedMeeting') }
+                    id = 'embed-meeting-input'
                     readOnly = { true }
                     textarea = { true }
                     value = { getEmbedCode() } />
diff --git a/react/features/gifs/components/web/GifsMenu.tsx b/react/features/gifs/components/web/GifsMenu.tsx
index 8c3580fb8..19ad213ac 100644
--- a/react/features/gifs/components/web/GifsMenu.tsx
+++ b/react/features/gifs/components/web/GifsMenu.tsx
@@ -196,6 +196,7 @@ function GifsMenu() {
             <Input
                 autoFocus = { true }
                 className = { cx(styles.searchField, 'gif-input') }
+                id = 'gif-search-input'
                 onChange = { handleSearchKeyChange }
                 onKeyPress = { onInputKeyPress }
                 placeholder = { t('giphy.search') }
diff --git a/react/features/lobby/components/web/LobbyScreen.js b/react/features/lobby/components/web/LobbyScreen.js
index aac10d270..3bba06a3c 100644
--- a/react/features/lobby/components/web/LobbyScreen.js
+++ b/react/features/lobby/components/web/LobbyScreen.js
@@ -187,6 +187,7 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
         return (
             <Input
                 className = 'prejoin-input'
+                id = 'lobby-name-field'
                 onChange = { this._onChangeDisplayName }
                 placeholder = { t('lobby.nameField') }
                 testId = 'lobby.nameField'
diff --git a/react/features/participants-pane/components/web/MeetingParticipants.tsx b/react/features/participants-pane/components/web/MeetingParticipants.tsx
index 75cced6fe..f73b64929 100644
--- a/react/features/participants-pane/components/web/MeetingParticipants.tsx
+++ b/react/features/participants-pane/components/web/MeetingParticipants.tsx
@@ -131,6 +131,7 @@ function MeetingParticipants({
             <Input
                 className = { styles.search }
                 clearable = { true }
+                id = 'participants-search-input'
                 onChange = { setSearchString }
                 placeholder = { t('participantsPane.search') }
                 value = { searchString } />
diff --git a/react/features/polls/components/web/PollCreate.tsx b/react/features/polls/components/web/PollCreate.tsx
index 84870af9c..a76952875 100644
--- a/react/features/polls/components/web/PollCreate.tsx
+++ b/react/features/polls/components/web/PollCreate.tsx
@@ -191,6 +191,7 @@ const PollCreate = ({
             <div className = { classes.questionContainer }>
                 <Input
                     autoFocus = { true }
+                    id = 'polls-create-input'
                     label = { t('polls.create.pollQuestion') }
                     maxLength = { CHAR_LIMIT }
                     onChange = { setQuestion }
@@ -205,6 +206,7 @@ const PollCreate = ({
                         className = { classes.answer }
                         key = { i }>
                         <Input
+                            id = { `polls-answer-input-${i}` }
                             label = { t('polls.create.pollOption', { index: i + 1 }) }
                             maxLength = { CHAR_LIMIT }
                             onChange = { val => setAnswer(i, val) }
diff --git a/react/features/prejoin/components/web/Prejoin.tsx b/react/features/prejoin/components/web/Prejoin.tsx
index 466c02be0..6679f708a 100644
--- a/react/features/prejoin/components/web/Prejoin.tsx
+++ b/react/features/prejoin/components/web/Prejoin.tsx
@@ -354,6 +354,7 @@ class Prejoin extends Component<IProps, IState> {
                         autoFocus = { true }
                         className = 'prejoin-input'
                         error = { showErrorOnJoin }
+                        id = 'premeeting-name-input'
                         onChange = { _setName }
                         onKeyPress = { _onInputKeyPress }
                         placeholder = { t('dialog.enterDisplayName') }
diff --git a/react/features/recording/components/LiveStream/web/StreamKeyForm.js b/react/features/recording/components/LiveStream/web/StreamKeyForm.js
index 708cd3feb..4398eb3c3 100644
--- a/react/features/recording/components/LiveStream/web/StreamKeyForm.js
+++ b/react/features/recording/components/LiveStream/web/StreamKeyForm.js
@@ -43,6 +43,7 @@ class StreamKeyForm extends AbstractStreamKeyForm<Props> {
             <div className = 'stream-key-form'>
                 <Input
                     autoFocus = { true }
+                    id = 'streamkey-input'
                     label = { t('dialog.streamKey') }
                     name = 'streamId'
                     onChange = { this._onInputChange }
diff --git a/react/features/room-lock/components/PasswordRequiredPrompt.web.tsx b/react/features/room-lock/components/PasswordRequiredPrompt.web.tsx
index 58e042d12..ef990c3d0 100644
--- a/react/features/room-lock/components/PasswordRequiredPrompt.web.tsx
+++ b/react/features/room-lock/components/PasswordRequiredPrompt.web.tsx
@@ -93,6 +93,7 @@ class PasswordRequiredPrompt extends Component<IProps, State> {
                 <Input
                     autoFocus = { true }
                     className = 'dialog-bottom-margin'
+                    id = 'required-password-input'
                     label = { this.props.t('dialog.passwordLabel') }
                     name = 'lockKey'
                     onChange = { this._onPasswordChanged }
diff --git a/react/features/shared-video/components/web/SharedVideoDialog.tsx b/react/features/shared-video/components/web/SharedVideoDialog.tsx
index bcef2e4e2..4ba3f32b5 100644
--- a/react/features/shared-video/components/web/SharedVideoDialog.tsx
+++ b/react/features/shared-video/components/web/SharedVideoDialog.tsx
@@ -86,6 +86,7 @@ class SharedVideoDialog extends AbstractSharedVideoDialog<any> {
                     autoFocus = { true }
                     className = 'dialog-bottom-margin'
                     error = { error }
+                    id = 'shared-video-url-input'
                     label = { t('dialog.videoLink') }
                     name = 'sharedVideoUrl'
                     onChange = { this._onChange }