03 - Research and Documentation - Specificity - A11Y

CSS specificity is an algorithm represented as a three-column number that determines which style rule is applied when multiple rules target the same element. It follows a structured hierarchy based on selector types. The three categories, or weights, that make up the value include ID, class, and type selectors. It is sometimes considered as four values if inline styles are included, since they always have the highest priority and override all other styles by effectively adding a leading value of 1 that makes them the strongest. The first column represents IDs, the second column represents classes, attributes, and pseudo-classes, and the third column represents types such as elements and pseudo-elements. Once a style rule is assigned a specificity value, the browser reads the values from highest to lowest to determine which rule to apply. If two style rules have equal specificity, the rule that appears last in the stylesheet will take precedence.

Understanding specificity is important when working with link pseudo-classes, which must follow the LVHFA order: link, visited, hover, focus, and active. Because all of these selectors have the same specificity, later rules override earlier ones. To ensure that link styles function correctly, they must be written in the proper order so they display as intended. If they are not written in the correct order, certain states, such as hover or active, may not appear properly. For example, placing :hover before :visited can prevent hover styles from being applied to visited links.

Some browser developer tools, like Google Chromes tools and Firefox Developer Tools, provide a simple way to evaluate color contrast ratios for links and buttons. By right-clicking an element and selecting Inspect, you can view the Styles or Computed panel and locate the color property. Clicking the color swatch opens a color picker that displays the contrast ratio between the text and its background, along with indicators showing whether it meets accessibility standards such as AA (minimum standard between 3:1 and 4.5:1), AAA (higher standard between 4.5:1 and 7:1), or warnings if the contrast is too low.

Color contrast refers to the difference between background and foreground content, which is usually text, and it must be strong enough to ensure legibility. This is important for accessibility, especially for users with reduced vision, color blindness, or certain neurological conditions. In addition, good color contrast benefits all users, since not everyone views a website under ideal conditions. The goal is to keep users engaged on your site rather than losing them because they cannot read or interact with your content. Therefore, strong color contrast helps ensure that your content is accessible and readable for everyone.

Meeting color contrast ratios is essential for accessibility because it ensures that text is readable for all users, including those with visual impairments such as low vision or color blindness. If contrast is too low, users may struggle to distinguish text from the background, making the content difficult or even impossible to use. An example of this would be white text on a lime green background or white text on a light gray background.

Accessibility standards, including color contrast requirements, are established by the World Wide Web Consortium (W3C) and its accessibility-focused group, the Web Accessibility Initiative (WAI). This group is a public-interest, non-profit organization whose vision is to make the web and related technologies accessible so that people with disabilities around the world can participate equally in the digital environment. They publish guidelines that outline best practices for making web content accessible to all users.

The group at the W3C that sets accessibility rules is the accessibility-focused group called the Web Accessibility Initiative (WAI). This group is a public-interest, non-profit organization that has a small number of official staff members located around the globe, while also receiving participation from volunteers who help review, implement, and promote the guidelines. The rules this group helps establish are then published on the WAI website, where they provide tips, guidance, and sometimes even visual examples of how to implement these standards. Some of the areas they help define include color contrast requirements, keyboard navigation, and screen reader compatibility, along with many other accessibility standards.

In summary, CSS specificity and accessibility serve different purposes but are both critical to effective web design. Specificity ensures that styles are applied correctly and, when used properly, can be easy to manage and override when needed. Accessibility, on the other hand, ensures that all users can interact with your site regardless of their abilities. The Web Accessibility Initiative (WAI) helps set the standards that keep websites accessible, and by understanding these requirements, developers can ensure their sites are usable for everyone.

One example is ensuring that links have sufficient color contrast while also including visual cues beyond color, such as underlines or descriptive text, so users with color vision deficiencies can still identify them. By keeping specificity simple, following proper pseudo-class order, and adhering to accessibility standards like color contrast, developers can create websites that are both functional and inclusive.