diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js
index 794af776c88e7..7f8e33550770d 100644
--- a/packages/format-library/src/image/index.js
+++ b/packages/format-library/src/image/index.js
@@ -6,8 +6,11 @@ import {
 	SVG,
 	Popover,
 	Button,
-	__experimentalNumberControl as NumberControl,
+	ExternalLink,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalNumberControl as NumberControl,
+	TextareaControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
@@ -17,7 +20,6 @@ import {
 	RichTextToolbarButton,
 	MediaUploadCheck,
 } from '@wordpress/block-editor';
-import { keyboardReturn } from '@wordpress/icons';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -41,8 +43,11 @@ export const image = {
 };
 
 function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
-	const { style } = activeObjectAttributes;
-	const [ width, setWidth ] = useState( style?.replace( /\D/g, '' ) );
+	const { style, alt } = activeObjectAttributes;
+	const width = style?.replace( /\D/g, '' );
+	const [ editedWidth, setEditedWidth ] = useState( width );
+	const [ editedAlt, setEditedAlt ] = useState( alt );
+	const hasChanged = editedWidth !== width || editedAlt !== alt;
 	const popoverAnchor = useAnchor( {
 		editableContentElement: contentRef.current,
 		settings: image,
@@ -64,7 +69,8 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
 						type: name,
 						attributes: {
 							...activeObjectAttributes,
-							style: width ? `width: ${ width }px;` : '',
+							style: width ? `width: ${ editedWidth }px;` : '',
+							alt: editedAlt,
 						},
 					};
 
@@ -76,21 +82,54 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
 					event.preventDefault();
 				} }
 			>
-				<HStack alignment="bottom">
+				<VStack spacing={ 4 }>
 					<NumberControl
+						__next40pxDefaultSize
 						label={ __( 'Width' ) }
-						value={ width }
+						value={ editedWidth }
 						min={ 1 }
-						onChange={ ( newWidth ) => setWidth( newWidth ) }
-						size="__unstable-large"
+						onChange={ ( newWidth ) => {
+							setEditedWidth( newWidth );
+						} }
 					/>
-					<Button
-						icon={ keyboardReturn }
-						label={ __( 'Apply' ) }
-						type="submit"
-						__next40pxDefaultSize
+					<TextareaControl
+						label={ __( 'Alternative text' ) }
+						__nextHasNoMarginBottom
+						value={ editedAlt }
+						onChange={ ( newAlt ) => {
+							setEditedAlt( newAlt );
+						} }
+						help={
+							<>
+								<ExternalLink
+									href={
+										// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+										__(
+											'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+										)
+									}
+								>
+									{ __(
+										'Describe the purpose of the image.'
+									) }
+								</ExternalLink>
+								<br />
+								{ __( 'Leave empty if decorative.' ) }
+							</>
+						}
 					/>
-				</HStack>
+					<HStack justify="right">
+						<Button
+							disabled={ ! hasChanged }
+							accessibleWhenDisabled
+							variant="primary"
+							type="submit"
+							size="compact"
+						>
+							{ __( 'Apply' ) }
+						</Button>
+					</HStack>
+				</VStack>
 			</form>
 		</Popover>
 	);
diff --git a/packages/format-library/src/image/style.scss b/packages/format-library/src/image/style.scss
index 7e9809e52f3bf..1e0b922fdf4c8 100644
--- a/packages/format-library/src/image/style.scss
+++ b/packages/format-library/src/image/style.scss
@@ -2,7 +2,7 @@
 	z-index: z-index(".block-editor-format-toolbar__image-popover");
 
 	.block-editor-format-toolbar__image-container-content {
-		width: 200px;
+		width: 260px;
 		padding: $grid-unit-20;
 	}
 }
diff --git a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
index 15f9d9ea87732..c7826ebf26282 100644
--- a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
+++ b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
@@ -64,13 +64,16 @@ test.describe( 'adding inline tokens', () => {
 		await pageUtils.pressKeys( 'shift+ArrowLeft' );
 
 		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		await page.fill( 'role=spinbutton[name="WIDTH"i]', '20' );
+		await expect(
+			page.locator( 'role=spinbutton[name="Width"i]' )
+		).toBeFocused();
+		await page.fill( 'role=spinbutton[name="Width"i]', '20' );
+		await page.fill( 'role=textbox[name="Alternative text"i]', 'Alt' );
 		await page.click( 'role=button[name="Apply"i]' );
 
 		// Check the content.
 		const contentRegex2 = new RegExp(
-			`a <img class="wp-image-\\d+" style="width:\\s*20px;?" src="[^"]+\\/${ filename }\\.png" alt=""\\/?>`
+			`a <img class="wp-image-\\d+" style="width:\\s*20px;?" src="[^"]+\\/${ filename }\\.png" alt="Alt"\\/?>`
 		);
 
 		await expect.poll( editor.getBlocks ).toMatchObject( [