پرایمر متن جایگزین
در پست ماه گذشته خود در مورد Screen Readers و HTML Accessibility، من به برخی از جنبه های اساسی نحوه پیمایش صفحه خوان صفحه و باعث می شود که تجربه مرور وب برای کاربران دارای ناتوانی های بینایی قابل درک تر و قابل اجراتر باشد، پرداختم. من همچنین اشاره کردم که بسیاری از تازه واردان به برنامه نویسی ابتدا در مورد صفحه خوان ها و قابلیت دسترسی در زمینه تصاویر می شنوند – به ویژه، alt برچسب استفاده شده در <img> عناصر HTML همانطور که قول داده بودم، امروز برمی گردم تا آن موضوع را با جزئیات بیشتری بررسی کنم.
Alt-Text چیست؟
متن جایگزین، که اغلب به «متن جایگزین» کوتاه می‌شود، دقیقاً همان چیزی است که به نظر می‌رسد – جایگزین متنی برای یک عنصر غیر متنی، مانند تصویر یا گرافیک. اسناد وب MDN موزیلا توصیف می کند که HTML alt ویژگی محفظه ای برای متنی است که یک تصویر را توصیف می کند. یک صفحه‌خوان متن را در این مورد می‌گیرد alt آن را به جای تصویر تگ کنید و بخوانید.
فراتر از دسترسی به صفحه‌خوان، مزایای دیگری نیز وجود دارد alt تگ نیز؛ این چیزی است که به جای تصویری که نمی تواند بارگذاری شود (شاید به دلیل اتصال بد اینترنت یا لینک شکسته) رندر می شود و همچنین باعث دیده شدن یک وب سایت در موتورهای جستجو می شود (بهینه سازی موتور جستجو، با نام مستعار SEO).
اسناد MDN بیان می کند که یک alt برچسب “اجباری نیست اما هست فوق العاده مفید برای دسترسی.» این است از نظر فنی درست در آن حذف کردن alt تگ باعث نمی شود صفحه ای مانند یک کامای نابجا یا برچسب بسته شدن فراموش شده خراب شود. اما در عمل، اگر اصلاً یک نکته مهم از این پست وجود داشته باشد، آن است تگ های alt باید همیشه در تصاویر ما گنجانده شود.
اگر متن جایگزین را وارد نکنم چه اتفاقی می‌افتد؟
اضافه كردن alt برچسب‌ها به تصاویر اغلب به عنوان میوه‌ای کم‌چسب برای دسترسی بیشتر به وب‌سایت در نظر گرفته می‌شوند، اما تصاویر غیرقابل دسترس همچنان یکی از رایج‌ترین مسائل هستند. با درج نکردن متن جایگزین، این خطر را داریم که کاربران صفحه‌خوان خود را از اطلاعات مهم و زمینه اضافه‌ای که تصاویر در اختیار کاربران بینا قرار می‌دهند، محروم کنیم.
چند کار متفاوت وجود دارد که یک صفحه‌خوان ممکن است هنگام مواجهه با یک تصویر بدون تصویر انجام دهد alt برچسب:
- تصویر را بخوانید
srcبرچسب (معمولاً URL تصویر یا نام فایل) به جای تصویر. اگر نام فایل توصیفی از محتویات باشد، این می تواند بهتر از هیچ باشد. با این حال، اغلب، این چیزی شبیه به “IMG_1598.jpg” یا یک پیوند طولانی تصاویر گوگل است که مانند ترکیبی از کاراکترهای تصادفی خوانده می شود. - “تصویر” یا “گرافیک” را اعلام کنید و آن را رها کنید. آنچه در تصویر موجود است برای کاربر یک رمز و راز باقی خواهد ماند – آیا این یک گرافیک برای درک آنها از مواد اطراف مهم بود یا یک قطعه از کلیپ آرت تزئینی؟
می‌توانید نمونه‌ای از نحوه تفسیر صفحه‌خوان‌ها با تصویر در مقابل بدون علامت را ببینید و بشنوید alt در مثال کوتاه زیر، که دو فناوری صفحه‌خوان استاندارد (VoiceOver برای Mac و ChromeVox) را نمایش می‌دهد، برچسب بزنید:
https://www.youtube.com/watch?v=NvqasTVoW98
برای کسانی که می‌خواهند دیدگاه عملی دیگری در مورد اینکه متن جایگزین چگونه اشتباه می‌شود، می‌خواهند، ویدیوی مهندس دسترس‌پذیری استفانی نیومن از آموزش دسترسی به وب را که نمونه‌هایی از متن جایگزین ضعیف اجرا شده در یک وب‌سایت تجارت الکترونیک محبوب را نشان می‌دهد که ممکن است قبلاً نامش را شنیده باشید، ببینید:
https://www.youtube.com/watch?v=Dh9zDy_Yfkw
چه چیزی را باید در Alt-Text خود وارد کنم؟
هملت شکسپیر ممکن است گفته باشد که “بودن یا نبودن؟” است را سوال، اما این قبل از ظهور اینترنت بود و توسعه دهندگان وب، طراحان، و سازندگان محتوا با این سوال نهایی مواجه شدند: چه چیزی در آن وجود دارد. alt ویژگی مورد بحث ما؟ پاسخ این است که، بستگی دارد.” با این حال، چند نکته مهم وجود دارد که باید به خاطر بسپاریم که می تواند ما را راهنمایی کند.
alt برچسب های تصاویر تزئینی باید خالی باشد
واکنش درونی ما به شنیدن آن که باید شامل شود alt برچسب‌ها روی همه تصاویر ما ممکن است به این صورت باشد که می‌گویند، “خوب، من می‌خواهم متن جایگزین را در هر تصویر در وب‌سایت خود اضافه کنم.” با این حال، بین گنجاندن یک تفاوت وجود دارد alt روی هر تصویر تگ کنید و در داخل هر تگ یک توضیح متنی درج کنید.
همانطور که مشخص است، هر تصویری نیاز به توضیح ندارد. اگر این یک تصویر صرفاً تزئینی است – یعنی شامل هیچ محتوای معنی‌داری نمی‌شود، فقط برای چیدمان استفاده می‌شود، و حذف تصویر هیچ تاثیری بر درک متن اطراف برای کاربران بینا ندارد – تنها چیزی که نیاز داریم. برای گنجاندن در alt تگ یک رشته خالی است (شما ممکن است بشنوید که به عنوان null نامیده می شود alt صفت). این به صفحه خوان می گوید که می تواند تصویر را نادیده بگیرد.
(توسط KEN111 از طریق پروژه اسم، CC-BY 3.0)
<!-- Don't Do This: -->
<img src="pretty_flower_border.jpg" alt="Floral Border">
<!-- Do This: -->
<img src="pretty_flower_border.jpg" alt="">
افزودن توضیحات متنی در جایی که نیازی به آن نیست، نویز (به معنای واقعی کلمه) را به بازخوانی صفحه نمایش‌خوان از صفحه اضافه می‌کند. نداشتن هیچ alt همانطور که صفحه خوان فرض می کند تگ همان مشکل را ایجاد می کند alt برچسب باید آنجا باشد و سعی می کند جایگزینی پیدا کند. یک خالی alt تگ از هر دوی این تله ها جلوگیری می کند.
alt برچسب ها نباید شامل “تصویر” یا “گرافیک از” باشند
فکر دیگری که ممکن است داشته باشیم، چون افرادی با نیت خوب هستیم، ممکن است این باشد، “هی، من باید “تصویر” را به عنوان بخشی از متن جایگزین خود وارد کنم تا کاربر بداند آنچه خوانده می شود توصیف یک تصویر است. ” به خاطر متفکر بودن، اما انجام این کار غیر ضروری، تکراری و زائد است. صفحه خوان ها معمولاً قبل از خواندن «گرافیک» یا «تصویر» را اعلام می کنند alt متن
(توسط Mauser از طریق Wikimedia Commons، CC-BY-SA 3.0)
<!-- Don't Do This: -->
<img src="untitled_goose_puppy.jpg" alt="Image of a Golden Retriever puppy carrying a plush goose toy.">
<!-- Do This: -->
<img src="untitled_goose_puppy.jpg" alt="Golden Retriever puppy carrying a plush goose toy.">
alt برچسب ها باید مختصر باشند و در عین حال نشان دهنده محتوا و عملکرد تصویر باشند
حتی اگر ممکن است احساس کنیم که مجبور به توصیف هر جزئی از تصویر هستیم، یا کمی پیتزا یا اطلاعات اضافی را به متن جایگزین خود اضافه کنیم، نباید تسلیم این وسوسه شویم. هدف ما از متن جایگزین این است که به طور خلاصه (در چند کلمه یا یک جمله، بدون پاراگراف در اینجا) اطلاعاتی را که یک کاربر بینا با نگاه کردن به تصویر به دست می آورد، خلاصه کنیم. اگر هنوز هم می‌خواهیم چیز دیگری اضافه کنیم، همیشه می‌توانیم این کار را در متن یا زیرنویس انجام دهیم تا بقیه بتوانند از شوخ طبعی یا بینش ما لذت ببرند.
از سوی دیگر، ما باید مراقب باشیم که اطلاعات کافی را درج کنیم که کاربر صفحه‌خوان همان مفهوم و ارزشی را که یک کاربر بینا از تصویر دریافت می‌کند، دریافت کند. ما نباید فقط ظاهر تصویر را توصیف کنیم، بلکه آنچه را که قصد داریم کاربر بر اساس تصویر درک کند را نیز توضیح می دهیم.
(توسط JK Nakata، سازمان زمین شناسی ایالات متحده از طریق Wikimedia Commons)
<!-- Don't Do This: Too Much/Irrelevant Information -->
<img src="Loma_Prieta_Damage.jpg"
alt="A wood-framed house with an avant-garde split roof and ornate and beautiful wood panel siding and five glass windows across, collapsed onto a blue car following the Loma Prieta earthquake.">
<!-- Also Don't Do This: Too Little Information -->
<img src="Loma_Prieta_Damage.jpg"
alt="A house collapsed onto a carport.">
<!-- Do This: -->
<img src="Loma_Prieta_Damage.jpg"
alt="A wooden house collapsed sideways onto a carport, demonstrating how a lack of shear walls contributed to the failure of the structure.">
منابع اضافی
اگر مانند من، با ناحیه خاکستری «جواب درستی وجود ندارد» خوب عمل نمی کنید و متوجه شده اید که متن جایگزین می تواند موضوعی بسیار ظریف و پیچیده باشد، نترسید! یک منبع فوق العاده برای شما وجود دارد که می توانید نشانک گذاری کنید: An alt درخت تصمیم ابتکار دسترس‌پذیری وب، مواردی را که باید تا حد امکان تحلیلی و ساده در این فلوچارت گنجانده شود، محدود کرده است. آن منبع به آموزش تصاویر عمیق آنها اشاره می کند، جایی که می توانید موضوعاتی را که در اینجا معرفی کردم با جزئیات بیشتر بررسی کنید و نمونه های بیشتری را ببینید. من به شدت توصیه می کنم این را نیز بررسی کنید!
