طراحی سایت فروشگاهی

طراحی سایت فروشگاه

طراحی سایت بیت کوین

طراحی سایت پرفکت مانی

طراحی سایت ووچر پرفکت مانی

طراحی سایت وبمانی

طراحی سایت خرید و فروش پرفکت مانی

طراحی سایت خرید و فروش وبمانی

طراحی سایت خرید و فروش

طراحی سایت فروشگاهی

طراحی سایت فروشگاه وبمانی

طراحی سایت فروشگاه پرفکت مانی

طراحی سایت فروش ارز دیجیتال

طراحی سایت ارز دیجیتال

طراحی سایت وب مانی

طراحی فروشگاه آنلاین

طراحی فروشگاه اینترنتی

طراحی سایت فروشگاه آنلاین

طراحی سایت فروشگاه اینترنتی

طراحی وب سایت
طراحی فروشگاه گیف کارت
طراحی سایت ارزان
طراحی سایت گیفت کارت
طراحی سایت گیف کارت
طراحی سایت پیمر
طراحی سایت پیمر وبمانی
طراحی سایت فروشگاه فایل
شرکت طراحی سایت
طراحی سایت سئو
طراحی سایت بهینه شده
طراحی سایت با سئو قوی
طراحی سایت فروشگاهی با سئو
آرتاراکس
آرتاراکس
طراحی سایت برای دسترس پذیری بیشتر

طراحی سایت برای دسترس پذیری بیشتر

شنبه 16 اسفند 1399
| 126

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

چرا سایت برای دسترس پذیری طراحی می شود؟

عنوان طراح سایت، قدرت و مسئولیت این را دارید که مطمئن شوید هرکسی فارغ از توانایی، زمینه یا موقعیت به آنچه که ایجاد می کنید دسترسی دارد. نکته قابل توجه در مورد در دسترس قرار دادن سایت این است که تجربه بهتری را برای همه به ارمغان می آورد.
در سراسر جهان بیش از 1 میلیارد نفر دارای معلولیت هستند. در سال 2017، 814 دادخواست دسترسی به وب سایت در دادگاه های فدرال و ایالت تشکیل شده است. این دو نکته به تنهایی باید ما را در اهمیت طراحی برای دسترس پذیری متقاعد کند.
یک مورد تجاری قوی نیز برای دسترسی وجود دارد: مطالعات نشان می دهد که وب سایت های قابل دسترس پذیری نتایج جستجوی بهتری دارند، آنها به مخاطبان بیشتری دسترسی پیدا می کنند، از نظر SEO مناسب هستند، زمان بارگیری سریع تری دارند، و همیشه قابلیت استفاده بهتری دارند.
اجرای این دستورالعمل ها نسبتاً آسان است و می تواند به محصولات شما کمک کند تا به سطح AA از نیازهای دسترس پذیری به محتوای وب (WCAG 2.0) نزدیک شوند و روی رایج ترین فن آوری های ابزار کمکی - از جمله صفحه خوان ها، بزرگنمایی صفحه و تشخیص گفتار کار کند. 

 

کنتراست رنگ را به اندازه کافی اضافه کنید


کنتراست_مناسب_در_طراحی_سایت


کنتراست رنگ یک مشکل دسترس پذیری وب سایت است که اغلب نادیده گرفته می شود. افرادی که کم بینا هستند، اگر کنتراست کمی داشته باشند، خواندن متن از رنگ پس زمینه دشوار است. سازمان جهانی بهداشت (WHO) در یک برگه اطلاعات مربوط به اختلال بینایی و نابینایی، 217 میلیون نفر را دارای نقص بینایی متوسط تا شدید تخمین زده است. بنابراین، در نظر گرفتن تضاد کافی بین متن و پس زمینه بسیار مهم است.
طبق W3C، نسبت کنتراست بین متن و پس زمینه آن باید حداقل 4.5 به 1 باشد (سطح انطباق AA.) نسبت ها با قلم های بزرگتر و سنگین تر، بهتر می شوند، زیرا خواندن آنها با کنتراست کم آسان تر است. اگر سایز شما حداقل 18 pt یا 14 pt پررنگ باشد، حداقل نسبت کنتراست به 3 به 1 کاهش می یابد.
برخی از ابزارها به شما کمک می کنند تا سریع این مورد را بررسی کنید. اگر از Mac استفاده می کنید، تهیه برنامه Contrast app را توصیه می کنم، با استفاده از این ابزار می توانید بلافاصله کنتراست را با استفاده از انتخابگر رنگ بررسی کنید. اگر می خواهید نمره دقیق تری بدست آورید، توصیه می کنم مقادیر رنگی خود را در جستجوگر کنتراست رنگ WebAIM وارد کنید. شما می توانید مقادیر رنگ را تغییر دهید و نتایج را در همان لحظه مشاهده کنید.

 

