Web Language and Terms while using a Screen Reader (Focus on Google Forms)

When using a screen reader, it is quite typical that you will access websites and applications.  On webpages and within apps, you will hear special coding and terms while navigating.  In this post, we will take a look at how VoiceOver reads background information on webpages and within apps.  This information is essential for Visually Impaired students to be able to understand functions, how and when to enter information in a form, or what is being heard/read on a webpage. 

The following video is of a student utilizing a Google form along with the Refreshabraille 18 and an iPad running voiceover. On this video, you will hear the words heading level, list start, text field, radio button, insertion point, and combo box. You will also hear some words that will indicate the way the elements function.

Accessing Google Forms Using an ipad and Refreshabraille 18* video.

What you are hearing is coding language involved in webpage development.  It includes coding, layout, and scripting just to scratch the surface.  This language is written by web developers.

Here is a brief overview of web platforms that one might encounter online, as created by web developers:

"Web Developers... take website design and actually make a functioning website from it. Web developers use HTML, CSS, Javascript, PHP and other programming languages."

For details, view Web Design or Development What's the difference article.

With that in mind, it is important to become familiar with the common terms that will be encountered when engaging with a Google form using voice over. 

Vision teachers would benefit from briefly explaining some of the terminology and functions of the web language your students will encounter while using voice over on various websites.

Here are some web language terms as explained by various websites:

For details, view Web Development 101: What is a Web Developer?

Heading levels

"HTML defines six levels of headings. A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least.

For example:

<H1>This is a top level heading</H1> Here is some text.

<H2>Second level heading</H2> Here is some more text."

Additional Heading levels information.

List Start

"The start attribute specifies the start value of the first list item in an ordered list."

Additional List Start information.

Text Field

"The HTML <form> element defines a form that is used to collect user input"

You might hear “Text field is editing”, which basically means you are ready to start writing in the selected field.

Radio Button  Example of an accessible  multiple choice template with selectable radio button answers. Question: This is a "multiple choice" type example. Answers: Option 1, 2, and 3.

"Radio buttons let a user select ONE of a limited number of choices"

Additional Radio Button information.

Insertion Point

"In graphics-based programs, the insertion point is the point where the next characters typed from the keyboard will appear on the display screen. The insertion point is usually represented by a blinking vertical line."

Additional Insertion Point information.

Combo Box Collapsed

"Combo box: Indicates a drop down list. Used in a form to collect user input"

Additional Combo Box Collapsed information.

"Collapsibles are useful when you want to hide and show large amount of content"

Additional Collapse information.

Form Controls

"In addition, online forms contain controls. Controls are objects that display data or make it easier for users to enter or edit data, perform an action, or make a selection. In general, controls make the form easier to use. Examples of common controls include list boxes, option buttons, and command buttons."

Additional Form Control information

 

Additional Refreshable Braille Display Resources

APH Refreshabraille 18 User Guide

APH Refreshabraille 18 tutorial

*Note:  VoiceOver speed in the video is set to 60%.

Add new comment