16
edits
Devinreams (talk | contribs) (reorganize, bold for highlights, add links to guidelines and checklists) |
Devinreams (talk | contribs) (reorganize resources and publish more materials) |
||
Line 49: | Line 49: | ||
== Testing and Tools == | == Testing and Tools == | ||
=== Web Content and Browser === | |||
=== | * [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 | |||
=== Color Contrast and Color Blindness === | |||
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 | * Windows: Settings > Ease of Access > High Contrast Mode | ||
Line 57: | Line 69: | ||
* Linux: Accessibility menu > High contrast | * 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.) | * 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]. | |||
=== Screen Readers === | === Screen Readers === | ||
Line 67: | Line 81: | ||
== Resources == | == Resources == | ||
Here are some resources that you might find useful when working towards meeting the above requirements. | 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://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] | |||
=== 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] | |||
** [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] | |||
edits