Browsing with assistive technology videos

[The TetraLogical logo whooshes into view on a white background. The logo flashes and stops with a sonar-like 'ping'. It then magnifies and fades out.]

[A dark purple background appears with the TetraLogical logo faintly overlaid]

Browsing with a desktop screen reader

Screen readers announce everything on a web page and within an application.

All static text is spoken including paragraphs of text, headings and lists.

[The TetraLogical homepage appears with a horizontal list of links for main navigation at the top, a heading, and the body of the page content below]

Screen readers also announce additional information such as text descriptions for images, visually hidden text, and the names of landmark regions (for example banner, main and footer) when browsing web content.

As an example, here's an extract from the TetraLogical.com site, as experienced with a screen reader.

[The NVDA screen reader starts reading out information as the visible focus in the form of a solid coloured line, moves around the page]

[NVDA] Link, skip to main content, visited link, graphic, TetraLogical, main navigation landmark, list with four items, visited link About, visited link Services, visited link News, visited link Blog, Out of list, Main landmark, Heading level 1, Hello, we're TetraLogical, We're a company with, inclusion at its heart., We specialise in all aspects of accessibility, from working with your, websites and apps to giving your teams the skills they need to make accessibility part of everything they do.

[A new webpage appears with the title "Checkbox". Two checkbox items appear above a purple "submit" button]

For interactive elements, screen readers will not only announce the name and role of the element, but its current state as well.

In this example, we're using NVDA to navigate to an unchecked checkbox, and then check it.

[NVDA reads aloud as the visible focus moves to the checkbox and then selects it so a tick appears]

[NVDA] Checkbox, document, Checkbox not checked, I have read the terms and conditions, Checked

[The TetraLogical homepage reappears]

The basic navigation for people who use a screen reader is the same as that used by keyboard users in general.

[A purple button with the text "Skip to main content" appears]

The Tab key is used to navigate to the next focusable element, such as links, buttons or form inputs.

[As the user navigates through the main menu using the tab key, an overlay with the word "tab" on appears]

To move backwards, you use Shift + Tab.

Enter is used to activate links.

[The visible focus solid line changes to a dotted line on the "Blog" item in the menu bar]

Enter or Space activate buttons.

[The visible focus moves down the page, highlighting each element as it is read aloud]

The arrow keys are used to navigate static content such as text, as well as to interact with components such as menus, tab panels, sliders, select dropdowns, and groups of radio buttons.

Beyond the basics, however, people who use a screen reader have many more keyboard commands at their disposal.

[The TetraLogical homepage fades back into view. The user slowly scrolls down the page]

Where sighted people will visually scan a page, then make decisions about where to navigate to or what to concentrate on, screen reader users will do the same but with keyboard commands.

[A mouse hovers over a button with "hello@tetralogical.com"]

While screen readers often have different keyboard commands, people tend to use the same general strategy for exploring, navigating, and reading content.

[The TetraLogical homepage fades back into view.]

When opening a web page, screen readers will automatically read the page from top to bottom, starting with the page title. It's common for people to stop the screen reader, then explore the content for themselves.

A common strategy is to scan a page using headings or landmark regions, then use other keyboard commands to explore relevant content in more detail.

This enables people to understand the overall structure of content, before deciding what to do next.

For example, a screen reader user may navigate between the headings on the page until they find one that seems to preface the content they're looking for.

Then they'll use more keyboard commands to read the subsequent content, activate a link, or perform some other task.

In this example, we're using NVDA to navigate between the headings on the TetraLogical website using the H key.

Once we reach a heading that interests us, we continue using the Tab key to reach the following link.

[NVDA] Hello, we're TetraLogical, heading level 1. [The focus jumps down the page onto the "News" heading] News, heading level 2, [it continues to jump down as each new heading is announced] Blog, heading level 2, Contact us, heading level 2, Main region, hello@tetralogical.com, send mail link.

[The TetraLogical homepage appears again. A dialogue box is now displayed with the NVDA settings]

Probably the most common setting people change is the rate of speech output.

Many people who use screen readers on a daily basis listen to the speech output very fast. This is similar to how someone who is sighted might skim read and read fast in their head. The speech rate can be so fast that output is almost impossible to follow for people unaccustomed to screen readers.

