[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t6-s06-accessibility-deep":3,"course:taropood":59},{"meta":4,"prev":10,"next":14,"sections":18},{"free_preview":5,"order":6,"slug":7,"source":8,"term":6,"title_fa":9},true,6,"t6-s06-accessibility-deep","book","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":11,"slug":12,"source":8,"term":6,"title_fa":13},5,"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":15,"slug":16,"source":8,"term":6,"title_fa":17},7,"t6-s07-performance","فصل ۰۷ — سرعت",[19,23,26,31,34,37,40,43,46,49,52,56],{"kind":20,"heading":21,"html":22},"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>در ترم ۱ یاد گرفتی که HTMLِ semantic نصفِ کارِ دسترس‌پذیری را خودش انجام می‌دهد. حالا نصفِ دیگر را می‌سازیم — همان جاهایی که با CSS و انتخاب‌های خودت یا صفحه را برای همه باز می‌کنی، یا بی‌آنکه بفهمی در را می‌بندی. آخرِ فصل یک کارتِ پروفایلِ کوچک داری که کاملاً با \u003Cstrong>صفحه‌کلید\u003C\u002Fstrong> کار می‌کند، هر چیزِ قابل‌فوکوس یک حلقهٔ \u003Ccode>focus\u003C\u002Fcode>ِ دیدنی دارد، متنش خوانا است، و ARIA را فقط جایی گذاشته‌ای که واقعاً لازم بوده. مهم‌تر از خودِ کارت، یاد می‌گیری چطور خرابی‌های دسترس‌پذیری را — که با چشم دیده نمی‌شوند — خودت پیدا کنی.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-focus-order.efd54c59cc.160.webp 160w, \u002F_img\u002F01-image-focus-order.efd54c59cc.320.webp 320w, \u002F_img\u002F01-image-focus-order.efd54c59cc.640.webp 640w, \u002F_img\u002F01-image-focus-order.efd54c59cc.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-focus-order.efd54c59cc.1280.jpg\" srcset=\"\u002F_img\u002F01-image-focus-order.efd54c59cc.160.jpg 160w, \u002F_img\u002F01-image-focus-order.efd54c59cc.320.jpg 320w, \u002F_img\u002F01-image-focus-order.efd54c59cc.640.jpg 640w, \u002F_img\u002F01-image-focus-order.efd54c59cc.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک کارتِ پروفایل که یک مسیرِ نقطه‌چینِ حرکتِ صفحه‌کلید رویش کشیده شده: از منوی بالا شروع می‌شود، به دکمهٔ اصلی می‌رسد و بعد به دکمهٔ آیکونی؛ دورِ عنصرِ فعال یک قابِ ضخیمِ قرمز هست که همان حلقهٔ focus را نشان می‌دهد\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>یک صفحه را فقط با \u003Ccode>Tab\u003C\u002Fcode> و \u003Ccode>Enter\u003C\u002Fcode> بپیمایی و خرابی‌هایش را پیدا کنی\u003C\u002Fli>\n\u003Cli>برای هر چیزِ قابل‌فوکوس یک حلقهٔ \u003Ccode>focus\u003C\u002Fcode>ِ دیدنی نگه داری\u003C\u002Fli>\n\u003Cli>بگویی ARIA کِی لازم است و کِی به‌جای کمک ضرر می‌زند\u003C\u002Fli>\n\u003Cli>رنگِ متن را به‌قدرِ کافی خوانا (contrast) نگه داری\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":20,"heading":24,"html":25},"قبل از شروع","\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> پیمایش با \u003Ccode>Tab\u003C\u002Fcode>، landmark ها، \u003Ccode>alt\u003C\u002Fcode> درست — پایهٔ همین فصل است.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۵ فصل ۱:\u003C\u002Fstrong> \u003Ccode>:focus\u003C\u002Fcode> و \u003Ccode>:focus-visible\u003C\u002Fcode> — حلقهٔ focus را با همین می‌سازیم.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":27,"heading":28,"html":29,"embed":30},"lab","","— یک کارتِ پروفایل می‌بینی که یک دکمه‌اش با <div> ساخته شده و با صفحه‌کلید اصلاً قابلِ رسیدن نیست. کارِ این فصل این است که این خرابی‌ها را با Tab پیدا و یکی‌یکی درست کنی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-6-professional\u002Fsession-06-accessibility-deep",{"kind":20,"heading":32,"html":33},"۱. تست با صفحه‌کلید: Tab را بزن","\u003Ch2 id=\"۱-تست-با-صفحه‌کلید-tab-را-بزن\">۱. تست با صفحه‌کلید: \u003Ccode>Tab\u003C\u002Fcode> را بزن\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%AA%D8%B3%D8%AA-%D8%A8%D8%A7-%D8%B5%D9%81%D8%AD%D9%87%E2%80%8C%DA%A9%D9%84%DB%8C%D8%AF-tab-%D8%B1%D8%A7-%D8%A8%D8%B2%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>خیلی‌ها با ماوس یا لمس کار نمی‌کنند: کسی که نمی‌بیند، کسی که دستش می‌لرزد، کسی که فقط صفحه‌کلید دارد. همهٔ این‌ها با یک کلید در صفحه حرکت می‌کنند: \u003Ccode>Tab\u003C\u002Fcode>. هر بار که \u003Ccode>Tab\u003C\u002Fcode> را بزنی، فوکوس به عنصرِ \u003Cstrong>قابلِ‌تعاملِ بعدی\u003C\u002Fstrong> می‌پرد — لینک، دکمه، فیلد — و \u003Ccode>Enter\u003C\u002Fcode> آن را فعال می‌کند.\u003C\u002Fp>\n\u003Cp>این ساده‌ترین و مهم‌ترین تستِ دسترس‌پذیری است: \u003Cstrong>ماوس را کنار بگذار و فقط با \u003Ccode>Tab\u003C\u002Fcode> کلِ صفحه را طی کن.\u003C\u002Fstrong> در آزمایشگاه همین را بکن. حواست به دو چیز باشد: آیا به \u003Cstrong>همه‌چیز\u003C\u002Fstrong> می‌رسی؟ و ترتیبِ پرش‌ها منطقی است؟\u003C\u002Fp>\n\u003Cp>ترتیبِ این پرش‌ها را خودت جدا تعیین نمی‌کنی؛ \u003Cstrong>از ترتیبِ HTML می‌آید\u003C\u002Fstrong>. عنصرها به همان ترتیبی که در فایل نوشته شده‌اند فوکوس می‌گیرند. برای همین یک قانونِ ساده داریم: چیزها را در HTML به همان ترتیبی بنویس که می‌خواهی کاربر به آن‌ها برسد؛ آن‌وقت ترتیبِ صفحه‌کلید خودش درست می‌شود.\u003C\u002Fp>\n",{"kind":20,"heading":35,"html":36},"۲. focus باید دیده شود","\u003Ch2 id=\"۲-focus-باید-دیده-شود\">۲. \u003Ccode>focus\u003C\u002Fcode> باید دیده شود\u003Ca class=\"head-anchor\" href=\"#%DB%B2-focus-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%AF%DB%8C%D8%AF%D9%87-%D8%B4%D9%88%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>وقتی با \u003Ccode>Tab\u003C\u002Fcode> حرکت می‌کنی، باید \u003Cstrong>ببینی\u003C\u002Fstrong> الان کجایی. مرورگر برای همین دورِ عنصرِ فعال یک حلقه می‌کشد. این حلقه برای کاربرِ صفحه‌کلید مثلِ نشانگرِ ماوس است — بی‌آن، گم می‌شود.\u003C\u002Fp>\n\u003Cp>در ترم ۵ با \u003Ccode>:focus-visible\u003C\u002Fcode> آشنا شدی؛ اینجا ازش یک حلقهٔ تمیز و پُررنگ می‌سازیم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>:focus-visible {\n  outline: 3px solid var(--focus);\n  outline-offset: 2px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا در آزمایشگاه \u003Ccode>Tab\u003C\u002Fcode> بزن — دورِ هر لینک و دکمه یک قابِ قرمزِ واضح ظاهر می‌شود که با هر پرش جابه‌جا می‌شود. همیشه می‌دانی کجایی.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> رایج‌ترین اشتباهِ دسترس‌پذیری در کلِ وب یک خطِ کوتاه است: \u003Ccode>outline: none\u003C\u002Fcode>. خیلی‌ها چون حلقهٔ پیش‌فرض را زشت می‌دانند حذفش می‌کنند — و کاربرِ صفحه‌کلید را کاملاً کور می‌کنند. اگر حلقهٔ پیش‌فرض را دوست نداری، \u003Cstrong>جایگزینش کن\u003C\u002Fstrong>، حذفش نکن. یک حلقهٔ زیبای خودت بگذار، ولی هیچ‌وقت صفحه را بی‌حلقه رها نکن.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":38,"html":39},"۳. ARIA: کِی لازم است و کِی مضر","\u003Ch2 id=\"۳-aria-کِی-لازم-است-و-کِی-مضر\">۳. ARIA: کِی لازم است و کِی مضر\u003Ca class=\"head-anchor\" href=\"#%DB%B3-aria-%DA%A9%D9%90%DB%8C-%D9%84%D8%A7%D8%B2%D9%85-%D8%A7%D8%B3%D8%AA-%D9%88-%DA%A9%D9%90%DB%8C-%D9%85%D8%B6%D8%B1\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>ARIA\u003C\u002Fcode> مجموعه‌ای از attribute هاست که به ماشین‌ها اطلاعاتِ اضافه می‌دهند — مثلِ \u003Ccode>role\u003C\u002Fcode> (این چیست؟) و \u003Ccode>aria-label\u003C\u002Fcode> (اسمش چیست؟). به‌نظر می‌رسد هرچه بیشتر، بهتر. ولی حقیقت برعکس است، و این مهم‌ترین درسِ فصل است: \u003Cstrong>اول HTMLِ بومی، ARIA فقط برای پُرکردنِ شکاف.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>چرا؟ چون تگ‌های بومی از قبل نقششان را دارند. \u003Ccode><button>\u003C\u002Fcode> به ماشین می‌گوید «من دکمه‌ام»، با صفحه‌کلید کار می‌کند و \u003Ccode>Enter\u003C\u002Fcode> و \u003Ccode>Space\u003C\u002Fcode> را می‌فهمد — همه رایگان. حالا فرض کن کسی دکمهٔ «دنبال کن» را این‌طور ساخته باشد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><div class="btn" role="button">دنبال کن<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>روی صفحه شبیهِ یک دکمه است. ولی در آزمایشگاه با \u003Ccode>Tab\u003C\u002Fcode> امتحانش کن: فوکوس \u003Cstrong>اصلاً به آن نمی‌رسد\u003C\u002Fstrong>؛ ازش رد می‌شود، انگار وجود ندارد. کاربرِ صفحه‌کلید هیچ‌وقت نمی‌تواند «دنبال کن» را بزند.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-native-vs-div.cd0eee1550.160.webp 160w, \u002F_img\u002F02-image-native-vs-div.cd0eee1550.320.webp 320w, \u002F_img\u002F02-image-native-vs-div.cd0eee1550.640.webp 640w, \u002F_img\u002F02-image-native-vs-div.cd0eee1550.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-native-vs-div.cd0eee1550.1280.jpg\" srcset=\"\u002F_img\u002F02-image-native-vs-div.cd0eee1550.160.jpg 160w, \u002F_img\u002F02-image-native-vs-div.cd0eee1550.320.jpg 320w, \u002F_img\u002F02-image-native-vs-div.cd0eee1550.640.jpg 640w, \u002F_img\u002F02-image-native-vs-div.cd0eee1550.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"دو دکمهٔ به‌ظاهر یک‌شکل کنار هم با یک مسیرِ نقطه‌چینِ صفحه‌کلید؛ مسیر روی دکمهٔ توپُرِ سمتِ راست می‌ایستد و دورش یک قابِ ضخیمِ قرمز می‌گیرد، ولی از دکمهٔ خط‌چینِ توخالیِ سمتِ چپ می‌پرد و رد می‌شود بی‌آنکه قابی بگیرد\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> آن \u003Ccode>role="button"\u003C\u002Fcode> فقط \u003Cstrong>اسمِ\u003C\u002Fstrong> «دکمه» را چسبانده، ولی \u003Ccode><div>\u003C\u002Fcode> هیچ‌کدام از رفتارهای واقعیِ دکمه را ندارد — نه قابلِ‌فوکوس است، نه \u003Ccode>Enter\u003C\u002Fcode> را می‌فهمد. راهِ حل ARIAی بیشتر نیست؛ راهِ حل عنصرِ \u003Cstrong>بومیِ\u003C\u002Fstrong> درست است. \u003Ccode><div role="button">\u003C\u002Fcode> را با \u003Ccode><button>\u003C\u002Fcode> عوض کن:\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><button class="btn" type="button">دنبال کن<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا \u003Ccode>Tab\u003C\u002Fcode> مستقیم رویش می‌ایستد، حلقهٔ focus می‌گیرد و \u003Ccode>Enter\u003C\u002Fcode> فعالش می‌کند — همه بدونِ یک attributeِ اضافه. این قاعدهٔ طلایی است: هر جا یک تگِ بومی برای کاری هست، هیچ مقدار ARIA جای آن را نمی‌گیرد.\u003C\u002Fp>\n\u003Cp>پس ARIA کِی \u003Cstrong>درست\u003C\u002Fstrong> است؟ دقیقاً جایی که HTML حرفی برای گفتن ندارد. دکمهٔ آیکونیِ «هم‌رسانی» متنِ دیدنی ندارد — فقط یک آیکون. screen reader چیزی برای خواندن ندارد. اینجا \u003Ccode>aria-label\u003C\u002Fcode> شکاف را پُر می‌کند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><button class="icon-btn" type="button" aria-label="هم‌رسانی پروفایل">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>این ARIAی درست است: اسمی می‌دهد که HTML به‌تنهایی نمی‌توانست بدهد.\u003C\u002Fp>\n",{"kind":20,"heading":41,"html":42},"۴. contrast: متن باید خوانا باشد","\u003Ch2 id=\"۴-contrast-متن-باید-خوانا-باشد\">۴. contrast: متن باید خوانا باشد\u003Ca class=\"head-anchor\" href=\"#%DB%B4-contrast-%D9%85%D8%AA%D9%86-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%AE%D9%88%D8%A7%D9%86%D8%A7-%D8%A8%D8%A7%D8%B4%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک رنگِ متنِ کم‌رنگ ممکن است روی صفحهٔ تو قشنگ باشد، ولی برای چشمِ خیلی‌ها — زیرِ نورِ آفتاب، روی صفحهٔ ارزان، با چشمِ خسته — ناخواناست. فاصلهٔ رنگِ متن از پس‌زمینه‌اش را \u003Cstrong>contrast\u003C\u002Fstrong> می‌گویند، و باید به‌قدرِ کافی زیاد باشد. بیا کم‌بودنش را ببینیم؛ رنگِ توضیح را به یک خاکستریِ پریده عوض کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.desc {\n  color: #b8b2a4;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> متنِ توضیح حالا انگار محو شده و به‌سختی خوانده می‌شود. همان متن را با \u003Ccode>#5a5342\u003C\u002Fcode> (تیره‌تر) بگذار: بی‌آنکه طراحی به‌هم بریزد، کاملاً خوانا می‌شود. قاعده ساده است: رنگ را برای خوانایی انتخاب کن، نه فقط برای زیبایی — و اگر شک داری، تیره‌ترش کن.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> DevTools مرورگر خودش contrast را برایت اندازه می‌گیرد. روی متن Inspect کن؛ کنارِ \u003Ccode>color\u003C\u002Fcode> یک عددِ نسبت و یک علامتِ ✓ یا ✗ می‌بینی که می‌گوید به حدِ لازم رسیده یا نه. لازم نیست حدس بزنی.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":44,"html":45},"۵. کد کامل","\u003Ch2 id=\"۵-کد-کامل\">۵. کد کامل\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول \u003Ccode>index.html\u003C\u002Fcode> — دکمهٔ بومی، \u003Ccode>nav\u003C\u002Fcode> با \u003Ccode>aria-label\u003C\u002Fcode> که این منو را از منوهای دیگر جدا می‌کند، و دکمهٔ آیکونی با \u003Ccode>aria-label\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    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>دسترس‌پذیری عمیق<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main class="card">\n      <h1>پروفایلِ آوا<\u002Fh1>\n      <nav class="menu" aria-label="پیمایش پروفایل">\n        <ul>\n          <li><a href="#posts">پست‌ها<\u002Fa><\u002Fli>\n          <li><a href="#about">درباره<\u002Fa><\u002Fli>\n        <\u002Ful>\n      <\u002Fnav>\n      <p class="desc">این پروفایل را دنبال کن تا پست‌های تازه‌اش را ببینی.<\u002Fp>\n      <footer class="actions">\n        <button class="btn" type="button">دنبال کن<\u002Fbutton>\n        <button class="icon-btn" type="button" aria-label="هم‌رسانی پروفایل">\n          <svg class="icon" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">\n            <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z" fill="currentColor" \u002F>\n          <\u002Fsvg>\n        <\u002Fbutton>\n      <\u002Ffooter>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode> با حلقهٔ focus و رنگِ خوانا:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\n:root {\n  --bg: #f6edda;\n  --card: #ffffff;\n  --ink: #2c2114;\n  --muted: #5a5342;\n  --brand: #2a6b93;\n  --line: #d8ccae;\n  --focus: #bc3e1c;\n}\n\nbody {\n  margin: 0;\n  font-family: Tahoma, sans-serif;\n  background-color: var(--bg);\n  color: var(--ink);\n  padding: 40px;\n  line-height: 1.9;\n}\n\n.card {\n  max-width: 360px;\n  margin-inline: auto;\n  padding: 24px;\n  background-color: var(--card);\n  border: 1px solid var(--line);\n  border-radius: 16px;\n}\n\n.card h1 {\n  margin: 0 0 10px;\n  font-size: 1.4rem;\n}\n\n.menu ul {\n  display: flex;\n  gap: 16px;\n  margin: 0 0 12px;\n  padding: 0;\n  list-style: none;\n}\n\n.menu a {\n  color: var(--brand);\n  font-weight: 700;\n  text-decoration: none;\n}\n\n.desc {\n  margin: 0 0 18px;\n  color: var(--muted);\n}\n\n.actions {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  margin: 0;\n}\n\n.btn {\n  padding: 8px 18px;\n  border: 1px solid var(--brand);\n  border-radius: 10px;\n  background-color: var(--brand);\n  color: #ffffff;\n  font-family: inherit;\n  font-size: 1rem;\n  font-weight: 700;\n  cursor: pointer;\n}\n\n.icon-btn {\n  display: inline-flex;\n  padding: 8px;\n  border: 1px solid var(--line);\n  border-radius: 10px;\n  background-color: transparent;\n  color: var(--brand);\n  cursor: pointer;\n}\n\n\u002F* har chizi ke focus migirad yek halghe-ye didani darad *\u002F\n:focus-visible {\n  outline: 3px solid var(--focus);\n  outline-offset: 2px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n",{"kind":20,"heading":47,"html":48},"۶. همیار AI: کمکِ درست، اشتباهِ رایج","\u003Ch2 id=\"۶-همیار-ai-کمکِ-درست-اشتباهِ-رایج\">۶. همیار AI: کمکِ درست، اشتباهِ رایج\u003Ca class=\"head-anchor\" href=\"#%DB%B6-%D9%87%D9%85%DB%8C%D8%A7%D8%B1-ai-%DA%A9%D9%85%DA%A9%D9%90-%D8%AF%D8%B1%D8%B3%D8%AA-%D8%A7%D8%B4%D8%AA%D8%A8%D8%A7%D9%87%D9%90-%D8%B1%D8%A7%DB%8C%D8%AC\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>دسترس‌پذیری دقیقاً همان‌جایی است که AI هم بیشترین کمک و هم بیشترین اشتباه را دارد — چون درباره‌اش پُرحرف و مطمئن است، ولی زیاده‌رویِ ARIA اش را فقط وقتی می‌فهمی که خودت قاعده را بلد باشی. سه قانونِ ثابتِ کار با AI در کلِ این خودآموز اینهاست:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> سه قانون را عیناً به خاطر بسپار: \u003Cstrong>«اول خودت، بعد AI»\u003C\u002Fstrong> — اول با معیارهای خودت تصمیم بگیر، بعد نظر AI را به‌عنوان نظرِ دوم بشنو، نه جوابِ نهایی. \u003Cstrong>«خط به خط»\u003C\u002Fstrong> — هر چیزی که AI می‌دهد را خط‌به‌خط بخوان و بفهم، هیچ‌وقت یک‌جا کپی نکن. \u003Cstrong>«AI هم اشتباه می‌کند»\u003C\u002Fstrong> — و همین الان یک نمونه‌اش را با هم می‌بینیم.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cstrong>کاربردِ خوب.\u003C\u002Fstrong> بهترین استفادهٔ AI اینجا یک بازبینیِ \u003Cstrong>بعد از\u003C\u002Fstrong> کارِ خودت است — یک جفت‌چشمِ دوم:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> بعد از اینکه خودت با \u003Ccode>Tab\u003C\u002Fcode> صفحه را تست کردی، HTML ات را به دستیار AI ات بده و بپرس: «آیا چیزی در این صفحه هست که کاربرِ صفحه‌کلید به آن نرسد، یا دکمه‌ای که اسمِ خوانا نداشته باشد؟». این کمک می‌کند شکافی را که از چشمت افتاده ببینی — ولی هر پیشنهادش را \u003Cstrong>خودت در آزمایشگاه با \u003Ccode>Tab\u003C\u002Fcode> بسنج\u003C\u002Fstrong>، نه اینکه فقط باور کنی.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cstrong>کاربردِ اشتباه.\u003C\u002Fstrong> حالا نمونه‌ای که AI با اعتمادبه‌نفسِ کامل، صفحه را \u003Cstrong>بدتر\u003C\u002Fstrong> می‌کند. اگر بگویی «این صفحه را دسترس‌پذیرتر کن»، خیلی وقت‌ها AI شروع می‌کند به پاشیدنِ ARIA روی همه‌چیز — حتی روی چیزهایی که از قبل بومی و درست‌اند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><nav class="menu" role="navigation" aria-label="پیمایش پروفایل">\n  ...\n<\u002Fnav>\n<button class="btn" type="button" role="button" aria-label="دنبال کن">دنبال کن<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>قاطع توضیح می‌دهد «این‌ها صفحه را دسترس‌پذیرتر می‌کنند». ولی با همان چیزی که در این فصل فهمیدی می‌توانی ردش کنی. \u003Ccode><nav>\u003C\u002Fcode> از قبل به ماشین می‌گوید «من ناوبری‌ام»، پس \u003Ccode>role="navigation"\u003C\u002Fcode> فقط همان حرف را دوباره می‌زند — مثلِ تابلوی «در» روی یک در. \u003Ccode><button>\u003C\u002Fcode> از قبل نقشِ دکمه دارد، پس \u003Ccode>role="button"\u003C\u002Fcode> رویش زیادی است. و آن \u003Ccode>aria-label="دنبال کن"\u003C\u002Fcode> که عینِ متنِ دیدنیِ دکمه است، بدترین‌شان است: اسمِ دستی‌ای می‌گذارد که اگر فردا متنِ دکمه را عوض کنی، این برچسب پشتِ سرش عوض نمی‌شود و ماشین حرفِ اشتباه می‌زند.\u003C\u002Fp>\n\u003Cp>قاعده وارونهٔ چیزی است که به‌نظر می‌رسد: \u003Cstrong>ARIA را برای پُرکردنِ شکاف به‌کار ببر، نه برای تکرارِ چیزی که HTML از قبل می‌گوید.\u003C\u002Fstrong> ARIAی درست همان یک \u003Ccode>aria-label\u003C\u002Fcode> روی دکمهٔ آیکونی بود که متن نداشت. این بهترین درسِ «AI هم اشتباه می‌کند» است: جمله‌ای می‌سازد که کمک‌کننده به‌نظر می‌رسد، ولی وقتی خط‌به‌خط با فهمِ خودت بسنجی‌اش، می‌بینی دارد شلوغی و خطا اضافه می‌کند. اول خودت، بعد AI.\u003C\u002Fp>\n",{"kind":20,"heading":50,"html":51},"واژه‌های تازهٔ این فصل","\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>focus order\u003C\u002Ftd>\n\u003Ctd>فوکوس اُردِر\u003C\u002Ftd>\n\u003Ctd>ترتیبی که \u003Ccode>Tab\u003C\u002Fcode> بینِ عنصرها می‌پرد؛ از ترتیبِ HTML می‌آید\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>ARIA\u003C\u002Ftd>\n\u003Ctd>آریا\u003C\u002Ftd>\n\u003Ctd>attribute هایی که به ماشین‌ها نقش و اسمِ اضافه می‌دهند؛ فقط برای پُرکردنِ شکاف\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>role\u003C\u002Ftd>\n\u003Ctd>رول\u003C\u002Ftd>\n\u003Ctd>attributeِ ARIA که می‌گوید یک عنصر «چیست»\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>aria-label\u003C\u002Ftd>\n\u003Ctd>آریا لِیبِل\u003C\u002Ftd>\n\u003Ctd>اسمِ خوانا برای عنصری که متنِ دیدنی ندارد، مثلِ دکمهٔ آیکونی\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>contrast\u003C\u002Ftd>\n\u003Ctd>کُنتراست\u003C\u002Ftd>\n\u003Ctd>فاصلهٔ رنگِ متن از پس‌زمینه؛ هرچه بیشتر، خواناتر\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":53,"heading":54,"html":55},"checkpoint","تمرین‌ها","\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>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: چرا \u003Ccode><div role="button">\u003C\u002Fcode> بدتر از یک \u003Ccode><button>\u003C\u002Fcode>ِ ساده است؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> به کارت یک دکمهٔ آیکونیِ دوم اضافه کن (مثلاً یک آیکونِ «پیام») که فقط آیکون دارد و متن ندارد. با \u003Ccode>Tab\u003C\u002Fcode> تست کن که فوکوس رویش می‌ایستد و حلقه می‌گیرد، و یک \u003Ccode>aria-label\u003C\u002Fcode>ِ معنادار برایش بگذار. بعد کلِ کارت را فقط با صفحه‌کلید طی کن و مطمئن شو به هر سه عنصرِ تعاملی می‌رسی.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> رنگِ لینک‌های منو را عمداً به یک آبیِ خیلی روشن ببر تا contrast اش کم شود، بعد در DevTools عددِ نسبت را ببین. حالا آن‌قدر تیره‌اش کن تا علامتِ ✓ بگیرد. عددِ نهایی را یادداشت کن — این حسِ «چقدر تیره کافی است» را در تو می‌سازد.\u003C\u002Fp>\n",{"kind":20,"heading":57,"html":58},"در فصل بعد","\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>. یاد می‌گیری چرا صفحه موقعِ بارگذاری می‌پرد و چطور با \u003Ccode>width\u003C\u002Fcode>\u002F\u003Ccode>height\u003C\u002Fcode> جلویش را بگیری، چطور تصویرها را سبک کنی، و چطور CSSِ بی‌استفاده را پیدا و حذف کنی.\u003C\u002Fp>\n",{"course":60,"entitled":68,"lessons":69,"payments_enabled":68,"terms":255,"live":5},{"active_window":61,"effective_price_toman":62,"free":5,"lesson_count":63,"price_toman":64,"slug":65,"summary_fa":66,"title_fa":67},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[70,74,78,82,86,89,92,95,99,103,107,110,113,116,119,122,125,128,131,134,137,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,241,242,243,246,249,252],{"free_preview":5,"order":71,"slug":72,"source":8,"term":71,"title_fa":73},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":75,"slug":76,"source":8,"term":71,"title_fa":77},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":79,"slug":80,"source":8,"term":71,"title_fa":81},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":83,"slug":84,"source":8,"term":71,"title_fa":85},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":11,"slug":87,"source":8,"term":71,"title_fa":88},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":6,"slug":90,"source":8,"term":71,"title_fa":91},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":15,"slug":93,"source":8,"term":71,"title_fa":94},"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":96,"slug":97,"source":8,"term":71,"title_fa":98},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":100,"slug":101,"source":8,"term":71,"title_fa":102},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":104,"slug":105,"source":8,"term":71,"title_fa":106},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":71,"slug":108,"source":8,"term":75,"title_fa":109},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":75,"slug":111,"source":8,"term":75,"title_fa":112},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":79,"slug":114,"source":8,"term":75,"title_fa":115},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":83,"slug":117,"source":8,"term":75,"title_fa":118},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":11,"slug":120,"source":8,"term":75,"title_fa":121},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":6,"slug":123,"source":8,"term":75,"title_fa":124},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":15,"slug":126,"source":8,"term":75,"title_fa":127},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":96,"slug":129,"source":8,"term":75,"title_fa":130},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":100,"slug":132,"source":8,"term":75,"title_fa":133},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":104,"slug":135,"source":8,"term":75,"title_fa":136},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":138,"slug":139,"source":8,"term":75,"title_fa":140},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":71,"slug":142,"source":8,"term":79,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":75,"slug":145,"source":8,"term":79,"title_fa":146},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":79,"slug":148,"source":8,"term":79,"title_fa":149},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":83,"slug":151,"source":8,"term":79,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":11,"slug":154,"source":8,"term":79,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":6,"slug":157,"source":8,"term":79,"title_fa":158},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":15,"slug":160,"source":8,"term":79,"title_fa":161},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":96,"slug":163,"source":8,"term":79,"title_fa":164},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":100,"slug":166,"source":8,"term":79,"title_fa":167},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":104,"slug":169,"source":8,"term":79,"title_fa":170},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":138,"slug":172,"source":8,"term":79,"title_fa":173},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":71,"slug":175,"source":8,"term":83,"title_fa":176},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":75,"slug":178,"source":8,"term":83,"title_fa":179},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":79,"slug":181,"source":8,"term":83,"title_fa":182},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":83,"slug":184,"source":8,"term":83,"title_fa":185},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":11,"slug":187,"source":8,"term":83,"title_fa":188},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":6,"slug":190,"source":8,"term":83,"title_fa":191},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":15,"slug":193,"source":8,"term":83,"title_fa":194},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":96,"slug":196,"source":8,"term":83,"title_fa":197},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":71,"slug":199,"source":8,"term":11,"title_fa":200},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":75,"slug":202,"source":8,"term":11,"title_fa":203},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":79,"slug":205,"source":8,"term":11,"title_fa":206},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":83,"slug":208,"source":8,"term":11,"title_fa":209},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":11,"slug":211,"source":8,"term":11,"title_fa":212},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":6,"slug":214,"source":8,"term":11,"title_fa":215},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":15,"slug":217,"source":8,"term":11,"title_fa":218},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":96,"slug":220,"source":8,"term":11,"title_fa":221},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":100,"slug":223,"source":8,"term":11,"title_fa":224},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":104,"slug":226,"source":8,"term":11,"title_fa":227},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":71,"slug":229,"source":8,"term":6,"title_fa":230},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":75,"slug":232,"source":8,"term":6,"title_fa":233},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":79,"slug":235,"source":8,"term":6,"title_fa":236},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":83,"slug":238,"source":8,"term":6,"title_fa":239},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":11,"slug":12,"source":8,"term":6,"title_fa":13},{"free_preview":5,"order":6,"slug":7,"source":8,"term":6,"title_fa":9},{"free_preview":5,"order":15,"slug":16,"source":8,"term":6,"title_fa":17},{"free_preview":5,"order":96,"slug":244,"source":8,"term":6,"title_fa":245},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":100,"slug":247,"source":8,"term":6,"title_fa":248},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":104,"slug":250,"source":8,"term":6,"title_fa":251},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":138,"slug":253,"source":8,"term":6,"title_fa":254},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105766]