Building Accessible Websites with ARIA
HTML5 & CSS3
SCSS
JavaScript
TypeScript
React
Next.js
Tailwind CSS
Bootstrap
ShadCN UI
Styled Components
GSAP
Framer Motion
Vite
Shopify themes
i18next & RTL
Recharts
Chart.js
SaaS dashboards
Figma to UI
Dark / light mode
4+ years
Vistothemes
Freelance UI
NFT & crypto UI
eCommerce UI
WordPress CSS
Remote-ready
Muhammad Shahzaib
Pixel-perfect
Component architecture
Live demos
HTML5 & CSS3
SCSS
JavaScript
TypeScript
React
Next.js
Tailwind CSS
Bootstrap
ShadCN UI
Styled Components
GSAP
Framer Motion
Vite
Shopify themes
i18next & RTL
Recharts
Chart.js
SaaS dashboards
Figma to UI
Dark / light mode
4+ years
Vistothemes
Freelance UI
NFT & crypto UI
eCommerce UI
WordPress CSS
Remote-ready
Muhammad Shahzaib
Pixel-perfect
Component architecture
Live demos
The first rule of ARIA is that the best ARIA attribute is often no ARIA attribute at all. A native `<button>` already has the right role, keyboard behavior, and focus handling built in — ARIA exists to fill the gaps semantic HTML can't cover, not to replace it.
Reach for semantic HTML first
<nav>, <button>, <header>, <main>, and <label> give assistive technology accurate structure for free. A <div onclick> styled to look like a button still isn't keyboard-focusable or announced as a button without extra ARIA and JS work — the native element already does that.
Where ARIA earns its place
Custom widgets with no native HTML equivalent — a tab panel, a combobox, a toast — genuinely need ARIA roles and states (role="tab", aria-selected, aria-live) to be understandable to screen readers. aria-label is also essential for icon-only buttons that have no visible text.
Common mistakes
Adding role="button" without also adding keyboard handlers, using ARIA to fix a visual-only problem, or layering ARIA over an already-semantic element (a <button role="button"> does nothing useful). Test with an actual screen reader occasionally — it surfaces gaps that reading the markup won't.
<button
type="button"
aria-label="Close menu"
onClick={closeMenu}
>
<CloseIcon aria-hidden="true" />
</button>Accessible markup isn't a separate pass at the end of a project — it's mostly just correct HTML, applied from the first component.
← back to all writingMuhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
Figma to UI
Muhammad Shahzaib
4+ years
Vistothemes
Freelance UI
Muhammad Shahzaib
Remote work
pixel-perfect
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
UI-only scope
Muhammad Shahzaib
your mockups
production UI
Muhammad Shahzaib
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
Figma to UI
Muhammad Shahzaib
4+ years
Vistothemes
Freelance UI
Muhammad Shahzaib
Remote work
pixel-perfect
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
UI-only scope
Muhammad Shahzaib
your mockups
production UI
Muhammad Shahzaib
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
Figma to UI
Muhammad Shahzaib
4+ years
Vistothemes
Freelance UI
Muhammad Shahzaib
Remote work
pixel-perfect
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
UI-only scope
Muhammad Shahzaib
your mockups
production UI
Muhammad Shahzaib
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
Figma to UI
Muhammad Shahzaib
4+ years
Vistothemes
Freelance UI
Muhammad Shahzaib
Remote work
pixel-perfect
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
UI-only scope
Muhammad Shahzaib
your mockups
production UI
Muhammad Shahzaib
