Accessibility/Guidelines: Difference between revisions

← Older edit

Accessibility/Guidelines (view source)

Revision as of 17:11, 18 November 2025

4,856 bytes added , 18 November

updated a link from Enhanced Color Contrast SC on WCAG 2.1 to 2.2

Ayeddi

20

edits

@@ Line 30: / Line 30: @@
 Applies to markup languages and native user interfaces.
-* Does the text (color) have enough '''contrast''' to the background so it conforms to [https://www.w3.org/TR/WCAG21/#contrast-enhanced WCAG 2.1 standards]? For example, normal text must have a contrast ratio of 4.5:1 with its background to be valid.
+* Does the text (color) have enough '''contrast''' to the background so it conforms to [https://www.w3.org/TR/WCAG22/#contrast-enhanced WCAG 2.2 standards]? For example, normal text must have a contrast ratio of 4.5:1 with its background to be valid.
 * Is the text '''zoomable''' and/or flow in the interface as expected?
 * Does text respect Bold text or Large Text, and other text-related accessibility settings?
@@ Line 49: / Line 49: @@
 == Testing and Tools ==
-* [https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector Accessibility inspector in the Developer Tools toolbox]
+=== Web Content and Browser ===
-=== High Contrast Mode ===
+* [https://hacks.mozilla.org/2019/10/auditing-for-accessibility-problems-with-firefox-developer-tools/ Introduction to the auditing features of the accessibility inspector]
+* Video on how to [https://www.youtube.com/watch?v=0FiQZnkKglk test keyboard accessibility]
+* [https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector Accessibility inspector in the Firefox Developer Tools toolbox]
+* [https://developer.apple.com/library/archive/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html Accessibility Inspector on macOS]
+* [https://www.youtube.com/watch?v=0FiQZnkKglk Test keyboard accessibility]
+=== Mobile ===
+* [https://www.deque.com/blog/intro-accessibility-inspector-tool-ios-native-apps/ Introduction to Accessibility Inspector for iOS in Xcode] on the Deque blog
+* [https://support.google.com/accessibility/android/answer/6376570?hl=en Get started with Accessibility Scanner for Android] on Android Accessibility Help
+=== Color Contrast and Color Blindness ===
+Preliminary documentation [https://docs.google.com/document/d/1El3XJiAdA5gFcG7H9iI1dNmLbht0hXfi_oKBZPWx3t0/edit?usp=sharing available here]
+High Contrast Mode is a solution implemented in operating systems and applications like Firefox. To enable it when testing:
 * Windows: Settings > Ease of Access > High Contrast Mode
@@ Line 57: / Line 72: @@
 * Linux: Accessibility menu > High contrast
 * Firefox: Language & Appearance > Colors > (menulist) Always (Note: for this configuration, you should not have any OS-level contrast preference enabled.)
+Video guide to [https://www.youtube.com/watch?v=eBefjaWud-M&t=388s testing color contrast and simulating color blindness].
+High contrast design guide for Firefox [[Accessibility/Design_Guide|available here]].
 === Screen Readers ===
@@ Line 63: / Line 82: @@
 * NVDA for Windows: https://www.nvaccess.org/download/
 * VoiceOver for macOS: https://support.apple.com/guide/voiceover/welcome/mac
+* TalkBack for Android: https://support.google.com/accessibility/android/answer/6283677?hl=en
+* VoiceOver for iOS: https://support.apple.com/guide/iphone/turn-on-and-practice-voiceover-iph3e2e415f/ios
+== Resources ==
+Here are some resources that you might find useful when working towards meeting the above requirements. Some broad and general material is provided here with more specific categories below:
+* [https://www.w3.org/WAI/business-case/ The Business Case for Digital Accessibility]
+* [https://www.w3.org/WAI/perspective-videos/ W3C Web Accessibility Perspectives Videos]
+* [https://www.youtube.com/watch?v=uE543v8kj50 Inclusive Design: Unlearning to Include and Innovate]: A talk given by Jutta Treviranus as part of the Mozilla monthly speaker series which, while somewhat heavy, provides valuable insight into the importance of inclusive design and accessibility beyond the typical understanding of why we should care.
+* [https://webaim.org/articles/ WebAIM's articles] are a good place to get an introduction to web accessibility (and accessibility in general)
+* [https://www.penguinrandomhouse.com/books/561049/what-can-a-body-do-by-sara-hendren/ Book: What Can a Body Do? By Sara Hendren]
+* Video of presentations from the [https://www.youtube.com/playlist?list=PLvsKqlNNP3R-Y274Vw7435FOSXLbFMXHQ Monki Gras 2019 conference on Accessibility]
+* https://www.bbc.co.uk/accessibility/
+* https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps
+=== Mozilla Internal Only ===
+* [https://mozilla.hosted.panopto.com/Panopto/Pages/Sessions/List.aspx#folderID=%22d0a3f26d-a309-45a2-967e-b25f011d50ac%22 Accessibility 101 series of Lightning Talks playlist] (Mozilla internal only) by Anna Yeddi and Kim Bryant
+* [https://drive.google.com/u/0/open?id=1sQHupBsqSxnCEGFWEIz0NMyxnUBMxPhA UX training deck] (Mozilla internal only) by Billy Gregory of Paciello Group
+* Asa's [https://mozilla.zoom.us/rec/play/65R_I-v8qG03Hoac4wSDC6csW43vKf2s0yEarqYInh21B3QLMAGjYeMQM-BmpmwOdTGZzCZTRcwNPwc1?autoplay=true accessibility basics] presentation (Mozilla internal only)
+* Jamie and Morgan's presentation on Accessibility Reviews at [https://docs.google.com/presentation/d/1H_tCIcjwyUANoyYoODVmN-ZUya1EQNcaqCR4P_MPeGw/edit#slide=id.gcf47d5f7c4_0_9 Firefox Weekly All Hands on April 15, 2021] ([https://mozilla.hosted.panopto.com/Panopto/Pages/Viewer.aspx?id=ee092037-1a65-43af-ab19-acf700f3fefa&start=2262.295 recording beginning around 38 minutes])
+* Udemy: [https://mozilla.udemy.com/course/accessibility_ux/ Introduction to UX Design for Accessibility and WCAG 2.0] - A concise guide to meeting WCAG standards from a UX perspective
+* Udemy: [https://mozilla.udemy.com/course/creating-accessible-websites/ Creating Accessible Websites] - Achieve WCAG compliance by learning accessibility testing, WAI-ARIA, and website optimization for screen readers
+* Udemy: [https://mozilla.udemy.com/course/web-content-accessibility-guidelines-wcag-21-simplified/ WCAG 2.1 / 2.2 Simplified With Examples] - Improve your web accessibility knowledge by learning WCAG with practical examples
+=== Web and Markup languages ===
+* [https://developer.mozilla.org/en-US/docs/Learn/Accessibility Learning accessibility on MDN]: Use this to jump to many webe accessibility topics and guides
+* [https://hacks.mozilla.org/2019/10/auditing-for-accessibility-problems-with-firefox-developer-tools/ Introduction to the auditing features of the accessibility inspector], also available as a video series:
+** [https://www.youtube.com/watch?v=7mqqgIxX_NU Understanding website accessibility]
+** [https://www.youtube.com/watch?v=0FiQZnkKglk Test keyboard accessibility]
+** [https://www.youtube.com/watch?v=eBefjaWud-M&t=388s Testing color contrast and simulating color blindness]
+** [https://www.youtube.com/watch?v=YhlAVlfH0rQ Test for text label issues]
+* [https://dequeuniversity.com/curriculum/packages/web Dequeue self-guided course on web accessibility]
+* [https://www.edx.org/course/web-accessibility-introduction Edx online course on web accessibility]
+* [https://polypane.app/blog/forced-colors-explained-a-practical-guide Forced colors explained: A practical guide]
+=== Mobile ===
+==== Android ====
+* [https://developer.android.com/guide/topics/ui/accessibility/apps Make apps more accessible] on Android Developers
+* [https://developer.android.com/guide/topics/ui/accessibility/principles Prinicples for improving app accessibility] on Android Developers
+* [https://developer.android.com/guide/topics/ui/accessibility/testing Test your app's accessibility] on Android Developers
+==== iOS ====
+* [https://developer.apple.com/accessibility/ios/ Introduction to accessibility on iOS] on Apple Developer
+* [https://developer.apple.com/videos/frameworks/accessibility/ WWDC session videos]
+* [https://developer.apple.com/documentation/uikit/accessibility/ UIKit accessibility reference]
-== Resources ==
-Here are some resources that you might find useful when working towards meeting the above requirements.
+=== Content Accessibility ===
-* For markup languages such as HTML
+* [https://web.archive.org/web/20250926225146/https://www.plainlanguage.gov/guidelines/ PlainLanguage.gov site] ([https://github.com/GSA/plainlanguage.gov/tree/main/_pages/guidelines GitHub repository]) provides a valuable tool for making language across the web easier to understand and more accessible for all.
-** [https://developer.mozilla.org/en-US/docs/Learn/Accessibility The front page of learning accessibility on MDN]. Use this to jump to the topic you need more information on.
-** [https://hacks.mozilla.org/2019/10/auditing-for-accessibility-problems-with-firefox-developer-tools/ Introduction to the auditing features of the accessibility inspector], also available as a video series:
-*** [https://www.youtube.com/watch?v=7mqqgIxX_NU Understanding website accessibility]
-*** [https://www.youtube.com/watch?v=0FiQZnkKglk Test keyboard accessibility]
-*** [https://www.youtube.com/watch?v=eBefjaWud-M&t=388s Testing color contrast and simulating color blindness]
-*** [https://www.youtube.com/watch?v=YhlAVlfH0rQ Test for text label issues]
-* For Android
-** [https://developer.android.com/guide/topics/ui/accessibility/apps Make apps more accessible] on Android Developers.
-** [https://developer.android.com/guide/topics/ui/accessibility/principles Prinicples for improving app accessibility] on Android Developers.
-** [https://developer.android.com/guide/topics/ui/accessibility/testing Test your app's accessibility] on Android Developers.
-* For iOS
-** [https://developer.apple.com/accessibility/ios/ Introduction to accessibility on iOS] on Apple Developer.
-** [https://developer.apple.com/videos/frameworks/accessibility/ WWDC session videos].
-** [https://developer.apple.com/documentation/uikit/accessibility/ UIKit accessibility reference].
-** [https://www.deque.com/blog/intro-accessibility-inspector-tool-ios-native-apps/ Introduction to Accessibility Inspector for iOS in Xcode] on the Deque blog.