diff --git a/webapp/src/coretsx.tsx b/webapp/src/coretsx.tsx
index 017aa2690186..59b5e519471c 100644
--- a/webapp/src/coretsx.tsx
+++ b/webapp/src/coretsx.tsx
@@ -181,7 +181,8 @@ export class CoreDialog extends React.Component<core.PromptOptions, CoreDialogSt
                     <>
                         <p>Type '{options.confirmationText}' to confirm:</p>
                         <sui.Input ref="confirmationInput" id="confirmationInput"
-                            ariaLabel={lf("Type your name to confirm")} autoComplete={false}
+                            label={lf("Type your name to confirm")} visuallyHiddenLabel
+                            autoComplete={false}
                             value={this.state.confirmationText || ''} onChange={this.handleConfirmationTextChange}
                             selectOnMount={!mobile} autoFocus={!mobile} />
                     </>
diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index 646e9110cbe7..5b1f1e1deee0 100644
--- a/webapp/src/projects.tsx
+++ b/webapp/src/projects.tsx
@@ -1641,10 +1641,9 @@ export class ExitAndSaveDialog extends data.Component<ISettingsProps, ExitAndSav
                 closeOnDimmerClick closeOnDocumentClick closeOnEscape
             >
                 <div>
-                    <p>{prompt}</p>
                     <div className="ui form">
                         <sui.Input ref="filenameinput" id={"projectNameInput"}
-                            ariaLabel={prompt} autoComplete={false}
+                            label={prompt} labelWrapper="p" autoComplete={false}
                             value={projectName || ''} onChange={this.handleChange} onEnter={this.save}
                             selectOnMount={!mobile} autoFocus={!mobile} />
                     </div>
@@ -1779,10 +1778,9 @@ export class NewProjectDialog extends data.Component<ISettingsProps, NewProjectD
             closeOnDimmerClick closeOnDocumentClick closeOnEscape
         >
             <div>
-                <p>{prompt}</p>
                 <div className="ui form">
                     <sui.Input ref="filenameinput" id={"projectNameInput"}
-                        ariaLabel={prompt} autoComplete={false}
+                        label={prompt} labelWrapper="p" autoComplete={false}
                         value={name || ''} onChange={this.handleTextChange} onEnter={this.save}
                         selectOnMount={!mobile} autoFocus={!mobile} />
                 </div>
diff --git a/webapp/src/sui.tsx b/webapp/src/sui.tsx
index 9faf4e3ca05c..1754b0e033b6 100644
--- a/webapp/src/sui.tsx
+++ b/webapp/src/sui.tsx
@@ -6,7 +6,7 @@ import * as ReactTooltip from 'react-tooltip';
 import * as data from "./data";
 import * as core from "./core";
 import { fireClickOnEnter } from "./util";
-import { focusLastActive } from "../../react-common/components/util";
+import { classList, focusLastActive } from "../../react-common/components/util";
 import { ThemeManager } from "../../react-common/components/theming/themeManager";
 
 export const appElement = document.getElementById('content');
@@ -618,28 +618,42 @@ export function helpIconLink(url: string, title: string) {
 
 export class Field extends data.Component<{
     label?: string;
+    labelWrapper?: React.ElementType;
+    visuallyHidden?: boolean;
     children?: any;
-    ariaLabel?: string;
     htmlFor?: string;
 }, {}> {
     renderCore() {
         return (
             <div className="field">
-                {this.props.label ? <label htmlFor={!this.props.ariaLabel ? this.props.htmlFor : undefined}>{this.props.label}</label> : null}
-                {this.props.ariaLabel && this.props.htmlFor ? (<label htmlFor={this.props.htmlFor} className="accessible-hidden">{this.props.ariaLabel}</label>) : ""}
+                <LabelWrapper
+                    wrapperType={this.props.labelWrapper}
+                >
+                    {this.props.label && this.props.htmlFor && (<label className={classList(this.props.visuallyHidden ? "accessible-hidden" : "")} htmlFor={this.props.htmlFor}>{this.props.label}</label>)}
+                </LabelWrapper>
                 {this.props.children}
             </div>
         );
     }
 }
 
+const LabelWrapper = ({wrapperType, children}: {wrapperType?: React.ElementType, children: React.ReactNode}) => {
+    if (wrapperType) {
+        const Wrapper = wrapperType;
+        return <Wrapper>{children}</Wrapper>
+    }
+    return <>{children}</>
+}
+
 ///////////////////////////////////////////////////////////
 ////////////             Input                /////////////
 ///////////////////////////////////////////////////////////
 
 export interface InputProps {
     label?: string;
+    labelWrapper?: React.ElementType
     inputLabel?: string;
+    visuallyHiddenLabel?: boolean;
     class?: string;
     value?: string;
     error?: string;
@@ -653,7 +667,6 @@ export interface InputProps {
     copy?: boolean;
     selectOnClick?: boolean;
     id?: string;
-    ariaLabel?: string;
     autoFocus?: boolean;
     autoComplete?: boolean;
     selectOnMount?: boolean;
@@ -746,14 +759,14 @@ export class Input extends data.Component<InputProps, InputState> {
 
     renderCore() {
         const p = this.props;
-        const { copy, error, ariaLabel, id, label, inputLabel, lines, autoFocus, placeholder, readOnly, autoComplete } = p;
+        const { copy, error, id, label, labelWrapper, inputLabel, lines, autoFocus, placeholder, readOnly, autoComplete, visuallyHiddenLabel } = p;
         const { value, copied } = this.state;
         const copyBtn = copy && document.queryCommandSupported('copy')
             ? <Button className={`ui right labeled ${copied ? "green" : "primary"} icon button`} text={copied ? lf("Copied!") : lf("Copy")} icon="copy" onClick={this.copy} />
             : null;
 
         return (
-            <Field ariaLabel={ariaLabel} htmlFor={id} label={label}>
+            <Field htmlFor={id} label={label} visuallyHidden={visuallyHiddenLabel} labelWrapper={labelWrapper}>
                 <div className={"ui input" + (p.inputLabel ? " labelled" : "") + (copy ? " action fluid" : "") + (p.disabled ? " disabled" : "")}>
                     {inputLabel ? (<div className="ui label">{inputLabel}</div>) : ""}
                     {!lines || lines == 1 ? <input