دسترس پذیری در HTML؛ فرم، تصویر و صفحه کلید | درس 16

درس 16 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

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

پیش نیاز اصلی، ساختار معنایی HTML در درس 15 است. اگر هنوز فرم نساخته اید، درس 12 درباره form و label را هم مرور کنید. همه جلسات در دسته آموزش HTML و CSS در دسترس هستند.

دسترس پذیری را از خود HTML شروع کنید

یک صفحه خوان می تواند متن و نام کنترل ها را بخواند، اما از شکل ظاهری صفحه همان برداشتی را ندارد که کاربر بینا دارد. برای همین انتخاب عنصر اهمیت دارد: عنوان را با تگ عنوان، لینک را با a و دکمه را با button بنویسید. این عناصر اطلاعات و رفتار پایه ای دارند که یک div ساده ارائه نمی کند. در این درس ظاهر پیش فرض مرورگر را نگه می داریم تا روی همین پایه تمرکز کنیم.

زبان، عنوان سند و ترتیب عنوان ها

برای صفحه فارسی از lang="fa" استفاده کنید تا زبان محتوا مشخص شود. ویژگی dir="rtl" جهت نمایش را تعیین می کند؛ این دو وظیفه متفاوت دارند. عنوان زبانه نیز باید موضوع همان صفحه را روشن کند. اسکلت سند را در درس 4 درباره head و body بررسی کرده بودیم.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>درخواست مشاوره طراحی سایت | شرکت نمونه</title>
</head>
<body>
  <main>
    <h1>درخواست مشاوره طراحی سایت</h1>
    <section>
      <h2>اطلاعات مورد نیاز</h2>
      <p>برای شروع، نوع کسب و کار خود را معرفی کنید.</p>
    </section>
  </main>
</body>
</html>

عنوان ها نقشه محتوا هستند: عنوان اصلی، عنوان بخش و سپس زیربخش. صرفا برای درشت شدن نوشته از h1 یا h2 استفاده نکنید. در یک بخش زیر h2، زیربخش را با h3 مشخص کنید. مرور درس 6 درباره عنوان ها و پاراگراف ها به انتخاب سطح درست کمک می کند.

لینک برای رفتن؛ دکمه برای انجام دادن

لینک href دار کاربر را به یک مقصد می برد؛ دکمه عملی مانند ارسال فرم را انجام می دهد. متن کنترل باید مقصد یا عمل را توضیح دهد. «مشاهده خدمات طراحی سایت» از «اینجا کلیک کنید» روشن تر است. ساختن دکمه با div و رویداد کلیک، رفتار صفحه کلید و نام مناسب را خودکار فراهم نمی کند.

<a href="services.html">مشاهده خدمات طراحی سایت</a>

<form action="/request" method="post">
  <label for="business">نام کسب و کار</label>
  <input id="business" name="business" type="text" required>
  <button type="submit">ارسال درخواست مشاوره</button>
</form>

این مثال برای پروژه شخصی شماست: فایل services.html و مسیر سمت سرور /request باید واقعا وجود داشته باشند. برای تمرین HTML فعلا ظاهر و رفتار اولیه را بررسی کنید. جزئیات مقصدها در درس 8 درباره لینک ها و مسیرها آمده است.

متن جایگزین تصویر را بر اساس کاربرد بنویسید

اگر تصویر اطلاعات مهمی منتقل می کند، alt باید همان اطلاعات ضروری را کوتاه بیان کند. اگر تصویر فقط تزئینی است، alt="" مناسب است؛ حذف کامل alt با مقدار خالی یکسان نیست. برای تصویری که تنها محتوای یک لینک است، متن جایگزین باید مقصد یا کار لینک را روشن کند.

<!-- تصویر اطلاعاتی -->
<img src="images/team.jpg"
     alt="تیم طراحی در حال بررسی طرح صفحه فروشگاه">

<!-- تصویر صرفا تزئینی -->
<img src="images/divider.png" alt="">

<!-- لوگویی که تنها محتوای لینک است -->
<a href="index.html">
  <img src="images/logo.png" alt="صفحه اصلی شرکت نمونه">
</a>

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

برچسب فرم و راهنمای قابل فهم

هر ورودی متنی باید نام قابل تشخیص و برچسب قابل مشاهده داشته باشد. مقدار for در label باید با id ورودی برابر باشد. placeholder با شروع تایپ ناپدید می شود و جایگزین برچسب نیست. توضیح قالب ورودی و اجباری بودن آن را پیش از خطای کاربر بیان کنید. aria-describedby می تواند راهنمای موجود در صفحه را به ورودی مرتبط کند.

<label for="email">ایمیل (ضروری)</label>
<p id="email-help">نشانی ایمیلی را وارد کنید که به آن دسترسی دارید.</p>
<input id="email" name="email" type="email"
       autocomplete="email" required
       aria-describedby="email-help">

در اینجا email نام ورودی است و email-help شناسه راهنما؛ این شناسه ها نباید در همان سند تکرار شوند. راهنما به زبان ساده نوشته شده و required نیز الزام تکمیل را به مرورگر اعلام می کند. انواع کنترل ها را در درس 13 درباره input، textarea و select و محدودیت های ورودی را در درس 14 درباره اعتبارسنجی فرم یاد گرفتیم.

