شروع کار مقدماتی با HTML5 Canvas (جلسه آخر) : Accessibility و سخن آخر



visibility  
mode_comment   ۰

html-canvas

همونطور که اطلاع دارید در جلسه قبل در مورد ذخیره کردن Canvas بصورت تصویر، توضیحاتی رو براتون قرار دادم و شما رو با روشهای مختلفی که وجود داره و متدوال هست، آشنا کردم. چیزهای زیادی در مورد Canvas باقی مونده ولی ما سعی کردیم هر چیزی که برای شروع کار مقدماتی با canvas نیاز دارید رو بهتون آموزش بدیم. در این جلسه مقداری در مورد Accessibility توضیح میدیم و بعد از اون تعدادی سایت که میتونین از اونا ایده و کمک بگیرید رو بهتون معرفی کنیم.

المنت Canvas به خودی خود یک bitmap هست و اطلاعاتی در مورد اشکالی که درون خودش رسم کرده رو برای ما فراهم نمیکنه. المنت Canvas هیچ اطلاعاتی رو برای ابزارهای Accessibility مانند Screen reader ها فراهم نمیکنه و ارتباط خوبی رو با اونا نداره. در کل، سایتهایی که Accessibility براشون خیلی مهم هست، باید استفاده از canvas رو به حداقل برسونن یا اصلا از اون استفاده نکنند. با استفاده از روشهایی که در زیر در اختیارتون قرار میدیم، میتونین تا حدی canvas برای ابزارهای مربوط به Accessibility یا A11Y آماده کنید.

محتوای Fallback

محتوایی که درون تگ canvas قرار داده میشه، زمانی نمایش داده میشه که مرورگر مورد نظر از canvas پشتیبانی نکنه و نتونه اون رو رندر کنه. این محتوا در سوی دیگر میتونه برای Screen reader هایی که المنتهای Dom رو مشاهده میکنن و میخونن، مورد استفاده قرار بگیره. یک مثال در این رابطه در این لینک قرار داده شده که این مورد رو بصورت عملی اجرا کرده. برای اینکار کد زیر رو به وجود آورده:

همونطور که میبینید اشکال با استفاده از Javascript به وجود اومدن و ما در سوی دیگه درون تگ canvas توضیحات مربوط به اشکال رو بصورت HTML قرار دادیم که Screen reader ها بتونن اون رو بخونن و دسترسی داشته باشن. برای اینکه ببینید Screen reader ها این Canvas رو به چه شکل میخونن، میتونین این ویدیو که بر روی سایت Youtube قرار داده شده رو ببینید.

استفاده از قواعد ARIA:

Accessible Rich Internet Applications یا ARIA روشهایی هستن که محتوا و اپلیکیشنهای وب رو برای افرادی که ناتوانی های مختلفی دارند، آماده میکنه و اونا رو در دسترس قرار میده. شما میتونین از ویژگی های ARIA برای توضیح رفتار و هدف المنت Canvas استفاده کنید و کاری کنید که افراد ناتوان بهتر بتونن با این المنت سرو کار داشته باشند. این لینک رو برای مطالعه بیشتر میتونین ببینید. برای مثال ویژگی های ARIA زیر رو برای المنت canvas قرار میدیم:

به همین راحتی. میبینید که با استفاده از role، نقش اون رو دکمه قرار دادیم و برای اون نام start game رو مشخص کردیم. بهمین راحتی.

برای دیدن مثالهای بیشتر میتونین لینکهای زیر رو ببینید. با دیدن این مثالها و کدهاشون، میتونین بهتر با canvas آشنا بشید:

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

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

comment دیدگاه کاربران
ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.