Accessibility
We want everyone to be able to make a badge and use other people's. HeyBadge aims to meet the Web Content Accessibility Guidelines (WCAG) 2.1, level AA.
What we've done
- Every page works with a keyboard, with a visible focus outline, and has a "skip to content" link where there's a lot to skip.
- Buttons, fields and links have names that screen readers announce, and status messages (like "Saved" or "Sent") are announced as they appear.
- Text and controls meet AA contrast. Orange text only appears on black; on light backgrounds we use a deeper orange.
- The whole site, including this page, is available in English and Arabic, with right-to-left layout for Arabic.
- If your device asks for reduced motion, the badge stops swinging and animations are switched off.
- Text can be zoomed to 200% and the layout works on small phones, sideways too.
Known limits
- The 3D badge is drawn in a canvas. Screen readers can't read a canvas, so the real badge (name, title, company, links and buttons) is kept in the page underneath it and is what assistive technology reads and what keyboard focus moves through. Dragging the badge needs a mouse or touch; flipping it also works with the keyboard (Enter or Space on the badge).
- Badge colours are chosen by each owner's theme. We check theme colours for contrast, but some event themes are bright, and owners choose their own photo and logo.
- Pair your badge reads a PDF you choose. We can't make the event's own PDF accessible, and the result is meant for printing.
- Wallet passes are shown by Apple Wallet and Google Wallet, which have their own accessibility features.
سهولة الوصول
نريد أن يتمكن الجميع من صنع بطاقة واستخدام بطاقات الآخرين. يسعى HeyBadge لاستيفاء إرشادات سهولة الوصول إلى محتوى الويب (WCAG) 2.1، المستوى AA.
ما قمنا به
- تعمل كل صفحة بلوحة المفاتيح مع إطار تركيز واضح، وفيها رابط "انتقل إلى المحتوى" حيث يكثر ما يمكن تخطيه.
- للأزرار والحقول والروابط أسماء تقرؤها برامج قراءة الشاشة، وتُعلن رسائل الحالة (مثل "تم الحفظ" أو "تم الإرسال") عند ظهورها.
- يستوفي النص وعناصر التحكم مستوى التباين AA. لا يظهر النص البرتقالي إلا على الأسود؛ وعلى الخلفيات الفاتحة نستخدم برتقاليًا أغمق.
- الموقع كله، بما في ذلك هذه الصفحة، متاح بالعربية والإنجليزية، مع تخطيط من اليمين إلى اليسار للعربية.
- إذا طلب جهازك تقليل الحركة، تتوقف البطاقة عن التأرجح وتُطفأ الحركات.
- يمكن تكبير النص حتى ٢٠٠٪، ويعمل التخطيط على الهواتف الصغيرة وفي الوضع الأفقي أيضًا.
حدود معروفة
- البطاقة ثلاثية الأبعاد مرسومة داخل لوحة رسم (canvas). لا تستطيع برامج قراءة الشاشة قراءة لوحة الرسم، لذلك تبقى البطاقة الحقيقية (الاسم والمسمى والشركة والروابط والأزرار) في الصفحة تحتها، وهي ما تقرؤه التقنيات المساعدة وما يتنقل بينه التركيز بلوحة المفاتيح. يحتاج سحب البطاقة إلى فأرة أو لمس؛ أما قلبها فيعمل أيضًا بلوحة المفاتيح (Enter أو المسافة على البطاقة).
- ألوان البطاقة يحددها اختيار صاحبها للسمة. نتحقق من تباين ألوان السمات، لكن بعض سمات الفعاليات زاهية، ويختار أصحاب البطاقات صورهم وشعاراتهم.
- اربط بطاقتك يقرأ ملف PDF تختاره. لا يمكننا جعل ملف الفعالية نفسه سهل الوصول، والناتج مخصص للطباعة.
- بطاقات المحفظة تعرضها Apple Wallet وGoogle Wallet، ولكل منهما ميزات سهولة الوصول الخاصة به.