An In-depth Introduction to the WordPress Block Editor for Screen Reader Users (Part Two)

Introduction

Welcome to the WordPress Block Editor Tutorial Part Two of a Series!

This tutorial will cover many different concepts and topics when it comes to using the WordPress Block Editor. However, the tutorial will primarily focus on using the block editor in conjunction with a keyboard and screen reader.

Acknowledgements

Special thanks go to the following contributors:

• Amanda Carson for co-authoring and proof reading parts of this tutorial.
• David Edick for setting Up and hosting the Zoom conference for us to demonstrate the concepts detailed in this series as well as recording and editing the user zoom sessions.
• Jason Castonguay for assisting in researching and testing of the Mac Keystrokes so this information can be Updated.

Topics and Concepts that will be covered:

• What are blocks in WordPress
• Comments on editor Accessibility
• Tools used for tutorial
• Frequently used keyboard shortcuts
• Inserting, Deleting and Changing Layout of Blocks
• Inserting, Deleting, Editing and formatting Text
• Inserting, editing and Deleting Hyperlinks
• Paragraph Block
• Heading Block
• List Block
• List Item Block

What Are Blocks In WordPress?

Blocks are the components for adding content in the new WordPress editor. They are used to transform a single document into a collection of discrete elements, each of which has an explicit, easy-to-change structure. Block structure and settings are separate from the settings for the entire document, and block settings and Post/Page settings have their own distinct parts within the editor’s user interface.

Comments on editor accessibility

Although there may be additional keystrokes available, this document provides enough to get you started.

As we find more keystrokes and test with them, we will of course keep editing and updating this document, so please stay tuned for future revisions.

The keystrokes we have documented here were not easy to find. Most are not documented within the editor, and there is no link to any outside documentation to find further information. We made an educated guess that “richtext” implied that the new WordPress editor is supposed to be something like Microsoft’s WordPad. We looked up the keystrokes for that editor, tested them with the new WordPress editor, and our educated guess turned out to be correct.

We went with Wordpad and not Microsoft Word because while Wordpad is a richtext application in the technical sense, Microsoft Word is not. Furthermore, it is an unattainable goal if the new WordPress editor lives in the browser. Not all the Wordpad keystrokes work, so we have documented the ones that do.

Individuals using assistive technology that depend strictly on keyboards or keyboard simulation will need to experiment to understand fully what is available to them.

Tools used for tutorial

• WordPress 6.8using the twenty twenty-five (2025) theme
• Browsers: Mozilla Firefox, Google Chrome, Safari and Microsoft Edge; all browsers kept up to date.
• Screen readers: JAWS 2025, NVDA 2024 and Microsoft Narrator (Windows 11) as well as VoiceOver (MacOS Sequoia 15)

Frequently used keyboard shortcuts

Notes:

• If a shortcut requires two or more keys at the same time, the keys are separated by a plus sign (+).
• The shortcuts in this article refer to the U.S. keyboard layout. Keys for other layouts might not correspond exactly to the keys on a U.S. keyboard.

Editing Shortcuts

Move around in a document/block editor using the keyboard

Edit and move text and graphics

Delete text and graphics

Specific key strokes for the block editor

Paragraph Block

Start with the foundation block of all narative – the paragraph block.

Inserting a Block

When starting a new page or post, a dialog with the first new post or page appears welcoming you to the block editor. Move to the “close this dialog button” and press either spacebar or enter to dismiss this dialog.

After typing the text for your title a placeholder for a new block is inserted into the content area which prompts the user to start typing or press the slash (/) key to choose a block type. If using a screen reader, you will need to invoke forms or edit mode before you start typing or use the slash key. If this placeholder does not appear then you can simply press the Keystroke of ALT + CTRL + Y (Mac: Command + Option + Y) to insert this placeholder and then use the previous instructions.</p

Choosing a block

With focus on the block placeholder, either start typing to insert a paragraph block or press the slash (/) key to choose a block. You will more than likely see a list of approximately 8 to 9 items in this list that is presented. This list is either the most commonly or most recently used blocks chosen. Please note that screen reader users will need to be in forms or edit mode.

Use your UP and DOWN ARROW keys to navigate this list until you get to the item you desire and then press the enter key. Do not attempt to use first letter navigation in this list as it does not work, only the ARROW keys. The reason first letter navigation does not work in this list is because if you start typing the editor assumes you want the paragraph block.

Configuration of the Inserted Block

Now that a block has been chosen and inserted, let us discuss configuring the block starting with the toolbar.

The following list describes the toolbar moving from left to right.

Block Toolbar – Alt + F10 (Mac: Option + F10)

• Paragraph Button Menu – Change block type or Style
• Move Up
• Move Down
• Align Text Button Menu
  • Align Text – Left
  • Align Text – Center
  • Align Text – Right
• Bold Toggle Button
• Italic Toggle Button
• Link Toggle Button – has popup
• More Button Menu
  • Footnote
  • Highlight
  • Inline code
  • Inline Image
  • Keyboard input
  • Language
  • Strikethrough
  • Subscript
  • Superscript
