This makes me so happy! It wasn't enough to just leave a heart and unicorn, I had to comment about it. It's been such a journey for me finding these bits and pieces all over the web, so seeing it all in once place is beyond useful.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Finally made it through the whole thing! Made some tweaks to my website from some of these tips, and will definitely write a post linking to this soon!
Here are some general thoughts I had reading through some of the tips.
12: One h1 per page
One of the things that surprises me about the HTML Spec is the use of <section> and <h1>, where it explicitly allows (and even recommends) each section essentially resetting the heading level. On the one hand it's pretty modular, but in practice it really hurts AT, so I just do headings normally now.
29: alt attributes
I wrote about this recently; thanks for giving it a read! Every once in a while I look to see what alt attributes people are using and shed a tear every time I see "file-name.png" : (
30: Don't add alt text to images
Another technique I've seen recommended is to use CSS background image for decorative imagery. Lately I've been making a distinction between a decorative image in the context of an article (img with empty string alt), and a decorative image enhancing the website's design (div with background-image).
78: Automated testing
Happy to see testing here too! At my last job our web architect highly advocated the use of the Lighthouse Node CLI so that a lighthouse report could be generated on the continuous integration pipeline.
I'll definitely be giving the Accessibility Insights for Web tool a look-over!
79: Manual testing
I learned a whole lot just from manually experimenting with keyboard-only navigation and using screenreaders!
Lately I've been trying to think of ways to utilize journey testing to catch usability issues. For instance, I recently wrote a test for a dialog that, instead of using functions like click('Close'), relied only on keyboard presses to make sure tab trapping worked and so forth.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
I am so glad somebody managed to read the whole thing!
By the way I wrote (and obviously didn't send somehow...) a comment on your article.
You got most of the points spot on! I was just going to make a minor point on how your alt descriptions should be shorter and to use things like <figcaption> and aria-labelledby if you want to add details such as "large swirls", "magenta bands" etc.
Overall your article was excellent, I enjoyed reading it and "Purpiter" is now my new favourite planet!
I am glad a few points in this article jumped out at you and I am really looking forward to seeing your post on the improvements you made to your site because of it (that is the biggest compliment you could have given me!).
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
This makes me so happy! It wasn't enough to just leave a heart and unicorn, I had to comment about it. It's been such a journey for me finding these bits and pieces all over the web, so seeing it all in once place is beyond useful.
Aww thank you Timothy, I am blushing!
Let me know if you find any blunders or typos as you work your way through it! 😋
Finally made it through the whole thing! Made some tweaks to my website from some of these tips, and will definitely write a post linking to this soon!
Here are some general thoughts I had reading through some of the tips.
12: One h1 per page
One of the things that surprises me about the HTML Spec is the use of
<section>and<h1>, where it explicitly allows (and even recommends) each section essentially resetting the heading level. On the one hand it's pretty modular, but in practice it really hurts AT, so I just do headings normally now.29: alt attributes
I wrote about this recently; thanks for giving it a read! Every once in a while I look to see what
altattributes people are using and shed a tear every time I see "file-name.png" : (30: Don't add alt text to images
Another technique I've seen recommended is to use CSS background image for decorative imagery. Lately I've been making a distinction between a decorative image in the context of an article (
imgwith empty stringalt), and a decorative image enhancing the website's design (divwithbackground-image).78: Automated testing
Happy to see testing here too! At my last job our web architect highly advocated the use of the Lighthouse Node CLI so that a lighthouse report could be generated on the continuous integration pipeline.
I'll definitely be giving the Accessibility Insights for Web tool a look-over!
79: Manual testing
I learned a whole lot just from manually experimenting with keyboard-only navigation and using screenreaders!
Lately I've been trying to think of ways to utilize journey testing to catch usability issues. For instance, I recently wrote a test for a dialog that, instead of using functions like
click('Close'), relied only on keyboard presses to make sure tab trapping worked and so forth.I am so glad somebody managed to read the whole thing!
By the way I wrote (and obviously didn't send somehow...) a comment on your article.
You got most of the points spot on! I was just going to make a minor point on how your
altdescriptions should be shorter and to use things like<figcaption>andaria-labelledbyif you want to add details such as "large swirls", "magenta bands" etc.Overall your article was excellent, I enjoyed reading it and "Purpiter" is now my new favourite planet!
I am glad a few points in this article jumped out at you and I am really looking forward to seeing your post on the improvements you made to your site because of it (that is the biggest compliment you could have given me!).