- 7 Tem 2013
- 8,193
- 654
Introduction
[FONT="]One of the best websites out there, in terms of functionality, is, and always has been, Amazon. In terms of accessibility though, they're not too good.[/FONT]
The problem
[FONT="]Amazon's menu tabs, for example, look really nice but are totally inaccessible. First of all, they're missing ALT tags. Additionally, the W3Cs accessibility guideline 3.1 (priority 2) clearly states:[/FONT]
The solution
[FONT="]CSS, as usual, comes to our rescue. Adjust the text size in your browser now. Go on, do it. Did you see how the menu tabs at the top of the screen increased in size with the text and it all fits perfectly. Today, you're going to learn how to do this.[/FONT]
[FONT="]We start with a simple link:[/FONT]
[FONT="]One of the best websites out there, in terms of functionality, is, and always has been, Amazon. In terms of accessibility though, they're not too good.[/FONT]
The problem
[FONT="]Amazon's menu tabs, for example, look really nice but are totally inaccessible. First of all, they're missing ALT tags. Additionally, the W3Cs accessibility guideline 3.1 (priority 2) clearly states:[/FONT]
When an appropriate markup language exists, use markup rather than images to convey information
[FONT="]This basically means don't use images to display text - site users with poor vision are unable to resize text that's displayed through images. Find out how to resize text in your browser, if you don't already know.[/FONT]The solution
[FONT="]CSS, as usual, comes to our rescue. Adjust the text size in your browser now. Go on, do it. Did you see how the menu tabs at the top of the screen increased in size with the text and it all fits perfectly. Today, you're going to learn how to do this.[/FONT]
[FONT="]We start with a simple link:[/FONT]
Kod:
<a href="#">Home</a>
Kod:
a { color: #000; background: #fb0; text-decoration: none }
[FONT="]
[FONT="]Needs a bit of work, right?[/FONT]
Adding the left corner
[FONT="]We need to make a small image with the same colour:
Kod:
a{ color: #000; background: #fb0 url("left-tab.gif") left top no-repeat; text-decoration: none }
[FONT="]
[FONT="]We're getting there, but we need to move that text over a bit. It's pretty simple to do with a bit of padding:[/FONT]
Kod:
a { color: #000; background: #fb0 url("left-tab.gif") left top no-repeat; text-decoration: none; padding-left: 10px }
And the right corner
[FONT="]We can only assign one background image to a tag so we need to make a new tag and assign an image to that. We can use:[/FONT]
Kod:
<a href="#"><span>Home</span></a>
Kod:
a span { background: url("right-tab.gif") right top no-repeat; }
[FONT="]
[FONT="]Perfect! So now you can... wait a minute, can you spot why it's not so perfect? That's right, we forgot to assign some padding to that <span> tag:[/FONT]
Kod:
a span { background: url("right-tab.gif") right top no-repeat; padding-right: 10px }
[FONT="]
[FONT="]Now that really is perfect! Resize the text again and see how it looks![/FONT]
Son düzenleme: