New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP - Post: Pitfalls of accessible components #1490

Draft

erikkroes wants to merge 1 commit into a11yproject:main from erikkroes:feature/blog-component-pitfalls

erikkroes commented Nov 30, 2022 •

edited

I've written a blog in Dutch for Fronteers. I thought it might make a nice contribution to the a11yproject. At least when I translate it to English that is.


          basic translation

ce23a92

ericwbailey requested changes

View reviewed changes

Member

ericwbailey left a comment

@erikkroes Don't let the comment count scare you off, I think there's a lot of potential for this post!

Generally speaking, I'm wondering if the title is accurate to the post's content. To me, this reads as considerations about the overall context of how and where components are used, not the potential drawbacks to using components themselves.

If that's an accurate assessment, I think the intro needs to clarify that point better. That way, the content you've provided in the post makes more sense to me—I kept expecting the post to talk about component-level concerns, and never really got to them in reading the post for review.

src/posts/pitfalls-of-accessible-components.md

Comment on lines +12 to +13

		No matter how beautiful your building blocks (components) are, you can still build wrong with them!
		More and more you see that components claim to be accessible. That sounds good: components that can be used by everyone, including people with disabilities! It is not always clear what exactly such a claim entails. In addition, it does not give you any guarantees as a builder. You can still make a mess!

Member

ericwbailey Dec 7, 2022

Suggested change

      
            No matter how beautiful your building blocks (components) are, you can still build wrong with them!
          
            More and more you see that components claim to be accessible. That sounds good: components that can be used by everyone, including people with disabilities! It is not always clear what exactly such a claim entails. In addition, it does not give you any guarantees as a builder. You can still make a mess!
          
            No matter how beautiful your components are, you can still build wrong with them.
          
            More and more you see that components claiming to be accessible. That sounds good: components that can be used by everyone, including people with disabilities! It is not always clear what exactly such a claim entails. In addition, it does not give you any guarantees as a builder. You can still make a mess.

The title uses "components" so I removed it from its parenthetical. We could define, or link to a definition of what a component is later, if needed.
Added a newline so we get two separate paragraphs.
Toned down the exclamation points, in keeping with our styleguide

src/posts/pitfalls-of-accessible-components.md

+              No matter how beautiful your building blocks (components) are, you can still build wrong with them!
+              More and more you see that components claim to be accessible. That sounds good: components that can be used by everyone, including people with disabilities! It is not always clear what exactly such a claim entails. In addition, it does not give you any guarantees as a builder. You can still make a mess!
+              What can go wrong? We look at some common pitfalls.

Member

ericwbailey Dec 7, 2022

Suggested change

      
            What can go wrong? We look at some common pitfalls.
          
            What can go wrong? Here are some common pitfalls:

Personal preference, but I try to avoid terms like "look", "see", etc. given the audience this site serves, unless it is directly referencing a specific behavior.

src/posts/pitfalls-of-accessible-components.md


		## What are components good for?

		Components are great for anything you need to do more than once. You don't want to design and build your button or link every time. That's a waste of your time. You would rather build one version that is very good, and then you can reuse it. Why often build something halfway, if you can spend all that time in one very good version? You can then test that one version with different browsers, mobile, with screen readers and hopefully even with real users!

Member

ericwbailey Dec 7, 2022

Suggested change

      
            Components are great for anything you need to do more than once. You don't want to design and build your button or link every time. That's a waste of your time. You would rather build one version that is very good, and then you can reuse it. Why often build something halfway, if you can spend all that time in one very good version? You can then test that one version with different browsers, mobile, with screen readers and hopefully even with real users!
          
            Why often build something halfway, if you can spend all that time in one very good version? You can then test that one version with different browsers, mobile, with screen readers and hopefully even with real users!
          
            Components are great for anything you need to do more than once. You don't want to design and build your button or link every time. That's a waste of your time. You would rather build one version that is very good, and then you can reuse it.

Flipped this to plead to component's use case, then broke into two paragraphs as they are two separate thoughts. This will also help lower the overall reading level.

src/posts/pitfalls-of-accessible-components.md

Comment on lines +21 to +24

+              <figure role="figure" aria-label="It's all in the application.">
+              	<img alt="A plastic playset is placed on the roof edge of an appartment building." src="/img/posts/pitfalls-of-accessible-components/playset.png" />
+              	<figcaption>It's all in the application.</figcaption>
+              </figure>

Member

ericwbailey Dec 7, 2022

🤣

src/posts/pitfalls-of-accessible-components.md


		## Page-specific: content

		One page is not the other. And it is precisely in the parts that vary that things can of course still go wrong.

