10 ابزار مفید توسعه‌ وب که باید از آن‌ها مطلع باشید - راکت
این ابزار به Adobe XD شباهت دارد اما به نظر من کاربر پسندتر است. علاوه بر این، Figma امکان ساخت نمونه‌های اولیه و بررسی CSS برای طراحی را به شما می‌دهد.
قابلیت دسترسی
این یک ابزار رایگان می‌باشد که در Devtools کروم قرار گرفته است. به شما کمک می‌کند تا مشکلات سایت خود را آزمایش و شناسایی کنید. این ابزار به عملکرد، برنامه های وب پیشرفته، <anchor>قابلیت دسترسی</anchor>، سئو و بهترین روش‌ها امتیاز می‌دهد.
قابلیت دسترسی - طراحی برای همه مردم نه بیشترشان - راکت
قابلیت دسترسی \- طراحی برای همه مردم نه بیشترشان \- راکت

بهترین زمان یادگیری بیشتر، برای شروع یک رقابت دلچسب! مهارتتو ارتقا بده...

[تابستون کوتاهه! کلیک کن!](https://roocket.ir/articles/summer-promotion)

ثانیه


دقیقه


ساعت


روز


[ورود](/login) [عضویت](/register)

تم تاریک



تم روشن



دارک مود خودکار


- [راکت](/)
- دوره های آموزشی








[**دوره‌های آموزشی** لیست دوره‌های\
آموزشی ویدیویی راکت](/series)



[**مسیرهای یادگیری** مسیرهای یادگیری\
قدم به قدم برنامه‌نویسی](/skills)



[**پیشرفت من** مسیر پیشرفت\
آموزشی شما در راکت](https://user.roocket.ir/courses)



[**دوره‌های رایگان** برای شروع بدون هزینه آموزش ببینید](/series?type[1]=free)



[**گواهی پایان دوره**\
\
گواهی\
تاییدیه کسب مهارت فنی دوره‌ها](https://roocket.ir/certifications/what-is-certification)





* * *







### محبوب‌ترین آموزش‌ها





- [آموزش جاوا اسکریپت](/skills/javascript)
- [آموزش لاراول](/skills/laravel)
- [آموزش وردپرس](/skills/wordpress)
- [آموزش react](/skills/react)

- [پرسش و پاسخ ها](/discuss)
- [مقالات](/articles)
- [راکت کست](/podcast)
- [راکت‌نامه\
جدید](https://mag.roocket.ir/)
- لینک های مفید






- [کانال\
تلگرام](https://t.me/roocketir)
- [سوالات\
متداول](/faq)
- [درباره‌ما](/about-us)
- [ارتباط\
باما](/contact-us)
- [همکاری\
باما](/synergy)

[تجربه کاربری](/articles?category=ux)

ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 10 دقیقه


# قابلیت دسترسی \- طراحی برای همه مردم نه بیشترشان

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

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

**طراحی برای همه مردم نه بیشترشان**

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

این افراد درست مانند مردم دیگر، در زندگی‌شان به اینترنت وابسته هستند و در دنیای خود از دیجیتال و ابزارهای ارتباطی استفاده می کنند. بهینه سازی وبسایت برای اینکه مطمئن شوید کاربران مختلف می توانند بهترین تجربه را از وبسایت شما داشته باشند، می تواند به تعاملات وبسایت شما کمک بسزایی کند. جدای از اینکه اینکار باعث می شود تجربه ها و مهارت های شما در امر طراحی بیشتر شود، شما قادر خواهید بود که کاربران بیشتری را در وبسایت جذب کنید. [طراحی با قابلیت در دسترس بودن](https://roocket.ir/articles/accessible-sites-are-ugly) امری سخت و مشکل نیست، تنها نیاز دارد که کار با وبسایت شما ساده باشد و شما به عنوان یک طراح، پتانسیل کاربرانتان را در نظر بگیرید. برای بهینه سازی وبسایت‌تان، ما چند راه ساده را در زیر به شما معرفی خواهیم کرد:

**متوجه کاربران‌تان شوید**

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

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

یک منبع خوب برای خواندن در رابطه با این موضوعات [principles of universal design](http://www.udlcenter.org/aboutudl/whatisudl/3principles) است.

**فکر کردن در رابطه با تجربه کاربری**

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

نکته: تکنولوژی کمک کننده اشاره دارد به دستگاه ها و فناوری هایی که به افراد معلول کمک می‌کند.

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

**یک تغییر ساده**

به عنوان یک تغییر بسیار ساده می توانید به این فکر کنید که چگونه باید از تگ مربوط به کج کردن متن استفاده کرد.

به صورت دیداری، فرقی میان تگ های B و Strong وجود ندارد، این حالت برای تگ های I  و Em نیز صدق می کند. اما برای افرادی که توانایی مانند بینایی را ندارند، این حالت می تواند بسیار متغیر و کلیدی باشد.

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

**طراحی برای افرادی که مشکلات دیداری دارند**

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

- میزان اندازه فونت ها را منعطف کنید. به این صورت که به کاربر اجازه دهید آنطور که راحت است فونت را بزرگ یا کوچک کند. البته شاید بعضی از مرورگرها این قابلیت را به کاربر بدهند، اما اگر وبسایت شما برای اینکار آماده باشد بهتر خواهد بود.
- از ترکیب رنگ های ثابتی مانند قرمز، سبز، آبی و زرد اجتناب کنید. بجای این چرا از رنگ هایی استفاده نمی کنید که نرخ تبادلات وبسایت را همراه با میزان دسترسی پذیری وبسایت افزایش می دهد؟
- از توصیف alt text استفاده کنید. این صفت می تواند هر شکل گرافیکی داخل وبسایت را برای این دسته از افراد توضیح دهد. لازمه اینکار استفاده از متن های درست و درخورد تصاویر است.
- تا جای ممکن از اختصارات استفاده نکنید، حتی اگر آنها بسیار مشهور و مرسوم هستند. به این دلیل که Screen Reader ها اغلب اوقات آنها را درست تلفظ نمی‌کنند. تصور کنید نوشته اید F.B.I اما نرم افزار آن را Fibby تلفظ می‌کند.

**طراحی برای افرادی که مشکلات شنوایی دارند**

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

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

**طراحی برای افرادی که به بیماری صرع حساس به نور مبتلا هستند**

یکی دیگر از مسائلی که حول محور ویدیوها در وبسایت صورت می گیرد استفاده از فانکشن autoplay توسط طراحان وب است. این موضوع می تواند روی افرادی که به بیماری صرع حساس به نور مبتلا هستند تاثیر بگذارد. این افراد اغلبا به افکت های نوری و تصاویر ویدیویی واکنشی مانند تشنج نشان می‌دهند. خوشبختانه برای این مسئله [ابزاری](https://trace.umd.edu/peat) ارائه شده است که طراحان وب می توانند برای در نظر گرفتن این طیف از کاربران از آن استفاده کنند.

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

**طراحی برای افرادی که مشکلات تحرکی دارند**

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

- به لینک های وبسایت دسترسی پیدا کنند.
- بدون استفاده از کیبورد درون وبسایت پیمایش کنند.
- در صفحاتی که طول بسیار زیادی دارند به سادگی بالا و پایین کنند.

البته مشکلات دیگری نیز برای این افراد پیش می آید اما این آیتم ها مهمترین آنها بود.

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

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

**ساختن وبسایتی با گزینه های «پایه»**

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

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

[منبع](https://speckyboy.com/web-accessibility-101/)

چه امتیازی برای این مقاله میدهید؟


خیلی بد

بد

متوسط

خوب

عالی

در انتظار ثبت رای


* * *

5 سال پیش


[رابط\_کاربری](/tag/رابط_کاربری)

[تجربه\_کاربری](/tag/تجربه_کاربری)

[بهبود\_تجربه\_کاربری](/tag/بهبود_تجربه_کاربری)

- [0](#comments_list)
- 0

##### [ارسطو عباسی](/articles/web-accessibility-101)

###### کارشناس تولید و بهینه‌سازی محتوا

دنبال کردن

کارشناس ارشد تولید و بهینه‌سازی محتوا و تکنیکال رایتینگ \- https://arastoo.net

### پست های مشابه

#### [پیچیدگی در طراحی وب ساده](/articles/complexity-simplicity-web-design)

**[ارسطو عباسی](/@arastoo)**

[توسعه وب](/articles?category=web-development)

[0](/articles/complexity-simplicity-web-design#comments)
2

زمان مطالعه: 12 دقیقه


#### [شیوه طراحی آیکون اپلیکیشن‌ها](/articles/how-design-app-icons)

**[ارسطو عباسی](/@arastoo)**

[آموزشی](/articles?category=education)

[0](/articles/how-design-app-icons#comments)
1

زمان مطالعه: 10 دقیقه


#### [چگونه طراحان كدنويسی را ياد بگيرند؟ ترمينال و ويرايشگرهای متن \- قسمت اول](/articles/designers-code-terminal-text-editors-part-1)

**[ژینو عباسی](/@sorryimzhino57)**

[توسعه وب](/articles?category=web-development)

[0](/articles/designers-code-terminal-text-editors-part-1#comments)
3

زمان مطالعه: 18 دقیقه


## دیدگاه و پرسش

**برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنید**
ورود یا ثبت‌نام


در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید


مطالعه با تمرکز بیشتر

[ارسطو عباسی](/@arastoo)

کارشناس تولید و بهینه‌سازی محتوا

دنبال کردن

۵ مقاله اخیر

۵ مقاله اخیر از این قسمت برای شما در دسترس است

[آخرین تخفیف تابستانی راکت!](/articles/summer-promotion)

[پشتیبانی راکت](/@roocketir)

زمان مطالعه: 1 دقیقه

[کنکور را خراب کردم، چیکار کنم؟](/articles/failed-the-exam-what-should-i-do)

[پشتیبانی راکت](/@roocketir)

زمان مطالعه: 11 دقیقه

[زندگی بعد از کنکور \+ یادگیری مهارت‌های پولساز](/articles/life-after-graduation-and-learning-money-making-skills)

[پشتیبانی راکت](/@roocketir)

زمان مطالعه: 12 دقیقه

[شماره سوم راکت‌نامه؛ ماهنامه تخصصی برنامه‌نویسی](/articles/roocket-monthly-third)

[پشتیبانی راکت](/@roocketir)

زمان مطالعه: 39 ثانیه

[۲۰ توزیع‌ کمتر شناخته شده لینوکس](/articles/lesser-known-linux-distros)

[ارسطو عباسی](/@arastoo)

زمان مطالعه: 5 دقیقه

[مشاهده همه مقالات](/articles)

مقالات برگزیده

مقالات برگزیده را از این قسمت میتوانید ببینید

[آخرین تخفیف تابستانی راکت!](/articles/summer-promotion)

[پشتیبانی راکت](/@roocketir)

زمان مطالعه: 1 دقیقه

[مشاهده همه مقالات](/articles)

مطالب مرتبط

شما می‌توانید مطالب مرتبط به این مطلب را اینجا مشاهده کنید

[آموزش html](https://roocket.ir/series/learn-html)

[آموزش php](https://roocket.ir/series/learning-php)

[آموزش css](https://roocket.ir/series/learn-css)

[آموزش وردپرس](https://roocket.ir/skills/wordpress)

[آموزش جاوا اسکریپت](https://roocket.ir/skills/javascript)

[آموزش پایتون](https://roocket.ir/series/learn-python)

[آموزش فلاتر](https://roocket.ir/skills/flutter)

[آموزش react](https://roocket.ir/series/learn-react-js)

[آموزش برنامه نویسی](https://roocket.ir)

[قالب وردپرس رایگان](https://roocket.ir/articles/50-beautiful-and-free-wordpress-themes)

[آموزش mysql](https://roocket.ir/series/learn-mysql)

[آموزش انگولار](https://roocket.ir/series/learn-angular)

[آموزش زبان دارت](https://roocket.ir/series/learn-dart)

### درباره راکت

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

[مشاهده اطلاعات مسیریادگیری](/skills)

### بخش های سایت

- [قوانین و مقررات](/terms)
- [راکت‌نامه\
جدید](https://mag.roocket.ir/)
- [مدرسان راکت](/masters)
- [درباره راکت](/about-us)
- [ارتباط با ما](/contact-us)

### محبوب‌ترین آموزش‌ها

- [آموزش جاوا اسکریپت](/skills/javascript)
- [آموزش لاراول](/skills/laravel)
- [آموزش وردپرس](/skills/wordpress)
- [آموزش react](/skills/react)

### ارتباط  با ما

- ایمیل: [info@roocket.ir](mailto:info@roocket.ir)
- آی دی تلگرام: [@roocket\_support](https://t.me/roocketir)

کليه حقوق محصولات و محتوای اين سایت متعلق به راکت می باشد و هر گونه کپی برداری از محتوا و محصولات
سایت غیر مجاز و بدون رضایت ماست.

آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟

بلهخیر