Category: text

No to Text Resize Widgets

Michael Gifford (@mgifford) recently wrote a tweet on text-resizing widgets. It said:

Is it time to scrap text resize widgets and teach people how to resize text http://bit.ly/94jNkv

I totally agree. Say no to text resize widgets. To enlarge text for users, the browser should be used (many reasons below). See this video from OpenConcept on how to text-resize in your browser.

Gifford’s tweet references an article on the subject from almost 3 years ago, Scrap text resize widgets and teach people how to resize text from 456 Berea St. This site had also blogged about the topic a while back in Don’t Use Text Resizing Widgets.

Keep in mind is the issue of misinformation. For example, the very recent article A quick Web Accessibility Checklist actually encourages the use of text resize widgets, or in their words a “Font re-size option”.

Gifford’s tweet sparked many responses with many very good points, which all support why not to implement text-resizing tools on a website. I’ve summarized some reasons from very respectable professionals including @v, @alxp, @johnfoliot, and @ppatel. (Bonus! See slide 12 of Web Accessibility Gone Wild by WebAIM which also discourages the use.)

  • Implementers need to stop setting font to 80% (or lower!) in the default CSS.
  • Text resize widgets only add another layer of complexity on top.
  • Text resize widgets don’t resize text in images.
  • Text resize widgets are site-specific. There’s no standard; each site implements differently.
  • Text resize widgets causes confusion, clutters up the interface.
  • Text resizing is the responsibility of browser; browsers should do this natively. Browsers need a better way to expose this functionality to the user.
  • Users who regularly need larger text have figured this out already on all the sites that lack such a widget.
  • Interface design is not graphic design. Tyrannical control over font size & colors in UI is doing a huge disservice to users.
  • Text resize widgets make the author feel like they are doing good, but only solve problems created by the designer/developer in first place.
  • Not many users I’ve spoken to (@ppatel) use the widgets.

Keyboard Access for Google Maps

Google Maps is awesome, but it is not keyboard accessible. Patrick H. Lauke provides a solution by retrofitting keyboard access into google maps. Brilliant article. (Obviously JavaScript is still required.)

Also, Google Maps provides a text-only option, which is nice for those using assistive devices, mobile devices, low or costly bandwidth, etc.

Don’t Use Text Resizing Widgets

Web sites should not implement text resizing widgets–you know, those little buttons, usually an “A+” and “A-” that increase/descrease the size of the text on the site. The responsibility for providing this functionality lies with the browser, like the forward and back buttons.

Web designers/owners need to put forth more effort in teaching/guiding the user to using the browsers’ features for text resizing. Equally, the browsers themselves should make this feature more obvious and usable.

In addition, most sites I see that use resizing widgets are not very accessible; they seem to add this feature as a cheap replacement (bluff, excuse) for a genuinely accessible web site.

More:

Podcast #47: Alternative Text in Detail

Dennis and Ross discuss alternative text on the web, mostly the ALT attribute in detail. Also discuss alternative text for audio and Flash.

Download Web Axe Episode 47 (Alternative Text in Detail)

News

Announcements

Links

Podcast #34: Design Considerations for Accessibility

Considerations for designing an accessible web site, including discussion on web site conventions, navigation, color, text, and layout.

Download Web Axe Episode 34 (Design Considerations for Accessibility)

[Transcript for Web Axe 34]

Stick to Conventions

  • Search upper right
  • Global navigation across top
  • Sub navigation on sides
  • Icons

Navigation Considerations

  • Skip navigation
  • Indicate visited pages, current page
  • Use breadcrumbs where possible

Color Considerations

  • Ensure enough color contrast
  • Light on dark, or dark on light?
  • If you change the color of an anchor state, change them all
  • Never use color to convey information

Layout Considerations

  • If you have a low vision/large text style sheet, convert layout to one column
  • Pay attention to if it is obvious you can scroll downward or not
  • If Article is broken up between several pages, provide a link to a single page with the whole article for easy printing
  • Try and design for 760px minimum width

Text Considerations

  • Sans-serif fonts are generally easier to read on a screen
    • Print serif fonts are, but light reflects off of paper where screen illuminates light
  • Text Sizing
    • Ensure font can be enlarged with out breaking the design
    • Headers should be larger than regular text (to indicate more importance)
    • Fonts should be decent size, not everyone knows how to resize text

Other Considerations

  • Limit the use of Flash
  • Print Style Sheets
  • Graphical buttons should be text with graphical backgrounds (for sizing without pixelation)
  • Include an access guide, or site help
  • No flickering
  • Audio–plan for text-only version and links
  • Video–plan for real-time captioning