Member

ericwbailey Dec 7, 2022

I'm a little unclear what this means. Could we revise?

src/posts/pitfalls-of-accessible-components.md


		### Variations of components

		The more features a component has, the greater the chance that it will go wrong. If a component has a boolean attribute, dark mode and two responsive zoom levels, then you quickly end up with (2x2x3=8) eight variations that all need to be tested and maintained. So pay attention to this! If everyone around you has default dark mode on, you can count on issues in light mode.

Member

ericwbailey Dec 7, 2022

Could we link to a good definition of what a boolean is, for folks who might not be familiar with the term?

src/posts/pitfalls-of-accessible-components.md


		### Composition

		As soon as you start combining components, you can also foresee problems. You would prefer, for example, that forms have been developed and bundled as a complete system. You often combine the same components in forms. If they are delivered separately, unexpected (and untested) situations may arise. Another point of attention!

Member

ericwbailey Dec 7, 2022

As soon as you start combining components

This is the first time we've really mentioned components. I'm thinking the intro might need a bit more detail to clarify what I'm guessing is the structure of the post.

src/posts/pitfalls-of-accessible-components.md

+              ### Composition
+              As soon as you start combining components, you can also foresee problems. You would prefer, for example, that forms have been developed and bundled as a complete system. You often combine the same components in forms. If they are delivered separately, unexpected (and untested) situations may arise. Another point of attention!
+              Related to this is also the topic of relationships. Everything you tie together yourself is prone to errors. If you have a table of contents at the top of your page, you should pay close attention to how it is connected to the content of your page. Or how about a form (field) and an error message or instruction? You want relationships to be clear both visually and in code.

Member

ericwbailey Dec 7, 2022

You want relationships to be clear both visually and in code.

How?

src/posts/pitfalls-of-accessible-components.md

Comment on lines +81 to +83

+              As mentioned earlier, components are good for consistency. If your set of components is not yet very mature or complete, this can still be a point of improvement.
+              For example, focus states can still differ between pages and components if this is not well thought out and implemented centrally.
+              Another point for improvement in the broader structure is often the navigability. You want pages to be found and accessed in more than one way. Think of a search function or sitemap next to your menu structure. Typically something you can't solve with a component. Make sure all your pages are part of this and are clearly represented.

Member

ericwbailey Dec 7, 2022

Suggested change

      
            As mentioned earlier, components are good for consistency. If your set of components is not yet very mature or complete, this can still be a point of improvement.
          
            For example, focus states can still differ between pages and components if this is not well thought out and implemented centrally.
          
            Another point for improvement in the broader structure is often the navigability. You want pages to be found and accessed in more than one way. Think of a search function or sitemap next to your menu structure. Typically something you can't solve with a component. Make sure all your pages are part of this and are clearly represented.
          
            As mentioned earlier, components are good for consistency. If your set of components is not yet very mature or complete, this can still be a point of improvement.
          
            For example, focus states can still differ between pages and components if this is not well thought out and implemented centrally.
          
            Another point for improvement in the broader structure is often the navigability. You want pages to be found and accessed in more than one way. Think of a search function or sitemap next to your menu structure. Typically something you can't solve with a component. Make sure all your pages are part of this and are clearly represented.

Newlines for new paragraphs.

src/posts/pitfalls-of-accessible-components.md

Comment on lines +87 to +88

		Now imagine watching out for all these pitfalls. Are you sure it's going to be okay? No Unfortunately! You can still choose the wrong component for example! You have no guarantee for an accessible end result. The chance that you will succeed with accessible components is many times greater than without!
		Components are like the foundation of a house. Are you building on quicksand with crooked window frames? Good luck! A solid foundation with quality parts is what you want. But even with that you can build a house that falls short!

Member

ericwbailey Dec 7, 2022

Suggested change

      
            Now imagine watching out for all these pitfalls. Are you sure it's going to be okay? No Unfortunately! You can still choose the wrong component for example! You have no guarantee for an accessible end result. The chance that you will succeed with accessible components is many times greater than without!
          
            Components are like the foundation of a house. Are you building on quicksand with crooked window frames? Good luck! A solid foundation with quality parts is what you want. But even with that you can build a house that falls short!
          
            Now imagine watching out for all these pitfalls. Are you sure it's going to be okay? No Unfortunately! You can still choose the wrong component for example! You have no guarantee for an accessible end result. The chance that you will succeed with accessible components is many times greater than without!
          
            Components are like the foundation of a house. Are you building on quicksand with crooked window frames? Good luck! A solid foundation with quality parts is what you want. But even with that you can build a house that falls short!

Paragraphs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment