Tutorial Feedback

[ScottMGerstl]

First of all, thanks so much for this. I'll be able to use this as a training too for my team as we're starting to build up an a11y competency in our dev team. I went through the entirety and found a few things I'd like to offer back.

The numbered list represents the feedback for each step as it's numbered in the tutorial.

1. ✅✅ Great intro
2. ✅✅ Good setup instructions
3. ✅❌ Good walkthrough for getting the tools set up. However
   • The .eslintrc.json file already has the configs in it
   • My Lighthouse results differ: [shop: 89, about: 96, find: 91]
   • Please explain how you identified your list of issues to fix based on the tools and manual testing. Learning how to compile a list is the basis for identifying fixes
4. ✅👨🏼‍💻 Intro to this tool was really helpful. A modification to prevent redundancy if you like:

    // Routes
    { path: 'shop', component: ShopComponent, data: { title: 'Our Shop' } },
    { path: 'about', component: AboutComponent, data: { title: 'Our Story' } },
    { path: 'locate', component: LocationComponent, data: { title: 'Find Us' } },

    // app component
    this.router.events
        .pipe(...)
        .subscribe((title) => {
            const uniqueTitleParts = new Set<string>([title, appTitle]);

            this.titleService.setTitle(
                Array.from(uniqueTitleParts).join(' | ') // or ' - ' if you prefer
            );
        });

5. ✅✅ Great demo of how to discover and rectify contrast issues though, this does feel very material specific. If you haven't used material before it ends up as a copy/paste and then move on feeling. Maybe referencing the material docs would be helpful

6. ✅❌ Does a great job at demonstrating the separation between semantics and styles in the component.

   • However, per the html spec, heading hierarchy should start at h1. When I went looking for the h1, I found it in the nav component where it's used to style the name of the app which is an incorrect usage based on the html spec.
   • and, I believe, per WCAG 1.3.1 and 2.4.6
   • The way the h1 is being used doesn't represent the page, it represents the site.
     From my research, I believe the h1 should be a part of the main landmark element. Strategies for correcting this when it comes to making a proper page outline, are to place it in the DOM and potentially hide it for visual users using a screen-reader-only class. I believe the proper content of the h1 should be what I have in the title property of the suggested route config above (not containing the entire text of the title but just the most relevant piece).

7. ❓ I'm split on this one. The solution definitely does make the interaction accessible and I think the design is ultimately better but, in the redesign, I feel like we lost 2 things:

   • The information about vegan options is lost
   • We didn't see how to actually address the a11y of the existing design
   • The color contrast that results from the code snippet using color="primary" does not meet contrast requirement. Changing it to color="accent" does meet the contrast requirement.

8. ✅❌ The concept is well conveyed. However:

   • while Voiceover is active in Chrome, I am unable to move the slider using the controls dictated to me by Voiceover (or any other key combo).
     • This is likely a material issue though.
   • The color contrast that results from the code snippet using color="primary" does not meet contrast requirement. Changing it to color="accent" does meet the contrast requirement and matches the screenshot provided in the tutorial.

9. ✅✅

10. ✅✅ Potentially linking to the directive docs could enhance this

11. ✅👨🏼‍💻 Intro to this service is was great! A couple of things that could improve it though:

    • Change the text from Select color: ${color} to Selected color: ${color}
    • Link to the docs of the service.
    • The docs do a great job of calling out why the service exists (testing) over using aria-live and would be good to include here.

12. ✅❌ I appreciated bringing high-contrast mode to light but, at least on my Mac, I could not find a way to turn on high-contrast mode for firefox. Links to documentation on how to test these things would really enhance this section.

[ttgiang]

Had a great experience learning about accessibility. Great help. Thank you. There was one area that I couldn't do successfully. The last step with the scss file. I'm getting this:

Compiled with problems:X

ERROR in ./src/app/shop/shop.component.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
19 │ @import "~@angular/cdk/a11y";
│ ^^^^^^^^^^^^^^^^^^^^
╵
src\app\shop\shop.component.scss 19:9 root stylesheet