The Fragile Accessibility Tree: Why Semantic HTML is Key to Performance

Joan

León

Gràcies

joanleon.dev

@nucliweb

@nucliweb.net

nucliresources

Joan Leon photo

We Improve Your Website's Performance Increase your revenue and make your users happier with our web auditing and optimization services. Us +20 companies recommend us

https://perf.reviews/

Joan

León

Web Performance

Accessibility

Joan

León

How a browser works?

Joan

León

Illustrated diagram explaining how a web browser works. It shows the sequence from when the user navigates to a page, downloads the HTML, starts analysing the HTML during download, obtains and analyses the CSS, calculates styles, processes the layout, paints and finally updates the view. It includes timelines separating network and execution tasks, along with drawings of browser windows with animated expressions.

How Browsers Work

Joan

León

Illustration showing how the DOM plus ARIA information maps to the accessibility tree. On the left, there is a browser window displaying HTML code for a webpage structure. Arrows point from the HTML code to a tree diagram on the right, representing the accessibility tree with colored nodes and branches.

Joan

León

Screenshot of a mobile settings screen with a purple header titled ‘Settings’. Below, a list of ringtone options is shown as radio buttons. The choices include None, Callisto, Ganymede, and Luna, with ‘Callisto’ selected.

Joan

León

A screenshot showing HTML markup for a Material Design radio button. The code defines a radio button with the ID "ganymede" and name "moons", wrapped within a div with the class "mdc-radio". It includes nested divs for the radio button's visual elements: "mdc-radio__background", "mdc-radio__outer-circle", and "mdc-radio__inner-circle". A label element with "for='ganymede'" displays the text "Ganymede" next to the radio button.

Joan

León

A slide with a purple background titled "To make this you need:". It lists the technical requirements to build a Material Design component, specifically the one shown in the previous image (a radio button). The requirements are broken down into three columns: HTML (6 elements, 9 attributes, DOM depth of 3), CSS (66 selectors, 141 properties, 10k minified), and JavaScript (2,374 lines unminified, 30k minified). A note at the bottom says, "Includes the Material ripple effect."

Joan

León

Carmen Torrecillas

A slide with a white background and large, bold black text. On the left, the text reads: momento STOP On the right, the text reads: Stop, Take a breath, Observe and Proceed [Emoji of a laughing-crying face] ¿¿...y si lo rehacemos todo... otra vez... en nativo?? (Spanish for: "...and what if we redo everything... again... natively??") The slide likely represents a moment of reflection or a challenging question about rewriting a project in native code after stopping to observe the current situation.

Joan

León

A screenshot showing the minimal HTML markup for a standard radio button. The code defines an input element with type="radio", name="moons", and id="ganymede". This input is followed by a label element with for="ganymede" and the text "Ganymede". Both the input and label are wrapped within a div with the class "c-radio".

Joan

León

A slide with a purple background and the main title "HTML". Below the title is a two-column table comparing the HTML complexity for a Material Design component versus an "A11Y Styled Form Controls" component (referencing the radio button from previous images). The comparison table shows: Material Design: 6 elements, 9 attributes, DOM depth of 3. A11Y Styled Form Controls: 3 elements, 5 attributes, DOM depth of 2.

Joan

León

A slide with a purple background and the main title CSS. Below the title is a two-column table comparing the CSS complexity for a Material Design component versus an A11Y Styled Form Controls component (referencing the radio button). The comparison table shows: Material Design: 66 selectors, 141 properties, 10k minified. A11Y Styled Form Controls: 20 selectors, 42 properties, 1k minified.

Joan

León

A slide with a purple background and the main title JavaScript. Below the title is a two-column table comparing the JavaScript complexity for a Material Design component versus an A11Y Styled Form Controls component (referencing the radio button). The comparison table shows: Material Design: 2,374 lines unminified, 30k minified. A11Y Styled Form Controls: None, 0k minified.

Joan

León

Developer

Experience

User

Experience

>

Joan

León

Joan

León

Web Performance

Accessibility

&

Joan

León

Learn Accessibility

Joan

León

Accessible is Performant | Eric Bailey | performance.now() 2024

Accessible is Performant | Eric Bailey | performance.now() 2024

Joan Leon photo

Gràcies

https://slides.com/joanleon/web-performance-accessibility

Web Performance & Accessibility

By Joan León

Web Performance & Accessibility

15

Joan León PRO

⚡️ Web Performance Artisan at @perfreviews_ | @GoogleDevExpert in #WebTech | @cloudinary Ambassador