Links for adjusting font sizes

Events happening in the community are now at Drupal community events on www.drupal.org.
Clive Lansink's picture

Hello

In addition to links to skip to the main content of web pages, people nowadays seem often to want links for adjusting contrast and font size. Is this easy using Drupal and can someone please head me in the right direction regarding this?

Thank you.

Comments

Browsers do a really good job of resizing text

hughbris's picture

I passionately believe you are better off teaching them to use the functionality browsers have had forever to resize text within the browser. Doing otherwise makes them dependent on (and expectant of) such font resizing features, which doesn't help them on sites which don't have it. Teach a person to fish and all that.

I don't like to see web pages (and search engines) cluttered with widgets that replicate what everyone already has. Your users will wonder when they go to a new site why the font size has reverted, whereas adjusting it in their browser should persist across sites. It's a far better option. It was envisioned in the HTML standard from the beginning. Websites didn't suddenly become accessible when these widgets appeared. How could re-implementing something browsers already do be a worthwhile pursuit?

I know you mean well, but I'd ask you to bear in mind that many see what you ask for as an accessibility myth. Remember HTML's default state is accessible. It doesn't need a lot of help. All the best :)

I would agree with hughbris,

justanothermark's picture

I would agree with hughbris, recreating browser functionality is a bad idea. The time could be better spent on making the default style more accessible. Some aspects of this (with some guidelines for fonts) have been discussed in the How to adjust font sizes in Drupal 7.x thread and there is plenty of information elsewhere online.

Similarly, using a tool such as Colour Contrast Check to ensure that the colours meet WCAG contrast guidelines by default would make an option to increase contrast redundant.


Mark Jones
Livelink New Media

Increasing Contrast Is Not Always What the User Needs

cliff's picture

Hi, Mark! You are right that contrast on Web pages should conform with WCAG to meet the needs of most users, but most people—including, apparently, the authors of WCAG—don't understand that some disabilities make too much contrast the problem.

For example, people with low moderate vision must magnify text and get very close to the screen to read. For them, white or even off-white regions produce too much glare. To make reading comfortable, they must adjust the contrast down. The color combinations that work for them vary widely from person to person. And for some folks with low moderate vision, a comfortable level of contrast is so low that I can barely perceive the text.

Although it's possible to set text and background colors in your browser settings, that doesn't quite fit the needs of these folks. For example, they don't need headings to be bigger than the text—they just need each level to be distinctive. "Distinctive" often means a unique background color for each level of heading. And often they prefer to have the headings smaller than their enlarged body text. After all, you don't spend much time reading headings; you do spend a lot of time reading the paragraphs below them. These adjustments go beyond the options available in the browsers I'm familiar with.

So a useful feature would allow users to edit the stylesheet of a site to make the contrast and text size suit their own needs. Most would never touch it. But to the few who could benefit from it, such a feature would make the difference between agony and, well, perhaps not ecstasy, but at least comfort.

A Good Point

justanothermark's picture

A very reasonable point. As is often the case with accessibility issues, it's easy to miss something that is obvious to someone else. This is why we need standards after all … although it does help if they're right.


Mark Jones
Livelink New Media

Slider widget for color & contrast

mgifford's picture

I just had this vision based on your post Cliff of a widget that allows you to modify font sizes, colors & contrast nicely with slick jQuery sliders. Not a %+ or $- but a simple slider that contains all of this control. Perhaps even switching to fonts like either
- Dyslexie http://www.youtube.com/watch?v=VLtYFcHx7ec
- Tiresias http://www.tiresias.org/fonts/fonts_download.htm
- Aphont http://www.aph.org/products/aphont.html

I actually agree too

Clive Lansink's picture

Actually I agree with both of you. But what if the customer wants such links? A lot of the blindness agencies around the world for exsample have such links prominently on their websites. So also does at least one screen reader manufacturer. There must be a reason for this. I suspect the answer might be that if you build such functionality into the website itself, then if the website is well designed, it can make such adjustments whilst still optimising readability. When adjusting font size for instance, it could also adjust spacing and layout so the website still has the desired visual structure. This might not be the case for instance if a browser just manually increased its fontsize.

In the end the position I am in is that this is what the customer wants.

Text Size Module

justanothermark's picture

That's fair enough. I've not tried it but the Text Size module seems to do what you want.


Mark Jones
Livelink New Media

The Customer Is Always Right, Right?

cliff's picture

At times, educating customers does need to take a back seat to meeting their requests. Clive, take a look at our wiki, Modules That Support Accessibility, and you'll find two tables. In the first table you might find modules that are useful for features you haven't yet considered.

The second table lists modules for resizing text. Below it, you'll find pretty much the same discussion we're having here and links to a more extensive discussion of these points. I think that more extensive discussion also links to a page on Mike Gifford's site where he explains how to use browser resizing. We could actually go further than he does and explain that you can adjust the default font size in your browser settings.

You might see what your customer thinks of that approach. If they persist—or if you have bigger issues to address—see whether either Text Size or Text Resize will meet your needs.

Thanks Cliff!

mgifford's picture

I'm hoping for feedback from users & experts on the setup we've done on our site. The way we approached educating people about text size, providing color contrast, etc.

We've got a post here, but there's also a widget at the top right with color options:
http://openconcept.ca/blog/mgifford/implementing-accessibility-best-prac...

Customer Education

mgifford's picture

Firstly, there are some great modules listed here to help you resize the text of your page.
http://drupal.org/node/394252

The goal it to be able to make your site zoom in 200% without breaking. This takes testing.

You can see in the dropdown in the top right here how we've tried to address this - http://openconcept.ca - by simply having an educational page with a video. Users need to be reminded that they can resize the text of their screen as they aren't used to doing it in any other way than using the +- buttons provided by text resize widgets.

There are easy modules to implement & theme this. If you've tried to explain to the client that it isn't a best practice then that's fine. It's not like they are asking for lots of animated gifs or something.

Most blind & visually impaired organizations are not run by techies in my experience. Many do include a text resizing widget. It would be really interesting to hear their input on threads like:
http://groups.drupal.org/node/85254

And test with bigger fonts

charles belov's picture

"The goal it to be able to make your site zoom in 200% without breaking. This takes testing."

Yes, the web designers needs to actually test that using an enlarged font will result in a usable website, with no overlapping text or regions resulting from use of absolute positioning or text running out of its block.

Charles Belov
Webmaster
San Francisco Municipal Transportation Agency (SFMTA)

Teach a (wo)man to fish

bowersox's picture

I agree with the others who prefer to teach people to use the browser font resizing rather than re-creating it. The problem is that 95% of websites will never provide a built-in font size choice. Those solutions will only help with a small fraction of websites, whereas teaching people to use the browser font resizing applies to 100% of websites.

Accessibility

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: