طراحی سایت ساناتک
سه شنبه 16 آبان 1396
0
مزایای خصوصیت alt تصاویر

دسترسی به وب

حصول اطمینان از داشتن مقدار خصوصیت alt مناسب برای تمامی تصاویر موجود در سایت یک تمرین خوب در زمینه کلیِ دسترس پذیری وب محسوب می شود؛ بخشی از طراحی و برنامه نویسی وب که متخصصین خودش را دارد(دلیل هم این است که گاهی این بخش بسیار سخت خواهد بود) اما شما تنها با دنبال کردن مطالب کتاب پیش رو به درک قابل قبولی از این قسمت خواهید رسید.

یک سایت کاملا دسترس پذیر سایتی است که همه به آن دسترسی داشته باشند، حتی کسانی که از امکانات کمی برخوردارند.

به چند نمونه زیر توجه کنید:

1. افرادی که بینایی ضعیف دارند (آیا فونت استفاده شده شما کوچک است؟ این افراد می توانند از سایت شما استفاده کنند؟).

2. افراد نابینا (خصوصیت alt تعریف شده شما معنای المان های تصویری را به کاربر منتقل می کند یا خیر؟).

3. کاربران ناشنوا (اگر از هرگونه صدایی در سایت خود استفاده کرده اید، به عنوان مثال یک مصاحبه، آیا از متن کتبی نیز استفاده کرده اید؟).

4. کاربر سایت با موس می تواند به تنهایی به تمامی بخش های سایت دسترسی داشته باشد؟ کاربری که تنها با صفحه کلید کار می کند چطور؟

5. افرادی که در خواندن مطالب مشکل دارند (آیا مطالب نوشته شده در سایت ساده و گیرا هستند؟ آیا از کلمات سخت و پیچیده زیاد استفاده شده است؟ افرادی را که انگلیسی زبان دوم آن هاست را در نظر گرفته اید؟).

قطعا این زمینه فرای مطالب و هدف این کتاب است. سوالات بالا تنها برای این مطرح شد که شما را وادار به تفکر در این باره نماید، اما یکی از مهمترین اقدامات کارساز در این زمینه انتخاب مقدار مشخصه alt مناسب است و در راستای دسترس پذیری سایت به شما کمک خواهد کرد.

اگر علاقه مند به کسب اطلاعات بیشتر در این زمینه هستید می توانید به یک منبع رایگان و قابل اطمینان که به شما معرفی می کنیم اعتماد کنید.

شنیدن محتوای وب

در گذشته کاربران نابینا برای دسترسی به محتوای وب مجبور بودند به پرینت بازنویسی شده با زبان بریل اعتماد کنند یا آن که از یک دوست بخواهند که مطالب را با صدای بلند برای آن ها بخواند. با استفاده از رسانه های الکترونیکی مانند صفحات وب کاربران نابینا جایگزین بهتری دارند: جایگزینی به نام screen reader، نرم افزاری که جایگزینی صدا محور از محتوای درون سایت به کاربر می دهد. این برنامه می تواند مطالب را با صدای بلند برای کاربر بخواند. بعضی از screen reader ها تنها برای دسترسی به اینترنت مورد استفاده قرار می گیرند در حالی که نمونه های دیگری از این برنامه هست که برای دسترسی به تمامی سیستم عامل، برنامه های office و ابزارهای مربوط به میل مورد استفاده قرار می گیرند.

برای این افراد بسیار مهم است که شما مقادیر مناسبی را درون خصوصیت alt جای دهید؛ برنامه screen reader محتوایات درون سایت از جمله مقادیر alt ِ تصاویر را با صدای بلند برای کاربر می خواند، همانطور که در عکس 5.2 می بینید جای خالی این مقدار و توضیحات ناقص از جمله عبارت"IMAGE" کمک ساز نخواهند بود.

alt بدون مقدار

عکس 5.2: خصوصیت alt-ای که در رابطه با تصویر هیچ توضیحی ارائه نمی دهد.

اگر دوست دارید نحوه کار کردن screen reader ها را بدانید و اینکه بفهمیند دقیقا در برخورد با تصاویر سایت چگونه واکنش نشان می دهند می توانید برنامهebAIM screen reader simulation را امتحان کنید. اگر می خواهید از یک screen reader بر روی سایت خود استفاده کنید می توانید نسخه ای آزمایشی از JAWS برای ویندوز را دانلود و نصب کنید.

یک alt خوب چگونه است؟

مطالب زیادی در رابطه با alt می توان اضافه کرد از آنجایی که بحث بسیار شخصی است و هر کس درکی مختص به خود برای آن در ذهن دارد. تفسیر درست از یک تصویر از دید یک فرد ممکن است با تفسیر دیگری در تضاد و ناهمانگی باشد. خوشبختانه قوانین ساده ای در این زمینه وجود دارد که می توانید از آن ها پیروی کنید:

1. اگر تصویر اطلاعات مفیدی را در بر داشت سعی کنید به طور مختصر و گویا توضیح خود را ارائه دهید. برای مثال به عکس 5.3 و کدِ آورده شده آن توجه کنید:

یک alt خوب

عکس 5.3: تفسیر آنچه از یک تصویر لازم است

<img src="sydney.jpg" width="500" height="354"

alt="Sydney Opera House, night-time shot with the

Harbour Bridge in the background"/>

 

1. اگر تصویر موجود در سایت کاملا برای زیباسازی استفاده شده باشد از خصوصیت alt خالی استفاده کنید. (""=alt) در این صورت برنامه screen reader می فهمد که تصویر فاقد اطلاعات مفید است و نیازی به خواندن آن ندارد. توجه داشته باشید که این کار با نادیده گرفتن خصوصیت alt به شدت تفاوت دارد!

2. اگر تصویر به عنوان یک لینک استفاده شده باشد تصویر را توصیف نکنید بلکه عملکرد حقیقی آن را توضیح دهید. به عکس 5.4 و آنچه در توضیح آن آمده توجه کنید:

استفاده از تصویر به عنوان لینک

عکس 5.4: استفاده از تصویر به عنوان یک لینک

<a href="win-holiday.html"><img src="win-a-trip.jpg"

width="500" height="354" alt="Win a trip to

Sydney!"/></a>

مقدار تعریف شده برای alt: برنده سفر به سیدنی باشید!

دسترس پذیری وب مبحث وسیعی است، در ادامه مطالب ممکن است درک بهتری از این بخش به دست آورید، اما برای شروع یادتان باشد که مقدار خصوصیت alt را به بهترین شکل ممکن انتخاب کنید.

 
تعداد بازدید: 18
مطالب دیگر آموزش طراحی سایت
تغییرات فرمت عکس به وسیله CSSآرشیو تصاویر در سایتافزودن گالری تصاویر به سایتفرمت های مختلف تصاویرفصل پنجم استفاده از تصاویر در طراحی سایت
 
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید