Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Frederik Creemers
Courses Plus Student 573 PointsWeb Accessibility tips.
There are a lot of articles about making web sites and applications accessible to all users, and they're great. But, being a visually impaired web surfer myself, there are a couple of annoyances that keep cropping up that I don't see mentioned in any articles, so I thought I'd share them here.
Messages that show up on hover, and immediately disappear when the mouse leaves the area.
I'm visually impaired, but not blind, so I use a screen magnifier to browse the web. This means that I only see part of the screen. And the setting I use, which is most comfortable for me in most cases, means that I can't move the mouse without moving the region of the screen that I see. This means that sometimes hovering over a button to reveal content means that I don't see the entire box where the content is being shown. A good solution would be to keep the box shown as long as the mouse is on the button that reveals the box or on the box itself, instead of just the button. An even better idea is just to try not to rely on hover too much.
Clumns of equal importance
Many sites like pinterest and google+ have multiple columns of content that are equally important, but the content doesn't line up horizontally. When reading multi-column sites, the zoom usually works out in such a way that I only see one column at a time. On many of these sites, the columns form a long stream of content, so it's not always clear to know how your view should go down the page. I've even had cases where I didn't look at the zoomed-out version of a site and started reading, only to realize there was a second column after I'd been on the site for a couple of minutes.j
2 Answers
Dustin Matlock
33,856 PointsHey Frederik, have you maybe tried to zoom using your web browser?
How to set page zoom for all webpages
You can adjust the size of everything on the webpages you visit, including text, images, and videos.
- Click the
on the browser toolbar
- Select Settings.
- Click Show advanced settings.
- In the "Web Content" section, use the "Page zoom" drop-down menu to adjust the zoom.
See more on Changing text, image, and video sizes (zoom) and on Google Chrome and Font size and zoom for Firefox which is roughly the same.
Frederik Creemers
Courses Plus Student 573 PointsYes, and that works for me, but I really prefer the zoom functionality that's built in to the mac. And it's just something I think web designers and developers can do to improve usability.
Dustin Matlock
33,856 PointsThis may be more on the end of Apple's OS X, because with the way web languages are setup, I'm not sure they are able to detect zooming within the OS.
Frederik Creemers
Courses Plus Student 573 PointsHere's a jsFiddle that shows what I mean: http://jsfiddle.net/cE2jy/
The message on the left works perfectly for me, because I can move my mouse into the message. The message on the right hides immediately when the mouse leaves the button. The second example may seem contrived, but thera are sites, like 3vcard.nl that actually do it this way.
Frederik Creemers
Courses Plus Student 573 PointsHere's a jsFiddle that shows what I mean: http://jsfiddle.net/cE2jy/
The message on the left works perfectly for me, because I can move my mouse into the message. The message on the right hides immediately when the mouse leaves the button. The second example may seem contrived, but thera are sites, like 3vcard.nl that actually do it this way.
Dustin Matlock
33,856 PointsGot ya! Accessibility or not, I think that should actually be a design standard when possible, since I really dislike the CSS-only implementation myself. But I think CSS also needs improvement and not everyone likes to use JavaScript fixes.
Frederik Creemers
Courses Plus Student 573 PointsWell, you can do what I did there with css as well: http://jsfiddle.net/cE2jy/1/, here the first button doesn't use javascript at all.
Dustin Matlock
33,856 PointsIs there a way that would let you copy the text inside? I think that would be one of the most important features.
Frederik Creemers
Courses Plus Student 573 PointsYes. The only reason you couldn't copy the text here is because I'm using <button> elements. You can replace them with any other tag, and the text would be copyable. There may even be a way to make the text inside buttons copyable. One gotcha with this technique is that any handlers you apply to the parent also apply to the popover.