26 KiB
ایجاد صفحات وب قابل دسترس
طراحی توسط Tomomi Imura
آزمون پیش از درس
قدرت وب در جهانی بودن آن است. دسترسی برای همه، بدون توجه به معلولیت، یک جنبه ضروری است.
- سر تیموتی برنرز-لی، مدیر W3C و مخترع شبکه جهانی وب
این نقل قول به خوبی اهمیت ایجاد وب‌سایت‌های قابل دسترس را برجسته می‌کند. یک برنامه که نمی‌تواند توسط همه دسترسی پیدا کند، به طور ذاتی تبعیض‌آمیز است. به عنوان توسعه‌دهندگان وب، باید همیشه دسترسی را در نظر داشته باشیم. با تمرکز بر این موضوع از ابتدا، شما در مسیر درستی برای اطمینان از دسترسی همه به صفحات ایجاد شده توسط شما قرار خواهید گرفت. در این درس، ابزارهایی را یاد خواهید گرفت که به شما کمک می‌کنند تا اطمینان حاصل کنید که دارایی‌های وب شما قابل دسترس هستند و چگونه با در نظر گرفتن دسترسی طراحی کنید.
می‌توانید این درس را در Microsoft Learn مطالعه کنید!
ابزارهایی که باید استفاده کنید
صفحه‌خوان‌ها
یکی از شناخته‌شده‌ترین ابزارهای دسترسی، صفحه‌خوان‌ها هستند.
صفحه‌خوان‌ها معمولاً توسط افرادی با مشکلات بینایی استفاده می‌شوند. همان‌طور که زمان صرف می‌کنیم تا مرورگر اطلاعاتی که می‌خواهیم به اشتراک بگذاریم را به درستی منتقل کند، باید اطمینان حاصل کنیم که صفحه‌خوان نیز همین کار را انجام دهد.
در ساده‌ترین حالت، یک صفحه‌خوان صفحه را از بالا به پایین به صورت صوتی می‌خواند. اگر صفحه شما تماماً متن باشد، صفحه‌خوان اطلاعات را به شکلی مشابه مرورگر منتقل می‌کند. البته، صفحات وب به ندرت فقط متن هستند؛ آن‌ها شامل لینک‌ها، تصاویر، رنگ‌ها و سایر اجزای بصری هستند. باید دقت شود که این اطلاعات به درستی توسط صفحه‌خوان خوانده شود.
هر توسعه‌دهنده وب باید با یک صفحه‌خوان آشنا شود. همان‌طور که در بالا اشاره شد، این ابزار همان چیزی است که کاربران شما از آن استفاده خواهند کرد. همان‌طور که با نحوه عملکرد مرورگر آشنا هستید، باید نحوه عملکرد صفحه‌خوان را نیز یاد بگیرید. خوشبختانه، صفحه‌خوان‌ها در اکثر سیستم‌عامل‌ها تعبیه شده‌اند.
برخی مرورگرها نیز ابزارها و افزونه‌های داخلی دارند که می‌توانند متن را با صدای بلند بخوانند یا حتی برخی ویژگی‌های ناوبری پایه را ارائه دهند، مانند این ابزارهای دسترسی مرورگر Edge. این ابزارها نیز مهم هستند، اما عملکرد آن‌ها بسیار متفاوت از صفحه‌خوان‌ها است و نباید به عنوان ابزارهای تست صفحه‌خوان اشتباه گرفته شوند.
✅ یک صفحه‌خوان و خواننده متن مرورگر را امتحان کنید. در ویندوز Narrator به صورت پیش‌فرض موجود است، و JAWS و NVDA نیز قابل نصب هستند. در macOS و iOS، VoiceOver به صورت پیش‌فرض نصب شده است.
بزرگ‌نمایی
یکی دیگر از ابزارهایی که معمولاً توسط افراد با مشکلات بینایی استفاده می‌شود، بزرگ‌نمایی است. ساده‌ترین نوع بزرگ‌نمایی، بزرگ‌نمایی ثابت است که با استفاده از Control + علامت مثبت (+) یا کاهش وضوح صفحه کنترل می‌شود. این نوع بزرگ‌نمایی باعث تغییر اندازه کل صفحه می‌شود، بنابراین استفاده از طراحی واکنش‌گرا برای ارائه تجربه کاربری خوب در سطوح بزرگ‌نمایی بالا مهم است.
نوع دیگری از بزرگ‌نمایی به نرم‌افزارهای تخصصی متکی است که یک ناحیه از صفحه را بزرگ‌نمایی کرده و حرکت می‌دهد، مشابه استفاده از یک ذره‌بین واقعی. در ویندوز، Magnifier به صورت داخلی موجود است، و ZoomText یک نرم‌افزار بزرگ‌نمایی شخص ثالث با ویژگی‌های بیشتر و کاربران بیشتر است. هر دو macOS و iOS دارای نرم‌افزار بزرگ‌نمایی داخلی به نام Zoom هستند.
بررسی‌کننده‌های کنتراست
رنگ‌ها در وب‌سایت‌ها باید با دقت انتخاب شوند تا نیازهای کاربران کوررنگ یا افرادی که در دیدن رنگ‌های کم‌کنتراست مشکل دارند را پاسخ دهند.
✅ یک وب‌سایت مورد علاقه خود را با استفاده از افزونه مرورگر مانند بررسی‌کننده کنتراست رنگ WCAG برای استفاده از رنگ آزمایش کنید. چه چیزی یاد می‌گیرید؟
Lighthouse
در بخش ابزارهای توسعه‌دهنده مرورگر خود، ابزار Lighthouse را پیدا خواهید کرد. این ابزار برای دریافت یک نمای اولیه از دسترسی (و همچنین سایر تحلیل‌ها) یک وب‌سایت مهم است. در حالی که نباید فقط به Lighthouse تکیه کنید، یک امتیاز 100% به عنوان یک خط پایه بسیار مفید است.
✅ ابزار Lighthouse را در پنل ابزارهای توسعه‌دهنده مرورگر خود پیدا کنید و یک تحلیل روی هر سایتی اجرا کنید. چه چیزی کشف می‌کنید؟
طراحی برای دسترسی
دسترسی موضوعی نسبتاً گسترده است. برای کمک به شما، منابع متعددی در دسترس هستند.
در حالی که نمی‌توانیم تمام جنبه‌های ایجاد سایت‌های قابل دسترس را پوشش دهیم، در زیر برخی از اصول اصلی که باید اجرا کنید آورده شده است. طراحی یک صفحه قابل دسترس از ابتدا همیشه آسان‌تر از بازگشت به یک صفحه موجود برای قابل دسترس کردن آن است.
اصول نمایش خوب
پالت‌های رنگ ایمن
افراد دنیا را به شکل‌های مختلفی می‌بینند، و این شامل رنگ‌ها نیز می‌شود. هنگام انتخاب یک طرح رنگ برای سایت خود، باید اطمینان حاصل کنید که برای همه قابل دسترس است. یکی از ابزارهای عالی برای ایجاد پالت‌های رنگ Color Safe است.
✅ یک وب‌سایت را شناسایی کنید که در استفاده از رنگ بسیار مشکل‌ساز است. چرا؟
استفاده از HTML صحیح
با CSS و JavaScript می‌توان هر عنصری را به هر نوع کنترلی تبدیل کرد. <span> می‌تواند به یک <button> تبدیل شود، و <b> می‌تواند به یک لینک تبدیل شود. در حالی که این ممکن است برای استایل‌دهی آسان‌تر باشد، هیچ اطلاعاتی به صفحه‌خوان منتقل نمی‌کند. هنگام ایجاد کنترل‌ها در یک صفحه، از HTML مناسب استفاده کنید. اگر یک لینک می‌خواهید، از <a> استفاده کنید. استفاده از HTML صحیح برای کنترل صحیح به عنوان استفاده از HTML معنایی شناخته می‌شود.
✅ به هر وب‌سایتی بروید و ببینید آیا طراحان و توسعه‌دهندگان از HTML به درستی استفاده کرده‌اند. آیا می‌توانید دکمه‌ای پیدا کنید که باید یک لینک باشد؟ نکته: روی صفحه کلیک راست کنید و گزینه 'View Page Source' را در مرورگر خود انتخاب کنید تا کد زیرین را مشاهده کنید.
ایجاد سلسله‌مراتب توصیفی برای عنوان‌ها
کاربران صفحه‌خوان به شدت به عنوان‌ها متکی هستند تا اطلاعات را پیدا کنند و در یک صفحه حرکت کنند. نوشتن محتوای توصیفی برای عنوان‌ها و استفاده از تگ‌های معنایی برای عنوان‌ها برای ایجاد یک سایت قابل پیمایش برای کاربران صفحه‌خوان مهم است.
استفاده از نشانه‌های بصری خوب
CSS کنترل کامل بر ظاهر هر عنصر در یک صفحه را ارائه می‌دهد. شما می‌توانید جعبه‌های متنی بدون حاشیه یا لینک‌هایی بدون زیرخط ایجاد کنید. متأسفانه حذف این نشانه‌ها می‌تواند تشخیص نوع کنترل را برای کسی که به آن‌ها وابسته است دشوارتر کند.
اهمیت متن لینک‌ها
لینک‌ها بخش اصلی ناوبری وب هستند. بنابراین، اطمینان از اینکه یک صفحه‌خوان می‌تواند لینک‌ها را به درستی بخواند، به همه کاربران اجازه می‌دهد سایت شما را پیمایش کنند.
صفحه‌خوان‌ها و لینک‌ها
همان‌طور که انتظار می‌رود، صفحه‌خوان‌ها متن لینک‌ها را به همان شکلی که هر متن دیگری در صفحه می‌خوانند، می‌خوانند. با این ذهنیت، متن‌های نشان داده شده در زیر ممکن است کاملاً قابل قبول به نظر برسند.
پنگوئن کوچک، که گاهی به عنوان پنگوئن پری شناخته می‌شود، کوچک‌ترین پنگوئن در جهان است. اینجا کلیک کنید برای اطلاعات بیشتر.
پنگوئن کوچک، که گاهی به عنوان پنگوئن پری شناخته می‌شود، کوچک‌ترین پنگوئن در جهان است. به https://en.wikipedia.org/wiki/Little_penguin مراجعه کنید برای اطلاعات بیشتر.
NOTE همان‌طور که در حال خواندن هستید، شما باید هرگز لینک‌هایی که شبیه به موارد بالا هستند ایجاد نکنید.
به یاد داشته باشید، صفحه‌خوان‌ها یک رابط متفاوت از مرورگرها با مجموعه‌ای متفاوت از ویژگی‌ها هستند.
مشکل استفاده از URL
صفحه‌خوان‌ها متن را می‌خوانند. اگر یک URL در متن ظاهر شود، صفحه‌خوان URL را می‌خواند. به طور کلی، URL اطلاعات معنی‌داری منتقل نمی‌کند و ممکن است آزاردهنده به نظر برسد. ممکن است این را تجربه کرده باشید اگر تلفن شما تاکنون یک پیام متنی با URL را به صورت صوتی خوانده باشد.
مشکل "اینجا کلیک کنید"
صفحه‌خوان‌ها همچنین توانایی خواندن فقط لینک‌های موجود در یک صفحه را دارند، مشابه روشی که یک فرد بینا صفحه را برای لینک‌ها اسکن می‌کند. اگر متن لینک همیشه "اینجا کلیک کنید" باشد، تمام چیزی که کاربر خواهد شنید "اینجا کلیک کنید، اینجا کلیک کنید، اینجا کلیک کنید، اینجا کلیک کنید، اینجا کلیک کنید، ..." است. اکنون تمام لینک‌ها از یکدیگر قابل تشخیص نیستند.
متن لینک خوب
متن لینک خوب به طور مختصر توضیح می‌دهد که در طرف دیگر لینک چه چیزی وجود دارد. در مثال بالا که درباره پنگوئن‌های کوچک صحبت می‌کند، لینک به صفحه ویکی‌پدیا درباره این گونه است. عبارت پنگوئن‌های کوچک می‌تواند متن لینک مناسبی باشد زیرا به وضوح مشخص می‌کند که اگر کسی روی لینک کلیک کند، درباره چه چیزی یاد خواهد گرفت - پنگوئن‌های کوچک.
پنگوئن کوچک، که گاهی به عنوان پنگوئن پری شناخته می‌شود، کوچک‌ترین پنگوئن در جهان است.
✅ چند دقیقه در وب جستجو کنید تا صفحات با استراتژی‌های لینک‌دهی مبهم پیدا کنید. آن‌ها را با سایت‌هایی که لینک‌های بهتری دارند مقایسه کنید. چه چیزی یاد می‌گیرید؟
نکات موتور جستجو
به عنوان یک مزیت اضافی برای اطمینان از اینکه سایت شما برای همه قابل دسترس است، به موتورهای جستجو کمک خواهید کرد تا سایت شما را پیمایش کنند. موتورهای جستجو از متن لینک‌ها برای یادگیری موضوعات صفحات استفاده می‌کنند. بنابراین استفاده از متن لینک خوب به همه کمک می‌کند!
ARIA
صفحه زیر را تصور کنید:
| محصول | توضیحات | سفارش |
|---|---|---|
| ویجت | توضیحات | سفارش |
| سوپر ویجت | توضیحات | سفارش |
در این مثال، تکرار متن توضیحات و سفارش برای کسی که از مرورگر استفاده می‌کند منطقی است. با این حال، کسی که از صفحه‌خوان استفاده می‌کند فقط کلمات توضیحات و سفارش را بدون زمینه می‌شنود.
برای پشتیبانی از این نوع سناریوها، HTML مجموعه‌ای از ویژگی‌ها به نام برنامه‌های غنی اینترنتی قابل دسترس (ARIA) را پشتیبانی می‌کند. این ویژگی‌ها به شما اجازه می‌دهند اطلاعات اضافی را به صفحه‌خوان‌ها ارائه دهید.
NOTE: مانند بسیاری از جنبه‌های HTML، پشتیبانی مرورگر و صفحه‌خوان ممکن است متفاوت باشد. با این حال، اکثر مشتریان اصلی از ویژگی‌های ARIA پشتیبانی می‌کنند.
شما می‌توانید از aria-label برای توصیف لینک استفاده کنید زمانی که فرمت صفحه اجازه نمی‌دهد. توضیحات برای ویجت می‌تواند به صورت زیر تنظیم شود:
<a href="#" aria-label="Widget description">description</a>
✅ به طور کلی، استفاده از نشانه‌گذاری معنایی همان‌طور که در بالا توضیح داده شد بر استفاده از ARIA برتری دارد، اما گاهی اوقات معادل معنایی برای ویجت‌های مختلف HTML وجود ندارد. یک مثال خوب درخت است. هیچ معادل HTML برای درخت وجود ندارد، بنابراین شما عنصر عمومی <div> را برای این عنصر با نقش مناسب و مقادیر ARIA شناسایی می‌کنید. مستندات MDN درباره ARIA اطلاعات مفید بیشتری دارد.
<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>
تصاویر
بدیهی است که صفحه‌خوان‌ها نمی‌توانند به طور خودکار بخوانند که در یک تصویر چه چیزی وجود دارد. اطمینان از اینکه تصاویر قابل دسترس هستند کار زیادی نمی‌طلبد - این همان چیزی است که ویژگی alt برای آن طراحی شده است. تمام تصاویر معنی‌دار باید یک alt داشته باشند تا توضیح دهند که چه چیزی هستند.
تصاویری که صرفاً تزئینی هستند باید ویژگی alt آن‌ها به یک رشته خالی تنظیم شود: alt="". این کار مانع از اعلام غیرضروری تصویر تزئینی توسط صفحه‌خوان‌ها می‌شود.
✅ همان‌طور که انتظار می‌رود، موتورهای جستجو نیز نمی‌توانند بفهمند که در یک تصویر چه چیزی وجود دارد. آن‌ها نیز از متن alt استفاده می‌کنند. بنابراین بار دیگر، اطمینان از اینکه صفحه شما قابل دسترس است، مزایای اضافی ارائه می‌دهد!
صفحه‌کلید
برخی کاربران نمی‌توانند از ماوس یا ترک‌پد استفاده کنند و به جای آن به تعاملات صفحه‌کلید متکی هستند تا از یک عنصر به عنصر دیگر حرکت کنند. مهم است که وب‌سایت شما محتوای خود را به ترتیب منطقی ارائه دهد تا یک کاربر صفحه‌کلید بتواند به هر عنصر تعاملی دسترسی پیدا کند. اگر صفحات وب خود را با نشانه‌گذاری معنایی بسازید و از CSS برای استایل‌دهی به طرح بصری آن‌ها استفاده کنید، سایت شما باید قابل پیمایش با صفحه‌کلید باشد، اما مهم است که این جنبه را به صورت دستی آزمایش کنید. اطلاعات بیشتری درباره استراتژی‌های ناوبری صفحه‌کلید بیاموزید.
✅ به هر وب‌سایتی بروید و سعی کنید فقط با استفاده از صفحه‌کلید در آن پیمایش کنید. چه چیزی کار می‌کند، چه چیزی کار نمی‌کند؟ چرا؟
خلاصه
وبی که فقط برای برخی قابل دسترس باشد، یک "شبکه جهانی وب" واقعی نیست. بهترین راه برای اطمینان از اینکه سایت‌هایی که ایجاد می‌کنید قابل دسترس هستند، این است که از ابتدا بهترین شیوه‌های دسترسی را در نظر بگیرید. در حالی که مراحل اضافی وجود دارد، گنجاندن این مهارت‌ها در جریان کاری شما اکنون به این معناست که تمام صفحات ایجاد شده توسط شما قابل دسترس خواهند بود.
🚀 چالش
این HTML را بگیرید و آن را با توجه به استراتژی‌هایی که یاد گرفتید، تا حد ممکن قابل دسترس بازنویسی کنید.
<!DOCTYPE html>
<html>
<head>
<title>
Example
</title>
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="site-header">
<p class="site-title">Turtle Ipsum</p>
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
</div>
<div class="main-nav">
<p class="nav-header">Resources</p>
<div class="nav-list">
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
</div>
</div>
<div class="main-content">
<div>
<p class="page-title">Welcome to Turtle Ipsum.
<a href="">Click here</a> to learn more.
</p>
<p class="article-text">
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</div>
<div class="footer">
<div class="footer-section">
<span class="button">Sign up for turtle news</span>
</div><div class="footer-section">
<p class="nav-header footer-title">
Internal Pages
</p>
<div class="nav-list">
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
</div>
</div>
<p class="footer-copyright">© 2016 Instrument</span>
</div>
</body>
</html>
آزمون پس از درس
مرور و مطالعه خود
بسیاری از دولت‌ها قوانینی در مورد الزامات دسترس‌پذیری دارند. درباره قوانین دسترس‌پذیری کشور خود تحقیق کنید. چه مواردی پوشش داده می‌شوند و چه مواردی پوشش داده نمی‌شوند؟ به عنوان مثال، این وب‌سایت دولتی را ببینید.
تکلیف
تحلیل یک وب‌سایت غیر دسترس‌پذیر
اعتبار: Turtle Ipsum توسط Instrument
سلب مسئولیت:
این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است حاوی خطاها یا نادرستی‌هایی باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما هیچ مسئولیتی در قبال سوءتفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.