وب در دسترس برای همه! بخش دوم

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

ساختار درست کدهای HTML

اولین بخش مهمی که میتوان به آن اشاره کرد هدینگ‌های وبسایت هستند. رعایت سلسله مراتب این تگ‌ها در صفحه بسیار مهم است به این صورت که ما در یک صفحه یک تگ h1 و h2 داریم و داخل بخشی که h2 را داریم می‌توانیم سایر تگهای هدینگ h3 تا h6 را داشته باشیم. اینکه ما در صفحه ای از سایت تگ h2 داشته باشیم و بعد از آن از تگ h5 استفاده کرده باشیم ساختار کاملا اشتباهی است.

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

برای مشاهده این ساختار در صفحات وب می‌توانید از پلاگین‌های کروم استفاده کنید (HTML5 Outliner)

از لیست‌ها در مکانهای درست استفاده کنید، برای مثال از ul برای لیست هایی که ترتیب آنها مهم نیست، از ol برای نمایش لیست‌هایی که ترتیب آنها حائز اهمیت است و از dl برای لیست‌هایی که لازم است برای هر آیتم توضیحاتی بنویسیم استفاده کنید.

نکته بسیار مهم در پیاده سازی ساختار درست کدهای HTML این است navigate بین بخش‌های مختلف سایت با استفاده از کیبورد بر اساس اهمیت و اولویت آنها صورت بگیرد. تصور کنید شما در صفحه یک منو دارید و داخل صفحه ۲ باکس دارید که در باکس سمت راست سایدبار و در باکس سمت چپ محتوای اصلی صفحه وجود دارد و مشخص است که محتوای اصلی صفحه یعنی باکس چپ از اهمیت بیشتر و اولویت بالاتری برای navigate برخوردار است پس وقتی با کیبورد و دکمه Tab بین بخش‌های مختلف حرکت میکنیم ابتدا باید محتوای اصلی صفحه انتخاب و بعد از آن سایدبار انتخاب شود.

مدیریت Focus Keyboard در سایت

بسیاری از ما هنگام Develop پروژه نمیخواهیم از border outline پیشفرض المنتهای سایت استفاده کنیم و معمولا آن را none قرار میدهیم که استایلی که دیزاین صفحه ما را زشت میکند غیرفعال کنیم اما با اینکار وبسایت را از دسترس خارج میکنیم و کاربرانی که با کیبورد کار میکنند نمیتوانند از سایت ما استفاده کنند.

ما میخواهیم این ویژگی برای کیبورد در دسترس و برای ماوس‌کلیک غیرفعال باشد! برای اینکار با استفاده از کد زیر مشخص میکنیم که هنگامی که کاربر کیبورد را فشار میدهد به تگ با id=body کلاس مشخصی اضافه شود و به محض کلیک روی سایت این کلاس حذف شود و درنهایت با استفاده از کلاس اضافه شده در css این خاصیت را فعال میکنیم.

(() => {
        
        const selectors = {
                container: '#body',
            },
            classes = {
               containerHasFocus: 'body--has-focus',
            },
            container = document.querySelector(selectors.container);

            // Add the focus class to the container if the keyboard
            document.addEventListener('keyup', (e) => {
                if (container.contains(e.target)) {
                    container.classList.add(classes.containerHasFocus);
                } else {
                    container.classList.remove(classes.containerHasFocus);
                }
            });

            // Remove the focus class on mouse click
            document.addEventListener('mousedown', (e) => {
                if (container.contains(e.target)) {
                    container.classList.remove(classes.containerHasFocus);
                }
            });

    })();

و با استفاده از کدهای CSS قابلیت focus keyboard را بهتر و زیباتر فعال میکنیم.

/*--------------------------------
    ***  ENABLE FOCUS KEYBOARD
    **   KEYBOARD WEB ACCESSIBILITY
    */

    .body--has-focus *:focus {
        border          : 1px solid $mainColorSite !important;
        border-radius   : 3px;
    }

    header.main nav li a:focus{
        background  : whitesmoke;
        color       : $mainColorSite;
    }

    .body--has-focus  .checkbox input[type=&quotcheckbox&quot]:focus + label::before,
    .body--has-focus  .radio input[type=&quotradio&quot]:focus + label::before{
        outline: $mainColorSite auto 5px !important;
    }

تصاویر استفاده شده در سایت

تصاویر به صورت پیشفرض accessible نیستند و با افزودن ویژگی alt به کد img میتوانند در دسترس قرار بگیرند. اگر ما نخواهیم تصویری در دسترس باشد کافی است مقدار alt خالی باشد تا نادیده گرفته شود.

برای تصاویری که حاوی اطلاعات تحلیلی هستند و یا فرمت gif دارند از ویژگی longdesc میتوانیم به صورت زیر استفاده کنیم.

میتوانیم با استفاده از ویژگی aria-describedby مشخص کنیم تگ موردنظر توسط کدام المنت توضیح و تعریف میشود.

The aria-describedby attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need.

دسترسی به محتوای سایت

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

در وبسایتهایی که تصاویر و محتواهای مختلفی در صفحه وجود دارد میتوان با قرار دادن دکمه ای "Skip to Main Content" کاربر محتوای اصلی صفحه را مشاهده کند. تصور کنید کاربر در یک پنل کاربری که حدود ۲۰ آیتم منو وجود دارد صفحات مختلف را مرور میکند اگر با کیبورد کار کند در هر صفحه باید ۲۰ بار کلید Tab را فشار دهد تا به محتوای اصلی برسد و این بسیار خسته کننده و اذیت کننده است. برای اینکار قرار دادن دکمه جهت دسترسی به محتوا و بخش اصلی صفحه بسیار کاربردی است.

