Accessible Page Elements

This is the "main" landmark. It contains the primary content of the page. Use this page to practice your screen reader commands. Each section describes the elements within it.

Core Page Structure

Headings

This is an "h3" heading. Headings structure the page and are the most common way to skim content. Use the H key to move to the next heading, or Shift+H to move to the previous one. You can also press 1 through 6 to jump to a heading of a specific level.

Paragraphs and Text

This is a standard "p" (paragraph) element. You can read through the text line-by-line using the Up and Down arrow keys, or by whole paragraphs using Ctrl+Up/Down arrows.

Lists

Lists are used to group related items. Use the L key to jump between lists, and the I key to jump between list items.

This is an item in an unordered list ("ul").
It's used for items without a specific sequence.
There are three items in this list.

This is an item in an ordered list ("ol").
It's used for sequential information, like steps in a process.
This is the third and final item.

Blockquote

A blockquote is used for quoting text from another source. You can jump to the next blockquote using the Q key.

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." - Tim Berners-Lee

Graphics / Images

Images provide visual information. For screen reader users, a text alternative (alt text) describes the image. Use the G key to navigate to the next graphic on the page.

A figcaption can provide additional information about an image.

Links

Links allow you to navigate to other pages or other parts of the current page. Press K to move to the next link, or Shift+K for the previous one. Press U for the next unvisited link and V for the next visited one.

This is a standard external link to W3C's Web Accessibility Initiative.
This is a link you have likely not visited: Deque Systems Blog.
You've already been here! This is a visited link to the top of this page.

Tables

Tables are for presenting data in a grid. Use the T key to navigate to the next table. Once inside, use Ctrl+Alt+Arrow keys to move between cells. Your screen reader will announce the column and row headers for context.

Screen Reader Shortcut Categories
Category	Primary Key	Example Use
Headings	H	Skim page structure
Links	K	Find navigation options
Form Fields	F	Complete a sign-up form

Interactive Form Controls

Forms are a critical part of the web. Use the F key to cycle through all form elements. Each form control has a "label" associated with it, which is crucial for accessibility.

Fields marked with an asterisk () are required.

Personal Information

Name (Edit Field)

Use the E key to jump to edit fields like this one. Your screen reader will announce that this field is "required".

Favorite Course (Combo Box)

Use C to navigate to combo boxes. To interact, switch to Focus Mode, then use Alt+Down Arrow to open, and arrow keys to select.

Your Learning Preferences

Use the R key to cycle through radio button groups in Browse Mode. To select an option, switch to Focus Mode and use your arrow keys.

I prefer video content.

I prefer text-based content.

I prefer interactive exercises.

Topics of Interest (Checkboxes)

Use the X key to cycle through checkboxes. Press Spacebar to toggle selection.

WCAG Standards

ARIA Authoring Practices

Screen Reader Testing

Dynamic & Advanced Widgets

Accordion

An accordion allows content to be expanded and collapsed. This version uses ARIA roles to create a more robust experience than the native <details> element, preventing repetitive announcements from screen readers.

Tab Interface

Tabs are a common way to organize content without cluttering the page. To navigate between the tabs with the Left and Right arrow keys, you may need to switch your screen reader to Focus Mode (often done with NVDA+Spacebar). Your screen reader will announce the selected tab.

Week 1: Introduction to Accessibility.
Week 2: Understanding WCAG.
Week 3: Hands-on with Screen Readers.

Live Region

A live region is an area of the page that can update with new information. A screen reader will automatically announce these changes without the user needing to move focus. Click the button below to trigger an update.

Embedded Video: Installing NVDA with Narrator

This video, featuring myself and Dr. Nicole L'etoile of L'Etoile Education, walks through the process of using Windows Narrator to install the NVDA screen reader. It's an excellent example of how video content can provide valuable instruction, and it also demonstrates a critical accessibility practice related to video players.

Continuing from the video: Why headings matter

As you navigate this page with a screen reader, you'll find that immediately after the video player, you can press the H key to quickly skip past all the video playback controls and jump directly to this heading. Without this heading here, a screen reader user would have to tab through every single button and control within the video player before reaching the next piece of content. This simple addition significantly improves the user experience by reducing unnecessary navigation effort.