یاد بگیرید چگونه نمودارها و گراف‌های قابل دسترسی طراحی کنید که برای کاربران در سراسر جهان، صرف نظر از توانایی‌ها یا پیشینه‌شان، فراگیر و قابل درک باشند.
مصورسازی داده: ایجاد نمودارها و گراف‌های قابل دسترس برای مخاطبان جهانی
مصورسازی داده ابزاری قدرتمند برای انتقال اطلاعات است، اما اثربخشی آن به دسترس‌پذیری‌اش بستگی دارد. اگر نمودارها و گراف‌ها با در نظر گرفتن دسترس‌پذیری طراحی نشوند، بخش قابل توجهی از مخاطبان جهانی - از جمله افراد دارای معلولیت، موانع زبانی یا سطوح مختلف تخصص فنی - ممکن است نادیده گرفته شوند. این مقاله راهنمای جامعی برای ایجاد مصورسازی‌های داده قابل دسترس ارائه می‌دهد که برای همه فراگیر و قابل درک باشند.
درک اهمیت مصورسازی داده قابل دسترس
دسترس‌پذیری در مصورسازی داده فراتر از انطباق صرف با الزامات قانونی مانند WCAG (راهنمای دسترس‌پذیری محتوای وب) یا بخش 508 است. این موضوع به معنای ایجاد تجربه کاربری بهتر برای همه است. نمودارها و گراف‌های قابل دسترس:
- قابل استفاده برای افراد دارای معلولیت: کاربران صفحه‌خوان، افراد کم‌بینا یا کوررنگ و افراد دارای اختلالات حرکتی برای درک داده‌ها به طراحی قابل دسترس متکی هستند.
- درک آسان‌تر برای همه: برچسب‌های واضح، کنتراست کافی و داده‌های منظم، درک مطلب را برای همه کاربران بهبود می‌بخشد.
- مؤثرتر برای ارتباطات بین‌فرهنگی: پرهیز از نمادهای خاص فرهنگی و استفاده از زبان واضح و مختصر، مصورسازی‌ها را در فرهنگ‌های مختلف قابل درک‌تر می‌کند.
- بهتر برای کاربران موبایل: اصول طراحی قابل دسترس اغلب به تجربیات بهتر در موبایل منجر می‌شود و تضمین می‌کند که مصورسازی‌ها در صفحه‌های کوچک‌تر قابل مشاهده و استفاده هستند.
- مفید برای سئو (بهینه‌سازی برای موتورهای جستجو): ارائه متن جایگزین برای تصاویر و ساختاردهی منطقی محتوا، رتبه‌بندی موتورهای جستجو را بهبود می‌بخشد و دیده‌شدن و دسترسی را افزایش می‌دهد.
اصول کلیدی مصورسازی داده قابل دسترس
ایجاد نمودارها و گراف‌های قابل دسترس نیازمند توجه دقیق به چندین اصل کلیدی است:
۱. متن جایگزین (Alt Text)
متن جایگزین، توصیف مختصری از نمودار یا گراف است که توسط صفحه‌خوان‌ها با صدای بلند خوانده می‌شود. این متن به کاربران دارای اختلالات بینایی امکان می‌دهد تا اطلاعات ارائه‌شده را درک کنند. هنگام نوشتن متن جایگزین، موارد زیر را در نظر بگیرید:
- توصیفی باشید: برداشت اصلی از نمودار یا گراف را خلاصه کنید. داده‌ها چه داستانی را بیان می‌کنند؟
- مختصر باشید: توضیحات را کوتاه و دقیق نگه دارید، در حالت ایده‌آل کمتر از ۱۵۰ کاراکتر.
- زمینه را شامل کنید: زمینه‌ای درباره داده‌های مصورسازی‌شده، مانند منبع و دوره زمانی، ارائه دهید.
- پیچیدگی مصورسازی را در نظر بگیرید: برای نمودارهای پیچیده، ممکن است لازم باشد توضیحات طولانی‌تر و دقیق‌تری یا پیوندی به یک جدول داده ارائه دهید.
مثال:
غیرقابل دسترس: <img src="sales.png" alt="نمودار">
قابل دسترس: <img src="sales.png" alt="نمودار خطی نشان‌دهنده افزایش ۱۵ درصدی فروش جهانی در سه‌ماهه چهارم ۲۰۲۳ در مقایسه با سه‌ماهه سوم ۲۰۲۳.">
۲. رنگ و کنتراست
رنگ نباید تنها راه انتقال اطلاعات باشد. افراد مبتلا به کوررنگی یا کم‌بینایی ممکن است نتوانند بین رنگ‌های خاصی تمایز قائل شوند. از کنتراست رنگ کافی بین عناصر داده و پس‌زمینه اطمینان حاصل کنید.
- از یک بررسی‌کننده کنتراست رنگ استفاده کنید: ابزارهایی مانند بررسی‌کننده کنتراست رنگ WebAIM (https://webaim.org/resources/contrastchecker/) می‌توانند به شما کمک کنند تا تشخیص دهید آیا ترکیب رنگ‌های شما با الزامات WCAG مطابقت دارد یا خیر.
- از اتکای صرف به رنگ خودداری کنید: علاوه بر رنگ، از الگوها، برچسب‌ها و بافت‌ها برای متمایز کردن عناصر داده استفاده کنید.
- کوررنگی را در نظر بگیرید: از پالت‌های رنگی استفاده کنید که برای افراد با انواع مختلف کوررنگی قابل دسترس باشند. ابزارهای زیادی برای شبیه‌سازی ظاهر مصورسازی شما برای افراد با کمبودهای مختلف دید رنگی موجود است.
- نشانه‌های بصری جایگزین ارائه دهید: از حاشیه‌ها، شکل‌ها و اندازه‌ها برای تمایز بین نقاط داده استفاده کنید.
مثال: به جای استفاده تنها از رنگ‌های مختلف برای نمایش دسته‌بندی محصولات در یک نمودار میله‌ای، از الگوهای مختلف (مانند توپر، راه‌راه، نقطه‌چین) و برچسب روی هر میله استفاده کنید.
۳. برچسب‌ها و متن
برچسب‌های واضح و مختصر برای درک مصورسازی‌های داده ضروری هستند. اطمینان حاصل کنید که همه محورها، نقاط داده و راهنماها به درستی برچسب‌گذاری شده‌اند. از اندازه فونتی استفاده کنید که به اندازه کافی بزرگ باشد تا به راحتی خوانده شود.
- از زبان واضح و مختصر استفاده کنید: از اصطلاحات تخصصی و فنی که ممکن است برای همه کاربران قابل درک نباشد، خودداری کنید.
- اندازه فونت کافی ارائه دهید: از اندازه فونت حداقل ۱۲ پوینت برای متن اصلی و ۱۴ پوینت برای عناوین استفاده کنید.
- فاصله‌گذاری کافی را تضمین کنید: از شلوغی بیش از حد برچسب‌ها و نقاط داده خودداری کنید.
- از عناوین توصیفی استفاده کنید: عنوانی ارائه دهید که محتوای نمودار یا گراف را به دقت توصیف کند.
مثال: به جای استفاده از برچسب‌های مخفف مانند «س‌م۱» برای سه‌ماهه اول، از عبارت کامل «سه‌ماهه ۱» استفاده کنید.
۴. ساختار و سازماندهی داده‌ها
نحوه ساختاردهی و سازماندهی داده‌ها می‌تواند تأثیر قابل توجهی بر دسترس‌پذیری آن داشته باشد. داده‌ها را به صورت منطقی مرتب کنید و از انواع نمودار مناسب برای نمایش مؤثر اطلاعات استفاده کنید.
- از انواع نمودار مناسب استفاده کنید: نوع نموداری را انتخاب کنید که به بهترین شکل داده‌ها و پیامی را که می‌خواهید منتقل کنید، نشان دهد. به عنوان مثال، از نمودارهای میله‌ای برای مقایسه داده‌های دسته‌بندی شده، نمودارهای خطی برای نشان دادن روندها در طول زمان، و نمودارهای دایره‌ای برای نشان دادن نسبت‌ها استفاده کنید.
- داده‌ها را به صورت منطقی مرتب کنید: داده‌ها را به ترتیب معناداری مرتب کنید، مانند ترتیب صعودی یا نزولی، یا بر اساس دسته‌بندی.
- داده‌های مرتبط را گروه‌بندی کنید: نقاط داده مرتبط را با هم گروه‌بندی کنید تا درک روابط بین آن‌ها آسان‌تر شود.
- از شلوغی پرهیز کنید: عناصر غیرضروری که می‌توانند حواس را از داده‌ها پرت کنند، مانند خطوط شبکه یا تزئینات بیش از حد، را حذف کنید.
مثال: به جای استفاده از یک نمودار سه‌بعدی پیچیده برای نمایش داده‌های ساده، از یک نمودار میله‌ای یا خطی دوبعدی استفاده کنید.
۵. تعامل‌پذیری و ناوبری با صفحه‌کلید
اگر مصورسازی داده شما شامل عناصر تعاملی مانند راهنمای ابزار (tooltip) یا ویژگی‌های کاوش عمیق (drill-down) است، اطمینان حاصل کنید که برای کاربران صفحه‌کلید و کاربران صفحه‌خوان قابل دسترس هستند.
- ناوبری با صفحه‌کلید را فراهم کنید: اطمینان حاصل کنید که همه عناصر تعاملی با استفاده از صفحه‌کلید قابل دسترسی و فعال‌سازی هستند.
- از ویژگی‌های ARIA استفاده کنید: از ویژگی‌های ARIA (برنامه‌های اینترنتی غنی قابل دسترس) برای ارائه اطلاعات اضافی به صفحه‌خوان‌ها در مورد هدف و وضعیت عناصر تعاملی استفاده کنید.
- نشانگرهای فوکوس واضح ارائه دهید: هنگام ناوبری با صفحه‌کلید، مشخص کنید کدام عنصر در فوکوس قرار دارد.
- اطمینان حاصل کنید که راهنمای ابزارها قابل دسترس هستند: متن جایگزین برای راهنمای ابزارها ارائه دهید یا اطلاعات را در قالبی جداگانه و قابل دسترس در دسترس قرار دهید.
مثال: اگر یک نمودار دارای راهنمای ابزارهایی است که با قرار گرفتن ماوس روی یک نقطه داده، اطلاعات دقیقی را نمایش می‌دهند، اطمینان حاصل کنید که همان اطلاعات هنگام فوکوس روی نقطه داده با استفاده از صفحه‌کلید نیز در دسترس باشد.
۶. جداول به عنوان جایگزین
برای کاربرانی که به صفحه‌خوان‌ها متکی هستند یا ترجیح می‌دهند داده‌ها را در قالب جدولی تجزیه و تحلیل کنند، ارائه یک جدول داده به عنوان جایگزین به شدت توصیه می‌شود. این کار به آن‌ها امکان می‌دهد به داده‌های خام دسترسی داشته باشند و آن را به روش خودشان کاوش کنند.
- پیوندی به جدول داده ارائه دهید: پیوندی به یک جدول داده در زیر نمودار یا گراف قرار دهید.
- از HTML معنایی استفاده کنید: از عناصر HTML معنایی مانند
<table>،<thead>،<tbody>،<th>و<td>برای ساختاردهی جدول استفاده کنید. - سرفصل‌های ستون ارائه دهید: از سرفصل‌های ستون برای شناسایی واضح داده‌های هر ستون استفاده کنید.
- از عنوان (caption) استفاده کنید: یک عنوان برای جدول ارائه دهید که محتوای آن را توصیف کند.
مثال:
<table>
<caption>فروش جهانی بر اساس منطقه - سه‌ماهه چهارم ۲۰۲۳</caption>
<thead>
<tr>
<th scope="col">منطقه</th>
<th scope="col">فروش (دلار آمریکا)</th>
</tr>
</thead>
<tbody>
<tr>
<td>آمریکای شمالی</td>
<td>1,200,000</td>
</tr>
<tr>
<td>اروپا</td>
<td>900,000</td>
</tr>
<tr>
<td>آسیا و اقیانوسیه</td>
<td>750,000</td>
</tr>
</tbody>
</table>
ابزارها و فناوری‌ها برای مصورسازی داده قابل دسترس
چندین ابزار و فناوری می‌توانند به شما در ایجاد مصورسازی‌های داده قابل دسترس کمک کنند:
- بررسی‌کننده‌های دسترس‌پذیری: ابزارهایی مانند WAVE (ابزار ارزیابی دسترس‌پذیری وب) می‌توانند به شما در شناسایی مشکلات دسترس‌پذیری در مصورسازی‌هایتان کمک کنند.
- بررسی‌کننده‌های کنتراست رنگ: ابزارهایی مانند بررسی‌کننده کنتراست رنگ WebAIM می‌توانند به شما در تضمین کنتراست رنگ کافی کمک کنند.
- صفحه‌خوان‌ها: آزمایش مصورسازی‌های خود با صفحه‌خوان‌هایی مانند NVDA یا JAWS برای اطمینان از دسترس‌پذیری ضروری است.
- کتابخانه‌های مصورسازی داده: برخی از کتابخانه‌های مصورسازی داده، مانند D3.js و Chart.js، ویژگی‌های دسترس‌پذیری داخلی ارائه می‌دهند. مستندات آن‌ها را برای گزینه‌های دسترس‌پذیری بررسی کنید.
- افزونه‌های اختصاصی دسترس‌پذیری: استفاده از افزونه‌ها یا اکستنشن‌های متناسب با دسترس‌پذیری برای مصورسازی داده در چارچوب‌های خاص (مانند React، Angular، Vue.js) را بررسی کنید.
نمونه‌هایی از مصورسازی‌های داده قابل دسترس
مثال ۱: نمودار میله‌ای قابل دسترس (جمعیت جهانی بر اساس قاره)
توضیحات: یک نمودار میله‌ای که جمعیت جهانی را بر اساس قاره در سال ۲۰۲۳ نشان می‌دهد. این نمودار از رنگ‌های با کنتراست بالا، برچسب‌های واضح و متن جایگزین استفاده می‌کند.
ویژگی‌های دسترس‌پذیری:
- متن جایگزین: "نمودار میله‌ای نشان‌دهنده جمعیت جهانی بر اساس قاره در سال ۲۰۲۳. آسیا با ۴.۷ میلیارد نفر بیشترین جمعیت را دارد و پس از آن آفریقا با ۱.۴ میلیارد، اروپا با ۷۵۰ میلیون، آمریکای شمالی با ۶۰۰ میلیون، آمریکای جنوبی با ۴۴۰ میلیون و اقیانوسیه با ۴۵ میلیون نفر قرار دارند."
- کنتراست رنگ: از رنگ‌های با کنتراست بالا برای اطمینان از اینکه میله‌ها به راحتی از پس‌زمینه قابل تشخیص هستند، استفاده شده است.
- برچسب‌ها: هر میله با نام قاره و تعداد جمعیت برچسب‌گذاری شده است.
- جدول داده: پیوندی به یک جدول داده در زیر نمودار ارائه شده است.
مثال ۲: نمودار خطی قابل دسترس (روندهای دمای جهانی)
توضیحات: یک نمودار خطی که روندهای میانگین دمای جهانی را از سال ۱۸۸۰ تا ۲۰۲۳ نشان می‌دهد. این نمودار از سبک‌های خطی مختلف برای تمایز بین مناطق مختلف، برچسب‌های واضح و متن جایگزین استفاده می‌کند.
ویژگی‌های دسترس‌پذیری:
- متن جایگزین: "نمودار خطی نشان‌دهنده روندهای میانگین دمای جهانی از سال ۱۸۸۰ تا ۲۰۲۳. این نمودار افزایش مداوم دمای جهانی را در طول قرن گذشته نشان می‌دهد، با افزایشی به ویژه شدید در دهه‌های اخیر."
- سبک‌های خط: از سبک‌های خطی مختلف (مانند توپر، خط‌چین، نقطه‌چین) برای تمایز بین مناطق مختلف استفاده شده است.
- برچسب‌ها: محورها با سال و دما برچسب‌گذاری شده‌اند.
- جدول داده: پیوندی به یک جدول داده در زیر نمودار ارائه شده است.
بهترین شیوه‌ها برای ایجاد مصورسازی‌های داده قابل دسترس برای مخاطبان جهانی
علاوه بر اصول کلیدی و مثال‌های ذکر شده در بالا، هنگام ایجاد مصورسازی‌های داده قابل دسترس برای مخاطبان جهانی، بهترین شیوه‌های زیر را در نظر بگیرید:
- مخاطبان خود را بشناسید: پیشینه‌های متنوع، توانایی‌ها و تخصص فنی مخاطبان هدف خود را در نظر بگیرید.
- از زبان فراگیر استفاده کنید: از اصطلاحات تخصصی، عامیانه و ارجاعات فرهنگی خاص که ممکن است برای همه کاربران قابل درک نباشد، خودداری کنید.
- زمینه ارائه دهید: زمینه کافی در مورد داده‌های مصورسازی‌شده، از جمله منبع، دوره زمانی و روش‌شناسی، ارائه دهید.
- مصورسازی‌های خود را با کاربران آزمایش کنید: آزمایش کاربری را با افراد دارای معلولیت و کاربران از پیشینه‌های فرهنگی مختلف انجام دهید تا اطمینان حاصل کنید که مصورسازی‌های شما قابل دسترس و قابل درک هستند.
- تلاش‌های خود در زمینه دسترس‌پذیری را مستند کنید: مراحلی را که برای قابل دسترس کردن مصورسازی‌های خود برداشته‌اید، از جمله ابزارها و تکنیک‌هایی که استفاده کرده‌اید، مستند کنید.
- به‌روز بمانید: استانداردها و بهترین شیوه‌های دسترس‌پذیری دائماً در حال تحول هستند. از آخرین دستورالعمل‌ها و توصیه‌ها مطلع باشید.
- ترجمه را در نظر بگیرید: اگر قصد دارید مصورسازی‌های خود را برای مخاطبان جهانی با زبان‌های اصلی مختلف توزیع کنید، برای ترجمه برچسب‌ها، عناوین و متن جایگزین برنامه‌ریزی کنید.
- به حساسیت‌های فرهنگی توجه کنید: هنگام انتخاب رنگ‌ها، نمادها و استعاره‌های بصری، به هنجارها و حساسیت‌های فرهنگی توجه داشته باشید. آنچه ممکن است در یک فرهنگ قابل قبول باشد، ممکن است در فرهنگ دیگری توهین‌آمیز باشد.
- مناطق زمانی و فرمت‌های تاریخ: هنگام مصورسازی داده‌های مربوط به زمان، حتماً منطقه زمانی را به وضوح مشخص کنید. هنگام کار با تاریخ‌ها، در فرمت‌های تاریخ (مانند YYYY-MM-DD, MM/DD/YYYY) انعطاف‌پذیری ارائه دهید تا با ترجیحات منطقه‌ای مختلف سازگار باشد.
- ملاحظات ارزی: اگر داده‌های شما شامل ارقام مالی است، واحد پول را مشخص کنید. در صورت امکان، گزینه‌های تبدیل را ارائه دهید تا کاربران بتوانند داده‌ها را با واحد پول محلی خود مشاهده کنند.
نتیجه‌گیری
ایجاد نمودارها و گراف‌های قابل دسترس برای اطمینان از اینکه داده‌ها برای همه قابل درک و استفاده هستند، ضروری است. با پیروی از اصول و بهترین شیوه‌های ذکر شده در این مقاله، می‌توانید مصورسازی‌های داده‌ای ایجاد کنید که فراگیر، مؤثر و برای مخاطبان جهانی قابل دسترس باشند. به یاد داشته باشید که دسترس‌پذیری فقط یک مسئله انطباق نیست؛ بلکه فرصتی برای بهبود تجربه کاربری برای همه است.