This page is for computer training students. You will get to know the nine elements you meet most often on websites and apps, and try each one right away. Nothing is saved or sent, so feel free to try as much as you like.
How to practise
- Press Tab to move to the next element and Shift+Tab to go back.
- Each element has its own heading. In NVDA, press H to jump to the next heading, or 2 for level 2 headings.
- When you reach a text field, combo box or slider, NVDA usually switches to focus mode (you hear a sound). Press NVDA+Space to switch between browse mode and focus mode.
- Every "Try it" box has a result line. It is read out automatically whenever you change something, so you know what happened.
1. Button
What it is: An element that runs one action when pressed, such as Send, Save, Cancel or Play.
Why it exists: It makes clear when something happens. A button does not store a choice; it only tells the computer to do something now.
How to use it: Press Enter or Space.
Try it
Press the button below a few times and listen to the result.
2. Text field
What it is: A box for typing short text on one line, such as a name, email or password.
Why it exists: For answers that cannot be picked from a list, because they differ for every person.
How to use it: Type as usual. Left and Right arrow move the cursor by one letter, Backspace deletes. Enter usually submits the form instead of starting a new line.
Try it
Type your nickname, then wait a moment.
3. Text area
What it is: A box for typing longer text over several lines, such as a message, comment or story.
Why it exists: A text field has only one line. For longer writing, a text area gives room and allows new lines.
How to use it: Type as usual. Enter starts a new line. Up and Down arrow move between lines. Press Tab to leave.
Try it
Write two or three sentences about your day. Try pressing Enter for a new line.
4. Checkbox
What it is: A small box that can be checked or unchecked. There are usually several in a group.
Why it exists: For choices where you may pick more than one, or none at all. For example toppings, or agreeing to terms and conditions.
How to use it: Press Space to check or uncheck. Move to the next box with Tab.
Try it
Pick extras for your iced tea. You may pick all of them, or none.
5. Radio button
What it is: A group of round choices. Only one can be selected; choosing one releases the others.
Why it exists: For choices that must be exactly one, such as a size, gender or payment method. The name comes from old radios: pressing one station button made the others pop up.
How to use it: Tab into the group. Up/Down arrow (or Left/Right) moves and selects at once. Tab again leaves the group.
Try it
Choose a cup size. Notice that only one can be selected.
6. Switch
What it is: An on/off element, like a light switch on the wall.
Why it exists: Like a checkbox, but it takes effect immediately without a Save button. Common in phone settings: Wi-Fi, Bluetooth, airplane mode.
How to use it: Press Space or Enter to turn it on or off.
Try it
Turn the bedroom light on, then off again.
7. Combo box
What it is: A box that shows one choice. When opened, a list of other choices appears.
Why it exists: It saves space when there are many choices, such as cities, countries or birth dates. With 50 choices, radio buttons would be far too long.
How to use it: Up/Down arrow changes the choice directly. Alt+Down arrow opens the list. Type the first letter to jump, for example M for Medan.
Try it
Choose your home city. Also try typing the first letter of a city.
8. List
What it is: A box with several choices that are always visible, without opening anything.
Why it exists: Like a combo box, but the choices are shown at once, so people can compare them. For example the file list in an Open File window.
How to use it: Tab into the list. Up/Down arrow moves and selects at once. Home and End go to the start and end.
Try it
Pick the practice day that suits you best.
9. Slider
What it is: An element for choosing a number within a range by sliding from low to high.
Why it exists: For values that need not be exact, like volume, screen brightness or NVDA's speech rate. Faster than typing a number.
How to use it: Right/Up arrow raises, Left/Down lowers. Page Up/Page Down jump further. Home goes to the lowest, End to the highest.
Try it
Set the music volume. Also try Home and End.
Summary
This table sums up all nine elements. The names NVDA reads may differ slightly depending on NVDA's language and the browser.
| Element | NVDA reads it as | Main keys | Used for |
|---|---|---|---|
| Button | button | Enter or Space | Running one action now. |
| Text field | edit | Type; Left/Right arrow | Short answers on one line. |
| Text area | edit, multi line | Type; Enter = new line | Long text over several lines. |
| Checkbox | check box, checked / not checked | Space; Tab to the next | Pick many, or none. |
| Radio button | radio button, checked / not checked, 1 of 3 | Arrows inside the group | Exactly one of a few choices. |
| Switch | switch, on / off | Space or Enter | On/off that applies at once. |
| Combo box | combo box, collapsed / expanded | Arrows; Alt+Down arrow | One of many choices, saving space. |
| List | list, then the name of the choice | Arrows; Home/End | Choices that should all be visible. |
| Slider | slider, then the number | Arrows; Page Up/Down; Home/End | A number in a range, not exact. |
Anything still unclear?
Just tell us what you found difficult. Your question goes straight to the teacher and will be discussed in the next session.