– The personal website of Sara Soueidan, inclusive Web UI engineer

Sara Soueidan's platform provides knowledge for frontend developers and web designers, offering expertise in SVG, accessibility, and web standards. Through detailed tutorials, workshops, and speaking engagements, Sara Soueidan empowers developers to create inclusive and accessible web experiences while leveraging the full potential of modern web technologies.

Sara Soueidan

CSS now offers a JavaScript-free way to create scrollspy effects using the scroll-target-group property and :target-current pseudo-selector. By applying scroll-target-group: auto to a container of anchor links, browsers automatically highlight the active link as users scroll through content sections. However, current implementations lack proper accessibility support, as Chrome doesn't automatically add aria-current attributes to active links, creating WCAG compliance issues that still require JavaScript solutions.

CSS-only scrollspy effect using scroll-marker-group and :target-current

Enriching HTML anchors to become scroll markers

The semantic accessibility of HTML scroll markers