Screen Reader Demonstration

In this workshop learning session you will learn about screen readers and how they are used.

Introduction To Screen Readers

Everyone that is browsing the web has a user agent. This is the software that acts as the bridge between the user and the internet. When your browser loads a web page, it identifies itself as an agent when it retrieves the content you have requested, and the browser sends a host of information about the device and network that you are on.
That is, the browser must understand the Application Protocol Interface (API) building blocks and command structure of the web page, so as to display meaningful information on the user device and allow the user to interact with the page elements.

There are many different browsers, each using a specific API structure and thus delivering a different user experience on different devices. However, for the most part, the browser API is designed for visual users and Mouse interaction, but some browsers have accommodated blind users by providing an accessibility interface structure for screen readers.

TPG: A Tale of Two Rooms - Understanding screen reader navigation

Screen Readers

A screen reader is a software application that converts the text displayed on a computer screen into synthesized speech. Text-to-speech capabilities are a vital component of Artificial inTelligence (AI) Assistants, such as Apple's Siri and Amazon's Alexa, which talk with users by converting their replies into digital speech.

Screen Reader Use Cases Screen readers are a specific use case of text-to-speech technology that improve accessibility for people with visual disabilities. There are many options for screen readers. Some are intended for use with different operating systems and applications; some are free and open source; others are commercial software. Screen readers are able to look for and process any kind of text that is displayed on the screen of a computer or mobile device, including website content, icon labels, documents, spreadsheets, file menus and more. The user can adjust settings such as the speed and volume of the speech.
To learn more see:
Wikipedia: List Of Screen Readers
WebAIM: Screen Reader User Survey

