Accessibility and Design
Release 0.9.0 was a non-functionality release, as I focussed my lil' brain on Accessibility, the User Experience (UX), and the design of the website. Also this is my first publicised "patch note" so go easy, ok.
- Fix burger menu's accessiblity issues
- Add label content, but make hidden for non screen-readers.
- Make top of burger clickable. The burger wasn't fitting to its elements container, as a negative margin was used.
- Add "Skip nav" functionality
- Added a hidden button for keyboard tab-targetting that skips over the navigation, straight to the content.
- So they can be used in-line to aid with any development guides.
Make mobile nav/burger fixed
- This allows the navigation to be opened/closed and visible from anywhere on the page, not just the top.
- Increase the font-size.
- Increase the whitespace used around the site.
- Altered colours to improve the visual hierarchy of the elements.
- Remove hr above navigation
- Due to the nav now being atop the page, this wasn't needed to seperate the content.
- Restyle mobile nav
- Instead of having the nav just pop-up atop the page, it now displays as a sidebar.
- Add background and border to burger
- As it's not fixed it needed to be visually differentiated from content.
- Scrollable table
- Super basic overflow-x on a parent of table so tables fit on screen, but all content can still be accessed.
- Multiple word tags were breaking, and looked pretty bad, so made them non-breakable.
- Colour simplification
- I changed the colours to all be 3 digit HEX values, saving a few bytes for the CSS.
- Add test.html page
- For testing elements without navigating through the site, it's public too because why not.
- Side note: This got me thinking about writing a lil' CSS framework.
- When the burger menu is active, the page is still scrollable
- Easily fixed with JS (and a basic overflow), however I want to stay away from JS as much as possible. I believe the approach I took is the best-case scenario, as users at least know if they're scrolling with the sidebar styled nav.
- Burger nav animation
- Changes to clickable area of burger icon meant the animation needed tweaking, and it looks worse. It's not really important though.
- h1 in nav
- I was contemplating moving this into the main, but have yet to do so. Not sure if this is technically an issue, but will need to look into it.
- Scrollable table
- I'd like a better solution than this, preferably one that doesn't require an additional element.
This release should offer better accesibility, and a nicer look and feel all around.
All changes were made as semantic as possible, and the site has been kept accessible, and usable for those not running CSS/JS at all (for instance terminal browsers, and neo-luddites with everything disabled).