Difference between revisions of "Accessibility 101"

From perpendicular angel knowledgebase
Jump to navigation Jump to search
(Created page with "These are the things you need to know to get started. * [https://www.marcozehe.de/2015/12/14/the-web-accessibility-basics/?utm_content=buffer40247&utm_medium=social&utm_sour...")
 
(Replaced content with "This information has been moved to [https://accessibility.perpendicularangel.com/basic-elements-of-accessibility/accessibility-101/ Accessibility 101] on Perpendicular A...")
Tag: Replaced
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
These are the things you need to know to get started.  
This information has been moved to [https://accessibility.perpendicularangel.com/basic-elements-of-accessibility/accessibility-101/ Accessibility 101] on [[Perpendicular Angel]]


* [https://www.marcozehe.de/2015/12/14/the-web-accessibility-basics/?utm_content=buffer40247&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer The Web Accessibility Basics] by Marco's Accessibility Blog
[[Category:Accessibility]]
* [https://the-pastry-box-project.net/monika-piotrowicz/2014-April-29# Getting Started with Web Accessibility] by Monika Piotrowicz at The Pastry Box.
* Dos and don'ts on designing for accessibility by Karwai Pun on Gov.UK. Includes posters for designing for [[Autism | people on the autism spectrum]], [[:Category:Vision issues | people using screen readers or with low vision]], people with physical or motor disabilities, [Deafness | people who are deaf or hard of hearing]], and [[Dyslexia | people with dyslexia]].
* [https://www.invisionapp.com/blog/designing-for-inclusivity/ Designing for Inclusivity: How and Why to Get Started] by Allison Shaw at the Invision Design Blog
 
==Design considerations==
 
[https://www.creativebloq.com/advice/14-easy-ways-to-make-your-website-more-accessible 14 easy ways to make your website more accessible] by Carl Cahill and Joss Cook cover:
 
# Remember alt text
# Consider animations carefully
# Think about other languages (especially around line heights)
# Keep the writing straightforward
# Use simple colors and shapes
# Empower the user
# Offer multiple options
# Offer customizations
# Think about tab order
# Don't forget about bots
# Get the right line length and amount of text
# Avoid anxiety-inducing prompts
# Add in verifications and checks
# Confirm the end of a user journey
 
It is not coincidental that these are all usability concerns as well.
 
==Developer considerations==
 
[https://benrobertson.io/accessibility/common-accessibility-mistakes-and-how-to-avoid-them Common Accessibility Mistakes and How To Avoid Them] by Ben Robertson outlines four of his own principles for developing accessible websites.
 
# Web Design is more than graphic design
# Be ASAP: As Semantic As Possible
# Websites should look good naked
# Talk to your computer (Use ARIA attributes)
 
It also outlines common accessibility mistakes:
 
* Missing page titles
* Poor heading structure
* Link text should tell where or what a user is clicking on
* Inputs missing a <label>
* CSS Grid / Flexbox: visual reordering sets a mismatch between logical ordering and visual ordering
* Missing or poor alt attributes for images
* Removing focus outlines
* Missing keyboard functionality
* Hiding things the wrong way
 
[https://alistapart.com/article/paint-the-picture-not-the-frame Paint the Picture, Not the Frame: How Browsers Provide Everything Users Need] by Eric Bailey on A List Apart outlines some major browser functionality that is sometimes recreated by developers, such as a scroll-to-top pattern, scrollbar designs, scrolling, highlighting, text resizing, high-contrast themes, moving the focus, the clipboard, and browser history, that really probably shouldn't be messed with unless you're going to be incredibly thorough and consider a wide array of inclusive use cases.

Latest revision as of 19:01, 10 September 2021

This information has been moved to Accessibility 101 on Perpendicular Angel