Up and down arrows (↑ and ↓) in HTML
The upwards and downwards arrows are U+2191 and U+2193, with the named references ↑ and ↓. They are the conventional glyphs for sort direction and scroll affordances.
At a glance
- Character
- ↑ ↓
- Named entity
- ↑ ↓
- Decimal reference
- ↑ ↓
- Hex reference
- ↑ ↓
- Unicode code point
- U+2191, U+2193
- Unicode name
- UPWARDS ARROW, DOWNWARDS ARROW
- In the entity reference
- Arrows
In detail
Their commonest job is marking which column a table is sorted by and in which direction. The glyph communicates that to a sighted user and nothing to anyone else, which is why the actual mechanism is the aria-sort attribute on the header cell. Set it to ascending or descending on the sorted column and remove it from the others, and the arrow becomes what it should be: a visual echo of state that is already announced.
The pairing also carries a value change in dashboards, where an up arrow beside a percentage means the metric rose. Up is not automatically good: a rise in error rate or churn is bad news drawn with the same glyph, so colour and wording have to carry the sentiment separately from the direction.
A scroll to top control is the other frequent use, and it has the same accessible name problem as any icon only button. The character on its own announces as upwards arrow, which describes the picture rather than the action. Give the button a label saying back to top and hide the glyph.
There is a related character worth knowing, the downwards arrow with a corner leftwards at U+21B5, which is the conventional glyph for a return or enter key. It has the named reference ↵ and it appears in keyboard hints, where an arrow that just points down would be read as a direction rather than as a key.
Examples
<th aria-sort="ascending">
<button type="button">
Size <span aria-hidden="true">↑</span>
</button>
</th>
<th>
<button type="button">Name</button>
</th><p>Press <kbd>↵</kbd> to submit.</p>↵ is U+21B5, the downwards arrow with corner leftwards.
Things that catch people out
- An arrow in a table header is not a sort announcement. Without aria-sort, a screen reader user cannot tell which column is sorted.
- Up does not mean good. A rise in a bad metric drawn with an up arrow and a green colour tells the reader the opposite of the truth.
- A scroll to top button whose only content is the glyph has no accessible name and will be flagged by any automated audit.
Try it: HTML Entity Reference
Search 152 entities across 9 categories, switch the copy format between the character, the name, the decimal form and the hex form, and copy in one click.
HTML Entity Reference
LOCAL · Browser-OnlySearchable reference of 150+ HTML entities with one-click copy in any format
152 entities across 9 categories
Commonly Used
→Arrows(13)
±Math(35)
$Currency(8)
…Punctuation(21)
©Symbols(24)
πGreek(30)
½Fractions(6)
●Geometric(7)
æLatin Special(8)
Click any entity card to copy it in your chosen format. All data is embedded in the page and works offline.
Related HTML entities
All html entities →Right arrow (→) in HTML
The rightwards arrow at U+2192, its entity forms, using it in a call to action without confusing a screen reader, and how it behaves in right to left text.
Left arrow (←) in HTML
The leftwards arrow at U+2190, its entity forms, why a back link needs a real destination, and the direction problem in right to left interfaces.
Diagonal arrows: north east, south east and neighbours
The four diagonal arrows at U+2196 to U+2199, their numeric references, the external link convention, and why they have no named HTML entities.
Double arrows (⇐, ⇒, ⇔) in HTML
The double stroke arrows at U+21D0, U+21D2 and U+21D4, their case sensitive entity names, and what implication and equivalence actually assert.
Alpha (α) in HTML
The Greek letter alpha at U+0391 and U+03B1, its entity forms, its meanings in transparency and statistics, and the Latin A it is indistinguishable from.
Beta (β) in HTML
The Greek letter beta at U+0392 and U+03B2, its entity forms, its meanings in regression and finance, and the German eszett it is mistaken for.
Tools for this
- HTML Entity Reference Free online HTML entity reference - search and copy HTML entities with live preview
- HTML Entity Encoder Free online HTML entity encoder - encode or decode HTML entities to prevent XSS and display issues