Accessible Capitalization
Why all-caps creates barriers and when to use CSS instead
Capitalization affects readability and comprehension for many users. Text written entirely in uppercase can slow reading speed, reduce comprehension, and feels aggressive in tone.
What to avoid
<h2>UPCOMING EVENTS</h2>
<p>PLEASE NOTE: THE LIBRARY WILL BE CLOSED ON MONDAY.</p>- All-caps text is harder to read because words lose their distinctive shapes
- Screen readers may spell out individual letters depending on settings and context
- The tone reads as shouting, which is not appropriate for most content
Using CSS instead
If a design requires uppercase styling, use CSS text-transform: uppercase rather than writing content in uppercase. Screen readers read the source text, not the CSS-transformed text - so the content remains properly readable by assistive technology while appearing visually as uppercase.
/* Apply uppercase visually without changing the source text */
nav a { text-transform: uppercase; }
.eyebrow { text-transform: uppercase; }<!-- Source text is sentence case -->
<h2>Upcoming Events</h2>
<p>Please note: the library will be closed on Monday.</p>The visual presentation is uppercase (if the design calls for it), but the underlying text is properly cased. Screen readers announce "Upcoming Events" clearly, not "U - P - C - O - M - I - N - G".
Title case
Title case (Every Major Word Capitalized) is also harder to read than sentence case for body text. Use sentence case for most content. Reserve title case for short headings, proper nouns, and product names where it is semantically appropriate.