As an example, here we change the speaking rate in NVDA's Speech settings from 60% to 100%, and then read through content on the TetraLogical website's homepage.

[The focus moves to the "Rate" slider. The user moves the mouse to increase this to its maximum. The focus moves down in the page as the screen reader reads the content aloud]

[NVDA] Rate, slider 60, Alt+R 100, Main landmark, Hello, we're TetraLogical, heading level 1. We're a company with inclusion at its heart. We specialise in all aspects of accessibility, from working with your websites and apps to giving your teams the skills they need to make accessibility part of everything they do.

These are some of the high level details, about desktop screen readers, and common strategies that people browsing with a desktop screen reader use.

[The screen fades to white and the TetraLogical logo appears again]

To find out more about accessibility visit tetralogical.com.

[The TetraLogical logo whooshes into view on a white background. The logo flashes and stops with a sonar-like 'ping'. It then magnifies and fades out.]

[A dark purple background appears with the TetraLogical logo faintly overlaid]

Browsing with a mobile screen reader.

Like desktop screen readers, mobile screen readers announce everything on a web page and within an application.

All static text is spoken including paragraphs of text, headings and lists.

Screen readers also announce additional information, such as text descriptions for images, visually hidden text, and the names of landmark regions (for example banner, main, and footer) when browsing web content.

[An image of the TetraLogical homepage appears on a mobile device being held in hand. The logo is displayed at the top, then below it a horizontal list of links for main navigation. The main heading is below that, and the body of the page content fills the rest of the screen]

When a mobile screen reader is enabled on a touch-screen device, all the gestures change.

Instead of visually scanning the screen and tapping once on something to activate it, people will scan the screen by touch, and move their screen reader focus sequentially, in a linear fashion, through elements on the screen.

[The hands holding the device navigate through the elements on screen]

Swipe right to move focus to the next item. Swipe left to move focus to the previous item.

In addition, mobile screen readers also let you "explore by touch", dragging a finger over the screen.

[As the user drags their finger, a green visible focus outline highlights content as it moves. Text is displayed at the bottom of the screen as the screen reader reads content aloud]

The screen reader will focus and announce each item you touch.

This can be useful in situations where an item can't be reached through normal navigation, but can be quite inefficient.

[The user moves the visible focus to the "News" page. They double-tap elsewhere on the screen and the News page opens]

Once a mobile screen reader is focused on an item, double-tapping anywhere on the screen will activate it.

[The TetraLogical homepage on a mobile screen is displayed on a purple background]

On both Android and iOS it is possible to navigate by a specific type of element.

On iOS, the VoiceOver rotor makes it possible to access different configuration settings and to navigate applications and web pages by different elements.

Moving two fingers clockwise opens the rotor where you can choose what types of element you want to navigate between.

[The Voiceover rotor appears on screen with 8 options displayed in a dial. As the user navigates and each new item is announced, the dial moves clockwise through the options]

[VoiceOver] Characters, Words, Lines, Speaking rate, 60%, Containers, Headings, 5 headings

[The rotor disappears]

Once a type of element is selected, swiping up or down moves focus between the elements of that particular type.

For example, while browsing a website, if headings are selected in the rotor, then swiping up or down moves focus from heading to heading.

[The visible focus moves from heading to heading as the user navigates down the page and each heading is read aloud]

[VoiceOver] Hello, we're TetraLogical, Heading level 1, News, heading level 2, Blog, heading level 2, Contact us, heading level 2.

[The TetraLogical homepage on a mobile screen reappears. The visible focus is now an outline over the entire screen]

On Android you can swipe down then up in one gesture to cycle between TalkBack navigation options.

[V-shaped arrows pointing up and down appear on screen, they are displayed above and below each the word being announced]

[TalkBack] Characters, Words, Lines, Headings, Swipe up or swipe down to read by headings

[The visible focus outline stops on the main heading]

Once an option is selected, such as headings, a single swipe, either up or down, moves focus between each heading.

[The visible focus outline moves down the page as the user navigates]

[TalkBack] Hello, we're TetraLogical, Heading 1, News, heading 2, Blog, heading 2.

