





















[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.
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。