Specificity-A11Y

Specificity-A11Y is an algorithm that is uses by all browsers to determine the CSS declaration what is most relevant to all of the element, which properties apply to each element. The algorithm calculate the weight of the CSS selector to determine which rule from competing CSS declaration get applied to the element. The weight is determined by the number of selectors of each weight category in the selector matching the element (or pseudo-element). If there are two or more declarations providing different property values for the same element, the declaration value in the style block having the matching selector with the greatest algorithmic weight gets applied. Instead of using !important, consider using cascade layers and using low weight specificity throughout your CSS so that styles are easily overridden with slightly more specific rules.

Contrast Ratios, Their Importance, & the W3C

Contrast ratios show what the color contrast is between the front and back of a content item. These ratios are used to determine the readability of a website. The contrast between text on a background is very important so that the text is easy to read for all people. People who are vision impaired, or that have color blindness can have a harder time reading text when the contrast ratio is not high enough. The colors will often look too monochromatic, which is hard to read, or they blend in with the background colors/pattern. Color contrast can be checked by using the browser inspect tools. Simply inspect an element, click on the color square and you can view the ratio and rating of the contrast. You can also check contrast by using various online color contrast analyzers.

The Web Accessibility Initiative (WAI) Working Group is responsible for researching and developing the accessibility rules for web pages. They create the guidelines to follow to ensure that web content is usable by all people. This usability includes not just the end user website, but also content management systems used to build websites and the browsers used to view a site.

WHY MUST YOU MEET THE REQUIREMENT?

CSS specificity is an important concept to learn early on in web programming. Having a thorough understanding of how a browser uses a CSS (and HTML) document to set styles will make programming and design easier all around. Knowing how to implement accessibility options from the start will help create a web page that not only looks better, but functions better for all. Concepts like proper color contrast do not just benefit those with vision impairments. Poor contrast can be hard to read for just about anyone, and having good contrast can make a site much more pleasant to look at and read.