What is specificity and how is it determined?
Specificity is the term used to describe the process or order in which a browser will render conflicting CSS rules when more than one is applied to an HTML element. How specificity is determined is using a set of four numbers, such as “0121”, and calculated as the number “121”. This number is literally read like a human as “one hundred and twenty one”. The higher number (or higher specificity) a CSS rule has, the more priority it will take and will be rendered before lower numbers (or those CSS rules with lower specificity). These numbers are determined as follows:
- The first, left-hand most number is either is determined how many CSS rules are coded in line with the HTML. Inline styles are always provided the highest priority. If there are no inline CSS styles coded, then the number “0” is given. Note: the “!important” will override inline CSS styles, however, should only be used if unable to utilize the specificity with CSS.
- The second, left-hand most number numbers how many IDs are coded. Again, if there are no IDs coded, then the number given is a “0”.
- The second right-hand most number is how many classes, pseudo-classes, or attributes the CSS rule contains. If there are no classes, pseudo-classes, or attributes, then the number given is “0”.
- The last, or right-most, number is how many elements or pseudo-elements the CSS rule has. If there are none, then the number given is “0”.
If two CSS rules have the same specificity, then the one listed higher in the CSS document will be rendered. This is why it is important to provide the media rules last in the document, with the largest width (usually for desktops) listed last.
This is the reason the link pseudo-classes are listed in a particular order (LVHFA, or link, visited, hover, focus, active). All of these link pseudo-classes have the same specificity (inline styles = 0, ID = 0, classes/pseudo-classes/attributes = 1, elements = 1, so total specificity = 11). So how a style appears will be determined by how it is listed on the CSS style sheet. Since a link in its default state is what should appear if the user is not interacting with it, then it is listed first. If there is a style to show it has already been visited, then that appears instead since it is listed in the style sheet after the default style. Then when a user decides to hover over the link, it can now stand out or look like the web designer intended versus the default or visited styles. Lastly, if wanting there to be an active style, when it comes to user experience, this should follow hovering on the link, so therefore it is listed last.
How is color contrast ratio determined using the browser’s developer tools?
Since color ratio is very important for A11Y, browsers can indicate in the developer tools what the color contrast ratio is of an element. This is done similarly between browsers but can offer different information on what the color contrast ratio is depending on browser. In general, the developer tools are opened and the HTML and CSS viewed. From there, in Chrome, there are two ways to determine what the color contrast ratio is. The first is by hovering over the color in the CSS style sheet. There will be information on what pops up for what the ratio is.
The second way is to use the select an element button and then hover over the element for more information. As mentioned in the lecture video, Chrome may struggle with some color contrast ratios, like when there is a color gradient used. The browser, Firefox, can provide additional information on color contrast ratios when it comes to this use of color on a website. When in the developer tools, click on the “Accessibility” tab. After opening up the “Accessibility” tab, find the element whose color needs inspection, and Firebox will provide the color contrast ratio for each spectrum of the gradient.
What are color contrast ratios and why are color contrast ratios important?
Color contrast is the differences in brightness between two colors. Color contrast ratios are a numerical value that measures the differences in brightness. The higher the ratio, the more contrast there is. Choosing higher contrast ratios is important for individuals with visual disabilities and in general makes content easier to read. Since websites are meant to provide information and produce calls to action, if the content is difficult to read, the website is not serving its purpose. Not everyone sees colors in the same way, such as in conditions of different sensibilities of colors. As mentioned in the lecture video and in website coding, universal design is important for not just individuals with disabilities, but also the general population. Our eyesight changes as we age, and sometimes we have medical conditions that may not be an established disability but need to be taken into consideration when thinking through a website’s design. For example, I don’t know how much work goes into it, but I will always seek a light and dark mode (or a less bright mode) for any websites I create (if permitted by the organization I work for as well), since light sensitivity is a big deal for me due to my severe head injury and the ability to utilize dark mode very important.
Accessibility is near and dear to my heart. I will always want to make sure any content I am in charge of creating or maintaining is accessible to all. I hope to continue to research this area as I know my lived experience, but I want to continue to dive deeper into the lived experiences of other individuals with disabilities or differing abilities. I will be honest here, as a nature lover I tend to use a lot of greens and browns – but after viewing the whocanuse.com website, it has me wanting to experiment with still creating natural palettes that maybe utilize green but still look great and work well for individuals who may have issues with the color green. For me, it’s an “of course accessibility is part of the design process”, however it can have legal ramifications as well, or lost revenue, so investing time and money into making sure a website is accessible is very important.
Who is in charge of setting accessibility standards at W3C?
When it comes to designing with accessibility in mind, the group at W3C (World Wide Web Consortium) that provides accessibility standards/rules is WAI (W3C Web Accessibility Initiative) group. This group brought forth the standards for colors contrast ratio, such as a ratio of “4.5:1” is needed to meet AA standard (minimum standard), and a ratio of “7:1” is needed to meet AAA standard (enhanced standard). Text-size also comes under these standards. For the AA standard, a text size ratio of “3:1”is needed. For the AAA standard, a text size ratio of “4.5:1” is needed.
All of the information and resources they provide can be found on their main website, https://www.w3.org/WAI/
Summary of Documentation
One of the reasons I decided to go back to school was to learn the “magic” behind building websites. I get excited with each new piece I learn, such as specificity! I had no idea that existed. I find it super interesting that by being strategic in naming CSS rules, we can get the website to look the way that we would like it to.
And as mentioned earlier, one of my missions in going into technology is to make it as accessible as possible. Websites and app interfaces are not just to perform business but is where much of my generation, and definitely the generations below me socialize. It’s an integral part of most people’s lives, and I want everyone, no matter their ability, to be able to engage in it as similarly as possible. Technology is a wonderful tool to even the playing field for people with disabilities, and it starts with making sure the technology itself is accessible.