Some improvements for this site
I’ve been trying to write semantic HTML and improving accessibility while building this site. I’m still learning and here’s something I can share. Hope it might helps.
This is a novice post. Let me know if anything wrong.
When I started to write my first blog post I constructed the webpage with just bare-bones HTML. After I discovered the Fediverse, I learnt that a lot of people build their websites in retro style like in the 00s. I wanted to have some nostalgia for the 960 Grid System, the golden era of fixed width websites. That’s also the time when I started to work as a designer. I tried CSS
display: grid to create columns for webpages. I just love grids and columns for layouts. If you’re interested in how I built this website, take a look at this post.
I revisited most of the HTML elements and read their descriptions on MDN Web Docs. I tried on elements I’ve never used before, like
<ruby>. I’ve learnt the basics of how to make use of CSS Custom Property, Type Scale, etc. There’s so much more for me to explore.
As for creating the structure—landmarks for a page, luckily I think I got that right. Some of them weren’t sure at first but at least they’re not wrong. I also checked the HTML using an online validator.
I read more about ARIA and tried to have proper use of them. For sectioning elements such as
aria-labelledby is used for labelling the heading such as
<h4> for that specific region. For
<aside> element I’m not quite sure about should I nest it inside
<!-- code example for a blog post -->
<h1>Heading of this site</h1>
<img src="images/hero.jpg" alt="Hero Image">
<h4 id="section-label">Some Heading</h4>
Also, I’m trying the Reader View on Safari, Firefox, and Edge. For Safari and Firefox, some of the content might not show up if it’s nested inside some
<div>s. The Reader View somehow won’t display the content and skipped it entirely. So, I’ll have to avoid adding
<section> to wrap content. After some testing, on macOS the issue seems resolved. But for iOS, the behavior of Reader View seems not consistent.
For testing accessibility for a webpage, I stumbled across Web Accessibility Evaluation Tool. It’s easy to use and very helpful for a novice like me. It can also check on colour contrast.
I always love to tinker around with some HTML / CSS here and there. The more I read, the more I feel I’ve only scratched the surface. Despite that, at least I’m taking baby steps towards the goal.
Learn something every day.
This is #Day19 of #100DaysToOffload.
- 960 Grid System. ↩︎
- MDN Web Docs ↩︎
- Landmark Region via ARIA Authoring Practices Guide (APG) ↩︎
- Nu Html Checker ↩︎
- ARIA Landmarks Example by W3C ARIA Authoring Practices Task Force ↩︎
- Web Accessibility Evaluation Tool by WAVE ↩︎