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.
+ +Accessiblity
+-
+
- 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. +
+
User Experience
+-
+
- Styled
<code>tags +-
+
- 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. +
Design/User Interface
+-
+
- Font
-
+
- Increase the font-size. +
- Increase the whitespace used around the site. +
+ - Colours
-
+
- 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. +
+ - Add
to tags-
+
- Multiple word tags were breaking, and looked pretty bad, so made them non-breakable. +
+
Dev
+-
+
- 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. +
+
Known Issues
+-
+
- 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. +
+
Final words
+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).
+