4 ms·

The work of the project is great and I'm grateful for the tools they produce, which I have used. But bit surprised to see some of the low hanging fruit from the

The work of the project is great and I'm grateful for the tools they produce, which I have used. But bit surprised to see some of the low hanging fruit from their own list not being applied in the project's own site. Just a few things I spotted in couple of minutes: The colour contrast of the title section fails all tests. The title itself is so big that it requires scanning the full width of the monitor regardless of font scaling; and the introductory paragraph (and header navigation) is placed over the top of the title, obscuring it. I also thought uppercase text-transform was best avoided. The checkboxes themselves move when you open/close the details/summary blocks which is disorientating. You can't tab onto the citation links (maybe up for debate). I take this topic seriously, so this isn't just flippant. Unfortunately if you want others to take these things seriously too, you need to practice what you preach.

savanaly 4y ago
Agreed. Contrast with an accessibility website that actually practices what it preaches: https://webaim.org/ https://webaim.org/
extra88 4y ago
> The colour contrast of the title section fails all tests. It doesn't. The background color is --color-blue: #3b4bbf and the SVG's fill color is --color-blue-tint: #d4d8f2, a 5.1:1 contrast ratio. Having the top-level page titles replicated as such giant SVGs is probably overdoing it but the user also has the page title in the browser tab and the word "Checklist" underlined in the main navigation to locate themselves (the actual h1 heading for the page is visually hidden contains "Checklist." I didn't find a viewport size/shape that had the overlapping you're describing, maybe their design has a problem they didn't find and you could report it to them [0]. > I also thought uppercase text-transform was best avoided Do you mean on "Check your WCAG compliance?" Making all the text on a page or full sentences all uppercase can make it hard to read, I don't think you have to pretend `text-transform: uppercase` doesn't exist. It's definitely better to use the property to make text uppercase as a design choice vs. actually writing the text using all capital letters, at least some of the time browsers and assistive technologies can treat them differently. I think the A11y Project in particular tries to reach designers and developers who often think "accessibility" means making sites plain, boring, and/or ugly. Therefore, they've adopted a design that is more capital "D" Designed on their top-level pages; that may mean not making everything maximally accessible 100% of the time. Additionally, people will always disagree about design choices. [0] https://github.com/a11yproject/a11yproject.com/ https://github.com/a11yproject/a11yproject.com/

savanaly 4y ago

Agreed. Contrast with an accessibility website that actually practices what it preaches: https://webaim.org/ https://webaim.org/

extra88 4y ago

> The colour contrast of the title section fails all tests. It doesn't. The background color is --color-blue: #3b4bbf and the SVG's fill color is --color-blue-tint: #d4d8f2, a 5.1:1 contrast ratio. Having the top-level page titles replicated as such giant SVGs is probably overdoing it but the user also has the page title in the browser tab and the word "Checklist" underlined in the main navigation to locate themselves (the actual h1 heading for the page is visually hidden contains "Checklist." I didn't find a viewport size/shape that had the overlapping you're describing, maybe their design has a problem they didn't find and you could report it to them [0]. > I also thought uppercase text-transform was best avoided Do you mean on "Check your WCAG compliance?" Making all the text on a page or full sentences all uppercase can make it hard to read, I don't think you have to pretend `text-transform: uppercase` doesn't exist. It's definitely better to use the property to make text uppercase as a design choice vs. actually writing the text using all capital letters, at least some of the time browsers and assistive technologies can treat them differently. I think the A11y Project in particular tries to reach designers and developers who often think "accessibility" means making sites plain, boring, and/or ugly. Therefore, they've adopted a design that is more capital "D" Designed on their top-level pages; that may mean not making everything maximally accessible 100% of the time. Additionally, people will always disagree about design choices. [0] https://github.com/a11yproject/a11yproject.com/ https://github.com/a11yproject/a11yproject.com/