• Options Button Menu
  • Copy – CTRL + C (Mac: Command + C)
  • Cut – CTRL + X (Mac: Command + X)
  • Duplicate – CTRL + Shift + D (Mac: Command + SHIFT + D)
  • Add before – Alt + CTRL + T (Mac: Command + Option + T)
  • Add after – Alt + CTRL + Y (Mac: Command + Option + Y)
  • Copy styles
  • Paste styles
  • Group
  • Lock Submenu – dialog with 3 option
    • Lock All
    • Lock Movement
    • Lock Removal
  • Rename Submenu – dialog allows user to rename the block
  • Create Patterns Submenu – dialog allowing advanced CSS options
  • Edit as HTML
  • Delete – Alt + Shift + Z (Mac: CTRL + Option + SHIFT + Z)

Change Block Type or Style

At the time of the writing of this document, this feature was beyond the scope of the basics desire to convey to any user. In a future part of these tutorial files we will write a part on CSS and document this feature.

Changing your block layout

As you continue to compose your page or post, the blocks are enumerated 1 of 10, 2 of 10, and so on throughout the hierarchy.

To move your block UP or DOWN in the hierarchy, first make sure you are focused on the block, make sure you are in forms or edit mode and then press ALT + F10 (Mac: Option + F10)to bring UP the block editing toolbar.

Use your RIGHT and LEFT ARROW keys to navigate this toolbar. As you press the RIGHT ARROW keys, the first two (2) options on this toolbar are the buttons to move either UP or DOWN one (1) block at a time. Choose the appropriate button and press the spacebar or enter key to maneuver the block into the position of the hierarchy you desire.

You can also use the keystroke of ALT + CTRL + SHIFT + T (Mac: Command + Option + SHIFT + T) to move your block UP one position in the hierarchy, as well as press the ALT + CTRL + SHIFT + Y (Mac: Command + Option + SHIFT + Y) to move your block DOWN one position in the hierarchy.

Changing Block Alignment

To change the alignment of the block, press the keystroke of ALT + F10 (Mac: Option + F10) then use the right arrow to move to the button for alignment. To activate this button press either your Enter key or Spacebar. You will find three (3) options for alignment: left, center, and right. Simply choose the alignment and either press the Enter key or spacebar to select your choice.

Formatting Text

Text can be formatted with three (3) possible attributes which are: bold, italic and underline. However, underlining should be properly applied by using external CSS but can be done with a keystroke.

To use the block toolbar simply select the text you wish to format and then simply press the keystroke of ALT + F10 (Mac: Option + F10) TO ACTIVATE THE BLOCK TOOLBAR. Press the right arrow key to navigate to the bold or italic button and press either the Enter key or spacebar to activate the appropriate button.

Formatting can also be accomplished with keystrokes. Simply select the text that you wish to change and press the corresponding keystroke for the attribute you want to format.

• Bold – CTRL + B (Mac: Command + B)
• Italic – CTRL + I (Mac: Command + I)
• Underline – CTRL + U (Mac: Command + U)

Inserting, Editing and Deleting Hyperlinks

This document is going to use the list block and assume that you have a list of three (3) items created.

For example, my list looks like the following:

• Visit John
• Call John
• Email John

Since this list is now established, let us turn the text of the list into useable hyperlinks.

First select the list block, and if you are using a screen reader turn on your forms or edit mode. Use your navigation keys to move to the first part of the text and using text selection keystrokes, select “Visit John.” Tip: be sure to only select the text, because if you accidentally select the blank at the END of the first item, the first two (2) items in the list are both incorporated into a single hyperlink.

When using the toolbar simply press the keystroke of ALT + F10 (Mac: Option + F10) then right arrow to the button to create a link and either press the Enter key or the spacebar to activate this choice. Type the following in this field: https://www.customerservant.com and then you should hear that one (1) option has been found. Tab to the submit button and then press your spacebar or enter key. You should hear a message stating that a link has been inserted.

You can also use a keystroke other than the toolbar once your text is selected, simply press the keystroke of CTRL + K (Mac: Command + K) and the insert link dialog appears prompting for a URL.

That is how to insert a hyperlink using the http or https protocol, but what if you wish to use another protocol to insert a hyperlink?

Let us select the second list item text remembering to only select the text and not the blank character at the END of the line. When you have this selection made, then press the keystroke of CTRL + K (Mac: Command + K) and in the edit field type tel://8005551212 and you should hear that one (1) item has been found. Tab to the submit button and press either your spacebar or the enter key. You should hear a message that the link has been inserted.

For the last list item, again select the text to become a link being careful not to get the blank character at the END of the line. Press the keystroke of CTRL + K (Mac: Command + K) and then type mailto:john@jcarson.wtf into the edit field and you should hear a message stating one (1) item has been found. Tab to the submit button and either press your spacebar or the enter key and you should hear a message stating that the link has been inserted.

It is now time to test your links to make sure they do what you intended to do.

Note: We used three (3) examples to show how to insert hyperlinks using different protocols just so you do not have to experiment to figure out these procedures.

Editing and Removing a hyperlink

Editing or removing a hyperlink can be done by using the insert link dialog. You can get to this dialog one of two ways. Either by using the toolbar with ALT + F10 (Mac: Option + F10) and then using the right arrow to navigate to the link button or you can use the keystroke of CTRL + K (Mac: Command + K). Keep in mind that the link text will need to be selected prior to using either of these methods.

The dialog that appears will have three (3) buttons to either edit, copy or remove the hyperlink.

