Using the platform with a screen reader or keyboard

This guide is for anyone who studies with a screen reader, with the keyboard alone, or with both. It does not teach your screen reader: you already know it better than we do. It describes how this platform is built, where things are on each page, and what to expect when you use them, so nothing takes you by surprise.

If something here does not match what you hear or what happens, please tell us. The last section says how.

The basics, on every page

  • Skip to content. The first thing the Tab key reaches on every page is a "Skip to content" link. It takes you past the header (and, on a lesson page, past the course navigation) straight to the main content.
  • Landmarks. Every page has a header and a main region, and most have a footer. Lesson pages add a region called "Course navigation" with the list of lessons.
  • Headings. Every page has exactly one level 1 heading, its title. Lessons are organized with level 2 and level 3 headings, so moving by heading is the fastest way to skim a lesson.
  • Language. The platform is available in English, Brazilian Portuguese, and Spanish, and every page declares its language, so your screen reader can switch voices. Use the "Change language" control in the header: a dropdown on small screens, and a group of three buttons on larger ones. Your choice is remembered.

The courses page

This is where you land after signing in.

  • Find your course. A section near the top narrows the catalog by tool, by level, and by free or paid. On small screens each one is a dropdown; on larger screens each is a group of buttons, where the selected one is announced as pressed. The number of matching courses is updated as you change a filter, and a "Clear filters" button brings every course back.
  • Your courses, by progress. The courses are grouped under headings: Continue learning, Not started yet, Explore more courses, and Completed. Each course card has a link to its course page.

A course page

  • The level 1 heading is the course title.
  • The "Start Course" button (or "Resume Course", once you have begun) always takes you to the next lesson you have not completed.
  • Under the "Course Content" heading, every lesson has one control named after it: a link called "Start" or, for a lesson you finished, "Review", followed by the lesson title, or a disabled "Locked" button, also followed by the title. Your screen reader's list of links is a quick way to see every lesson you can open.
  • Lessons unlock in order. Most lessons end with a quiz, and a lesson counts as done once you score 100% on it. A lesson without a quiz counts as done when you open it.
  • Once you have started, "Your Progress" is a progress bar with the percentage of the course you have completed.

Lesson pages

A lesson page reads in this order: the course navigation, a toolbar with the header controls, then the lesson itself. "Skip to content" takes you straight to the lesson.

  • Course navigation. The list of every lesson in the course, grouped under a heading per section, with the lesson you are on marked as the current page. Locked lessons are announced as locked, and completed ones as completed. It also has a "Reset progress" button, which asks you to confirm first. On small screens it is hidden behind an "Open menu" button at the top of the page; once open, focus moves into it, and Escape or its "Close menu" button closes it again.
  • Moving between lessons. The same three controls sit at the top and at the bottom of every lesson: "Previous lesson" followed by its title, "Back to the course home", and "Next lesson" followed by its title. While a quiz is still waiting for a 100% score, "Next lesson" is disabled, and the text right after it says why.
  • The lesson. The lesson type (Introduction, Lesson, Bonus, or Conclusion) comes first, then the level 1 heading with the lesson title, then the content.
  • Code examples. Code examples longer than one line have a "Copy code" button right after them. A one-line example has none, but it is short enough to select and copy by hand.
  • Hints and notes. Two kinds of quote appear inside lessons. One that starts with a monkey covering its mouth (🙊) holds a hint: stop there if you want to try the exercise on your own first. One that starts with a teacher (👨‍🏫) is a note from the instructor.
  • How lessons end. Most lessons finish with the same headings: "Exercise" (sometimes numbered), "Show the world what you learned", and "Suggested content". Each title ends with an emoji (a target, a globe, and books), which your screen reader may read after it.
  • Sharing on LinkedIn. Under "Show the world what you learned" there is a suggested post, then a "Share on LinkedIn" button. It copies the post, changes its own text to say so, and, on a computer, opens LinkedIn in a new tab three seconds later, ready for you to paste it.
  • Quiz. A level 2 heading called "Quiz" comes right after the lesson content. See the next section.
  • Help. At the end of every course and lesson page, a "Send feedback" link and a "Get support" link are always available.

