https://github.com/willfarrell/accessibility
Collection of web design patterns
https://github.com/willfarrell/accessibility
Last synced: 3 months ago
JSON representation
Collection of web design patterns
- Host: GitHub
- URL: https://github.com/willfarrell/accessibility
- Owner: willfarrell
- License: mit
- Created: 2020-09-05T16:18:52.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-03-27T04:14:07.000Z (almost 5 years ago)
- Last Synced: 2025-01-19T13:27:39.228Z (about 1 year ago)
- Size: 31.3 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Accessibility
Collection of web design patterns
## Asistive devices
### Keyboard
- [Mac accessibility shortcuts](https://support.apple.com/en-ca/HT204434)
- Back to top button: `Home` or `Fn` + `Left Arrow`
### Screen Readers
- [JAWS](https://www.freedomscientific.com/Products/software/JAWS/) (Job Access With Speech) for Windows
- [NVDA](https://www.nvaccess.org/about-nvda/) (Non-Visual Desktop Access) for Windows
- [Microsoft Narrator](https://support.microsoft.com/en-us/help/17173/windows-10-hear-text-read-aloud) for Windows
- [VoiceOver](https://www.apple.com/accessibility/mac/vision/) for Mac and iOS
- [TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=en) for Android
- Inconsistencies
- [Punctuation and Typographic Symbols](https://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/)
-
## Colour Theory
- https://blog.datawrapper.de/beautifulcolors
- https://stripe.com/blog/accessible-color-systems
- https://www.vis4.net/blog/2011/12/avoid-equidistant-hsv-colors/
- https://uxdesign.cc/the-importance-of-colorblind-friendly-design-case-study-among-us-dcd042c87b9
- Palette Builder https://tailwind.ink/
- Adobe Color https://color.adobe.com/create/color-accessibility
- (ColorBrewer](https://colorbrewer2.org/#type=diverging&scheme=RdYlBu&n=11) ccolor advice for artography
- [ColorAdd](http://www.coloradd.net/code.asp)
- [Coblis - Color Blindness Simulator](https://www.color-blindness.com/coblis-color-blindness-simulator/)
## Component Design Systems
## Component/Pattern Examples
- Guide: https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/
- Resources: https://a11yresources.webflow.io
- gif: https://css-tricks.com/gifs-and-prefers-reduced-motion/
- auto-site `textarea`: https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
- Hamberger Menu: https://www.impressivewebs.com/accessible-keyboard-friendly-hamburger-menu-slide-out-navigation/
- Form Buttons: https://adamsilver.io/articles/where-to-put-buttons-on-forms/
- Charts: https://blogs.sas.com/content/sascom/2017/02/22/getting-started-sas-graphics-accelerator/
- Slider: https://www.a11ywithlindsey.com/blog/creating-accessible-range-slider-css
- dialog: https://adrianroselli.com/2020/10/dialog-focus-in-screen-readers.html
- Scroll to top: https://ashleemboyer.com/accessible-smooth-scroll-to-top-buttons-with-little-code
- Date Picker:
- List: https://www.webaxe.org/accessible-date-pickers/
- https://github.com/vigetlabs/ca11y
- https://fymmot.github.io/inclusive-dates/
- https://designsystem.gov.scot/components/date-picker/
- https://github.com/duetds/date-picker
- `abbr`: https://alistapart.com/article/hattrick/
- Math Formulas: https://github.com/mathjax/MathJax-src