To remove a hyperlink is just as easy as inserting one by using a keystroke, just select the text that is already a hyperlink using the cautions already mentioned in this tutorial and press the keystroke of CTRL + SHIFT + K (Mac: Command + SHIFT + K) and you should hear a message indicating that the hyperlink has now been removed.

Copy or Move a Block

Copying a block uses the standard Windows keystroke of CTRL + C (Mac: Command + C), which is useful for when your block is setUP and formatted and you wish to share between other pages or posts. You can also move a block by using CTRL + X (Mac: Command + X). Once you have either cut or copied the block you desire to manipulate press the keystroke CTRL + V (Mac: Command + V) to paste the block in the position of the location where you would like it to appear.

Duplicate a Block

You can also duplicate a block by pressing CTRL + SHIFT + D (Mac: Command + SHIFT + D). This is useful if you have a block already formatted and want to duplicate this block along with its information in another location in your pages or posts.

Add Block before or After

If you are editing an existing page or post that already has blocks in the content area, you can add a block either before or after a selected block in the hierarchy. To add a block before the selected block press ALT + CTRL + T (Mac: Command + Option + T) and to add a block after the selected block press ALT + CTRL + Y (Mac: Command + Option + Y). Screen reader users will need to be in forms or edit mode.

Deleting a block

To delete a block, make sure that your focus is on the block you wish to delete, and in forms or edit mode and then press the keystroke ALT + SHIFT + Z (Mac: CTRL + Option + SHIFT + Z). Your block will be deleted.

There is a second option for you to explore in deleting a block. Press ALT + F10 (Mac: Option + F10) to bring UP the toolbar, then use the RIGHT ARROW to move to the “Options button” and press either the spacebar or enter key to drop DOWN a list of items, then DOWN ARROW to the option for “remove/delete block” and press the enter key on this item and the block will be deleted.

Furthermore, you can press CTRL + A (Mac: Command + A) twice quickly to select all the blocks in the content area and press either the backspace or the delete key to get rid of all the blocks in the content area. You want to use caution when using this method, as it may not give you the result that you are looking for.

Block – Configuration

Styles

• Default
• Display
• Subtitle
• Annotation

Color

• Color Options
• Text
• Background

Topography

• Topography Options
• Font size
• Size
• set custome size

Font size – group of radio buttons

• Small
• Medium
• Large
• Extra Large
• Extra Extra Large

Dimensions

• Show Padding
• Show Margins

Border

• Show Border
• Show Radius

Advanced

• HTML Anchor
• Additional CSS Class
• Skip to the selected block

Heading Block

Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.

Inserting a Block

When starting a new page or post, a dialog with the first new post or page appears welcoming you to the block editor. Move to the “close this dialog button” and press either spacebar or enter to dismiss this dialog.

After typing the text for your title a placeholder for a new block is inserted into the content area which prompts the user to start typing or press the slash (/) key to choose a block type. If using a screen reader, you will need to invoke forms or edit mode before you start typing or use the slash key. If this placeholder does not appear then you can simply press the Keystroke of ALT + CTRL + Y (Mac: Command + Option + Y) to insert this placeholder and then use the previous instructions.</p

Choosing a block

With focus on the block placeholder, either start typing to insert a paragraph block or press the slash (/) key to choose a block. You will more than likely see a list of approximately 8 to 9 items in this list that is presented. This list is either the most commonly or most recently used blocks chosen. Please note that screen reader users will need to be in forms or edit mode.

Use your UP and DOWN ARROW keys to navigate this list until you get to the item you desire and then press the enter key. Do not attempt to use first letter navigation in this list as it does not work, only the ARROW keys. The reason first letter navigation does not work in this list is because if you start typing the editor assumes you want the paragraph block.

Configuration of the Inserted Block

Now that a block has been chosen and inserted, let us discuss configuring the block starting with the toolbar.

The following list describes the toolbar moving from left to right.

Block Toolbar – Alt + F10 (Mac: Option + F10)

• Heading Button Menu – Change block type or Style
• Move Up
• Move Down
• Align
• None
• Wide Width
• Full Width
• H1
• H2
• H3
• H4
• H5
• H6
• Align Text Button Menu
  • Align Text – Left
  • Align Text – Center
  • Align Text – Right
• Bold Toggle Button
• Italic Toggle Button
• Link Toggle Button – has popup
• More Button Menu
  • Footnote
  • Highlight
  • Inline code
  • Inline Image
  • Keyboard input
  • Language
  • Strikethrough
  • Subscript
  • Superscript
• Options Button Menu
  • Copy – CTRL + C (Mac: Command + C)
  • Cut – CTRL + X (Mac: Command + X)
  • Duplicate – CTRL + Shift + D (Mac: Command + SHIFT + D)
  • Add before – Alt + CTRL + T (Mac: Command + Option + T)
  • Add after – Alt + CTRL + Y (Mac: Command + Option + Y)
  • Copy styles
  • Paste styles
  • Group
  • Lock Submenu – dialog with 3 option
    • Lock All
    • Lock Movement
    • Lock Removal
  • Rename Submenu – dialog allows user to rename the block
  • Create Patterns Submenu – dialog allowing advanced CSS options
  • Edit as HTML
  • Delete – Alt + Shift + Z (Mac: CTRL + Option + SHIFT + Z)

Change Block Type or Style

At the time of the writing of this document, this feature was beyond the scope of the basics desire to convey to any user. In a future part of these tutorial files we will write a part on CSS and document this feature.

