همانطور که به سال 2024 می رویم، FSE وردپرس همچنان به تأثیر واقعی بر طراحی وب، به ویژه از نظر دسترسی و تجربه کاربر، ادامه می دهد. با FSE، سفارشی کردن هر گوشه از یک وب سایت بصری تر است و یک تجربه طراحی یکپارچه را ارائه می دهد.

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

چگونه ویرایش کامل سایت وردپرس دسترسی را افزایش می دهد

در زمینه ویرایش کامل سایت وردپرس (FSE)، دسترسی به طراحی وب سایت ها به گونه ای گفته می شود که همه کاربران، از جمله افراد دارای معلولیت، بتوانند به راحتی در محتوا حرکت کنند و با آن تعامل داشته باشند.

وردپرس FSE دسترسی به چندین روش را افزایش می دهد. در اینجا 6 جنبه ای است که امروز در مورد آنها بحث خواهیم کرد:

  1. ناوبری صفحه کلید: یکی از جنبه های حیاتی دسترسی به وب، ناوبری صفحه کلید است. تم های FSE وردپرس تضمین می کند که همه کنترل ها، مانند منوهای ناوبری و فیلدهای فرم، از طریق صفحه کلید قابل دسترسی هستند. این برای کاربرانی که به صفحه کلید روی ماوس یا تاچ پد تکیه می کنند ضروری است.
  2. نقش های شاخص ARIA: این نقش ها قسمت هایی از صفحه (مانند بنرها، پیمایش، محتوای اصلی) را به گونه ای تعریف می کنند که خوانندگان صفحه می توانند آن را درک کنند. مضامین FSE به توسعه دهندگان این امکان را می دهد که این نقش ها را به بلوک های مختلف اختصاص دهند و ناوبری سایت را برای کاربران صفحه خوان بهبود بخشد.
  3. کنتراست و دید: مضامین FSE باید استانداردهای خاصی را برای تضاد رنگ بین متن و پس‌زمینه رعایت کنند و محتوا را برای کاربران دارای اختلالات بینایی خوانا کنند. این پایبندی به نسبت کنتراست با دستورالعمل های دسترسی به محتوای وب (WCAG) 2.0.
  4. متن لینک قابل فهم: پیوندهای درون محتوا باید به وضوح قابل تشخیص و قابل درک باشند. در FSE، پیوندها معمولاً زیر خط کشیده می‌شوند و استفاده از رشته‌های متنی تکراری غیر متنی برای پیوندها برای اطمینان از وضوح، ممنوع است.
  5. فرم های قابل دسترس: فرم‌های موجود در مضامین FSE، از جمله جستجو و نظرات، باید دارای خطوط اصلی فوکوس قابل مشاهده و برچسب‌های مناسب باشند تا اطمینان حاصل شود که برای همه کاربران، از جمله کاربرانی که از صفحه‌خوان‌ها استفاده می‌کنند، قابل دسترسی هستند.
  6. سرفصل ها و ساختار: استفاده صحیح از سرفصل های HTML برای درست کار کردن صفحه خوان ها ضروری است. مضامین FSE یک ساختار سرفصل منطقی را تشویق می‌کند و به کاربران کمک می‌کند محتوا را به‌طور مؤثرتری هدایت کنند.

حالا بیایید هر یک از این جنبه ها را با جزئیات بیشتری بررسی کنیم.

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

ناوبری صفحه کلید بخش کلیدی هر رابط در دسترس است و برای کسانی که به فناوری های کمکی متکی هستند ضروری است.

FSE به طور ذاتی ناوبری صفحه کلید را در خود جای داده است.

در اینجا به این صورت است:

حالت ناوبری

حالت ناوبری که در Block Editor معرفی شده است، یک ویژگی مهم برای کاربران صفحه‌خوان و کسانی است که به ناوبری صفحه کلید وابسته هستند. این به افراد اجازه می دهد تا به طور موثر در ویرایشگر با استفاده از آن حرکت کنند Tab و کلیدهای جهت دار این حالت دسترسی سریع به بلوک‌های مورد نظر را بدون نیاز به پیمایش در بخش‌های بزرگ محتوا، صرفه‌جویی در زمان و بهبود دسترسی را امکان‌پذیر می‌سازد.

پیمایش بلوک های تودرتو

آخرین نسخه حالت ناوبری در ویرایشگر Block باعث می شود تا بتوانید بین بلوک های والد و فرزند (تودرتو) و بین بلوک ها در همان سطح حرکت کنید. ورود به حالت ناوبری به سادگی انتخاب یک بلوک و فشار دادن آن است خروج کلید در این حالت می توانید از بالا یا پایین کلیدهای جهتی برای حرکت در همان سطح، ترک کرد کلید پیکان برای رفتن به یک سطح تودرتو، و درست کلید پیکان برای خروج از یک سطح تودرتو.

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

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

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

بهبود قابلیت استفاده