برای ویدیوها و فایلهای صوتی Transcript کمک میکند کاربر به محتوای متنی فایلهای صوتی و تصویری دسترسی داشته باشد هرچند کار سخت و زمانبری است و اکثر شرکتها آن را برونسپاری میکنند.  می‌توان با استفاده از برخی ابزارهای Caption Tools اینکار را انجام داد و زیرنویسهایی برای ویدیوها ایجاد کرد.

نکته مهم: اکثر دولوپرها وقتی پروژه ای طراحی میکنند در لیست صفحات مطالب و یا محصولات و ... دکمه ی با عنوان "Read more" یا "ادامه مطلب" قرار میدهند که یک اشتباه در Web Accessibility است! وقتی که Screen Reader این صفحات را چک میکند تعداد زیادی لینک به محتوای Read more دریافت میکند و نمیتواند تشخیص دهد که برای کدام مطلب یا محصول است؟! بهترین راهکار این است که مثلا بنویسیم "Read more about laravel", "Read more about SOLID Principles"  و ...

استفاده از HTML Attributeها در صفحات سایت

۱. حتما داخل تگ html از ویژگی lang استفاده کنید و مشخص کنید که محتوای سایت شما با چه زبانی است، با اینکار به مرورگر و دستگاههایی که کاربران از آن استفاده میکنند کمک میکنیم تا زبان سایت را تشخیص دهند و در صورت امکان برای ترجمه آن به کاربر کمک میکند.

۲. وقتی داخل صفحات سایت نقل قولی از یک زبان دیگر قرار میدهید ویژگی lang را برای آن قرار دهید.

۳. برای عبارات مخفف وقتی از تگ abbr استفاده می‌کنید حتما برای آن title قرار دهید.

ساختار فرم‌ها

بخش‌ فرمها می‌تواند کمی پیچیده باشد، برای اینکه فرم‌های ما در دسترس باشند نکات پیشنهادی که به ما کمک میکند را به صورت زیر در نظر میگیریم:

۱. برای گروه بندی فرم‌ها از fieldset و برای عنوان گروه از legend استفاده کنیم.

۲. برای تگ label ویژگی for قراردهیم که با استفاده از ویژگی id با تگ input موردنظر مرتبط می‌شود.

۳. به هیچ عنوان از placeholder به جای label استفاده نمیکنیم، بسیاری از دستگاهها قابلیت تشخیص آنها را ندارند به طور کلی از placeholder برای راهنمایی بیشتر کاربر و اشاره به نکاتی برای کاربر استفاده میکنیم.

۴. برای تگ‌های input که الزامی هستند ویژگی require را قرار دهیم.

۵. در برخی فرمها مثلا جستجو در سایت قراردادن label دیزاین ما را به هم میزند و بیشتر مواقع آن را حذف میکنیم ولی به طور منطقی باید تگ label وجود داشته باشد و با استفاده از css آن را hidden میکنیم.

نکته مهم: برای تگ‌هایی که به صورت پیشفرض با کیبورد قابل انتخاب نیستند مثلا تگهای span, div و ... میتوانیم با قراردادن ویژگی tabindex="0" قابلیت انتخاب را برای آنها فعال کنیم. خیلی وقتها که ما صفحاتی را طراحی میکنیم مثلا دکمه ای را داخل تگ span قرار میدهیم که در دسترس قرار نمیگیرد با قراردادن این ویژگی این مشکل رفع می‌شود.

CSS و بهبود ساختار وبسایت

برای برخی بخش‌های پروژه قرار دادن هدینگ کمک میکند که همه کاربران به خوبی بخش‌های مختلف را شناسایی کنند و به راحتی از آن استفاده کنند، برای مثال وقتی بالای منوی اصلی سایت یک تگ h2 به عنوان منوی اصلی سایت قراردهیم Screen Reader ها به خوبی آن را شناسایی میکنند و کاربر میتواند متوجه بخش موردنظر شود اما نکته این است که برای دسکتاپ این عنوان جالب نیست و این منو تعریف شده است. برای اینکار میتوانیم با استفاده از CSS این عنوان را مخفی کنیم اما نکته مهم این است که بهترین راهکار برای آن چیست؟!

اگر برای تگ هدینگ از display: none یا visibility: hidden و یا width:0, height:0 استفاده کنیم Screen Reader آن را نادیده میگیرد و مثل این است که وجود نداشته باشد! میتوانیم از ویژگی text-indent: -99999px استفاده کنیم ولی وقتی داخل دسکتاپ focus کیبورد داشته باشیم آن المنت انتخاب و فوکوس تا انتها کشیده می‌شود! بهترین کار این است که از ویژگی position: absolute استفاده کنیم و با استفاده از left:-99999px و overflow:hidden آن را از صفحه مخفی کنیم که برای همه دستگاهها به خوبی کار کند.

افزایش Performance وب‌سایت

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

همانطور که میدانیم افزایش پرفرمنس وبسایت تنها به کاهش حجم فایل محدود نمیشود با کاهش HTTP Requestها و یا با کمک کش میتوانیم به بهبود سایت کمک کنیم.

یک نمونه بسیار تمیز و موفق که موضوع Web Accessibility را به خوبی در وبسایتش پیاده سازی کرده است سایت sitepoint است که تصویر آن را به صورت زیر مشاهده میکنید. با فشار دادن دکمه تب به کاربر انتخاب میدهد که یکی از حالتها را انتخاب کند.

مطالعه بخش سوم مقاله.