All screen readers can be customised to suit people's preferences. Probably the most common setting people change is the rate of speech output.

[The VoiceOver rotor reappears with "Speaking Rate" selected in the dial]

Many people who use screen readers on a daily basis listen to the speech output very fast.

This is similar to how someone who is sighted might skim read or read fast in their head.

The speech rate can be so fast that output is almost impossible to follow for people unaccustomed to screen readers.

As an example, here we change the speaking rate in iOS VoiceOver from 60% to 100%, and then read through content on the TetraLogical website's homepage.

[The "Speaking Rate" overlay disappears]

[VoiceOver] Speaking Rate, 60%, 65%, 70%, 75%, 80%, 85%, 90%, 95%, 100%

[VoiceOver, speaking at a very high rate] We take the time to understand your organisation, your project, and your goals, so we can put together services that are tailored to suit you. Our accessibility services include...

These are some of the high level details about mobile screen readers, and common strategies that people browsing with a mobile screen reader use.

[The screen fades to white and the TetraLogical logo appears again]

To find out more about accessibility visit tetralogical.com.

[The TetraLogical logo whooshes into view on a white background. The logo flashes and stops with a sonar-like 'ping'. It then magnifies and fades out.]

[A dark purple background appears with the TetraLogical logo faintly overlaid]

Browsing with a keyboard

Navigating a web page or web application with a keyboard is very different from navigating with a mouse.

[The TetraLogical homepage appears with a horizontal list of links for main navigation at the top, a heading, and the body of the page content below. The cursor moves around the screen]

When you use a mouse, you choose where to point it, follow the visible mouse cursor until you get where you want, then interact with the content.

[The cursor selects the "News" link from the main navigation and the News page opens]

When you use a keyboard, your actions are constrained by the order in which content is coded, rather than its visual presentation and layout.

Unlike with a mouse, you're more limited in how you can move your focus.

[The TetraLogical homepage fades back into view]

Keyboard focus moves sequentially through focusable elements such as links, buttons, controls, and form inputs.

[A purple button with the text "Skip to main content" appears at the top of the screen. As the user navigates through the main menu using the tab key, the word "tab" on appears at the bottom of the screen]

By default, the Tab key is used to navigate to the next focusable element and Shift+Tab is used to move to the previous focusable element.

[The screen changes to reveal the Mac System Preferences displaying a series of icons]

In contrast with other operating systems, note that by default, on macOS, Tab only moves between text input fields and a limited set of controls.

