Unit 6: POSH in modern frameworks

Semantic HTML still matters

You don't get to skip semantics.

Your app still renders to the DOM, and HTML is still the foundation.

Frameworks are helpers, not substitutes for web standards.

JSX

JSX lets you write div soup quickly.

This is a cultural problem, not a technical one. It's easy to fall into the trap.

Don't omit semantics in MVPs.

Don't copy non-semantic components.

Don't prioritize speed or styling.

Semantic JSX

Takes intention and careful planning, just as it does if you're writing HTML directly.

Patterns to watch out for

1. Components without structure.
2. Accessibility afterthoughts.
3. Link and button mixups.

Reusable components can be your best friend...
...or your worst enemy

If you build reusable components with care, you get accessibility everywhere with little effort.

On the other hand, if your components aren't accessible, you can't build an accessible app. Mistakes multiply.

What helps

1. Accessibility linters/checkers in the CI pipeline.
2. Run accessibility checks in your browser.
3. Test your markup manually before committing.

Wrap form elements in a form

Note: This can mean wrapping your entire app in a form sometimes.

Allow your form fields to work as expected with assistive technology by triggering forms mode and autocomplete.

Apply all the same rules in JSX as HTML:

• Ensure form fields have labels.
• Use fieldsets and legends around field groups.
• Use buttons and links correctly.
• Avoid interactive <div>s and <span>s.
• Add alternative text for non-text elements.

Accessible React button

React’s JSX compiles this correctly into a real <button>.

No div onClick nonsense.

Accessible Vue links

With Router:

<router-link> renders an <a>.

Accessible React Toggle button

Accessible Svelte email form

Accessible React Modal

If HTML gives you a tool that already does accessibility well, use it!

Unit 5: POSH in modern frameworks

Key takeaways:

1. Frameworks are no excuse.
2. Build (and use) semantic components.
3. Be thoughtful and intentional with the markup you choose.
4. Small improvements compound over time, especially in reusable components.