How Speak Screen and Speak Selection Work in Safari

This article explains the technical process behind Apple's Speak Screen and Speak Selection accessibility features within the Safari web browser. It covers how Safari extracts text from a webpage's code, filters out unnecessary elements for a clean reading experience, and utilizes the operating system's text-to-speech engine to convert written digital content into spoken audio.

Accessing the Webpage Structure

When a webpage loads in Safari, the browser creates a Document Object Model (DOM), which is a structured map of all the text, code, and elements on the page. Alongside the DOM, Safari generates an "Accessibility Tree." This tree strips away purely visual styling and organizes the webpage into a hierarchy of information specifically designed for assistive technologies. When you activate Speak Screen or Speak Selection, the operating system communicates directly with Safari’s Accessibility Tree to locate the text.

Speak Selection: Targeted Extraction

Speak Selection is the simpler of the two processes because the user defines the boundaries of the text.

  1. Boundary Detection: When you highlight text on a webpage, Safari identifies the exact start and end points of your selection within the DOM.
  2. Text Scraping: When you tap "Speak," Safari extracts only the plain text within those boundaries, ignoring underlying HTML tags like bolding or hyperlinks.
  3. Audio Conversion: That isolated block of text is sent directly to the system's speech synthesizer to be read aloud.

Speak Screen: Intelligent Filtering

Speak Screen is more complex because it must read an entire webpage without reading clutter like navigation menus, advertisements, and sidebars.

  1. Reader Mode Integration: When triggered with a two-finger swipe down from the top of the screen, Speak Screen often relies on the same underlying algorithm that powers Safari's "Reader" view.
  2. Content Scoring: Safari analyzes the webpage's HTML tags (looking for <article>, <main>, or <p> tags) and calculates the density of text versus links. This allows it to separate the core article from the surrounding webpage template.
  3. Sequential Queuing: Once the main content is identified, Safari queues the headings and paragraphs in the logical order they appear on the page, skipping hidden text and decorative elements.

Language Detection and Processing

Before a single word is spoken, the system must know how to pronounce the text. Safari checks the webpage's HTML code for language attributes (such as lang="en" for English or lang="es" for Spanish).

If the webpage is coded correctly, the Speak feature will automatically switch its voice accent and pronunciation rules to match the language of the text. If no language is specified in the code, the system analyzes the first few words of the extracted text to guess the language before defaulting to the user's primary device language.

Speech Synthesis and Real-Time Highlighting

Once the text is extracted and the language is determined, the data is handed over to the operating system’s Text-to-Speech (TTS) engine.

  1. Text Normalization: The TTS engine converts symbols, numbers, and abbreviations into full words (for example, changing "$5" to "five dollars" or "Dr." to "Doctor") based on the context of the sentence.
  2. Prosody Generation: The engine analyzes punctuation—such as commas, periods, and question marks—to apply natural-sounding pauses and vocal inflections.
  3. Visual Synchronization: If the "Highlight Content" setting is turned on, the TTS engine sends time-stamped data back to Safari as it speaks. Safari uses this data to draw a visual highlight box over the exact word and sentence currently being read, scrolling the webpage automatically as the voice progresses down the page.