[The mouse moves over the screen and selects the options as they're read aloud]

Generally, people that rely on the keyboard to navigate will go to macOS' System Preferences > Keyboard > Shortcuts and enable the "Use keyboard navigation to move focus between controls" option.

[The TetraLogical homepage reappears]

You can generally scroll through content using the cursor keys.

[As the user navigates down the page, the word "space" on appears at the bottom of the screen]

You can also use Space to scroll one screen at a time, and Shift+Space to scroll backwards.

The same can be achieved using the PageUp and PageDown keys.

It's important to remember that these keys only bring more content into view. In order to interact with content, people using a keyboard rely instead on moving the specific keyboard focus.

[The TetraLogical homepage reappears along with the word "tab" at the bottom of the screen. The visible focus outline jumps to each new element as the user navigates through the page]

Once focus is on a control, there are different keys that can be used to interact with the focused element.

[The word "Enter" appears on the screen as the "News" page is selected and opens]

Enter is used to activate links.

[A new webpage appears with the heading "Checkbox". Two checkbox items appear above a purple "submit" button. The word "tab" appears at the bottom of the screen]

Checkboxes and switches are toggled using Space.

[As the user presses space the word on screen changes from "Tab" to "Space". "Tab" causes the visible focus to move to the first checkbox. "Space" then selects the box so a small tick appears inside. This is repeated for the second checkbox item

[A new screen appears with the heading "Select" above a "Select dropdown" menu. The dropdown says "Choose an option" next to a downwards-facing arrow]

Select dropdowns are opened using Enter or Alt+Down arrow.

[The text "Alt+" and a downwards arrow appears in screen. This expands the dropdown menu so options one, two, three, and four are displayed. The user navigates down the list as the downwards arrow is displayed on screen]

The selected option can then be chosen using the arrow keys.

[The user presses "Enter" and the word "Enter is displayed on screen. The dropdown menu closes]

Tab, Enter, or Esc close the dropdown again.

[The screen changes with the heading "Radio buttons" above the same options, this time displayed as four separate radio buttons. The visible focus is on the first option which has been checked]

In some situations, complex or compound controls only present the user with a single tab stop.

Once they have focus, the arrow keys are used to move between the different controls.

As an example, here is a group of radio buttons. Only the currently checked control receives focus.

[The user navigates through the options using the right arrow key which is displayed on screen as it is pressed. They then navigate back the opposite way through the options]

Once it has focus, arrow keys are used to change the currently selected radio button.

Buttons can be activated using Space or Enter.

[A new screen appears with "Confirmation" as the heading. Below is text saying confirming a form has been submitted]

These are some of the high-level details about keyboard navigation, and common strategies that people browsing with a keyboard use.

[The screen fades to white and the TetraLogical logo appears again]

To find out more about accessibility visit tetralogical.com.

[The TetraLogical logo whooshes into view on a white background. The logo flashes and stops with a sonar-like 'ping'. It then magnifies and fades out.]

[A dark purple background appears with the TetraLogical logo faintly overlaid]

Browsing with screen magnification.

Screen magnification works by zooming all or parts of the screen as if you are looking through a magnifying glass.

[The TetraLogical homepage appears. In the centre of the screen is the Magnifier application window displaying various options. A mouse hovers over the plus button. As it is selected, the screen gets larger and larger]

Depending on the software, you can enlarge content on screen to 60 times, or 6000% the original size, and more.

Screen magnification software is used with a mouse, touchpad, keyboard or other pointer device. It also comes with keyboard commands to help you quickly execute common actions like zooming in and out.

[A zoomed-in TetraLogical homepage appears. As the mouse pointer moves around, the screen tracks it so different elements of the page are displayed]

A really useful feature of screen magnification is focus tracking. As you move the pointer or cursor, the screen magnifier moves with it. Taking Magnifier on Windows as an example, note how the zoomed-in view scrolls to follow the mouse pointer. When navigating using the keyboard, note how the view scrolls to always maintain the currently focused element in view.

While magnifying content is helpful, people often use additional enhancements to make content easier to see.

[The screen displays the Magnifier settings. The user checks the "Invert colours" box]

For example, colour inversion, turning text from black-on-white to white-on-black, can reduce screen glare and is helpful for older people or people with certain sight conditions such as macular degeneration.

[The TetraLogical homepage is displayed again. This time, the ZoomText Magnifier/Reader settings are displayed]

Mouse and text cursors can often be modified to make them easier to locate on screen.

[The user navigates to the "Pointer" drop-down. "Normal" is currently selected. Next to the option "Scheme" a range of different options are available. The user selects "Large yellow" which increases the size of the pointer and changes the colour]

This could be by enlarging them, circling them, or changing the colour.

[The user selects the "Yellow with crosshairs" option. The cursor changes to a hand icon. Large red grid lines are displayed across the entire screen. The horizontal and vertical lines meet at the point where the cursor sits]

Some people may prefer to use crosshairs rather than a mouse cursor, especially if they can be customised.

[The screen changes back to the Magnifier settings. It shows the option "Change Magnifier view" and offers a dropdown for the user to choose a view where full screen is currently selected.

You can use different magnification modes for different tasks.

[The user selects "Lens" which creates a highly magnified rectangle that focuses on the element the cursor hovers over]

You can magnify the whole screen, or use a magnifying lens that can be moved around the otherwise un-magnified screen.

[The TetraLogical homepage reappears with the ZoomText Magnifier/Reader settings displayed]

Many screen magnification solutions also include speech output or integrated screen reading capabilities. Taking ZoomText as an example, you can enable "Mouse Echo" which will read out any text underneath the mouse pointer.

[The user selects the "Mouse" drop-down and changes the settings from "no echo" to "instant"]

[ZoomText] Mouse, No Echo checked, Instant, Mouse Echo set to Instant mode, Hello, we're TetraLogical, We're a company with inclusion at its heart.

Matching functionality is also available if you're navigating with a keyboard instead.

[The TetraLogical homepage is displayed again, zoomed in to 300%]

When opening a web page, people who use screen magnification will generally move the viewport to the top left of the page (for content in a language that is written left-to-right).

[The user slowly moves their mouse across the screen displaying the menu bar from left to right]

Typically this is the website logo in the header of the web page. People expect to find common features such as the main navigation, search, and links to login and help by scrolling horizontally.

[The page changes to the "Contact us" heading as the user navigates down to the page footer]

People who use screen magnification often rely on their mouse (or finger on a touchpad) to pan their screen and at times need different levels of magnification.

[The user zooms in further, then uses the cursor to navigate to the social icons for Twitter, YouTube and LinkedIn in the footer]

For example, if links and buttons are small, magnification can be increased to enable people to select them accurately.

[The cursor moves around in a blank space with no content in sight]

When using screen magnification, it can be easy to become disorientated in long web pages or pages with a lot of content or large areas of white space.

[The user zooms out, locates the content they need, then zooms back in]

A common strategy is to zoom out to find your location quickly and then zoom back in again to explore the content in-depth.

These are some of the high-level details about screen magnification, and common strategies that people browsing with screen magnification use.

[The screen fades to white and the TetraLogical logo appears again]

To find out more about accessibility visit tetralogical.com.

[The TetraLogical logo whooshes into view on a white background. The logo flashes and stops with a sonar-like 'ping'. It then magnifies and fades out.]

[A dark purple background appears with the TetraLogical logo faintly overlaid]

Browsing with speech recognition

Speech recognition software listens to human speech, transcribes it into text, and executes spoken commands that operate your computer or device.

As well as dictating text, filling out forms, and opening and closing applications, you can browse the web and completely control websites with voice commands.

[The TetraLogical homepage appears with a horizontal list of links for main navigation at the top, a heading, and the body of the page content below]

Core navigation verbally mirrors how you navigate with a keyboard. For example, rather than using keys on a keyboard, you say "Tab" to move focus to the next item, "Shift Tab" to move to the previous item, and "Press Enter" to activate a control.

[A purple button with the text "Skip to main content" appears. As the user interacts with the page, the visible focus indicator moves too]

[User voice] tab, tab, tab four times, press shift tab, press, shift tab, press enter.

[On the final command, the "Services" page opens. The page then fades back to the homepage]

To activate a link or button, you can say "Click" together with the text used in the link or button. For example, "Click Services" to activate a link labeled "Services".

[User voice] click services

[The "Services" pages opens as before]

If you just say "Click link", the software will highlight and number all links in the current page. You then select the link you want by saying the number.

[User voice] click link

[A series of six green numbers appear dotted throughout the page. These are attached to each separate link, such as the logo and each individual menu option]

[User voice] choose 3

[The visible focus moves to the "Services" menu option, which has the number three above it. This then opens the "Services" page

The homepage appears again, this time with gridlines across the entirety of the page, marking out six distinct areas]

In situations where a control lacks a visible text label, or where the visible text doesn't match the actual accessible name of the control in the underlying markup, people using speech recognition can use alternative approaches such as MouseGrid, which overlays a grid on the page.

[The user moves the mouse cursor which changes the size and location of the grid. As the user hones in on the menu options, the grid keeps resizing to display as a smaller, more precise area]

Each box has a number. By saying a number in a box, the grid focuses on that part of the page.

This is repeated until the button or link you want is focused.

[The bottom of the TetraLogical homepage is displayed in front of a bright pink background]

In this recording, we're using MouseGrid to set focus to a graphical control that lacks visible text.

[User voice] MouseGrid

[Lines appear across the screen marking out nine areas of equal size on screen. Each one is numbered]

[User voice] seven

[A new grid appears in the area that was previously marked as seven. This is much smaller and now focuses on the bottom right of the screen.]

[User voice] six

[Again, a new grid appears in the area that was previously marked as six]

[User voice] six

[A very small grid is now displayed. The majority of the grid is over a button with an "email" icon displayed]

[User voice] click

These are some of the high level details about speech recognition, and common strategies that people browsing with speech recognition use.

[The screen fades to white and the TetraLogical logo appears again]

To find out more about accessibility visit tetralogical.com.