برنامه های تک صفحه خود را با خوانندگان صفحه کار کنید

برنامه های تک صفحه ای وقتی صحبت از ایجاد تغییرات نمای می شود ، چالش قابل توجهی برای دسترسی دارند. بدون تازه سازی صفحه ، خوانندگان صفحه این تغییرات مهم رابط کاربر را انتخاب نمی کنند و کاربران کم بینا را گیج و بی خبر می کنند.

یک راه حل ایجاد پیام بر اساس عنوان صفحه و استفاده از منطقه زنده ARIA است تا صریحاً از طریق یک پیام مفید اعلام کند که یک نمای جدید بارگذاری شده است. ابتدا تابعی ایجاد کنید که هنگام به روزرسانی viewContent فراخوانی شود. AngularJS یک رویداد $ viewContentLoaded برای این منظور فراهم می کند. در کد کنترلر ، به رویداد گوش دهید و یک عملکرد را فراخوانی کنید (در CoffeeScript):

app.controller 'PageController' ، ($ widget، $ location، $ http) -> $ widget. $ در '$ viewContentLoaded'، اطلاعیه_نمایش_ بارگذاری شده

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

یکی از راه های انجام این کار استفاده از ویژگی داده در جایی از نمای برای ذخیره عنوان نمایش است:

document.title = $ ('[[data-viewtitle]'). data 'viewtitle'

اکنون با استفاده از عنوان صفحه به روز شده پیامی ایجاد کرده و آن را اعلام کنید:

$ .announce (سند. عنوان + ، مشاهده بارگذاری شد)

$ .announce () یک تابع jQuery است که از یک منطقه زنده و غیر قابل مشاهده برای اعلام محتوا استفاده می کند. این روش در مقایسه با کاربردهای موقت مناطق زنده به ساده سازی کد و اشکال زدایی کمک می کند. با این حال ، چند بهترین روش برای یادآوری وجود دارد.

ابتدا ، در صفحه خود یک منطقه زنده برای اعلام خبر با استفاده از aria-live = "مودب | قاطعانه" ایجاد کنید. از هیچ یک از مناطق زنده دیگر ، از جمله نقش های منطقه زنده استفاده نکنید (به عنوان مثال role = "alert | timer | log"). به عنوان مثال منطقه زنده:

div aria-live = "مودبانه" id = "گوینده"> (متن اینجا اضافه خواهد شد یا به روز می شود اعلام خواهد شد) / div>

دوم ، اندکی پس از به روزرسانی محتوا ، محتوای منطقه زنده را پاک کنید. این باعث می شود کاربران در پیام های قدیمی دست و پنجه نرم نکنند.

سرانجام ، مانند هر روش دسترس پذیری ، با عاقلانه از $ .announce () استفاده کنید. این فقط باید برای برقراری ارتباط مهم به روزرسانی های رابط کاربر استفاده شود.

کلمات: پاتریک فاکس

پاتریک فاکس مدیر فناوری وب UI در Razorfish در آستین است. این مقاله در اصل در شماره 271 مجله نت منتشر شده است.

این را دوست داشتید؟ اینها رو بخون!

• راهنمای طراح برای دسترسی دیجیتالی
• بهترین فونت های اسکریپت رایگان
• انتخاب فونت گرافیتی رایگان