Using The JAWS Screen Reader The Freedom Scientific JAWS screen reader can be a powerful tool in helping to evaluate the usability of a website. JAWS, a Microsoft Windows based screen reader assistive technology, presents Web pages using the JAWS Virtual Cursor. This allows users to read and navigate a Web page as though it were a text document. Users press the ARROW keys to read line by line, word by word, character by character, and so on. The JAWS Navigation quick keys make it faster and easier to move around on a Web page and anywhere else the Virtual Cursor is active. These commands are all assigned to keys on the main part of the keyboard. A web page well structured with the HTML tags, make it possible for JAWS user to quickly navigate the page and gain an understanding of the page content.
Freedom Scientific: the complete list of JAWS keystrokes.
WebAIM: JAWS Screen Reader Tutorial for accessibility testing
Freedom Scientific: Surfing the Internet with JAWS
JAWS Cursor Modes:
PC Cursor: The PC Cursor is linked to the keyboard functions of Windows and applications. This is the cursor that is used when typing information, moving through options in dialog boxes, and selecting options or icons. As you type information, the PC Cursor follows along with each key you press. pressing NUM PAD PLUS activates the PC Cursor.
Jaws Cursor: The JAWS Cursor is linked to mouse pointer functions in Windows and other applications. It is used to read information the PC Cursor cannot read, such as toolbar information. The mouse follows along with the JAWS Cursor when it is moved. press NUM PAD MINUS to activate the JAWS Cursor.
Touch Cursor: The Touch Cursor enables you to navigate the Windows environment using a touch screen, found on many tablet computers running Windows 8 or later. To control JAWS from a touch screen, you will use one or more fingers to perform various gestures directly on the screen, such as tapping, flicking, and swiping. press SHIFT+NUM PAD PLUS to activate the Touch Cursor.
Virtual PC Cursor: The virtual PC Cursor mimics the functions of the PC Cursor, but is activated by default when entering an HTML document, such as a Web page on the Internet. The virtual PC Cursor speaks the number of elements on the page when it first opens. You can use the ARROW keys to navigate and read the document, or use Navigation Quick Keys to move to specific elements, such as paragraphs, tables, or headings. Press Insert+z keys to toggle the Virtual PC Cursor on and off, or Insert+z twice quickly for all opened Window applications.
Using The NVDA Screen Reader NVDA (NonVisual Desktop Access) is a free, open source software, Microsoft Windows based assistive technology, screen reader which enables blind and vision impaired people to use computers. You can control what is read to you by moving the cursor to the relevant area of text with a mouse or the arrows on your keyboard. NVDA can be installed on your computer, or a portable version can be use on an USB thumb drive. NVDA uses a virtual buffer concept common to all Windows screen readers on the market. NVDA takes the HTML of the page and converts it into a flat document with semantic information in the order the HTML appears in the browser source. As you navigate, NVDA will speak semantic information such as link, heading level 1 through heading level 6, button, images, and much more.
WebAIM: NVDA Screen Reader Tutorial for accessibility testing
Using The Voiceover Screen Reader VoiceOver is a screen reader program that comes on Mac computers, iPhones, iPads, and iPod touches. VoiceOver is not a standalone screen reader assistive technology. It is deeply integrated into the iOS operating system and all the built-in apps on iOS devices. It can also access most OS X native applications and functions. VoiceOver gives auditory descriptions of each onscreen element, and provides helpful hints along the way (whether you prefer using gestures, a keyboard, or a braille display), and it supports more than 30 languages, including multiple voice options.
The Accessibility Inspector lets you simulate VoiceOver interactions, and examine the accessibility information that is available for the controls in your app. However, when it comes to testing, there is no substitute for using your app on an iOS device with VoiceOver turned on, or better still asking VoiceOver users to test your app. You can toggle VoiceOver on and off quickly by setting it to the triple-click setting in the Accessibility Settings.
WebAIM: Voiceover Screen Reader Tutorial for accessibility testing
Using The Windows Narrator Screen Reader The Microsoft Windows Narrator screen reader is a screen-reading app built into the Windows operating system. Narrator is included with every copy of Microsoft Windows, providing a measure of access to Windows without the need to install additional software as long as the computer in use includes a sound card and speakers or headphones.
Narrator can assist a blind person in installing a full-function screen reader, assisting the user until their screen reader of choice is up and running. Because Narrator is a lightweight screen reader that requires minimal hooks into the operating system, Narrator can provide speech when a full-function screen reader might be unable to do so, such as during the process of updating hardware drivers. The Ease of Access settings in Windows are easy to discover, learn and use. Settings are grouped by ability (vision, hearing, and interaction). To get directly to Narrator settings, press Windows logo key plus Control key plus N.
Microsoft: Narrator keyboard commands and touch gestures in Windows

Web Page Structures

Pages with well-structured content are essential for many web users, as semantic HTML markup is leveraged by assistive technology. This is why it is important to use the right element for the right job.

