The email button on https://murdomaclachlan.github.io/website/pages/contact.html should be represented as an a tag instead of a button. The href attribute can be set to the mailto link.

This has the advantage that you don't need to manually set the click handler and it's more transparent what the button does to screen readers.
It also has the advantage that users can see on hover where the link leads to before clicking it.

The tab view (e.g. on https://murdomaclachlan.github.io/website/pages/projects/videos.html) is not controllable by keyboard, e.g. you can't change to the other tabs with a keyboard only.
The tabs should be able to get focus from the keyboard and when you press enter it switches to that tab.

My guess is that the problem is caused by the tabs being a links without an href attribute.
Instead, they should be button elements with corresponding click handlers (and maybe key handlers, I forgot if enter sends a click event).

The old website design changed the appearance of the favicon at certain times of year (rainbow colour for Pride Month, etc.). This was fun and should be re-implemented in the redesign.

Bulma has finally add dark mode capabilities in version 1.0.0. Some restructuring of this website's styles are needed to make it gel properly, and then we can have dark mode.

Will include a button to switch between the two.

Seems to have been introduced by #42. Likely a minor CSS fix.

During one of the event periods defined in events.js, the logo switches to a different one. The logo is also given a data-desc property explaining the event. This section of code:

should then cause a popup on hover that shows this description, but that popup doesn't happen for some reason. I have no idea why not.

This is just a minor issue, the navigation works well now!

When the tabs are focused, the focus outline on the top and bottom is not visible (on Firefox):

Adding a margin to the ul element that contains all tabs seems to fix it (I tried 0.5em but you can play around with it)

This is not a necessary addition, but might be a fun exercise and further improves the accessibility (and it's satisfying to see once it works).

The basic idea is that a keyboard user might not always want to tab through the whole navigation menu before reaching the main content (a screen-reader user doesn't have this problem as they have shortcuts to navigate more efficiently, for example by headers).
To fix this, a "Skip to main content" link can be added, that navigates the user directly to the <main> element which should contain the content of the page.

Just adding a plain link like this might confuse users who don't use keyboard navigation and might look ugly.
To solve this, the link can be hidden off-screen and then made visible only on keyboard focus.
(It's important to not hide it via visibility: hidden or display: none as it might not be focusable in this case)

So you can add the link to your navbar, give it a fixed height (or width) and set the default styling (e.g. margin) to move it off-screen to the top (or left).
Then you add :focus styling to move it back to the "normal" position.

You can read more about the technique on WebAIM.

You can find examples on the WebAIM page itself, GitHub also has one (although an ugly one).

The padding of the body element seems to make it larger than the parent component, resulting in permanent overflow and a scrollbar.

A potential fix could be to set the body padding to 0 and wrap the rest of the content in a container which applies the padding (I haven't tested that though).

The tabular page structure (only one section being shown at a time, with a list of tabs to select each section) is needlessly complex and less accessible than simply showing all tabs at all time in vertical order. Retire the tab structure in favour of this more standard structure.

The "Projects" and "More" drop-down tabs cannot be focused with a keyboard and are therefore inaccessible to users that cannot use a mouse.

To reproduce, press "tab" several times on the page. You can see that the logo, the name and "Home" can be focused, but then it jumps to the main content of the page.

Expected: These drop-down tabs should be focusable, which should show the options of that drop-down which can then be focused one by one. Alternatively, you could focus the drop-down tab and it expands/collapses when pressing enter.

Currently there are three links in the nav bar that get you back to the home page:

• Clicking on the eye logo
• Clicking on your name
• Clicking on "Home"

This can be slightly confusing for the sighted user, but is also three keypresses for the keyboard user.

I'd recommend to make it one link only, e.g. by doing the following:

• Remove the "Home" link
• Wrap the eye and your name in the same a tag to only have one link that does both

Of course there are other ways to change this, up to you :)

On pages too small to scroll, the current solution for #38 doesn't give any clear visual feedback that focus is changed besides the link sliding off the page.

I will look into maybe adding some kind of feedback such as a highlight somewhere to make it clearer.