آیا تا به حال از خود پرسیده‌اید که چگونه فناوری‌های کمکی، مانند صفحه‌خوان‌ها، می‌دانند چه چیزی را به کاربران اعلام کنند؟ پاسخ این است که این فناوری‌ها به توسعه‌دهندگان متکی هستند که صفحات خود را با 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"> ممکن است مقداری داشته باشد که منعکس کننده هر چیزی باشد که کاربر در فیلد متن تایپ کرده است.
برخی از عناصر ممکن است دارای یک state نیز باشند که وضعیت فعلی آنها را نشان می‌دهد. برای مثال، یک عنصر <select> بسته به اینکه باز یا بسته باشد، می‌تواند در حالت باز یا بسته باشد.
درخت دسترسی
برای هر گره در DOM، مرورگر تشخیص می‌دهد که آیا آن گره از نظر معنایی «جالب» است یا خیر و آن را به درخت دسترسی اضافه می‌کند. وقتی فناوری کمکی، مانند یک صفحه‌خوان، یک رابط کاربری جایگزین برای کاربر ارائه می‌دهد، اغلب این کار را با پیمایش این درخت دسترسی انجام می‌دهد.
با استفاده از Chrome DevTools، می‌توانید ویژگی‌های معنایی یک عنصر را بررسی کرده و موقعیت آن را در درخت دسترسی‌پذیری بررسی کنید.
مراحل بعدی
وقتی کمی در مورد معناشناسی و نحوه کمک آنها به پیمایش صفحه خوان بدانید، نمی‌توانید جلوی خودتان را بگیرید و به صفحاتی که می‌سازید نگاهی متفاوت بیندازید. در بخش بعدی، یک قدم به عقب برمی‌داریم و بررسی می‌کنیم که چگونه می‌توان کل طرح کلی یک صفحه را با استفاده از عناوین و نشانه‌های مؤثر منتقل کرد.