برای قابل فهم کردن اطلاعات مهم از رنگ به تنهایی استفاده نکنی


استفاده_از_ایدون_طراحی_سایت

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

 

در طراحی خود از الگوهای متمرکز استفاده کنید


الگو_متمرکز_طراحی_سایت

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

 

از برچسب ها با زمینه برای ورودی های فرم استفاده کنید


طراحی_فرم_ورود_افراد_نابینا


استفاده از متن در داخل عنوان برچسب یکی از بزرگترین اشتباهات هنگام طراحی فرم است. ممکن است وسوسه شویم که وقتی می خواهیم طراحی ما را ساده و مدرن کنیم، این روند را دنبال کنیم. قرار دادن متن در داخل قالب معمولاً خاکستری است و کنتراست کمی دارد، بنابراین خواندن آن دشوار است. 
افرادی که از صفحه خوان استفاده می کنند معمولاً با استفاده از کلید Tab در یک فرم حرکت می کنند تا از طریق کنترل های فرم پرش کنند. عناصر <label> برای هر کنترل فرم خوانده می شوند. هر متن بدون برچسب، به عنوان یک قالب نمایش داده می شود و صفحه خوان بدون خواندن، از آن رد می شود.
همیشه به افراد کمک کنید تا بفهمند چه کاری باید انجام دهند و در بالای فرم بنویسند. بهتر است  برچسب ها بعد از پر شدن فرم از بین نرود. مردم هرگز نباید متن را با آنچه می نویسند از دست بدهند. وقتی طراحان توصیف ها یا دستورالعمل ها را در فرم های خود پنهان می کنند، آنها به دلیل سادگی، قابلیت دسترس پذیری را فدا می کنند.
این عمل به این معنی نیست که شما باید طراحی خود را با اطلاعات غیرضروری بهم بریزید، فقط مطمئن شوید که نشانه های اساسی را ارائه می دهید. نوشتار بیش از حد دستورالعمل می تواند به همان اندازه مشکل ساز باشد. هدف این است که تأیید کنیم فرد اطلاعات کافی برای انجام وظایف خود را در اختیار دارد.

 

متن جایگزین مفیدی برای تصاویر و سایر محتوای غیر متنی خود بنویسید

افراد کم بینا اغلب از خوانندگان صفحه برای "شنیدن" وب سایت استفاده می کنند. این ابزارها متن را به گفتار تبدیل می کنند تا فرد بتواند کلمات موجود در یک سایت را بشنود.
به دو روش می توانید متن جایگزین ارائه دهید:
در ویژگی <alt> عنصر تصویر.
درون متن یا محیط خود تصویر.
سعی کنید آنچه را که در تصویر اتفاق می افتد و چگونگی اهمیت آن برای داستان را توصیف کنید، نه اینکه فقط جمله ای مانند "عکس" بگویید.
اگر تصویر کاملاً تزئینی است یا باعث ایجاد افزونگی می شود. سپس افزودن ویژگی <alt> خالی باعث می شود خوانندگان صفحه از آن چشم پوشی کنند. اگر متن جایگزین ننویسید، برخی از خوانندگان صفحه نام فایل عکس را برای فرد می خوانند. این بدترین تجربه ای است که می توانید ارائه دهید.
گوگل در حال کار بر روی AI است که می تواند عکس ها را با دقت 94٪ توصیف کند. این مدل منبع باز است و هنوز در دست تحقیق است - امیدوارم که ما شاهد استفاده از آن در محصولات مختلف باشیم. 
 

