{"id":955,"date":"2026-11-09T11:00:00","date_gmt":"2026-11-09T08:00:00","guid":{"rendered":"https:\/\/keefwiki.com\/code\/?p=955"},"modified":"2026-11-02T19:50:42","modified_gmt":"2026-11-02T16:50:42","slug":"keyboard-accessible-web-interfaces","status":"publish","type":"post","link":"https:\/\/keefwiki.com\/code\/2026\/11\/09\/keyboard-accessible-web-interfaces\/","title":{"rendered":"\u0643\u064a\u0641\u064a\u0629 \u0625\u062a\u0627\u062d\u0629 \u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0628\u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d"},"content":{"rendered":"

\u0625\u062a\u0627\u062d\u0629 \u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0628\u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d \u062a\u0639\u0646\u064a \u0623\u0646 \u064a\u0633\u062a\u0637\u064a\u0639 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u0648\u0627\u0644\u0631\u0648\u0627\u0628\u0637 \u0648\u0627\u0644\u0646\u0645\u0627\u0630\u062c \u0648\u062a\u0634\u063a\u064a\u0644\u0647\u0627 \u062f\u0648\u0646 \u0627\u0644\u062d\u0627\u062c\u0629 \u0625\u0644\u0649 \u0641\u0623\u0631\u0629. \u0648\u062a\u064f\u0639\u062f \u0647\u0630\u0647 \u0627\u0644\u0642\u062f\u0631\u0629 \u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0639\u062f\u062f \u0643\u0628\u064a\u0631 \u0645\u0646 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u064a\u0646\u060c \u0648\u0645\u0646 \u0628\u064a\u0646\u0647\u0645 \u0645\u0646 \u064a\u0639\u062a\u0645\u062f\u0648\u0646 \u0639\u0644\u0649 \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629. \u0644\u0630\u0644\u0643 \u064a\u0628\u062f\u0623 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0635\u062d\u064a\u062d \u0628\u0639\u0646\u0627\u0635\u0631 HTML \u0627\u0644\u062f\u0644\u0627\u0644\u064a\u0629\u060c \u0644\u0627 \u0628\u0625\u0636\u0627\u0641\u0629 \u0623\u062d\u062f\u0627\u062b JavaScript \u0625\u0644\u0649 \u0639\u0646\u0627\u0635\u0631 \u063a\u064a\u0631 \u062a\u0641\u0627\u0639\u0644\u064a\u0629.<\/p>\n\n

\u0645\u0627 \u0627\u0644\u0645\u062a\u0637\u0644\u0628\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0625\u062a\u0627\u062d\u0629 \u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0628\u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d<\/h2>\n\n

\u0644\u0644\u0628\u062f\u0621\u060c \u064a\u062d\u062a\u0627\u062c \u0627\u0644\u0645\u062b\u0627\u0644 \u0627\u0644\u062a\u0627\u0644\u064a \u0625\u0644\u0649 \u0645\u062a\u0635\u0641\u062d \u062d\u062f\u064a\u062b \u0648\u0645\u062d\u0631\u0631 \u0646\u0635\u0648\u0635 \u0641\u0642\u0637. \u0623\u0646\u0634\u0626 \u0645\u0644\u0641\u064b\u0627 \u0628\u0627\u0633\u0645 keyboard-demo.html\u060c \u0648\u0627\u0644\u0635\u0642 \u0627\u0644\u0643\u0648\u062f \u062b\u0645 \u0627\u0641\u062a\u062d\u0647 \u0641\u064a \u0627\u0644\u0645\u062a\u0635\u0641\u062d. \u0627\u0644\u0645\u062b\u0627\u0644 \u0645\u0633\u062a\u0642\u0644 \u0648\u0644\u0627 \u064a\u062d\u062a\u0627\u062c \u0645\u0643\u062a\u0628\u0627\u062a \u0623\u0648 \u062e\u0627\u062f\u0645\u064b\u0627. \u0648\u0647\u0648 \u064a\u0639\u0631\u0636 \u0631\u0627\u0628\u0637 \u0627\u0646\u062a\u0642\u0627\u0644 \u0633\u0631\u064a\u0639 \u0648\u0632\u0631\u064b\u0627 \u0648\u0642\u0633\u0645 \u062a\u0641\u0627\u0635\u064a\u0644 \u064a\u0645\u0643\u0646 \u0641\u062a\u062d\u0647 \u0648\u0625\u063a\u0644\u0627\u0642\u0647 \u0628\u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d.<\/p>\n\n

\u0643\u064a\u0641\u064a\u0629 \u0625\u0646\u0634\u0627\u0621 \u0648\u0627\u062c\u0647\u0629 \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u062a\u0646\u0642\u0644 \u0628\u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d<\/h2>\n\n
<!doctype html>\n<html lang="ar" dir="rtl">\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width, initial-scale=1">\n<title>\u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u062a\u0646\u0642\u0644 \u0628\u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d<\/title>\n<style>\n  body { font: 18px\/1.7 system-ui; margin: 2rem; }\n  .skip-link { position: absolute; top: -5rem; right: 1rem; }\n  .skip-link:focus { top: 0.5rem; background: white; }\n  :focus-visible { outline: 3px solid #175fd0; outline-offset: 4px; }\n  button { padding: .6rem 1rem; cursor: pointer; }\n<\/style>\n<\/head>\n<body>\n<a class="skip-link" href="#main">\u0627\u0646\u062a\u0642\u0644 \u0625\u0644\u0649 \u0627\u0644\u0645\u062d\u062a\u0648\u0649<\/a>\n<header><a href="#info">\u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a<\/a><\/header>\n<main id="main" tabindex="-1">\n  <h1>\u062a\u062c\u0631\u0628\u0629 \u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d<\/h1>\n  <button type="button" id="action">\u0627\u0636\u063a\u0637 \u0644\u0644\u062a\u062c\u0631\u0628\u0629<\/button>\n  <p id="result" role="status" aria-live="polite"><\/p>\n  <details id="info">\n    <summary>\u0643\u064a\u0641 \u062a\u0639\u0645\u0644 \u0627\u0644\u062a\u062c\u0631\u0628\u0629<\/summary>\n    <p>\u0627\u0633\u062a\u062e\u062f\u0645 Tab \u0644\u0644\u062a\u0646\u0642\u0644 \u0648Enter \u0644\u0641\u062a\u062d \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644.<\/p>\n  <\/details>\n<\/main>\n<script>\n  document.getElementById('action').addEventListener('click', () => {\n    document.getElementById('result').textContent = '\u0646\u062c\u062d\u062a \u0627\u0644\u0639\u0645\u0644\u064a\u0629';\n  });\n<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n
\u0648\u0628\u0630\u0644\u0643\u060c \u062a\u062a\u064a\u062d \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0631\u0627\u0628\u0637 \u0648\u0627\u0644\u0632\u0631 \u0648\u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644 \u0648\u0638\u0627\u0626\u0641 \u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u064b\u0627. \u0643\u0645\u0627 \u062a\u0633\u0627\u0639\u062f \u0642\u0627\u0639\u062f\u0629 CSS \u0627\u0644\u0645\u0639\u062a\u0645\u062f\u0629 \u0639\u0644\u0649 \u200e:focus-visible \u0641\u064a \u0625\u0638\u0647\u0627\u0631 \u0645\u0648\u0636\u0639 \u0627\u0644\u062a\u0631\u0643\u064a\u0632. \u0623\u0645\u0627 \u200erole=”status” \u0641\u064a\u062a\u064a\u062d \u0627\u0644\u0625\u0639\u0644\u0627\u0646 \u0639\u0646 \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0646\u0635 \u0644\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u062f\u0648\u0646 \u0646\u0642\u0644 \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0628\u0635\u0648\u0631\u0629 \u0645\u0641\u0627\u062c\u0626\u0629.<\/p>\n\n
\u0643\u064a\u0641\u064a\u0629 \u0627\u062e\u062a\u0628\u0627\u0631 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0648\u0627\u062c\u0647\u0629 \u062f\u0648\u0646 \u0641\u0623\u0631\u0629<\/h2>\n\n
  1. \u0627\u062a\u0631\u0643 \u0627\u0644\u0641\u0623\u0631\u0629 \u062c\u0627\u0646\u0628\u064b\u0627\u060c \u062b\u0645 \u0627\u0636\u063a\u0637 Tab \u0645\u0646 \u0628\u062f\u0627\u064a\u0629 \u0627\u0644\u0635\u0641\u062d\u0629 \u0648\u0631\u0627\u0642\u0628 \u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062a\u064a \u062a\u0633\u062a\u0642\u0628\u0644 \u0627\u0644\u062a\u0631\u0643\u064a\u0632.<\/li>
  2. \u0627\u0636\u063a\u0637 Enter \u0639\u0644\u0649 \u0627\u0644\u0631\u0627\u0628\u0637 \u062b\u0645 \u0639\u0644\u0649 \u0627\u0644\u0632\u0631. \u0627\u0636\u063a\u0637 Space \u0639\u0646\u062f \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0639\u0644\u0649 \u0627\u0644\u0632\u0631 \u0644\u062a\u062c\u0631\u0628\u0629 \u062a\u0641\u0639\u064a\u0644\u0647 \u0623\u064a\u0636\u064b\u0627.<\/li>
  3. \u0627\u0646\u062a\u0642\u0644 \u0625\u0644\u0649 \u0639\u0646\u0648\u0627\u0646 \u00ab\u0643\u064a\u0641 \u062a\u0639\u0645\u0644 \u0627\u0644\u062a\u062c\u0631\u0628\u0629\u00bb \u0648\u0627\u0636\u063a\u0637 Enter \u0644\u0641\u062a\u062d \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644 \u0648\u0625\u063a\u0644\u0627\u0642\u0647\u0627.<\/li>
  4. \u0627\u0631\u062c\u0639 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 Shift + Tab\u060c \u0648\u062a\u062d\u0642\u0642 \u0645\u0646 \u0628\u0642\u0627\u0621 \u0645\u0624\u0634\u0631 \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0638\u0627\u0647\u0631\u064b\u0627 \u0641\u064a \u0643\u0644 \u062e\u0637\u0648\u0629.<\/li>
  5. \u0641\u0639\u0651\u0644 \u062a\u0646\u0642\u0644 \u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d \u0627\u0644\u0643\u0627\u0645\u0644 \u0645\u0646 \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0645\u062a\u0635\u0641\u062d \u0623\u0648 \u0627\u0644\u0646\u0638\u0627\u0645 \u0639\u0646\u062f \u0627\u0644\u062d\u0627\u062c\u0629\u060c \u0648\u0643\u0631\u0631 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0642\u0627\u0631\u0626 \u0634\u0627\u0634\u0629 \u0625\u0646 \u062a\u0648\u0641\u0631.<\/li><\/ol>\n\n
    \u0623\u062e\u0637\u0627\u0621 \u0634\u0627\u0626\u0639\u0629 \u0641\u064a \u0625\u062a\u0627\u062d\u0629 \u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0628\u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d<\/h2>\n\n
    \u0641\u064a \u0627\u0644\u0645\u0642\u0627\u0628\u0644\u060c \u0645\u0646 \u0627\u0644\u0623\u062e\u0637\u0627\u0621 \u062a\u062d\u0648\u064a\u0644 \u0639\u0646\u0635\u0631 div \u0625\u0644\u0649 \u0632\u0631 \u0634\u0643\u0644\u064a \u062f\u0648\u0646 \u062f\u0639\u0645 \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0623\u0648 \u0645\u0641\u0627\u062a\u064a\u062d \u0627\u0644\u062a\u0641\u0639\u064a\u0644. \u0643\u0630\u0644\u0643 \u064a\u0624\u062f\u064a \u0627\u0633\u062a\u0639\u0645\u0627\u0644 tabindex \u0628\u0642\u064a\u0645\u0629 \u0645\u0648\u062c\u0628\u0629 \u0625\u0644\u0649 \u062a\u0631\u062a\u064a\u0628 \u063a\u064a\u0631 \u0645\u062a\u0648\u0642\u0639. \u0648\u0642\u062f \u062a\u062d\u0630\u0641 \u0628\u0639\u0636 \u0645\u0644\u0641\u0627\u062a CSS \u0625\u0637\u0627\u0631 \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0628\u0648\u0627\u0633\u0637\u0629 outline: none \u062f\u0648\u0646 \u062a\u0648\u0641\u064a\u0631 \u0628\u062f\u064a\u0644 \u0648\u0627\u0636\u062d\u060c \u0641\u064a\u0636\u064a\u0639 \u0645\u0648\u0636\u0639 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645.<\/p>\n\n
    \u0628\u0627\u0644\u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649 \u0630\u0644\u0643\u060c \u062a\u0648\u0636\u062d \u0625\u0631\u0634\u0627\u062f\u0627\u062a W3C \u0627\u0644\u0631\u0633\u0645\u064a\u0629<\/a> \u0643\u064a\u0641\u064a\u0629 \u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0627\u0644\u062a\u0646\u0642\u0644 \u062f\u0627\u062e\u0644 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a \u0627\u0644\u0645\u062a\u0642\u062f\u0645\u0629. \u0648\u0625\u0630\u0627 \u0643\u0646\u062a \u062a\u0639\u0645\u0644 \u0639\u0644\u0649 \u0635\u0641\u062d\u0629 \u0645\u062a\u062c\u0627\u0648\u0628\u0629\u060c \u0641\u0642\u062f \u064a\u0641\u064a\u062f \u0623\u064a\u0636\u064b\u0627 \u062f\u0631\u0633 \u0625\u0646\u0634\u0627\u0621 \u0648\u0627\u062c\u0647\u0629 \u0645\u062a\u062c\u0627\u0648\u0628\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS Grid<\/a>. \u0644\u0643\u0646 \u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0644\u0644\u0634\u0627\u0634\u0627\u062a \u0648\u062d\u062f\u0647\u0627 \u0644\u0627 \u062a\u0636\u0645\u0646 \u0625\u062a\u0627\u062d\u0629 \u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d.<\/p>\n\n
    \u0645\u062a\u0649 \u062a\u062d\u062a\u0627\u062c \u0625\u0644\u0649 JavaScript \u0625\u0636\u0627\u0641\u064a<\/h2>\n\n
    \u0623\u0645\u0627 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a \u0627\u0644\u0645\u062e\u0635\u0635\u0629 \u0641\u062a\u062d\u062a\u0627\u062c \u0645\u062b\u0644 \u0627\u0644\u0646\u0648\u0627\u0641\u0630 \u0627\u0644\u062d\u0648\u0627\u0631\u064a\u0629 \u0627\u0644\u0645\u0639\u0642\u062f\u0629 \u0625\u0644\u0649 \u0625\u062f\u0627\u0631\u0629 \u062d\u0631\u0643\u0629 \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0648\u0627\u0644\u0625\u063a\u0644\u0627\u0642 \u0648\u0627\u0644\u0639\u0648\u062f\u0629 \u0625\u0644\u0649 \u0639\u0646\u0635\u0631 \u0627\u0644\u062a\u0634\u063a\u064a\u0644. \u0623\u0645\u0627 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u0648\u0627\u0644\u0631\u0648\u0627\u0628\u0637 \u0627\u0644\u0639\u0627\u062f\u064a\u0629 \u0641\u0627\u0644\u0623\u0641\u0636\u0644 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0639\u0646\u0627\u0635\u0631\u0647\u0627 \u0627\u0644\u0623\u0635\u0644\u064a\u0629 \u0628\u062f\u0644 \u0625\u0639\u0627\u062f\u0629 \u0627\u062e\u062a\u0631\u0627\u0639 \u0633\u0644\u0648\u0643\u0647\u0627. \u0627\u0633\u062a\u0639\u0645\u0644 \u0627\u062e\u062a\u0628\u0627\u0631 \u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d \u0627\u0644\u0645\u0628\u0627\u0634\u0631 \u0645\u0639\u064a\u0627\u0631\u064b\u0627 \u0644\u0644\u062a\u062d\u0642\u0642\u060c \u0648\u0644\u0627 \u062a\u0643\u062a\u0641\u0650 \u0628\u0645\u0638\u0647\u0631 \u0627\u0644\u0635\u0641\u062d\u0629.<\/p>","protected":false},"excerpt":{"rendered":"
    \u062a\u0639\u0644\u0645 \u0643\u064a\u0641 \u062a\u0635\u0645\u0645 \u0639\u0646\u0627\u0635\u0631 \u0648\u064a\u0628 \u062a\u0639\u0645\u0644 \u0645\u0639 Tab \u0648Enter \u0648Space \u0648\u062a\u0638\u0647\u0631 \u0645\u0648\u0636\u0639 \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0628\u0648\u0636\u0648\u062d\u060c \u0645\u0639 \u0645\u062b\u0627\u0644 HTML \u0639\u0645\u0644\u064a \u0648\u0627\u062e\u062a\u0628\u0627\u0631 \u064a\u062f\u0648\u064a.<\/p>\n","protected":false},"author":2,"featured_media":956,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_keef_sources":[{"title":"Keyboard accessible","url":"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/Guides\/Understanding_WCAG\/Keyboard","organization":"MDN Web Docs"},{"title":"Developing a Keyboard Interface","url":"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/practices\/keyboard-interface\/","organization":"W3C WAI"}],"footnotes":""},"categories":[123],"tags":[82,37,14],"class_list":["post-955","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","tag-web-design","tag-37","tag-14"],"_links":{"self":[{"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/posts\/955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/comments?post=955"}],"version-history":[{"count":2,"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/posts\/955\/revisions"}],"predecessor-version":[{"id":958,"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/posts\/955\/revisions\/958"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/media\/956"}],"wp:attachment":[{"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/media?parent=955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/categories?post=955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/keefwiki.com\/code\/wp-json\/wp\/v2\/tags?post=955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}