Changing your block layout

As you continue to compose your page or post, the blocks are enumerated 1 of 10, 2 of 10, and so on throughout the hierarchy.

To move your block UP or DOWN in the hierarchy, first make sure you are focused on the block, make sure you are in forms or edit mode and then press ALT + F10 (Mac: Option + F10)to bring UP the block editing toolbar.

Use your RIGHT and LEFT ARROW keys to navigate this toolbar. As you press the RIGHT ARROW keys, the first two (2) options on this toolbar are the buttons to move either UP or DOWN one (1) block at a time. Choose the appropriate button and press the spacebar or enter key to maneuver the block into the position of the hierarchy you desire.

You can also use the keystroke of ALT + CTRL + SHIFT + T (Mac: Command + Option + SHIFT + T) to move your block UP one position in the hierarchy, as well as press the ALT + CTRL + SHIFT + Y (Mac: Command + Option + SHIFT + Y) to move your block DOWN one position in the hierarchy.

Changing Block Alignment

To change the alignment of the block, press the keystroke of ALT + F10 (Mac: Option + F10) then use the right arrow to move to the button for alignment. To activate this button press either your Enter key or Spacebar. You will find three (3) options for alignment: left, center, and right. Simply choose the alignment and either press the Enter key or spacebar to select your choice.

Formatting Text

Text can be formatted with three (3) possible attributes which are: bold, italic and underline. However, underlining should be properly applied by using external CSS but can be done with a keystroke.

To use the block toolbar simply select the text you wish to format and then simply press the keystroke of ALT + F10 (Mac: Option + F10) TO ACTIVATE THE BLOCK TOOLBAR. Press the right arrow key to navigate to the bold or italic button and press either the Enter key or spacebar to activate the appropriate button.

Formatting can also be accomplished with keystrokes. Simply select the text that you wish to change and press the corresponding keystroke for the attribute you want to format.

• Bold – CTRL + B (Mac: Command + B)
• Italic – CTRL + I (Mac: Command + I)
• Underline – CTRL + U (Mac: Command + U)

Inserting, Editing and Deleting Hyperlinks

This document is going to use the list block and assume that you have a list of three (3) items created.

For example, my list looks like the following:

• Visit John
• Call John
• Email John

Since this list is now established, let us turn the text of the list into useable hyperlinks.

First select the list block, and if you are using a screen reader turn on your forms or edit mode. Use your navigation keys to move to the first part of the text and using text selection keystrokes, select “Visit John.” Tip: be sure to only select the text, because if you accidentally select the blank at the END of the first item, the first two (2) items in the list are both incorporated into a single hyperlink.

When using the toolbar simply press the keystroke of ALT + F10 (Mac: Option + F10) then right arrow to the button to create a link and either press the Enter key or the spacebar to activate this choice. Type the following in this field: https://www.customerservant.com and then you should hear that one (1) option has been found. Tab to the submit button and then press your spacebar or enter key. You should hear a message stating that a link has been inserted.

You can also use a keystroke other than the toolbar once your text is selected, simply press the keystroke of CTRL + K (Mac: Command + K) and the insert link dialog appears prompting for a URL.

That is how to insert a hyperlink using the http or https protocol, but what if you wish to use another protocol to insert a hyperlink?

Let us select the second list item text remembering to only select the text and not the blank character at the END of the line. When you have this selection made, then press the keystroke of CTRL + K (Mac: Command + K) and in the edit field type tel://8005551212 and you should hear that one (1) item has been found. Tab to the submit button and press either your spacebar or the enter key. You should hear a message that the link has been inserted.

For the last list item, again select the text to become a link being careful not to get the blank character at the END of the line. Press the keystroke of CTRL + K (Mac: Command + K) and then type mailto:john@jcarson.wtf into the edit field and you should hear a message stating one (1) item has been found. Tab to the submit button and either press your spacebar or the enter key and you should hear a message stating that the link has been inserted.

It is now time to test your links to make sure they do what you intended to do.

Note: We used three (3) examples to show how to insert hyperlinks using different protocols just so you do not have to experiment to figure out these procedures.

Editing and Removing a hyperlink

Editing or removing a hyperlink can be done by using the insert link dialog. You can get to this dialog one of two ways. Either by using the toolbar with ALT + F10 (Mac: Option + F10) and then using the right arrow to navigate to the link button or you can use the keystroke of CTRL + K (Mac: Command + K). Keep in mind that the link text will need to be selected prior to using either of these methods.

The dialog that appears will have three (3) buttons to either edit, copy or remove the hyperlink.

To remove a hyperlink is just as easy as inserting one by using a keystroke, just select the text that is already a hyperlink using the cautions already mentioned in this tutorial and press the keystroke of CTRL + SHIFT + K (Mac: Command + SHIFT + K) and you should hear a message indicating that the hyperlink has now been removed.

Copy or Move a Block

Copying a block uses the standard Windows keystroke of CTRL + C (Mac: Command + C), which is useful for when your block is setUP and formatted and you wish to share between other pages or posts. You can also move a block by using CTRL + X (Mac: Command + X). Once you have either cut or copied the block you desire to manipulate press the keystroke CTRL + V (Mac: Command + V) to paste the block in the position of the location where you would like it to appear.

Duplicate a Block

