Accessibility report for baobab landing page

Disclaimer

This report focuses exclusively on the homepage of the Baobab platform. If time and opportunity permit, I would be happy to extend this accessibility review to other pages on the site as well.

Strengths of the Baobab Platform Homepage

The webpage demonstrates several commendable accessibility practices that align with the Web Content Accessibility Guidelines (WCAG) 2.1, published by the W3C. One of the most notable features is the inclusion of a "Skip to content" link
(<a> class="visuallyhidden focusable" href="#content" id="skip-to-content">).
This allows users relying on keyboards or screen readers to bypass repetitive navigation and jump directly to the main content. This implementation supports WCAG Success Criterion 2.4.1 (Bypass Blocks),

Provide a mechanism that allows users to bypass blocks of content that are repeated across multiple web pages.

encourages mechanisms for skipping over blocks of content that are repeated across web pages.

Additionally, the use of ARIA labels such as
<nav> aria-label="Site navigation"> and <main aria-label="Page content"> enhances semantic clarity for assistive technologies. These attributes provide meaningful context to screen reader users, helping them understand the purpose of different regions of the page. This aligns with WCAG Success Criterion 1.3.1 (Info and Relationships)

Ensure that information, structure, and relationships conveyed visually or auditorily are also programmatically determined or available in text.


And is further supported by the WAI-ARIA Authoring Practices, which recommend labeling landmarks to improve navigation.
The page also adheres to a logical heading structure, using 
<h1> and <h2>
elements appropriately to define the hierarchy of content. This not only benefits screen reader users but also improves overall readability and document structure. Such practice supports WCAG Success Criterion 1.3.1,
insuring that information and relationships conveyed through presentation can be programmatically determined.

Finally, the presence of a viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1">) indicates attention to responsive design, which is essential for accessibility on mobile devices. This practice is consistent with WCAG Guideline 1.4 (Distinguishable) and Success Criterion 1.4.10 (Reflow), which emphasize the importance of content being usable across different screen sizes without loss of information or functionality.

The weakest side of homepage

The webpage contains several accessibility violations that conflict with WCAG 2.1 standards.

Poor link text

One of the most prominent issues is the use of vague link text such as Click this link, which fails to convey the destination or purpose of the hyperlink.
According to WCAG Success Criterion 2.4.4 (Link Purpose), developers must ensure that the purpose of each link can be determined from its text alone or in context. The following code violates this rule:
<a href="https://airtable.com/app7xtZMi3N4Jl2EK/shrk9BpyVUcW547Yz/tblJokrclupMgAk3f" target="_blank" class="landing-page-feature-cards__link" data-kmt="1"> Click this link </a>

Let me give you an example of this error. Most visually impaired web users tend to browse only links with the help of screen readers like JAWS or NVDA. For example, if a user navigates this page using JAWS and filters the links by pressing "Insert + F7" on their keyboard, JAWS will announce only the links found on the page. When JAWS announces the link, they hear "click this link." This link text creates confusion about which page or section the link refers to. This error should be resolved as follows:

Redundant Links

The Baobab Platform's homepage contains multiple links that lead to the exact same destination, creating a redundant and inefficient experience for users of assistive technologies. This is a violation of WCAG Success Criterion 2.4.4 (Link Purpose).

These links may serve a design purpose for sighted users, a screen reader will announce each of these links separately. This forces the user to navigate through or listen to the same destination multiple times, which can be confusing and tedious. Problematic Code:
<a class="landing-page-ambassadors__button" href="https://sites.google.com/baobabplatform.org/meet-the-baobab-ambassadors/home" @click="$track({region: 'main content', name: 'onclick', event:'link', action: 'click', type: 'internal link', section: 'baobab ambassadors', text: 'ambassador page'})" target="_blank" data-kmt="1">Ambassador page </a>

Contrast errors

Another critical issue is the insufficient contrast between the text and background of the Play video button. This violates WCAG Success Criterion 1.4.3 (Contrast Minimum), which requires a contrast ratio of at least 4.5:1 for normal text to ensure readability for users with low vision or those in bright environments. The problematic code is: <span class="landing-page-videoplay-text">Play video>/span>

Another problematic contrast issue appears on the "Baobab Ambassadors" heading. The heading is followed by paragraphs that do not meet minimum accessibility criteria. Both the foreground and background font colors are set to white (RGB: 255, 255, 255), which creates significant readability challenges especially for users with partial sight. This lack of contrast violates accessibility standards and should be addressed to ensure inclusivity.

Problematic code:
<h2 class="landing-page-ambassadors__title">Baobab Ambassadors</h2>
Follows some paragraphs with similar errors.

Another contrast error:

<p class="landing-page-primary-footer__desc-text"> is a social, professional and learning community for young African leaders and the large network of Mastercard Foundation program participants. </p>
<p class="landing-page-primary-footer__help-text">Do you need help?</p>
<a class="landing-page-primary-footer__email" href="mailto:support@baobabplatform.org" subject="I" need="" help="" with="" baobab="" @click="$track({region, section, text: 'email: support@baobabplatform.org'}, $event)" data-kmt="1"> support@baobabplatform.org</a>

Improper Heading Semantics

The misuse of semantic HTML is also evident in the page where paragraph tags are used to represent headings. Although visually styled as headings, these elements are not programmatically recognized as such by assistive technologies, violating WCAG Success Criterion 1.3.1 (Info and Relationships). Proper heading tags like <h2> or <h3> should be used instead.

I identified a similar issue with improper heading semantics on this page: there are six instances in total. Those codes are:



<p class="landing-page-feature-cards__card-title">Opportunities</p>
<p class="landing-page-feature-cards__card-title">Mentorship</p>
<p class="carousel-item__testimonial-name">Cynthia N Ayaaba</p>
<p class="carousel-item__testimonial-name">Philipa Karrey Danso</p>
<p class="carousel-item__testimonial-name">Willie Macharia</p>
<p class="landing-page-primary-footer__help-text">Do you need help?</p>

Conclusion

Overall, the Baobab platform home page does a good job of accessibility through skip links, ARIA labels, semantic ordering of headings, and responsiveness. These are great starting points for accessible user experience. Fatal flaws blurred and duplicate links, inadequate color contrast, and incorrect heading semantics taint the general accessibility of the site and hinder disabled users of assistive technology. Fixing these shortcomings with better link readability, good contrast between the background and text, and keeping semantic markup in place will not only make the site more WCAG compliant but usable and accessible to all.