ARIA مجموعه ویژگی هایی برای بیان اطلاعات دسترس پذیری است. افزودن این ویژگی ها به تنهایی رفتار دکمه یا مدیریت صفحه کلید نمی سازد. اول عنصر بومی مناسب را انتخاب کنید؛ برای یک button معمولی با متن روشن، افزودن role=”button” ضرورتی ندارد.

پروژه عملی؛ صفحه درخواست مشاوره

کد زیر را در فایل index.html ذخیره کنید. لینک آغاز صفحه به محتوای اصلی می رود و فرم یک نام، ایمیل و توضیح دریافت می کند. ارسال واقعی درخواست به پیاده سازی مسیر /request روی سرور نیاز دارد؛ این فایل به تنهایی پیام را به شرکت ارسال نمی کند.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>مشاوره طراحی سایت | شرکت نمونه</title>
</head>
<body>
  <a href="#main-content">رفتن به محتوای اصلی</a>
  <header>
    <p>شرکت نمونه</p>
    <nav aria-label="منوی اصلی">
      <ul>
        <li><a href="#services">خدمات طراحی سایت</a></li>
        <li><a href="#request">درخواست مشاوره</a></li>
      </ul>
    </nav>
  </header>
  <main id="main-content" tabindex="-1">
    <h1>مشاوره برای ساخت سایت کسب و کار</h1>
    <section id="services">
      <h2>خدمات ما</h2>
      <p>طراحی سایت شرکتی و فروشگاهی متناسب با نیاز شما.</p>
    </section>
    <section id="request">
      <h2>فرم درخواست مشاوره</h2>
      <p>نام و ایمیل ضروری هستند؛ توضیح پروژه اختیاری است.</p>
      <form action="/request" method="post">
        <p>
          <label for="full-name">نام و نام خانوادگی (ضروری)</label>
          <input id="full-name" name="full_name" type="text"
                 autocomplete="name" required>
        </p>
        <p id="email-help">برای پاسخ مشاوره از این ایمیل استفاده می کنیم.</p>
        <p>
          <label for="email">ایمیل (ضروری)</label>
          <input id="email" name="email" type="email"
                 autocomplete="email" required
                 aria-describedby="email-help">
        </p>
        <p>
          <label for="project">توضیح پروژه (اختیاری)</label>
          <textarea id="project" name="project" rows="5"></textarea>
        </p>
        <button type="submit">ارسال درخواست مشاوره</button>
      </form>
    </section>
  </main>
  <footer><p>شرکت نمونه؛ طراحی و توسعه وب</p></footer>
</body>
</html>

مقدار tabindex="-1" روی مقصد اصلی، امکان دریافت تمرکز را فراهم می کند، اما آن را به توقف های معمول Tab اضافه نمی کند. از tabindex مثبت برای مرتب کردن مصنوعی کنترل ها استفاده نکنید؛ ترتیب منطقی را در خود سند بنویسید. لینک رفتن به محتوا در این تمرین همیشه دیده می شود.

صفحه را بدون ماوس بررسی کنید

1. فایل را در مرورگر باز کنید و با Tab از لینک آغاز صفحه تا دکمه ارسال حرکت کنید.
2. با Shift + Tab به کنترل قبلی برگردید. باید مشخص باشد تمرکز روی کدام کنترل است.
3. لینک رفتن به محتوا را با Enter فعال کنید و مقصد را بررسی کنید.
4. داخل فرم، با Tab بین ورودی ها حرکت کنید؛ نام هر ورودی باید کنار آن روشن باشد.
5. دکمه بومی را با Enter یا Space فعال کنید؛ با خالی گذاشتن ورودی ضروری، رفتار اعتبارسنجی را ببینید.
6. با یک صفحه خوان هم نام کنترل ها، ترتیب عنوان ها و راهنمای ایمیل را بررسی کنید؛ مشاهده ظاهری به تنهایی کافی نیست.

فهرست Tab معمولا روی کنترل های تعاملی حرکت می کند، نه روی همه عنوان ها و پاراگراف ها. پس توقف نکردن روی h2 به معنی گم شدن آن نیست. در درس های CSS، کنتراست، نمایش تمرکز و اندازه نوشته را هم بررسی خواهیم کرد. این تمرین پایه HTML است و به تنهایی گواه کامل بودن دسترس پذیری کل سایت نیست.

تمرین درس 16؛ افزودن روش تماس

پیش از دکمه ارسال، دو گزینه رادیویی برای «تماس تلفنی» و «پاسخ ایمیلی» اضافه کنید. آنها را با fieldset گروه بندی کنید، عنوان گروه را در legend بگذارید و برای هر گزینه label بسازید. هر دو گزینه باید name یکسان و id متفاوت داشته باشند. یکی را پیش فرض انتخاب کنید.

<fieldset>
  <legend>روش پاسخ ترجیحی</legend>
  <p>
    <input id="reply-phone" type="radio" name="reply_method"
           value="phone">
    <label for="reply-phone">تماس تلفنی</label>
  </p>
  <p>
    <input id="reply-email" type="radio" name="reply_method"
           value="email" checked>
    <label for="reply-email">پاسخ ایمیلی</label>
  </p>
</fieldset>

منابع و ادامه تمرین

برای مطالعه بیشتر: HTML و دسترس پذیری در MDN، راهنمای متن جایگزین تصویر W3C و راهنمای دستورهای فرم W3C. حالا صفحه درس 15 خود را با همین مراحل بازبینی کنید و هر کنترل بدون نام روشن را اصلاح کنید.

درس قبلی: ساختار معنایی در HTML | درس 15