Safari Technology Preview 237: Enhanced Accessibility and CSS Features

By ✦ min read

Apple has released Safari Technology Preview 237, the latest experimental version of its browser, now available for download on macOS Tahoe and macOS Sequoia. This update brings a host of improvements spanning accessibility, CSS, DOM, HTML, networking, rendering, and SVG. Existing users can update via System Settings → General → Software Update.

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.

Accessibility Improvements

Several critical accessibility bugs have been addressed to ensure better screen reader and keyboard navigation support:

• Slot elements and aria-labelledby: Fixed to correctly use assigned slotted content for accessible names, ignoring hidden slotted nodes.
• <meter> element: Labels from aria-label and title now remain consistent.
• Display: contents with shadow DOM: Content hidden via display: contents is now properly read by assistive technologies when referenced by aria-labelledby.
• Checkbox naming: aria-labelledby correctly uses the checkbox name from an associated <label> element, not its value.
• Grid elements in shadow root: Child rows are now exposed correctly to VoiceOver.
• aria-controls and aria-expanded: Elements with these attributes and hidden no longer appear in VoiceOver’s Form Controls menu.
• ::first-letter text: No longer ignored in the accessibility tree when it’s the only text content.

CSS Enhancements and Fixes

New Feature: :heading Pseudo-class

Developers can now use the :heading pseudo-class selector to target any heading element (h1–h6) more efficiently.

Resolved Issues

• @scope and form elements: CSS rules within @scope now apply correctly to <input> and <textarea>.
• Grid layout: Dynamic changes to flow-tolerance now trigger proper relayout for display: grid-lanes.

DOM Correction

• SVG coordinate system: offsetX and offsetY values now correctly use the outermost SVG as the base for coordinate calculations.

HTML: ToggleEvent Gets source Attribute

The ToggleEvent interface now supports a source attribute, enabling developers to identify which element triggered the toggle.

Networking Fixes

• X-Frame-Options: Now strips only tab and space characters, not vertical tabs, preventing false positives.
• Range request validation: Properly handles HTTP 416 responses (Requested Range Not Satisfiable), improving video streaming and large downloads.

Rendering Improvements

A series of table and layout fixes enhance visual consistency:

• Rowspan and border colors: Cells spanning multiple rows now apply the correct bottom border color.
• <marquee> effect on tables: No longer causes incorrect table width calculations.
• Visibility: collapse on columns: Table layout properly handles collapsed columns.
• Absolutely positioned replaced elements: Intrinsic sizing works correctly.
• Percentage padding in table cells: Now resolves against column widths.
• Table height distribution: Applies to all tbody sections, not just the first.

SVG: Color-interpolation Support

Gradients now support the color-interpolation attribute, allowing smoother color transitions in scalable vector graphics.

For full details, visit the WebKit blog or download the preview from the official site.