All Roadmaps›⚛️ React Mastery›Phase 15›Accessibility (A11y) & Security

Accessibility (A11y) & Security

0/2 in this phase0/36 across the roadmap

📖 Concept

Accessibility (A11y): Web applications must be usable by everyone, including people using screen readers or keyboard-only navigation.

  • Semantic HTML: Use <button> for actions, <a> for links, <nav> for navigation.
  • ARIA Roles: Use aria-label, aria-hidden, and role="dialog" when standard HTML isn't enough.
  • Keyboard Navigation: Ensure all interactive elements can be reached with the Tab key and activated with Enter/Space.

Security:

  • XSS (Cross-Site Scripting): React escapes most data by default, but you must be careful with dangerouslySetInnerHTML.
  • Environment Variables: Never commit secrets (API keys, database URLs) to GitHub. Use .env files and secure CI/CD secrets.
  • Sanitization: Always sanitize user-provided HTML before rendering it.
  • Third-party Packages: Regularly audit your dependencies for vulnerabilities using npm audit.

💻 Code Example

codeTap to expand ⛶
1// 1. GOOD Accessibility
2const Modal = ({ isOpen, onClose, title, children }) => {
3  if (!isOpen) return null;
4

5  return (
6    <div 
7      role="dialog" 
8      aria-modal="true" 
9      aria-labelledby="modal-title"
10      className="fixed inset-0 bg-black/50 flex items-center justify-center"
11    >
12      <div className="bg-white p-6 rounded max-w-md w-full">
13        <h2 id="modal-title" className="text-xl font-bold">{title}</h2>
14        <div className="mt-4">{children}</div>
15        <button 
16          onClick={onClose} 
17          aria-label="Close modal"
18          className="absolute top-2 right-2 p-2"
19        >
20          X
21        </button>
22      </div>
23    </div>
24  );
25};
26

27// 2. Security (Avoid this unless absolutely necessary!)
28const DangerousHtml = ({ html }) => {
29  // ❌ Vulnerable to XSS
30  // return <div dangerouslySetInnerHTML={{ __html: html }} />;
31  
32  // ✅ Better: Sanitize first (using DOMPurify)
33  // import DOMPurify from 'dompurify';
34  // const clean = DOMPurify.sanitize(html);
35  // return <div dangerouslySetInnerHTML={{ __html: clean }} />;
36};

🏋️ Practice Exercise

  1. Use the 'Lighthouse' tool in Chrome to audit a project's accessibility.
  2. Navigate your entire React app using only your keyboard. Note where you get "stuck".
  3. Implement a 'Screen Reader' test using MacOS VoiceOver or NVDA.
  4. Run npm audit on a project and fix any reported security vulnerabilities.

⚠️ Common Mistakes

  • Using <div> or <span> for buttons (which breaks keyboard navigation and screen readers).

  • Forgetting to add alt text to images.

  • Hardcoding secrets in the frontend code instead of using environment variables.

  • Not handling 'Sensitive Data' (like passwords) correctly in state or local storage.

💼 Interview Questions

🎤 Mock Interview

Practice a live interview for Accessibility (A11y) & Security

← PreviousSystem Design & Architecture