نکاتی برای طراحی سایت وردپرس سازگار با ADA

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

مطمئن نیستید انطباق ADA چیست یا چرا باید هنگام ساخت وب سایت خود آن را اولویت بندی کنید؟ سپس شما در جای مناسب هستید. بیایید توضیح دهیم که انطباق ADA چیست، چرا باید روی آن تمرکز کنید، و چگونه می توانید سایت وردپرس خود را طوری طراحی کنید که مطابق با ADA باشد.

تعریف انطباق ADA

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

ADA – به‌طور دیگری به عنوان شناخته می‌شود. قانون آمریکایی ها با معلولیت – یک قانون فدرال است که استانداردهای آن مستلزم آن است که اطلاعات و فناوری دیجیتال به راحتی برای هر شهروند آمریکایی دارای معلولیت قابل دسترسی باشد. اگرچه مشابه استانداردهای بخش 508 است، ADA از این جهت متفاوت است که به طور گسترده برای سازمان ها، اعم از دولتی و خصوصی (و غیرانتفاعی) اعمال می شود. در مقابل، بخش 508 به طور خاص برای فناوری ارتباطات اطلاعات فدرال اعمال می شود.

نکات ساده برای یک سایت وردپرس سازگار با ADA

اکنون که با انطباق ADA و چرایی اهمیت آن برای کاربران خود آشنا شدید، باید بدانید که چگونه یک سایت وردپرس سازگار با ADA طراحی کنید. در اینجا برخی از مهمترین مراحلی که باید دنبال کنید آمده است.

با طراحی و ساخت اولیه خود شروع کنید

باید استانداردهای دسترسی را در تمام مدت ایجاد سایت وردپرس در نظر داشته باشید. حتی اگر در طول آزمایش پس از ساخت، مشکلات مربوط به دسترس‌پذیری را مشاهده کنید، همچنان می‌خواهید سایتی را تا آنجا که می‌توانید از قبل تمیز کنید.

توصیه می‌شود با توجه به کنتراست رنگ شروع کنید. طبق WCAG 2.1، وب سایت ها باید نسبت کنتراست رنگ را حفظ کنند حداقل 4.5:1 اگر از متن زیر 18 پیکسل در پس‌زمینه و پیش‌زمینه خود استفاده می‌کنند. برای هر دو رنگ در پس‌زمینه و پیش‌زمینه سایت که از متنی با 18pt یا بیشتر استفاده می‌کند، نسبت کنتراست باید 3 باشد: 1. با بررسی طراحی وب‌سایت خود با استفاده از ابزارهای توسعه‌دهنده مرورگر خود می‌توانید آن را آسان کنید. در تصویر بالا می‌توانید ببینید که کنتراست پاراگراف‌های WPExplorer 14.66 است – بسیار بالاتر از حداقل 4.5.

همچنین برای انطباق با ADA سایت شما، رنگ‌های جایگزین شما مهم است. وب سایت های مدرن مملو از تصاویر جالب هستند، اما بسیاری از کاربران برای دسترسی سریع تر به اطلاعات یک وب سایت، استایل و تصاویر را غیرفعال می کنند. هنگامی که کاربر تصاویر را از طریق مرورگر خود غیرفعال می کند، پس زمینه سایتی که به آن دسترسی دارد سفید به نظر می رسد. به همین دلیل، مطمئن شوید که رنگ های جایگزین را به پنل های سایت وردپرس خود اضافه کنید، حتماً یک متن جایگزین اضافه کنید. (که توسط مرورگرها در زمانی که تصویری قابل نمایش نیست استفاده می شود) و متن توصیفی را در بالای تصاویر خود در نظر بگیرید.

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

به عنوان بخشی از طراحی و ساخت اولیه خود، سعی کنید یکطراحی منو ایجاد کنید که دارای گزینه های متعدد و شهودی برای پیمایش باشد. هنگامی که یک منو در وردپرس ایجاد می کنید باید به یک مکان منو اختصاص داده شود، اما بسته به موضوع شما، ممکن است چندین یا حتی چندین مکان داشته باشد. مطمئن شوید که همه منوهای خود را برای دسترسی و قابلیت استفاده در دسکتاپ و موبایل بررسی کنید. همچنین می‌توانید یک نقشه سایت را در فوتر وب‌سایت خود پیوند دهید تا به بازدیدکنندگان اجازه دهید از یک مکان به همه صفحات سایت شما دسترسی داشته باشند.

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

و در نهایت، برای اطمینان از اینکه کارتان را از نظر دسترسی خوب انجام می‌دهید، یک فرم بازخورد را نیز از پاورقی سایت خود وارد کنید. تعداد زیادی فرم های وب قابل دسترس برای وردپرس وجود دارد که می توانید از آنها برای پذیرش بازخورد دسترسی استفاده کنید. ، و همچنین برای ایجاد فرم های دیگر برای سایت خود (مانند فرم تماس، ارسال های وبلاگ، ثبت نام کاربر، و غیره).

محتوای قابل خواندن تولید کنید

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

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

اگر می‌خواهید از طراحی استانداردی برای کمک به خوانایی محتوای خود استفاده کنید، هیچ ابزاری بهتر از «طراحی مواد» Google وجود ندارد. طراحی متریال به شدت بر خوانایی تمرکز دارد و نمادها، طرح‌بندی‌ها، رنگ‌ها و موارد دیگر را به سازندگان وب‌سایت پیشنهاد می‌کند.

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

“آلفا” در شفافیت آلفا به سطح شفافیت یا تیرگی رنگ اشاره دارد. کنتراست ایجاد می کند و به صورت صفر (کاملا شفاف) یا یک (کاملاً مات) نشان داده می شود. در زمینه انطباق با ADA، مهم است که به خاطر داشته باشید که کاهش آلفای یک عنصر، به نوبه خود، کنتراست آن را کاهش می‌دهد و اجازه می‌دهد رنگ‌های زیرین از بین بروند. همیشه یک سایت وردپرسی طراحی کنید که بر تضاد بین متن و رنگ‌های پس‌زمینه آن تأکید کند تا خوانایی محتوای شما بهینه شود.

بهترین شیوه های قابل اعتماد را در آغوش بگیرید

نمی‌خواهید سایتی را ایجاد کنید که فکر می‌کنید یک سایت منطبق با ADA است بدون اینکه ابتدا با بهترین روش‌های اثبات شده برای دسترسی آشنا شوید. اگر در مورد انطباق با ADA از برخی از بهترین شیوه های اثبات شده و قابل اعتماد استفاده نکنید، در معرض خطر رسیدگی به دعوی حقوقی مربوط به ADA هستید.

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

در واقع، اگر می‌خواهید تجربه کاربران کم بینا را بهبود ببخشید (و هر زمان که ممکن است باید این کار را انجام دهید)، باید اطمینان حاصل کنید که متن شما نسبت کنتراست 4.5:1 یا بالاتر دارد و می‌تواند تغییر اندازه تا 200٪. این کاربران همچنین از نشانگرهای بصری ظریفی که هنگام خروج صدا از سایت شما فعال هستند یا از زیرنویس هایی که رسانه تصویری شما را همراهی می کنند، بهره مند می شوند.

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

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

---

ایجاد یک سایت وردپرس منطبق با ADA بدون شک برای برند شما کار بزرگی است. با این حال، ایجاد و نگهداری سایتی که به ADA پایبند باشد، مسلماً یک کار بزرگ است.

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