Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

 

Accessibility and Interactive Buttons

Interactive Button accessibility issues


Accessibility

Both the "normal" interactive buttons [ Insert->Interactive Buttons ] and the "Swap [background] Buttons" alternative share some Accessibility shortfalls:

  • the text on the button is an image and cannot be resized by the user.
  • For the "Swap [background] Buttons" method, lack of CSS support in the browser will make the buttons disappear. Adding a title attribute to the link may alleviate this problem a little - but only when the user hovers over the link (if they ever find the link to hover over, that is).
    <a href="#" title="Test Button"><img alt="Test Button" src="images/tp.gif" width="122" height="24" /></a>
  • Enlarging the text may cause the link text in the "Plain Background" method to overflow the button background. This can be prevented by planning the button sizes beforehand.

The tables below emulate some of the problems and deficiencies.

"Normal" Interactive Buttons

Button as described: Test Button
No image support: Test Button
Large fonts or resized text: Test Button

Swap buttons in background

Button as described: Test Button
No CSS support (uses browser defaults): Test Button
No CSS support, with title attribute: Test Button
No image support: Test Button
No image support, with title attribute Test Button

Plain buttons in background

Button as described: Test Button
No CSS support (uses browser defaults): Test Button
No image support: Test Button
Large Fonts or resized text: Test Button