ACCESSIBLE CSS: Beware the Use of float:right

Illustration of text layout aligned to the right

Careful when using float:right.

Why?

Used to place content on the right side of a Web page layout, it can be an accessibility mistake!

It can leave screen readers in the dust.

When text is floated to the right, the code is often placed BEFORE other text to its left in the HTML code. The visual order may look correct left to right (with the floated item second) while a screen reader will read the floated item first. Screen readers read files in code order, not in layout order.

Exceptions

You can use float:right if the text is still understandable in the HTML order. Or if you are positioning a decorative image to the right of the text in the layout.

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===