سند

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

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

عنوان صفحه

عنصر <title> HTML محتوای صفحه یا صفحه ای را که کاربر قرار است تجربه کند را مشخص می کند. در بخش <head> یک سند HTML یافت می شود و معادل <h1> یا موضوع اصلی صفحه است. محتوای عنوان در تب مرورگر نمایش داده می‌شود و به کاربران کمک می‌کند بفهمند از کدام صفحه بازدید می‌کنند، اما در خود وب‌سایت یا برنامه نمایش داده نمی‌شود.

در یک برنامه تک صفحه ای (SPA)، <title> به روشی کمی متفاوت مدیریت می شود، زیرا کاربران مانند وب سایت های چند صفحه ای بین صفحات پیمایش نمی کنند. برای SPA ها، بسته به چارچوب جاوا اسکریپت، مقدار ویژگی document.title را می توان به صورت دستی یا توسط یک بسته کمکی اضافه کرد. اعلام عناوین صفحه به روز شده به کاربر صفحه خوان ممکن است کار بیشتری را بطلبد.

عناوین توصیفی صفحات هم برای کاربران و هم برای بهینه سازی موتورهای جستجو (SEO) خوب هستند – اما زیاده روی نکنید و کلمات کلیدی زیادی اضافه نکنید. از آنجایی که عنوان اولین چیزی است که هنگام بازدید کاربر AT از یک صفحه اعلام می شود، باید دقیق، منحصر به فرد و توصیفی باشد، اما مختصر نیز باشد.

هنگام نوشتن عناوین صفحه، همچنین بهترین تمرین این است که ابتدا صفحه داخلی یا محتوای مهم را «بارگذاری جلو» کنید، سپس هر صفحه یا اطلاعات قبلی را بعد از آن اضافه کنید. به این ترتیب، کاربران AT مجبور نیستند اطلاعاتی را که قبلاً شنیده اند، بررسی کنند.

نکن 
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
انجام دهید
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

زبان

زبان صفحه

صفت زبان صفحه ( lang ) زبان پیش فرض را برای کل صفحه تنظیم می کند. این ویژگی به تگ <html> اضافه می شود. یک ویژگی زبان معتبر باید به هر صفحه اضافه شود زیرا به AT سیگنال می دهد که به کدام زبان باید استفاده کند.

توصیه می شود برای پوشش بیشتر AT از کدهای زبان ISO دو کاراکتری استفاده کنید، زیرا بسیاری از آنها از کدهای زبان توسعه یافته پشتیبانی نمی کنند.

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

نکن 
<html>...</html>
انجام دهید
<html lang="en">...</html>

ویژگی lang فقط می تواند یک زبان مرتبط با آن داشته باشد. این بدان معناست که ویژگی <html> فقط می تواند یک زبان داشته باشد، حتی اگر چندین زبان در صفحه وجود داشته باشد. lang به زبان اصلی صفحه تنظیم کنید.

نکن
<html lang="ar,en,fr,pt">...</html>
چندین زبان پشتیبانی نمی شوند.
انجام دهید
<html lang="ar">...</html>
فقط زبان اصلی صفحه را تنظیم کنید. در این صورت زبان عربی است.

زبان بخش

همچنین می توانید از ویژگی زبان ( lang ) برای تغییر زبان در خود محتوا استفاده کنید. همان قوانین اساسی مانند ویژگی زبان تمام صفحه اعمال می شود، با این تفاوت که شما آن را به جای تگ <html> به عنصر درون صفحه مناسب اضافه کنید.

به یاد داشته باشید که زبانی که به عنصر <html> اضافه می کنید به تمام عناصر موجود می رسد، بنابراین همیشه ابتدا زبان اصلی صفت lang سطح بالای صفحه را تنظیم کنید.

برای هر عنصر درون صفحه که به زبان دیگری نوشته شده است، آن ویژگی lang را به عنصر wrapper مناسب اضافه کنید. این تنظیمات زبان سطح بالا را تا زمانی که آن عنصر بسته نشود لغو می شود.

نکن 
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        "Kas sa räägid inglise keelt?" when I met someone new.</p>
    </div>
  </body>
</html>
انجام دهید 
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        <span lang="et">"Kas sa räägid inglise keelt?"</span>
        when I met someone new.</p>
    </div>
  </body>
</html>

آی فریم ها

عنصر iFrame ( <iframe> ) برای میزبانی یک صفحه HTML دیگر یا محتوای شخص ثالث در داخل صفحه استفاده می شود. در اصل صفحه وب دیگری را در صفحه اصلی قرار می دهد. iFrames معمولا برای تبلیغات، ویدیوهای جاسازی شده، تجزیه و تحلیل وب و محتوای تعاملی استفاده می شود.

برای دسترسی به <iframe> خود، چند جنبه وجود دارد که باید در نظر بگیرید. ابتدا، هر <iframe> با محتوای متمایز باید یک عنصر عنوان در داخل تگ والد داشته باشد. این عنوان به کاربران AT اطلاعات بیشتری در مورد محتوای داخل <iframe> می دهد.

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

نکن 
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
انجام دهید 
<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>

درک خود را بررسی کنید

دانش خود را در مورد دسترسی به اسناد آزمایش کنید.

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

نگران نباشید، AT می تواند به طور خودکار هر زبان را بخواند.
در حالی که برخی از AT ممکن است مهارت های تشخیص زبان داشته باشند، شما نمی توانید تضمین کنید که AT به درستی حدس می زند.
همه زبان ها را در عنصر <html> قرار دهید. به عنوان مثال <html lang="en,lt,pl,pt">
ویژگی lang فقط می تواند یک زبان مرتبط با آن داشته باشد.
یک lang اصلی برای <html> و زبان های اضافی برای هر عنصری که محتوایی به زبان دیگری دارد تنظیم کنید.
AT در درجه اول به ویژگی زبان <html> برای خواندن سند متکی است. اگر متن چند زبانه دارید، مطمئن شوید که یک ویژگی lang به عنصر مربوطه (مانند یک بخش یا پاراگراف) با کد ISO دو حرفی صحیح اضافه کنید.