This looks much better than the old one! I remember being quite overwhelmed when I took a look at zig previously, mostly because of the huge home page. This is definitely a welcome change, I think I might take a look at it again!
For the next iteration I’ll work on improving accessibility
Thanks for paying attention to this. The home page is already pretty good with a screen reader. A couple of minor suggestions:
Put the main content of each page inside either a <main> element or a <div> with role="main". That way, screen reader users can easily find the start of the main content by looking for the appropriate ARIA landmark.
It might be nice to have a heading just before the code sample. You can use CSS to position the heading off-screen, so it’s available to a screen reader but doesn’t affect the visual layout. As it is now, a blind user skimming the page by jumping through headings might miss the code sample.
I’m happy to answer any questions. Again, good work so far.
I’ve implemented the first point you mentioned, it should be already up. Can you provide a concrete example for the second point? I want to make sure I don’t screw it up :)
It might be nice to have a heading just before the code sample. You can use CSS to position the heading off-screen, so it’s available to a screen reader but doesn’t affect the visual layout. As it is now, a blind user skimming the page by jumping through headings might miss the code sample.
Congrats on the redesign. in the article, the link to the translations page lead to a 403 due to a i missing in the url. The correct url is https://ziglang.org/translations/. Hope to enjoy a lot of talks at FOSDEM :)
When my main screen turn on, I saw a great new resource for those new to Zig. Great job!
And good information density for great justice.
This looks much better than the old one! I remember being quite overwhelmed when I took a look at zig previously, mostly because of the huge home page. This is definitely a welcome change, I think I might take a look at it again!
Great job! Some feedback from me:
The “Get Started” button gets a bit lost in the gray. I tried changing the button’s background to black, and it stood out much better.
Also, I personally think the font size is a bit on the large side, especially the monospace font, but that’s a personal preference.
I also think it looks nice with the Zig Orange®™ colour that’s used elsewhere on the page
Thanks for paying attention to this. The home page is already pretty good with a screen reader. A couple of minor suggestions:
Put the main content of each page inside either a
<main>element or a<div>withrole="main". That way, screen reader users can easily find the start of the main content by looking for the appropriate ARIA landmark.It might be nice to have a heading just before the code sample. You can use CSS to position the heading off-screen, so it’s available to a screen reader but doesn’t affect the visual layout. As it is now, a blind user skimming the page by jumping through headings might miss the code sample.
I’m happy to answer any questions. Again, good work so far.
Thanks for your suggestions!
I’ve implemented the first point you mentioned, it should be already up. Can you provide a concrete example for the second point? I want to make sure I don’t screw it up :)
Could
aria-labelbe used instead? e.g.<div class="codesample" aria-label="Code sample">...Just seeing a code snippet up front speaks volumes. I wish more programming language websites would do this! Great job on the redesign!
Congrats on the redesign. in the article, the link to the translations page lead to a 403 due to a
imissing in the url. The correct url is https://ziglang.org/translations/. Hope to enjoy a lot of talks at FOSDEM :)Thank you very much for the report, it’s fixed now :)
A little progressive disclosure goes a long way!
For sure better than what it replaces. Good job!
So IIRC, the equivalent of the previous homepage would be https://ziglang.org/learn/overview/
Yes, that’s correct. It’s also linked from the “In-depth overview” button below the 3 zap bullet points (next to the code sample) on the home page.