Revisiting Fundamentals- Semantic Lists for Improved Accessibility

hell/adventcalendar/2023/1.md

@@ -0,0 +1,150 @@
+---
+title: "Revisiting Fundamentals- Semantic lists for Improved Accessibility
+"
+layout: layouts/advent.md
+author: "Winnie Bosibori"
+author_bio: "Winnie is a Freelance Accessibility Consultant and Auditor from Kenya. She is deeply passionate about digital accessibility and inclusive design. She is a firm believer that accessible and inclusive technologies will allow a range of diverse people to fully participate in their day to day lives.
+"
+date: 2023-12-01
+tags: advent2023
+author_links:
+  - label: "Winnie on LinkedIn"
+    url: "https://www.linkedin.com/in/winnie-bosibori-b37601141/"
+    link_label: "LinkedIn"
+  - label: "Winnie on Mastodon"
+    url: "https://mstdn.social/@MissB"
+    link_label: "Mastodon"
+active: true
+intro: "<p>Short decription.</p>"
+---
+HTML lists are one of the fundamental semantic HTML elements that when implemented appropriately can significantly enhance accessibility.
+
+
+## Introduction
+
+Whenever I visit any website, I have formed the habit of checking for any accessibility issues and delving deeper into the HTML code structure. One thing that is apparent is that a large number of sites are characterised non-sematic code structures that produce or result to  inaccessible sites. 
+One common culprit that I constantly come across is the implementation of non-semantic list structures. From having list elements made with the paragraph element, to having headings, div or span elements as direct children of ```html <ul> list, <ol> or <dl> ```html elements. 
+
+Having semantic list structures is sometimes overlooked and deemed insignificant. However, they play an important role in ensuring that assistive technologies users can understand and navigate content seemlessly. It is for this reason I was inspired to write this article, not only to point out some of the bad practices that result from non-semantic code, but also provide best practices to ensure that we create accessible and inclusive sites. HTML lists consist of three types: ordered lists(ol), unordered list (ol) and description list (dl).
+It is worth noting that this article focuses exclusively on unodered and ordered lists. The definition (dl) has not been overlooked and I plan on taking a deeper dive on this particular list element in the future.
+
+## HTML Lists Explained 
+
+We all encounter HTML lists everytime we visit websites all the time, whether it is ordered lists (ol) whose items that are commonly displayed as a numbered list, alphabet letters or roman numerals),and unordered lists (ul) commonly displayed in bullet form.  HTML lists are elements used to group related content or information so as make it easier to read and navigate. Without lists, it will be difficult for everyone to follow content or information on a site.
+Examples of real world scenarios where lists can be implemented include but not limited to breadcrumbs, blog, categories for an e-commece site and site navigation.
+
+### Unordered List
+The unordered list is used to represent data or content whose order or hierarchy is not important. For example grouping related hyperlinks or shopping list. To create unordered list, you use the `<ul>` tag and `<li>` tag to create individual list items as shown in the code sample below 
+
+```html
+<h2> Shopping List </h2>
+<ul>
+  <li>Apples</li>
+  <li>Pears</li>
+  <li>Oranges</li>
+ </ul>
+```
+
+### Ordered Lists
+The ordered list is used to represent data or content whose order or hierarchy is important. For example in step-by-step instructions such as a recipe, a form sign-up process or multiple-choice tests.
+
+```html
+<h2> Cake Recipe </h2>
+<ol>
+  <li>Preheat your oven to 350°F (175°C).</li>
+  <li>Grease and flour two 9-inch round cake pans.</li>
+  <li>In a medium bowl, sift together the flour, baking powder, baking soda, and salt.</li>
+ </ol>
+```
+
+## Semantic HTML lists and Accessibility
+
+Semantic HTML entails the use HTML tags to convey the meaning of a site’s content as opposed to how they appear.  In reference to lists, this refers to the use of lists for structuring or grouping related content and in some cases convey a particular order for processes or procedures. This brings us to what are semantic lists and why are they important to accessibility?
+
+Semantic lists hugely contribute to readability. This is especially important for people with cognitive and learning disabilities. Large blocks of content can be difficult to read and understand. Lists allow content to be broken up into comprehensible chunks making it easier to read and understand content. For instance, the use of ordered list to provide instructions for a school examination paper or food recipe that has several sequential steps for its preparation.
+Lists groups or structures information according to the relationships between items or content. Often when we see an ordered or unodered  lists on a webpage or a digital document, they are structured in a way that visually indicates that the items are related.
+
+For instance, in the ordered list example, the cake recipe shows a step-by step process of preparing a cake, indicating a relationship between the items and the context of preparation. Moreover, this goes beyond the visual appearance of the lists. Properly coded list means that meaning will not be lost when users interact with the content. This is especially those who rely on assistive technologies such as screen readers. 
+
+Assistive technologies rely on the underlying code structure of a website and convey the content to idnividuals who rely on them. If lists are semantically coded, information will be repreresented accurately. For people relying on screen-readers, it becomes easier to navigate and understand the structure of a document or a site. They can access lists using Keyboard shortcuts and easily navigate in-between. However, if non-semantic lists are used, a large number of people  including those relying on assistive technologies will miss out on information or content on a site simply because they have a hard time navigating and understanding the structure of the document.
+
+## Common Mistakes and how to avoid them:
+When it comes to implementing Semantic HTML lists, there are a number of mistakes that compromise accessibility of a site. Here are some common mistakes associated with semantic HTML lists:
+
+### Using the Wrong List Type
+This entails implementing unordered lists when the order is important and vice versa. If the order of your content or items is not relevant, implement unodered list `<ul>`. For example navigation items on a site . On the other hand,  If the your items or content convey processes and procedures, implement an ordered list`<ol>`.For example a step-by-step recipe on a cooking website.
+Do not: 
+```html
+<h2> Cake Recipe </h2>
+<ul>
+  <li>Preheat your oven to 350°F (175°C).</li>
+  <li>Grease and flour two 9-inch round cake pans.</li>
+  <li>In a medium bowl, sift together the flour, baking powder, baking soda, and salt.</li>
+ </ul>
+```
+Do:
+
+```html
+<h2> Cake Recipe </h2>
+<ol>
+  <li>Preheat your oven to 350°F (175°C).</li>
+  <li>Grease and flour two 9-inch round cake pan.</li>
+  <li>In a medium bowl, sift together the flour, baking powder, baking soda, and salt.</li>
+ </ol>
+```
+
+### Creating ‘fake’ lists.
+The use of fake lists is a common occurrence on the web. This entails implementation of items that visually appear as lists but semantically they are not. It is common to see sites which have implemented divs, spans or paragraph `<p>` elements then adding hyphens, emojis, images or numbers to mimic lists. Assistive technology devices will not recognize the items as lists because the underlying code communicates otherwise. Instead, implement semantic lists to ensure consistency and readability for everyone.
+Do not:
+   ```html
+<h2> Shopping List </h2>
+<p>*<span> Apples</span><p>
+<div>-Bananas </div>
+<div>⭐Pears </div>
+```
+Do:
+```html
+
+<h2> Shopping List </h2>
+<ul>
+  <li>Apples</li>
+  <li>Bananas</li>
+  <li>Pears</li>
+ </ul>
+```
+
+### Implementing invalid list structure.
+Implementing invalid list structures is another common issue on the web. Using `divs`, `p`, `spans` as direct children ordered lists `<ol>` or unordered lists `<ul>` elements is not a valid list according to the HTML specifications.Invalid list structures tend to negatively affect accessibility because screen readers and other assistive technology devices will interpret the what is in the underlying code. This will make it harder for individuals relying on assistive technologies to access and interact with content. It is therefore important to ensure that a valid list structure is implemented to create an accessible and great experience for everyone.
+
+Dont:
+
+```html
+<ul>
+  <div> Shopping List </div>
+  <li> Apple </li>
+  <p> Banana </p>
+  <li> Pear </li>
+</ul>
+```
+
+Do:
+```html
+<h2> Shopping List </h2>
+<ul>
+  <li>Apples</li>
+  <li> Banana </li>
+  <li>Pears</li>
+ </ul>
+```
+
+### Using Lists for Non-List Content
+This entails implementing lists just for styling or layout purposes when the content isn't actually a list. HTML lists are intended to group together related information or content but not for layout purposes. One common example is the use of lists to indent a paragraph or a heading to achieve a certain visual layout making the content semantically incorrect. This is generally discouraged because this is striving for a web in which content and structure are completely separate from presentation. As a result, content will be inconsistent across browsers and devices and inturn become meaningless to individuals.  Instead, developers should implement CSS to apply layout styles such as madding or padding where necessary for indentation.
+
+
+## Conclusion
+HTML lists when implemented semantically is great. They convey relationships between between items visually and ensures that information is easier to consume and understand. This is in addition create relationships between items programmatically. This allows Assistive technology devices such screen readers to present information accurately. Let us aim to implementing semantic HTML so that we can continue creating meaningful structure and content for everyone.
+
+Thank you for reading!
+
+
+

hell/adventcalendar/index.njk

@@ -26,6 +26,20 @@ tags:
 
 <h1>{{ title }}</h1>
 
+{% macro day(num) %}
+  {% set days = collections.advent2023 %}
+  {% set day = days[num - 1] %}
+  <li>
+    <a href="{{ day.url }}">
+      {{ day.data.title | safe  }}
+    </a>
+  </li>
+{% endmacro %}
+
+<ol>
+  {{ day(1) }}
+</ol>
+
 <p>
   Last year, I launched the <strong>HTMHell Advent Calendar</strong>, which was a great success. Twenty-four authors worldwide contributed fantastic articles on security, accessibility, UX, and performance. The feedback was phenomenal. That's why we're back this year with 24 new blog posts.
 </p>