Arabic RTL Clinic Website Checklist

An Arabic clinic website isn’t an English site with translated text. Arabic is written right to left, so direction affects layout, navigation, icons, forms, and how numbers and Latin text sit inside Arabic sentences. Patients notice quickly when a phone number appears scrambled.

Use this checklist to build or review a website for an Arabic-speaking clinic, dental practice or medical centre.

1. Set direction and language correctly

• Add dir="rtl" to the html element when the whole page is Arabic. The W3C’s guide to structural markup and right-to-left text in HTML recommends this: if the overall document direction is right-to-left, add dir="rtl" to the html tag.

• Add lang="ar" as well. Language and direction are separate settings. The same W3C article warns against assuming that a language declaration indicates direction, or vice versa. The lang attribute takes a BCP 47 language tag, as described in MDN’s lang reference, so you can be more specific (for example a regional variant) if you have a reason to.

• Don’t set base direction with CSS alone. The W3C guidance is to set base direction in markup, not in stylesheets.

• Only use dir on inner blocks when the direction changes, for example an English paragraph on an Arabic page.

• Use dir="auto" for text you don’t control, such as form input or user-submitted content. MDN’s dir reference notes that auto lets the browser work out direction from the text itself, and that omitting dir doesn’t turn on automatic detection; elements simply inherit their parent’s direction.

If you use a visual site builder, check the published HTML (view source in your browser) to confirm the html element carries both attributes on the Arabic pages.

2. Choose and test Arabic fonts

• Pick a typeface designed for Arabic, not a Latin font with fallback glyphs. Arabic letters join and change shape by position, so poor fonts look broken.

• Pair it with a Latin font for English names, drug names or email addresses, and check that the two sit well together at the same size.

• Increase size and line height slightly compared with an English design if text looks cramped; Arabic script often needs more vertical room for its marks.

• Test real content, including doctors’ names, specialities and long service descriptions, not lorem ipsum.

• Limit font weights so pages stay fast on mobile.

3. Mirror the layout, but not everything

In an RTL layout the reading flow starts at the right. Navigation, logo position, sidebars, text alignment and the order of cards should generally mirror.

• Use logical CSS properties such as start and end rather than left and right. MDN’s guide to CSS logical properties explains that these properties follow the writing direction, so content renders as intended when the direction changes. The W3C article makes the same recommendation.

• Flip directional icons: back and forward arrows, chevrons on “next” buttons, breadcrumb separators and progress steps.

• Don’t flip icons that aren’t directional: logos, a phone handset, a clock, medical symbols, or checkmarks generally stay as they are.

• Check carousels and sliders: swipe direction and “next” controls should feel natural for an RTL reader.

• Review images: photos with strong left-to-right composition or embedded English text may need replacing rather than mirroring.

4. Handle numerals, phone numbers and mixed text

• Decide on a numeral style and use it consistently. Some audiences expect Western digits (0–9), others Arabic-Indic digits. Ask the clinic what its patients use on signage and printed materials.

• Keep phone numbers readable. Numbers, plus signs and Latin text inside Arabic sentences can display in an unexpected order. Wrap phone numbers, email addresses and URLs in an element with dir="ltr", or use the bdi element where the direction is unknown, and test in several browsers.

• Check prices, dates and times in the same way. Write dates in a format the local audience recognises.

• Watch page titles: the W3C article notes a workaround for RTL page titles that begin with Latin text, using a right-to-left mark.

5. Plan bilingual switching

Many clinics need Arabic and English.

• Give each language its own URL so each version can be shared and indexed.

• Set lang and dir per page, so English pages are lang="en" and left to right.

• Put the language switcher in a predictable place and label each option in its own language (“English”, “العربية”), not with flags.

• Switch to the equivalent page, not the homepage, when a visitor changes language.

• Translate everything, including buttons, form labels, error messages, alt text and meta descriptions. Use a human translator for medical content.

6. Build forms that work in Arabic

• Align labels and fields to the right and place icons or helper text on the correct side.

• Use dir="auto" on free-text fields where patients might type in either language. The W3C article also describes the dirname attribute, which sends the field’s direction to the server along with its value.

• Accept both Arabic and Western digits in phone fields, or convert them reliably.

• Write clear Arabic error messages and make sure they are announced to screen readers.

• Ask only for what you need to book an appointment. Avoid collecting medical history through a general contact form.

7. Make contact easy: phone, WhatsApp, map and hours

• Show a tap-to-call phone number prominently on mobile.

• Offer WhatsApp if the clinic actually staffs it, and state when messages are answered. Don’t promise instant replies.

• Embed a map and give a written address with landmarks, parking and access notes.

• List opening hours clearly, including weekend days and any changes during public holidays or Ramadan.

• Add an emergency notice telling patients not to use the website, forms or messaging for urgent medical problems, and to contact emergency services instead.

8. Check accessibility

• Follow the W3C’s Web Content Accessibility Guidelines (WCAG). The W3C encourages using the latest version of WCAG, which is WCAG 2.2 at the time of writing.

• Test with a screen reader in Arabic to confirm reading order follows the visual RTL order.

• Check colour contrast, focus states and keyboard navigation in the mirrored layout.

• Write alt text in Arabic on Arabic pages.

9. Be careful with health claims and privacy

• Avoid promises about outcomes, such as guaranteed results or “painless” treatment, and keep before-and-after images and patient stories within the rules that apply to you. Check the advertising rules of your local health authority and professional regulator before publishing.

• Show real qualifications for each practitioner, accurately and in both languages.

• Publish a privacy policy explaining what data forms collect, where it is stored and who can see it. Get local advice on health data protection requirements.

• Get consent before using patient photos, names or reviews.

10. Final pre-launch checks

1. Every Arabic page has lang="ar" and dir="rtl" on the html element.

2. Navigation, icons and sliders are mirrored correctly; logos and non-directional icons are not.

3. Phone numbers, emails and prices display in the right order.

4. The language switcher goes to the equivalent page.

5. Forms work in Arabic on a phone, with clear errors.

6. Map, hours, phone and WhatsApp details are correct.

7. Health claims and privacy wording have been reviewed.

A starting point on Framer

If you are building on Framer, Zabarjad, an Arabic RTL clinic website template for Framer, is $59 at the time of writing (October 2026). See the product page for what is included, and run it through this checklist with your own clinic’s content before launch, as you would with any template.

Whichever route you take, work through the list above page by page. Most RTL problems are easy to fix once someone looks for them.