Quizzes

  • Each question starts with "Question 1 of 3" (or however many there are), then the question, then the options.
  • The options are a group of radio buttons. Use the arrow keys to move between them, then Tab to the "Check Answer" button.
  • After you check an answer, focus moves to the result, which starts with "Correct." or with "Incorrect. The correct answer is:" followed by the right option, and then an explanation. The options also say which one was the correct answer and which was yours. Press Tab to reach "Next Question", or "Finish" on the last one.
  • When you finish, focus moves to the results: how many answers you got right, and what that means. Below it, "Try Again" (or "Retake Quiz", after a perfect score) starts over.
  • You need every answer right to unlock the next lesson. You can try as many times as you like.

Solutions in the hands-on lessons

In hands-on courses, many exercises end with a "Show solution" button, sometimes right after a 🙊 hint. It tells you whether it is expanded or collapsed. Once expanded, it shows the commit with the instructor's solution, then one button per changed file, each also announced as expanded or collapsed. Every open file is a region named after the file and can be reached with Tab. The commit, the file names, and the code are read in English on every language version, since that is the language they are written in.

The TAT Shell

Two courses, JavaScript for QAs and Unit Testing with Jest, have a small terminal at the end of each lesson page, called the TAT Shell. It is experimental.

  • It is a region named "TAT Shell". It starts closed: activate its button with Enter or Space to open it, and focus moves to the "Command" field.
  • Type a command and press Enter to run it. Shift+Enter adds a new line instead. The up and down arrows bring back earlier commands. Ctrl+C stops a script that is still running, and Ctrl+L clears the screen. Type help to hear what it can do.
  • The output is a log region called "Shell output", so your screen reader reads new output as it arrives.
  • Some code examples have a "Run in TAT Shell" button under them. It opens the shell if it is closed, then runs that example for you.

The header and your account menu

  • Change language: see the basics above.
  • Toggle theme: switches between the light and the dark theme.
  • Background circles: on larger screens, signed-in students can turn off the decorative circles behind the page. They are purely visual and hidden from screen readers either way.
  • User menu: the button with your initials, once you are signed in. It opens a menu with All Courses, Achievements, Fundamentals, Take the tour (on pages that have one), Screen reader guide (this page), and Logout. Move through the items with the arrow keys or Tab, and press Escape to close it.

The guided tours

The first time you open the courses page, and the first time you open each course page, a short guided tour starts. Each step is a dialog: focus moves onto the step's text, which tells you which step it is, its title, and its description. Press Tab to reach the Back, Next, and Skip buttons. Escape leaves the tour. You can take it again at any time from "Take the tour" in your account menu.

The tour points at things on the screen visually. Everything it points at is also described in this guide.

Free courses without an account

The free courses can be studied without signing in. On their first lesson, you are asked for your name and email before you can continue to the next one. The form is titled "Before you continue" and has two labelled fields, Full Name and Email. Its "Unlock the course" button stays disabled until both are filled in, with a valid email address.

Certificates

The conclusion lesson of every course has a form where you type the name to print on your certificate, and a button to download it as a PDF. Be aware that the PDF is an image of the certificate, so a screen reader cannot read its text. The page itself shows the same information as text before you download it.

Known limitations

The Accessibility Statement lists what we know does not work well yet. Two are worth knowing about before you start:

  • On macOS, VoiceOver speaks a few status messages and button names in its own default voice instead of the language of the page, so in Portuguese or Spanish they can be read with an English accent. We are moving those texts into the page content, where they are read in the right language. The quizzes and the guided tours already work that way.
  • The certificate PDF is an image, as described above.

Tell us what does not work

You know better than anyone where the platform gets in your way. Write to walmyr@talkingabouttesting.com, or, once signed in, use the "Send feedback" link at the end of any course or lesson page and pick the "Bug or problem" category. We aim to answer within a few business days.