evaluatory VS a11yproject.com

I wrote Evaluatory [1] for this, which started mainly as an axe-core wrapper (which is what Lighthouse uses as well) with a visual results page. Now it contains more tools and checks as well.

[1] https://darekkay.com/evaluatory/

Most of the projects I do are because they are useful to myself. I'm happy if other people find them useful, but I don't depend on them becoming successful.

---

https://github.com/darekkay/dashboard

Customizable personal dashboard and startpage. I have a pinned Firefox tab that I check daily to get a quick overview of some areas I find important.

---

https://github.com/darekkay/static-marks

Shareable bookmarks. I have first built it to maintain a list of bookmarks for me and my work colleages. Later I have migrated all my personal bookmarks as well. Now I can type "sm" (for static marks) in any of my browsers followed by a search term to open Static Marks and get to all my bookmarks, filtered by the search term.

---

https://github.com/darekkay/evaluatory

Web page evaluation with a focus on accessibility. My motivation was that my blog previously had a small accessibility issue. I didn't catch it, as I've tested only the desktop breakpoint. Evaluatory runs axe-core at multiple breakpoints at the same time and generates an HTML report.

> 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/

a11yproject/a11yproject.com - Making #A11Y tips and tricks easier to digest and leveraging the community into the cloud.