دوره‌ طراحی

طراحی دسترس پذیری و اصول آن

7 مهر, 1401

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

در اینجا چند طرح رایج در مورد اینکه چگونه مشارکت‌هایی که از ابتکارات دسترسی سرچشمه می‌گیرند، و باعث مزیت همه می‌شوند،آورده شده است:

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

بیشتر این اطلاعات از منابع انگشت شماری بدست می آید:

منابع بیشتر برای طراحی دسترس پذیری را می توان در اینجا یافت:

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

رایج ترین مشکل دسترسی، عناصر ناخوانا در طراحی است.

متن و تایپوگرافی مانند دنیایی فراگیر است، که تنها متخصصان دارای چندین دهه تجربه می‌دانند در آن چه خبر است.

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

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

در حاشیه بگویم که:

ملزومات WCAG برای تایپوگرافی در طراحی دسترس پذیری، به چند دلیل برای من کمی عجیب به نظر می رسد:

از دستورالعمل های خود پیروی نمی کنند.
آنها پیشنهاد می کنند فاصله حروف (ردیابی) را تا حد زیادی افزایش دهید، که من این را درک نمی کنم. برای متن اصلی، کاهش فاصله حروف با مقدار بسیار بسیار کمی، مانند ۰.01em ، رایج‌تر است.
برای فاصله پاراگراف ها، فاصله بین پاراگراف ها بیشتر از اندازه قلم به ارتفاع خط مرتبط است. از WCAG 2.0 به ۲.۱، WCAG پیشنهاد خود را برای فاصله پاراگراف، از مبتنی بر ارتفاع خط به مبتنی بر اندازه قلم تغییر داد، که به نظر یک انتخاب عجیب است.
۴. آنها پیشنهاد های جهانی برای تنظیمات تایپ ارائه می کنند، که این مورد را که فونت(قلم) های مختلف برای دستیابی به اندازه مربوطه، فاصله مربوطه و غیره به تنظیمات متفاوتی نیاز دارند، در نظر نمی‌گیرند.

من می‌خواستم مطمئن شوم که دستورالعمل‌های WCAG را برای آگاهی فراخوانی می‌کنم، زیرا بسیاری از آنچه در زیر نوشته‌ام با دستورالعمل‌های WCAG متفاوت است.

بیشتر توصیه های من برای تایپ بر اساس کتاب تایپوگرافی وب، نوشته Richard Rutter است که به نوبه خود بر اساس عناصر سبک تایپوگرافی نوشته Robert Bringhurst است.

اندازه های قلم در طراحی دسترس پذیری

اندازه قلم برای متن اصلی – که به طور ساده می توان آن را به عنوان هر بلوک متن طولانی مانند پاراگراف ها در نظر گرفت – در موبایل، تبلت یا رایانه رومیزی نباید کمتر از px16 باشد.

px16 حداقل آن است. متن اصلی می تواند بزرگتر از px16 باشد.

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

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

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

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

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

حتی در این شرایط، فونت زیر px14 باید محتاطانه وارد شود.

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

کوچک کردن خیلی زیاد متن، خواندن کلمات روی صفحه را دشوار یا غیرممکن می کند.

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

این بدان معناست که رابط کاربری که در تلویزیون دیده می‌شود – مانند رابط‌های دستگاه‌های هوشمند، یا پاراگراف‌های متن در بازی‌های ویدیویی – باید بزرگ‌تر از طراحی مشابه برای یک تلفن یا تبلت به نظر برسد.

طول خطوط

طول خط ایده آل برای نسخه اصلی حدود ۷۰ کاراکتر است.

تعداد خاص از فونتی به فونت دیگر متفاوت است، اما محدوده خوب آن چیزی بین ۵۰ کاراکتر تا ۷۵ کاراکتر است. استفاده از هر جایی در این محدوده بسیار صحیح است.

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

نمونه ای از یک وب سایتی که در عرض کامل طراحی شده، https://en.wikipedia.org/wiki/Main_Page است که از هیچ محدودیتی برای طول خط استفاده نمی کند.

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

به طور کلی، دو راه برای محدود کردن طول خط وجود دارد:

مشخص کردن حداکثر عرض برای متن در طراحی دسترس پذیری

در HTML یک واحد اندازه به نام “ch” وجود دارد. این می تواند برای تعیین اندازه چیزها با توجه به تعداد کاراکترهایی که دارند استفاده شود.

خاصیتی به نام “حداکثر متن” نیز وجود دارد. این خاصیت می تواند برای جلوگیری از بزرگ شدن چیزی بیشتر از یک ابعاد مشخص استفاده شود.

این عناصر را می توان تعریف کرد، به طوری که متن اصلی (که احتمالاً هر چیزی با تگ <p> است) در 70ch محدود شود.

