نقش معناشناسی در پیمایش صفحه
شما در مورد مقرون به صرفه‌ها، معناشناسی و نحوه استفاده فناوری‌های کمکی از درخت دسترسی برای ایجاد یک تجربه کاربری جایگزین برای کاربران خود یاد گرفته‌اید. می بینید که نوشتن HTML گویا و معنایی با تلاش بسیار کم، دسترسی زیادی به شما می دهد، زیرا بسیاری از عناصر استاندارد هم معنایی و هم رفتار پشتیبانی را در خود دارند.
در این درس ما برخی از معنایی کمتر واضح را که برای کاربران صفحه خوان بسیار مهم است، به خصوص در مورد ناوبری پوشش خواهیم داد. در یک صفحه ساده با تعداد زیادی کنترل اما محتوای کم، اسکن صفحه برای یافتن آنچه نیاز دارید آسان است. اما در یک صفحه پر محتوا، مانند مدخل ویکی‌پدیا یا جمع‌آوری اخبار، خواندن همه چیز از بالا به پایین عملی نیست. شما به راهی برای پیمایش موثر در محتوا نیاز دارید.
توسعه دهندگان اغلب این تصور غلط را دارند که استفاده از صفحه خوان ها خسته کننده و کند هستند، یا اینکه همه چیز روی صفحه باید قابل تمرکز باشد تا صفحه خوان بتواند آن را پیدا کند. اغلب اینطور نیست.
کاربران صفحه‌خوان اغلب به فهرستی از سرفصل‌ها برای مکان‌یابی اطلاعات تکیه می‌کنند. اکثر صفحه‌خوان‌ها راه‌های آسانی برای جداسازی و اسکن فهرست سرفصل‌های صفحه دارند، ویژگی مهمی به نام روتور . بیایید ببینیم چگونه می توانیم از سرفصل های HTML به طور موثر برای پشتیبانی از این ویژگی استفاده کنیم.
استفاده موثر از سرفصل ها
ابتدا، اجازه دهید یک نکته قبلی را تکرار کنیم: ترتیب DOM نه تنها برای ترتیب فوکوس بلکه برای ترتیب صفحه‌خوان اهمیت دارد . همانطور که با صفحه‌خوان‌هایی مانند VoiceOver، NVDA، JAWS و ChromeVox آزمایش می‌کنید، متوجه می‌شوید که فهرست سرفصل‌ها از ترتیب DOM به جای ترتیب بصری پیروی می‌کنند.
این به طور کلی برای صفحه خوان ها صادق است. از آنجایی که صفحه‌خوان‌ها با درخت دسترس‌پذیری تعامل دارند، و درخت دسترسی بر اساس درخت DOM است، بنابراین ترتیبی که یک صفحه‌خوان درک می‌کند مستقیماً بر اساس ترتیب DOM است. این بدان معناست که ساختار سرفصل مناسب بیش از همیشه مهم است.
در اکثر صفحات با ساختار خوب، سطوح عنوان برای نشان دادن روابط والدین و فرزند در بین بلوک های محتوا تو در تو قرار می گیرند. چک لیست WebAIM مکرراً به این تکنیک اشاره می کند.
- 1.3.1 اشاره می کند "نشانه گذاری معنایی برای تعیین سرفصل ها استفاده می شود"
- 2.4.1 ساختار عنوان را به عنوان تکنیکی برای دور زدن بلوک های محتوا ذکر می کند
- 2.4.6 برخی از جزئیات را برای نوشتن سرفصل های مفید مورد بحث قرار می دهد
- 2.4.10 بیان می کند که "بخش های جداگانه محتوا با استفاده از سرفصل ها، در صورت لزوم تعیین می شوند"
لازم نیست همه عنوان ها روی صفحه قابل مشاهده باشند. برای مثال، ویکی‌پدیا از تکنیکی استفاده می‌کند که عمداً برخی از عنوان‌ها را خارج از صفحه قرار می‌دهد تا به‌طور خاص فقط برای صفحه‌خوان‌ها و سایر فناوری‌های کمکی قابل دسترسی باشد.
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
برای کاربردهای پیچیده، زمانی که طراحی بصری نیازی به یک عنوان قابل مشاهده نداشته باشد، این می تواند راه خوبی برای قرار دادن سرفصل ها باشد.
سایر گزینه های ناوبری
اگرچه صفحاتی با عنوان خوب به کاربران صفحه‌خوان کمک می‌کنند تا بتوانند حرکت کنند، عناصر دیگری نیز وجود دارد که می‌توانند از آنها برای حرکت در صفحه استفاده کنند، از جمله پیوندها ، کنترل‌های فرم و نشانه‌ها .
خوانندگان می‌توانند از ویژگی روتور صفحه‌خوان (روشی آسان برای جداسازی و اسکن فهرست سرفصل‌های صفحه) برای دسترسی به فهرست پیوندهای موجود در صفحه استفاده کنند. گاهی اوقات، مانند یک ویکی، پیوندهای زیادی وجود دارد، بنابراین خواننده ممکن است یک عبارت را در پیوندها جستجو کند. این امر بازدیدها را به پیوندهایی محدود می کند که در واقع حاوی عبارت هستند، نه هر اتفاقی از عبارت در صفحه.
این ویژگی تنها در صورتی مفید است که صفحه‌خوان بتواند پیوندها را پیدا کند و متن پیوند معنادار باشد. به عنوان مثال، در اینجا برخی از الگوهای رایج وجود دارد که یافتن پیوندها را سخت می کند.
- تگ های لنگر بدون ویژگی های
href. اغلب در برنامه های تک صفحه ای استفاده می شود، این اهداف پیوند باعث ایجاد مشکل برای صفحه خوان ها می شود. می توانید در این مقاله در مورد برنامه های تک صفحه ای بیشتر بخوانید. - دکمه هایی که با لینک ها پیاده سازی می شوند. اینها باعث می شوند که صفحه خوان محتوا را به عنوان پیوند تفسیر کند و عملکرد دکمه از بین می رود. برای این موارد، تگ anchor را با یک دکمه واقعی جایگزین کنید و به آن استایل مناسب دهید.
- تصاویر به عنوان محتوای پیوند استفاده می شود. گاهی اوقات ضروری است، تصاویر پیوندی می توانند برای صفحه خوان ها غیرقابل استفاده باشند. برای تضمین اینکه پیوند به درستی در معرض فناوری کمکی قرار دارد، مطمئن شوید که تصویر دارای متن ویژگی
altاست.
متن لینک ضعیف مشکل دیگری است. متن قابل کلیک مانند "بیشتر بیاموزید" یا "اینجا را کلیک کنید" هیچ اطلاعات معنایی درباره جایی که پیوند می رود ارائه نمی دهد. در عوض، از متن توصیفی مانند «درباره طراحی واکنش‌گرا بیشتر بدانید» یا «این آموزش بوم را ببینید» استفاده کنید تا به صفحه‌خوان‌ها کمک کنید تا زمینه معناداری درباره پیوندها ارائه دهند.
روتور همچنین می تواند یک لیست کنترل فرم را بازیابی کند. با استفاده از این لیست، خوانندگان می توانند موارد خاصی را جستجو کرده و مستقیماً به آنها مراجعه کنند.
خطای رایجی که صفحه خوان ها مرتکب می شوند تلفظ است. برای مثال، یک صفحه‌خوان ممکن است «Udacity» را به‌عنوان «oo-dacity» تلفظ کند، یا یک شماره تلفن را به‌عنوان یک عدد صحیح بزرگ بخواند، یا متنی با حروف بزرگ بخواند که گویی مخفف است. جالب اینجاست که کاربران صفحه‌خوان کاملاً به این خصلت عادت کرده‌اند و آن را در نظر می‌گیرند.
برخی از توسعه دهندگان سعی می کنند این وضعیت را با ارائه متنی فقط برای صفحه خوان که به صورت آوایی نوشته می شود، بهبود بخشند. در اینجا یک قانون ساده برای املای آوایی وجود دارد: آن را انجام نده . این فقط مشکل را بدتر می کند! به عنوان مثال، اگر کاربر از صفحه نمایش بریل استفاده کند، املای کلمه اشتباه می شود که منجر به سردرگمی بیشتر می شود. صفحه‌خوان‌ها اجازه می‌دهند تا کلمات با صدای بلند نوشته شوند، بنابراین این کار را به خواننده بسپارید تا تجربه خود را کنترل کند و تصمیم بگیرد که چه زمانی این کار ضروری است.
خوانندگان می توانند از روتور برای مشاهده لیست نشانه ها استفاده کنند. این فهرست به خوانندگان کمک می‌کند محتوای اصلی و مجموعه‌ای از نشانه‌های ناوبری ارائه شده توسط عناصر شاخص HTML را بیابند.
HTML5 عناصر جدیدی را معرفی کرد که به تعریف ساختار معنایی صفحه کمک می کند، از جمله header ، footer ، nav ، article ، section ، main و aside . این عناصر به‌طور خاص سرنخ‌های ساختاری را در صفحه ارائه می‌کنند بدون اینکه اجباری برای استایل داخلی ایجاد کنند (که به هر حال باید با CSS انجام دهید).
عناصر ساختاری معنایی جایگزین بلوک‌های div متعدد و تکراری می‌شوند و راهی واضح‌تر و توصیفی‌تر برای بیان شهودی ساختار صفحه برای نویسندگان و خوانندگان ارائه می‌دهند.