سند

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

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

عنوان صفحه

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

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

عناوین توصیفی صفحه هم برای کاربران و هم برای بهینه‌سازی موتور جستجو (سئو) خوب هستند - اما زیاده‌روی نکنید و کلمات کلیدی زیادی اضافه نکنید. از آنجایی که عنوان اولین چیزی است که هنگام بازدید کاربر 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 را به عنصر پوششی مناسب اضافه کنید. این کار تنظیمات زبان سطح بالا را تا زمان بسته شدن آن عنصر لغو می‌کند.

نکن 
<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 دیگر یا محتوای شخص ثالث در داخل صفحه استفاده می‌شود. اساساً یک صفحه وب دیگر را در داخل صفحه والد قرار می‌دهد. iFrameها معمولاً برای تبلیغات، ویدیوهای جاسازی‌شده، تجزیه و تحلیل وب و محتوای تعاملی استفاده می‌شوند.

برای اینکه <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>
قبلی
ساختار محتوا
بعدی
فوکوس صفحه کلید