[{"data":1,"prerenderedAt":259},["ShallowReactive",2],{"lesson:t1-s09-accessibility":3,"course:taropood":63},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,9,"t1-s09-accessibility","book",1,"فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",[20,24,27,32,35,38,41,44,47,51,54,57,60],{"kind":21,"heading":22,"html":23},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>آخر این فصل یک صفحهٔ کوچک ولی واقعی داری — یک صفحهٔ باشگاه کتاب — که برای \u003Cstrong>همه\u003C\u002Fstrong> کار می‌کند: هم برای تو که با چشم و ماوس نگاهش می‌کنی، هم برای کسی که صفحه را نمی‌بیند و با یک screen reader گوش می‌دهد، هم برای کسی که اصلاً ماوس ندارد و فقط با keyboard در صفحه می‌چرخد. نکتهٔ غافلگیرکننده این است: در این فصل \u003Cstrong>هیچ tag تازه‌ای\u003C\u002Fstrong> یاد نمی‌گیری. هر چیزی که لازم داری از ترم ۱ بلدی؛ فقط این‌بار همه را از یک زاویهٔ تازه می‌بینی — دسترس‌پذیری. و خواهی دید که نصفِ این کار را قبلاً، بی‌آنکه اسمش را بدانی، انجام داده‌ای.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-accessibility.45e8ff4252.160.webp 160w, \u002F_img\u002F01-image-accessibility.45e8ff4252.320.webp 320w, \u002F_img\u002F01-image-accessibility.45e8ff4252.640.webp 640w, \u002F_img\u002F01-image-accessibility.45e8ff4252.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-accessibility.45e8ff4252.1280.jpg\" srcset=\"\u002F_img\u002F01-image-accessibility.45e8ff4252.160.jpg 160w, \u002F_img\u002F01-image-accessibility.45e8ff4252.320.jpg 320w, \u002F_img\u002F01-image-accessibility.45e8ff4252.640.jpg 640w, \u002F_img\u002F01-image-accessibility.45e8ff4252.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"صفحه‌ای که فقط با keyboard پیمایش می‌شود: یک حلقهٔ focus دور یک لینک و مسیری شماره‌دار که ترتیب حرکت با کلید Tab را از منو تا فرم نشان می‌دهد\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>بگویی accessibility یعنی چه و چرا از خودِ HTML شروع می‌شود، نه از چیزی که آخرِ کار اضافه کنی\u003C\u002Fli>\n\u003Cli>outline صفحه را با ترتیب درست heading بسازی، و یک پرشِ سطح را پیدا کنی و درست کنی\u003C\u002Fli>\n\u003Cli>landmark های صفحه را بشناسی و بگویی screen reader چطور بینشان می‌پرد\u003C\u002Fli>\n\u003Cli>کل صفحه را فقط با کلید Tab پیمایش کنی و بگویی چرا ترتیب focus همان ترتیب کدِ توست\u003C\u002Fli>\n\u003Cli>بین یک \u003Ccode>alt\u003C\u002Fcode> معنادار و \u003Ccode>alt=""\u003C\u002Fcode> برای تصویرِ تزئینی درست انتخاب کنی\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از فصل ۶:\u003C\u002Fstrong> landmark ها — \u003Ccode><header>\u003C\u002Fcode>، \u003Ccode><nav>\u003C\u002Fcode>، \u003Ccode><main>\u003C\u002Fcode>، \u003Ccode><footer>\u003C\u002Fcode>. ستون فقراتِ این فصل همان‌هاست.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۲:\u003C\u002Fstrong> heading و outline — ترتیب \u003Ccode><h1>\u003C\u002Fcode> تا \u003Ccode><h6>\u003C\u002Fcode> و اینکه چرا سطحشان مهم است.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۴:\u003C\u002Fstrong> \u003Ccode>alt\u003C\u002Fcode> — همان‌جا یک بدهی گذاشتیم («تصویرهای تزئینی را در فصل دسترس‌پذیری می‌بینیم»)؛ اینجا می‌پردازیمش.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۸:\u003C\u002Fstrong> \u003Ccode><label>\u003C\u002Fcode> — که هر ورودی را به معنایش وصل می‌کند.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک صفحهٔ باشگاه کتاب می‌بینی که برای چشمِ تو کاملاً سالم به‌نظر می‌رسد. کارِ این فصل این است که همان صفحه را یک‌بار مثل کاربرِ screen reader و یک‌بار مثل کاربرِ keyboard تجربه کنی، و دو چیزی را درست کنی که فقط آن‌ها متوجهش می‌شوند","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-1-html-structure\u002Fsession-09-accessibility",{"kind":21,"heading":33,"html":34},"۱. دسترس‌پذیری یعنی چه، و چرا نصفش را قبلاً انجام داده‌ای","\u003Ch2 id=\"۱-دسترس‌پذیری-یعنی-چه-و-چرا-نصفش-را-قبلاً-انجام-داده‌ای\">۱. دسترس‌پذیری یعنی چه، و چرا نصفش را قبلاً انجام داده‌ای\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%E2%80%8C%D9%BE%D8%B0%DB%8C%D8%B1%DB%8C-%DB%8C%D8%B9%D9%86%DB%8C-%DA%86%D9%87-%D9%88-%DA%86%D8%B1%D8%A7-%D9%86%D8%B5%D9%81%D8%B4-%D8%B1%D8%A7-%D9%82%D8%A8%D9%84%D8%A7%D9%8B-%D8%A7%D9%86%D8%AC%D8%A7%D9%85-%D8%AF%D8%A7%D8%AF%D9%87%E2%80%8C%D8%A7%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>همه صفحه را جوری که تو الان می‌بینی استفاده نمی‌کنند — با چشم و ماوس. بعضی‌ها صفحه را اصلاً \u003Cstrong>نمی‌بینند\u003C\u002Fstrong> و با یک \u003Cstrong>screen reader\u003C\u002Fstrong> کار می‌کنند: برنامه‌ای که متنِ صفحه را با صدا برایشان می‌خواند. بعضی‌ها نمی‌توانند از ماوس استفاده کنند و فقط با \u003Cstrong>keyboard\u003C\u002Fstrong> در صفحه حرکت می‌کنند، با کلید Tab از یک element به element بعدی می‌پرند. accessibility یعنی صفحه را جوری بسازی که برای همهٔ این‌ها کار کند، نه فقط برای حالتِ چشم‌وماوس.\u003C\u002Fp>\n\u003Cp>حالا خبرِ خوب. هر بار که در ترم ۱ tag معنادار را انتخاب کردی — \u003Ccode><h1>\u003C\u002Fcode> برای تیترِ واقعی، \u003Ccode><nav>\u003C\u002Fcode> برای منو، \u003Ccode><label>\u003C\u002Fcode> برای هر ورودی، \u003Ccode>alt\u003C\u002Fcode> برای هر تصویر — داشتی همین کار را می‌کردی، بدون اینکه اسمش را بشنوی. \u003Cstrong>semantic HTML نصفِ کارِ accessibility را برایت انجام داد.\u003C\u002Fstrong> این فصل بیشتر دربارهٔ \u003Cstrong>دیدنِ\u003C\u002Fstrong> آن کار است، امتحان‌کردنش، و تمام‌کردنِ نیمهٔ دوم.\u003C\u002Fp>\n\u003Cp>در آزمایشگاه نگاهی به صفحه بینداز. یک باشگاه کتاب است: یک تیتر، یک منو، کتابِ این ماه با جلدش، یک فرمِ عضویت، و یک پاصفحه. هیچ‌کدام از این‌ها HTML تازه نیست — همه را بلدی. چیزی که تازه است، عینکی است که با آن نگاهش می‌کنی.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> accessibility یک قابلیت نیست که آخرِ کار به صفحه بچسبانی. یا از خطِ اولِ HTML داخلش هست، یا نیست. برای همین این فصل را اینجا، آخرِ ترمِ HTML، گذاشته‌ایم، نه به‌عنوان یک فکرِ بعدی در انتهای کلِ دوره.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":36,"html":37},"۲. outline: نقشه‌ای که screen reader از رویش می‌پرد","\u003Ch2 id=\"۲-outline-نقشه‌ای-که-screen-reader-از-رویش-می‌پرد\">۲. outline: نقشه‌ای که screen reader از رویش می‌پرد\u003Ca class=\"head-anchor\" href=\"#%DB%B2-outline-%D9%86%D9%82%D8%B4%D9%87%E2%80%8C%D8%A7%DB%8C-%DA%A9%D9%87-screen-reader-%D8%A7%D8%B2-%D8%B1%D9%88%DB%8C%D8%B4-%D9%85%DB%8C%E2%80%8C%D9%BE%D8%B1%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یادت هست در فصل ۲ گفتیم عنوان‌ها روی‌هم یک \u003Cstrong>outline\u003C\u002Fstrong> می‌سازند، مثل فهرستِ مطالبِ یک کتاب؟ حالا می‌بینی این outline دقیقاً به چه دردی می‌خورد.\u003C\u002Fp>\n\u003Cp>تو صفحه را با چشمت اسکن می‌کنی و تیترهای بزرگ را پیدا می‌کنی. کاربرِ screen reader نمی‌تواند اسکن کند — ولی چیزِ بهتری دارد: می‌تواند به screen reader بگوید «فقط عنوان‌ها را برایم بخوان»، کلِ outline را بشنود، و مستقیم بپرد به بخشی که می‌خواهد. پس عنوان‌های تو واقعاً یک \u003Cstrong>فهرستِ مطالب\u003C\u002Fstrong> هستند که یک نفر با آن‌ها در صفحه پیمایش می‌کند.\u003C\u002Fp>\n\u003Cp>برای اینکه این کار کند، ترتیب باید سالم باشد: \u003Ccode><h1>\u003C\u002Fcode> بعد \u003Ccode><h2>\u003C\u002Fcode> بعد \u003Ccode><h3>\u003C\u002Fcode>، بدون پرش. بیا یک نمونهٔ خراب بسازیم. در آزمایشگاه به بخشِ «کتاب این ماه» نگاه کن؛ عنوانش این‌طور نوشته شده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><h1>باشگاه کتاب<\u002Fh1>\n<h4>کتاب این ماه<\u002Fh4>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>برای چشمِ تو شاید فقط یک عنوانِ کمی کوچک‌تر باشد — مشکلی نیست. ولی کاربرِ screen reader که دارد از روی عنوان‌ها می‌پرد این را می‌شنود: «عنوانِ سطح ۱... عنوانِ سطح ۴». و فکر می‌کند: سطح ۲ و ۳ کجا رفتند؟ دو تا بخش را رد کردم؟ مثل کتابی است که از «فصل ۱» می‌پرد به «بخشِ ۱ـ۱ـ۱ـ۱». نقشه سوراخ دارد.\u003C\u002Fp>\n\u003Cp>این یک بخشِ اصلی است که مستقیم زیرِ تیترِ صفحه می‌آید، پس سطحش \u003Ccode><h2>\u003C\u002Fcode> است، نه \u003Ccode><h4>\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><h1>باشگاه کتاب<\u002Fh1>\n<h2>کتاب این ماه<\u002Fh2>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> در آزمایشگاه هر دو هنوز مثلِ عنوان دیده می‌شوند و برای چشمت تقریباً هیچ فرقی نکرد — ولی outline حالا کامل و بی‌سوراخ است. همان درسِ فصل ۲ برمی‌گردد: \u003Cstrong>سطحِ عنوان را بر اساس جایش در outline انتخاب کن، نه اندازه‌اش.\u003C\u002Fstrong> بخشِ «عضو شو» هم همین مشکل را دارد؛ آن را هم به \u003Ccode><h2>\u003C\u002Fcode> عوض کن.\u003C\u002Fp>\n",{"kind":21,"heading":39,"html":40},"۳. landmark: نقشهٔ بزرگِ ناحیه‌ها","\u003Ch2 id=\"۳-landmark-نقشهٔ-بزرگِ-ناحیه‌ها\">۳. landmark: نقشهٔ بزرگِ ناحیه‌ها\u003Ca class=\"head-anchor\" href=\"#%DB%B3-landmark-%D9%86%D9%82%D8%B4%D9%87%D9%94-%D8%A8%D8%B2%D8%B1%DA%AF%D9%90-%D9%86%D8%A7%D8%AD%DB%8C%D9%87%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>در فصل ۶ به صفحه یک اسکلت دادی: \u003Ccode><header>\u003C\u002Fcode>، \u003Ccode><nav>\u003C\u002Fcode>، \u003Ccode><main>\u003C\u002Fcode>، \u003Ccode><footer>\u003C\u002Fcode>. حالا پاداشِ accessibility اش را ببین. screen reader به کاربر یک \u003Cstrong>فهرست از این ناحیه‌ها\u003C\u002Fstrong> می‌دهد — «سرصفحه، ناوبری، محتوای اصلی، پاصفحه» — و کاربر مستقیم می‌پرد به همان که می‌خواهد، دقیقاً مثل تو که یک نگاه به صفحه می‌اندازی و بی‌درنگ می‌فهمی «منو بالاست، مطلبِ اصلی وسط». همان‌طور که در فصل ۶ دیدی، به این ناحیه‌های بزرگ \u003Cstrong>landmark\u003C\u002Fstrong> می‌گویند.\u003C\u002Fp>\n\u003Cp>جادویش این است که این را \u003Cstrong>مجانی\u003C\u002Fstrong> می‌گیری، فقط با انتخابِ tag درست. \u003Ccode><main>\u003C\u002Fcode> خودش یک landmark است. \u003Ccode><nav>\u003C\u002Fcode> خودش یک landmark است. چیزی اضافه نمی‌کنی. اسکلتِ همین صفحهٔ باشگاه کتاب این است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><header>\n  <h1>باشگاه کتاب<\u002Fh1>\n  <nav>\n    <ul>\n      <li><a href="#books">کتاب‌ها<\u002Fa><\u002Fli>\n      <li><a href="#join">عضویت<\u002Fa><\u002Fli>\n    <\u002Ful>\n  <\u002Fnav>\n<\u002Fheader>\n\n<main>\n  <!-- ketab-e in mah + form -->\n<\u002Fmain>\n\n<footer>\n  <p>باشگاه کتاب — ۱۴۰۵<\u002Fp>\n<\u002Ffooter>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا تصور کن همین صفحه را — مثلِ صفحهٔ فصل ۶ — فقط از \u003Ccode><div>\u003C\u002Fcode> ساخته بودی. آن‌وقت \u003Cstrong>صفر\u003C\u002Fstrong> landmark داشتی؛ کاربرِ screen reader هیچ فهرستی برای پریدن نداشت، فقط یک دیوارِ صافِ متن. پس semantic HTML همان \u003Cstrong>نقشهٔ ناحیه‌ها\u003C\u002Fstrong>ست، مجانی و بدون یک خطِ اضافه.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> landmark را با tag واقعی بگیر، نه با \u003Ccode><div>\u003C\u002Fcode> و یک \u003Ccode>role\u003C\u002Fcode>. در فصل ۶ دیدی که \u003Ccode><nav>\u003C\u002Fcode> خودش می‌گوید «این ناوبری است»؛ نوشتنِ \u003Ccode>role="navigation"\u003C\u002Fcode> روی یک \u003Ccode><div>\u003C\u002Fcode> راهِ طولانی و پرخطا برای رسیدن به چیزی است که \u003Ccode><nav>\u003C\u002Fcode> در یک کلمه می‌دهد. اول tag درست.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":42,"html":43},"۴. فقط با Tab: چرا ترتیب focus همان ترتیب کدِ توست","\u003Ch2 id=\"۴-فقط-با-tab-چرا-ترتیب-focus-همان-ترتیب-کدِ-توست\">۴. فقط با Tab: چرا ترتیب focus همان ترتیب کدِ توست\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D9%81%D9%82%D8%B7-%D8%A8%D8%A7-tab-%DA%86%D8%B1%D8%A7-%D8%AA%D8%B1%D8%AA%DB%8C%D8%A8-focus-%D9%87%D9%85%D8%A7%D9%86-%D8%AA%D8%B1%D8%AA%DB%8C%D8%A8-%DA%A9%D8%AF%D9%90-%D8%AA%D9%88%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>بعضی‌ها هیچ‌وقت ماوس نمی‌زنند — یا به‌خاطرِ یک ناتوانیِ حرکتی، یا فقط چون با keyboard سریع‌ترند. این‌ها با کلید \u003Cstrong>Tab\u003C\u002Fstrong> از یک چیزِ تعاملی (لینک، کادرِ ورودی، دکمه) به بعدی می‌پرند. آن element ای که همین حالا keyboard رویش است می‌گوییم \u003Cstrong>focus\u003C\u002Fstrong> دارد، و مرورگر دورش یک حلقه (outline) می‌کشد تا ببینی کجایی.\u003C\u002Fp>\n\u003Cp>بیا خودت حسش کنی. در آزمایشگاه یک‌بار داخلِ صفحه کلیک کن، بعد چند بار پشتِ‌هم Tab بزن و حلقهٔ focus را تماشا کن. اول می‌پرد روی لینکِ «کتاب‌ها»، بعد «عضویت»، بعد لینکِ «دربارهٔ این کتاب بیشتر بخوان»، بعد کادرِ «نام تو»، بعد کادرِ «ایمیل»، و آخر روی دکمهٔ «عضو شو».\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حلقه دقیقاً به همان ترتیبی سراغِ element ها می‌رود که در کدت از بالا به پایین نوشته‌ای. قانون همین است: \u003Cstrong>ترتیب focus همان ترتیب DOM است\u003C\u002Fstrong> — یعنی ترتیبِ element ها در HTML تو. تو هیچ ترتیبی تعیین نکردی؛ چون element ها را به ترتیبِ درست نوشتی، ترتیبِ درستِ focus را مجانی گرفتی.\u003C\u002Fp>\n\u003Cp>حالا بیا خرابش کنیم تا سرِ کارِ ما را بهتر بفهمی. یک attribute هست به‌نام \u003Cstrong>\u003Ccode>tabindex\u003C\u002Fcode>\u003C\u002Fstrong> که می‌گذارد ترتیبِ طبیعیِ focus را دستکاری کنی. به کادرِ ایمیل یک عددِ مثبت بده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><input type="email" id="email" name="email" tabindex="1">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا دوباره از بالای صفحه Tab بزن. focus \u003Cstrong>اول\u003C\u002Fstrong> می‌پرد روی کادرِ ایمیل — قبل از منو، قبل از همه‌چیز — بعد برمی‌گردد بالا سراغِ لینک‌های منو. حس می‌کنی صفحه دارد بی‌قاعده این‌ور و آن‌ور می‌پرد. یک \u003Ccode>tabindex\u003C\u002Fcode> مثبت آن element را به \u003Cstrong>جلوی صف\u003C\u002Fstrong> می‌کشد، پس ترتیبِ focus دیگر با چیزی که چشم می‌خواند نمی‌خواند. برای کاربرِ keyboard این گیج‌کننده است: Tab می‌زند و انتظار دارد به چیزِ پایین‌تر برسد، ولی پرت می‌شود آن‌سرِ صفحه.\u003C\u002Fp>\n\u003Cp>حالا آن \u003Ccode>tabindex="1"\u003C\u002Fcode> را پاک کن. ترتیب دوباره از بالا به پایین برمی‌گردد. درسش این است: \u003Cstrong>تقریباً هیچ‌وقت \u003Ccode>tabindex\u003C\u002Fcode> مثبت ننویس.\u003C\u002Fstrong> اگر ترتیبِ focus غلط به‌نظر می‌رسد، راهِ درست این است که HTML ات را جابه‌جا کنی تا ترتیبِ DOM درست شود — نه اینکه با \u003Ccode>tabindex\u003C\u002Fcode> وصله‌اش کنی. ترتیبِ focus را برابرِ ترتیبِ DOM نگه دار.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> Tab می‌زنی و هیچ‌چیز داخلِ صفحه تکان نمی‌خورد، یا به‌جایش نوارِ ابزارِ خودِ مرورگر focus می‌گیرد؟ اول یک‌بار داخلِ پیش‌نمایشِ آزمایشگاه کلیک کن تا keyboard «داخلِ» صفحه بیفتد، بعد Tab بزن. و اگر اصلاً حلقه‌ای نمی‌بینی، شاید آن element focus نمی‌گیرد — به‌طور پیش‌فرض فقط لینک‌ها، دکمه‌ها و کادرهای فرم focus می‌گیرند.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":45,"html":46},"۵. alt: وقتی هدف را می‌گوید، و وقتی باید خالی بماند","\u003Ch2 id=\"۵-alt-وقتی-هدف-را-می‌گوید-و-وقتی-باید-خالی-بماند\">۵. \u003Ccode>alt\u003C\u002Fcode>: وقتی هدف را می‌گوید، و وقتی باید خالی بماند\u003Ca class=\"head-anchor\" href=\"#%DB%B5-alt-%D9%88%D9%82%D8%AA%DB%8C-%D9%87%D8%AF%D9%81-%D8%B1%D8%A7-%D9%85%DB%8C%E2%80%8C%DA%AF%D9%88%DB%8C%D8%AF-%D9%88-%D9%88%D9%82%D8%AA%DB%8C-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%AE%D8%A7%D9%84%DB%8C-%D8%A8%D9%85%D8%A7%D9%86%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>در فصل ۴ گفتیم هر تصویرِ \u003Cstrong>معنادار\u003C\u002Fstrong> یک \u003Ccode>alt\u003C\u002Fcode> معنادار می‌خواهد، و یک بدهی گذاشتیم: تصویرهای صرفاً تزئینی یک حالتِ خاص دارند که در فصلِ دسترس‌پذیری می‌بینیم. رسیدیم به همان‌جا. دو سؤال تصمیمِ \u003Ccode>alt\u003C\u002Fcode> را می‌گیرند:\u003C\u002Fp>\n\u003Col>\n\u003Cli>این تصویر معنا یا هدفی دارد؟ ← \u003Ccode>alt\u003C\u002Fcode> همان هدف را توصیف می‌کند.\u003C\u002Fli>\n\u003Cli>صرفاً تزئینی است (یک خطِ جداکننده، یک نقشِ پس‌زمینه، یک آیکنِ کنارِ متنی که خودش همان را می‌گوید)؟ ← \u003Ccode>alt=""\u003C\u002Fcode> خالی، عمداً.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>اول حالتِ معنادار، با یک خطای عمدی. به جلدِ کتاب در آزمایشگاه نگاه کن؛ \u003Ccode>alt\u003C\u002Fcode> اش این‌طور نوشته شده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><img src="https:\u002F\u002Fpicsum.photos\u002Fid\u002F24\u002F300\u002F400" alt="image" width="300" height="400">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>alt="image"\u003C\u002Fcode> مثلِ نداشتنِ \u003Ccode>alt\u003C\u002Fcode> است. screen reader می‌خواند «image» — چیزی که کاربر از قبل می‌دانست. هیچ اطلاعاتی به او نمی‌دهد. درستش کن تا \u003Cstrong>هدف\u003C\u002Fstrong> را بگوید: کاربری که تصویر را نمی‌بیند، چه چیزی را باید از این جلد بفهمد؟\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><img src="https:\u002F\u002Fpicsum.photos\u002Fid\u002F24\u002F300\u002F400" alt="جلد کتاب: یک قایق تنها روی دریای آرام هنگام غروب" width="300" height="400">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی صفحه هیچ‌چیز عوض نشد — \u003Ccode>alt\u003C\u002Fcode> همان قهرمانِ بی‌سروصدای فصل ۴ است. ولی حالا کاربرِ screen reader به‌جای کلمهٔ «image»، خودِ جلد را می‌شنود.\u003C\u002Fp>\n\u003Cp>حالا حالتِ تزئینی. در بخشِ «عضو شو» یک آیکنِ ریزِ تزئینی هست که هیچ‌چیز به معنا اضافه نمی‌کند — عنوانِ «عضو شو» خودش همه‌چیز را گفته. اگر برایش یک \u003Ccode>alt\u003C\u002Fcode> معمولی بنویسی، screen reader یک توضیحِ بی‌فایده می‌خواند و فقط وسطِ کار مزاحمت می‌شود. اگر \u003Ccode>alt\u003C\u002Fcode> را کاملاً \u003Cstrong>حذف\u003C\u002Fstrong> کنی، بعضی screen reader ها به اسمِ فایل پناه می‌برند و آن را می‌خوانند (یادت هست از فصل ۴؟). جوابِ درست یک \u003Ccode>alt\u003C\u002Fcode> \u003Cstrong>خالیِ عمدی\u003C\u002Fstrong> است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><img src="https:\u002F\u002Fpicsum.photos\u002Fid\u002F1025\u002F40\u002F40" alt="" width="40" height="40">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>alt=""\u003C\u002Fcode> یعنی «به این تصویر نگاه کردم و تصمیم گرفتم هیچ اطلاعاتی ندارد — screen reader، ردش کن». این تنبلی نیست؛ یک \u003Cstrong>تصمیم\u003C\u002Fstrong> است. و با نداشتنِ \u003Ccode>alt\u003C\u002Fcode> فرق دارد: نبودِ \u003Ccode>alt\u003C\u002Fcode> یک اتفاق است، \u003Ccode>alt=""\u003C\u002Fcode> یک انتخاب.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-alt-decorative.b1da16e038.160.webp 160w, \u002F_img\u002F02-image-alt-decorative.b1da16e038.320.webp 320w, \u002F_img\u002F02-image-alt-decorative.b1da16e038.640.webp 640w, \u002F_img\u002F02-image-alt-decorative.b1da16e038.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-alt-decorative.b1da16e038.1280.jpg\" srcset=\"\u002F_img\u002F02-image-alt-decorative.b1da16e038.160.jpg 160w, \u002F_img\u002F02-image-alt-decorative.b1da16e038.320.jpg 320w, \u002F_img\u002F02-image-alt-decorative.b1da16e038.640.jpg 640w, \u002F_img\u002F02-image-alt-decorative.b1da16e038.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"کنار هم: همان عکس یک‌بار بزرگ به‌عنوان تصویرِ معنادار با یک alt توصیفی، و یک‌بار کوچک و تزئینی با alt خالی که screen reader از رویش رد می‌شود\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> آزمون از فصل ۴ عوض نشده: «اگر این تصویر ناپدید می‌شد، این جمله کارش را انجام می‌داد؟» برای جلد، بله (می‌فهمیدی یک قایقِ تنها سرِ غروب است). برای آن آیکنِ ریز هیچ کاری برای انجام‌دادن نیست، پس صادقانه‌ترین \u003Ccode>alt\u003C\u002Fcode>، خالی است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":48,"heading":49,"html":50},"checkpoint","چالش: یک عکس، دو جا","\u003Ch2 id=\"چالش-یک-عکس-دو-جا\">چالش: یک عکس، دو جا\u003Ca class=\"head-anchor\" href=\"#%DA%86%D8%A7%D9%84%D8%B4-%DB%8C%DA%A9-%D8%B9%DA%A9%D8%B3-%D8%AF%D9%88-%D8%AC%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>فرض کن \u003Cstrong>یک فایلِ عکس\u003C\u002Fstrong> دو بار در یک صفحه می‌آید: یک‌بار بزرگ، به‌عنوان تصویرِ اصلیِ یک مطلب دربارهٔ دریا؛ و یک‌بار ریز، سه بار تکرارشده، به‌عنوان یک جداکنندهٔ تزئینی بین پاراگراف‌ها. فایل یکی است. \u003Ccode>alt\u003C\u002Fcode> هر دو هم باید یکی باشد؟ اول جواب بده.\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> نه. \u003Ccode>alt\u003C\u002Fcode> به \u003Cstrong>فایل\u003C\u002Fstrong> تعلق ندارد، به \u003Cstrong>نقشی\u003C\u002Fstrong> تعلق دارد که تصویر این‌بار بازی می‌کند. به‌عنوان تصویرِ اصلیِ مطلب، معنا دارد ← یک \u003Ccode>alt\u003C\u002Fcode> واقعی («...قایقِ تنها روی دریا...»). به‌عنوان جداکنندهٔ تزئینی، هیچ معنایی ندارد ← \u003Ccode>alt=""\u003C\u002Fcode>. همان pixel ها، دو \u003Ccode>alt\u003C\u002Fcode> متفاوت، چون \u003Ccode>alt\u003C\u002Fcode> هدف را توصیف می‌کند، نه خودِ عکس را.\u003C\u002Fp>\n",{"kind":21,"heading":52,"html":53},"۶. صفحهٔ کامل و دسترس‌پذیر","\u003Ch2 id=\"۶-صفحهٔ-کامل-و-دسترس‌پذیر\">۶. صفحهٔ کامل و دسترس‌پذیر\u003Ca class=\"head-anchor\" href=\"#%DB%B6-%D8%B5%D9%81%D8%AD%D9%87%D9%94-%DA%A9%D8%A7%D9%85%D9%84-%D9%88-%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%E2%80%8C%D9%BE%D8%B0%DB%8C%D8%B1\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا همه‌چیز را کنار هم بگذار: صفحهٔ باشگاه کتاب، با یک outline کامل، landmark ها، یک فرم که هر ورودی‌اش یک \u003Ccode><label>\u003C\u002Fcode> دارد، یک \u003Ccode>alt\u003C\u002Fcode> معنادار روی جلد، و یک \u003Ccode>alt\u003C\u002Fcode> خالی روی آیکنِ تزئینی — همهٔ تصمیم‌های این فصل در یک فایل:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <title>باشگاه کتاب<\u002Ftitle>\n  <\u002Fhead>\n  <body>\n    <header>\n      <h1>باشگاه کتاب<\u002Fh1>\n      <nav>\n        <ul>\n          <li><a href="#books">کتاب‌ها<\u002Fa><\u002Fli>\n          <li><a href="#join">عضویت<\u002Fa><\u002Fli>\n        <\u002Ful>\n      <\u002Fnav>\n    <\u002Fheader>\n\n    <main>\n      <article id="books">\n        <h2>کتاب این ماه<\u002Fh2>\n        <img src="https:\u002F\u002Fpicsum.photos\u002Fid\u002F24\u002F300\u002F400" alt="جلد کتاب: یک قایق تنها روی دریای آرام هنگام غروب" width="300" height="400">\n        <p>این ماه «دریای آرام» را با هم می‌خوانیم و یکشنبه دربارهٔ آن حرف می‌زنیم.<\u002Fp>\n        <p><a href="https:\u002F\u002Fexample.com\u002Fbook">دربارهٔ این کتاب بیشتر بخوان<\u002Fa><\u002Fp>\n      <\u002Farticle>\n\n      <section id="join">\n        <h2>عضو شو<\u002Fh2>\n        <img src="https:\u002F\u002Fpicsum.photos\u002Fid\u002F1025\u002F40\u002F40" alt="" width="40" height="40">\n        <form>\n          <p>\n            <label for="name">نام تو<\u002Flabel>\n            <input type="text" id="name" name="name">\n          <\u002Fp>\n          <p>\n            <label for="email">ایمیل<\u002Flabel>\n            <input type="email" id="email" name="email">\n          <\u002Fp>\n          <p>\n            <button type="submit">عضو شو<\u002Fbutton>\n          <\u002Fp>\n        <\u002Fform>\n      <\u002Fsection>\n    <\u002Fmain>\n\n    <footer>\n      <p>باشگاه کتاب — ۱۴۰۵<\u002Fp>\n    <\u002Ffooter>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی صفحه یک باشگاه کتابِ معمولی می‌بینی — تیتر، منو، کتابِ این ماه با جلدش، فرمِ عضویت، و پاصفحه. حالا بخشِ نامرئی: عنوان‌ها را از بالا به پایین بخوان (\u003Ccode>h1\u003C\u002Fcode>، \u003Ccode>h2\u003C\u002Fcode>، \u003Ccode>h2\u003C\u002Fcode> — یک outline کامل)؛ Tab بزن و ببین focus مرتب صفحه را قدم می‌زند؛ و دقت کن که جلد حرف می‌زند ولی آیکنِ تزئینی ساکت می‌ماند. این یک صفحه است که برای همه کار می‌کند.\u003C\u002Fp>\n\u003Cp>و آن نصفی که لازم نبود انجامش بدهی: بشمار امروز واقعاً چقدر «کارِ accessibility» به این صفحه اضافه کردی. landmark ها، \u003Ccode><label>\u003C\u002Fcode> ها، \u003Ccode>alt\u003C\u002Fcode> ها — همه را در ترم ۱ به دلیل‌های دیگری نوشته بودی. \u003Cstrong>semantic HTML نصفِ accessibility را برایت انجام داده بود\u003C\u002Fstrong>؛ این فصل بیشتر دربارهٔ دیدنِ همان کار و تمام‌کردنِ لبه‌هایش بود.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> صفحهٔ کاملت را به دستیار AI ات بده و بپرس «این صفحه چه مشکلاتِ accessibility دارد؟». یک جفت‌چشمِ دومِ عالی است — ولی هر مورد را با چیزی که حالا \u003Cstrong>می‌فهمی\u003C\u002Fstrong> بسنج. دو جا لغزش می‌کند: \u003Cstrong>اول،\u003C\u002Fstrong> ممکن است ARIA از خودش دربیاورد — بگوید روی \u003Ccode><nav>\u003C\u002Fcode> یا \u003Ccode><button>\u003C\u002Fcode> که خودشان معنا دارند \u003Ccode>role="..."\u003C\u002Fcode> یا \u003Ccode>aria-label="..."\u003C\u002Fcode> بگذار، دقیقاً همان شلوغیِ فصل ۶؛ روی صفحه‌ای که از tag های واقعی ساخته شده، بیشترِ این‌ها لازم نیست. \u003Cstrong>دوم،\u003C\u002Fstrong> AI نمی‌تواند واقعاً Tab بزند یا screen reader را بشنود، پس حدس می‌زند. هر ادعایش را خودت راستی‌آزمایی کن: واقعاً عنوان جایی می‌پرد؟ Tab واقعاً آن element را رد می‌کند؟ \u003Cstrong>اول خودت، بعد AI\u003C\u002Fstrong> — به حلقهٔ focus ای که می‌بینی و outline ای که می‌خوانی بیشتر از یک فهرستِ بااعتمادبه‌نفس اعتماد کن. و یادت باشد \u003Cstrong>AI هم اشتباه می‌کند\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":55,"html":56},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>accessibility\u003C\u002Ftd>\n\u003Ctd>اَکسِسیبیلیتی\u003C\u002Ftd>\n\u003Ctd>ساختنِ صفحه جوری که برای همه کار کند، از جمله کاربرِ screen reader و keyboard\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>screen reader\u003C\u002Ftd>\n\u003Ctd>اسکرین ریدِر\u003C\u002Ftd>\n\u003Ctd>برنامه‌ای که متنِ صفحه را برای کسی که نمی‌بیند با صدا می‌خواند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>focus\u003C\u002Ftd>\n\u003Ctd>فوکِس\u003C\u002Ftd>\n\u003Ctd>element ای که همین حالا keyboard رویش است؛ مرورگر دورش یک حلقه می‌کشد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>landmark\u003C\u002Ftd>\n\u003Ctd>لَندمارک\u003C\u002Ftd>\n\u003Ctd>ناحیهٔ بزرگِ صفحه (\u003Ccode><nav>\u003C\u002Fcode>، \u003Ccode><main>\u003C\u002Fcode>، …) که کاربر می‌تواند مستقیم به آن بپرد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>tabindex\u003C\u002Ftd>\n\u003Ctd>تَب‌ایندِکس\u003C\u002Ftd>\n\u003Ctd>attribute ای که ترتیبِ focus را دستکاری می‌کند؛ مقدارِ مثبتش تقریباً همیشه اشتباه است\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":48,"heading":58,"html":59},"تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: سه چیزی که یک کاربرِ screen reader یا keyboard از صفحهٔ تو انتظار دارد چیست، و کدامشان را همین semantic HTML برایت مجانی درست کرده؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یکی از صفحه‌هایی که در فصل‌های قبل ساختی را بردار (صفحهٔ semantic فصل ۶ یا فرمِ فصل ۸) و سه آزمونِ accessibility را رویش اجرا کن: \u003Cstrong>۱.\u003C\u002Fstrong> فقط عنوان‌ها را از بالا به پایین بخوان — جایی از یک سطح پریده‌ای؟ درستش کن. \u003Cstrong>۲.\u003C\u002Fstrong> با Tab از اولش تا آخر برو — focus همه‌چیز را به ترتیبِ منطقی می‌بیند و به هر لینک و دکمه و کادر می‌رسی؟ \u003Cstrong>۳.\u003C\u002Fstrong> هر \u003Ccode><img>\u003C\u002Fcode> را چک کن — تصویرِ معنادار \u003Ccode>alt\u003C\u002Fcode> معنادار دارد، و تصویرِ تزئینی \u003Ccode>alt=""\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک سایتِ واقعی و بزرگ را در مرورگر باز کن. از بالای صفحه ده بار Tab بزن و حلقهٔ focus را تماشا کن. آیا همیشه \u003Cstrong>می‌بینی\u003C\u002Fstrong> focus کجاست، یا گاهی ناپدید می‌شود (سایتی که حلقهٔ focus اش را خراب کرده)؟ بعد سعی کن فقط با keyboard به منوی اصلی برسی. یک چیز که سخت بود یادداشت کن — این یک باگِ واقعیِ accessibility روی یک سایتِ واقعی است، و حالا می‌توانی اسمش را بگویی.\u003C\u002Fp>\n",{"kind":21,"heading":61,"html":62},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>با این فصل، مفهوم‌های تازهٔ ترم ۱ تمام شد — حالا ساختار، معنا، فرم و دسترس‌پذیری را با هم داری. فصل بعد فصلِ پروژه است: \u003Cstrong>صفحهٔ معرفی خودت.\u003C\u002Fstrong> هیچ tag تازه‌ای نیست؛ همه‌چیزِ این ترم را در یک صفحهٔ واقعیِ چندبخشی کنار هم می‌گذاری، و دو ابزارِ حرفه‌ای را می‌بینی: \u003Cstrong>validator\u003C\u002Fstrong> که می‌گوید HTML ات معتبر است یا نه، و پنلِ \u003Cstrong>Elements\u003C\u002Fstrong> در DevTools که می‌گذارد اسکلتِ صفحه‌ات را همان‌طور که مرورگر می‌بیند تماشا کنی.\u003C\u002Fp>\n",{"course":64,"entitled":72,"lessons":73,"payments_enabled":72,"terms":258,"live":5},{"active_window":65,"effective_price_toman":66,"free":5,"lesson_count":67,"price_toman":68,"slug":69,"summary_fa":70,"title_fa":71},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[74,77,81,85,89,93,97,101,102,103,104,107,110,113,116,119,122,125,128,131,134,138,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252,255],{"free_preview":5,"order":9,"slug":75,"source":8,"term":9,"title_fa":76},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":78,"slug":79,"source":8,"term":9,"title_fa":80},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":82,"slug":83,"source":8,"term":9,"title_fa":84},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":86,"slug":87,"source":8,"term":9,"title_fa":88},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":90,"slug":91,"source":8,"term":9,"title_fa":92},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":94,"slug":95,"source":8,"term":9,"title_fa":96},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":98,"slug":99,"source":8,"term":9,"title_fa":100},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":9,"slug":105,"source":8,"term":78,"title_fa":106},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":78,"slug":108,"source":8,"term":78,"title_fa":109},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":82,"slug":111,"source":8,"term":78,"title_fa":112},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":86,"slug":114,"source":8,"term":78,"title_fa":115},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":90,"slug":117,"source":8,"term":78,"title_fa":118},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":94,"slug":120,"source":8,"term":78,"title_fa":121},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":98,"slug":123,"source":8,"term":78,"title_fa":124},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":12,"slug":126,"source":8,"term":78,"title_fa":127},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":6,"slug":129,"source":8,"term":78,"title_fa":130},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":16,"slug":132,"source":8,"term":78,"title_fa":133},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":135,"slug":136,"source":8,"term":78,"title_fa":137},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":9,"slug":139,"source":8,"term":82,"title_fa":140},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":78,"slug":142,"source":8,"term":82,"title_fa":143},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":82,"slug":145,"source":8,"term":82,"title_fa":146},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":86,"slug":148,"source":8,"term":82,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":90,"slug":151,"source":8,"term":82,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":94,"slug":154,"source":8,"term":82,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":98,"slug":157,"source":8,"term":82,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":12,"slug":160,"source":8,"term":82,"title_fa":161},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":6,"slug":163,"source":8,"term":82,"title_fa":164},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":16,"slug":166,"source":8,"term":82,"title_fa":167},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":135,"slug":169,"source":8,"term":82,"title_fa":170},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":9,"slug":172,"source":8,"term":86,"title_fa":173},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":78,"slug":175,"source":8,"term":86,"title_fa":176},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":82,"slug":178,"source":8,"term":86,"title_fa":179},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":86,"slug":181,"source":8,"term":86,"title_fa":182},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":90,"slug":184,"source":8,"term":86,"title_fa":185},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":94,"slug":187,"source":8,"term":86,"title_fa":188},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":98,"slug":190,"source":8,"term":86,"title_fa":191},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":12,"slug":193,"source":8,"term":86,"title_fa":194},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":9,"slug":196,"source":8,"term":90,"title_fa":197},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":78,"slug":199,"source":8,"term":90,"title_fa":200},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":82,"slug":202,"source":8,"term":90,"title_fa":203},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":86,"slug":205,"source":8,"term":90,"title_fa":206},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":90,"slug":208,"source":8,"term":90,"title_fa":209},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":94,"slug":211,"source":8,"term":90,"title_fa":212},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":98,"slug":214,"source":8,"term":90,"title_fa":215},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":12,"slug":217,"source":8,"term":90,"title_fa":218},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":6,"slug":220,"source":8,"term":90,"title_fa":221},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":16,"slug":223,"source":8,"term":90,"title_fa":224},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":9,"slug":226,"source":8,"term":94,"title_fa":227},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":78,"slug":229,"source":8,"term":94,"title_fa":230},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":82,"slug":232,"source":8,"term":94,"title_fa":233},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":86,"slug":235,"source":8,"term":94,"title_fa":236},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":90,"slug":238,"source":8,"term":94,"title_fa":239},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":94,"slug":241,"source":8,"term":94,"title_fa":242},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":98,"slug":244,"source":8,"term":94,"title_fa":245},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":12,"slug":247,"source":8,"term":94,"title_fa":248},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":6,"slug":250,"source":8,"term":94,"title_fa":251},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":16,"slug":253,"source":8,"term":94,"title_fa":254},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":135,"slug":256,"source":8,"term":94,"title_fa":257},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827104807]