Safari Technology Preview 237: Enhanced Accessibility and CSS Features
<p>Apple has released <strong>Safari Technology Preview 237</strong>, the latest experimental version of its browser, now available for download on <strong>macOS Tahoe</strong> and <strong>macOS Sequoia</strong>. This update brings a host of improvements spanning <strong>accessibility</strong>, <strong>CSS</strong>, <strong>DOM</strong>, <strong>HTML</strong>, <strong>networking</strong>, <strong>rendering</strong>, and <strong>SVG</strong>. Existing users can update via System Settings → General → Software Update.</p>
<p>Based on WebKit revisions 305774@main…306595@main, this release focuses on refining core web standards and fixing long-standing bugs. Below, we break down the key changes.</p>
<h2 id="accessibility"><a href="#accessibility">Accessibility Improvements</a></h2>
<p>Several critical accessibility bugs have been addressed to ensure better screen reader and keyboard navigation support:</p><figure style="margin:20px 0"><img src="https://webkit.org/wp-content/themes/webkit/images/preview-card.jpg" alt="Safari Technology Preview 237: Enhanced Accessibility and CSS Features" style="width:100%;height:auto;border-radius:8px" loading="lazy"><figcaption style="font-size:12px;color:#666;margin-top:5px">Source: webkit.org</figcaption></figure>
<ul>
<li><strong>Slot elements and <code>aria-labelledby</code></strong>: Fixed to correctly use assigned slotted content for accessible names, ignoring hidden slotted nodes.</li>
<li><strong><code><meter></code> element</strong>: Labels from <code>aria-label</code> and <code>title</code> now remain consistent.</li>
<li><strong>Display: contents with shadow DOM</strong>: Content hidden via <code>display: contents</code> is now properly read by assistive technologies when referenced by <code>aria-labelledby</code>.</li>
<li><strong>Checkbox naming</strong>: <code>aria-labelledby</code> correctly uses the checkbox name from an associated <code><label></code> element, not its value.</li>
<li><strong>Grid elements in shadow root</strong>: Child rows are now exposed correctly to VoiceOver.</li>
<li><strong><code>aria-controls</code> and <code>aria-expanded</code></strong>: Elements with these attributes and <code>hidden</code> no longer appear in VoiceOver’s Form Controls menu.</li>
<li><strong><code>::first-letter</code> text</strong>: No longer ignored in the accessibility tree when it’s the only text content.</li>
</ul>
<h2 id="css"><a href="#css">CSS Enhancements and Fixes</a></h2>
<h3>New Feature: <code>:heading</code> Pseudo-class</h3>
<p>Developers can now use the <code>:heading</code> pseudo-class selector to target any heading element (h1–h6) more efficiently.</p>
<h3>Resolved Issues</h3>
<ul>
<li><strong>@scope and form elements</strong>: CSS rules within <code>@scope</code> now apply correctly to <code><input></code> and <code><textarea></code>.</li>
<li><strong>Grid layout</strong>: Dynamic changes to <code>flow-tolerance</code> now trigger proper relayout for <code>display: grid-lanes</code>.</li>
</ul>
<h2 id="dom"><a href="#dom">DOM Correction</a></h2>
<ul>
<li><strong>SVG coordinate system</strong>: <code>offsetX</code> and <code>offsetY</code> values now correctly use the outermost SVG as the base for coordinate calculations.</li>
</ul>
<h2 id="html"><a href="#html">HTML: ToggleEvent Gets <code>source</code> Attribute</a></h2>
<p>The ToggleEvent interface now supports a <code>source</code> attribute, enabling developers to identify which element triggered the toggle.</p>
<h2 id="networking"><a href="#networking">Networking Fixes</a></h2>
<ul>
<li><strong>X-Frame-Options</strong>: Now strips only tab and space characters, not vertical tabs, preventing false positives.</li>
<li><strong>Range request validation</strong>: Properly handles HTTP 416 responses (Requested Range Not Satisfiable), improving video streaming and large downloads.</li>
</ul>
<h2 id="rendering"><a href="#rendering">Rendering Improvements</a></h2>
<p>A series of table and layout fixes enhance visual consistency:</p>
<ul>
<li><strong>Rowspan and border colors</strong>: Cells spanning multiple rows now apply the correct bottom border color.</li>
<li><strong><code><marquee></code> effect on tables</strong>: No longer causes incorrect table width calculations.</li>
<li><strong>Visibility: collapse on columns</strong>: Table layout properly handles collapsed columns.</li>
<li><strong>Absolutely positioned replaced elements</strong>: Intrinsic sizing works correctly.</li>
<li><strong>Percentage padding in table cells</strong>: Now resolves against column widths.</li>
<li><strong>Table height distribution</strong>: Applies to all <code>tbody</code> sections, not just the first.</li>
</ul>
<h2 id="svg"><a href="#svg">SVG: Color-interpolation Support</a></h2>
<p>Gradients now support the <code>color-interpolation</code> attribute, allowing smoother color transitions in scalable vector graphics.</p>
<p>For full details, visit the <a href="https://webkit.org/blog/">WebKit blog</a> or download the preview from the official site.</p>