این باعث می‌شود که هر خط از یک پاراگراف بزرگتر از ۷۰ کاراکتر نباشد.

واحدهای “rem” یا “em” را می توان به جای “ch” برای همین امر استفاده کرد.

مشخص کردن اندازه محفظه در طراحی دسترس پذیری

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

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

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

این وضعیت کمی پیچیده تر از تعیین عرض خود متن است، زیرا کارت دارای مواردی مانند لایه داخلی است که بر طول خط تأثیر می گذارد.

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

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

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

چرا طول خطوط طولانی می تواند مشکل ساز باشد

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

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

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

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

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

این مشکلات برای افرادی که به بدخوانی(اختلال در ادراک نوشته ها) مبتلا هستند تشدید می شود که طبق NIH حدود ۲۰ درصد از جمعیت ایالات متحده است.

قرار دادن محدودیت های معقول در طول خط، به کاهش این مشکلات کمک می کند.

ارتفاع خط در طراحی دسترس پذیری

ارتفاع خط، فاصله بین خطوط متن را تعیین می کند و معمولاً به صورت مضرب یا درصدی از اندازه قلم نشان داده می شود.

برای متن اصلی، اعداد ایده آل برای ارتفاع خط معمولاً ۱.۲ تا ۱.۵ برابر اندازه قلم یا ۱۲۰٪ تا ۱۵۰٪ اندازه قلم هستند.

مقادیر معین مورد استفاده، از فونتی به فونت دیگر متفاوت است، اما هر جایی در این محدوده معمولاً مناسب است. این نیز یک تنظیم نسبتاً آسان برای تنظیم در HTML/CSS است، بنابراین تکرار آن در صورت نیاز بسیار ساده است.

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

به عنوان مثال، www.nytimes.com از ۱۵۰ درصد برای ارتفاع خط خود استفاده می کند و www.medium.com با استفاده از ۱۶۰ درصد برای ارتفاع خط، یک گام فراتر از محدوده معمولی پیش می رود. هر دو نمونه بر اساس نقاط شکست دسکتاپ آنها هستند – آنها ممکن است از ارتفاع خطوط مختلف در دستگاه های مختلف استفاده کنند.

اندازه فونت های بزرگتر به ارتفاع خط کوچکتری نیاز دارند

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

برای چیزی مانند عنوان px48 ، ارتفاع خط به اندازه ۱۵۰٪ فضای زیادی ایجاد می کند که در این صورت، هر خط عنوان، جدا از خط بالای آن به نظر می رسد.

در این موارد، ارتفاع خطوط حدود ۸۰٪ تا ۱۲۰٪ مناسب است. عدد خاص مورد استفاده به فونت بستگی دارد.

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

یک عنصر خاص که باید به آن توجه کرد این است که چگونه بالارونده‌ها (مانند قطعات بالای حروف “b” و “h”) با پایین رونده‌ها (مانند قطعات پایین حروف “y” و “p”) در تعامل هستند. به طور معمول، اگر اینها بین خطوط همپوشانی داشته باشند، ارتفاع خط باید افزایش یابد.

چرا ارتفاع کم خط می تواند مشکل ساز باشد

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

علاوه بر این، ارتفاع کم خط می تواند تمرکز بر روی یک خط خاص از متن را دشوار کند. این می تواند باعث شود که خواننده اشتباهاً حروف را از یک خط بالا یا پایین خط متنی ای که می خواهد روی آن تمرکز کند بخواند.

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

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

فاصله‌گذاری پاراگراف در طراحی دسترس پذیری

فاصله پاراگراف، فاصله بین پایین یک پاراگراف تا بالای پاراگراف بعدی است.

مقادیر مناسب برای استفاده به عنوان فاصله بین پاراگراف ها عبارتند از:

نصف ارتفاع خط برای فاصله کمتر
برابر با ارتفاع خط برای فاصله بیشتر
تا ۲۰۰٪ ارتفاع خط برای فاصله بسیار زیاد

در HTML/CSS، فاصله پاراگراف ها معمولاً با ویژگی “margin-bottom”که به پاراگراف ها اختصاص داده شده است (عناصر از تگ <p> استفاده می‌کنند) یا با ترکیبی از ویژگی های “margin-top”(حاشیه بالا) و “margin-bottom”(حاشیه پایین) انجام می شود.

به‌طور پیش‌فرض، اکثر مرورگرها پاراگراف‌ها را به گونه‌ای تنظیم می‌کنند که حاشیه پایین و بالا em1 (که احتمالاً px16 خواهد بود) از قبل به پاراگراف اضافه شده باشد. این به این معنی است که یک شکاف px32 بین پاراگراف ها وجود خواهد داشت که ممکن است بزرگتر از حد ایده آل باشد.

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

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

