-
Notifications
You must be signed in to change notification settings - Fork 117
Accessibility improvements #7
base: master
Are you sure you want to change the base?
Conversation
Hello, Any plan to move this PR forward or anything that could be done to help? We are planning to use the carousel in a project that need to get to AA level of accessibility so it looks like the PR would improve the carousel in that regard. Thanks, |
Hi, this might be merged this week if everything is fine. I have finally taken a week off from my job and will happily review everything pending in this library. Sorry for the delay. |
Great, thanks for the confirmation! Have a nice vacation and thanks for sharing material2-carousel. |
Hello, Just a quick feedback. I have played a bit more with the Carousel in our app and while is doing alot of things right there would be quite a few things to change / improve to get to AA level of accessibility (our project have that requirement) so we have decided to take more time to consider the options (investing time to improve the carousel or considering another option without carousel (more likely at this point). We have another project that could need a carousel so maybe we will come back later! ps : I have used that article as a reference : https://www.w3.org/WAI/tutorials/carousels/ Eric |
@eric-gagnon You're right, after reading the resource you posted, I realized there are missing features regarding |
Hello! We have discussed about this more here. We have people that still strongly want a carousel, so we cannot easily dismiss it! The problem that we also have is with the understanding of the level that we need to get to. As a public organisation, we have a law (in Québec, Canada) that is simular to Section 508 in US. The problem with conformance is that we should aim for no reported issues (automatic and manual testing) but we can argue that a web site is still accessibible if there is a few titles missings here and there. It's a simple exemple, but some widget can require a bit more work, like the carousel. Some rules are more difficult to do right than it seems (ex. supporting 200% text zoom with text and UI in fixed space). Currently the decision is to keep the carousel as it is (so our site will not be conformant just from that) with few adjustments that could be done without changing the code from the inside but it's possible that we decide later to put the required work to make it accessibile (could decide to disable animation instead of adding a pause button to simplify by ex.). To my best undestanding (by testing with Carousel in our app and checking the "good" exemple with the explanation of w3c) I noted something like 13 issues more or less related to accessibility. I didnt want to report them in issue section as you have no obligation to support A and AA but I can give you a idea of what I have found :
If we decide to put some work on that later there would surely be more verifications / discussions to minimise to work to be done. I'll consider a pull request if we move forward and can improve without doing too agressive changes that could break where you would like to bring your project. |
Hi @eric-gagnon, again, thanks for your feedback. I'm glad you could list those issues, as I would not have been able to do so myself. Unfortunately, front-end is not my specialty, what means my pace may be slow for fixing those issues. However, I do believe they are important and I truly want to fix them. I would be glad if you could open an issue listing those items in detail, so we could break them into small issues or PRs later. You could split them into two issues if desired, one for a11y and the other one for bugs. Also, I'm very open to PRs, if you guys have fixes to suggest, please, don't hesitate to send PRs! Or even code fix snippets (and then I know where to start when fixing issues myself). |
Ok, great! Thanks @gbrlsnchs! |
Is this project stalled? |
I'm currently unable to prioritize this project over my other open source ones, unfortunately. |
Sorry for the delay on this new PR..
Couple of suggested improvements here, see what you think.
I've introduced a span element with role="img" on the 'MatCarouselSlideComponent' template. This new span element is responsible for housing the background image, whereas previously it was set on the parent div.
The 'image:string' input parameter on 'MatCarouselSlideComponent' is now of type 'MatCarouselImage'. This new interface encapsulates 'url' and 'altText' members. If 'altText' has a value, then an 'aria-label' attribute is set on the span element, in order to describe the image it houses.
Finally, 'aria-label' attributes have been set on the arrow and mini-fab buttons found in the 'MatCarouselComponent' template.
I hope this is of some value.
Cheers.