Code

Some improvements for this site

Created on
Writing Time
Short
Reading Time
3 mins
Word Count
440 approx.

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 <cite>, <mark>, <dl>, <dt>, <dd>, and <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 <section> inside <article>. The 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 <article>.

<!-- code example for a blog post -->
<main>
  <article>
    <header>
      <h1>Heading of this site</h1>
      <img src="images/hero.jpg" alt="Hero Image">
    </header>

    <h2>...</h2>
    <p>...</p>

    <section aria-labelledby="section-label">
      <h4 id="section-label">Some Heading</h4>
      <ul>...</ul>
    </section>

    <footer>...</footer>
  </article>
</main>

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 <div> or <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.

  1. 960 Grid System. ↩︎
  2. MDN Web Docs ↩︎
  3. Landmark Region via ARIA Authoring Practices Guide (APG) ↩︎
  4. Nu Html Checker ↩︎
  5. ARIA Landmarks Example by W3C ARIA Authoring Practices Task Force ↩︎
  6. Web Accessibility Evaluation Tool by WAVE ↩︎