در محتوای خود از علامت گذاری صحیح استفاده کنید

عنوان ها از همان جایی که محتوا شروع می شود علامت گذاری می کنند - آنها برچسب هایی هستند که برای تعریف سبک و هدف آن به متن داده می شوند. عناوین همچنین سلسله مراتب محتوای صفحه را ایجاد می کنند.
عناوین با اندازه بزرگ فونت به خواننده کمک می کند تا ترتیب مطالب را بهتر درک کند. به همین ترتیب، خوانندگان صفحه از برچسب های عنوان برای خواندن محتوا استفاده می کنند. افراد کم بینا با خواندن هر عنوان در یک سلسله مراتب، نمای کلی از صفحه می گیرند.
استفاده از عناصر ساختاری مناسب هنگام ایجاد سایت بسیار مهم است. عناصر HTML با نوع خاصی از محتوا در مرورگر ارتباط برقرار می کنند و اینکه مرورگر چگونه باید آن محتوا را ارائه کند. اجزا و ساختار یک صفحه همان چیزی است که یک درخت دسترس پذیری را ترتیب می دهد. این درخت همان چیزی است که خوانندگان صفحه را قادر می سازد و افراد نابینا از آنها استفاده می کنند تا بتوانند به یک صفحه گوش دهند.
عدم استفاده صحیح از علامت گذاری بر قابلیت دسترس پذیری تأثیر می گذارد. از برچسب های HTML فقط برای جلوه سبک استفاده نکنید. خوانندگان صفحه به صورت سلسله مراتبی از صفحات وب با عنوان (سرصفحه های واقعی، نه فقط متن هایی که از نوع بزرگ و پررنگ هستند) پیمایش می کنند. افرادی که از سایت شما استفاده می کنند می توانند لیستی از همه عناوین را بشنوند، مطالب را براساس انواع عناوین پرش کنند یا مستقیماً به عناوین سطح بالا <h1> بروند.
 

پشتیبانی از پیمایش صفحه کلید

قابلیت استفاده ازصفحه کلید یکی از مهمترین جنبه های دسترس پذیری به وب سایت است. افراد دارای معلولیت حرکتی، افراد نابینا که به خواننده های صفحه نمایش اعتماد می کنند، افرادی که کنترل دقیق عضلانی ندارند و حتی کاربران حرفه ای نیز برای پیمایش مطالب به صفحه کلید وابسته هستند.
اگر معمولاً از کلید Tab در صفحه کلید خود برای پیمایش در میان عناصر تعاملی در یک صفحه وب استفاده می کنید: پیوندها، دکمه ها یا قسمت های ورودی. حالت متمرکز که قبلاً بحث کردیم، یک شاخص تصویری از موئلفه که در حال حاضر انتخاب شده است، فراهم می کند.
هنگام مرور در یک صفحه، ترتیب عناصر تعاملی ضروری است و پیمایش باید منطقی و شهودی باشد. ترتیب برگه باید جریان بصری صفحه را دنبال کند: چپ به راست، بالا به پایین - هدر، ناوبری اصلی، دکمه ها و ورودی های محتوا، و در آخر پاورقی.
یک روش خوب این است که سایت خود را فقط با استفاده از صفحه کلید آزمایش کنید. برای جابجایی در پیوندها و فرم ها از کلید Tab استفاده کنید. برای انتخاب یک عنصر با استفاده از کلید Enter تست کنید. تأیید کنید که همه اجزای تعاملی قابل پیش بینی و به ترتیب هستند.
 

نتیجه

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




 
 
working hours

ساعت تماس
9:30 الی 17:30

phone

مشاور
0912 0649 624
026-32 500 126

phone

پشتیبانی
026-32 56 84 62

email

ایمیل
info[at]artarax.com