معناشناسی و صفحه خوان

راب دادسون

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

مقرون به صرفه و معناشناسی

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

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

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

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

از HTML معنایی استفاده کنید

ساده ترین راه برای انتقال معنایی مناسب استفاده از عناصر HTML غنی از لحاظ معنایی است.

با استفاده از CSS، امکان استایل دادن به عناصر <div> و <button> وجود دارد تا بصری یکسانی را منتقل کنند، اما این دو تجربه در هنگام استفاده از صفحه‌خوان بسیار متفاوت هستند. <div> فقط یک عنصر گروه بندی عمومی است، بنابراین یک صفحه خوان فقط محتوای متن <div> را اعلام می کند. <button> به عنوان یک "دکمه" اعلام می شود، سیگنالی بسیار قوی تر به کاربر مبنی بر اینکه چیزی است که می تواند با آن تعامل داشته باشد.

ساده ترین و اغلب بهترین راه حل برای این مشکل اجتناب از کنترل های تعاملی سفارشی به طور کامل است. به عنوان مثال، یک <div> که مانند یک دکمه عمل می کند را با یک <button> واقعی جایگزین کنید.

ویژگی های معنایی و درخت دسترسی

به طور کلی، هر عنصر HTML دارای برخی از ویژگی های معنایی زیر است:

• یک نقش یا نوع
• یک نام
• یک مقدار (اختیاری)
• حالت (اختیاری)

نقش یک عنصر، نوع آن را توصیف می کند، به عنوان مثال، "دکمه"، "ورودی" یا حتی فقط "گروه" برای چیزهایی مانند عناصر div و span .

نام یک عنصر، برچسب محاسبه شده آن است. صفحه خوان ها معمولاً نام یک عنصر را به دنبال نقش آن، به عنوان مثال "ثبت نام، دکمه" اعلام می کنند. الگوریتمی که فاکتورهای نام یک عنصر را در مواردی مانند وجود محتوای متنی در داخل عنصر تعیین می کند، اینکه آیا دارای ویژگی هایی مانند title یا placeholder است یا خیر، اینکه آیا عنصر با یک عنصر واقعی <label> مرتبط است یا نه، و اگر این عنصر دارای هر ویژگی ARIA مانند aria-label و aria-labelledby است.

برخی از عناصر ممکن است دارای یک مقدار باشند. به عنوان مثال، <input type="text"> ممکن است مقداری داشته باشد که هر چیزی را که کاربر در فیلد متن تایپ کرده است را منعکس می کند.

برخی از عناصر نیز ممکن است حالتی داشته باشند که وضعیت فعلی آنها را نشان می دهد. برای مثال، یک عنصر <select> بسته به باز یا بسته بودن آن، می‌تواند در حالت بازشده یا جمع‌شده باشد.

درخت دسترسی

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

با استفاده از DevTools کروم، می‌توانید ویژگی‌های معنایی یک عنصر را بررسی کنید و موقعیت آن را در درخت دسترسی پیدا کنید.

مراحل بعدی

هنگامی که کمی در مورد معناشناسی و نحوه کمک آنها به ناوبری صفحه خوان بدانید، نمی توانید به صفحاتی که می سازید نگاهی متفاوت بیندازید. در بخش بعدی، یک قدم به عقب برمی‌داریم و در نظر می‌گیریم که چگونه می‌توان کل طرح کلی یک صفحه را با استفاده از سرفصل‌ها و نشانه‌های مؤثر منتقل کرد.