Fixing Accessibility On Cennso: Landmarks & Content

by Admin 52 views
Fixing Accessibility on Cennso: Landmarks & Content

Hey there, accessibility enthusiasts! We're diving deep into an important issue on the Cennso website today: ensuring all page content is properly contained within HTML landmarks. This is a crucial step in making the site more user-friendly for everyone, especially those using assistive technologies. Let's break down what's happening, why it matters, and how we're going to fix it.

The Accessibility Breakdown: What's the Issue?

So, what's the deal, guys? The accessibility scan has flagged a specific element on the /solutions page of Cennso's website. The element in question is the following paragraph: <p class="flex flex-col items-end text-sm text-right"><span class="md:py-1">We use cookies for the best online experience.</span><a title="Privacy policy" class="font-semibold text-secondary-200 underline hover:decoration-2" target="_blank" href="/privacy-policy">Read our Privacy Policy</a></p>. The problem? Not all of the page content is within HTML landmarks.

For those of you not familiar, HTML landmarks are like signposts for assistive technologies. They help screen readers and other tools quickly understand the structure of a webpage, allowing users to navigate content more efficiently. Think of it like this: If you're using a map, landmarks are the key points that help you find your way around. Without them, you're wandering aimlessly, which is not ideal, right?

The specific issue stems from content not being enclosed within these landmarks. The accessibility scan pointed this out, making it harder for users to navigate the content. When content isn't contained by landmarks, it can become difficult for users to understand the page's structure and find what they're looking for.

Why This Matters for Accessibility

Why is this a big deal? Well, accessibility isn't just a nice-to-have; it's a must-have! By ensuring all content is within landmarks, we're making the website more inclusive for everyone. Specifically:

  • Improved Navigation: Landmarks allow users of assistive technologies, like screen readers, to jump directly to sections of the page, bypassing potentially unnecessary content. This dramatically improves navigation speed and efficiency.
  • Enhanced Understanding: Landmarks provide context. They signal the purpose of a section. This allows users to understand the page's layout and content organization. Without them, the page can seem confusing and disorganized.
  • WCAG Compliance: WCAG (Web Content Accessibility Guidelines) are the international standards for web accessibility. Ensuring content is within landmarks helps us meet WCAG 2.1 guidelines, making the site compliant with accessibility best practices.
  • Better User Experience: Ultimately, good accessibility leads to a better user experience for everyone, including those without disabilities. A well-structured website is easier for everyone to use, regardless of their abilities.

This fix isn't just about checking a box; it's about providing a great user experience for everyone.

The Fix: Containing Content within Landmarks

Alright, so how do we fix this? The solution is to ensure that all of the page content is contained within appropriate HTML landmarks. This means wrapping sections of the page with elements like <header>, <nav>, <main>, <article>, <aside>, and <footer>, depending on the content's purpose. These tags define the structure of the document.

Let's get into some specific implementation ideas, but remember, the ultimate goal is to wrap all of the content.

  1. Identify Content Sections: First, analyze the page's content and identify distinct sections. Think about what each section represents (e.g., the main content, navigation, a sidebar, the footer, etc.).
  2. Use Appropriate Landmarks: For each section, select the appropriate landmark HTML element. For example:
    • <header>: For introductory content, site titles, or navigation.
    • <nav>: For navigation menus.
    • <main>: For the primary content of the page.
    • <article>: For self-contained content, such as a blog post or news article.
    • <aside>: For content tangentially related to the main content, such as sidebars or ads.
    • <footer>: For content at the bottom of the page, such as copyright information and contact details.
  3. Wrap the Content: Wrap each section's content within its corresponding landmark element. Make sure the structure properly reflects the content's role on the page. In this case, the cookie policy and privacy policy section must be within the <footer> section or another appropriate section.
  4. Test and Validate: After making these changes, thoroughly test the page using accessibility testing tools (like the one that flagged the issue). Verify that the violation is resolved and that the page structure is clear and navigable.

Practical Example: Implementing the Fix

Let's assume the problematic paragraph is within the footer section. Here's a simplified example of how we might fix it:

Before:

<p class="flex flex-col items-end text-sm text-right">
  <span class="md:py-1">We use cookies for the best online experience.</span>
  <a title="Privacy policy" class="font-semibold text-secondary-200 underline hover:decoration-2" target="_blank" href="/privacy-policy">Read our Privacy Policy</a>
</p>

After:

<footer>
  <p class="flex flex-col items-end text-sm text-right">
    <span class="md:py-1">We use cookies for the best online experience.</span>
    <a title="Privacy policy" class="font-semibold text-secondary-200 underline hover:decoration-2" target="_blank" href="/privacy-policy">Read our Privacy Policy</a>
  </p>
</footer>

By wrapping the paragraph within a <footer> element, we're telling assistive technologies that this content is part of the page's footer, making the structure of the page more understandable. This is a very simplified example, you will need to apply the solution to the Cennso website.

Acceptance Criteria: What Success Looks Like

To consider this issue resolved, we need to meet the following acceptance criteria:

  • The Accessibility Violation is Resolved: The specific accessibility violation initially reported must no longer be reproducible. We'll use the same accessibility scan to verify this.
  • WCAG 2.1 Compliance: The solution must adhere to the WCAG 2.1 guidelines. This is the cornerstone of web accessibility standards.
  • Testing: We'll add a test to ensure that the specific accessibility violation doesn't reappear in the future. This helps prevent regressions. Automation helps!
  • No New Accessibility Issues: The fix should not introduce any new accessibility problems or negatively impact the current accessibility of the site.

Summary: A More Accessible Future

So, there you have it, folks! We're committed to building a website that is usable and enjoyable for everyone. By ensuring all the page content is correctly contained within landmarks, we're taking a significant step towards achieving that goal. Accessibility is an ongoing process, and we're always looking for ways to improve.

By taking these steps, we're not only meeting accessibility standards but also providing a better user experience for all visitors. The fixes are designed to create a more organized and user-friendly website. Stay tuned for more updates as we continue to refine and improve the accessibility of the Cennso website!

I hope this explanation was helpful and informative. Let's make the web a more accessible place, one landmark at a time!