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

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

در این مقاله، ما یک مودال می سازیم و دستورالعمل ها را برای دسترسی به آن دنبال می کنیم.

پیش نیازها

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

دانش پایه HTML: درک نحوه عملکرد عناصر و ویژگی های HTML.

دانش پایه جاوا اسکریپت: آشنایی با مفاهیم پایه جاوا اسکریپت مانند توابع، مدیریت رویداد و دستکاری DOM مفید است.

درک ARIA: در حالی که این آموزش نقش ها و ویژگی های ARIA را توضیح می دهد، داشتن درک اولیه از مفاهیم دسترسی می تواند مفید باشد.

چه زمانی باید از مدال استفاده کرد؟

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

هنگامی که کاربر نیاز به تصمیم گیری حیاتی دارد، مانند تأیید یک اقدام بالقوه مخرب (مثلاً حذف یک مورد) یا موافقت با شرایط و ضوابط، باید از مدال استفاده کنید.

زمانی می‌توانید از مدال استفاده کنید که یک کار به تمرکز کامل کاربر نیاز دارد و به اطلاعات بقیه صفحه متکی نیست (مثلاً پر کردن فرم یا تکمیل فرآیند پرداخت).

می‌توانید از یک مدال برای نمایش اطلاعات موقت یا گذرا استفاده کنید که نیازی به نمایش دائمی در صفحه ندارند (مثلاً هشدارها، اعلان‌ها یا پیام‌های کوتاه).

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

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

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

دستورالعمل‌های دسترسی معین

در اینجا چند نکته وجود دارد که به شما در ساخت مدال های مفید و در دسترس کمک می کند:

یک ویژگی توصیفی aria-labelledby ارائه کنید که به عنوان یا عنوان مدال اشاره دارد. اگر عنوانی وجود ندارد، از aria-label برای ارائه یک برچسب کوتاه و توصیفی استفاده کنید.

همیشه یک دکمه بسته قابل مشاهده و قابل دسترسی را در مودال، معمولاً در گوشه سمت راست بالا قرار دهید. این دکمه را به وضوح برچسب بزنید، برای مثال، با متن "Close" یا یک نماد با aria-label="Close" .

هنگامی که مدال باز می شود، فوکوس صفحه کلید را به اولین عنصر تعاملی در مودال (معمولاً یک دکمه بستن) منتقل کنید. وقتی مدال بسته شد، فوکوس را به عنصری برگردانید که مودال را فعال کرده است.

هنگامی که صفحه کلید باز است، فوکوس را در حالت مودال نگه دارید.

به کاربران اجازه دهید با فشار دادن کلید Escape ، مدال را ببندند.

با پیروی از این دستورالعمل ها، بیایید یک مودال بسازیم.

من ترجیح می دهم از تگ های HTML مناسب برای ساخت اجزا استفاده کنم، و در این مورد دقیقاً با استفاده از تگ dialog این کار را انجام خواهم داد.

نحوه ساخت مدال با استفاده از تگ dialog

در صورتی که با تگ dialog آشنا نیستید، در HTML5 معرفی شده است. شما از آن برای ایجاد کادرهای محاوره ای مانند پنجره های بازشو، هشدارها و مدال ها استفاده می کنید. این روش ها و ویژگی های داخلی را ارائه می دهد که مدیریت رفتار گفتگو را بدون نیاز به جاوا اسکریپت گسترده آسان تر می کند. متدهای داخلی جاوا اسکریپت عبارتند از show() ، showModal() و close() .

show() و showModal()

متد show() برای یک دیالوگ غیر انسداد مفید است. این بدان معنی است که گفتگو در بالای محتوای فعلی ظاهر می شود، اما کاربران همچنان می توانند با سایر بخش های صفحه وب (کلیک کردن دکمه ها، پیوندها و غیره) در حالی که گفتگو باز است تعامل داشته باشند.

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

 <!-- Previous content here --> < dialog id = "dialog-box" > <!-- More content here --> </ dialog > < script > const dialog = document .getElementById( 'dialog-box' ); dialog.show(); </ script >

نتیجه:

متد showModal() گفتگو را در حالت مودال باز می کند. این بدان معنی است که گفتگو تمرکز می کند و تعامل با بقیه صفحه وب تا زمانی که گفتگو بسته نشود مسدود می شود. کاربر نمی تواند روی هیچ قسمت دیگری از صفحه کلیک کند یا با آن تعامل داشته باشد.

