> Markdown version of [/videos/1314-wearedevelopers-live-gaps-in-css-eu-accessibility-act-and-more](https://www.wearedevelopers.com/videos/1314-wearedevelopers-live-gaps-in-css-eu-accessibility-act-and-more). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# WeAreDevelopers LIVE - Gaps in CSS,  EU Accessibility Act and more!

Emma Dawson warns that treating accessibility as a post-launch checklist is a major liability. Master new CSS features and semantic HTML to prepare for the strict EU Accessibility Act.

- **Speakers:** [Chris Heilmann](https://www.wearedevelopers.com/@chris-heilmann), [Daniel Cranney](https://www.wearedevelopers.com/@daniel-cranney), [Emma Dawson](https://www.wearedevelopers.com/@emma-dawson)
- **Event:** WeAreDevelopers LIVE
- **Published:** March 26, 2025
- **Duration:** 1:10:08
- **URL:** https://www.wearedevelopers.com/videos/1314-wearedevelopers-live-gaps-in-css-eu-accessibility-act-and-more

## Summary

The video explores the critical intersection of modern CSS capabilities, semantic HTML, and web accessibility, featuring insights from accessibility expert Emma Dawson. Stemming from her background in inclusive education, Dawson emphasizes that true web accessibility requires a mindset shift from treating inclusive design as a post-launch checklist to baking it into foundational coding choices. As the web development community grapples with newly proposed CSS features—such as form control styling, gap properties, and custom separators—there is a widespread tendency to build custom widgets out of standard `div` elements just to achieve a specific aesthetic. However, embracing upcoming native styling controls for inherently accessible elements like drop-downs and select boxes heavily reduces the need for hacky workarounds and guarantees out-of-the-box compatibility with assistive technologies.

Balancing design aesthetics with inclusive user experiences relies heavily on proper semantic structure. Developers are encouraged to avoid overusing ARIA attributes as a band-aid for broken HTML, and to instead leverage underutilized native elements like `fieldset` and `legend` for form grouping, or `details` and `summary` for collapsible content. A subtle but vital technical consideration is the distinction in CSS unit usage: while `rem` is ideal for font sizing, using pixels for margins and padding ensures that layouts remain easily scrollable and readable when low-vision users scale their browser text by 400%. Furthermore, browsers often fail to cleanly translate visually custom UIs into accessibility trees, making proper DOM ordering—like correctly placing `tfoot` elements at the top of the source code—vital for screen readers and search bots alike.

With the European Accessibility Act (EAA) expanding compliance mandates to private sector platforms like e-commerce and banking across the EU, companies are scrambling to meet strict legal benchmarks. The panel strongly warns against seeking shortcuts through AI-generated overlays or automated alt-text bots, noting that they frequently fail to convey UI context or provide a genuinely usable experience. Instead, teams should combine automated audits using tools like axe DevTools and Microsoft Accessibility Insights with manual usability workflows tested by daily screen reader users. Ultimately, building a compliant web is an ongoing practice where "progress is better than perfection," ensuring users aren't locked out of modern services due to unconsidered design choices.

**Keywords:** web accessibility standards, european accessibility act, css form control styling, semantic html elements, screen reader compatibility, assistive technology testing, automated accessibility audits, css gap properties, aria role implementation, wcag compliance, html fieldset and legend, axe devtools, microsoft accessibility insights, ui usability testing, alt text generation

## Chapters

1. **Moving from teaching to web accessibility development** (02:09) — Retraining from teaching and supporting various needs brings natural inclusivity into software engineering practices.
1. **Learning web development by replicating existing interfaces** (08:29) — Building functional clones of real-world websites provides implicit code and user interface design lessons.
1. **Proposing native CSS separators for column gaps** (14:54) — A new browser property proposal attempts to replace hacky border removal tricks when styling layout gutters.
1. **Balancing fully styled form controls with native accessibility** (18:21) — Expanding native CSS support for form elements prevents developers from building poorly accessible custom widgets.
1. **Using spacing properties for flex and grid containers** (25:37) — Handling element margins and padding safely requires understanding responsive behaviors without breaking structural layout patterns.
1. **Preparing applications for the European Accessibility Act** (31:03) — Upcoming legal obligations require digital services to avoid automated overlay loopholes and ensure systemic compliance.
1. **Standardizing initial web accessibility testing checklists** (40:50) — Leveraging recognized auditing browser extensions establishes a prioritized foundational list of code issues to verify.
1. **Improving digital multimedia consumption with accurate captioning** (44:46) — Providing precise subtitles and audio descriptions ensures media is permanently viable despite connectivity or sensory boundaries.
1. **Verifying assistive technology compatibility across web browsers** (49:10) — Testing combinations of screen readers and operating systems reveals specific edge cases requiring functional patching strategies.
1. **Retaining list semantics when modifying CSS counter styles** (53:43) — Removing default bullet points via basic CSS rules can force specific browser engines to unintentionally strip list semantics.
1. **Crafting animated accordions carefully using native details elements** (57:10) — Building collapsing data structures with standard HTML elements requires caution to respect user-preferred system motion settings.
1. **Grouping related form inputs securely with fieldset legends** (60:32) — Properly wrapping complex form sections relays context for assistive technologies without needing visual CSS hacks.
1. **Structuring the HTML table footer order for clarity** (63:56) — Targeting table footers before primary data content solves structural hierarchy logic while rendering correctly for users.
1. **Integrating accessibility practices early in the development lifecycle** (67:28) — Embracing a mindset of inclusive initial code implementation avoids heavy refactoring and builds inherently robust component architecture.

## Related Moments

- [Addressing web accessibility challenges in development teams](https://www.wearedevelopers.com/videos/649-making-interactions-accessible-to-all-users) (from "Making Interactions Accessible to All Users")
- [Building interactive accessibility learning resources for web developers](https://www.wearedevelopers.com/videos/1742-wearedevelopers-live-inclusion-accessibility-automation) (from "WeAreDevelopers LIVE – Inclusion, Accessibility & Automation")
- [Introduction to building accessible web frontends](https://www.wearedevelopers.com/videos/403-the-what-why-who-and-how-of-accessibility-on-the-web) (from "The What, Why, Who and How of accessibility on the web")
- [Introduction to web accessibility and assistive technologies](https://www.wearedevelopers.com/videos/507-decoding-web-accessibility-through-audit) (from "Decoding web accessibility through audit")
- [Audience questions on accessibility and framework tradeoffs](https://www.wearedevelopers.com/videos/459-extending-html-with-web-components) (from "Extending HTML with Web Components")
- [Utilizing developer tools to test and improve accessibility](https://www.wearedevelopers.com/videos/1847-secure-and-accessible-login-systems-ramona-schwering) (from "Secure and Accessible Login Systems - Ramona Schwering")

## Related Articles

- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [How Developers Can Focus on Maintaining Satisfaction With Accessibility](https://www.wearedevelopers.com/magazine/109-how-developers-can-focus-on-maintaining-satisfaction-with-accessibility)
- [12 ways to fix an inaccessible web site  - the CODE100 Accessibility Scavenger Hunt results](https://www.wearedevelopers.com/magazine/511-12-ways-to-fix-an-inaccessible-web-site-the-code100-accessibility-scavenger-hunt-results)
- [Find all accessibility problems in a page to take part in the CODE100 final!](https://www.wearedevelopers.com/magazine/507-find-all-accessibility-problems-in-a-page-to-take-part-in-the-code100-final)

## Related Jobs

- [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**
- [Working Student Frontend Development](https://www.wearedevelopers.com/jobs/ext/1185791-working-student-frontend-development) at **ZEISS Group**
- [Software Engineer Frontend (all genders welcome) in the field of Water Line Integrity Solutions](https://www.wearedevelopers.com/jobs/ext/127888-software-engineer-frontend-all-genders-welcome-in-the-field-of-water-line-integrity-solutions) at **Rosenxt Group**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/646086-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/643147-remote-senior-full-stack-engineer) at **Edge Impulse**