You can also duplicate a block by pressing CTRL + SHIFT + D (Mac: Command + SHIFT + D). This is useful if you have a block already formatted and want to duplicate this block along with its information in another location in your pages or posts.

Add Block before or After

If you are editing an existing page or post that already has blocks in the content area, you can add a block either before or after a selected block in the hierarchy. To add a block before the selected block press ALT + CTRL + T (Mac: Command + Option + T) and to add a block after the selected block press ALT + CTRL + Y (Mac: Command + Option + Y). Screen reader users will need to be in forms or edit mode.

Deleting a block

To delete a block, make sure that your focus is on the block you wish to delete, and in forms or edit mode and then press the keystroke ALT + SHIFT + Z (Mac: CTRL + Option + SHIFT + Z). Your block will be deleted.

There is a second option for you to explore in deleting a block. Press ALT + F10 (Mac: Option + F10) to bring UP the toolbar, then use the RIGHT ARROW to move to the “Options button” and press either the spacebar or enter key to drop DOWN a list of items, then DOWN ARROW to the option for “remove/delete block” and press the enter key on this item and the block will be deleted.

Furthermore, you can press CTRL + A (Mac: Command + A) twice quickly to select all the blocks in the content area and press either the backspace or the delete key to get rid of all the blocks in the content area. You want to use caution when using this method, as it may not give you the result that you are looking for.

Block – Configuration

Styles

• Default
• Display
• Subtitle
• Annotation

Color

• Color Options
• Text
• Background

Topography

• Topography Options
• Font size
• Size
• set custome size

Font size – group of radio buttons

• Small
• Medium
• Large
• Extra Large
• Extra Extra Large

Dimensions

• Show Padding
• Show Margins

Border

• Show Border
• Show Radius

Advanced

• HTML Anchor
• Additional CSS Class
• Skip to the selected block

List Block

An organized collection of items displayed in a specific order.

Inserting a Block

When starting a new page or post, a dialog with the first new post or page appears welcoming you to the block editor. Move to the “close this dialog button” and press either spacebar or enter to dismiss this dialog.

After typing the text for your title a placeholder for a new block is inserted into the content area which prompts the user to start typing or press the slash (/) key to choose a block type. If using a screen reader, you will need to invoke forms or edit mode before you start typing or use the slash key. If this placeholder does not appear then you can simply press the Keystroke of ALT + CTRL + Y (Mac: Command + Option + Y) to insert this placeholder and then use the previous instructions.</p

Choosing a block

With focus on the block placeholder, either start typing to insert a paragraph block or press the slash (/) key to choose a block. You will more than likely see a list of approximately 8 to 9 items in this list that is presented. This list is either the most commonly or most recently used blocks chosen. Please note that screen reader users will need to be in forms or edit mode.

Use your UP and DOWN ARROW keys to navigate this list until you get to the item you desire and then press the enter key. Do not attempt to use first letter navigation in this list as it does not work, only the ARROW keys. The reason first letter navigation does not work in this list is because if you start typing the editor assumes you want the paragraph block.

Configuration of the Inserted Block

Now that a block has been chosen and inserted, let us discuss configuring the block starting with the toolbar.

The following list describes the toolbar moving from left to right.

Block Toolbar – Alt + F10 (Mac: Option + F10)

• List Button Menu – Change block type or Style
• Unordered List
• Ordered List
• Outdent
• Options Button Menu
  • Copy – CTRL + C (Mac: Command + C)
  • Cut – CTRL + X (Mac: Command + X)
  • Duplicate – CTRL + Shift + D (Mac: Command + SHIFT + D)
  • Add before – Alt + CTRL + T (Mac: Command + Option + T)
  • Add after – Alt + CTRL + Y (Mac: Command + Option + Y)
  • Copy styles
  • Paste styles
  • Group
  • Lock Submenu – dialog with 3 option
    • Lock All
    • Lock Movement
    • Lock Removal
  • Rename Submenu – dialog allows user to rename the block
  • Create Patterns Submenu – dialog allowing advanced CSS options
  • Edit as HTML
  • Delete – Alt + Shift + Z (Mac: CTRL + Option + SHIFT + Z)

Change Block Type or Style

At the time of the writing of this document, this feature was beyond the scope of the basics desire to convey to any user. In a future part of these tutorial files we will write a part on CSS and document this feature.

Changing your block layout

As you continue to compose your page or post, the blocks are enumerated 1 of 10, 2 of 10, and so on throughout the hierarchy.

To move your block UP or DOWN in the hierarchy, first make sure you are focused on the block, make sure you are in forms or edit mode and then press ALT + F10 (Mac: Option + F10)to bring UP the block editing toolbar.

Use your RIGHT and LEFT ARROW keys to navigate this toolbar. As you press the RIGHT ARROW keys, the first two (2) options on this toolbar are the buttons to move either UP or DOWN one (1) block at a time. Choose the appropriate button and press the spacebar or enter key to maneuver the block into the position of the hierarchy you desire.

You can also use the keystroke of ALT + CTRL + SHIFT + T (Mac: Command + Option + SHIFT + T) to move your block UP one position in the hierarchy, as well as press the ALT + CTRL + SHIFT + Y (Mac: Command + Option + SHIFT + Y) to move your block DOWN one position in the hierarchy.

Changing Block Alignment