بسته به مرورگر، یک پس‌زمینه نیمه شفاف در پشت دیالوگ ظاهر می‌شود که به صورت بصری نشان می‌دهد که بقیه صفحه قابل تعامل نیست.

هنگامی که یک دیالوگ با showModal() باز می شود، فوکوس به طور خودکار در محاوره به دام می افتد. کاربر فقط می‌تواند از طریق عناصر داخل دیالوگ استفاده کند و تا زمانی که بسته نشود، فوکوس در محتوای گفتگو حلقه می‌شود. در اینجا یک مثال است:

 < dialog id = "dialog-box" > <!-- More content here --> </ dialog > < script > const dialog = document .getElementById( 'dialog-box' ); dialog.showModal(); </ script >

نتیجه:

عنصر <dialog> دارای سبک های پیش فرض است اما می تواند با استفاده از CSS برای مطابقت با طراحی شما سفارشی شود. می‌توانید کادر محاوره‌ای را استایل دهید، انیمیشن اضافه کنید یا پس‌زمینه را تغییر دهید. پس زمینه را می توان با استفاده از انتخابگر ::backdrop استایل کرد. به عنوان مثال:

 dialog ::backdrop { background : rgba ( 0 , 0 , 0 , 0.7 ); }

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

می‌توانید ویژگی autofocus را به اولین عنصر تعاملی در حالت اضافه کنید، مانند اولین ورودی در یک فرم یا دکمه بستن. از طرف دیگر، می‌توانید به مدیریت تمرکز اصلی عنصر <dialog> تکیه کنید.

از استفاده از tabindex در عنصر <dialog> خودداری کنید، زیرا یک عنصر تعاملی مانند یک دکمه یا پیوند نیست. <dialog> به عنوان محفظه ای برای محتوای تعاملی عمل می کند و برای دریافت تمرکز مستقیم کاربر در نظر گرفته نشده است.

عنصر <dialog> یک راه بومی برای ایجاد مدال فراهم می کند. اگر یک مدال سفارشی می‌سازید، مطمئن شوید که آپشن های دسترسی آن با عنصر بومی <dialog> مطابقت دارد.

جمع کردن همه اینها:

 < style > dialog ::backdrop { background : rgba ( 0 , 0 , 0 , 0.7 ); } </ style > < body > < button id = "open-dialog" > Open Dialog </ button > < dialog id = "dialog-box" > < h2 > Modal title </ h2 > < div > <!-- More content here --> < button id = "close-dialog" autofocus > Close </ button > </ div > </ dialog > < script > const dialog = document .getElementById( "dialog-box" ); const openButton = document .getElementById( "open-dialog" ); const closeButton = document .getElementById( "close-dialog" ); openButton.addEventListener( "click" , () => { dialog.showModal(); }); closeButton.addEventListener( "click" , () => { dialog.close(); }); </ script > </ body >

متوجه خواهید شد که من از مشخصه aria-label در گفتگو همانطور که در دستورالعمل ها فهرست کردم استفاده نکردم. خوب، به این دلیل است که عنصر دیالوگ، اگر ساختار خوبی داشته باشد، لزوماً به آن نیاز ندارد. در این مورد، یک برچسب قابل مشاهده در عنصر گفتگو (عنصر h2 ) وجود دارد.

اگر هیچ برچسب قابل مشاهده ای وجود ندارد، باید یکی را اضافه کنید. مانند این مثال:

 < dialog id = "confimation-dialog" aria-label = "Confirmation Dialog" > < p > Are you sure you want to proceed? </ p > < button id = "close-dialog" autofocus > Close </ button > </ dialog >

صفت inert چیست؟

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

ویژگی inert باعث می شود یک عنصر و همه فرزندان آن غیر تعاملی و غیر قابل دسترس برای فناوری های کمکی باشند. هنگامی که یک مدال باز است، استفاده از ویژگی inert در بقیه محتوای صفحه تضمین می کند که فقط به محتوای مودال می توان دسترسی داشت و تجربه گفتگو را واضح تر می کند.

نحوه استفاده از ویژگی inert

هنگامی که یک مدال باز می شود، می توانید ویژگی inert را به بقیه محتوای صفحه اعمال کنید (معمولاً عنصر <main> ). وقتی modal بسته شد، ویژگی inert را حذف می کنید.

