★Harbour Lights
\nTwo nights of music on the old harbour wall.
\nTicketly 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.
\nPeople 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.
\nCompare Ticketly’s refund policy before and after:
\n\n\nBefore: 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.
\n
\n\nAfter: You can get a full refund until 14 days before the festival. After that, we only give refunds if the event is cancelled.
\n
The techniques are simple to state and take practice to apply:
\nScreen 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:
<html lang="en"> (or ar, fr, and so on). A missing page language is one of the six most common failures on the web.lang.Here is the Arabic card on the English page, with the title ليالي الطرب marked up as Arabic:
\n<html lang=\"en\">\n…\n<article class=\"card\">\n <h3 lang=\"ar\" dir=\"rtl\">…</h3> <!-- the Arabic title -->\n <p>An evening of classic Arabic music at the old harbour.</p>\n</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.
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.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:
| Physical | \nLogical | \n
|---|---|
margin-left | \nmargin-inline-start | \n
padding-right | \npadding-inline-end | \n
left: 0 | \ninset-inline-start: 0 | \n
text-align: left | \ntext-align: start | \n
border-left | \nborder-inline-start | \n
.card {\n padding-inline: 1rem;\n border-inline-start: 4px solid #5b3cc4;\n text-align: start;\n}\n.badge {\n margin-inline-end: 0.5rem; /* the gap after the icon, on whichever side that is */\n}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.
\n","toc":[{"id":"sec-1","text":"Plain language","level":2},{"id":"sec-2","text":"Language of the page and its parts","level":2},{"id":"sec-3","text":"Direction: rtl, auto and bdi","level":2},{"id":"sec-4","text":"Layout that mirrors itself","level":2}],"takeaways":["Plain language, short sentences and instructions that don’t depend on shape, colour or position help people with cognitive disabilities and everyone reading in a second language.","Set lang on the html element for the page and on any passage in another language, so screen readers switch voice and pronunciation.","Use dir=“rtl” for Arabic and Hebrew content and dir=“auto” for user-generated text whose direction you can’t know in advance.","CSS logical properties such as margin-inline-start and text-align start mirror automatically in right-to-left layouts."],"further":[{"title":"W3C: Understanding 3.1.2 Language of Parts","url":"https://www.w3.org/WAI/WCAG22/Understanding/language-of-parts.html"},{"title":"W3C Internationalization: Structural markup and right-to-left text in HTML","url":"https://www.w3.org/International/questions/qa-html-dir"},{"title":"MDN: CSS logical properties and values","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values"}],"quiz":[{"q":"Ticketly’s English page shows the Arabic event title “ليالي الطرب” with no lang attribute. What does a screen reader set to English typically do?
","options":[{"text":"Detects the script and switches to an Arabic voice automatically, in every screen reader","why":"Some screen readers try to detect scripts, but behaviour varies widely and often fails. lang is the reliable signal WCAG requires."},{"text":"Skips the text, because it can’t be read","why":"The text is still in the tree. The problem is how it is spoken, not whether it is read."},{"text":"Reads it with English pronunciation rules or spells out characters, which is unintelligible","why":"Correct. Adding lang=“ar” (3.1.2 Language of Parts) lets the screen reader switch to an Arabic voice for that phrase."},{"text":"Translates it into English before reading","why":"Screen readers don’t translate content. They only choose a voice and pronunciation rules."}],"answer":2},{"q":"Ticketly lets attendees post reviews, written in English or Arabic. Which markup handles direction best for each review’s text?
","options":[{"text":"<p dir="rtl"> on every review","why":"That would make English reviews right-to-left, putting full stops and parentheses in the wrong places."},{"text":"<p dir="auto"> on every review","why":"Correct. dir=“auto” sets the direction from the first strong character, so Arabic reviews become right-to-left and English ones left-to-right."},{"text":"No dir attribute; the page’s direction is enough","why":"The page is left-to-right, so Arabic reviews would be laid out with punctuation and numbers in the wrong positions."}],"answer":1},{"q":"Which instruction meets 1.3.3 Sensory Characteristics?
","options":[{"text":"“Press the round green button on the right.”","why":"Shape, colour and position are meaningless to screen reader users and change on small screens."},{"text":"“Use the button below to continue.”","why":"The word “below” relies on visual position, which depends on layout and is unknown to screen reader users."},{"text":"“Press Continue to choose your seats.”","why":"Correct. It names the control by its visible label, which works for everyone, including voice control users."},{"text":"“Click the arrow icon.”","why":"The icon’s shape is a sensory characteristic, and “click” excludes keyboard and voice users."}],"answer":2},{"q":"An icon badge sits before a card title with margin-right: 8px. On Ticketly’s Arabic page, the gap ends up on the wrong side. What is the cleanest fix?
margin-inline-end: 8px","why":"Correct. Inline-end is the right side in left-to-right text and the left side in right-to-left text, so one rule works for both."},{"text":"Add an [dir="rtl"] .badge { margin-left: 8px; margin-right: 0; } override","why":"It works, but you would need overrides like this for every directional property. Logical properties remove the duplication."},{"text":"Use transform: scaleX(-1) on the Arabic page","why":"Mirroring with a transform also mirrors text and images, making them unreadable."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"Two nights of music on the old harbour wall.
\nأمسية من الموسيقى العربية الكلاسيكية في الميناء القديم.
\nAn evening of classic Arabic music at the old harbour.
\nTwo nights of music on the old harbour wall.
\nأمسية من الموسيقى العربية الكلاسيكية في الميناء القديم.
\nAn evening of classic Arabic music at the old harbour.
\nThe page is English (<html lang="en"> is already set). The second card’s title and description are Arabic, and reviewers may type in either language. Fix it:
lang="ar" and right-to-left direction..note) English and left-to-right.lang="ar" makes screen readers switch to an Arabic voice for the title and description (3.1.2 Language of Parts), and dir="rtl" gives that block a right-to-left base direction, so text starts on the right and punctuation lands correctly. The English note stays outside the wrapper and keeps the page’s language and direction. dir="auto" lets each form field follow its first strong character. Finally, margin-inline-end puts the badge’s gap after the icon in both directions, and the other logical properties mirror the accent border and alignment too, all from a single set of rules.