Plain Language, Language and Direction

Ticketly is adding an Arabic event this year: ليالي الطرب (Tarab Nights), with the venue name and description in Arabic on the otherwise English page. The first test with NVDA was a disaster: the English voice tried to pronounce Arabic letters one at a time. And the Arabic card’s icon, padding and text alignment were all on the wrong side. Words matter for accessibility in two ways: how easy they are to understand, and how correctly software can process them.

Plain language

People with intellectual and learning disabilities, dyslexia, brain injuries or memory loss, along with everyone reading in a second language or at the end of a long day, benefit from text that is easy to follow. WCAG’s only formal criterion on reading level, 3.1.5, is AAA, but plain language is still one of the most effective accessibility improvements you can make.

Compare Ticketly’s refund policy before and after:

Before: Notwithstanding the foregoing, ticket holders who elect to request reimbursement subsequent to the 14-day pre-event threshold shall be ineligible for remuneration save in exceptional circumstances.

After: You can get a full refund until 14 days before the festival. After that, we only give refunds if the event is cancelled.

The techniques are simple to state and take practice to apply:

• Put the most important point first, in the heading and in the first sentence.
• Use common words and short sentences. One idea per sentence.
• Use the same name for the same thing everywhere: if it is a “pass” on the card, it isn’t a “ticket bundle” at checkout (3.2.4 Consistent Identification).
• Write instructions that work without sight. “Press the green button on the right” relies on colour and position; “Press Continue” works for everyone (1.3.3 Sensory Characteristics).
• Explain abbreviations the first time: “VIP lounge (the covered area beside the stage)”.

Language of the page and its parts

Screen readers use the lang attribute to choose a voice and pronunciation rules. Browsers also use it for hyphenation, font selection, spell-checking and translation. Two criteria apply:

• 3.1.1 Language of Page (A): <html lang="en"> (or ar, fr, and so on). A missing page language is one of the six most common failures on the web.
• 3.1.2 Language of Parts (AA): any passage in a different language gets its own lang.

Here is the Arabic card on the English page, with the title ليالي الطرب marked up as Arabic:

<html lang="en">
…
<article class="card">
  <h3 lang="ar" dir="rtl">…</h3> <!-- the Arabic title -->
  <p>An evening of classic Arabic music at the old harbour.</p>
</article>

Now NVDA switches to an Arabic voice for the title and back to English for the description. You don’t need lang on proper names or on words that have been absorbed into English, like “café”; it is for passages a reader would pronounce in the other language.

Direction: rtl, auto and bdi

Arabic, Hebrew, Persian and Urdu are written right to left. The dir attribute tells the browser the base direction of a block, which controls where the text starts, which side punctuation lands on, and how mixed-direction text is ordered.

• dir="rtl" on <html> for an Arabic page, or on an element for an Arabic part of an English page.
• dir="auto" when you don’t know the direction in advance, such as user names, reviews and search fields. The browser looks at the first strong character.
• <bdi> isolates a short piece of user-generated text inside a sentence, so an Arabic username doesn’t reorder the English text around it: Review by <bdi>سارة</bdi>, 5 stars.

Layout that mirrors itself

In a right-to-left layout, everything horizontal flips: the icon that sat on the left of the title belongs on its right, and padding that pushed text away from the left edge should push from the right. Physical properties such as margin-left and text-align: left don’t flip. Logical properties do:

.card {
  padding-inline: 1rem;
  border-inline-start: 4px solid #5b3cc4;
  text-align: start;
}
.badge {
  margin-inline-end: 0.5rem; /* the gap after the icon, on whichever side that is */
}

Not everything should mirror. Logos, photos, media player controls (play always points right) and numbers stay as they are. Arrows that mean “next” or “back” should flip; the :dir(rtl) pseudo-class lets you target them without extra classes.

That completes Section 4. Ticketly is now structured, operable, readable and correctly spoken. Section 5 turns to proving it: automated testing, manual testing with screen readers, and a full audit.