مثال دیگر هنگام کار در Figma است. Figma از یک تجرد به نام “فاصله‌گذاری پاراگراف” برای کنترل این ویژگی استفاده می کند. خاصیت معادلی برای آن در HTML/CSS وجود ندارد. نسخه واقعی وب احتمالاً به جای « فاصله‌گذاری پاراگراف» Figma از ویژگی‌های حاشیه بالا و پایین استفاده می‌کند.

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

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

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

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

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

تضاد رنگ در طراحی دسترس پذیری

رنگ متن دارای دو عنصر است – رنگ پس زمینه ای که متن روی آن تنظیم شده است و رنگ خود متن.

متن سفید روی پس‌زمینه سفید یا متن سیاه روی پس‌زمینه سیاه، متن را نامرئی و خواندن آن غیرممکن می‌کند.

بنابراین برای این که متن قابل مشاهده و خوانا به نظر برسد، متن روشن باید همیشه روی پس زمینه تیره و متن تیره همیشه باید در پس زمینه روشن تنظیم شود.

به میزان تفاوت بین روشنی یا تاریکی متن و روشنی یا تاریکی پس زمینه «کنتراست یا تضاد رنگ» می گویند.

متن سیاه روی پس‌زمینه سفید یا متن سفید روی پس‌زمینه سیاه، بالاترین سطح کنتراست ممکن است.

ابزارهایی برای اندازه گیری میزان تضاد متن و پس زمینه آن با یکدیگر ایجاد شده است. یکی از محبوب‌ترین ابزارها /https://webaim.org/resources/contrastchecker است و پلاگین Figma که همین کار را انجام میدهد A11y است- بررسی کننده کنتراست رنگ https://www.figma.com/community/plugin/733159460536249875.

برای قابلیت دسترسی AA، متن معمولی مانند پاراگراف ها یا متن اصلی به نرخ کنتراست حداقل ۴.۵:۱ و متن بزرگ مانند سرفصل ها به نرخ کنتراست ۳:۱ نیاز دارد.

نحوه کنترل کنتراست برای طراحی دسترس پذیری

یکی از راه‌های کنترل عمدی کنتراست بین رنگ‌ها، طراحی با استفاده از مدل‌های رنگی HSL (سایه رنگ، شدت رنگ، درخشندگی) یا HSB(سایه رنگ، شدت رنگ، روشنایی) است.

هر دوی این مدل ها دارای یک مقدار روشنی هستند (Lightness برای HSL، یا Brightness برای HSB) که می توان آن را بالا یا پایین کرد تا رنگ روشن تر یا تیره تر شود.

استفاده از HSL یا HSB برای افزایش یا کاهش روشنایی یا درخشندگی رنگ ها می تواند کار ایجاد کنتراست بین عناصر را ساده کند.

بر اساس تجربه ی شخصی، به نظر می‌رسد HSL مدل رایج‌تری از بین این دو گزینه باشد، و به نظر من اجرای HSL توسط Figma راحت‌تر از کار با HSB است.

HSL در Figma اساساً از Lightness به عنوان محور Y و Saturation به عنوان محور X در انتخابگر رنگ استفاده می‌کند که به انتخابگر رنگ قابلیت پیش‌بینی می‌دهد که فکر نمی‌کنم مدل‌های رنگ دیگر این را ارائه دهند.

HSB در Figma دارای اختلاف روشنایی از هر دو محور X و Y انتخابگر رنگ است که به نظر من کار کردن با آن گیج کننده تر است.

فقط به کنترل کننده های کنتراست تکیه نکنید

گاهی اوقات، ابزار ممکن است کافی نباشند.

در برخی موقعیت‌ها، بررسی‌کننده‌های کنتراست نمره قبولی برای متنی را ارائه می‌دهند که واضح است قابل خواندن نیست. برای کسب اطلاعات در مورد اینکه چرا این اتفاق می افتد، به سخنرانی Henrique Gusso از Config Europe 2020 یا مقاله Lisa Charlotte Muth در مورد کنتراست رنگ مراجعه کنید.

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

در حالی که امروزه می توان از مدل جدید استفاده کرد،اما استفاده از آن بسیار گسترده نیست، و هنوز مهم است که بدانیم این ابزارها ممکن است با تغییر، شکست بخورند.

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

چرا تضاد رنگ کم برای طراحی دسترس پذیری می تواند مشکل ساز باشد

اگر کاربران نتوانند محتوای صفحه شما را ببینند، نمی توانند به آن دسترسی داشته باشند.

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

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

با این حال، حتی زمانی که عمداً متن را بی‌تأکید می‌کنید، همچنان متن باید دستورالعمل‌های دسترسی را تایید کند. اگر کاربران نمی توانند متن راهنما برای یک فرم را بخوانند،پس متن راهنما خیلی مفید نیست.

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

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

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

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

