Keyboard accessibility basics demos

Default

regular link

image replacement with text indent

image replacement with extra <span> positioned off-left

Default with overflow:hidden

regular link

image replacement with text indent

image replacement with extra <span> positioned off-left

Outline suppressed

regular link

image replacement with text indent

image replacement with extra <span> positioned off-left

a { outline: none;}

Outline suppressed, reintroduced on :focus

regular link

image replacement with text indent

image replacement with extra <span> positioned off-left

a { outline: none; }
a:focus { outline: thin dotted; }

Outline suppressed, reintroduced on :focus, suppressed on :active

regular link

image replacement with text indent

image replacement with extra <span> positioned off-left

a { outline: none; }
a:focus { outline: thin dotted; }
a:active { outline: none; }

Outline suppressed on :active only

regular link

image replacement with text indent

image replacement with extra <span> positioned off-left

a:active { outline: none; }