To change the alignment of the block, press the keystroke of ALT + F10 (Mac: Option + F10) then use the right arrow to move to the button for alignment. To activate this button press either your Enter key or Spacebar. You will find three (3) options for alignment: left, center, and right. Simply choose the alignment and either press the Enter key or spacebar to select your choice.

Formatting Text

Text can be formatted with three (3) possible attributes which are: bold, italic and underline. However, underlining should be properly applied by using external CSS but can be done with a keystroke.

To use the block toolbar simply select the text you wish to format and then simply press the keystroke of ALT + F10 (Mac: Option + F10) TO ACTIVATE THE BLOCK TOOLBAR. Press the right arrow key to navigate to the bold or italic button and press either the Enter key or spacebar to activate the appropriate button.

Formatting can also be accomplished with keystrokes. Simply select the text that you wish to change and press the corresponding keystroke for the attribute you want to format.

• Bold – CTRL + B (Mac: Command + B)
• Italic – CTRL + I (Mac: Command + I)
• Underline – CTRL + U (Mac: Command + U)

Inserting, Editing and Deleting Hyperlinks

This document is going to use the list block and assume that you have a list of three (3) items created.

For example, my list looks like the following:

• Visit John
• Call John
• Email John

Since this list is now established, let us turn the text of the list into useable hyperlinks.

First select the list block, and if you are using a screen reader turn on your forms or edit mode. Use your navigation keys to move to the first part of the text and using text selection keystrokes, select “Visit John.” Tip: be sure to only select the text, because if you accidentally select the blank at the END of the first item, the first two (2) items in the list are both incorporated into a single hyperlink.

When using the toolbar simply press the keystroke of ALT + F10 (Mac: Option + F10) then right arrow to the button to create a link and either press the Enter key or the spacebar to activate this choice. Type the following in this field: https://www.customerservant.com and then you should hear that one (1) option has been found. Tab to the submit button and then press your spacebar or enter key. You should hear a message stating that a link has been inserted.

You can also use a keystroke other than the toolbar once your text is selected, simply press the keystroke of CTRL + K (Mac: Command + K) and the insert link dialog appears prompting for a URL.

That is how to insert a hyperlink using the http or https protocol, but what if you wish to use another protocol to insert a hyperlink?

Let us select the second list item text remembering to only select the text and not the blank character at the END of the line. When you have this selection made, then press the keystroke of CTRL + K (Mac: Command + K) and in the edit field type tel://8005551212 and you should hear that one (1) item has been found. Tab to the submit button and press either your spacebar or the enter key. You should hear a message that the link has been inserted.

For the last list item, again select the text to become a link being careful not to get the blank character at the END of the line. Press the keystroke of CTRL + K (Mac: Command + K) and then type mailto:john@jcarson.wtf into the edit field and you should hear a message stating one (1) item has been found. Tab to the submit button and either press your spacebar or the enter key and you should hear a message stating that the link has been inserted.

It is now time to test your links to make sure they do what you intended to do.

Note: We used three (3) examples to show how to insert hyperlinks using different protocols just so you do not have to experiment to figure out these procedures.

Editing and Removing a hyperlink

Editing or removing a hyperlink can be done by using the insert link dialog. You can get to this dialog one of two ways. Either by using the toolbar with ALT + F10 (Mac: Option + F10) and then using the right arrow to navigate to the link button or you can use the keystroke of CTRL + K (Mac: Command + K). Keep in mind that the link text will need to be selected prior to using either of these methods.

The dialog that appears will have three (3) buttons to either edit, copy or remove the hyperlink.

To remove a hyperlink is just as easy as inserting one by using a keystroke, just select the text that is already a hyperlink using the cautions already mentioned in this tutorial and press the keystroke of CTRL + SHIFT + K (Mac: Command + SHIFT + K) and you should hear a message indicating that the hyperlink has now been removed.

Copy or Move a Block

Copying a block uses the standard Windows keystroke of CTRL + C (Mac: Command + C), which is useful for when your block is setUP and formatted and you wish to share between other pages or posts. You can also move a block by using CTRL + X (Mac: Command + X). Once you have either cut or copied the block you desire to manipulate press the keystroke CTRL + V (Mac: Command + V) to paste the block in the position of the location where you would like it to appear.

Duplicate a Block

You can also duplicate a block by pressing CTRL + SHIFT + D (Mac: Command + SHIFT + D). This is useful if you have a block already formatted and want to duplicate this block along with its information in another location in your pages or posts.

Add Block before or After

If you are editing an existing page or post that already has blocks in the content area, you can add a block either before or after a selected block in the hierarchy. To add a block before the selected block press ALT + CTRL + T (Mac: Command + Option + T) and to add a block after the selected block press ALT + CTRL + Y (Mac: Command + Option + Y). Screen reader users will need to be in forms or edit mode.

Deleting a block

To delete a block, make sure that your focus is on the block you wish to delete, and in forms or edit mode and then press the keystroke ALT + SHIFT + Z (Mac: CTRL + Option + SHIFT + Z). Your block will be deleted.

There is a second option for you to explore in deleting a block. Press ALT + F10 (Mac: Option + F10) to bring UP the toolbar, then use the RIGHT ARROW to move to the “Options button” and press either the spacebar or enter key to drop DOWN a list of items, then DOWN ARROW to the option for “remove/delete block” and press the enter key on this item and the block will be deleted.