همه کاربران از طریق سرفصل ها و عنوان‌های فرعی یک صفحه را مرور می‌کنند.

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

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

استفاده صحیح از سرفصل‌ها و عنوان‌های فرعی برای طراحی دسترس پذیری

سرفصل‌ها، عناوین بالای بخش های یک صفحه هستند. معمولاً چندین سبک عنوان در یک صفحه وجود دارد. آنها اغلب با نام هایی مانند H1، H2، H3 و غیره خوانده می شوند.

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

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

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

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

استفاده صحیح از سرفصل ها چیزی شبیه به این است:

· <H1>
· <H2>
· <H3>
· <H2>
· <H3>
· <H4>
· <H2>

در این مثال از گلوله ها برای نشان دادن نمونه ای تودرتو استفاده می شود. یک H4 در یک H3، یک H3 در یک H2، و یک H2 در داخل H1صفحه وجود دارد. سطوح سرفصل از یک ترتیب قابل پیش بینی پیروی می کنند و هرگز از چیزی مانند H1 به H3 یا H2 به H4 نمی‌پرد.

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

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

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

یک مثال با محتوای واقعی ممکن است به شکل زیر باشد:

<H1> درخواست گواهینامه رانندگی </H1>
<H2> برنامه ملاقات آنلاین </H2>
· <H3> راه های دیگر برای برنامه ریزی ملاقات </H3>
· <H2> الزامات گواهینامه رانندگی </H2>
· <H3> مدارک لازم </H3>
· <H4> نحوه درخواست اسناد گم شده </H4>
· <H2> دریافت گواهینامه رانندگی شما </H2>

برای اطلاعات بیشتر، مراجعه کنید به: https://readabilityguidelines.co.uk/content-design/headings-titles/

از زبان ساده و واضح برای طراحی دسترس پذیری استفاده کنید

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

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

برای اطمینان از اینکه ایده های شما تا حد امکان به طور مؤثر منتقل می شود، چند دستورالعمل استاندارد وجود دارد که باید پیروی کنید:

پاراگراف ها نباید بیشتر از ۲ یا ۳ جمله باشند
ایده های بزرگ را به قطعات جداگانه، کوچکتر و قابل هضم تقسیم کنید
از ساده ترین و رایج ترین کلمات ممکن استفاده کنید

هنگام نوشتن هر چیزی، خوب است به این واقعیت از https://readabilityguidelines.co.uk/clear-language/low-literacy-users/ فکر کنید.

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

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

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

برای اطلاعات بیشتر، مراجعه کنید به: https://readabilityguidelines.co.uk/clear-language/

از متن جایگزین، زیرنویس و رونوشت استفاده کنید

هنگام نمایش تصاویر، صدا یا ویدیو، همیشه یک روش جایگزین برای ارائه همان اطلاعات برای افرادی که نمی توانند به تصویر/صوت/ویدئو دسترسی داشته باشند ارائه دهید.

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

چیزهایی مانند رونوشت همچنین به کاربران اجازه می دهد تا جستجوهای دقیقی را در مرورگر خود از طریق کلیدهای میانبر مانند cmd+F یاctrl+F برای یافتن اطلاعات خاصی انجام دهند.

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

نوشتن متن جایگزین

سوال رایجی که پس از یادگیری در مورد متن جایگزین پرسیده می شود این است که “چه چیزی متن جایگزین را خوب می کند؟”

ارائه Haben Girma را در Axe-Con 2021 مشاهده کنید تا سخنان فردی را بشنوید که برای تفسیر وب به متن جایگزین و رونوشت‌ها متکی است و در مورد انواع توصیفاتی که دوست دارند در متن جایگزین داشته باشند صحبت کند.

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

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

طرح ها را با کاربرانی از همه پیش‌زمینه ها آزمایش کنید

آزمایش طرح‌ها برای همه انواع کاربران، نکته اصلی از کتاب ساختمان برای همه نوشته Annie Jean-Baptiste است.

در هر طراحی، ما فرضیاتی را می‌سازیم. آزمایش طرح ها با کاربران راهی برای یادگیری این است که کدام فرضیات اشتباه هستند.

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

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

نیازی نیست که این تمرکز هر پروژه تحقیقاتی باشد – می تواند فقط یک یا دو نفر از یک مطالعه ۵ تا ۷ نفره باشد – اما حتی آن مقدار کم تلاش، برای تنوع در جذب شرکت کنندگان می تواند تأثیر زیادی در بهبود طرح ها برای همه کاربران داشته باشد.

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

منبع: https://uxplanet.org

آکادمی آژانس طراحی دایره

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