Awesome CSS Tips

Awesome CSS Tips, disagree with anything? Spark up!

[Awesome CSS Tips @AwesomeCSS]

Tip: Using RGBA to set font/background colours? Don't forget to provide a fallback, browsers that don't support it won't show any colour.

[Awesome CSS Tips @AwesomeCSS]

Try to keep everything flexible, so if the right column were to become the left then the class names still make sense!

[Awesome CSS Tips @AwesomeCSS]

Tip: Use sensible class names + IDs! Don't name something .redheading if it might become blue later on! Keep colours/sizes etc out of there!

[Awesome CSS Tips @AwesomeCSS]

Make sure you always set a font size though, with the previous tip it could be easy to forget on certain elements and they'll come out tiny!

[Awesome CSS Tips @AwesomeCSS]

Tip: If you set your base font size to 10px it makes it really easy setting fonts later on, 14px? 1.4em! 16px 1.6em! #csstotd

[Awesome CSS Tips @AwesomeCSS]

manage where they are in the list. Check out this link for an example! http://t.co/T0mmzenS

[Awesome CSS Tips @AwesomeCSS]

Listing out a load of search results? Using paging? Then take a look at aria-posinset and aria-setsize for a friendly way to help people...

[Awesome CSS Tips @AwesomeCSS]

More tips coming tomorrow! If you have any questions about the tips today or accessibility please ask away :) whatever it is!

[Awesome CSS Tips @AwesomeCSS]

Define WAI-ARIA roles on your pages! It helps identify specific areas of the site for screen reader users… http://t.co/9ihO27iF

[Awesome CSS Tips @AwesomeCSS]

Check out the Card Stock field here for an example of how this works! http://t.co/U0aEw9Ld look for aria-describedby="…"

[Awesome CSS Tips @AwesomeCSS]

Luckily there's an easy solution, you can tell the screen reader that a certain field is "described by" another element...

[Awesome CSS Tips @AwesomeCSS]

… any non form elements. So those useful field description in paragraphs to help users, won't be read at all! :) ...

[Awesome CSS Tips @AwesomeCSS]

Next WAI-ARIA tip for today… when a screen reader enters a form, did you know it goes into "Forms Mode"! and it won't read out...

[Awesome CSS Tips @AwesomeCSS]

If you're looking to do some testing of your own with a screen reader I highly recommend NVDA, free and fantastic http://t.co/X6X4lAE2

[Awesome CSS Tips @AwesomeCSS]

Long tip huh! 2 more coming later on.

[Awesome CSS Tips @AwesomeCSS]

Finally do some reading on aria-live. This can be set to polite, assertive or off. And will interrupt the user or not depending on state.

[Awesome CSS Tips @AwesomeCSS]

This is very useful when returning error messages, updating messages, character counts ala twitter and much more...

[Awesome CSS Tips @AwesomeCSS]

… when the content changes in that element! The changed content will be read out to the user as if they'd just happened upon it!

[Awesome CSS Tips @AwesomeCSS]

This is where WAI-ARIA shines, adding the attribute aria-atomic="true" to an element or parent container will notify the screen reader...

[Awesome CSS Tips @AwesomeCSS]

Screen readers read through a web site in a linear fashion, they're not aware when content changes on the page unless you tell it!