Furthermore, you can press CTRL + A (Mac: Command + A) twice quickly to select all the blocks in the content area and press either the backspace or the delete key to get rid of all the blocks in the content area. You want to use caution when using this method, as it may not give you the result that you are looking for.

Block – Configuration

Styles

• Default
• Display
• Subtitle
• Annotation

Color

• Color Options
• Text
• Background

Topography

• Topography Options
• Font size
• Size
• set custome size

Font size – group of radio buttons

• Small
• Medium
• Large
• Extra Large
• Extra Extra Large

Dimensions

• Show Padding
• Show Margins

Border

• Show Border
• Show Radius

Advanced

• HTML Anchor
• Additional CSS Class
• Skip to the selected block

List Item Block

An individual item within a list. The parent block is the List Block.

The List Item Block can become increasingly complex when introducing nested lists. An excellent understanding of the block parent to child relationship in the hierarchy will be necessary.

Inserting a Block

When starting a new page or post, a dialog with the first new post or page appears welcoming you to the block editor. Move to the “close this dialog button” and press either spacebar or enter to dismiss this dialog.

After typing the text for your title a placeholder for a new block is inserted into the content area which prompts the user to start typing or press the slash (/) key to choose a block type. If using a screen reader, you will need to invoke forms or edit mode before you start typing or use the slash key. If this placeholder does not appear then you can simply press the Keystroke of ALT + CTRL + Y (Mac: Command + Option + Y) to insert this placeholder and then use the previous instructions.</p

Choosing a block

With focus on the block placeholder, either start typing to insert a paragraph block or press the slash (/) key to choose a block. You will more than likely see a list of approximately 8 to 9 items in this list that is presented. This list is either the most commonly or most recently used blocks chosen. Please note that screen reader users will need to be in forms or edit mode.

Use your UP and DOWN ARROW keys to navigate this list until you get to the item you desire and then press the enter key. Do not attempt to use first letter navigation in this list as it does not work, only the ARROW keys. The reason first letter navigation does not work in this list is because if you start typing the editor assumes you want the paragraph block.

Configuration of the Inserted Block

Now that a block has been chosen and inserted, let us discuss configuring the block starting with the toolbar.

The following list describes the toolbar moving from left to right.

Block Toolbar – Alt + F10 (Mac: Option + F10)

• List Item Button Menu – Change block type or Style
• Move Up
• Move Down
• Outdent
• Indent
• Bold Toggle Button
• Italic Toggle Button
• Link Toggle Button – has popup
• More Button Menu
  • Footnote
  • Highlight
  • Inline code
  • Inline Image
  • Keyboard input
  • Language
  • Strikethrough
  • Subscript
  • Superscript
• Options Button Menu
  • Copy – CTRL + C (Mac: Command + C)
  • Cut – CTRL + X (Mac: Command + X)
  • Duplicate – CTRL + Shift + D (Mac: Command + SHIFT + D)
  • Add before – Alt + CTRL + T (Mac: Command + Option + T)
  • Add after – Alt + CTRL + Y (Mac: Command + Option + Y)
  • Copy styles
  • Paste styles
  • Group
  • Lock Submenu – dialog with 3 option
    • Lock All
    • Lock Movement
    • Lock Removal
  • Rename Submenu – dialog allows user to rename the block
  • Create Patterns Submenu – dialog allowing advanced CSS options
  • Edit as HTML
  • Delete – Alt + Shift + Z (Mac: CTRL + Option + SHIFT + Z)

Change Block Type or Style

At the time of the writing of this document, this feature was beyond the scope of the basics desire to convey to any user. In a future part of these tutorial files we will write a part on CSS and document this feature.

Changing your block layout

As you continue to compose your page or post, the blocks are enumerated 1 of 10, 2 of 10, and so on throughout the hierarchy.

To move your block UP or DOWN in the hierarchy, first make sure you are focused on the block, make sure you are in forms or edit mode and then press ALT + F10 (Mac: Option + F10)to bring UP the block editing toolbar.

Use your RIGHT and LEFT ARROW keys to navigate this toolbar. As you press the RIGHT ARROW keys, the first two (2) options on this toolbar are the buttons to move either UP or DOWN one (1) block at a time. Choose the appropriate button and press the spacebar or enter key to maneuver the block into the position of the hierarchy you desire.

You can also use the keystroke of ALT + CTRL + SHIFT + T (Mac: Command + Option + SHIFT + T) to move your block UP one position in the hierarchy, as well as press the ALT + CTRL + SHIFT + Y (Mac: Command + Option + SHIFT + Y) to move your block DOWN one position in the hierarchy.

Changing Block Alignment

To change the alignment of the block, press the keystroke of ALT + F10 (Mac: Option + F10) then use the right arrow to move to the button for alignment. To activate this button press either your Enter key or Spacebar. You will find three (3) options for alignment: left, center, and right. Simply choose the alignment and either press the Enter key or spacebar to select your choice.

Formatting Text

Text can be formatted with three (3) possible attributes which are: bold, italic and underline. However, underlining should be properly applied by using external CSS but can be done with a keystroke.

To use the block toolbar simply select the text you wish to format and then simply press the keystroke of ALT + F10 (Mac: Option + F10) TO ACTIVATE THE BLOCK TOOLBAR. Press the right arrow key to navigate to the bold or italic button and press either the Enter key or spacebar to activate the appropriate button.