Some Basic Page Structures
Page Title: Every page should have its own, unique TITLE element.
Skip Links: People who use magnifiers to view a web site find skip links useful. Often a person using a magnifier will only see a small part of the screen. Often it is not obvious where the content is from this small part of the screen.
Landmarks: The web page should be divided into perceivable block areas, which contain semantically associated information called Regions. Each region can be divided into logical subregions as needed. For users with cognitive and learning disabilities the landmark information could be used to expand and collapse these regions of your page to aid in simplifying the user experience by allowing the user to manage the amount of information processed at any one time.
Heading Hierarchy: It is important that headings are nested properly in order to convey the structure and hierarchy of the page. It is important not to skip heading levels (Example, a H4 should not follow an H2). Screen reader users scan a web page using a variety of features, such as links, form controls and headings. Most screen readers can pull out the headings, and present them to the screen reader user in hierarchical order. This can provide a great amount of information to users and help them navigate through the page effectively.
Structural Labels: Structural labels should be used to help describe different components of the page to screen reader users. Providing hidden structural labels assists screen reader users to identify lists of links and access the information provided via the hierarchy. The inclusion of structural labels is an effective and relatively simple solution to the significant problem some screen reader users have in identifying the different elements on a page. It is possible, through the use of CSS, to include these labels without affecting the visual appearance of the page.
Breadcrumbs: Breadcrumbs are an additional navigation tool that assists both the general public and people with disabilities to navigate through a large or complex site. It is especially important where other navigation mechanisms, such as the Back button, have been broken. Breadcrumbs should provide the hierarchical position not the chronological pathway in the site. For instance, even if a user came to a particular part of the site through inline links, the breadcrumbs should provide the navigational pathway to that page.
The User Experience
HTML Structures: Use HTML elements for content structure correctly. HTML tags communicate the organization of the content relationships. Watch the video then using a screen reader navigate the web page using the keyboard.
YouTube: Screen Reader HTML Structures Navigation Demo
CTV News Canada News Top Stories
Region Landmarks: Watch the demonstration video, then using a screen reader navigate Region Landmarks with the keyboard, and compare the user experience on these two web pages.
YouTube: Screen Reader Region Navigation Demo
CTV News Canada News Top Stories
UK BBC News
Heading Navigation: Use Headings for content structure correctly. Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use Headings to provide in-page navigation relationships.
  • Guideline 1: Do not use text formatting, like large or bold text, to fake Headings.
  • Guideline 2: Use real HTML <h1> to <h6> Heading tags.
  • Guideline 3: Do not use Headings to achieve visual results only.
  • Guideline 4: Nest Headings by their rank (or level).
  • Guideline 5: The most important Heading has the rank one <h1>, and the least important Heading rank six <h6>.
  • Guideline 6: Headings with an equal or higher rank start a new section. Headings with a lower rank start new subsections that are part of the higher ranked section.
  • Guideline 7: Skipping Heading ranks can be confusing and should be avoided where possible. That is, make sure that a <h2> is not followed directly by an <h4>.
  • Try It: Watch the demonstration video, then using a screen reader navigate Headings with the keyboard on the web page.
    YouTube: Screen Reader Heading Navigation Demo
    Web Content Accessibility Guidelines (WCAG)
    • Skip Links: Skip Links allow keyboard users to jump over web page content to a specific area on the page. This prevents unnecessary repeated taps on the Arrow and Tab keys. Watch the video then using a screen reader use the Skip Links on the web page with the keyboard.
    YouTube: Screen Reader Skip Link Navigation Demo
    W3C Before and After Demonstration
    ComboBox Selection: Watch the video then using a screen reader use the Single-Select ComboBox on the web page with the keyboard.
    YouTube: Screen Reader ComboBox Navigation Demo
    W3C Select-Only Combobox Example
    Picture Description: Images must have text alternatives that describe the information or function represented by them. This ensures that images can be used by people with various disabilities.
  • Informative Images: Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be a short description conveying the essential image information.
  • Decorative Images: Provide a null text alternative (alt=) when the purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
  • Functional Images: The text alternative of an image used as a link or button should describe the functionality of the that element rather than the visual image. Such as a printer icon to represent the print function or a button to submit a form.
  • Images Of Text: Readable text presented within an image, if not a logo, should be avoided. If images of text are used, the text alternative should contain the same words as in the image.
  • Complex Images: Complex images, such as graphs and diagrams should provide a full-text equivalent of the data or information provided in the image as the text alternative.
  • Groups Of Images: If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
  • Image Maps: The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.
  • Try It: Watch the videos to learn more.
    YouTube: The Lion King
    YouTube: What do pictures SOUND like?
    • Image Text Description: Watch the video demonstration, then using a screen reader navagate to each image using the keyboard.
    YouTube: Screen Reader Image Text Description Navigation Demo
    Seven awesome accessibility features at the Museum
    Image Data Tables: Watch the video demonstration, then using a screen reader navagate to each image Chart and expand the Data Table using the keyboard.
    YouTube: Screen Reader Image Data Table Navigation Demo
    Statistics Canada
    Image Sonification: Watch the video demonstration, then using a screen reader navagate to each image Chart and activate the alternative image format using the keyboard.
    YouTube: Screen Reader Image Sonification Navigation Demo
    NNELS: COVID-19 Accessible Information

    End Of Presentation

    Thank you for taking the time to learn more about the screen reader experience.