[{"data":1,"prerenderedAt":13},["ShallowReactive",2],{"blog:why-alt-text":3},{"category":4,"cover_image":5,"html":6,"published_at":7,"seo_description":8,"seo_title":9,"slug":10,"sort_order":11,"title_fa":12},"web-basics","\u002Fblog\u002Fwhy-alt-text.jpg","\u003Cp>هر تصویری که در یک صفحه می‌گذاری یک \u003Ccode dir=\"ltr\">attribute\u003C\u002Fcode> به‌اسم \u003Ccode dir=\"ltr\">alt\u003C\u002Fcode> دارد؛ یک متن کوتاه که می‌گوید آن تصویر چیست. خیلی‌ها این را خالی می‌گذارند یا اصلاً از قلم می‌اندازند، چون وقتی تصویر درست بارگذاری می‌شود دیده نمی‌شود. ولی \u003Ccode dir=\"ltr\">alt\u003C\u002Fcode> دقیقاً برای همان لحظه‌هایی است که تصویر \u003Cstrong>دیده نمی‌شود\u003C\u002Fstrong> — و بیشتر از چیزی که فکر می‌کنی مهم است.\u003C\u002Fp>\n\u003Ch2>alt چیست؟\u003C\u002Fh2>\n\u003Cp>وقتی یک تصویر را با tag تصویر در صفحه می‌گذاری، کنارش می‌نویسی \u003Ccode dir=\"ltr\">alt=\"...\"\u003C\u002Fcode> و داخل گیومه توضیح می‌دهی تصویر چه چیزی را نشان می‌دهد. این متن، جانشینِ تصویر است؛ اگر تصویر سرِ جایش نبود، این متن کارش را انجام می‌دهد. تا وقتی همه‌چیز عادی است کسی آن را نمی‌بیند، ولی همیشه آنجاست و منتظر است.\u003C\u002Fp>\n\u003Ch2>چه کسی به alt نیاز دارد؟\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>کاربران screen reader.\u003C\u002Fstrong> کسی که نمی‌تواند تصویر را ببیند، صفحه را با یک screen reader می‌شنود. این ابزار تصویر را نمی‌تواند بخواند، ولی متن \u003Ccode dir=\"ltr\">alt\u003C\u002Fcode> را با صدای بلند می‌گوید. اگر \u003Ccode dir=\"ltr\">alt\u003C\u002Fcode> نباشد، آن کاربر فقط می‌شنود «تصویر» یا حتی اسم فایل را — و هیچ نمی‌فهمد آنجا چه بوده.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>وقتی تصویر بارگذاری نمی‌شود.\u003C\u002Fstrong> اینترنت ضعیف، آدرس اشتباه، یا یک سرورِ خاموش؛ هر کدام می‌تواند تصویر را نیاورد. در آن حالت مرورگر به‌جای تصویر همان متن \u003Ccode dir=\"ltr\">alt\u003C\u002Fcode> را نشان می‌دهد، و صفحه به‌جای یک مربع خالیِ شکسته، هنوز معنا دارد.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>موتورهای جستجو.\u003C\u002Fstrong> گوگل تصویر را «نمی‌بیند»؛ برای فهمیدن این‌که تصویر درباره‌ی چیست، به متن \u003Ccode dir=\"ltr\">alt\u003C\u002Fcode> تکیه می‌کند. یک \u003Ccode dir=\"ltr\">alt\u003C\u002Fcode> خوب یعنی شانس بیشتر برای دیده‌شدن در جستجوی تصویر.\u003C\u002Fp>\n\u003Ch2>alt خوب چه شکلی است؟\u003C\u002Fh2>\n\u003Cp>قانون طلایی: \u003Cstrong>هدف تصویر را توصیف کن، نه جزئیات ظاهرش را.\u003C\u002Fstrong> بپرس «اگر این تصویر نبود، چه جمله‌ای جایش می‌گذاشتم تا خواننده همان را بفهمد؟» همان جمله، \u003Ccode dir=\"ltr\">alt\u003C\u002Fcode> توست.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>ضعیف: \u003Ccode dir=\"ltr\">alt=\"تصویر\"\u003C\u002Fcode> یا \u003Ccode dir=\"ltr\">alt=\"عکس ۱\"\u003C\u002Fcode> — هیچ اطلاعاتی نمی‌دهد.\u003C\u002Fli>\n\u003Cli>بیش‌ازحد: توصیفِ رنگ هر گوشه‌ی تصویر. کسی نمی‌خواهد یک پاراگراف بشنود.\u003C\u002Fli>\n\u003Cli>خوب: کوتاه و دقیق، همان چیزی که تصویر می‌خواهد برساند — مثلاً «مدار یک LED که به مقاومت وصل شده».\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>یک نکته: داخل \u003Ccode dir=\"ltr\">alt\u003C\u002Fcode> ننویس «تصویری از…»؛ خواننده و screen reader هر دو می‌دانند که این یک تصویر است. مستقیم برو سراغ چیزی که نشان می‌دهد.\u003C\u002Fp>\n\u003Ch2>کِی alt را خالی می‌گذاریم؟\u003C\u002Fh2>\n\u003Cp>گاهی یک تصویر فقط تزئینی است و هیچ معنایی به صفحه اضافه نمی‌کند — مثل یک خطِ جداکننده یا یک نقشِ پس‌زمینه. در این حالت \u003Ccode dir=\"ltr\">alt=\"\"\u003C\u002Fcode> می‌گذاری، یعنی یک \u003Ccode dir=\"ltr\">alt\u003C\u002Fcode> خالیِ عمدی. این به screen reader می‌گوید «این تصویر را رد کن، چیزی برای گفتن ندارد». دقت کن: \u003Ccode dir=\"ltr\">alt=\"\"\u003C\u002Fcode> با \u003Cstrong>نبودِ\u003C\u002Fstrong> \u003Ccode dir=\"ltr\">alt\u003C\u002Fcode> فرق دارد؛ اولی یعنی «عمداً خالی»، دومی یعنی «یادم رفت» — و screen reader این دو را متفاوت برخورد می‌کند.\u003C\u002Fp>\n\u003Ch2>در یک جمله\u003C\u002Fh2>\n\u003Cp>هر تصویری که معنا دارد به یک \u003Ccode dir=\"ltr\">alt\u003C\u002Fcode> کوتاه و هدف‌محور نیاز دارد؛ هر تصویری که فقط تزئین است به یک \u003Ccode dir=\"ltr\">alt=\"\"\u003C\u002Fcode> خالی. این یک عادت کوچک است که صفحه‌ات را برای همه — از جمله کسانی که تصویر را نمی‌بینند — قابل‌استفاده می‌کند. در خودآموز \u003Ca href=\"\u002Fcourses\u002Ftaropood\">تاروپود\u003C\u002Fa> نوشتن \u003Ccode dir=\"ltr\">alt\u003C\u002Fcode> درست از همان اولین تصویری که در صفحه می‌گذاری بخشی از کار است، نه یک کارِ اضافه در آخر. (این‌که چرا انتخابِ درستِ tag هم به همین شکل به همه کمک می‌کند، موضوع نوشته‌ی \u003Ca href=\"\u002Fblog\u002Fsemantic-html\">چرا فقط <div> کافی نیست؟\u003C\u002Fa> است.)\u003C\u002Fp>","2026-07-21T05:30:00Z","alt متنِ کوتاهی است که می‌گوید یک تصویر چیست. برای کاربران screen reader و وقتی تصویر بارگذاری نمی‌شود حیاتی است؛ اینجا می‌بینی alt خوب چطور نوشته می‌شود.","متن alt تصویر چیست و چرا مهم است؟ | یادستان","why-alt-text",160,"چرا هر تصویر به alt نیاز دارد؟",1784827101874]