Specificity-A11Y

CSS Specificity

"Specificity" is a term which defines how browsers decide which CSS style rules are the most important and are to be applied on a website. It is a score or ranking, based on 4 categories: inline, ID, class, type. Each category is assigned a number based on the number of incidences that occur of each in a given element. If the browser has multiple declarations to choose from, the one with the highest score will be applied. If two declarations have the same score, the last one in the cascade will be applied. However, any inline styles will be given precedence over any external stylesheets. It should be noted that using "!important" will override everything, but should not be used. It is considered bad practice since it is way too difficult to override if that is needed at a future time.

Contrast Ratios: Definition

To ensure that text on a website is legible and readable by all there needs to be enough contrast between the foreground content (usually text) and the background color or images. This is defined as a ratio between the two. The minimun acceptable rating is "AA" and is defined as a body text ratio greater than 4.5 to 1 and for large text greater than 3 to 1. An enhanced or "AAA" rating is defined as body text ratio greather than 7 to 1 and large text greater than 4.5 to 1. There are color contrast tools available to confirm that a contrast ratio is compliant and also the browser "Inspect" element is another way to quickly check.

Contrast Ratios: Importance

Contrast ratios are just one component of the Accessibilty requirements (A11Y for short) set up by W3C WAI. Having a compliant contrast ratio will ensure readability by those with visual impairment which may be from disabilities, aging, color-blindness, using devices with small viewpoints or in low light situations. This could impact a large number of end users which could prevent them from getting the best experience or even preventing them from using a poorly designed site. Besides being the right and proper thing to do, not being compliant can open the site to legal ramifications.

W3C WAI

The W3C WAI (Web Accessibility Initiative) sets the accessibility rules. Their goal is to not only set the rules and standards, but they also provide strategies and supporting resources so that developers have the tools to ensure their websites are accessible and usable for all end users.

Summary

Understanding the concept of specificity is important especially since there may be more than one developer working on code for a site. If a particular element does not appear as expected, specificity will explain why one declaration is expressed over another.

Since the Internet is integral to the life of so many in todays world, it is essential that no one is prevented from getting the best experience in using, understanding or navigating websites by removing any barriers that could cause problems.