In the African market, the reality of usage is unambiguous: people access the internet first with a phone, often on an irregular mobile network, sometimes on an entry-level device with little memory. A site designed first for the big desktop screen in Paris or New York, then "adapted" to mobile at the tail end, fails here. The logic must be reversed: design first for the small screen, the slow connection and the touching finger, then enrich for larger screens.
Accessibility (a site being usable by everyone, including people with disabilities) and mobile-first UX are not two separate subjects. They are two sides of the same requirement: making a site genuinely usable by as many people as possible, in real field conditions.
Mobile-First: Why It Is Not Just a Buzzword
In Senegal and most of West Africa, the share of web traffic on mobile far exceeds desktop. Designing mobile-first means starting from the strongest constraints (small screen, slow connection, touch interaction) to build an experience that works everywhere. It is a discipline of prioritization: keep the essential, eliminate the superfluous.
The Concrete Consequences
A mobile-first site shows a few signs: content readable without zooming, buttons large enough for the thumb, simple one-handed navigation, images that load even on 3G, and a path that gets straight to the point. The mobile visitor has no patience for a nested menu designed for a mouse.
The Fundamentals of Accessibility: WCAG
The WCAG (Web Content Accessibility Guidelines) are the international reference for accessibility. They define three conformance levels:
- Level A: minimum requirements, without which some people simply cannot use the site.
- Level AA: the recommended standard for most sites, and the one we apply by default. It covers contrast, keyboard navigation, text alternatives.
- Level AAA: the most demanding, rarely fully achievable across an entire site.
Aiming for Level AA is the reasonable, professional objective. It is not a luxury: an accessible site is also a better-structured site, easier to rank and more pleasant for everyone.
Four Principles to Remember
The WCAG rest on four pillars, summed up by the acronym POUR: content must be Perceivable (visible and audible to all), Operable (navigable by keyboard and touch), Understandable (clear language, predictable behavior) and Robust (compatible with assistive technologies like screen readers).
Contrast: Reading Under the Dakar Sun
Light gray text on a white background is unreadable for many people, and even more so on a smartphone screen in bright sunlight. The WCAG set a minimum contrast ratio of 4.5:1 for body text and 3:1 for large text. Respecting this rule improves readability for everyone, not just for people with low vision. In a sunny country where people often check their phone outdoors, this is a direct business asset.
Touch Targets: Designed for the Thumb
On mobile, you interact with a finger, not a precise cursor. Recommendations set a minimum touch target size of around 44 to 48 pixels. Buttons too small or too close together cause mis-taps, frustration and abandonment. Menu links, add-to-cart buttons, form fields: everything must be sized for the thumb.
Forms: The Number-One Friction Point
A poorly designed form is where most conversions are lost. The golden rules:
- As few fields as possible: every extra field drops the completion rate. Ask only for the essential.
- Clear labels above the fields, never only inside them (they vanish on input).
- The right keyboard: a phone field should open the numeric keypad, an email field the proper keyboard.
- Explicit error messages stating what to fix, not a vague "error".
- Easier input: +221 dialing code pre-filled, tolerant formats.
Low Bandwidth: Where Performance and Accessibility Meet
Need a professional website?
Kolonell builds websites that attract clients, optimized for the Sénégalese market. Free quote in 2 minutes.
A heavy site is inaccessible to someone with a limited data plan or a weak connection. Designing for low bandwidth is therefore an act of inclusion as much as performance:
- Optimized images in WebP or AVIF, sized for the screen, loaded on demand (lazy-loading).
- Minimize JavaScript: a site depending on several megabytes of scripts is unusable on a modest device.
- Progressive rendering: show essential content first, the rest after.
- System or lightweight web fonts, to avoid invisible text during loading.
Inclusion as Strategy, Not Constraint
Thinking accessibility means including people with low vision, hearing difficulties or reduced mobility, but also older people, people uncomfortable with digital tools, and those browsing in bad conditions (while walking, in the sun, on an old phone). In Senegal, this represents a huge share of the market. Excluding these audiences through design negligence means forfeiting customers.
Mini Case Study: The Keur Massar On-Call Pharmacy
A pharmacy in Keur Massar wanted a simple site letting residents check on-call hours and request a call. The first version, outsourced elsewhere, was a heavy site with a carousel animating five high-resolution photos: unplayable on 3G, unreadable in the sun with its pale gray text. We rebuilt it mobile-first: a light page, a huge call button at the top, hours in large high-contrast type, all loading in under three seconds on 3G. As a result, inbound calls rose sharply, and many elderly customers, who had abandoned the old site, started using it. Accessibility had directly grown revenue.
The Business Impact of Accessibility
Beyond ethics, accessibility has measurable ROI: better conversion rate (the site works for more people), better ranking (Google values structure and speed), better brand image, and reduced legal risk as accessibility requirements tighten worldwide. An accessible site is simply a better site, for everyone.
FAQ
Which WCAG level should a Senegalese SME aim for?
Level AA is the reasonable professional standard. It covers the essentials (contrast, keyboard navigation, text alternatives) without the sometimes unrealistic constraints of Level AAA.
Will mobile-first degrade the desktop experience?
No. Mobile-first means designing first for mobile then enriching for larger screens. The result is excellent everywhere, because the essential was prioritized from the start.
How do I know if my contrast is sufficient?
Free tools measure the contrast ratio between text and background. Aim for at least 4.5:1 for body text. It is testable in seconds.
Why reduce the number of fields in my forms?
Each extra field lowers the completion rate. Ask only for what you truly need for the first contact, and collect the rest later.
Does accessibility cost more?
Built in from the design stage, it costs almost nothing extra and earns more. Retrofitting it onto a poorly designed site is what costs dearly. Hence the value of starting mobile-first and accessible from the outset.
Let's talk about your project. Build a mobile-first, fast and accessible site designed for the real African market. WhatsApp +221 77 596 93 33.
Mohamed Bah
Fondateur, Kolonell
Passionate about digital and entrepreneurship in Africa, Mohamed has been helping Sénégalese businesses with their digital transformation since 2020. Founder of Kolonell, he believes every SME deserves a professional and accessible online présence.