Formatting can also be accomplished with keystrokes. Simply select the text that you wish to change and press the corresponding keystroke for the attribute you want to format.

• Bold – CTRL + B (Mac: Command + B)
• Italic – CTRL + I (Mac: Command + I)
• Underline – CTRL + U (Mac: Command + U)

Inserting, Editing and Deleting Hyperlinks

This document is going to use the list block and assume that you have a list of three (3) items created.

For example, my list looks like the following:

• Visit John
• Call John
• Email John

Since this list is now established, let us turn the text of the list into useable hyperlinks.

First select the list block, and if you are using a screen reader turn on your forms or edit mode. Use your navigation keys to move to the first part of the text and using text selection keystrokes, select “Visit John.” Tip: be sure to only select the text, because if you accidentally select the blank at the END of the first item, the first two (2) items in the list are both incorporated into a single hyperlink.

When using the toolbar simply press the keystroke of ALT + F10 (Mac: Option + F10) then right arrow to the button to create a link and either press the Enter key or the spacebar to activate this choice. Type the following in this field: https://www.customerservant.com and then you should hear that one (1) option has been found. Tab to the submit button and then press your spacebar or enter key. You should hear a message stating that a link has been inserted.

You can also use a keystroke other than the toolbar once your text is selected, simply press the keystroke of CTRL + K (Mac: Command + K) and the insert link dialog appears prompting for a URL.

That is how to insert a hyperlink using the http or https protocol, but what if you wish to use another protocol to insert a hyperlink?

Let us select the second list item text remembering to only select the text and not the blank character at the END of the line. When you have this selection made, then press the keystroke of CTRL + K (Mac: Command + K) and in the edit field type tel://8005551212 and you should hear that one (1) item has been found. Tab to the submit button and press either your spacebar or the enter key. You should hear a message that the link has been inserted.

For the last list item, again select the text to become a link being careful not to get the blank character at the END of the line. Press the keystroke of CTRL + K (Mac: Command + K) and then type mailto:john@jcarson.wtf into the edit field and you should hear a message stating one (1) item has been found. Tab to the submit button and either press your spacebar or the enter key and you should hear a message stating that the link has been inserted.

It is now time to test your links to make sure they do what you intended to do.

Note: We used three (3) examples to show how to insert hyperlinks using different protocols just so you do not have to experiment to figure out these procedures.

Editing and Removing a hyperlink

Editing or removing a hyperlink can be done by using the insert link dialog. You can get to this dialog one of two ways. Either by using the toolbar with ALT + F10 (Mac: Option + F10) and then using the right arrow to navigate to the link button or you can use the keystroke of CTRL + K (Mac: Command + K). Keep in mind that the link text will need to be selected prior to using either of these methods.

The dialog that appears will have three (3) buttons to either edit, copy or remove the hyperlink.

To remove a hyperlink is just as easy as inserting one by using a keystroke, just select the text that is already a hyperlink using the cautions already mentioned in this tutorial and press the keystroke of CTRL + SHIFT + K (Mac: Command + SHIFT + K) and you should hear a message indicating that the hyperlink has now been removed.

Copy or Move a Block

Copying a block uses the standard Windows keystroke of CTRL + C (Mac: Command + C), which is useful for when your block is setUP and formatted and you wish to share between other pages or posts. You can also move a block by using CTRL + X (Mac: Command + X). Once you have either cut or copied the block you desire to manipulate press the keystroke CTRL + V (Mac: Command + V) to paste the block in the position of the location where you would like it to appear.

Duplicate a Block

You can also duplicate a block by pressing CTRL + SHIFT + D (Mac: Command + SHIFT + D). This is useful if you have a block already formatted and want to duplicate this block along with its information in another location in your pages or posts.

Add Block before or After

If you are editing an existing page or post that already has blocks in the content area, you can add a block either before or after a selected block in the hierarchy. To add a block before the selected block press ALT + CTRL + T (Mac: Command + Option + T) and to add a block after the selected block press ALT + CTRL + Y (Mac: Command + Option + Y). Screen reader users will need to be in forms or edit mode.

Deleting a block

To delete a block, make sure that your focus is on the block you wish to delete, and in forms or edit mode and then press the keystroke ALT + SHIFT + Z (Mac: CTRL + Option + SHIFT + Z). Your block will be deleted.

There is a second option for you to explore in deleting a block. Press ALT + F10 (Mac: Option + F10) to bring UP the toolbar, then use the RIGHT ARROW to move to the “Options button” and press either the spacebar or enter key to drop DOWN a list of items, then DOWN ARROW to the option for “remove/delete block” and press the enter key on this item and the block will be deleted.

Furthermore, you can press CTRL + A (Mac: Command + A) twice quickly to select all the blocks in the content area and press either the backspace or the delete key to get rid of all the blocks in the content area. You want to use caution when using this method, as it may not give you the result that you are looking for.

Block – Configuration

Color

• Color Options
• Text

Topography

• Topography Options
• Font size
• Size
• set custome size

Font size – group of radio buttons

• Small
• Medium
• Large
• Extra Large
• Extra Extra Large

Dimensions

• Show Padding
• Show Margins

Border

• Show Border
• Show Radius

Advanced

• HTML Anchor
• Additional CSS Class
• Skip to the selected block