در اینجا مثالی وجود دارد که نحوه استفاده از inert با یک گفتگوی مدال را نشان می دهد:

 < body > < header > Site Header </ header > < main id = "main-content" > < button id = "open-dialog" > Open modal </ button > < p > This is the main content of the page. </ p > <!-- More content here --> </ main > <!-- Move the dialog outside the main element --> < dialog id = "dialog" > < h2 > Modal Title </ h2 > < p > This is the content inside the modal. </ p > < button id = "close-dialog" autofocus > Close </ button > </ dialog > < script > const dialog = document .getElementById( 'dialog' ); const mainContent = document .getElementById( 'main-content' ); const openButton = document .getElementById( 'open-dialog' ); const closeButton = document .getElementById( 'close-dialog' ); openButton.addEventListener( "click" , () => { mainContent.setAttribute( 'inert' , '' ); dialog.showModal(); }); closeButton.addEventListener( "click" , () => { dialog.close(); }); // the dialog elemnt has a close event, which is called when a user calls the close() method or presses the esc key dialog.addEventListener( "close" , ( event ) => { mainContent.removeAttribute( "inert" ); }); </ script > </ body >

چگونه حالت های باز و بسته را متحرک کنیم

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

چرا حالت های باز و بسته را متحرک کنیم؟

متحرک سازی حالت های باز و بسته یک قوطی مودال:

افزایش تجربه کاربر : یک انیمیشن روان می تواند انتقال را کمتر ناگهانی و جذاب تر کند.

جلب توجه : انیمیشن‌های ظریف می‌توانند به تمرکز کاربر روی محتوای مودال در هنگام نمایش کمک کنند.

حفظ ثبات : انیمیشن‌های ثابت در سراسر رابط کاربری شما می‌توانند حسی منسجم و حرفه‌ای ایجاد کنند.

به طور پیش‌فرض، دیالوگ روی display:none در حالت بسته و display:block هنگام باز تنظیم شده است. شما نمی توانید از none به block در CSS انتقال دهید، اما می توانید ویژگی های نمایش را با transform یا opacity ترکیب کنید. از ویژگی transform می توان برای مقیاس یا جابجایی مدال استفاده کرد، در حالی که opacity شفافیت آن را کنترل می کند.

در اینجا مثالی از نحوه متحرک سازی یک مدال آورده شده است:

 dialog { animation : zoom-out 0.5s ease-out; } /* an open attribute is added to the dialog when it is open */ dialog [open] { animation : zoom-in 0.5s ease-out; } /* The display property in the keyframes is critical because it toggles the modal's visibility on and off. */ @keyframes zoom-in { 0% { opacity : 0 ; transform : scale ( 0.1 ); display : none; } 100% { opacity : 1 ; transform : scale ( 1 ); display : block; } } @keyframes zoom-out { 0% { opacity : 1 ; transform : scale ( 1 ); display : block; } 100% { opacity : 0 ; transform : scale ( 0 ); display : none; } }

نتیجه نهایی:

نتیجه گیری

عنصر <dialog> راه اصلی برای ایجاد مدال است. این ویژگی های داخلی را برای کاربران صفحه کلید و صفحه خوان فراهم می کند

عنصر <dialog> بر دو نوع modal و nonmodal است. می توانید با استفاده از متد show() یک دیالوگ غیر مودال ایجاد کنید و متد showModal() یک گفتگوی مودال ایجاد می کند.

هنگامی که از عنصر گفتگوی بومی استفاده نمی کنید، مطمئن شوید که حالت سفارشی شما از نظر دسترسی با گفتگوی بومی مطابقت دارد تا تجربه یکسانی برای همه کاربران تضمین شود.

همچنین باید همیشه به یاد داشته باشید که فوری ترین عنصر تعاملی را فوکوس خودکار کنید، گفتگو به طور پیش فرض می تواند این کار را انجام دهد.

در نهایت، می‌توانید از ویژگی inert روی عناصر دیگر استفاده کنید تا از دسترسی به آن عناصر در زمانی که مدال باز است جلوگیری کنید.

منابع:

نقش دیالوگ W3c

MDN: عنصر گفتگو

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

می توانید در لینکدین با من ارتباط برقرار کنید.

خبرکاو