ویرایشگر بلوک در وردپرس FSE همچنین شامل بهبودهای قابلیت استفاده مانند نمایش لیست و آرد سوخاری این ویژگی‌ها راه‌های متعددی را برای دسترسی به بلوک‌ها فراهم می‌کنند و قابلیت استفاده پلتفرم را برای افرادی با توانایی‌های متنوع بهبود می‌بخشند.

نمای لیستنمای لیستنمای لیست

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

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

نقش های شاخص ARIA

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

در اینجا نحوه ترکیب وردپرس FSE آورده شده است نقش های شاخص ARIA:

  • نقش های پیش فرض در عناصر HTML5: در وردپرس، بسیاری از عناصر HTML5 به طور ذاتی نقش های شاخص ARIA را تعریف می کنند. به عنوان مثال <nav> عنصر به طور خودکار به عنوان نقطه عطف ناوبری شناسایی می شود. این ارتباط ذاتی فرآیند ایجاد وب سایت های قابل دسترس را ساده می کند، زیرا توسعه دهندگان می توانند به این نقش های پیش فرض تکیه کنند.
  • اختصاص نقش به حوزه های محتوا: برای اینکه یک وب سایت قابل دسترسی باشد، تمام محتوا باید در عناصری باشد که دارای نقش های شاخص ARIA هستند. این تضمین می کند که هیچ محتوایی توسط کاربران صفحه خوان از دست نمی رود. نقش‌های کلیدی شامل بنر برای سرصفحه‌ها، اصلی برای قسمت‌های محتوای اصلی، مکمل برای نوارهای کناری و ناوبری برای منوها است.
  • تعیین نقش دستی: در حالی که HTML5 نقش‌های شاخص پیش‌فرض را ارائه می‌کند، مرورگرهای قدیمی‌تر یا برخی فناوری‌های کمکی ممکن است همیشه آنها را تشخیص ندهند. در چنین مواردی، توسعه دهندگان می توانند به صورت دستی نقش هایی مانند <header role="banner">. این امر سازگاری با طیف گسترده ای از فناوری ها را تضمین می کند.
  • برچسب گذاری منحصر به فرد برای نقش های تکراری: اگر یک نقش بیش از یک بار در یک صفحه ظاهر می شود، مانند چندین بخش پیمایش، استفاده از aria-label برای متمایز ساختن آنها. این به کاربران صفحه‌خوان کمک می‌کند بین بخش‌های مختلف، مانند «پیمایش بالا» و «پیمایش پایین» تمایز قائل شوند.
  • رهنمودها و محدودیت های نقش: در حالی که هیچ قانون دقیقی در مورد تعداد نشانه‌هایی که یک صفحه باید داشته باشد وجود ندارد، اما تعداد زیاد نشانه‌ها می‌تواند منجر به سردرگمی کاربر شود. تم های وردپرس تشویق می شوند تا از تعداد معقولی از نشانه ها استفاده کنند و باید از ویجت های ناوبری HTML5 برای معناشناسی نشانه ها پشتیبانی کنند.

کنتراست و دید

اطمینان از کنتراست و دید مناسب راه دیگری برای ایجاد یک وب سایت در دسترس و کاربرپسند است. ویرایش کامل سایت این اولویت ها را به خوبی با استفاده از موارد زیر در بر می گیرد:

از پیش تنظیم سبک جهانی

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

کنتراست رنگ

حصول اطمینان از کنتراست کافی بین رنگ های متن و پس زمینه برای خوانایی حیاتی است، به ویژه برای کسانی که دارای اختلالات بینایی هستند. FSE و مضامین آن برای مطابقت با WCAG طراحی شده اند درخشندگی رنگ. این شامل حفظ حداقل نسبت کنتراست رنگ 4.5:1 برای متن معمولی است. کنتراست رنگ به اندازه کافی بالا را می توان با استفاده از ابزارهای انتخاب رنگ داخلی در ویرایشگر بلوک تأیید کرد. این ابزارها هشدارهایی را در صورت کم بودن کنتراست ارائه می دهند و به حفظ استانداردهای دسترسی کمک می کنند.

تایپوگرافی و خوانایی

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

موضوع بیست و بیست و چهارموضوع بیست و بیست و چهارموضوع بیست و بیست و چهار

مدیریت پس زمینه و چیدمان

به روز رسانی های اخیر در وردپرس، مانند نسخه 6.4، ویژگی هایی را برای مدیریت تصاویر پس زمینه در بلوک ها، مانند گروه مسدود کردن. این ویژگی‌ها شامل اندازه پس‌زمینه و گزینه‌های تکرار است که می‌تواند راهی مناسب برای حفظ دید و خوانایی متن روی تصاویر پس‌زمینه باشد.

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

خط زیر تنها روش پذیرفته شده برای نشان دادن پیوندهای درون محتوا در مضامین FSE است.

فرم های قابل دسترس

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

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

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

بیشتر بدانید

علاقه مند به یادگیری بیشتر در مورد نحوه اولویت بندی دسترسی در طراحی های وب خود هستید؟ ما به طور گسترده به این موضوع پرداخته ایم:

نگاه به آینده: دسترسی در قالب های آینده وردپرس

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

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