Specificity | A11Y

CSS Specificity

CSS Specifity is determining the weight of a CSS declaration through an algorithm. The calculation of a declaration will determine which CSS selector will be applied to an element when there are competing declarations.

Css Specificity is determined by finding the number of IDs, Classes, and Type Selectors in a declaration. This will give you a 3 digit value and the highest value is the styling that will be applied.

The rules for calculating CSS Specificity are IDs+Classes+elements. For example, if the declaration is: p #section #menu {color: white;}, the value would be 201 as there are two Ids and one selector. The declaration with the highest value will win, and in cases of a tie, the higher line number will win.

*inline styles will override external CSS styling and !important will override all stylings.

Link psuedo classe must be in the order LVHFA- link, visited, hover, focus, and active. The reason for this is that every selector has specificity. In the case of link pseudo-classes, they all have equal specificity so you need to ensure that the order is such that they don't override each other. For example, you are able to hover over an active or unvisited link, but if hover is the top on you stylesheet, it will not work.

Contrast Ratios

Contrast Ratios is a value determined by the contrast between text and its background.

Determining contrast ratio is taking into account the text color, background color, and font size. Larger text doesn't require as high of a contrast ratio due to it being easier to read.

Importance of Contrast Ratios

Contrast ratios are important for accessibility. Orange text on a blue background may be easy for a developer and most users to read. However, someone who has a color vision deficiency would not be able to read this text if there was not enough contrast between the two colors. It is extremely important to make sure that your site is usable to all users, not just the majority.

There are many tools availiable to determine your Contrast Ratio, including one within your browser itself using 'inspect' on your webpage.

W3C Accessibility Rules

WCAG documents are developed by the AGWG (Accessibility Guidelines Working Group) which is a part of the W3C. The mission of the AGWG is to develop specifications to make web technologies accessible for people with disabilities.

Summary

It is very important to follow the accessibility guidelines set in place by the AGWG to ensure all users are able to access all elements of your site.