Learn

• Learn Accessibility
• ARIA and HTML
• Color and contrast
• Conclusion and next steps
• Design and user experience
• Keyboard focus
• Forms
• Glossary
• Images
• JavaScript
• How is digital accessibility measured?
• The Document
• Animation and motion
• Patterns, components, and design systems
• Content structure
• Assistive Technology testing
• Automated accessibility testing
• Manual accessibility testing
• Typography
• Video and audio
• What is digital accessibility, and why does it matter?
• Learn CSS
• Animations
• Backgrounds
• Blend Modes
• Borders
• Box Model
• Color
• Conclusion and next steps
• Filters
• Flexbox
• Focus
• Functions
• Gradients
• Grid
• Inheritance
• Layout
• Lists
• Logical Properties
• Overflow
• Pseudo-classes
• Pseudo-elements
• Selectors
• Shadows
• Sizing Units
• Spacing
• Specificity
• The cascade
• Transitions
• Text and typography
• Z-index and stacking contexts
• Learn Responsive Design
• Accessibility
• Conclusion and next steps
• Icons
• Interaction
• Internationalization
• Introduction
• Macro layouts
• Media features
• Media queries
• Micro layouts
• The picture element
• Responsive images
• Screen configurations
• Theming
• Typography
• User interface patterns
• Learn Forms
• Accessibility
• Address forms
• Form attributes in depth
• Help users avoid re-entering data in forms
• Autofill
• Conclusion and next steps
• Test forms across devices and platforms
• Gathering data
• Design basics
• Form fields in depth
• The form element in depth
• Use forms to get data from users
• Help users enter data in forms
• Identity
• Internationalization and localization
• JavaScript
• Payment forms
• Security and privacy
• Styling forms
• Styling form controls
• Test your forms
• How to test forms for usability
• Help users enter the right data in forms
• Learn HTML
• HTML APIs
• Attributes
• Audio and Video
• Conclusion and next steps
• Details and summary
• Dialog
• Document structure
• Focus
• Forms
• Headings and sections
• Images
• Other inline text elements
• Links
• Lists
• Metadata
• Navigation
• Overview of HTML
• Semantic HTML
• Tables
• Template, slot, and shadow
• Text basics
• Learn Images
• Automating compression and encoding
• Image formats: AVIF
• Image content delivery networks
• Site Generators, frameworks, and CMSs
• Conclusion
• Descriptive syntaxes
• Image formats: GIF
• A brief history of images on the web
• Image formats: JPEG
• Key performance issues
• Image formats: PNG
• Prescriptive syntaxes
• Raster images
• Responsive images
• Vector images
• Image formats: WebP
• Learn Privacy
• Best practices
• Use just the data you need
• Encryption
• Fingerprinting
• Third parties
• Learn PWA
• App design
• Architecture
• Assets and data
• Caching
• Capabilities
• Complexity management
• Conclusion
• Detection
• Enhancements
• Experimental features
• Foundations
• Getting started
• Installation
• Installation prompt
• Offline data
• OS Integration
• Progressive Web Apps
• Service workers
• Serving
• Tools and debug
• Update
• Web app manifest
• Window management
• Workbox

Learn Accessibility

Digital accessibility, commonly abbreviated a11y, is about designing and building websites and web apps that disabled people can interact with in a meaningful and equivalent way.

This course is created for beginner and advanced web developers. You can go through the series from start to finish to get a general understanding of accessibility practices and testing, or you can use it as a reference for specific subjects. If you read an unfamiliar term, refer to our glossary. For those new to web development overall, check out the Learn HTML courses for fundamentals with markup and Learn CSS courses for styling fundamentals.

This is not a complete reference. Each section introduces the section topic, provides context and examples. There will be links to topic references, such as MDN and WCAG specifications, and other web.dev articles. Each section will have a short assessment to help people confirm their understanding.

Some accessibility best practices differ, based on the disability you're addressing. It's important to understand your users and to listen to people with disabilities when they tell you what they need.

We are open to your feedback! Open a GitHub issue and give as much information as you can so we can address it.

Here's what you'll learn:

{% include 'partials/course-index.njk' %}

So, are you ready to learn accessibility? Let's get started.

{% Aside %} This course was written by Carie Fisher (Twitter and LinkedIn), with input and review from Alexandra White (Twitter), and Rachel Andrew (Twitter). Special thanks to Mark Steadman for providing additional support for the JavaScript module, and Aaron Forinton for supporting the publication process. {% endAside %}

ARIA and HTML

Most developers are familiar with the standard markup language of our modern web, HyperText Markup Language (HTML). However, you may be less familiar with Accessible Rich Internet Applications (ARIA) (formally called WAI-ARIA): what it is, how it is used, and when—and when not—to use it.

HTML and ARIA play important roles in making digital products accessible, especially when it comes to assistive technology (AT) such as screen readers. Both are used to convert content into an alternate format, such as Braille or Text-to-Speech (TTS).

Let's review a short history of ARIA, why it is important, and when and how best to use it.

Introduction to ARIA

ARIA was first developed in 2008 by the Web Accessibility Initiative (WAI) group—a subset of the overarching World Wide Web Consortium (W3C), which governs and regulates the internet.

ARIA is not a true programming language but a set of attributes you can add to HTML elements to increase their accessibility. These attributes communicate role, state, and property to assistive technologies via accessibility APIs found in modern browsers. This communication happens through the accessibility tree.

"WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make web content and web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with HTML, JavaScript, and related technologies."

The WAI group

The accessibility tree

ARIA modifies incorrect or incomplete code to create a better experience for those using AT by changing, exposing, and augmenting parts of the accessibility tree.

The accessibility tree is created by the browser and based on the standard Document Object Model (DOM) tree. Like the DOM tree, the accessibility tree contains objects representing all the markup elements, attributes, and text nodes. The accessibility tree is also used by platform-specific accessibility APIs to provide a representation that assistive technologies can understand.

ARIA on its own doesn't change an element's functionality or visual appearance. That means only AT users will notice differences between a digital product with ARIA and one without it. That also means that developers alone are responsible for making the appropriate code and styling changes to make an element as accessible as possible.

The three main features of ARIA are roles, properties, and states/values.

Roles define what an element is or does on the page or app.

<div role="button">Self-destruct</div>

Properties express characteristics or relationships to an object.

<div role="button" aria-describedby="more-info">Self-destruct</div>

<div id="more-info">This page will self-destruct in 10 seconds.</div>

States/values define the current conditions or data values associated with the element.

<div role="button" aria-describedby="more-info" aria-pressed="false">
  Self-destruct
</div>

<div id="more-info">
  This page will self-destruct in 10 seconds.
</div>

While all three elements of ARIA can be used in one line of code, it's not required. Instead, layer ARIA roles, properties, and states/values until you've accomplished your final accessibility goal. Correctly incorporating ARIA into your code base ensures that AT users will have all the information they need to use your website, app, or other digital product successfully and equitably.

Recently, Chrome DevTools has created a way to see the full accessibility tree making it easier for developers to understand how their code impacts accessibility.

When to use ARIA

In 2014, the W3C officially published the HTML5 recommendation. With it came some big changes, including the addition of landmark elements such as <main>, <header>, <footer>, <aside>, <nav>, and attributes like hidden and required. With these new HTML5 elements and attributes, coupled with increased browser support, certain parts of ARIA are now less critical.

When the browser supports an HTML tag with an implicit role with an ARIA equivalent, there is usually no need to add ARIA to the element. However, ARIA still includes many roles, states, and properties that aren't available in any version of HTML. Those attributes remain useful for now.

This brings us to the ultimate question: When should you use ARIA? Thankfully the WAI group has developed the five rules of ARIA to help you decide how to make elements accessible.

Rule 1: Don't use ARIA

Yes, you read that right. Adding ARIA to an element does not inherently make it more accessible. The WebAIM Million annual accessibility report found that home pages with ARIA present averaged 70% more detected errors than those without ARIA, primarily due to the improper implementation of the ARIA attributes.

There are exceptions to this rule. ARIA is required when an HTML element doesn't have accessibility support. This could be because the design doesn't allow for a specific HTML element or the wanted feature/behavior isn't available in HTML. However, these situations should be scarce.

<button>Submit</button>

When in doubt, use semantic HTML elements.

Rule 2: Don't add (unnecessary) ARIA to HTML

In most circumstances, HTML elements work well out of the box and do not need additional ARIA added to them. In fact, developers using ARIA often have to add additional code to make the elements functional in the case of interactive elements.

<div role="tab"><h2>Heading tab</h2></div>

Do less work and have better-performing code when you use HTML elements as intended.

Rule 3: Always support keyboard navigation

All interactive (not disabled) ARIA controls must be keyboard accessible. You can add tabindex= "0" to any element that needs a focus that doesn't normally receive keyboard focus. Avoid using tab indexes with positive integers whenever possible to prevent potential keyboard focus order issues.

<span role="button" tabindex="0">Submit</span>

{% Aside 'caution' %} Remember, people with and without visual impairments use keyboard navigation. Don't add unnecessary tab stops to headings and paragraphs, as these can add additional challenges for some users who navigate by keyboard alone. {% endAside %}

Rule 4: Don't hide focusable elements

Don't add role= "presentation" or aria-hidden= "true" to elements that need to have focus—including elements with a tabindex= "0". When you add these roles/states to elements, it sends a message to the AT that these elements are not important and to skip over them. This can lead to confusion or disrupt users attempting to interact with an element.

<div><button>Submit</button></div>

Rule 5: Use accessible names for interactive elements

The purpose of an interactive element needs to be conveyed to a user before they know how to interact with it. Ensure that all elements have an accessible name for people using AT devices.

Accessible names can be the content surrounded by an element (in the case of an <a>), alternative text, or a label.

For each of the following code samples, the accessible name is "Red leather boots."

<!-- A plain link with text between the link tags. -->
<a href="shoes.html">Red leather boots</a>

<!-- A linked image, where the image has alt text. -->
<a href="shoes.html"><img src="shoes.png" alt="Red leather boots"></a>

<!-- A checkbox input with a label. -->
<input type="checkbox" id="shoes">
<label for="shoes">Red leather boots</label>

There are many ways to check an element's accessible name, including inspecting the accessibility tree using Chrome DevTools or testing it with a screen reader.

{% Aside %} Coming soon: read more about screen reader testing in the Assistive Technology module. {% endAside %}

ARIA in HTML

While using HTML elements on their own is best practice, ARIA elements can be added in certain situations. For example, you may pair ARIA with HTML in patterns that need a higher level of AT support because of environmental constraints or as a fall-back method for HTML elements that aren't fully supported by all browsers.

Of course, there are recommendations for implementing ARIA in HTML. Most importantly: don't override default HTML roles, reduce redundancy, and be aware of unintended side effects.

Let's look at some examples.

{% Compare 'worse' %}

<a role="heading">Read more</a>

{% CompareCaption %} Assigned the wrong role. {% endCompareCaption %}

{% endCompare %}

{% Compare 'better' %}

<a aria-label="Read more about some awesome article title">Read More</a>

{% CompareCaption %} Correct role and an extra link description. {% endCompareCaption %}

{% endCompare %}

{% Compare 'worse' %}

<ul role="list">...</ul>

{% CompareCaption %} Redundant role. {% endCompareCaption %}

{% endCompare %}

{% Compare 'better' %}

<ul>...</ul>

{% CompareCaption %} Redundancy removed {% endCompareCaption %}

{% endCompare %}

{% Compare 'worse' %}

<details>
  <summary role="button">more information</summary>
  ...
</details>

{% CompareCaption %} Potential side effects. {% endCompareCaption %}

{% endCompare %}

{% Compare 'better' %}

<details>
  <summary>more information</summary>
  ...
</details>

{% CompareCaption %} No unintended side effects. {% endCompareCaption %}

{% endCompare %}

{% Aside %} One place in particular where ARIA can be useful is in forms. Check out the Learn Forms accessibility module. {% endAside %}

Complexities of ARIA

ARIA is complex, and you should always use caution when using it. While the code examples in this lesson are fairly straightforward, creating accessible custom patterns can quickly get complicated.

There are many things to pay attention to, including but not limited to: keyboard interactions, touch interfaces, AT/browser support, translation needs, environmental constraints, legacy code, and user preferences. A little bit of coding knowledge can be detrimental—or just plain annoying—if used incorrectly. Remember to keep your code simple.

Those warnings aside, digital accessibility is not an all-or-nothing situation—it's a spectrum that allows for some gray areas like this. Multiple coding solutions can be seen as "correct," depending on the situation. What is important is that you keep learning, testing, and trying to make our digital world more open to all.

{% Assessment 'aria' %}

Color and contrast

Have you ever tried to read text on a screen and found it difficult to read due to the color scheme or struggled to see the screen in a very bright or low-light environment? Or maybe you are someone with a more permanent color vision issue, like the estimated 300 million people with color blindness or the 253 million people with low vision?

As a designer or developer, you need to understand how people perceive color and contrast, whether temporary, situationally, or permanently. This will help you best support their visual needs.

This module will introduce you to some accessible color and contrast fundamentals.

Perceiving color

Did you know that objects do not possess color but reflect wavelengths of light? When you see color, your eyes receive and process those wavelengths and convert them to colors.

When it comes to digital accessibility, we talk about these wavelengths in terms of hue, saturation, and lightness (HSL). The HSL model was created as an alternative to the RGB color model and more closely aligns with how a human perceives color.

{% Aside %} In CSS, a color can be specified in many ways, such as using color names, RGB, RGBa, HEX, HSL, HSLa, HSV, or HSVa values. HSLa is similar to HSL, only an alpha value has been added. Alpha is a measurement of opacity and is defined as a number between 0.0 (fully transparent) and 1.0 (fully opaque). {% endAside %}

Hue is a qualitative way to describe a color, such as red, green, or blue, where each hue has a specific spot on the color spectrum with values ranging from 0 to 360, with red at 0, green at 120, and blue at 240.

{% Codepen { user: 'web-dev-codepen-external', id: 'eYrEZqE', height: 350, theme: 'auto', tab: 'result', allow: ['geolocation'] } %}

Saturation is the intensity of a color, measured in percentages ranging from 0% to 100%. A color with full saturation (100%) would be very vivid, while a color with no saturation (0%) would be grayscale or black and white.

{% Codepen { user: 'web-dev-codepen-external', id: 'vYjJKBP', height: 350, theme: 'auto', tab: 'result', allow: ['geolocation'] } %}

Lightness is a color's light or dark character, measured in percentages ranging from 0% (black) to 100% (white).

{% Codepen { user: 'web-dev-codepen-external', id: 'poVrboR', height: 350, theme: 'auto', tab: 'result', allow: ['geolocation'] } %}

Measuring color contrast

To help support people with various visual disabilities, the WAI group created a color contrast formula to ensure enough contrast exists between the text and its background. When these color contrast ratios are followed, people with moderately low vision can read text on the background without needing contrast-enhancing assistive technology.

Let's look at images with a vibrant color palette and compare how that image would appear to those with specific forms of color blindness.

On the left, the image shows rainbow sand with purple, red, orange, yellow, aqua green, light blue, and dark blue colors. On the right is a brighter, multicolored rainbow pattern.

Deuteranopia

Deuteranopia (commonly known as green blind) occurs in 1% to 5% of males, 0.35% to 0.1% of females.

People with Deuteranopia have a reduced sensitivity to green light. This color blindness filter simulates what this type of color blindness might look like.

Protanopia

Protanopia (commonly known as red blind) occurs in 1.01% to 1.08% of males and 0.02% of 0.03% of females.

People with Protanopia have a reduced sensitivity to red light. This color blindness filter simulates what this type of color blindness might look like.

Achromatopsia or Monochromatism

Achromatopsia or Monochromatism (or complete color blindness) occurs very, very rarely.

People with Achromatopsia or Monochromatism have almost no perception of red, green, or blue light. This color blindness filter simulates what this type of color blindness might look like.

Calculate color contrast

The color contrast formula uses the relative luminance of colors to help determine contrast, which can range from 1 to 21. This formula is often shortened to [color value]:1. For example, pure black against pure white has the largest color contrast ratio at 21:1.

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

Regular-sized text, including images of text, must have a color contrast ratio of 4.5:1 to pass the minimum WCAG requirements for color. Large-sized text and essential icons must have a color contrast ratio of 3:1. Large-sized text is characterized by being at least 18pt / 24px or 14pt / 18.5px bolded. Logos and decorative elements are exempt from these color contrast requirements.

Thankfully, no advanced math is required as there are a lot of tools that will do the color contrast calculations for you. Tools like Adobe Color, Color Contrast Analyzer, Leonardo, and Chrome's DevTools color picker can quickly tell you the color contrast ratios and offer suggestions to help create the most inclusive color pairs and palettes.

{% Codepen { user: 'web-dev-codepen-external', id: 'PoeKzWq', height: 450, theme: 'auto', tab: 'result' } %}

Using color

Without good color contrast levels in place, words, icons, and other graphical elements are hard to discover, and the design can quickly become inaccessible. But it's also important to pay attention to how the color is used on the screen, as you cannot use color alone to convey information, actions, or distinguish a visual element.

For example, if you say, "click the green button to continue," but omit any additional content or identifiers to the button, it would be difficult for people with certain types of colorblindness to know which button to click. Similarly, many graphs, charts, and tables use color alone to convey information. Adding another identifier, like a pattern, text, or icon, is crucial to help people understand the content.

Reviewing your digital products in grayscale is a good way to detect potential color issues quickly.

{% Codepen { user: 'web-dev-codepen-external', id: 'rNvzLmd', height: 500, theme: 'auto', tab: 'result' } %}

Color-focused media queries

Beyond checking for color contrast ratios and the use of color on your screen, you should consider applying the increasingly popular and supported media queries that offer the users more control over what is displayed on the screen.

For example, using the @prefers-color-scheme media query, you can create a dark theme, which can be helpful to people with photophobia or light sensitivity. You could also build a high contrast theme with @prefers-contrast, which supports people with color deficiencies and contrast sensitivity.

{% Aside %} There are additional media queries and OS settings to consider for color accessibility, but they are far less supported than the two listed in this module. See the article Operating System and Browser Accessibility Display Modes for more information on the various OS accessibility settings. {% endAside %}

Prefers color scheme

{% BrowserCompat 'css.at-rules.media.prefers-color-scheme' %}

The media query @prefers-color-scheme allows users to choose a light or dark-themed version of the website or app they are visiting. You can see this theme change in action by changing your light/dark preference settings and navigating to a browser that supports this media query. Review the Mac and Windows instructions for dark mode.

{% Codepen { user: 'web-dev-codepen-external', id: 'ExLvNOw', height: 300, theme: 'auto', tab: 'css,result', allow: ['geolocation'] } %}

{% Details %}

{% DetailsSummary %} Compare light and dark mode. {% endDetailsSummary %}

{% endDetails %}

Prefers contrast

{% BrowserCompat 'css.at-rules.media.prefers-contrast' %}

The @prefers-contrast media query checks the user's OS settings to see if high contrast is toggled on or off. You can see this theme change in action by changing your contrast preference settings and navigating to a browser that supports this media query (Mac and Windows contrast mode settings).

{% Codepen { user: 'web-dev-codepen-external', id: 'bGMrgNV', height: 300, theme: 'auto', tab: 'css,result', allow: ['geolocation'] } %}

{% Details %} {% DetailsSummary %} Compare regular and high contrast. {% endDetailsSummary %}

{% endDetails %}

Layering media queries

You can use multiple color-focused media queries to give your users even more choices. In this example, we stacked @prefers-color-scheme and @prefers-contrast together.

{% Codepen { user: 'web-dev-codepen-external', id: 'wvjqgaK', height: 300, theme: 'auto', tab: 'css,result', allow: ['geolocation'] } %}

{% Details %} {% DetailsSummary %} Compare both color and contrast. {% endDetailsSummary %}

{% endDetails %}

{% Assessment 'color' %}

Conclusion and next steps

Congratulations, you've made it through Learn Accessibility! At this point, you've learned a lot of best practices for accessibility and gone through multiple rounds of accessibility testing. You may have learned some new terminology or refreshed your memory in our glossary.

We hope you are confident applying these lessons to your websites and web applications.

Additional resources

To continue building your accessibility knowledge, we recommend the following resources:

• Web Accessibility Initiative (WAI)
• Web Content Accessibility Guidelines (WCAG) from the W3C
• WCAG Quick Reference Guide
• Accessibility on MDN
• Deque University Digital Accessibility Courses & Accessibility Reference Library
• Global web accessibility laws
• A11y talks
• List of accessible patterns from Smashing Magazine
• How to fund accessibility work
• A11y automation tracker
• Google developer documentation style guide
  • Write accessible documentation
  • Write inclusive documentation

More resources can be found throughout the modules, as related to each topic.

Community highlights

We conducted several interviews with accessibility practitioners in 2022. Read about their journey to accessibility and best practices:

• Melanie Sumner told us about her journey into engineering, accessible design, Ember.js, and the importance of funding these efforts.
• Olutimilehin Olushuyi told us about his transition from the law to web development, building accessible community, and creating accessible layouts.
• Albert Kim told us about mental health awareness, building for invisible disabilities, the COGA Accessibility Community Group, and more practical wisdom.
• Elisa Bandy told us about her work for Google's internal documentation, how to prioritize use cases, and building expertise.

Brought to you by

{% include 'partials/authors-stack.njk' %}

Special thanks

Thank you to Aaron Forinton for supporting the publication of several modules and assessments.

Design and user experience

Think about your favorite website or app—what makes it your favorite? Now, think about a website or app you dislike—what do you not like about it? How users interact with your design and their experience on your website and app can vary.

That experience can change based on the time of day, the type of device used, if they've had enough sleep the night before, if they are unwell, if they're using assistive technology, and so much more. With close to eight billion people worldwide, the possibilities of how people use and experience your designs are limitless.

Inclusive design

How can we address all of the potential user needs at once? Enter inclusive design. Inclusive design utilizes a human-centered approach that weaves together inclusivity, usability, and accessibility into one.

And unlike universal design, which focuses on a single design that as many people can use as possible, inclusive design principles center on designing for a specific individual or use case, and then extending that design to others.

There are seven accessibility-focused inclusive design principles:

1. Provide comparable experience: Ensure your interface provides an equal experience for all, so people can accomplish tasks in a way that suits their needs without undermining the quality of the content.
2. Consider the situation: Make sure your interface delivers a valuable experience to people, regardless of their circumstances.
3. Be consistent: Use familiar conventions and apply them in a logical manner.
4. Give control: Ensure people can access and interact with content in their preferred way.
5. Offer choice: Consider providing different ways for people to complete tasks, especially those that are complex or non-standard.
6. Prioritize content: Help users focus on core tasks, features, and information by arranging these elements in the preferred order within the content and layout.
7. Add value: Consider the purpose and significance of features and how they improve the experience for different users.

Personas

When developing a new design or feature, many teams rely on user personas to guide them through the process. Personas are fictitious characters that use your digital products, often based on quantitative and qualitative user research.

Personas also offer a quick and inexpensive way to test and prioritize those features throughout the design and development process. They help to focus decisions surrounding site components by adding a layer of real-world consideration to the conversation to help align strategy and create goals focused on specific user groups.

Incorporating disabilities

"People are all different. I can only speak from my experience. When you meet one Deaf person, then you've met one Deaf person—not all of us."

Meryl Evans from the ID24 talk Deaf Tech: Travel Through Time from Past to Future.

Personas can be used as an inclusive design tool when you incorporate people with disabilities into your personas. There are many different ways to do this. You may create disability-specific personas, add disabilities to existing user personas, or even create a persona spectrum to reflect the dynamic reality of situational, temporary, and permanent disabilities.

No matter how you incorporate people with disabilities into your personas, they should not be based on real people or stereotypes. And personas are never a substitute for user testing.

{% Details %} {% DetailsSummary %} Persona: Jane Bennet Check out an example of a persona that supports specific use cases. {% endDetailsSummary %}

• Name: Jane Bennet
• Age: 57 years old
• Location: Essex, United Kingdom
• Occupation: UX engineer
• Disability: Hand tremor from Young Onset Parkinson's disease (YOPD)
• Goals: use speech-to-text input to make adding code suggestions easier; find biking equipment online with minimal keystrokes.
• Frustrations: websites lacking keyboard-only support; apps for design with small areas for touch interaction.

As a UX engineer, Jane designs and builds pages that are vital to keeping her company's site relevant. She supports a lot of team members throughout the day. She's the queen of putting out technical fires, and everyone's go-to in the department when anything goes down unexpectedly.

Losing her fine motor skills to tremors is making it increasingly difficult for her to use a mouse. She's been steadily relying on the keyboard more and more to navigate the web. Jane has always been dedicated to her physical fitness. She loves road racing and BMX. This made it all the more of a blow when she was diagnosed with Young Onset Parkinson's disease last year.

{% endDetails %}

Disability simulators

Use extreme caution when using disability simulators to emulate or supplement your personas.

Disability simulators are a double-edged sword in that they can build sympathy or empathy—it can depend on the individual, the context in which the simulator is used, and many other uncontrollable factors. Many accessibility advocates are against using disability simulator tools and recommend seeking out movies, demos, tutorials, and other content created by people with disabilities, and learning about their experiences first-hand.

"I think we need to be completely honest that any simulation activity does not impact some of the most important understandings we want the sighted to know in their heart and their head. Blindness is not the characteristic that defines us, that the misunderstandings and low expectations about blindness are our biggest obstacle.

Those misunderstandings create artificial barriers that prevent us from fully participating, and those false limitations build into something that holds us back."

Mark Riccobono, President of the National Federation of the Blind

Accessibility heuristics

Consider adding heuristics into your workflow as you build your personas and designs. Heuristics are simple rules for interaction design, introduced in 1990 by Jakob Nielsen and Rolf Molich. These ten principles were developed based on years of experience in the field of usability engineering, and have been used in design and human-computer interaction programs ever since.

Fast-forward to 2019, and the design team at Deque created and shared a new set of heuristics focused on digital accessibility. According to their research, up to 67% of all accessibility bugs for a website or app can be avoided when accessibility is part of the design process. That's a huge impact that can be made before even one line of code is written.

Similar to the original set of heuristics, there are ten accessibility heuristics to consider when planning your design.

1. Interaction methods and modalities: Users can efficiently interact with the system using the input method of their choosing (such as a mouse, keyboard, touch, etc.).
2. Navigation and wayfinding: Users can easily navigate, find content, and determine where they are at all times within the system.
3. Structure and semantics: Users can make sense of the structure of the content on each page and understand how to operate within the system.
4. Error prevention and states: Interactive controls have persistent, meaningful instructions to help prevent mistakes, and provide users with clear error states which indicate what the problems are and how to fix them whenever errors are returned.
5. Contrast and legibility: Users can easily distinguish and read text and other meaningful information.
6. Language and readability: Users can easily read and understand the content.
7. Predictability and consistency: Users can predict each element's purpose. It's clear how each element relates to the system as a whole.
8. Timing and preservation: Users are given enough time to complete their tasks and do not lose information if their time (i.e., a session) runs out.
9. Movement and flashing: Users can stop elements on the page that move, flash, or are animated. Users should not be distracted or otherwise harmed by these elements.
10. Visual and auditory alternatives: Users can access text-based alternatives for any visual or auditory content which conveys information.

Once you have a basic understanding of these accessibility heuristics, you can apply it to a persona or design using the accessibility heuristics worksheet and by following the instructions provided. This exercise is more enlightening when you gather multiple perspectives.

An example accessibility heuristic review for the navigation and wayfinding checkpoint could look like the following:

After everyone on the team looks at the page or component and conducts their accessibility heuristic review, the totals are tallied up for each checkpoint. At this point, you can decide how to remedy any found issues or correct any omissions that are paramount to supporting digital accessibility.

Accessibility annotations

Before you hand off your design to the development team, you should consider adding accessibility annotations. Annotations, in general, are used to explain creative choices and describe different aspects of the design. Accessibility annotations focus on areas where developers can make more accessible programmatic choices with the guidance of the design team or an accessibility-focused specialist.

Accessibility annotations can be applied during any stage of the design process, from wireframes to high-fidelity mock-ups. They can include user flows, conditional states, and functionality. They often utilize symbols and labels to streamline the process and keep the design as the main focus.

The following design illustrations examples are from Indeed.com's accessibility annotations kit for Figma.

Depending on your design program, you should have multiple accessibility annotation starter kits to choose from. Or, if you prefer, you can create your own set. In either case, you should decide which information needs to be communicated to the hand-off team and what format works best.

Some areas to consider for accessibility annotations include:

• Color: include contrast ratios of all of the different combinations of colors in the palette.
• Buttons and links: identify default, hover, active, focus, and disabled states.
• Skip links: highlight the hidden/visible design aspects and where they link to on the page.
• Images and icons: add alternative text recommendations for essential images/icons.
• Audio and video: highlight areas/links for captions, transcripts, and audio descriptions.
• Headings: add programmatic levels and include everything that looks like a heading.
• Landmarks: highlight the different sections of the design with HTML or ARIA.
• Interactive components: identify clickable elements, hover effects, focus area.
• Keyboard: identify where the focus should start (alpha stop) and the following tab order.
• Forms: add field labels, helper text, error messages, and success messages.
• Accessible names: identify how assistive technology should recognize the element.

Keyboard focus

Many people use a keyboard—or other software/hardware that mimics the functionality of a keyboard, such as a switch device—as their primary means of navigation. People with temporary physical limitations such as sprained wrist or fine motor disabilities like carpal tunnel, as well as some people without disabilities, may choose to use a keyboard to navigate a page due to personal preference, efficiency, or broken hardware.

Low-vision or blind users may use a keyboard for navigation combined with their magnification or screen reader software. However, they may use different keyboard shortcut commands to navigate a screen than a sighted user would.

Keyboard support for all of these disabilities and circumstances is critical. A large part of keyboard accessibility is centered around focus. Focus refers to which element on the screen currently receives input from the keyboard.

In this module, we concentrate on HTML structure and CSS styling for keyboard and focusable elements. The JavaScript module includes more information on focus management and keystrokes for interactive elements.

Focus order

The elements that a keyboard user can navigate to are called focusable elements. Focus order, also called tab or navigation order, is the order in which elements receive focus. The default focus order must be logical, intuitive, and match the visual order of a page.

For most languages, the focus order starts at the top of the page and ends at the bottom, traveling from left to right. However, some languages are read right to left, so the primary language of the page may warrant a different focus order.

By default, focus order includes naturally focusable HTML elements, such as links, checkboxes, and text inputs. Naturally focusable HTML elements include built-in tab order support and basic keyboard event handling.

You can update the focus order to include any elements that don't normally receive focus, such as non-interactive HTML elements, custom components, or elements with ARIA that overrides the natural focus semantics.

{% Aside %} Your tab key moves the keyboard focus up the DOM. shift + tab moves the focus down the DOM. {% endAside %}

Tabindex

The focus order begins with elements that have a positive tabindex attribute (if there are any) and moves from the smallest positive number to the largest (such as 1, 2, 3). It then proceeds through elements with a tabindex of zero according to their order in the DOM. Any elements with a negative tabindex are removed from the natural focus order.

When a tabindex of zero (tabindex="0") is applied to normally unfocusable elements, they are added into the natural focus order of the page according to the way they appear in the DOM. However, unlike naturally focusable HTML elements, you must provide additional keyboard support for them to be fully accessible.

Similarly, if you have an element that normally is focusable but is inactive—such as a button that is inoperative until an input field is filled in—you should add a negative tabindex (tabindex="-1") to this element. Adding a negative tabindex signals to assistive technologies and keyboards that this button should be removed from the natural focus order. But don't worry—you can use JavaScript to add the focus back to the element when needed.

In this example, a tabindex attribute was added to elements that do not naturally receive focus. The order of the elements was manipulated using tabindex to illustrate the power it can have on focus order. This is an example of what not to do!

{% Aside 'caution' %} As a general rule, you should avoid positive tabindexes. Giving focus to non-interactive elements and disrupting the normal focus order may confuse and frustrate your users. It should be rare that a circumstance warrants adding a positive tabindex (tabindex= "1") to a non-focusable element. {% endAside %}

Skip links

Most websites today have a long list of menu links in the page's main header consistent from page to page. This is great for general navigation but can make it difficult for keyboard-only users to easily get to the website's main content without having to tab multiple times.

One way to jump over redundant or unuseful groups of links is to add a skip link. Skip links are anchor links that jump to a different section of the same page, using that section's ID, instead of sending the user to another page on the website or an external resource. Skip links are typically added as the first focusable element a user will encounter when arriving at a website and can be visible or visually hidden until a user tabs to it, depending on what the design calls for.

When a user presses the tab key, and an active skip link is in place, it sends the keyboard focus to the skip link. The user can click the skip link and jump past the header section and main navigation. If they choose not to click the skip link and continue to tab down the DOM, they'll be sent to the next focusable element.

Like all links, it’s important that the skip link includes context about the link's purpose. Adding the phrase "Skip to main content," lets the user know where the link is taking them. There are many code options to choose from when providing additional context to your links, such as aria-labelledby, aria-label, or adding it to the text content of the <a> element, as demonstrated in the example.

Focus indicator

As you just learned, focus order is an important aspect of keyboard accessibility. It's also important to decide how that focus is styled. Because even if the focus order is excellent, how could a user know where they are on the page without the proper styling?

A visible focus indicator is a vital tool in informing a user about where they are at all times on the page. It's especially important for your sighted keyboard-only users.

{% Aside %} WCAG 2.2's new success criterion, Focus Not Obscured (Minimum), will ensure that the focus indicator is not hidden beneath other components. {% endAside %}

Browser default styling

Today, every modern web browser has a different default visual styling that applies to focusable elements on your website or app—some more easily visible than others. As a user tabs through the page, this styling is applied as the element receives keyboard focus.

If you allow the browser to handle the focus styling, it's important to review your code to confirm that your theme won't override the browser's default styling. An override is often written as "outline: 0" or "outline: none" in your stylesheet. This tiny piece of code can remove the browser's default focus indicator styling, which makes it very difficult for users to navigate your website or app.

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

Custom styles

Of course, you can go beyond the default browser style and create a custom focus indicator that complements your theme. When creating a custom focus indicator, you have a lot of freedom to be creative!

A focus indicator shape can take on many forms, be it an outline, a border, an underline, a box, a background change, or some other obvious stylistic change that does not rely on color alone to indicate the keyboard's focus is active on that element.

You could change a focus indicator style to ensure it isn’t lost in the background. For example, when a page has a white background, you could set the button focus indicator to a blue background. When the page has a blue background, you could set that same button focus style to a white background.

You could change the focus element style based on element type. For example, you could use a dotted underline for body links but choose a rounded border for a button element.

{% Aside %}

Depending on how the focus indicator is styled, it may also need to meet the [minimum color contrast](https://www.w3.org/WAI/WCAG21/Techniques/general/G195) requirements against the background.

We recommend adhering to a 3:1 color contrast ratio for all focus indicators. This will meet WCAG 2.2's [Focus Appearance (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum).

There is no rule about how many focus indicator styles you have on one page—but be sure to keep it to a reasonable number to avoid unnecessary confusion.

Wrap-up

For a website or app to be considered accessible, everything that can be accessed with a mouse must also be accessed with a keyboard. This module focused on the visual aspect of keyboard accessibility, in particular, focus order and focus indicators.

{% Assessment 'focus' %}

Forms

A form is an element that allows a user to provide data into a field or a group of fields. Forms can be as simple as a single field or as complicated as a multi-step form element with multiple fields per page, input validation, and sometimes a CAPTCHA.

Forms are considered one of the most difficult elements to get right from an accessibility perspective, as they require knowledge of all the elements we have already covered, as well as additional rules specific just to forms. With some understanding and time, you can make an accessible form to suit you and your users.

Forms is the last component-specific module in this course. This module will focus on the form-specific guidelines, but all other guidelines you learned about in the earlier modules, such as content structure, keyboard focus, and color contrast, also apply to form elements.

{% Aside %} Review our Learn Forms course to learn how to create better forms. There is a form accessibility module in that course with additional accessibility-specific form content. {% endAside %}

Fields

The backbone of forms is fields. Fields are small interactive patterns, such as an input or radio button element, that allow users to enter content or make a choice. There is a wide variety of form fields to choose from.

The default recommendation is to use established HTML patterns instead of building something custom with ARIA, as certain features and functionalities—such as field states, properties, and values—are inherently built into the HTML elements, while you have to add custom ARIA manually.

{% Aside %}

If the situation requires you to build custom form fields, be sure to review the ARIA and HTML, Keyboard focus, and JavaScript modules to understand how to make these custom form fields as accessible as possible.

{% endAside %}

<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

<form id="sundae-order-form">
  <!-- form content -->
</form>

In addition to choosing the most accessible form field patterns, where applicable, you should also add HTML autocomplete attributes to your fields. Adding autocomplete attributes allows a more fine-grained definition or identification of purpose to user agents and assistive technologies (AT).

Autocomplete attributes allow users to personalize visual presentations, such as showing a birthday cake icon in a field with the birthday autocomplete attribute (bday) assigned to it. More generally, autocomplete attributes make filling out forms easier and quicker. This is especially helpful for people with cognitive and reading disorders and those using ATs, such as screen readers.

<form id="sundae-order-form">
  <p>Name: <input type="name" autocomplete="name"></p>
  <p>Telephone: <input type="tel" autocomplete="tel"></p>
  <p>Email address: <input type="email" autocomplete="email"></p>
</form>

Lastly, form fields should not produce contextual changes when they receive focus or user input unless the user has been warned about the behavior before using the component. For example, a form should not be automatically submitted when a field receives focus or once a user adds content to the field.

Labels

Labels inform a user about the purpose of a field, if the field is required, and can also provide information about the field requirements, such as input format. Labels must be visible at all times and accurately describe the form field to users.

One of the foundational tenets of accessible forms is establishing a clear and accurate connection between a field and its label. This is true both visually and programmatically. Without this context, a user might not understand how to fill out the fields in the form.

<form id="sundae-order-form">
  <p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
  <p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
  <p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>

Additionally, related form fields, such as a mailing address, need to be programmatically and visually grouped. One method is to use the fieldset/legend pattern to group elements that are similar.

{% Codepen { user: 'web-dev-codepen-external', id: 'zYLqwwQ', height: 400, theme: 'auto', tab: 'html, result' } %}

Descriptions

Field descriptions are similar to labels in purpose in that they are used to give more context to the field and requirements. Field descriptions are not required for accessibility if the labels or form instructions are descriptive enough.

However, there are situations in which adding additional information is useful to avoid form errors, such as relaying information about the minimum length of input for a password field or telling a user which calendar format to use (such as MM-DD-YYYY).

There are many different methods you can use to add field descriptions to your forms. One of the best methods is to add an aria-describedby attribute to the form element, in addition to a <label> element. The screen reader will read both the description and the label.

If you add the aria-labelledby attribute to your element, the attribute value overrides the text within your <label>. As always, be sure to test the final code with all of the ATs you plan to support.

{% Codepen { user: 'web-dev-codepen-external', id: 'ExpKmXq', height: 400, theme: 'auto', tab: 'html, result' } %}

Errors

When creating accessible forms, there's a lot you can do to prevent users from making form errors. Earlier in this module, we covered clearly marking-up fields, creating identifying labels, and adding detailed descriptions whenever possible. But no matter how clear you think your form is, eventually, a user will make a mistake.

When a user encounters a form error, the first step is to make the error known. The field where the error occurred must be clearly identified, and the error itself must be described to the user in text.

There are different methods for displaying error messages, such as:

• A pop-up modal, inline near where the error occurred
• A collection of errors grouped in one larger message at the top of the page

Be sure to pay attention to the keyboard focus and ARIA live region options when announcing errors.

Whenever possible, offer the user a detailed suggestion on how to fix the error. There are two attributes available to notify users of errors.

• You can use the HTML required attribute. The browser will supply a generic error message based on the filed validation parameters.
• Or you can use the aria-required attribute to share a customized error message to ATs. Only ATs will receive the message unless you add additional code to make the message visible to all users.

Once a user thinks all of the errors have been resolved, allow them to resubmit the form and provide feedback about the results of their submission. An error message tells a user they have more updates to make, while a success message confirms that they have resolved all errors and successfully submitted the form.

{% Codepen { user: 'web-dev-codepen-external', id: 'abjJYWR', height: 400, theme: 'auto', tab: 'html, result' } %}

{% Aside %}

While WCAG 2.2 is still under development, there are several proposed success criteria that will focus on more accessible form experiences, such as Target Size (Minimum), Consistent Help, Accessible Authentication, and Redundant Entry to be aware of for future projects.

{% endAside %}

{% Assessment 'forms' %}

Glossary

In this document, you'll find common terms and concepts related to accessibility.

A11y

A11y is numeronym for accessibility (a + 11 letters + y). Typically pronounced as "ally" as in "a person or group that provides assistance and support in an ongoing effort, activity, or struggle," giving the term "a11y" multiple meanings.

Accessibility Conformance Report (ACR) {: #acr}

The ACR is the final report presented to a client once a full ACT has been performed. If you need a legally binding version of the ACR, you would utilize a version of the Voluntary Product Accessibility Template (VPAT).

Accessibility Conformance Testing (ACT) {: #act}

ACT is commonly referred to as an accessibility audit. The ACT utilizes various testing methodology and tools: primarily automated, manual, and assistive technology (AT) devices.

ACT is first performed as a baseline metric to gauge general accessibility compliance of a digital product. It's often run multiple times throughout the software product lifecycle to check for changes in the level of conformance against a set of pre-determined accessibility checkpoints or guidelines.

ARIA

ARIA is an acronym for Accessible Rich Internet Applications (formally known as WAI-ARIA—Web Accessibility Initiative Accessible Rich Internet Applications). ARIA is a specification written by the W3C, defining a set of attributes that you can add to HTML elements to support accessibility. These attributes communicate role, state, and property to assistive technologies via accessibility APIs implemented in the accessibility tree in modern browsers.

Assitive technology (AT) {: #at}

AT is hardware and software that can be no-tech (such as a mouthstick), low-tech (such as a keyboard), or high-tech (such as a screen reader). AT is used to help increase, maintain, or improve the capabilities of performing a task for a person with disabilities. AT includes braille keyboards, audio browsers, screen magnifiers, and alternative pointing devices.

Digital accessibility

Digital accessibility is the practice of building digital products in a way that all users, regardless of their disability, will have equal access to the content or functionality of the product.

POUR

POUR is shorthand for Perceivable, Operable, Understandable, and Robust, which are the foundational human-focused principles of WCAG.

Screen reader

A screen reader is a high-tech assistive technology that uses synthetic language to read and navigate digital documents for people with low or no vision, cognitive issues, and other disabilities.

• Desktop
  • ChromeVox (ChromeOS)
  • JAWS (Windows)
  • Narrator (Windows)
  • NVDA (Windows)
  • Orca (Linux)
  • VoiceOver (macOS)
• Mobile
  • TalkBack (Android)
  • VoiceOver (iOS)
• Screen Reader Keyboard Shortcuts and Gestures

VPAT

VPAT is shorthand for Voluntary Product Accessibility Template. A VPAT is a template to draft an Accessibility Conformance Report (ACR). An ACR clearly states which accessibility standards a product or service meets and warns users about any "accessibility blockers" they may encounter. A VPAT does not mean that a digital product is 100% accessible: it is just a report of the state of a product from an accessibility conformance perspective.

Web Accessibility Initiative (WAI)

The Web Accessibility Initiative (WAI) is a sub-group of the W3C focuses only on digital accessibility.

Web Content Accessibility Guidelines (WCAG) {: #wcag}

Web Content Accessibility Guidelines (commonly referred to as ]= WCAG) is an international set of accessibility standards developed through the W3C in cooperation with individuals and organizations. The goal of WCAG is to provide a single shared standard for digital accessibility that meets the needs of individuals, organizations, and governments worldwide.

Images

Accessible images may seem like a simple topic at first glance—you add some "alt text" to an image, and you are done. But, the topic is more nuanced than some people think. In this section, we'll review:

• How to update the code to make images accessible.
• What information should be shared with users and where to share it.
• Additional ways to improve your images to support people with disabilities.

Image purpose and context

Before even one line of code is written, you must first think about the point of the image and how it will be used. Asking yourself questions about the purpose and context of the image can help you determine how best to convey the information to a person using assistive technology (AT) such as screen readers.

You may ask yourself:

• Is the image essential to understanding the context of the feature or page?
• What type of information is the image trying to convey?
• Is the image simple or complex?
• Does the image elicit emotion or prompt the user to act?
• Or is the image just visual "eye candy" with no real purpose?

A visual flowchart, such as an image decision tree, can help you decide which category your image belongs to.

Try hiding the images on your site or web app using a browser extension or other methods. Then ask yourself: "Do I understand the content that remains?" If the answer is yes, it is most likely a decorative image. If not, the image is instead informative in some way and contextually necessary. Once you determine the image's purpose, you can determine the most accurate way to code for it.

{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/cnUw9wOPYGvEpO69nqFe.png", alt="Example image decision tree.", width="632", height="598" %}

Decorative images

A decorative image is a visual element that doesn't add additional context or information that allows the user to better understand the context. Decorative images are supplemental and may provide style rather than substance.

If you decide an image is decorative, the image must be programmatically hidden from ATs. When you program an image to be hidden, it signals to the AT that the image is not needed to understand the page's content, context, or action. There are many ways to hide images, including using an empty/null text alternative, applying ARIA, or adding the image as a CSS background. Below are a few examples of how to hide a decorative image from users.

{% Aside 'caution' %}

Be mindful when making this choice, as "[decorative](https://www.smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/)" can mean different things to different users. Some AT users want to hear descriptions for every visual on the screen.

Users can choose to skip over your image descriptions if and when they deem them redundant or verbose, but they cannot imagine descriptions that don't exist. When in doubt, add descriptions to your images.

Empty or null alt

{% Codepen { user: 'web-dev-codepen-external', id: 'QWrMgxg', height: 300, theme: 'auto', tab: 'html,css,result' } %}

An empty/null alternative text attribute differs from a missing alternative text attribute. If the alternative text attribute is missing, the AT might read out the file name or surrounding content to give the user more information about the image.

Role set to presentation or none

{% Codepen { user: 'web-dev-codepen-external', id: 'mdLMwje', height: 350, theme: 'auto', tab: 'html,result' } %}

A role set to presentation or none removes an element's semantics from exposure to the accessibility tree. Meanwhile, aria-hidden= "true" will remove the entire element—and all of its children—from the accessibility API.

<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">

Use aria-hidden with caution as it may hide elements that you do not wish to hide.

Images in CSS

{% Codepen { user: 'web-dev-codepen-external', id: 'GRdvEYo', height: 350, theme: 'auto', tab: 'css,result' } %}

When you add a background image with CSS, a screen reader will not detect the image file. Be sure you want the image to be hidden before applying this method.

Informative images

An informative image is an image that conveys a simple concept, idea, or emotion. Types of informative images include photos of real-world objects, essential icons, simple drawings, and images of text.

If your image is informative, you should include programmatic alternative text describing the purpose of the image. Alternative image descriptions—often abbreviated as "alt text"—give AT users more context about an image and help them better understand an image's message or intent.

Simple alternative descriptions using <img> elements are achieved by including the alt attribute, regardless of the file type it points to, such as .jpg, .png, .svg, and others.

<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs are eating the leaves of my prize rose bush.">

{% Codepen { user: 'web-dev-codepen-external', id: 'yLjoXrj', height: 350, theme: 'auto', tab: 'html,result' } %}

When you use <svg> elements inline, however, you need to pay attention to accessibility.

First, since SVGs are semantically coded, AT will skip over them by default. If you have a decorative image, this is not an issue—the AT will ignore it as intended. But if you have an informative image, an ARIA role="img" needs to be added to the pattern for the AT to recognize it as an image.

Second, <svg> elements do not use the alt attribute, so different coding methods must be used instead to add alternative descriptions to your informative images.

  <svg role="img"...>
     <title>Cartoon drawing of a red, black, and gray ladybug.</title>
  </svg>

Functional images

A functional image is connected to an action. An example of a functional image is a logo that links to the home page, a magnifying glass used as a search button, or a social media icon that directs you to a different website or app.

Like informative images, functional images must include an alternative description to inform all users of their purpose. Unlike an informative image, each functional image needs to describe the image's action—not the visual aspects.

{% Codepen { user: 'web-dev-codepen-external', id: 'YzLxxPw', height: 350, theme: 'auto', tab: 'html,result' } %}

{% Codepen { user: 'web-dev-codepen-external', id: 'gOzxxbg', height: 350, theme: 'auto', tab: 'html,result' } %}

In the logo example, the image is both informative and actionable as it is both an image that conveys information and behaves as a link. In cases like these, you can add alternative descriptions to each element—but it is not a requirement.

One way to add alternative descriptions to images is through visually hidden text. When you use this method, the text will be read by screen readers because it is in the DOM, but it is visually hidden with the help of custom CSS.

You can see from the code snippet that "Navigate to the homepage" is the wrapper title, and the image alternative text is "Lovely Ladybugs for your Lawn." When you listen to the logo code with a screen reader, you hear both the visual and the action conveyed in one image.

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"></img>
   </a>
</div>

{% Codepen { user: 'web-dev-codepen-external', id: 'qBYXXdW', height: 350, theme: 'auto', tab: 'html,result' } %}

Complex images

A complex image often requires more explanation than a decorative, informational, or functional image. It requires both a short and a long alternative description to convey the full message. Complex images include infographics, maps, graphs/charts, and complex illustrations. As with the other image types, there are different methods you can use to add alternative descriptions to your complex images.

{% Codepen { user: 'web-dev-codepen-external', id: 'NWMvvqw', height: 400, theme: 'auto', tab: 'html,result' } %}

<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug."><a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>

One way to add additional explanation to an image is to link out to a resource or provide a jump link to a longer explanation later on the page. This method is a good choice, not only for AT users but also helps people with disabilities—such as cognitive, learning, and reading disabilities—who might benefit from having this additional image information readily available on the screen instead of buried in the code.

{% Codepen { user: 'web-dev-codepen-external', id: 'OJZjxGK', height: 400, theme: 'auto', tab: 'html,result' } %}

Another method you can use is to append the aria-describedby attribute to the <img> element. You can programmatically link the image to an ID containing a longer description. This method creates a strong association between the image and the full description. The extended description can be displayed on the screen or visually hidden—but consider keeping it visible to support even more people.

{% Codepen { user: 'web-dev-codepen-external', id: 'MWGvEdJ', height: 450, theme: 'auto', tab: 'html,result' } %}

One other way to group short alternative descriptions with a longer one is to use the HTML5 <figure> and <figcaption> elements. These elements act similarly to aria-describedby in that it semantically groups elements, forming a stronger association between the image and its description. Adding ARIA role="group" ensures backward compatibility with older web browsers that don't support the native semantics of the <figure> element.

Alternative text best practices

Of course, including alternate text is not enough. The text should also be meaningful. For example, if your image is about a swarm of ladybugs chewing the leaves of your prize rose bush, but your alternative text reads "bugs," would that convey the full message and intent of the image? Definitely not.

Alternative descriptions need to capture as much relevant visual information as possible and be succinct. While there is no limit to the number of characters a screen reader can read, it is usually advised to cap your alternative text to 150 characters or less to avoid reader fatigue. If you need to add additional context to the image, you can use one of the complex image patterns, add caption text, or further describe the image in the main copy.

Some additional alternative text best practices include:

• Avoid using words like "image of" or "photo of" in the description, as the screen reader will identify these file types for you.
• When naming your images, be as consistent and accurate as possible. Image names are a fallback when the alternative text is missing or ignored.
• Avoid using non-alpha characters (for example, #, 9, &) and use dashes between words rather than underscores in your image names or alternative text.
• Use proper punctuation whenever possible. Without it, the image descriptions will sound like one long, never-ending, run-on sentence.
• Write alternative text like a human and not a robot. Keyword stuffing does not benefit anyone—people using screen readers will be annoyed, and search engine algorithms will penalize you.

{% Assessment 'images' %}

JavaScript

JavaScript plays a major role in almost everything we create—from smaller dynamic components to full products running on a JavaScript framework, such as React or Angular.

This use (or overuse) of JavaScript has brought forward many alarming trends, such as long load times due to large amounts of code, use of non-semantic HTML elements, and injection of HTML and CSS through JavaScript. And you may be unsure of how accessibility fits into each of these pieces.

JavaScript can have a huge impact on the accessibility of your site. In this module, we'll share some general patterns for accessibility that are enhanced by JavaScript, as well as solutions for accessibility issues that arise from using JavaScript frameworks.

Trigger events

JavaScript events allow users to interact with web content and perform a specific action. Many people, such as screen reader users, people with fine-motor skill disabilities, people without a mouse or trackpad, and others, rely on keyboard support to interact with the web. It's critical that you add keyboard support to your JavaScript actions, as it affects all of these users.

Let's look at a click event. If an onClick() event is used on a semantic HTML element such as a <button> or <a>, it naturally includes both mouse and keyboard functionality. However, keyboard functionality is not automatically applied when an onClick() event is added to a non-semantic element, such as a generic <div>.

<button onclick="doAction()">Click me!</button>

Preview this comparison on CodePen.

If a non-semantic element is used for a trigger event, a keydown/keyup event must be added to detect the enter or space key press. Adding trigger events to non-semantic elements is often forgotten. Unfortunately, when it's forgotten, the result is a component that's only accessible via a mouse. Keyboard-only users are left without access to the associated actions.

Page titles

As we learned in the Document module, the page title is essential for screen reader users. It tells users what page they are on and whether they have navigated to a new page.

If you use a JavaScript framework, you need to consider how you handle page titles. This is especially important for single-page apps (SPAs) that load from a singular index.html file, as transitions or routes (page changes) will not involve a page reload. Each time a user loads a new page in an SPA, the title won't change by default.

For SPAs, the document.title value can be added manually or with a helper package (depending on the JavaScript framework). Announcing the updated page titles to a screen reader user may take some additional work, but the good news is you've got options, such as dynamic content.

Dynamic content

One of the most powerful JavaScript functionalities is the ability to add HTML and CSS to any element on the page. Developers can create dynamic applications based on the actions or behaviors of the users.

Let's say you need to send a message to users when they log in to your website or app. You want the message to stand out from the white background and relay the message: "You are now logged in."

You can use the element innerHTML to set the content:

document.querySelector("#banner").innerHTML = '<p>You are now logged in</p>';

You can apply CSS in a similar way, with setAttribute:

document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");

With great power comes great responsibility. Unfortunately, JavaScript injection of HTML and CSS has historically been misused to create inaccessible content. Some common misuses are listed here:

For CSS, toggle CSS classes instead adding inline styles, as this allows for reusability and simplicity. Use hidden content on the page and toggle classes to hide and show content for dynamic HTML. If you need to use JavaScript to dynamically add content to your page, ensure it's simple and concise, and of course, accessible.

Focus management

In the Keyboard focus module, we covered focus order and indicator styles. Focus management is knowing when and where to trap the focus and when it shouldn't be trapped.

Focus management is critical for keyboard-only users.

Component level

You can create keyboard traps when a component's focus is not properly managed. A keyboard trap occurs when a keyboard-only user gets stuck in a component, or the focus is not maintained when it should be.

One of the most common patterns where users experience focus management issues is in a modal component. When a keyboard-only user encounters a modal, the user should be able to tab between the actionable elements of the modal, but they should never be allowed outside of the modal without explicitly dismissing it. JavaScript is essential to properly trapping this focus.

{% Compare 'worse' %}

{% Codepen { user: 'web-dev-codepen-external', id: 'ZERVJMz', height: 350, theme: 'auto', tab: 'js,result' } %}

{% endCompare %}

{% Compare 'better' %}

{% Codepen { user: 'web-dev-codepen-external', id: 'zYaydmv', height: 350, theme: 'auto', tab: 'js,result' } %}

{% endCompare %}

Page level

Focus must also be maintained when a user navigates from page-to-page. This is especially true in SPAs, where there is no browser refresh, and all content dynamically changes. Anytime a user clicks on a link to go to another page within your application, the focus is either kept in the same place or potentially placed somewhere else entirely.

When transitioning between pages (or routing), the development team must decide where the focus goes when the page loads.

There are multiple techniques to achieve this:

• Place focus on the main container with an aria-live announcement.
• Put the focus back to a link to skip to the main content.
• Move the focus to the top-level heading of the new page.

Where you decide to put the focus will depend on the framework you are using and the content you want to serve up to your users. It may be context- or action-dependent.

State management

Another area where JavaScript is critical to accessibility is state management, or when a component or page's current visual state is relayed to a low-vision, blind, or deafblind assistive technology user.

Often, the state of a component or page is managed through ARIA attributes, as introduced in the ARIA and HTML module. Let's review a few of the most common types of ARIA attributes used to help manage the state of an element.

Component level

Depending on your page content and what information your users need, there are many ARIA states to consider when relaying information about a component to the user.

For example, you may use an aria-expanded attribute to tell the user whether a drop-down menu or list is expanded or collapsed.

{% Codepen { user: 'web-dev-codepen-external', id: 'oNyJeQZ', height: 300, theme: 'auto', tab: 'html,result' } %}

Or you might use aria-pressed to indicate that a button has been pressed.

{% Codepen { user: 'web-dev-codepen-external', id: 'jOKXLyv', height: 300, theme: 'auto', tab: 'html,result' } %}

It's important to be selective when applying ARIA attributes. Think through the user flow to understand what critical information should be conveyed to the user.

Page level

Developers often use a visually hidden area called the ARIA live region to announce changes on the screen and alert messages to assistive technology (AT) users. This area can be paired with JavaScript to notify users of dynamic changes to the page without requiring the entire page to reload.

{% Codepen { user: 'web-dev-codepen-external', id: 'Yzvdxdr', height: 450, theme: 'auto', tab: 'result' } %}

Historically, JavaScript has struggled to announce content in aria-live and alert regions due to its dynamic nature. Asynchronously adding content into the DOM makes it hard for AT to pick up the region and announce it. For the content to be properly read, the live or alert region must be in the DOM on load, then the text can dynamically be swapped out.

If you use a JavaScript framework, the good news is almost all of them have a "live announcer" package that does all the work for you and is fully accessible. There is no need to worry about creating a live region and dealing with the issues described in the previous section.

Here are some live packages for common JavaScript frameworks:

• React: react-aria-live and react-a11y-announcer
• Angular: LiveAnnouncer
• Vue: vue-a11y-utils

Modern JavaScript is a powerful language that allows web developers to create robust web applications. This sometimes leads to over-engineering and, by extension, inaccessible patterns. By following the JavaScript patterns and tips in this module, you can make your apps more accessible to all users.

{% Aside %} Special thanks to Mark Steadman for providing additional support on this module. Read more of his accessibility articles. {% endAside %}

{% Assessment 'javascript' %}

How is digital accessibility measured?

Digital accessibility means designing and building your digital offerings so that, regardless of a person's mental or physical ability, they can still interact with your website, app, or other digital product in a meaningful and equal way.

But how do you measure the accessibility of a digital product? How do you know when something is accessible?

Introduction to accessibility testing

There are many ways to test a digital product for accessibility. One fundamental approach is to evaluate it against a set of accessibility standards.

There are many types of accessibility standards. Typically, your industry, product type, local/country laws and policies, or overall accessibility goals will dictate which set of guidelines to follow and levels to meet. If no specific standard is required for your project, the standard recommendation is to follow the latest version of the Web Content Accessibility Guidelines (WCAG).

Testing your digital product against an accessibility standard and conformance level is commonly referred to as an accessibility audit. An accessibility audit uses various methodologies, techniques, and tools, including design, automated, manual, and assistive technology (AT) testing.

Perform an accessibility audit to capture the baseline accessibility compliance of a digital product. But, running it once at the start of a project is not enough to determine if a product is accessible. You should run this audit multiple times throughout the software product lifecycle to check for changes in the level of conformance, against a set of pre-determined accessibility checkpoints or guidelines.

Web Content Accessibility Guidelines (WCAG) {:#wcag}

The Web Content Accessibility Guidelines (WCAG) are an international set of accessibility standards developed through the W3C, in cooperation with individuals and organizations. The goal of WCAG is to provide a single shared standard for digital accessibility that meets the needs of individuals, organizations, and governments worldwide.

WCAG is primarily intended for web-based and native mobile app designers and developers. However, many others, including software developers, content creators/editors, and all levels of management, benefit from understanding and applying WCAG-based techniques to their process. Additional W3C standards may apply to your role, including the Authoring Tool Accessibility Guidelines (ATAG) and User Agent Accessibility Guidelines (UAAG), so make sure you review the W3C list of standards and use the one(s) most applicable to your role and project.

In terms of accessibility, WCAG is considered the "gold standard" for conformance testing. The first draft of WCAG was released in 1999. The current version is WCAG 2.1, released in June 2018, while WCAG 2.2 is scheduled for 2023. A completely revamped version of the guidelines, WCAG 3.0, is being drafted for a future release, but is not expected to be a completed W3C standard for a few more years.

The WCAG guidelines have three levels of success criteria: A, AA, and AAA. The success criteria determine conformance to WCAG. To meet WCAG conformance, the digital product you are testing needs to meet the success criteria for your target level.

For the current standard (WCAG 2.1), there are 78 success criteria in total, split across each level. It is important to note that each level is progressive, meaning if your accessibility goal is AA, you must pass the success criteria for both A and AA to achieve this level of conformance.

Accessibility principles

The WCAG success criteria are a very important set of detailed guidelines that inform designers and developers how to create accessible websites and apps. Understanding these guidelines is critical to address issues that arise in accessibility compliance testing, but the guidelines quickly become very technical.

If you are new to this field, start with the principles of WCAG—Perceivable, Operable, Understandable, and Robust (POUR). By applying POUR principles to your digital products, you can focus on how your products are used by real humans, including people with disabilities.

{% Details 'open' %}

{% DetailsSummary 'h3' %} Perceivable {% endDetailsSummary %}

The first category in POUR is Perceivable. This principle states that users must be able to perceive all essential information on the screen, and it must be conveyed to multiple senses.

Ask yourself: Is there any content or functionality in your digital product that a person with a specific disability would not be able to perceive? Be sure to consider all the different types of disabilities—visual, mobility, hearing, cognitive, and speech impairments, vestibular and seizure disorders, and more.

Examples of Perceivable:

• Adding text alternatives to all non-decorative images and essential icons.
• Adding captions, transcripts, and audio descriptions to videos.
• Ensuring color is not the only method of conveying meaning. {% endDetails %}

{% Details 'open' %}

{% DetailsSummary 'h3' %} Operable {% endDetailsSummary %}

The second category is Operable. For this principle, users must be able to operate the digital product's interface. The interface cannot require interaction that a user cannot perform.

Ask yourself: Can users control the interactive elements of your digital product? Are there any focus order issues or keyboard traps? How are touch interfaces handled?

Examples of Operable:

• Adding keyboard and touchscreen support to all active elements.
• Ensuring slideshows and videos have all of the necessary controls available.
• Giving users enough time to fill out a form or a method to extend the time. {% endDetails %}

{% Details 'open' %}

{% DetailsSummary 'h3' %} Understandable {% endDetailsSummary %}

The third category of POUR is Understandable. For this principle, users must understand the information and the operation of the user interface.

Ask yourself: Is all of the content clearly written? Are all of the interactions easy to understand? Does the order of the page make sense—to sighted users, keyboard-only users, screen reader users?

Examples of Understandable:

• Writing simply—don't use a complex word when a simple one will do.
• Ensuring your digital product has predictable navigation.
• Ensuring error messages are clear and easy to resolve. {% endDetails %}

{% Details 'open' %}

{% DetailsSummary 'h3' %} Robust {% endDetailsSummary %}

The last category is Robust. This principle focuses on supporting assistive technologies and ensuring that, as devices and user agents evolve, the digital product remains accessible.

Ask yourself: What types of assistive technology are you supporting? Does your digital product only work on the newest browsers or operating systems? Does it work at all breakpoints and in different device orientations?

Examples of Robust:

• Testing keyboard-only navigation.
• Testing with different screen reader technologies.
• Ensuring all of the content and functionality can be accessed, regardless of device size or orientation. {% endDetails %}

Remember—the whole point of POUR is not about rigidly adhering to hard and fast rules. Instead, it is a way to help you understand and meet the diverse needs of your users.

{% Assessment 'measure' %}

The Document

Along with structure, there are many supporting HTML elements to consider when building and designing for digital accessibility. Throughout the Learn Accessibility course, we cover a lot of elements.

This module focuses on very specific elements that don't quite fit into any of the other modules but are useful to understand.

{% Aside %} Our Learn HTML course covers the basics of HTML and semantic structure in great detail. As such, this module builds off of that course material and is focused specifically on digital accessibility. Likewise, be sure to review the ARIA and HTML module in this course before diving into this module. {% endAside %}

Page title

The HTML <title> element defines the content of the page or screen a user is about to experience. It's found in the <head> section of an HTML document and is equivalent to the <h1> or main topic of the page. The title content is displayed in the browser tab and helps users understand which page they are visiting, but it is not displayed on the website or app itself.

In a single-page app (SPA), the <title> is handled in a slightly different way, as users don't navigate between pages as they do on multi-page websites. For SPAs, the value of the document.title property can be added manually or by a helper package, depending on the JavaScript framework. Announcing the updated page titles to a screen reader user may take some additional work.

Descriptive page titles are good for both users and search engine optimization (SEO)—but don't go overboard and add lots of keywords. Since the title is the first thing announced when an AT user visits a page, it must be accurate, unique, and descriptive, but also concise.

When writing page titles, it is also best practice to "front load" the interior page or important content first, then add any preceding pages or information after. This way, AT users don't have to sit through the information they have already heard.

<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

{% Aside 'important' %} Search engines typically display only the first 55–60 characters of a page title, so be sure to limit your total page title characters. {% endAside %}

Language

Page language

The page language attribute (lang) sets the default language for the entire page. This attribute is added to the <html> tag. A valid language attribute should be added to every page as it signals the AT to which language it should use.

It's recommended that you use two-character ISO language codes for greater AT coverage, as many of them do not support extended language codes.

When a language attribute is completely missing, the AT will default to the user's programmed language. For example, if an AT was set to Spanish, but a user visited an English website or app, the AT would try to read the English text with Spanish accents and cadence. This combination results in an unusable digital product and a frustrated user.

<html lang="en">...</html>

The lang attribute can only have one language associated with it. This means the <html> attribute can only have one language, even if there are multiple languages on the page. Set lang to the primary language of the page.

<html lang="ar">...</html>

Section language

You can also use the language attribute (lang) for language switches in the content itself. The same basic rules apply as the full-page language attribute, except you add it to the appropriate in-page element instead of on the <html> tag.

Remember that the language you add to the <html> element cascades down to all the contained elements, so always set the primary language of the page top-level lang attribute first.

For any in-page elements written in a different language, add that lang attribute to the appropriate wrapper element. This will override the top-level language setting until that element is closed.

<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        <span lang="et">"Kas sa räägid inglise keelt?"</span>
        when I met someone new.</p>
    </div>
  </body>
</html>

iFrames

The iFrame element (<iframe>) is used to host another HTML page or a third party's content within the page. It essentially puts another webpage within the parent page. iFrames are commonly used for advertisements, embedded videos, web analytics, and interactive content.

To make your <iframe> accessible, there are a couple of aspects to consider. First, each <iframe> with distinct content should include a title element inside the parent tag. This title supplies AT users with more information about the content inside the <iframe>.

Second, as a best practice, it is good to set the scrolling to "auto" or "yes" in the <iframe> tag settings. This allows people with low vision to be able to scroll into content within the <iframe> that they might not otherwise be able to see. Ideally, the <iframe> container would also be flexible in its height and width.

<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>

{% Assessment 'document' %}

Animation and motion

Have you ever been riding in a car, boat, or plane and suddenly felt the world spin? Or had a migraine so bad that animations on your phone or tablet, created to "delight" you, suddenly make you sick? Or perhaps you've always been sensitive to all types of motion? These are examples of different types of vestibular disorders.

By age 40, over 35% of adults will have experienced some form of vestibular dysfunction. This may lead to a temporary dizzy spell, migraine-induced vertigo, or a more permanent vestibular disability.

Beyond triggering vertigo, many people find moving, blinking, or scrolling content distracting. People with ADHD and other attention deficit disorders might be so distracted by your animated elements that they forget why they even went to your website or app in the first place.

In this module, we'll look at some of the ways to help better support people with all types of movement-triggered disorders.

Flashing and moving content

When building animation and motion, you should ask yourself whether the element's movement is excessive. For example, colors flickering from dark to light or quick movements on the screen, can cause seizures in people with photosensitive epilepsy. It is estimated that 3% of people with epilepsy suffer from photosensitivity, and it's more common in women and younger people.

The WCAG's guidelines on flashing recommend against the following:

• Flashes for more than three times in any one second
• Flashes below the general flash and red flash threshold.

These flashes may, at best, cause an inability to use a webpage or, at worst, lead to illness.

For any extreme movement, it is imperative that you test it using the Photosensitive Epilepsy Analysis Tool (PEAT). PEAT is a free tool to identify if the screen's content, video, or animations are likely to cause seizures. Not all content needs to be evaluated by PEAT, but content that contains flashing or rapid transitions between light and dark background colors should be evaluated, just to be safe.

Another question you should ask yourself about animation and motion is whether the element's movement is essential to understanding the content or actions on the screen. If it is not essential, consider removing all movement—even micro-movements—from the element you are building or designing.

Suppose you believe the element's movement is not essential but could enhance the user's overall experience, or you cannot remove the movement for another reason. In that case, you should follow WCAG's guidelines on motion. The guidelines state that you must build an option for users to pause, stop or hide movement for: non-essential moving, blinking, or scrolling elements that start automatically, last more than five seconds, and are part of other page elements.

Pause, stop, or hide movement {: #pause-stop-hide}

Add a pause, stop, or hide mechanism to your page to allows users to turn off potentially problematic motion animation. You can do this on the screen level or element level.

For example, suppose your digital product includes a lot of animations. Consider adding an accessible JavaScript toggle to allow users to control their experience. When the button is toggled to "motion off," all animations are frozen on that screen and all others.

{% Codepen { user: 'web-dev-codepen-external', id: 'xxjpBGE', height: 450, theme: 'auto', tab: 'js,result' } %}

Use media queries

In addition to being selective about your animations, giving your users options to pause, stop, hide movement, and avoiding infinite animation loops, you can also consider adding a movement-focused media query. This gives your users even more choice when it comes to what is displayed on the screen.

@prefers-reduced-motion {: #prefers-reduced-motion}

Similar to the color-focused media queries in the color module, the @prefers-reduced-motion media query checks the user's OS settings related to animation.

A user may set display preferences to reduce motion. These settings are different across operating systems, and may be framed positively or negatively. With @prefers-reduced-motion, you can design a site which respects these preferences.

{% BrowserCompat 'css.at-rules.media.prefers-reduced-motion' %}

On MacOS and Android, the user turns the setting on to reduce motion. On MacOS, a user can set Reduce motion in Settings > Accessibility > Display. Android's setting is Remove animations. On Windows, the setting is framed positively as Show animations, which is on by default. A user must turn this setting off to reduce motion.

{% Aside %} As each UI uses different language, consider still allowing users to choose for themselves, rather than guessing how much animation is too much. This may differ on a situation-by-situation basis. {% endAside %}

{% Codepen { user: 'web-dev-codepen-external', id: 'VwxyReM', height: 350, theme: 'auto', tab: 'css,result' } %}

Alternatively, as shown in the next set of examples, you can code all your animations to stop moving within five seconds or less instead of playing on an infinite loop.

Progressive enhancement for movement

As designers and developers, we have a lot of choices to make, including default movement states and how much movement to display. Let's take another look at the last example on motion.

Suppose we decide the animation is unnecessary for understanding the content on the screen. In that case, we can choose to set the default state to the reduced motion animation instead of the full motion version. Unless users specifically ask for animations, the animations are turned off.

{% Aside %} The motion preferences available are dependent on the operating system. Some allow you to opt-in to animations, while others require you to opt out of the animations. {% endAside %}

We cannot predict what level of movement will cause issues for people with seizure, vestibular, and other visual disorders. Even a small amount of motion on the screen can trigger dizziness, blurred vision, or worse. So, in the following example, we default to no animation.

{% Codepen { user: 'web-dev-codepen-external', id: 'qBYpvam', height: 350, theme: 'auto', tab: 'css,result' } %}

Layered media queries

You can use multiple media queries to give your users even more choices. Let's use @prefers-color-scheme, @prefers-contrast, and @prefers-reduced-motion all together.

{% Codepen { user: 'web-dev-codepen-external', id: 'wvjpOzR', height: 400, theme: 'auto', tab: 'css,result' } %}

Allow your users to choose {: #allow-user-choice}

While it can be fun to build animation into our digital products to delight users, it's critical we remember some people will be affected by these designs. Motion sensitivity can affect anyone, from feeling slight discomfort to causing a debilitating illness or seizure.

You can use a number of different tools to allow the user to decide what's best for them, rather than guessing how much motion is too much. For example, add a toggle to turn on or off animation within your site or web app. Consider defaulting such a toggle to off.

{% Assessment 'motion' %}

Patterns, components, and design systems

Many people use component-driven development using pattern style guides, component libraries, or full design systems in their development workflow process. Even if you have not used these tools formally, it's likely you use a similar process to break up a large design for a website, app, or other digital product into manageable pieces.

Like building a physical structure, it's important to build one piece at a time. First, the foundation, the structure, walls, windows, roof, and everything in between. Component-driven development tools allow us to do this for websites, apps, and other digital products.

Some perks to component-driven development include breaking things down into manageable pieces, so there is less development time with these reusable components. It allows designers, frontend and backend developers, and QA to work simultaneously. And clients, designers, PMs, and more, like it because they can preview the build process and use a living style guide as a reference after the website has launched.

However, when we look at patterns, components, and design systems with accessibility in mind, some questions arise. How do you know which patterns are best when it comes to accessibility? Should you use an established pattern/library or create new ones? How do you know if these patterns will actually help your users?

With the myriad of choices available, it's easy to quickly become confused about this topic. This module aims to give you general information on how to evaluate patterns, components, and design systems for accessibility and gives you a starting point to help you make more accessible choices.

Think critically

Choosing an accessible pattern, component, or design system is not rocket science, but it does take time and critical thinking. In fact, there's no such thing as "one perfect pattern," but there may potentially be many options that could work. It's about learning to choose the best option for your unique situation.

In the subsequent testing modules, you will learn more about the techniques and methods on how to evaluate patterns, components, and design systems for accessibility. But before that stage, you need to step back and ask yourself some fundamental questions, such as:

• Does an established accessible pattern, component, or design system already exist?
• What browsers and assistive technology (AT) am I supporting?
• Are there any code/framework limitations or other integrations/factors/user needs I need to consider?

Depending on your dev environment and user needs, you may have additional or different questions from these. Consider these questions as your starting point in your accessibility evaluation.

Established resources

Before building something brand new, do your due diligence and review what already exists in terms of accessible patterns, components, and design systems. With just a little research, you might be surprised to find a solution—or multiple—that fits your needs.

Some great resources for accessible patterns, components, and design systems include:

• Accessible Components
• Deque University ARIA library
• Gov.UK Design System
• Inclusive Components
• MagentaA11y
• U.S. Web Design System (USWDS), created for the U.S. federal government
• List of accessible patterns from Smashing Magazine

For JavaScript frameworks, the following resources are fairly accessible out of the box or are easy to customize for accessibility:

• When CSS Isn't Enough: JavaScript Requirements For Accessible Components
• React
  • ReachUI
  • Reakit
  • Chakra
• Angular: Material library
• Vue: Vuetensils

However—and this cannot be stressed enough—you should never just copy/paste code and assume it will fit within your environment and automatically meet your user needs. This is true of all patterns, components, and design systems, even if labeled as fully accessible.

All resources should be seen as a starting point. Be sure to test everything!

Browsers and assistive technology (AT) support

After researching a few base patterns, components, or a full design system that might work for your dev environment, you can move on to assistive technology support. One major type of AT you will want to focus on when evaluating patterns, components, and design systems is screen readers.

Screen readers were built with specific browsers in mind and will work best when paired with these browsers. We'll go into this topic in much more detail in the module on AT testing, but for pattern evaluation purposes, it is helpful to understand these combinations exist, so you know what you need in terms of support.

Browser support is generally complicated, and things get even trickier when you add AT devices and ARIA specifications to the mix.

But it's not all bad news. Thankfully, great resources such as HTML5 Accessibility, Accessibility Support, and WCAG's Custom Control Accessible Development Checklist help us to better understand current browser and AT device support, and even when to use ARIA in the first place.

These resources outline the different HTML and ARIA pattern sub-elements available, including open-source community tests. You can also review some pattern examples—for both desktop and mobile browsers/AT devices. As such, these resources can help you make a more accessible decision regarding patterns, components, and design systems that you may want to use.

Other considerations

Once you have chosen a few accessible base patterns or components, and factored in browser and AT device support, you can move on to more specific contextual questions about the pattern, component, design system, and dev environment.

For example, if you are working in a management system (CMS) or have legacy code, there may be some limitations to which patterns you can use. Upon review, several pattern choices may quickly be cut to one or two options.

Many JavaScript frameworks allow developers to use almost any pattern they choose. In cases like these, you may have fewer restrictions and can choose the most accessible pattern option.

There are additional considerations to weigh when choosing a pattern, component, or design system, such as:

• Performance
• Security
• Search engine optimization
• Language translation support
• Third-party integrations

These factors will undoubtedly play into your pattern choice, but you should also consider the people creating the content and code itself. The pattern you choose must be robust enough to handle any potential limitations around editor-generated or user-generated content, plus be built in a way that developers of all accessibility knowledge can use.

{% Assessment 'patterns' %}

Content structure

One of the most important aspects of digital accessibility is the underlying structure of the page. When you build your website or app using structural elements instead of relying on styles alone, you give critical context to people using assistive technologies (AT), such as screen readers.

Structural elements serve as an outline of the content on the screen, but they also act as anchor points to allow for easier navigation within the content.

When you use semantic HTML elements, the inherent meaning of each element is passed on to the accessibility tree and used by the AT, giving more meaning to the content than non-semantic elements. There may be cases where you need to add additional ARIA attributes to build relationships or to enhance the overall user experience, but in most situations, one of the 100+ HTML elements available should work fairly well on its own.

While this module focuses on the most widely used structural elements critical to digital accessibility, there are certainly additional elements and environmental factors to consider when building structure into your website or app. These examples are an introduction to the topic, rather than all-inclusive.

{% Aside %}

Our Learn HTML course covers the basics of HTML and semantic structure in great detail. As such, this module builds off of that course material and is focused specifically on digital accessibility. Likewise, be sure to review the ARIA and HTML module in this course before diving into this module.

{% endAside %}

Landmarks

Users of AT rely on structural elements to give them information about the page's overall layout. When sectioning off large regions of content, you can use either ARIA landmark roles or the newer HTML landmark elements to add structural context to your page.

Landmarks ensure content is in navigable regions. It's recommended that you supply at least one landmark per page.

Some resources suggest combining ARIA and HTML landmarks together to provide better AT coverage. While this type of redundancy shouldn't cause issues for your users, test the patterns using a screen reader to be certain. When in doubt, it's best to default to using only the newer HTML landmark elements, as the browser support is very robust.

Let's compare the HTML landmark elements as mapped to their counterpart ARIA landmark roles.

Now, let's compare examples of accessible content structure.

<header>
	<nav>...</nav>
</header>
<main>
	<section aria-label="Introduction to stamp collecting">
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
	</section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>

{% Aside %}

Check out the ARIA Landmarks Example for more information and best practices.

{% endAside %}

Headings

When implemented correctly, HTML heading levels form a succinct outline of the overall page content.

There are six heading levels we can use. Heading level one <h1> is used for the page's highest and most important information, moving incrementally to heading level six <h6> for the lowest and least important information.

The sequence of the heading levels is important. Ideally, you won't skip heading levels, for example, starting a section with an <h1> and immediately following it with an <h5>. Instead, you should progress to the <h5> in order. Heading level order is especially important to AT users as this is one of their primary ways to navigate through content.

{% Aside %}

While you can use ARIA heading roles for heading levels, it's recommended you use semantic HTML heading levels whenever possible.

{% endAside %}

To help you adhere to the proper semantic structure and order for headings, consider decoupling your CSS styles from the heading levels. This allows you more flexibility in heading styles while maintaining the heading level order. It's critical you don't use styles alone to create headings, as these aren't seen by AT as a heading.

{% Codepen { user: 'web-dev-codepen-external', id: 'Vwdajpe', height: 400, theme: 'auto', tab: 'html,css,result' } %}

When we fake headings, the appropriate structure isn't conveyed to AT users.

Headings are also helpful for people with cognitive and attention deficit disorders. It's important to make the heading content meaningful to help them understand what is most important on the page.

<header>
  <h1>Stamp collecting</h1>
</header>
<main>
	<section aria-label="Introduction to stamp collecting">
		<h2>What is stamp collecting?</h2>
		<p>Stamp collecting, also known as philately, is the study of postage stamps, stamped envelopes, postmarks, postcards, and other materials relating to postal delivery.</p>
	</section>

	<section aria-label="Start a stamp collection">
		<h2>How do I start a stamp collection?</h2>
    <h3>Required equiment</h3>
    <p>...</p>

    <h3>How to acquire stamps</h3>
    <p>...</p>

    <h3>Organizations you can join</h3>
		<p>...</p>
	</section>
</main>

Lists

HTML lists are a way to semantically group items similar to one other giving them inherent meaning, much like your grocery store list or that never-ending to-do list you keep ignoring.

There are three types of HTML lists:

• ordered <ol>
• unordered <ul>
• description <dl>

The list item <li> element is used to represent an item in an ordered or unordered list, while the description term <dt> and definition <dd> elements can be found in the description list.

When programmed correctly, these elements can inform non-sighted AT users about the visible structure of the list. When an AT encounters a semantic list, it can tell the user the list name and how many items are in it. As the user navigates within the list, the AT will read each list item out loud and tell which number it's in the list—item one of five, item two of five, and so on.

Grouping items into lists also helps sighted people who have cognitive and attention disorders and those with reading disabilities, as list content is typically styled to have more visual whitespace and the content is to the point.

<div>
  <h1>How do I start a stamp collection?</h1>
  <h2>Equipment you will need</h2>
  <ol>
    <li>Small tongs with rounded tips</li>
    <li>Stamp hinges</li>
    <li>Stockbook or albumn</li>
    <li>Magnifying glass</li>
    <li>Stamps</li>
  </ol>
</div>

Tables

In HTML, tables are generally used for organizing data or page layout.

Depending on the table's purpose, you'll use different semantic structural elements. Tables can be very complex in structure, but when you stick to the basic semantic rules, they are fairly accessible without much intervention.

Layout

In the early days of the internet, layout tables were the primary HTML element used to build visual structures. Today, we use a mix of semantic and non-semantic elements such as <div>s and landmarks to create layouts.

While the days of creating layout tables are mostly over, there are times when layout tables are still used, such as in visually rich emails, newsletters, and advertisements. In these cases, tables used only for layout must not use structural elements that convey relationships and add context, such as <th> or <caption>.

Layout tables must also be hidden from AT users with the ARIA presentation role or aria-hidden state.

<table role="presentation">
  <tr>
    <td>[Stamp Image 1]</td>
    <td>[Stamp Image 2]</td>
    <td>[Stamp Image 3]</td>
  </tr>
</table>

Data

Unlike a layout table, which should be hidden from AT users, a data table and all its elements must be exposed. The structure of data tables is critical for conveying simple and complex information to users.

When a table is structured correctly, relationships form between the column headers and rows and the data within the table. When structured incorrectly, the user is left to decipher the meaning and context of the information in the table.

Depending on the complexity of the table, forming relationships through code is accomplished in different ways. The first step to making a table accessible is to mark up header cells with <th> and data cells with <td> elements.

For more complex tables, you may need to use additional HTML table elements such as <rowgroup>, <colgroup>, <caption>, and scope to convey meaning and relationships.

<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>Animal</th>
    <th>Year</th>
    <th>Condition</th>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>

Assistive Technology testing

{% Aside %} This module is a continuation of the previous two testing modules, automated accessibility testing and manual accessibility testing. If you have not gone through the exercises in those modules yet, we encourage you to do so, as this module starts where they left off. {% endAside %}

This module focuses on using assistive technology (AT) for accessibility testing. A person with disabilities can use AT to help increase, maintain, or improve the capabilities of performing a task.

In the digital space, ATs can be:

• No/Low-tech: head/mouth sticks, hand-held magnifiers, devices with large buttons
• High-tech: voice-activated devices, eye-tracking devices, adaptive keyboards/mice
• Hardware: switch buttons, ergonomic keyboards, auto-refreshing Braille device
• Software: text-to-speech programs, live captions, screen readers

We encourage you to use multiple types of ATs in your overall testing workflow.

Screen reader testing basics

In this module, we focus on one of the most popular digital ATs, screen readers. A screen reader is a piece of software that reads the underlying code of a website or app. It then converts that information into speech or Braille output for the user.

Screen readers are essential for people who are blind and deafblind, but they also could benefit people with low vision, reading disorders, or cognitive disabilities.

Browser compatibility

There are multiple screen reader options available. The most popular screen readers today are JAWS, NVDA, and VoiceOver for desktop computers and VoiceOver and Talkback for mobile devices.

Depending on your operating system (OS), favorite browser, and the device that you use, one screen reader may stand out as the best option. Most screen readers are built with specific hardware and web browsers in mind. When you use a screen reader with a browser it was not calibrated for, you may encounter more "bugs" or unexpected behavior. Screen readers work best when used in the following combinations.

Screen reader commands

Once you have the proper set-up for your screen reader software for your desktop or mobile device, you should look at the screen reader documentation (linked in the preceding table) and run through some essential screen reader commands to familiarize yourself with the technology. If you have used a screen reader before, consider trying out a new one!

When using a screen reader for accessibility testing, your goal is to detect problems in your code that interfere with the usage of your website or app, not to emulate the experience of a screen reader user. As such, there is a lot you can do with some foundational knowledge, a few screen reader commands, and a bit—or a lot—of practice.

If you need to further understand the user experience of people using screen readers and other ATs, you can engage with many organizations and individuals to gain this valuable insight. Remember that using an AT to test code against a set of rules and asking users about their experience often yields different results. Both are important aspects to create fully inclusive products.

Key commands for desktop screen readers

Key commands for mobile screen readers

Screen reader testing demo

To test our demo, we used a Safari on a laptop running MacOS and capture sound. You can walk through these steps using any screen reader, but the way you encounter some errors may be different from how its described in this module.

Step 1

Visit the updated CodePen, which has all the automated and manual accessibility updates applied.

View it in debug mode to proceed with the next tests. This is important, as it removes the <iframe> which surrounds the demo webpage, which may interfere with some testing tools. Learn more about CodePen's debug mode.

Step 2

Activate the screen reader of your choice and go to the demo page. You may consider navigating through the entire page from top to bottom before focusing on specific issues.

We've recorded the our screen reader for each issue, before and after the fixes are applied to the demo. We encourage you to run through the demo with your own screen reader.

Issue 1: Content structure {: #content-structure}

Headings and landmarks are one of the primary ways people navigate using screen readers. If these are not present, a screen reader user has to read the entire page to understand the context. This can take a lot of time and cause frustration. If you try to navigate by either element in the demo, you will quickly discover that they do not exist.

• Landmark example: <div class="main">...</div>
• Heading example: <p class="h1">Join the Club</p>

If you have updated everything correctly, there should not be any visual changes, but your screen reader experience will have dramatically improved.

Some inaccessible elements can't be observed by just looking at the site. You may remember the importance of heading levels and semantic HTML from the Content structure module. A piece of content may look like a heading, but the content is actually wrapped in a stylized <div>.

To fix the issue with headings and landmarks, you must first identify each element that should be marked up as such and update the related HTML. Be sure to update the related CSS as well.

Landmark example: <main>...</main>

Heading example: <h1>Join the Club</h1>

If you have updated everything correctly, there should not be any visual changes, but your screen reader experience will have dramatically improved.

Issue 2: Link context {: #link-context}

It's important to give content to screen reader users about the purpose of a link and if the link is redirecting them to a new location outside of the website or app.

In our demo, we fixed most of the links when we updated the active image alternative text, but there are a few additional links about the various rare diseases that could benefit from additional context—especially since they redirect to a new location.

<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
  Maple syrup urine disease (MSUD)
</a>

To fix this issue for screen reader users, we update the code to add more information, without affecting the visuals element. Or, to help even more people such as those with reading and cognitive disorders, we may choose to add additional visual text instead.

There are many different patterns we may consider to add additional link information. Based on our simple environment that supports just one language, an ARIA label is a straightforward option in this situation. You may notice that the ARIA label overrides the original link text, so make sure to include that information in your update.

<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
  aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
  Maple syrup urine disease (MSUD)
</a>

Issue 3: Decorative image

In our automated testing module, Lighthouse was unable to pick up on the inline SVG that acts as the main splash image on our demo page—but the screen reader finds it and announces it as "image" without additional information. This is true, even without explicitly adding the role="img" attribute to the SVG.

<div class="section-right">
  <svg>...</svg>
</div>

To fix this issue, we first need to decide if the image is informative or decorative. Based on that decision, we need to add the appropriate image alternative text (informative image) or hide the image from screen reader users (decorative).

We weighed the pros and cons of how best to categorize the image and decided it was decorative, which means we want to add or modify the code to hide the image. A quick method is to add a role="presentation" to the SVG image directly. This sends a signal to the screen reader to skip over this image and not list it in the images group.

<div class="section-right">
  <svg role="presentation">...</svg>
</div>

Issue 4: Bullet decoration {: #bullet-decoration}

You may have noticed that the screen reader reads the CSS bullet image under the rare diseases sections. While not the traditional type of image we discussed in the Images module, the image still must be modified as it disrupts the flow of the content and could distract or confuse a screen reader user.

<p class="bullet">...</p>

Much like the decorative image example discussed earlier, you can add a role="presentation" to the HTML with the bullet class to hide it from the screen reader. Similarly, a role="none" would work. Just be sure not to use aria-hidden: true or you will hide all of the paragraph information from screen reader users.

<p class="bullet" role="none">...</p>

Issue 5: Form field

In the Forms module, we learned that all form fields must also have a visual and programmatic label. This label must remain visible at all times.

In our demo, we're missing both a visual and programmatic label on our newsletter sign-up email field. There is a text placeholder element, but this does not replace the label as it's not visually persistent and is not fully compatible with all screen readers.

<form>
  <div class="form-group">
    <input type="email" placeholder="Enter your e-mail address" required>
    <button type="submit">Subscribe</button>
  </div>
</form>

To fix this issue, replace the text placeholder with a look-alike label element. That label element is programmatically connected to the form field and movement was added with JavaScript to keep the label visible even when content is added to the field.

<form>
  <div class="form-group">
    <input type="email" required id="youremail" name="youremail" type="text">
    <label for="youremail">Enter your e-mail address</label>
    <button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
  </div>
</form>

Wrap up

Congratulations! You have completed all of the testing for this demo. You can look at all of these changes in the updated Codepen for this demo.

Now, you can use what you've learned to review the accessibility of your own websites and apps.

The goal of all of this accessibility testing is to address as many possible issues that a user may potentially encounter. However, this does not mean that your website or app will be perfectly accessible when you're finished. You'll find the most success by designing your website or app with accessibility throughout the process, and incorporating these tests with your other pre-launch testing.

{% Assessment 'at' %}

Automated accessibility testing

So far in this course, you have learned about the individual, business, and legal aspects of digital accessibility, and the basics of digital accessibility conformance. You have explored specific topics related to inclusive design and coding, including when to use ARIA versus HTML, how to measure color contrast, when JavaScript is essential, amongst other topics.

In the remaining modules, we shift gears from designing and building to testing for accessibility. We'll utilize a three-step testing process that includes automated, manual, and assistive technology testing tools and techniques. We'll use the same demo throughout these testing modules to progress the web page from inaccessible to accessible.

Each test—automated, manual, and assistive tech—is critical to achieving the most accessible product possible.

Our tests rely on the Web Content Accessibility Guidelines (WCAG) 2.1 conformance level A and AA as our standards. Remember that your industry, product type, local/country laws and policies, or overall accessibility goals will dictate which guidelines to follow and levels to meet. If you don't require a specific standard for your project, the recommendation is to follow the latest version of WCAG. Refer back to "How is digital accessibility measured?" for general information on accessibility audits, conformance types/levels, WCAG, and POUR.

As you now know, accessibility conformance is not the full story when it comes to supporting people with disabilities. But, it's a good starting point as it provides a metric you can test against. We encourage you to take additional actions outside of accessibility conformance testing, such as running usability tests with people with disabilities, hiring people with disabilities to work on your team, or consulting an individual or company with digital accessibility expertise to help you build more inclusive products.

Automated testing basics

Automated accessibility testing uses software to scan your digital product for accessibility issues against pre-defined accessibility conformance standards.

Pros of automated accessibility tests:

• Easy to repeat tests at different stages of the product lifecycle
• Just a few steps to run and very quick results
• Little accessibility knowledge is required to run the tests or understand the results

Cons of automated accessibility tests:

• Automated tools don't catch all of the accessibility errors in your product
• Reported false positives (an issue is reported that isn't a true WCAG violation)
• Multiple tools may be needed for different product types and roles

Automated testing is a great first step to check your website or app for accessibility, but not all checks can be automated. We'll go into more detail on how to check the accessibility of elements that cannot be automated in the manual accessibility testing module.

Types of automated tools

One of the first online automated accessibility testing tools was developed in 1996 by the Center for Applied Special Technology (CAST), called "The Bobby Report." Today, there are over 100 automated testing tools to choose from!

Automated tool implementation varies from accessibility browser extensions to code linters, desktop and mobile applications, online dashboards, and even open-source APIs you can use to build your own automated tooling.

Which automated tool you decide to use can depend on many factors, including:

• Which conformance standards and levels are you testing against? This may include WCAG 2.1, WCAG 2.0, U.S. Section 508, or a modified list of accessibility rules.
• What type of digital product are you testing? This could be a website, web app, native mobile app, PDF, kiosk, or other product.
• What part of the software development life cycle are you testing your product?
• How much time does it take to set up and use the tool? For an individual, team, or company?
• Who is conducting the test: designers, developers, QA, etc.?
• How often do you want the accessibility to be checked? What details should be included in the report? Should issues be directly linked to a ticketing system?
• Which tools work best in your environment? For your team?

There are many additional factors to consider as well. Check out WAI's article on "Selecting Web Accessibility Evaluation Tools" for more information on how to select the best tool for you and your team.

Demo: Automated test

For the automated accessibility testing demo, we'll be using Chrome's Lighthouse. Lighthouse is an open-source, automated tool created to improve the quality of web pages through different types of audits, such as performance, SEO, and accessibility.

Our demo is a website built for a made-up organization, the Medical Mysteries Club. This site is intentionally made inaccessible for the demo. Some of this inaccessibility may be visible to you, and some (but not all) will be caught in our automated test.

Step 1

Using your Chrome browser, install the Lighthouse extension.

There are many ways to integrate Lighthouse into your testing workflow. We'll use the Chrome extension for this demo.

Step 2

We have built a demo in CodePen. View it in debug mode to proceed with the next tests. This is important, as it removes the <iframe> which surrounds the demo web page, which may interfere with some testing tools. Learn more about CodePen's debug mode.

Step 3

Open Chrome DevTools and navigate to the Lighthouse tab. Uncheck all of the category options except for "Accessibility." Keep the mode as the default and choose the device type you're running the tests on.

Step 4

Click the "Analyze page load" button and give Lighthouse time to run its tests.

Once the tests are complete, Lighthouse displays a score that measures how accessible the product you're testing is. The Lighthouse score is calculated by the number of issues, issue types, and the impact on users of the issues detected.

Beyond a score, the Lighthouse report includes detailed information about what issues it has detected and links to resources to learn more about remedying them. The report also includes tests that are passed or not applicable and a list of additional items to check manually.

{% Aside %}

The automated Lighthouse tests were run in December 2022. Due to changes in the codebase, browsers, assistive technology, accessibility standards, and/or rulesets, your test results may vary.

{% endAside %}

Step 5

Now, let's go through an example of each automated accessibility issue discovered and fix the relevant styles and markup.

Issue 1: ARIA roles {: #aria-roles}

The first issue states: "Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children. Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions." Learn more about ARIA role rules.

In our demo, the newsletter subscribe button fails:

<button role="list" type="submit" tabindex="1">Subscribe</button>

The "subscribe" button next to the input field has an incorrect ARIA role applied to it. In this case, the role can be removed completely.

<button type="submit" tabindex="1">Subscribe</button>

Issue 2: ARIA hidden {: #aria-hidden}

"[aria-hidden="true"] elements contain focusable descendants. Focusable descendants within an [aria-hidden="true"] element prevent those interactive elements from being available to users of assistive technologies like screen readers. Learn more about aria-hidden rules.

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>

The input field had an aria-hidden="true" attribute applied to it. Adding this attribute hides the element (and everything nested under it) from assistive tech.

<input type="email" placeholder="Enter your e-mail address" tabindex="-1" required>

In this case, you should remove this attribute from the input to allow people using assistive technology to access and enter information into the form field.

Issue 3: Button name {: #button-name}

Buttons do not have an accessible name. When a button doesn't have an accessible name, screen readers announce it as "button," making it unusable for users who rely on screen readers. Learn more about button name rules.

<button role="list" type="submit" tabindex="1">Subscribe</button>

When you remove the inaccurate ARIA role from the button element in issue 1, the word "Subscribe" becomes the accessible button name. This functionality is built into the semantic HTML button element. There are additional pattern options to consider for more complex situations.

<button type="submit" tabindex="1">Subscribe</button>

Issue 4: Image alt attributes {: #image-alt-attributes}

Image elements are missing [alt] attributes. Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute. Learn more about image alternative text rules.

<a href="index.html">
  <img src="https://upload.wikimedia.org/wikipedia/commons/….png">
</a>

Since the logo image is also a link, you know from the image module that it is called an actionable image and requires alternative text information about the purpose of the image. Normally, the first image on the page is a logo, so you can reasonably assume your AT users will know this, and you may decide not to add this additional contextual information to your image description.

<a href="index.html">
  <img src="https://upload.wikimedia.org/wikipedia/commons/….png"
    alt="Go to the home page.">
</a>

Issue 5: Link text {: #link-text}

Links do not have a discernible name. Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn more about link text rules.

<a href="#!"><svg><path>...</path></svg></a>

All of the actionable images on the page must include information about where the link will send users. One method to remedy this issue is to add alternative text to the image about the purpose, as you did on the logo image in the example above. This works great for an image using a <img> tag, but <svg> tags cannot use this method.

For the social media icons, which use <svg> tags, you can use a different alternative description pattern targeting SVGs, add the information between the <a> and <svg> tags and then hide it visually from users, add a supported ARIA, or other options. Depending on your environment and code restrictions, one method might be preferable over another. Let's use the simplest pattern option with the most assistive technology coverage, which is adding a role="img" to the <svg> tag and including a <title> element.

<a href="#!">
  <svg role="img">
    <title>Connect on our Twitter page.</title>
    <path>...</path>
  </svg>
</a>

Issue 6: Color contrast {: #color-contrast }

Background and foreground colors don't have a sufficient contrast ratio. Low-contrast text is difficult or impossible for many users to read. Learn more about color contrast rules.

Two examples were reported.

There are many color contrast issues detected on the web page. As you learned in the color and contrast module, regular-sized text (less than 18pt / 24px) has a color contrast requirement of 4.5:1, while large-sized text (at least 18pt / 24px or 14pt / 18.5px bold) and essential icons must meet the 3:1 requirement.

For the page title, the teal-colored text needs to meet the 3:1 color contrast requirement since it is large-sized text at 24px. However, the teal buttons are considered regular-sized text at 16px bold, so they must meet the 4.5:1 color contrast requirement.

In this case, we could find a teal color that was dark enough to meet 4.5:1, or we could increase the size of the button text to 18.5px bold and change the teal color value slightly. Either method will stay in line with the design aesthetics.

All the gray text on the white background also fails for color contrast, except for the two largest headings on the page. This text must be darkened to meet the 4.5:1 color contrast requirements.

<figcaption>
  <code><b>Mermaid syndrome</b></code> now has a color value of <code>#767676</code> and the background remains <code>#ffffff</code>. The color contrast ratio is 4.5:1.
  
  <a href="https://web-dev.imgix.net/image/VbsHyyQopiec0718rMq2kTE1hke2/3DgVWG6oIRRVTGYmZP3c.png">View full size screenshot</a>.
</figcaption>

Issue #7 - list structure {: #list-structure }

List items (<li>) are not contained within <ul> or <ol> parent elements. Screen readers require list items (<li>) to be contained within a parent <ul> or <ol> to be announced properly.

Learn more about list rules.

<div class="ul">
  <li><a href="#">About</a></li>
  <li><a href="#">Community</a></li>
  <li><a href="#">Donate</a></li>
  <li><a href="#">Q&A</a></li>
  <li><a href="#">Subscribe</a></li>
</div>

We used a CSS class in this demo to simulate the unordered list instead of using a <ul> tag. When we wrote this code improperly, we removed the inherent semantic HTML features built into this tag. By replacing the class with a real <ul> tag and modifying the related CSS, we resolve this accessibility issue.

<ul>
  <li><a href="#">About</a></li>
  <li><a href="#">Community</a></li>
  <li><a href="#">Donate</a></li>
  <li><a href="#">Q&A</a></li>
  <li><a href="#">Subscribe</a></li>
</ul>

Issue #8 - tabindex {: #tabindex }

Some elements have a [tabindex] value greater than 0. A value greater than 0 implies an explicit navigation ordering. Although technically valid, this often creates frustrating experiences for users who rely on assistive technologies. Learn more about tabindex rules.

<button type="submit" tabindex="1">Subscribe</button>

Unless there is a specific reason to disrupt the natural tabbing order on a web page, there is no need to have a positive integer on a tabindex attribute. To keep the natural tabbing order, we can either change the tabindex to 0 or remove the attribute altogether.

<button type="submit">Subscribe</button>

Step 6

Now that you've fixed all the automated accessibility issues, open up a new debug mode page. Run the Lighthouse accessibility audit again. Your score should be much better than on the first run.

We've applied all of these automated accessibility updates to a new CodePen.

Next step

Great job. You have accomplished a lot already, but we haven't finished yet! Next, we'll move on to manual checks, as detailed in the manual accessibility testing module.

{% Assessment 'automated' %}

Manual accessibility testing

{% Aside %} This module on manual accessibility testing is a continuation of the previous module, automated accessibility testing. If you have not yet completed the exercises in that module, we encourage you to do so. This module starts where the previous one left off, focusing on manual accessibility testing tools and techniques. {% endAside %}

Manual testing basics

Manual accessibility testing uses keyboard, visual, and cognitive tests, tools, and techniques to find issues that automated tooling cannot. As automated tooling does not cover all of the success criteria identified in WCAG, it's vital that you do not run automated accessibility tests and then stop testing!

As technology advances, more tests could be covered by automated tooling alone, but today, both manual and assistive technology checks need to be added to your testing protocols to cover all of the applicable WCAG checkpoints.

{% Aside %} Each automated testing tool can have distinct accessibility rulesets and use them in different ways. The actual percentage of WCAG checkpoints covered will vary by tool and the content being tested. {% endAside %}

Pros of manual accessibility tests:

• Reasonably straightforward and quick to run
• Catch a higher percentage of issues than automated tests alone
• Little tooling and expertise needed for success

Cons of manual accessibility tests:

• More complex and time-consuming than automated tests
• May be difficult to repeat at scale
• Require more accessibility expertise to run tests and interpret the results

Let's compare what accessibility elements and details can currently be detected by an automated tool, versus those that won't be detected.

Types of manual tests

There are many manual tools and techniques to consider when looking at your web page or app for digital accessibility. The three biggest focus areas in manual testing are keyboard functionality, visually-focused reviews, and general content checks.

We will cover each of these topics at a high level in this module, but the following tests are not meant to be an exhaustive list of all the manual tests you can or should run. We encourage you to start with a manual accessibility checklist from a reputable source and develop your own focused manual testing checklist for your specific digital product and team needs.

{% Aside %} Some organizations consider assistive technology (AT) checks to be part of the manual testing process as there are a lot of overlaps. In this course, we break AT testing into a separate module, as it's more advanced than other manual tests and deserves a deeper and separate focus. {% endAside %}

Keyboard checks

It's estimated that about 25% of all digital accessibility issues are related to a lack of keyboard support. As we learned in the keyboard focus module, this affects all types of users, including sighted keyboard-only users, low-vision/blind screen reader users, and people using voice recognition software that uses technology that relies on content being keyboard accessible as well.

Keyboard tests answer questions such as:

• Does the web page or feature require a mouse to function?
• Is the tabbing order logical and intuitive?
• Is the keyboard focus indicator always visible?
• Can you get stuck in an element that shouldn't trap focus?
• Can you navigate behind or around an element that should be trapping focus?
• When closing an element that received focus, did the focus indicator return to a logical place?

While the impact of keyboard functionality is huge, the testing procedure is quite simple. All you need to do is set aside your mouse or install a small JavaScript package and test your website using only your keyboard. The following commands are essential for keyboard testing.

Visual checks

Visual checks focus on visual elements of the page and utilize tools such as screen magnification or browser zoom to review the website or app for accessibility.

Visual checks can tell you:

• Are there color contrast issues that an automated tool could not pick up, such as text on top of a gradient or image?
• Are there any elements that look like headings, lists, and other structural elements but are not coded as such?
• Are navigation links and form inputs consistent throughout the website or app?
• Is there any flashing, strobing, or animation that exceeds the recommendations?
• Does the content have proper spacing? For letters, words, lines, and paragraphs?
• Can you see all the content using a screen magnifier or browser zoom?

{% Aside %} Sometimes, you can't observe the accessibility of a visual element without additional help. You'll read more about that in our next module on assistive technology testing. {% endAside %}

Content checks

Unlike visual tests that focus on layouts, movement, and colors, content checks focus on the words on the page. Not only should you be looking at the copy itself, but you should review the context to be sure it makes sense to others.

Content checks answer questions such as:

• Are page titles, headings, and form labels clear and descriptive?
• Are image alternatives concise, accurate, and useful?
• Is color alone used as the only way of conveying meaning or information?
• Are links descriptive or do you use generic text such as “read more” or “click here?”
• Are there any changes to the language within a page?
• Is plain language being used and are all acronyms spelled out when first referenced?

Some content checks can be automated, in part. For example, you could write a JavaScript linter that checks for "Click here" and suggests you make a change. However, these custom solutions often still need a human to change the copy to something contextual.

Demo: Manual test

So far, we have run automated tests on our demo web page and found and remediated eight different issue types. We are now ready to run manual checks to see if we can discover even more accessibility issues.

Step 1

Our updated CodePen demo has all of the automated accessibility updates applied.

View it in debug mode to proceed with the next tests. This is important, as it removes the <iframe> which surrounds the demo web page, which may interfere with some testing tools. Learn more about CodePen's debug mode.

Step 2

Start your manual testing process by setting your mouse or trackpad aside and navigate up and down the DOM using only your keyboard.

Issue 1: Visible focus indicator {: #visible-focus-indicator}

You should see the first keyboard issue right away—or rather, you shouldn't see it—as the visible focus indicator has been removed. When you scan the CSS in the demo, you should find the dreaded “outline: none” added to the codebase.

  :focus {
    outline: none;
  }

As you learned in the Keyboard focus module, you need to remove this line of code to allow web browsers to add a visible focus for users. You can go one step further and create a focus indicator styled to meet the aesthetics of your digital product.

:focus {
  outline: 3px dotted #008576;
}

Issue 2: Focus order {: #focus-order}

Once you have modified the focus indicator and it's visible, be sure to tab through the page. As you do so, you should notice that the form input field used to subscribe to the newsletter does not receive focus. It has been removed from the natural focus order by a negative tabindex.

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>

Since we would like people to use this field to sign-up for our newsletter, all we need to do is remove the negative tabindex or set it to zero to allow the input to become keyboard focusable again.

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>

Step 3

Once keyboard focus has been checked, we move on to visual and content checks.

Issue 3: Link color contrast {: #link-color-contrast}

As you went through the keyboard tests by tabbing up and down the demo page, you probably noticed the keyboard focused on three visually hidden links in the paragraphs about the different medical conditions.

For our page to be accessible, links must stand out from the surrounding text and include a non-color style change on mouse hover and keyboard focus.

A quick solution is to add an underline to the links inside the paragraphs to make them stand out. This would solve the accessibility issue, but it might not suit the overall design aesthetics you hope to achieve.

If you choose not to add an underline, you will need to modify the colors in such a way as to meet the requirements for both the background and copy.

When looking at the demo using a link contrast checker tool, you will see that the link color meets the 4.5:1 color contrast requirement between regular-sized text and the background. However, non-underlined links must also meet a 3:1 color contrast requirement against the surrounding text.

One option is to change the link color to match the other elements on the page. But if you change the link color to green, the body copy must also be modified to meet the overall color contrast requirements between all three elements: links, background, and surrounding text.

Issue 4: Icon color contrast {: #icon-color-contrast}

Another missed color contrast issue is the social media icons. In the color and contrast module, you learned that essential icons need to meet a 3:1 color contrast against the background. However, in the demo, the social media icons have a contrast ratio of 1.3:1.

To meet the 3:1 color contrast requirements, the social media icons are changed to a darker gray.

{% Aside %}

You may notice that the border around the text input doesn't meet the 3:1 color contrast requirement against the background. However, this input has placeholder text which meets the required color contrast requirements for its size, according to the non-text contrast overview page.

{% endAside %}

Issue 5: Content layout {: #content-layout}

If you look at the layout of the paragraph content, the text is fully justified. As you learned in the Typography module, this creates "rivers of space," which may make the text difficult for some users to read.

p.bullet {
   text-align: justify;
}

To reset the text alignment in the demo, you can update the code to text-align: left; or remove that line entirely from the CSS, as left is the default alignment for browsers. Be sure to test the code, in case other inherited styles remove the default text alignment.

p.bullet {
   text-align: left;
}

Step 4

Once you've identified and fixed all the manual accessibility issues outlined in the previous steps, your page should look similar to our screenshot.

It's possible that you'll find more accessibility issues in your manual checks than we covered in this module. We'll discover many of these issues in the next module.

Next step

Way to go! You have completed the automated and manual testing modules. You can view our updated CodePen, which has all the automated and manual accessibility fixes applied.

Now, head over to the last testing module focused on assistive technology testing.

{% Assessment 'manual' %}

Typography

Creating and designing accessible content is more than just choosing an easy-to-read font. Even with accessible font families, people with low vision, cognitive, language, and learning disabilities may struggle to process the text due to other elements such as font variations, size, spacing, and kerning—to name a few. This module will look into basic design considerations to make your content more inclusive and reach even more people.

{% Aside %} To learn specific implementation of typography, check out the Learn CSS Typography module. {% endAside %}

Typeface

A major factor that can strongly impact copy accessibility is the typeface. Your choice of typeface and styling can make or break any page design.

People with reading, learning, and attention disorders like dyslexia and attention-deficit hyperactivity disorder (ADHD), as well as people with low vision, can all benefit when you use accessible typefaces.

Choose common typefaces The quickest way to create an accessible design is to choose a common typeface (for example, Arial, Times New Roman, Calibri, Verdana, and many others).

Many typeface studies testing people with disabilities show that common typefaces lead to faster reading speeds and a deeper comprehension level when compared to uncommon typefaces. While these common typefaces are not inherently more accessible than other typefaces, some people with disabilities have an easier time reading them because they have had a lot of experience working with (or around) these typefaces.

In addition to choosing a common typeface, be sure to avoid ornate or handwritten typefaces, as well as ones with only one character case available (for example, only uppercase characters). These specialty typefaces with cursive designs, quirky shapes, or artistic features like thin lines may look nice, but they are much harder for some people with disabilities to read than common typefaces.

{% Codepen { user: 'web-dev-codepen-external', id: 'ExLvWOV', height: 350, theme: 'auto', tab: 'css,result' } %}

Letter characteristics and kerning

The research on whether serif or sans serif typefaces are easier to read is inconclusive, but certain numbers, letters, or combinations can confuse people with language-based learning and cognitive disabilities. For people with these types of disabilities, every letter and number must be clearly defined and have unique characteristics, so letters are not confused with a numbers.

Common readability offenders are the uppercase "I" (India), lowercase "l" (lettuce), and the number "1". Likewise, letter pairs like b/d, p/q, f/t, i/j, m/w, and n/u can sometimes flip either left-right or up-down for some readers.

The copy's readability also decreases when the letter spacing or kerning is too tight. Pay special attention to kerning, especially between the problematic letter pair r/n. Otherwise, words like "yarn" could change to "yam" or "stern" to "stem," entirely changing the meaning of the copy.

Open source typeface collections like Google Fonts can aid you in selecting the most inclusive typeface for your next design. If you use Adobe products, you can embed accessible font families from foundry partners directly into your designs—this includes select Google Fonts.

{% Codepen { user: 'web-dev-codepen-external', id: 'BaxdWvV', height: 350, theme: 'auto', tab: 'css,result' } %}

When you are looking for your next typeface, pay particular attention to the following:

• Use common fonts whenever possible.
• Avoid using elaborate or handwritten fonts and those with only one character case.
• Pick a typeface with unique characteristics—paying special attention to the uppercase I, lowercase l, and 1.
• Review certain letter combinations to be sure they are not an exact mirror image of one another.
• Check the kerning, especially between the r/n letter pair.

Font size and typographic styling

People often assume that picking out an accessible font family is all there is to creating inclusive content, but it is also important to consider the font size and how the text is styled on a page.

For example, people with low vision or color blindness may be unable to read some of the copy if it is too small, using an AT—like browser zoom—to read the copy. While other users, such as those with dyslexia or reading disorders, may have trouble reading italic text. Screen readers often ignore styling methods, such as bold and italics, so the intent of these styles is not conveyed to blind or low-vision users.

h2 {font-size: 1rem;}

Since you cannot predict what every user's needs are, when adding fonts to your digital products, be sure to consider the following guidelines:

• Base font sizes should be defined with a relative value (%, rem, or em) to allow easy resizing.
• Limit the number of typeface variations like color, bold, ALL CAPS, and italics to increase readability. Instead, use methods to emphasize words in your copy, such as asterisks, dashes, or highlighting an individual word.
• Use markup instead of text on images whenever possible. Screen readers cannot read embedded text on images (without extra code added), and embedded text can also become pixelated when magnified by low-vision users.

Structure and layout

While typeface, font size, and typographic styling are important to accessible typography, the structure and layout of copy on a page can be equally important to a user's understanding.

Complex layouts can be a real barrier for people with low vision, reading disabilities, and the 6.1 million people in the US with ADHD. These types of disabilities make it more difficult for people to keep their place and follow the flow of the copy due to the lack of clear linear pathways, missing headings, and ungrouped elements.

An important aspect of accessible layout designs is making critical elements distinct from one another and grouping similar elements together. If the elements are too close, it can be difficult to tell where one element begins and ends, especially if they have similar styling.

Think about your copy as a collection of individual bullet points on an outline. This will help you plan out the overall page structure and enable you to use headings, subheadings, and lists whenever appropriate.

{% Codepen { user: 'web-dev-codepen-external', id: 'poVreqB', height: 450, theme: 'auto', tab: 'result' } %}

Spacing

Paragraph, sentence, and word spacing is also important as it helps readers retain their focus on the copy and adds to the page's overall visual understanding. Long lines of copy can be a barrier for readers with disabilities, as they have trouble keeping their place and following the flow of the copy. A narrow block of copy makes it easier for readers to continue to the next line.

{% Codepen { user: 'web-dev-codepen-external', id: 'ExLvWrP', height: 350, theme: 'auto', tab: 'result' } %}

Content alignment

Another frustration for many people with disabilities is reading justified copy. The uneven spacing between words in justified copy can cause "rivers of space" to form down the page, making the copy difficult to read.

Text justification can also cause words to be either bunched together or stretched in unnatural ways, so readers can find it difficult to locate word boundaries.

{% Codepen { user: 'web-dev-codepen-external', id: 'OJZjpdE', height: 350, theme: 'auto', tab: 'result' } %}

Thankfully, there are clear guidelines on spacing and tools such as Good Line-Height and the Golden Ratio Calculator to help make our copy more accessible. Incorporating these guidelines helps people with attention-deficit disorders, reading, and vision-based disabilities focus more on the copy and less on the layout.

Best practices for structure and layout

When considering structure and layout, be sure to:

• Use elements like headings, subheadings, lists, numbers, quote blocks, and other visual groupings to break the page into sections.
• Use clearly defined paragraphs, sentences, and word spacing.
• Build columns of copy that do not exceed 80 characters in width (40 characters for logograms).
• Avoid justified paragraph alignment, which creates "rivers of space" within the copy.

Accessible typography takeaways

Accessible typography can be boiled down to common-sense design choices based on your knowledge of your users' needs. Keeping this module in mind as you design and build out your content will go a long way toward helping you communicate clearly with the greatest number of people.

{% Aside %} Refer to the Typography module for Learn CSS to learn how to implement certain rules and styles. {% endAside %}

{% Assessment 'typography' %}

Video and audio

Have you ever wanted to watch a live event but couldn't find your headphones, so you turned on the captions? Or maybe you didn't quite catch the last few talking points from your favorite podcast, so you decided to read the transcript instead? If so, you probably understand the importance and convenience of having alternative ways to access audio and video content.

While your role at your company or organization may not require you to create audio and video content directly, it's important to know the basics of accessibility requirements for media. This knowledge will help you design and build the appropriate layouts and features to accommodate users with different environmental and sensory needs, such as the millions of people with hearing loss or visual impairment worldwide.

Alternative media types

Alternative media types were developed to support the media needs of people with disabilities. This gives people additional formats to choose from when accessing audio and video content.

The alternative media types you must include with your media files depend on:

• The type of media you are supporting—audio-only, video-only, or video with audio (multimedia) formats
• Whether the media is live or pre-recorded
• The version and level of WCAG compliance you are targeting
• Any additional media-related user needs

To create accessible audio and video content for websites and apps, there are four main types of alternative media types: captions, transcripts, audio descriptions, and sign language interpretation.

Captions

One of the most widely used alternative media types are captions. Captions are written text synchronized with multimedia content for people who can't hear or understand spoken words. They are presented in the same language as the main audio track and include important non-speech information, such as sound effects, background noises, and essential music.

Captions benefit people who are deaf, hard of hearing, or have cognitive disabilities, but are useful to many other people as well.

Captions come in two forms—open or closed.

• Closed captions (CC) are text on top of a video that can be turned on or off by the viewer and, depending on the media player, styled in a way that fits the user's needs.
• Open captions (OC) are text burned into the video and cannot be turned off or styled differently.

One method might be preferable, depending on the situation or how the multimedia will be consumed.

People often confuse captions with subtitles, but they aren't synonymous. Both are text synchronized with multimedia content, often appearing at the bottom of the media. Captions can be thought of as a transcription of dialogue and other essential sounds for people with disabilities. Subtitles are visual text for people who can hear the audio track but may not understand what was said, such as when watching a foreign language film.

{% Aside %} There are some geographical differences in what are considered captions and subtitles, so be sure to check the terminology in your location. {% endAside %}

{% Details %} {% DetailsSummary %} Compare screenshots from this video, with and without captions. {% endDetailsSummary %}

Transcripts

Close cousins to captions, transcripts are detailed, text-based documents that capture all essential words, sounds, and important visual information in your media. Transcripts primarily help people who are hard of hearing or deaf, and descriptive transcripts help people who are deafblind.

Transcripts are also useful for people with cognitive disabilities or for people who want to review the content at their own speed.

While transcripts are typically more detailed than captions, they are very similar in format and purpose. They are so similar that many people first add captions to their media, export them, and then use them as the foundation of their transcripts. Repurposing your captions to build your transcripts saves time versus creating everything from scratch.

Search bots can't access your captions but can crawl your text transcripts. When you include transcripts with your media files, your search engine optimization gets a boost. It's one of those rare exceptions when duplicate content isn't confusing to users or penalized by search engine algorithms.

Every media player handles transcripts in a different way. Some providers may not have that functionality built into their media player, and even when they do, some users may not be able to access the transcript interface. You can ensure you've made your transcript available to all users by:

• Including the transcript text directly in-context, on the page with the embedded video.
• Adding a link to an accessible PDF containing the transcript.
• Linking out to the copy on another page.
• Including a link to the transcript, wherever it lives, within the video description on whatever media player platform you've used (such as YouTube or Vimeo).

For example, visit YouTube to watch Password Problems? | There's no place like Chrome and review an example of a transcript.

Audio descriptions

Another alternative media used to support people with disabilities is audio description. This type of alternative media utilizes a narrator to explain important visual information to people who can't see the visual content. These descriptions include nonverbal information such as facial expressions, unspoken actions, and the background environment in video-only and multimedia content.

Sometimes audio descriptions need to be very detailed due to the large amount of information that needs to be shared with the viewer. If there aren't enough natural pauses in the video for audio descriptions, extended audio descriptions are used. In extended audio descriptions, a video will pause to give a narrator enough time to convey all the information in the media before playing the rest of the video.

Audio descriptions and extended audio descriptions help people who are blind or have low vision, but could help people with some cognitive disorders as well.

Sign language interpretation

Another major alternative media type you may encounter is sign language interpretation, where an interpreter narrates the auditory portion of the audio-only or multimedia content using sign language. This is very important for many people who are deaf, as sign language is their first and most fluent language.

Sign language interpretation is often more expressive and detailed than written documents, providing a much richer experience than captions or transcripts alone.

That said, sign language interpretation can be time-consuming and cost-prohibitive to many organizations. And even if you have the time and budget to add sign language interpretation to your media, there are over 300 different sign languages worldwide. Adding one sign language interpretation to your media wouldn't be enough to support a global audience.

What is digital accessibility, and why does it matter?

Imagine a world where you couldn't buy a present for a friend because the online shopping cart was incompatible with your device. Or a world where you had to ask a coworker to help you understand the recent sales chart because it only used soft monotone colors. Maybe you couldn't enjoy that new show everyone's been talking about because the captions are missing or badly automated.

For some people, this world is an everyday reality. But it doesn't have to be this way—this is a reality you can help change when you make digital accessibility a priority. Digital accessibility, commonly abbreviated to a11y, is about designing and building digital products so that, regardless of a person's disability, they can still interact with the product in a meaningful and equivalent way.

Beyond the typical leadership buy-in, time, effort, and budget that are required of any project, building digital products with full inclusivity in mind also requires:

• Expert knowledge of various accessibility standards
• Understanding the fundamentals of accessible designs and code
• Understanding the importance of using multiple testing techniques and tools

Most importantly, true inclusivity can only come when you include people with disabilities and accessibility best practices into the full product lifecycle—from planning, to designing, to coding, and more.

What is the individual impact?

The World Health Organization (WHO) estimates that over 15% of the world's population—or 1.3 billion people—self-identify as having a disability, making this group the largest minority group globally.

More recent reports from the Centers for Disease Control and Prevention (CDC), the US Census, the Academic Network of European Disability experts (ANED), and others estimate the total number of people with disabilities to be even greater. This number continues to grow as the world population ages and faces chronic health conditions.

{% Img src="image/VbsHyyQopiec0718rMq2kTE1hke2/wmi25b63ncEEhKTGYBUS.png", alt="Six people representing various disabilities. Each character will be represented.", width="800", height="200" %}

Inaccessible digital products impact people with disabilities. Some types of disabilities are impacted more in the digital world than others.

{% Aside %} To learn more about identity and language choices, we recommend reading Demystifying Disability: What to Know, What to Say, and How to be an Ally by Emily Ladau. {% endAside %}

{% Details 'open' %}

{% DetailsSummary 'h3' %} Visual impairments {% endDetailsSummary %}

Visual impairment (vision impairment, vision disability) is a decreased ability to see to the degree that causes problems not fixable by usual means, such as glasses or medication. Visual impairment can be due to disease, trauma, or congenital or degenerative conditions.

• Examples: B/blindness, low vision, color blindness
• Prevalence: 253 million people with visual impairment worldwide—36 million are blind, 217 million have moderate to severe visual impairment (MSVI) (Source), and 1 in 12 men and 1 in 200 women are colorblind. (Source)
• Tools include: Screen reader software, screen magnification tools, Braille output devices.
• Pain points: Digital products that do not work with screen reader software, mobile websites/apps without pinch to zoom, complex graphs and charts differentiated by colors alone, color contrasts that make it difficult to read text on the screen

{% Aside 'important' %} Use lowercase when referring to a vision-loss condition or to a blind person who prefers lowercase. Capitalize for those who capitalize Blind when describing themselves. {% endAside %}

"My vision has deteriorated rapidly over the last three years, and my phone's default font size ranges from large to mega-large. There are a decent amount of mobile apps that I can barely use because of their absurd font sizes."

Frank

Read a short article in the New York Times or watch a video on what it means to be legally blind.

{% endDetails %}

{% Details %} {% DetailsSummary 'h3' %} Mobility impairments {% endDetailsSummary %}

Mobility impairment is a category of disability that includes people with various physical disabilities. This type of disability includes upper or lower limb loss or disability, manual dexterity, and disability in coordination with different organs of the body.

• Examples: Arthritis, paralysis, amputees, seizure disorders.
• Prevalence: 1 in 7 people have mobility issues. (Source)
• Tools include: Adaptive switches, eye tracking devices, mouth/head sticks, speech input.
• Pain points: Elements that are only designed to work with the use of a mouse.

"Accessibility isn't just for people with disabilities. I had elbow surgery, and it temporarily changed how I managed my daily digital activities."

Melissa

{% endDetails %}

{% Details %}

{% DetailsSummary 'h3' %} Hearing impairments {% endDetailsSummary %}

A hearing impairment or hearing loss is a full or partial decrease in the ability to detect or understand sounds. Hearing impairments are caused by a wide range of biological and environmental factors.

• Examples: D/deafness, hard of hearing (HoH), hearing impaired (HI)
• Prevalence: Globally, over 1.5 billion people have a low to medium level of hearing loss, while it is estimated that 66 million people have a significant level of hearing loss.
• Tools include: hearing aids, captions, transcripts, sign language.
• Pain points: Audio content without text transcripts, video with no synchronized captions

{% Aside 'important' %} Use lowercase when referring to a hearing-loss condition or to a deaf person who prefers lowercase. Capitalize for those who identify as members of the Deaf community or when they capitalize Deaf when describing themselves. {% endAside %}

"Some deaf people say auto-captions are NOT better than nothing. Some deaf people say automatic captions ARE better than nothing. Unlike people with hearing, deaf people have nothing to fall back on. All they have is the captions. Personally, I'd rather see no captions than watch automatic captions. Sure, I'm disappointed there aren't captions. With no auto-captions, I avoid the painful experience of its notoriously bad captions."

Meryl

{% endDetails %}

{% Details %} {% DetailsSummary 'h3' %} Cognitive impairments {% endDetailsSummary %}

A cognitive disability covers a variety of medical conditions affecting cognitive ability. People with cognitive disabilities include various intellectual or cognitive deficits, deficits too mild to properly qualify as intellectual disability, specific conditions, and problems acquired later in life through acquired brain injuries or neurodegenerative diseases like dementia.

• Examples: Down's syndrome, A/autism, ADHD, dyslexia, aphasia.
• Frequency: Varies by condition.
• Tools include: Screen readers, text highlighting, text prediction, abstractive summarization tools.
• Pain points: Busy interfaces that make it overly complicated to focus on the task at hand, big walls of words with little whitespace, justified text, and small or hard-to-read fonts.

{% Aside 'important' %} Use lowercase when referring to autism as a disorder or to an autistic person who prefers lowercase. Capitalize for those who capitalize Autism or Autistic when describing themselves. {% endAside %}

"Right now, I am recovering from an ocular migraine, and I would say dark mode is not helping enough. I still need contrast, but less harshly bright."

Ruth

Read a short article in the New York Times or watch a video on face blindness (prosopagnosia).

{% endDetails %}

{% Details %} {% DetailsSummary 'h3' %} Seizure and vestibular disorders {% endDetailsSummary %}

A seizure is an excessive surge of electrical activity in the brain that can cause various symptoms, depending on which parts of the brain are involved. Seizures may result from genetics or a brain injury, but their cause is often unknown.

The vestibular system includes the parts of the inner ear and brain that process the sensory information that controls balance and eye movements. If disease or injury damages these processing areas, vestibular disorders can result. Vestibular disorders can also result from or be worsened by genetic or environmental conditions or occur for unknown reasons.

• Examples: Epilepsy, vertigo, dizziness, labyrinthitis, balance, and eye movement disorders.
• Frequency: 50 million people worldwide have epilepsy, and 1.8 million adults worldwide have bilateral vestibular hypofunction (BVH).
• Tools include: Operating system settings to reduce motion. In Windows, this setting is framed positively as Show animation, and is turned off. On Android, the setting Remove animations is turned on.
• Pain points: Videos that autoplay, extreme flashing or strobing of visual content, parallax effects, or scroll-triggered animations.

"I really dislike the superfluous animation that plagues iOS transitions between apps, so I turn it off. Downside: I'm denied most of the thoughtfully executed motion design on the web because there's no “some motion is fine” middle ground."

Oliver

{% endDetails %}

{% Details %} {% DetailsSummary 'h3' %} Speech impairments {% endDetailsSummary %}

A speech disorder is a condition in which a person has problems creating or forming the speech sounds needed to communicate with others.

• Examples: Muscular or cognitive issues that impede speech, such as apraxia, dysarthria, or stuttering.
• Frequency: 18.5 million individuals have a speech, voice, or language disorder.
• Tools include: Augmentative and alternative communication (AAC) and speech-generating devices.
• Pain points: Voice-activated technology such as smart home devices and apps.

"My son has a lisp due to dyspraxia. He will say "seep" rather than "sheep" or "fower" rather than "flower". It is sweet, but he gets so frustrated by voice-activated software.

Our new car uses voice activation to interact with a phone. Often if we are together, my husband will send us a WhatsApp message. The car will read it out loud, but when it asks us if we want to reply, my son's reply is not understood. He gets so upset... he now whispers the message to me so I can say it for the reply."

Helen

Read a short article in the New York Times or watch a video on stuttering and technology.

{% endDetails %}

Additional beneficiaries of accessibility

While the number of people with disabilities worldwide is large, it's important to remember that these numbers aren't inclusive of everyone that benefits from accessible digital spaces. This includes:

• Temporarily disabled. It may mean someone has a broken wrist or is cognitively impaired due to medication.
• Situationally disabled. For example, someone experiencing glare on a device screen or being unable to play the audio on a video in a public setting.
• Mildly disabled. A person needing eyeglasses to see a screen or captions to understand audio.
• Non-native speakers. If a person is not fluent in the language on the screen, they may need more time to read content on a slide on a carousel/slideshow.
• Older people with age-related diminishing senses. It could be a person needing reading glasses or bifocals to read small print or requiring a larger target size for buttons on their touch device due to an age-related hand tremor.
• Search engine optimization (SEO) bots. SEO bots do not have senses like sight and hearing and navigate by keyboard only. Your websites will be crawled more effectively when your site is accessible.

Business impact

People with disabilities make up almost a fourth of the world's population, but did you know that they also have a lot of spending power?

According to the American Institutes for Research (AIR), the total after-tax disposable income for working-age Americans with disabilities is about $490 billion annually. This number is similar to other significant market segments in the US, such as the Black ($501 billion) and Latinx ($582 billion) communities. Companies that do not plan for, design, and build accessible products can lose out on this potential revenue.

While these numbers are impressive, people with disabilities are also part of a larger network of family members, friends, communities, and institutions. This larger network often looks for and supports businesses that create accessible digital products. When you factor in the friends and family of the over 1.3 billion people worldwide who identify as disabled, the disability market touches 53% of all consumers. It's the world's largest emerging market.

In addition to money and market shares, businesses focused on disability inclusion as part of an overall diversity strategy are higher performing and more innovative. There are many examples of everyday products that evolved from technology developed by, or for, people with disabilities, including:

• Telephones
• Typewriters / keyboards
• Email
• Kitchen utensils
• Easy-open pull-out drawers
• Automatic door openers
• Voice controls
• Eye gaze technology

When we look at accessibility as a design or coding challenge, not a begrudging requirement, innovation is the byproduct. For people without disabilities, such improvements can increase the overall user experience. For people with disabilities, these improvements are essential for equal access.

Legal impact

Beyond the individual and business impact, you should also be aware of the looming legal impact of not building accessible digital products. Public sector entities in the United States, such as government-funded programs/schools, airlines, and nonprofits, must follow certain digital accessibility rules, while many private sector companies do not. In countries such as Canada, the United Kingdom, Japan, Australia, and the European Union, stricter digital accessibility laws exist for both public and private companies.

For many disabled people in the US, filing a lawsuit is their only option to bring awareness and change to digital products. It is estimated that in the US, over ten lawsuits are filed daily focused on digital accessibility. Many businesses have received multiple digital accessibility-based lawsuits. And every year, the number of total lawsuits has increased.

E-commerce websites and apps are typically the biggest targets, comprising over 74% of the lawsuits filed in 2021. If your company has both a physical location and an online presence, you are more likely to have been part of a lawsuit. In fact, of the top 500 e-commerce sites, 412 have been served with a lawsuit within the past four years. Often, the first lawsuit is for the company's website and the second for their mobile app.

While avoiding lawsuits shouldn't be the only reason you focus on making sure your digital products are accessible, it is an important piece of the conversation.

{% Assessment 'why' %}

Learn CSS

This course breaks down the fundamentals of CSS into digestible, easy to understand pieces. Over the next few modules, you'll learn how the core aspects of CSS work and how to use them effectively in your projects. Use the menu pane by the "Learn CSS" logo to navigate the modules.

You'll learn CSS fundamentals like the box model, cascade and specificity, flexbox, grid and z-index. And, along with these fundamentals, you'll learn about functions, color types, gradients, logical properties and inheritance to make you a well-rounded front-end developer, ready to take on any user interface.

Each module is full of interactive demos and self-assessments for you to test your knowledge. In addition to learning through reading and demos, there is an accompanying podcast episode for each topic as another way to learn and continue expanding your knowledge.

This course is created for beginner and advanced CSS developers alike. You can go through the series from start to finish to get a general understanding of CSS from top to bottom, or you can use it as a reference for specific styling subjects. For those new to web development overall, check out Learn HTML to learn all about how to write markup and link your stylesheets.

Here's what you'll learn:

{% include 'partials/course-index.njk' %}

So, are you ready to learn CSS? Let's get started.

{% Aside %} This course is written and edited by CSS community experts: Andy Bell, Rachel Andrew, Una Kravets, Adam Argyle, Emma Twersky, Camden Bickel, and Kevin Lozandier. Rob Dodson and Jiwoong Lee shepherded the UX and production build, along with help from Ewa Gasperowicz and Kayce Basques. {% endAside %}

Animations

Sometimes you see little helpers on interfaces that when clicked, provide some helpful information about that particular section. These often have a pulsing animation to subtly let you know that the information is there and should be interacted with. How do you do this with CSS though?

In CSS, you can make this type of animation using CSS animations, which allow you to set an animation sequence, using keyframes. Animations can be simple, one state animations, or even complex, time-based sequences.

What is a keyframe?

In animation software, CSS, and most other tools that enable you to animate something, keyframes are the mechanism that you use to assign animation states to timestamps, along a timeline.

Let's use the "pulser" as a context for this. The entire animation runs for 1 second and runs over 2 states.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/pWCGpgzJqJNTBluK5u8S.svg", alt="The states of the pulser animation over the 1 second timeframe", width="800", height="340" %}

There's a specific point where each of these animation states start and end. You map these out on the timeline with keyframes.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/wmKVq5GFj7cf6jfuLiT8.svg", alt="The same diagram as before, but this time, with keyframes", width="800", height="440" %}

@keyframes

{% BrowserCompat 'css.at-rules.keyframes' %}

Now you know what a keyframe is, that knowledge should help you understand how the CSS @keyframes rule works. Here is a basic rule with two states.

@keyframes my-animation {
	from {
		transform: translateY(20px);
	}
	to {
		transform: translateY(0px);
	}
}

The first part to note is the custom ident (custom identifier)—or in more human terms, the name of the keyframes rule. This rule's identifier is my-animation. The custom identifier works like a function name. Which, as you learned in the functions module, lets you reference the keyframes rule elsewhere in your CSS code.

{% Aside %} A <custom-ident> is used in various places in CSS, and allows you to provide your own name for things. These identifiers are case-sensitive, and in some cases there are words that you can't use. For example, when naming lines in CSS Grid, you can't use the word span. {% endAside %}

Inside the keyframes rule, from and to are keywords that represent 0% and 100%, which are the start of the animation and end. You could re-create the same rule like this:

@keyframes my-animation {
	0% {
		transform: translateY(20px);
	}
	100% {
		transform: translateY(0px);
	}
}

You can add as many positions as you like along the timeframe. Using the context of the "pulser" example, there are 2 states, which translate to 2 keyframes. This means you have 2 positions inside your keyframes rule to represent the changes for each of these keyframes.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

The animation properties

{% BrowserCompat 'css.properties.animation' %}

To use your @keyframes in a CSS rule, define various animation properties or, use the animation shorthand property.

animation-duration

{% BrowserCompat 'css.properties.animation-duration' %}

.my-element {
	animation-duration: 10s;
}

The animation-duration property defines how long the @keyframes timeline should be. It should be a time value. It defaults to 0 seconds, which means the animation still runs, but it'll be too quick for you to see. You can't add negative time values.

animation-timing-function

{% BrowserCompat 'css.properties.animation-timing-function' %}

To help recreate natural motion in animation, you can use timing functions that calculate the speed of an animation at each point. Calculated values are often curved, making the animation run at variable speeds over the course of animation-duration, and if a value is calculated beyond that of the value defined in @keyframes, make the element appear to bounce.

There are several keywords available as presets in CSS, which are used as the value for animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out.

.my-element {
	animation-timing-function: ease-in-out;
}

Values appear to curve with easing functions because easing is calculated using a bézier curve, which is used to model velocity. Each of the timing function keywords, such as ease, reference a pre-defined bézier curve. In CSS, you can define a bézier curve directly, using the cubic-bezier() function, which accepts four number values: x1, y1, x2, y2.

.my-element {
	animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

These values plot each part of the curve along the X and Y axis.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/AZr17k5ejTYsikAPiwTm.svg", alt="A bézier on a progression vs time chart", width="800", height="499" %}

Understanding bézier curves is complicated and visual tools, such as this generator by Lea Verou are very helpful.

The steps easing function

Sometimes you might want more granular control of your animation, and instead of moving along a curve, you want to move in intervals instead. The steps() easing function lets you break the timeline into defined, equal intervals.

.my-element {
	animation-timing-function: steps(10, end);
}

The first argument is how many steps. If steps are defined as 10 and there are 10 keyframes, each keyframe will play in sequence for the exact amount of time, with no transition between states. If there are not enough keyframes for the steps, steps between keyframes are added depending on the second argument.

The second argument is the direction. If it's set to end, which is the default, the steps finish at the end of your timeline. If it is set to start, the first step of your animation completes as soon as it starts, which means it ends one step earlier than end.

animation-iteration-count

{% BrowserCompat 'css.properties.animation-iteration-count' %}

.my-element {
	animation-iteration-count: 10;
}

The animation-iteration-count property defines how many times the @keyframes timeline should run. By default, this is 1, which means that when the animation reaches the end of your timeline, it will stop at the end. The number can't be a negative number.

You can use the infinite keyword which will loop your animation, which is how the "pulser" demo from the start of this lesson works.

animation-direction

{% BrowserCompat 'css.properties.animation-direction' %}

.my-element {
	animation-direction: reverse;
}

You can set which direction the timeline runs over your keyframes with animation-direction:

• normal: the default value, which is forwards.
• reverse: runs backwards over your timeline.
• alternate: for each animation iteration, the timeline will run forwards or backwards in sequence.
• alternate-reverse: the reverse of alternate.

animation-delay

{% BrowserCompat 'css.properties.animation-delay' %}

.my-element {
	animation-delay: 5s;
}

The animation-delay property defines how long to wait before starting the animation. Like the animation-duration property, this accepts a time value.

Unlike the animation-duration property, you can define this as a negative value. If you set a negative value, the timeline in your @keyframes will start at that point. For example, if your animation is 10 seconds long and you set animation-delay to -5s, it will start from half-way along your timeline.

animation-play-state

{% BrowserCompat 'css.properties.animation-play-state' %}

.my-element:hover {
	animation-play-state: paused;
}

The animation-play-state property allows you to play and pause the animation. The default value is running and if you set it to paused, it will pause the animation.

animation-fill-mode

{% BrowserCompat 'css.properties.animation-fill-mode' %}

The animation-fill-mode property defines which values in your @keyframes timeline persist before the animation starts or after it ends. The default value is none which means when the animation is complete, the values in your timeline are discarded. Other options are:

• forwards: The last keyframe will persist, based on the animation direction.
• backwards: The first keyframe will persist, based on the animation direction.
• both: follows the rules for both forwards and backwards.

The animation shorthand

Instead of defining all the properties separately, you can define them in an animation shorthand, which lets you define the animation properties in the following order:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
	animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

Considerations when working with animation

Users can define in their operating system that they prefer to reduce motion experienced when they interact with applications and websites. This preference can be detected using the prefers-reduced-motion media query.

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

This isn't necessarily a preference of no animation, but rather, a preference to reduce animations— especially unexpected ones. You can learn more about this preference and overall performance with this animation guide.

{% Assessment 'animations' %}

Backgrounds

Behind every CSS box is a specialized layer called the background layer. CSS provides a variety of ways to make meaningful changes to it–including allowing multiple backgrounds.

Background layers are furthest from the user, rendered behind the contents of a box starting from its padding-box region. This enables the background layer to not overlap with borders at all.

Background color

{% BrowserCompat 'css.properties.background-color' %}

One of the simplest effects you can apply to a background layer is setting the color. The initial value of background-color is transparent, which allows the contents of a parent to be visible. A valid color set on a background layer sits behind other things painted on that element.

Background images

{% BrowserCompat 'css.properties.background-image' %}

On top of the background-color layer, you can add a background image, using the background-image property. A background-image accepts the following:

• An image URL or data URI using the url CSS function.
• An image dynamically created by a gradient CSS function.

Setting a background-image with the url CSS function

CSS gradient backgrounds

Several gradient CSS functions exist to allow you to generate a background-image, when passed two or more colors.

Regardless of which gradient function is used, the resulting image is intrinsically sized to match the amount of space available.

Demo showing example of applying a background-image using gradient functions:

Repeating background images

{% BrowserCompat 'css.properties.background-repeat' %}

By default, background images repeat horizontally and vertically to fill the entire space of the background layer.

Change this by using the background-repeat property with one of the following values:

• repeat: The image repeats within the space available, cropping as necessary.
• round: The image repeats horizontally and vertically to fit as many instances into the space available, without cropping, compressing, or stretching it.
• space: The image repeats horizontally and vertically to fit as many instances within the space available without cropping—spacing out instances of the image as needed. Repeating images touch the edges of the space a background layer occupies, with white space evenly distributed between them.

The background-repeat property allows you to set the behavior for the x and y axis independently. The first parameter sets the horizontal repeat behavior, and the second parameter sets the vertical repeat behavior.

If you use a single value, it will be applied to both the horizontal and vertical repeats.

The shorthand also has convenient one-word options to make your intent clearer.

The value repeat-x repeats an image only horizontally; this is equivalent to repeat no-repeat.

The following demo demonstrates these capabilities of the background-repeat property:

Background position

{% BrowserCompat 'css.properties.background-position' %}

You may have noticed when some images on the Web are styled with a background-repeat: no-repeat declaration, such images are displayed top left of their container.

The initial position of background images is top left. The background-position property allows you to change this behavior by offsetting the image position.

As with background-repeat, the background-position property allows you to position images along the x and y axis independently with two values by default.

When CSS lengths and percentages are used, the first parameter corresponds to the horizontal axis while the second parameter corresponds to the vertical axis.

When keywords are only used the order of the keywords does not matter:

{% Compare 'better' %}

background-position: left 50%;

{% endCompare %}

{% Compare 'better' %}

background-position: top left;

{% endCompare %}

{% Compare 'better' %}

background-position: left top;

{% CompareCaption %}

Order does not matter for keywords associated with different axes of position.

{% endCompareCaption %}

{% endCompare %}

{% Compare 'worse' %}

  background-position: 50% left;

{% CompareCaption %}

When CSS values are used alongside keywords, the order matters. The first value represents the horizontal axis and the second the vertical axis. {% endCompareCaption %}

{% endCompare%}

{% Compare 'worse' %}

  background-position: left right;

{% CompareCaption %}

You cannot use keywords associated with the same axis simultaneously.

{% endCompareCaption %}

{% endCompare %}

The background-position property also has a convenient one value shorthand; the omitted value resolves to 50%. Here's an example that demonstrates this using the keywords the background-position property accepts:

In addition to its default two parameter form and one parameter form; the background-position property also accepts up to four parameters;

When three or four parameters are used, a CSS length or percentage must be preceded by the top, left, right, or bottom keywords in order for the browser to calculate which edge of the CSS box the offset should originate from.

When three parameters are used, a CSS length or value can be the second or third parameter with the other two being keywords; the keyword it succeeds will be used to determine the edge the CSS length or value corresponds to being the offset of. The offset of the other keyword specified is set to 0.

{% Compare 'better' %}

background-position: bottom 88% right;

{% endCompare %}

{% Compare 'better' %}

background-position: right bottom 88%;

{% endCompare %}

{% Compare 'worse' %}

background-position: 88% bottom right;

{% CompareCaption %} CSS length value must be preceded by the top, right, bottom, or left keywords when using three or more parameters. {% endCompareCaption %} {% endCompare %}

{% Compare 'better' %}

background-position: bottom 88% right 33%;

{% endCompare %}

{% Compare 'better' %}

background-position: right 33% bottom 88%;

{% endCompare %}

{% Compare 'worse' %}

background-position: 88% 33% bottom left;

{% CompareCaption%} CSS length value must be preceded by the top, right, bottom, or left keywords when using three or more parameters. {% endCompareCaption %} {% endCompare %}

If background-position: top left 20%is applied to a CSS background image, the image is placed at the top of the box, the 20% value represents a 20% offset from the left of the box (on the x axis).

If background-position: top 20% left is applied to a CSS background image, the 20% value represents a 20% offset from the top of the CSS box (on the y axis), and the image is placed at the left of the box.

When four parameters are used, the two keywords are paired with two values corresponding to an offset against the origins of each keyword specified. If background-position: bottom 20% right 30% is applied to a background-image, the background-image is positioned 20% from the bottom, and 30% from the right of the CSS box.

The following demo demonstrates this behavior:

Here are more examples of using the background-position property using a mix of CSS and keyword values:

{% Aside %} To learn more about the nuances related to positioning backgrounds, check out background-position on MDN. {% endAside %}

Background Size

{% BrowserCompat 'css.properties.background-size' %}

The background-size property sets the size of background images; By default background images are sized based on their intrinsic (actual) width, height, and aspect ratio.

The background-size property uses CSS length and percentage values or specific keywords. The property accepts up to two parameters corresponding to allowing you to change width and height of a background independently.

The background-size property accepts the following keywords:

• auto: When used independently, the background image is sized based on its intrinsic width and height; when auto is used alongside another CSS value for the width (first parameter) or height (second parameter), the dimension set to auto is sized as needed to maintain the natural aspect ratio of the image. This is the default behavior of the background-size property.
• cover: Covers the entire area of the background layer. This may mean the image is stretched or cropped.
• contain: Sizes the image to fill the space without stretching or cropping. As a result, empty space can remain that will cause the image to repeat, unless background-repeat is set to no-repeat.

The latter 2 are intended to be used in a standalone fashion without another parameter.

The following demo demonstrates these keywords in action:

Demo demonstrating applying these keywords to background-size:

Background attachment

{% BrowserCompat 'css.properties.background-attachment' %}

The background-attachment property enables you to modify the fixed position behavior of background images (images part of a background layer) once the layer is visible on a screen.

It accepts 3 keywords: scroll, fixed, and local.

The default behavior of the background-attachment property is the initial value of scroll. When more space is needed, the images move with that space within the background layer determined by the bounds of the CSS box.

Using the value fixed fixes the position of background images to the viewport.

Once the space of the background layer images originally takes up needs to be scrolled (or rendered) offscreen, images within the background layer stay fixed in the original position the background layer enabled them to be until the entire layer is scrolled off screen by the viewport.

The local keyword enables the position of background images to be fixed relative to the element's contents. Background images now move along the space they occupy as that space renders inside and outside the bounds of the CSS box (usually due to scrolling, 2D, or 3D transformations).

Background origin

{% BrowserCompat 'css.properties.background-origin' %}

The background-origin property enables you to modify the area of backgrounds associated with a particular box. The values the property accepts correspond to the border-box , padding-box, and content-box regions of a box .

Try these options out using the following demo:

Background clip

{% BrowserCompat 'css.properties.background-clip' %}

The background-clip property controls what is visually seen from a background layer regardless of the bounds created by the background-origin property.

Like background-origin the regions that can be specified are border-box, padding-box, and content-box corresponding to where a CSS background layer can be rendered. When these keywords are used, any rendering of the background further than the region specified will be cropped or clipped.

The background-clip property also accepts a text keyword that clips the background to be no further than the text within the content box. For this effect to be evident in the actual text within a CSS box, the text must be partially or completely transparent.

A relatively new property, at the time of this writing, Chrome and most browsers require the -webkit- prefix to use this property.

{% BrowserCompat 'css.properties.background-clip' %}

{% Aside 'gotchas' %} It should be also noted this property is not compatible with background-clip: text being simultaneously set on a CSS box. {% endAside %}

Multiple backgrounds

As mentioned at the beginning of the module, the background layer allows multiple sublayers to be defined. For brevity, I'll refer to these sublayers as backgrounds.

Multiple backgrounds are defined top to bottom; The first background is the closest to the user, while the last background is the furthest from the user.

The only background defined or the last layer is designated the final background layer by the browser. Only this layer is allowed to assign a background-color.

{% Aside %} With the unpredictability of the web in mind, a background-image may fail to load. Setting a background-color on the final layer ensures good contrast for text and so on if important background layers fail to load. {% endAside %}

Multiple layers can be individually configured using most background-related CSS properties that are comma separated, as demonstrated in the code snippet and live demo below.

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

The background shorthand

To make it easier to style the background layer of a box-especially when multiple background layers are desired–there is a shorthand that follows the following specific pattern:

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

{% Aside 'gotchas' %} It's important to note that any background properties omitted in the shorthand are set to their initial values. {% endAside %}

Order is important in the shorthand form of declaring multiple backgrounds. The position and size values must both be provided, separated by a slash (/). Declaring the origin and clip behavior in the correct order allows you take advantage of setting keywords that are valid for both simultaneously

The following declaration clips the background, and originates it from the content box:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

With these shorthand semantics in mind, the previous background-related declarations of the code snippet could be rewritten to be following:

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

{% Assessment 'backgrounds' %}

Blend Modes

Duotone is a popular color treatment for photography which makes an image look like it is only made up of two contrasting colors: one for highlights and the other for lowlights. How do you do this with CSS though?

Using blend modes—and other techniques you have learned about, such as filters and pseudo-elements—you can apply this effect to any image.

What is a blend mode?

Blend modes are commonly used in design tools such as Photoshop to create a compositional effect by mixing colors from two or more layers. By changing how colors mix, you can achieve really interesting visual effects. You can also use blend modes as a utility, such as isolating an image that has a white background, so it appears to have a transparent background.

You can use most of the blend modes available in a design tool with CSS, using the mix-blend-mode or the background-blend-mode properties. The mix-blend-mode applies blending to a whole element and the background-blend-mode applies blending to the background of an element.

You use background-blend-mode when you have multiple backgrounds on an element and want them all to blend into each other.

The mix-blend-mode affects the entire element, including its pseudo-elements. One use-case is in the initial example of a duotone image, which has color layers applied to the element through its pseudo-elements.

Blend modes fall into two categories: separable and non-separable. A separable blend mode considers each color component, such as RGB, individually. A non-separable blend mode considers all color components equally.

Browser compatibility

mix-blend-mode

{% BrowserCompat 'css.properties.mix-blend-mode' %}

background-blend-mode

{% BrowserCompat 'css.properties.background-blend-mode' %}

Separable blend modes

Normal

This is the default blend mode and changes nothing about how an element blends with others.

Multiply

The multiply blend mode is like stacking multiple transparencies on top of each other. White pixels will appear transparent, and black pixels will appear black. Anything in between will multiply its luminosity (light) values. This means lights get much lighter and darks, darker—most often producing a darker result.

.my-element {
  mix-blend-mode: multiply;
}

Screen

Using screen multiplies the light values—an inverse effect to multiply, and will most often produce a brighter result.

.my-element {
  mix-blend-mode: screen;
}

Overlay

This blend mode—overlay—combines multiply and screen. Base dark colors become darker and base light colors become lighter. Mid-range colors, such as a 50% gray, are unaffected.

.my-element {
  mix-blend-mode: overlay;
}

Darken

The darken blend mode compares the source image and backdrop image's dark color luminosity and selects the darkest of the two. It does this by comparing rgb values instead of luminosity (like multiply and screen would do), for each color channel. With darken and lighten, new color values are often created from this comparison process.

.my-element {
  mix-blend-mode: darken;
}

Lighten

Using lighten does the exact opposite of darken.

.my-element {
  mix-blend-mode: lighten;
}

Color dodge

If you use color-dodge, it lightens the background color to reflect the source color. Pure black colors see no effect from this mode.

.my-element {
  mix-blend-mode: color-dodge;
}

Color burn

The color-burn blend mode is very similar to the multiply blend mode, but increases contrast, resulting in more saturated mid-tones and reduced highlights.

.my-element {
  mix-blend-mode: color-burn;
}

Hard light

Using hard-light creates a vivid contrast. This blend mode either screens or multiplies luminosity values. If the pixel value is lighter than 50% gray, the image is lightened, as if it were screened. If it is darker, it's multiplied.

.my-element {
  mix-blend-mode: hard-light;
}

Soft light

The soft-light blend mode is a less-harsh version of overlay. It works in very much the same way with less contrast.

.my-element {
  mix-blend-mode: soft-light;
}

Difference

A good way to picture how difference works is a bit like how a photo negative works. The difference blend mode takes the difference value of each pixel, inverting light colors. If the color values are identical, they become black. Differences in the values will invert.

.my-element {
  mix-blend-mode: difference;
}

Exclusion

Using exclusion is very similar to difference, but instead of returning black for identical pixels, it will return 50% gray, resulting in a softer output with less contrast.

.my-element {
  mix-blend-mode: exclusion;
}

Non-separable blend modes

You can think of these blend modes like HSL color components. Each takes a specific component value from the active layer and mixes it with other component values.

Hue

The hue blend mode takes the hue of the source color and applies it to the saturation and luminosity of the backdrop color.

.my-element {
  mix-blend-mode: hue;
}

Saturation

This works like hue, but using saturation as the blend mode applies the saturation of the source color to the hue and luminosity of the backdrop color.

.my-element {
  mix-blend-mode: saturation;
}

Color

The color blend mode will create a color from the hue and saturation of the source color and the luminosity of the backdrop color.

.my-element {
  mix-blend-mode: color;
}

Luminosity

Lastly, luminosity is the inverse of color. It creates a color with the luminosity of the source color and the hue and saturation of the backdrop color.

.my-element {
  mix-blend-mode: luminosity;
}

The isolation property

{% BrowserCompat 'css.properties.isolation' %}

If you set the isolation property to have a value of isolate, it will create a new stacking context, which will prevent it from blending with a backdrop layer. As you learned in the z-index module, when you create a new stacking context, that layer becomes the base layer. This means that parent-level blend modes will no longer apply, but elements inside of an element with isolation: isolate set can still blend.

Note that this doesn't work with background-blend-mode because the background property is already isolated.

{% Assessment 'blend-modes' %}

Borders

In the box model module, we considered a frame analogy to describe each section of the box model.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/FBaaJXdnuSkvOx1nB0CB.jpg", alt="Three picture frames next to each other. The middle frame has the sections of the box model over the top of it", width="800", height="562" %}

The border box is the frame of your boxes, and the border properties give you a huge array of options to create that frame in nearly any style that you can think of.

Border properties

The individual border properties provide a way to style the various parts of a border.

{% BrowserCompat 'css.properties.border' %}

Style

For a border to appear, you have to define the border-style. There's a few options to choose from:

When using the ridge, inset, outset and groove styles, the browser will darken the border color for the second shown color to provide contrast and depth. This behaviour can vary between browsers, especially for dark colors such as black. In Chrome, these border styles will appear to be solid and in Firefox, they will be lightened to then provide a darker second color.

Browser behaviour can vary for other border styles too, so it's important to test your site in different browsers. A common example of this difference is how each browser renders the dotted and dashed styles.

To set border style on each side of your box, you can use border-top-style, border-right-style, border-left-style, and border-bottom-style.

Shorthand

As with margin and padding, you can use the border shorthand property to define all the parts of your border in one declaration.

.my-element {
	border: 1px solid red;
}

The order of values in the border shorthand are border-width, border-style and then, border-color.

Color

You can set color on all sides of your box or on each individual side with border-color. By default, it uses the box's current text color: currentColor. This means that if you only declare border properties, like width, the color will be that computed value unless you explicitly set it.

.my-element {
	color: blue;
	border: solid; /* Will be a blue border */
}

.my-element {
	color: blue;
	border: solid yellow;
}

To set a border color on each side of your box, use border-top-color, border-right-color, border-left-color and border-bottom-color.

Width

The width of a border is how thick the line is, and is controlled by border-width. The default border width is medium. This won't be visible unless you define a style, though. You can use other named widths such as thin and thick.

The border-width properties also accept a length unit such as px, em, rem or %. To set border width on each side of your box, use border-top-width, border-right-width, border-left-width and border-bottom-width.

Logical properties

In the Logical Properties module you discovered how to refer to block flow and inline flow, rather than explicit top, right, bottom or left sides.

You have this capability with borders, too:

.my-element {
	border: 2px dotted;
	border-inline-end: 2px solid red;
}

In this example, .my-element has all sides defined as having a 2px, dotted border that is the current text color. The inline-end border is then defined as 2px, solid and red. This means that in left-to-right languages—like English— the red border will be on the right side of the box. In right-to-left languages—like Arabic— the red border will be on the left side of the box.

Browser support is varied for logical properties in borders, so make sure you check support before using.

Border radius

To give a box rounded corners use the border-radius property.

.my-element {
	border-radius: 1em;
}

This shorthand adds a consistent border to each corner of your box. As with the other border properties, you can define the border radius for each side with border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

You can also specify each corner's radius in the shorthand, which follows the order: top left, top right, bottom right then bottom left.

.my-element {
	border-radius: 1em 2em 3em 4em;
}

By defining a single value for a corner, you are using another shorthand because a border radius is split into two parts: the vertical and horizontal sides. This means that when you set border-top-left-radius: 1em, you are setting the top-left-top radius and the top-left-left radius.

You can define both properties, per corner like this:

.my-element {
	border-top-left-radius: 1em 2em;
}

This adds a border-top-left-top value of 1em, and a border-top-left-left value of 2em. This converts the top left border radius into an elliptical radius, rather than the default circular radius.

You can define these values in the border-radius shorthand, using a / to define the elliptical values, after the standard values. This enables you to get creative and make some complex shapes.

.my-element {
	border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

Border images

You don't just have to use a stroke-based border in CSS. You can also use any type of image, using border-image. This shorthand property allows you to set the source image, how that image is sliced, the image width, how far the border is outset from the edge and how it should repeat.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

The border-image-width property is like border-width: it is how you set the width of your border image. The border-image-outset property lets you set the distance between your border image and the box that it wraps around.

border-image-source

The border-image-source (source of the border image) can be a url for any valid image, which includes CSS gradients.

.my-element {
	border-image-source: url('path/to/image.png');
}

.my-element {
	border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

The border-image-slice property is a useful property that allows you to slice an image into 9 parts, made up of 4 split lines. It works like the margin shorthand where you define the top, right, bottom and left offset value.

.my-element {
	border-image: url('image.jpg');
	border-image-slice: 61 58 51 48;
}

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/WETsTwhFSfl30VfyfMTA.png", alt="The image used in the demo with the four slices shown with blue lines", width="800", height="380" %}

With the offset values defined, you now have 9 sections of the image: 4 corners, 4 edges and a middle section. The corners are applied to the corners of the element with the border image. The edges are applied to the edges of that element. The border-image-repeat property defines how those edges fill their space and the border-image-width property controls the size of the slices.

Lastly, the fill keyword determines whether the middle section, left by the slicing, is used as the element's background image or not.

border-image-repeat

border-image-repeat is how you instruct CSS how you would like your border image to repeat. It works the same as background-repeat.

• The initial value is stretch, which stretches the source image to fill available space where possible.
• The repeat value tiles the source image's edges as many times as possible, and may clip the edge regions to achieve this.
• The round value is the same as repeat, but instead of clipping the image edge regions to fit as many as possible, it stretches the image as well as repeating it to achieve a seamless repeat
• The space value is again, the same as repeat, but this value adds space between each edge region to create a seamless pattern.

{% Assessment 'borders' %}

Box Model

Say you have this bit of HTML:

<p>I am a paragraph of text that has a few words in it.</p>

Then you write this CSS for it:

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

The content would break out of your element and it would be 142px wide, rather than 100px. Why is that? The box model is a core foundation of CSS and understanding how it works, how it is affected by other aspects of CSS and importantly, how you can control it will help you to write more predictable CSS.

A really important thing to remember when writing CSS, or working on the web as a whole, is that everything displayed by CSS is a box. Whether that's a box that uses border-radius to look like a circle, or even just some text: the key thing to remember is that it's all boxes.

Content and sizing

Boxes have different behavior based on their display value, their set dimensions, and the content that lives within them. This content could be even more boxes—generated by child elements—or plain text content. Either way, this content will affect the size of the box by default.

You can control this by using extrinsic sizing, or, you can continue to let the browser make decisions for you based on the content size, using intrinsic sizing.

Let's quickly look at the difference, using a demo to help us.

The demo has the words, "CSS is awesome" in a box with fixed dimensions and a thick border. The box has a width, so is extrinsically sized. It controls the sizing of its child content. The problem with this though, is that the word "awesome" is too large for the box, so it overflows outside of the parent box's border box (more on this later in the lesson). One way to prevent this overflow is to allow the box to be intrinsically sized by either unsetting the width, or in this case, setting the width to be min-content. The min-content keyword tells the box to only be as wide as the intrinsic minimum width of its content (the word "awesome"). This allows the box to fit around "CSS is awesome", perfectly.

Let's look at something more complex to see the impact of different sizing on real content:

Toggle intrinsic sizing on and off to see how you can gain more control with extrinsic sizing and let the content have more control with intrinsic sizing. To see the effect that intrinsic and extrinsic sizing has, add a few sentences of content to the card. When this element is using extrinsic sizing, there's a limit of how much content you can add before it overflows out of the element's bounds, but this isn't the case when intrinsic sizing is toggled on.

By default, this element has a set width and height—both 400px. These dimensions give strict bounds to everything inside the element, which will be honored unless the content is too large for the box in which case visible overflow will happen. You can see this in action by changing the content of the caption, under the flower picture to something that exceeds the height of the box, which is a few lines of content.

{% Aside "key-term" %} When content is too big for the box it is in, we call this overflow. You can manage how an element handles overflow content, using the overflow property. {% endAside %}

When you switch to intrinsic sizing, you are letting the browser make decisions for you, based on the box's content size. It's much more difficult for there to be overflow with intrinsic sizing because our box will resize with its content, rather than try to size the content. It's important to remember that this is the default, flexible behavior of a browser. Though extrinsic sizing gives more control on the surface, intrinsic sizing provides the most flexibility, most of the time.

The areas of the box model

Boxes are made up of distinct box model areas that all do a specific job.

You start with content box, which is the area that the content lives in. As you learned before: this content can control the size of its parent, so is usually the most variably sized area.

The padding box surrounds the content box and is the space created by the padding property. Because padding is inside the box, the background of the box will be visible in the space that it creates. If our box has overflow rules set, such as overflow: auto or overflow: scroll, the scrollbars will occupy this space too.

The border box surrounds the padding box and its space is occupied by the border value. The border box is the bounds of your box and the border edge is the limit of what you can visually see. The border property is used to visually frame an element.

The final area, the margin box, is the space around your box, defined by the margin rule on your box. Properties such as outline and box-shadow occupy this space too because they are painted on top, so they don't affect the size of our box. You could have an outline-width of 200px on our box and everything inside and including the border box would be exactly the same size.

A useful analogy

The box model is complex to understand, so let's recap what you've learned with an analogy.

In this diagram, you have three photo frames, mounted to a wall, next to each other. The diagram has labels that associate elements of the frame with the box model.

To break this analogy down:

• The content box is the artwork.
• The padding box is the white matte, between the frame and the artwork.
• The border box is the frame, providing a literal border for the artwork.
• The margin box is the space between each frame.
• The shadow occupies the same space as the margin box.

Debugging the box model

Browser DevTools provide a visualisation of a selected box's box model calculations, which can help you understand how the box model works and importantly, how it is affecting the website you're working on.

Go ahead and try this in your own browser:

1. Open DevTools
2. Select an element
3. Show the box model debugger

Controlling the box model

To understand how to control the box model, you first need to understand what happens in your browser.

Every browser applies a user agent stylesheet to HTML documents. The CSS used varies between each browser, but they provide sensible defaults to make content easier to read. They define how elements should look and behave if there's no CSS defined. It is in the user agent styles where a box's default display is set, too. For example, if we are in a normal flow, a <div> element's default display value is block, a <li> has a default display value of list-item, and a <span> has a default display value of inline.

An inline element has block margin, but other elements won't respect it. Use inline-block, and those elements will respect the block margin, while the element maintains most of the same behaviors it had as an inline element. A block item will, by default, fill the available inline space, whereas a inline and inline-block elements will only be as large as their content.

Alongside an understanding of how user agent styles affect each box, you also need to understand box-sizing, which tells our box how to calculate its box size. By default, all elements have the following user agent style: box-sizing: content-box;.

Having content-box as the value of box-sizing means that when you set dimensions, such as a width and height, they will be applied to the content box. If you then set padding and border, these values will be added to the content box's size.

{% Assessment 'box-model' %}

The actual width of this box will be 260px. As the CSS uses the default box-sizing: content-box, the applied width is the width of the content, padding and border on both sides are added to that. So 200px for the content + 40px of padding + 20px of border makes a total visible width of 260px.

You can control this, though, by making the following modification to use the alternative box model, border-box:

.my-box {
  box-sizing: border-box;
	width: 200px;
	border: 10px solid;
	padding: 20px;
}

This alternative box model tells CSS to apply the width to the border box instead of the content box. This means that our border and padding get pushed in, and as a result, when you set .my-box to be 200px wide: it actually renders at 200px wide.

Check out how this works in the following interactive demo. Notice that when you toggle the box-sizing value it shows—via a blue background—which CSS is being applied inside our box.

*,
*::before,
*::after {
  box-sizing: border-box;
}

This CSS rule selects every element in the document and every ::before and ::after pseudo element and applies box-sizing: border-box. This means that every element will now have this alternative box model.

Because the alternative box model can be more predictable, developers often add this rule to resets and normalizers, like this one.

Resources

• Introduction to the box model
• What are browser developer tools?

User agent stylesheets

• Chromium
• Firefox
• Webkit

Color

Color is an important part of any website and in CSS there are many options for color types, functions and treatments.

How do you decide which color type to use? How do you make your colors semi-transparent? In this lesson, you're going to learn which options you have to help you make the right decisions for your project and team.

CSS has various different data types, such as strings and numbers. Color is one of these types and uses other types, such as numbers for its own definitions.

Numeric colors

It is very likely that your first exposure to colors in CSS is via numeric colors. We can work with numerical color values in a few different forms.

Hex colors

h1 {
  color: #b71540;
}

Hexadecimal notation (often shortened to hex) is a shorthand syntax for RGB, which assigns a numeric value to red green and blue, which are the three primary colors.

{% Aside %} According to the Web Almanac, hex is the most popular color syntax type. {% endAside %}

The hexadecimal ranges are 0-9 and A-F. When used in a six digit sequence, they are translated to the RGB numerical ranges which are 0-255 which correspond to the red, green, and blue color channels respectively.

You can also define an alpha value with any numerical colors. An alpha value is a percentage of transparency. In hex code, you add another two digits to the six digit sequence, making an eight digit sequence. For example, to set black in hex code, write #000000. To add a 50% transparency, change it to #00000080.

Because the hex scale is 0-9 and A-F, the transparency values are probably not quite what you'd expect them to be. Here are some key, common values added to the black hex code, #000000:

• 0% alpha—which is fully transparent—is 00: #00000000
• 50% alpha is 80: #00000080
• 75% alpha is BF: #000000BF

To convert a two digit hex to a decimal, take the first digit and multiply it by 16 (because hex is base 16), then add the second digit. Using BF as an example for 75% alpha:

1. B is equal to 11, which when multiplied by 16 equals 176
2. F is equal to 15
3. 176 + 15 = 191
4. The alpha value is 191—75% of 255

{% Aside %} You can also write hex codes in a three digit shorthand. A three digit hex code is a shortcut to an equivalent six digit sequence. For example, #a4e is identical to #aa44ee. To add alpha, then #a4e8 would expand to #aa44ee88. {% endAside %}

RGB (Red, Green, Blue)

h1 {
  color: rgb(183, 21, 64);
}

RGB colors are defined with the rgb() color function, using either numbers or percentages as parameters. The numbers need to be within the 0-255 range and the percentages are between 0% and 100%‌. RGB works on the 0-255 scale, so 255 would be equivalent to 100%, and 0 to 0%.

To set black in RGB, define it as rgb(0 0 0), which is zero red, zero green and zero blue. Black can also be defined as rgb(0%, 0%, 0%). White is the exact opposite: rgb(255, 255, 255) or rgb(100%, 100%, 100%).

An alpha is set in rgb() in one of two ways. Either add a / after the red, green and blue parameters, or use the rgba() function. The alpha can be defined with a percentage or a decimal between 0 and 1. For example, to set a 50% alpha black in modern browsers, write: rgb(0 0 0 / 50%) or rgb(0 0 0 / 0.5). For wider support, using the rgba() function, write: rgba(0, 0, 0, 50%) or rgba(0, 0, 0, 0.5).

{% Aside %} Commas were removed from the rgb() and hsl() notation because newer color functions, such as lab() and lch() use spaces instead of commas as a delimiter. This change provides more consistency not just with newer color functions, but with CSS in general. For better backwards compatibility, you can still use commas to define rgb() and hsl(). {% endAside %}

HSL (Hue, Saturation, Lightness)

h1 {
  color: hsl(344, 79%, 40%);
}

HSL stands for hue, saturation and lightness. Hue describes the value on the color wheel, from 0 to 360 degrees, starting with red (being both 0 and 360). A hue of 180, or 50% would be in the blue range. It's the origin of the color that we see.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/ob7MTste1Obu9AoLvbKq.svg", alt="A color wheel with labels for degree values in 60 degree increments to help visuals what each angle value represents", width="800", height="507" %}

Saturation is how vibrant the selected hue is. A fully desaturated color (with a saturation of 0%) will appear grayscale. And finally, lightness is the parameter which describes the scale from white to black of added light. A lightness of 100% will always give you white.

Using the hsl() color function, you define a true black by writing hsl(0 0% 0%), or even hsl(0deg 0% 0%). This is because the hue parameter defines the degree on the color wheel, which if you use the number type, is 0-360. You can also use the angle type, which is (0deg) or (0turn). Both saturation and lightness are defined with percentages.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/RhVxWSZ6bH35eBdN6Prj.svg", alt="The HSL color function broken down visually. The hue uses the color wheel. The saturation shows grey blending into teal. The lightness shows black into white.", width="800", height="478" %}

{% Aside %} The angle type in CSS is great for defining hue because it represents the angle of the color wheel really well. This type accepts degrees, turns, radians and gradians. {% BrowserCompat 'css.types.angle' %} {% endAside %}

Alpha is defined in hsl(), in the same way as rgb() by adding a / after the hue, saturation and lightness parameters or by using the hsla() function. The alpha can be defined with a percentage or a decimal between 0 and 1. For example, to set a 50% alpha black, use: hsl(0 0% 0% / 50%) or hsl(0 0% 0% / 0.5). Using the hsla() function, write: hsla(0, 0%, 0%, 50%) or hsla(0, 0%, 0%, 0.5).

{% Aside %} There are some newer color types coming to CSS. These include lab() and lch(), which allow a far wider range of color to be specified than is possible in RGB. {% endAside %}

Color Keywords

There are 148 named colors in CSS. These are plain English names such as purple, tomato and goldenrod. Some of the most popular names, according to the Web Almanac, are black, white, red, blue and gray. Our favorites include goldenrod, aliceblue, and hotpink.

Aside from standard colors, there are also special keywords available:

• transparent is a fully transparent color. It is also the initial value of background-color
• currentColor is the contextual computed dynamic value of the color property. If you have a text color of red and then set the border-color to be currentColor, it will also be red. If the element that you define currentColor on doesn't have a value for color defined, currentColor will be computed by the cascade instead

{% Aside %} System keywords are colors that are defined by your operating system theme. Some examples of these colors are Background, which is the desktop background color or Highlight, which is the highlight color of selected items. These are just two of many options.

All color keywords are case-insensitive, however you will often see system colors with capitalization to differentiate them from standard color keywords. {% endAside %}

Where to use color in CSS rules

If a CSS property accepts the <color> data type as a value, it will accept any of the above methods of expressing color. For styling text, use the color, text-shadow and text-decoration-color properties which all accept color as the value or color as part of the value.

For backgrounds, you can set a color as the value for background or background-color. Colors can also be used in gradients, such as linear-gradient. Gradients are a type of image that can be programmatically defined in CSS. Gradients accept two or more colors in any combination of color format, such as hex, rgb or hsl.

{% Aside %} There's lots to learn with gradients so we wrote a whole lesson on how to use them. {% endAside %}

Finally, border-color, and outline-color set the color for borders and outlines on your boxes. The box-shadow property also accepts color as one of the values.

{% Assessment 'color' %}

Resources

• A handy demo showing how you can use angles with HSL
• A comprehensive guide on color
• A comprehensive guide on wide gamut color
• [video] An explainer on how to read hex codes
• How hexadecimal codes work

Conclusion and next steps

Congratulations! You've made it to the end! By now, you have learned a lot about CSS, and hopefully you feel more comfortable working with it than you did before.

You might be wondering where you can go from here. One of the best ways to learn is to learn by doing: try out your new CSS skills by building a website of your own. To continue to build your CSS skillset, here are some additional resources to explore:

Additional resources

• CSS Documentation on MDN
• Listen to the CSS Podcast
• CSS articles on web.dev
• How To Learn CSS - Smashing Magazine
• CSS-Tricks
• Layout Land - Youtube

Brought to you by

{% include 'partials/authors-stack.njk' %}

Filters

Say you need to build an element that's got a slightly opaque, frosted glass effect that sits over the top of an image. The text needs to be live text and not an image. How do you do that?

A combination of CSS filters and the backdrop-filter allow us to apply effects and blur what's needed in real time. Blur and opacity are two of many available filters, so let's have a quick run through what they all do and how to use them.

{% Aside %} Take care when placing text over images, that the text is still readable should the filter effect not be supported in a user's browser. For example, at the moment backdrop-filter is not supported in Firefox, and so you should check that Firefox users aren't left with text they cannot easily read: {% BrowserCompat 'css.properties.backdrop-filter' %} {% endAside %}

The filter property

{% BrowserCompat 'css.properties.filter' %}

You can apply one or many of the following filters as a value for filter. If you incorrectly apply a filter, the rest of the filters defined for filter will not work.

blur

This applies a gaussian blur and the only argument you can pass is a radius, which is how much blur is applied. This needs to be a length unit, like 10px. Percentages are not accepted.

.my-element {
	filter: blur(0.2em);
}

brightness

{% BrowserCompat 'css.types.filter-function.brightness' %}

To increase or decrease the brightness of an element, use the brightness function. The brightness value is expressed as a percentage with the unchanged image being expressed as a value of 100%. A value of 0% turns the image completely black, therefore values between 0% and 100% make the image less bright. Use values over 100% to increase the brightness.

.my-element {
	filter: brightness(80%);
}

{% Aside %} You can also use decimal values, instead of percentage values in filters like brightness. To set 80% brightness with a decimal, write 0.8. {% endAside %}

contrast

{% BrowserCompat 'css.types.filter-function.contrast' %}

Set a value between 0% and 100% to decrease or increase the contrast, respectively.

.my-element {
	filter: contrast(160%);
}

grayscale

{% BrowserCompat 'css.types.filter-function.grayscale' %}

You can apply a completely grayscale effect by using 1 as a value for grayscale(), or 0 to have a completely saturated element. You can also use percentage or decimal values to only apply a partial grayscale effect. If you pass no arguments, the element will be completely grayscale. If you pass a value greater than 100%, it will be capped at 100%.

.my-element {
	filter: grayscale(80%);
}

invert

{% BrowserCompat 'css.types.filter-function.invert' %}

Just like grayscale, you can pass 1 or 0 to the invert() function to turn it on or off. When it is on, the element's colors are completely inverted. You can also use percentage or decimal values to only apply a partial inversion of colors. If you don't pass any arguments into the invert() function, the element will be completely inverted.

.my-element {
	filter: invert(1);
}

opacity

{% BrowserCompat 'css.types.filter-function.opacity' %}

The opacity() filter works just like the opacity property, where you can pass a number or percentage to increase or reduce opacity. If you pass no arguments, the element is fully visible.

.my-element {
	filter: opacity(0.3);
}

saturate

{% BrowserCompat 'css.types.filter-function.saturate' %}

The saturate filter is very similar to the brightness filter and accepts the same argument: number or percentage. Instead of increasing or decreasing the brightness effect, saturate increases or decreases color saturation.

.my-element {
   filter: saturate(155%);
}

sepia

{% BrowserCompat 'css.types.filter-function.sepia' %}

You can add a sepia tone effect with this filter that works like grayscale(). The sepia tone is a photographic printing technique that converts black tones to brown tones to warm them up. You can pass a number or percentage as the argument for sepia() which increases or decreases the effect. Passing no arguments adds a full sepia effect (equivalent to sepia(100%)).

.my-element {
	filter: sepia(70%);
}

hue-rotate

{% BrowserCompat 'css.types.filter-function.hue-rotate' %}

You learned about how the hue in hsl references a rotation of the color wheel in the colors lesson and this filter works in a similar way. If you pass an angle, such as degrees or turns, it shifts the hue of all the element's colors, changing the part of the color wheel it references. If you pass no argument, it does nothing.

.my-element {
	filter: hue-rotate(120deg);
}

drop-shadow

{% BrowserCompat 'css.types.filter-function.drop-shadow' %}

You can apply a curve-hugging drop shadow like you would in a design tool, such as Photoshop with drop-shadow. This shadow is applied to an alpha mask which makes it very useful for adding a shadow to a cutout image. The drop-shadow filter takes a shadow parameter which contains space separated offset-x, offset-y, blur and color values. It is almost identical to box-shadow, but the inset keyword and spread value are not supported.

.my-element {
	filter: drop-shadow(5px 5px 10px orange);
}

Learn more about the different types of shadows in the shadows module.

url

{% BrowserCompat 'svg.elements.filter' %}

The url filter allows you to apply an SVG filter from a linked SVG element or file. You can read more about SVG filters here

Backdrop filter

{% BrowserCompat 'css.properties.backdrop-filter' %}

The backdrop-filter property accepts all of the same filter function values as filter. The difference between backdrop-filter and filter is that the backdrop-filter property only applies the filters to the background, where the filter property applies it to the whole element.

The example right at the start of this lesson is the perfect example, because you don't want the text to be blurred and ideally you don't want to have to add extra HTML elements. Being able to apply filters only to the backdrop enables that.

{% Assessment 'filters' %}

Flexbox

A design pattern that can be tricky in responsive design is a sidebar that sits inline with some content. Where there is viewport space, this pattern works great, but where space is condensed, that rigid layout can become problematic.

The Flexible Box Layout Model (flexbox) is a layout model designed for one-dimensional content. It excels at taking a bunch of items which have different sizes, and returning the best layout for those items.

This is the ideal layout model for this sidebar pattern. Flexbox not only helps lay the sidebar and content out inline, but where there's not enough space remaining, the sidebar will break onto a new line. Instead of setting rigid dimensions for the browser to follow, with flexbox, you can instead provide flexible boundaries to hint how the content could display.

What can you do with a flex layout?

Flex layouts have the following features, which you will be able to explore in this guide.

• They can display as a row, or a column.
• They respect the writing mode of the document.
• They are single line by default, but can be asked to wrap onto multiple lines.
• Items in the layout can be visually reordered, away from their order in the DOM.
• Space can be distributed inside the items, so they become bigger and smaller according to the space available in their parent.
• Space can be distributed around the items and flex lines in a wrapped layout, using the Box Alignment properties.
• The items themselves can be aligned on the cross axis.

The main axis and the cross axis

The key to understanding flexbox is to understand the concept of a main axis and a cross axis. The main axis is the one set by your flex-direction property. If that is row your main axis is along the row, if it is column your main axis is along the column.

Flex items move as a group on the main axis. Remember: we've got a bunch of things and we are trying to get the best layout for them as a group.

The cross axis runs in the other direction to the main axis, so if flex-direction is row the cross axis runs along the column.

You can do two things on the cross axis. You can move the items individually or as a group, so they align against each other and the flex container. Also, if you have wrapped flex lines, you can treat those lines as a group to control how space is assigned to those lines. You will see how this all works in practice throughout this guide, for now just keep in mind that the main axis follows your flex-direction.

Creating a flex container

Let's see how flexbox behaves by taking a group of different sized items and using flexbox to lay them out.

<div class="container" id="container">
  <div>One</div>
  <div>Item two</div>
  <div>The item we will refer to as three</div>
</div>

To use flexbox you need to declare that you want to use a flex formatting context and not regular block and inline layout. Do this by changing the value of the display property to flex.

.container {
  display: flex;
}

As you learned in the layout guide this will give you a block-level box, with flex item children. The flex items immediately start exhibiting some flexbox behavior, using their initial values.

{% Aside %} All CSS properties have initial values which control how they behave "out of the box" when you haven't applied any CSS to change that initial behavior. The children of our flex container become flex items as soon as their parent gets display: flex, so these initial values mean that we start seeing some flexbox behavior. {% endAside %}

The initial values mean that:

• Items display as a row.
• They do not wrap.
• They do not grow to fill the container.
• They line up at the start of the container.

Controlling the direction of items

Even though you haven't added a flex-direction property yet, the items display as a row because the initial value of flex-direction is row. If you want a row then you don't need to add the property. To change the direction, add the property and one of the four values:

• row: the items lay out as a row.
• row-reverse: the items lay out as a row from the end of the flex container.
• column: the items lay out as a column.
• column-reverse : the items lay out as a column from the end of the flex container.

You can try out all of the values using our group of items in the demo below.

Reversing the flow of items and accessibility

You should be cautious when using any properties that reorder the visual display away from how things are ordered in the HTML document, as it can negatively impact accessibility. The row-reverse and column-reverse values are a good example of this. The reordering only happens for the visual order, not the logical order. This is important to understand as the logical order is the order that a screen reader will read out the content, and anyone navigating using the keyboard will follow.

You can see in the following video how in a reversed column layout, tabbing between links becomes disconnected as the keyboard navigation follows the DOM not the visual display.

{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/IgpaIRZd7kOq8sd46eaR.mp4", autoplay=true, controls=true %}

Anything which can change the order of items in flexbox or grid can cause this problem. Therefore any reordering should include thorough testing to check that it will not make your site hard to use for some people.

For more information see:

• Content reordering
• Flexbox and the keyboard navigation disconnect

Writing modes and direction

Flex items lay out as a row by default. A row runs in the direction that sentences flow in your writing mode and script direction. This means that if you are working in Arabic, which has a right-to-left (rtl) script direction, the items will line up on the right. Tab order would also begin on the right as this is the way sentences are read in Arabic.

If you are working with a vertical writing mode, like some Japanese typefaces, then a row will run vertically, from top to bottom. Try changing the flex-direction in this demo which is using a vertical writing mode.

Therefore the way flex items behave by default is linked to the writing mode of the document. Most tutorials are written using English, or another horizontal, left to right writing mode. This would make it easy to assume that flex items line up on the left, and run horizontally.

With the main and cross axis plus the writing mode to consider, the fact that we talk about start and end rather than top, bottom, left, and right in flexbox might be easier to understand. Each axis has a start and an end. The start of the main axis is referred to as main-start. So our flex items initially line up from main-start. The end of that axis is main-end. The start of the cross axis is cross-start and the end cross-end.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/uSH4TxRv8KNQDTK7Vn8h.svg", alt="A labelled diagram of the above terms", width="800", height="382" %}

Wrapping flex items

The initial value of the flex-wrap property is nowrap. This means that if there is not enough space in the container the items will overflow.

Items displaying using the initial values will shrink as small as they can, down to the min-content size before overflow happens.

To cause the items to wrap add flex-wrap: wrap to the flex container.

.container {
  display: flex;
  flex-wrap: wrap;
}

When a flex container wraps it creates multiple flex lines. In terms of space distribution, each line acts like a new flex container. Therefore if you are wrapping rows, it is not possible to get something in row 2 to line up with something above it in row 1. This is what is meant by flexbox being one-dimensional. You can control alignment in one axis, a row or a column, not both together as we can do in grid.

The flex-flow shorthand

You can set the flex-direction and flex-wrap properties using the shorthand flex-flow. For example, to set flex-direction to column and allow items to wrap:

.container {
  display: flex;
  flex-flow: column wrap;
}

Controlling space inside flex items

Assuming our container has more space than is needed to display the items, the items line up at the start and do not grow to fill the space. They stop growing at their max-content size. This is because the initial value of the flex- properties is:

• flex-grow: 0: items do not grow.
• flex-shrink: 1: items can shrink smaller than their flex-basis.
• flex-basis: auto: items have a base size of auto.

This can be represented by a keyword value of flex: initial. The flex shorthand property, or the longhands of flex-grow, flex-shrink and flex-basis are applied to the children of the flex container.

To cause the items to grow, while allowing large items to have more space than small ones use flex:auto. You can try this using the demo above. This sets the properties to:

• flex-grow: 1: items can grow larger than their flex-basis.
• flex-shrink: 1: items can shrink smaller than their flex-basis.
• flex-basis: auto: items have a base size of auto.

Using flex: auto will mean that items end up different sizes, as the space that is shared between the items is shared out after each item is laid out as max-content size. So a large item will gain more space. To force all of the items to be a consistent size and ignore the size of the content change flex:auto to flex: 1 in the demo.

This unpacks to:

• flex-grow: 1: items can grow larger than their flex-basis.
• flex-shrink: 1: items can shrink smaller than their flex-basis.
• flex-basis: 0: items have a base size of 0.

Using flex: 1 says that all items have zero size, therefore all of the space in the flex container is available to be distributed. As all items have a flex-grow factor of 1 they all grow equally and the space is shared equally.

{% Aside %} There is also a value of flex: none, which will give you inflexible flex items that do not grow or shrink. This might be useful if you are purely using flexbox to access the alignment properties but don't want any flexible behavior. {% endAside %}

Allowing items to grow at different rates

You don't have to give all items a flex-grow factor of 1. You could give your flex items different flex-grow factors. In the demo below the first item has flex: 1, the second flex: 2 and third flex: 3. As these items grow from 0 the available space in the flex container is shared into six. One part is given to the first item, two parts to the second, three parts to the third.

You can do the same thing from a flex-basis of auto, though you will need to specify the three values. The first value being flex-grow, the second flex-shrink, and the third flex-basis.

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

This is a less common use case as the reason to use a flex-basis of auto is to allow the browser to figure out space distribution. If you wanted to cause an item to grow a little more than the algorithm decides however it might be useful.

Reordering flex items

Items in your flex container can be reordered using the order property. This property allows the ordering of items in ordinal groups. Items are laid out in the direction dictated by flex-direction, lowest values first. If more than one item has the same value it will be displayed with the other items with that value.

The example below demonstrates this ordering.

{% Aside 'warning' %} Using order has the same problems as the row-reverse and column-reverse values of flex-direction. It would be very easy to create a disconnected experience for some users. Do not use order because you are fixing things being out of order in the document. If the items logically should be in a different order, change your HTML! {% endAside %}

{% Assessment 'flex' %}

Flexbox alignment overview

Flexbox brought with it a set of properties for aligning items and distributing space between items. These properties were so useful they have since been moved into their own specification, you'll encounter them in Grid Layout too. Here you can find out how they work when you are using flexbox.

The set of properties can be placed into two groups. Properties for space distribution, and properties for alignment. The properties which distribute space are:

• justify-content: space distribution on the main axis.
• align-content: space distribution on the cross axis.
• place-content: a shorthand for setting both of the above properties.

The properties used for alignment in flexbox:

• align-self: aligns a single item on the cross axis.
• align-items: aligns all of the items as a group on the cross axis.

If you are working on the main axis then the properties begin with justify-. On the cross axis they begin with align-.

Distributing space on the main axis

With the HTML used earlier, the flex items laid out as a row, there is space on the main axis. The items are not big enough to completely fill the flex container. The items line up at the start of the flex container because the initial value of justify-content is flex-start. The items line up at the start and any extra space is at the end.

Add the justify-content property to the flex container, give it a value of flex-end, and the items line up at the end of the container and the spare space is placed at the start.

.container {
  display: flex;
  justify-content: flex-end;
}

You can also distribute the space between the items with justify-content: space-between.

Try some of the values in the demo, and see MDN for the full set of possible values.

{% Aside %} For the justify-content property to do anything you have to have spare space in your container on the main axis. If your items fill the axis then there is no space to share out so the property won't do anything. {% endAside %}

With flex-direction: column

If you have changed your flex-direction to column then justify-content will work on the column. To have spare space in your container when working as a column you need to give your container a height or block-size. Otherwise you won't have spare space to distribute.

Try the different values, this time with a flexbox column layout.

Distributing space between flex lines

With a wrapped flex container you might have space to distribute on the cross axis. In this case you can use the align-content property with the same values as justify-content. Unlike justify-content which aligns items to flex-start by default, the initial value of align-content is stretch. Add the property align-content to the flex container to change that default behavior.

.container {
  align-content: center;
}

Try this out in the demo. The example has wrapped lines of flex items, and the container has a block-size in order that we have some spare space.

The place-content shorthand

To set both justify-content and align-content you can use place-content with one or two values. A single value will be used for both axes, if you specify both the first is used for align-content and the second for justify-content.

.container {
  place-content: space-between;
  /* sets both to space-between */
}

.container {
  place-content: center flex-end;
  /* wrapped lines on the cross axis are centered,
  on the main axis items are aligned to the end of the flex container */
}

Aligning items on the cross-axis

On the cross axis you can also align your items within the flex line using align-items and align-self. The space available for this alignment will depend on the height of the flex container, or flex line in the case of a wrapped set of items.

The initial value of align-self is stretch, which is why flex items in a row stretch to the height of the tallest item by default. To change this, add the align-self property to any of your flex items.

.container {
  display: flex;
}

.item1 {
  align-self: flex-start;
}

Use any of the following values to align the item:

• flex-start
• flex-end
• center
• stretch
• baseline

See the full list of values on MDN.

The next demo has a single line of flex items with flex-direction: row. The last item defines the height of the flex container. The first item has the align-self property with a value of flex-start. Try changing the value on that property to see how it moves within its space on the cross axis.

The align-self property is applied to individual items. The align-items property can be applied to the flex container to set all of the individual align-self properties as a group.

.container {
  display: flex;
  align-items: flex-start;
}

In this next demo try changing the value of align-items to align all of the items on the cross axis as a group.

Why is there no justify-self in flexbox?

Flex items act as a group on the main axis. So there is no concept of splitting an individual item out of that group.

In grid layout the justify-self and justify-items properties work on the inline axis to do alignment of items on that axis within their grid area. Due to the way that flex layouts treat items as a group, these properties are not implemented in a flex context.

It is worth knowing that flexbox does work very nicely with auto margins. If you come across a need to split off one item from a group, or separate the group into two groups you can apply a margin to do this. In the example below the last item has a left margin of auto. The auto margin absorbs all space in the direction it is applied. This means that it pushes the item over to the right, thus splitting the groups.

How to center an item vertically and horizontally

The alignment properties can be used to center an item inside another box. The justify-content property aligns the item on the main axis, which is row. The align-items property on the cross axis.

.container {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

{% Aside %} In the future we may be able to do this alignment without needing to make the parent a flex container. The alignment properties are specified for block and inline layout. At present no browser has implemented these. However, switching into a flex formatting context gives you access to the properties. If you need to align something it's a great way to do it. {% endAside %}

{% Assessment 'conclusion' %}

Resources

• MDN CSS Flexible Box Layout includes a series of detailed guides with examples.
• CSS Tricks Guide to Flexbox
• What Happens When You Create a Flexbox Flex Container
• Everything You Need To Know About Alignment In Flexbox
• How Big Is That Flexible Box?
• Use Cases For Flexbox
• Inspect and debug CSS Flexbox layouts in Chrome DevTools

Focus

On your webpage, you click a link that skips the user to the main content of the website. These are often referred to as skip links, or anchor links. When that link is activated by a keyboard, using the tab and enter keys, the main content container has a focus ring around it. Why is that?

This is because the <main> has a tabindex="-1" attribute value, which means it can be programmatically focused. When the <main> is targeted—because the #main-content in the browser URL bar matches the id—it receives programmatic focus. It's tempting to remove the focus styles in these situations, but handling focus appropriately and with care helps to create a good, accessible, user experience. It can also be a great place to add some interest to interactions.

Why is focus important?

As a web developer, it's your job to make a website accessible and inclusive to all. Creating accessible focus states with CSS is a part of this responsibility.

Focus styles assist people who use a device such as a keyboard or a switch control to navigate and interact with a website. If an element receives focus and there is no visual indication, a user may lose track of what is in focus. This can create navigation issues and result in unwanted behaviour if, say, the wrong link is followed.

{% Aside %} Learn more about the importance of focus for accessibility in Learn Accessibility: Focus, and more information on how to manage focus in HTML in Learn HTML: Focus. {% endAside%}

How elements get focus

Certain elements are automatically focusable; these are elements that accept interaction and input, such as <a>, <button>, <input> and <select>. In short, all form elements, buttons and links. You can typically navigate a website's focusable elements using the tab key to move forward on the page, and shift + tab to move backward.

There is also a HTML attribute called tabindex which allows you to change the tabbing index—which is order in which elements are focused—every time someone presses their tab key, or focus is shifted with a hash change in the URL or by a JavaScript event. If tabindex on a HTML element is set to 0, it can receive focus via the tab key and it will honour the global tab index, which is defined by the document source order.

If you set tabindex to -1, it can only receive focus programmatically, which means only when a JavaScript event happens or a hash change (matching the element's id in the URL) occurs. If you set tabindex to be anything higher than 0, it will be removed from the global tab index, defined by document source order. Tabbing order will now be defined by the value of tabindex, so an element with tabindex="1" will receive focus before an element with tabindex="2", for example.

{% Aside 'warning' %} Honoring document source order is really important, and focus order should only be changed if you absolutely have to change it. This applies both when setting tabindex and changing visual order with CSS layout, such as flexbox and grid. Anything that creates unpredictable focus on the web can create an inaccessible experience for the user. {% endAside %}

Styling focus

The default browser behavior when an element receives focus is to present a focus ring. This focus ring varies between both browser and operating systems.

{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/zVu8FoqteYCP1sTj3uCm.mp4", controls="true", autoplay="true" %}

This behavior can be changed with CSS, using the :focus, :focus-within and :focus-visible pseudo-classes that you learned about in the pseudo-classes lesson. It is important to set a focus style which has contrast with the default style of an element. For example, a common approach is to utilize the outline property.

a:focus {
  outline: 2px solid slateblue;
}

The outline property could appear too close to the text of a link, but the outline-offset property can help with that, as it adds extra visual padding without affecting the geometric size that the element fills. A positive number value for outline-offset will push the outline outwards, a negative value will pull the outline inwards.

Currently in some browsers, if you have a border-radius set on your element and use outline, it won't match—the outline will have sharp corners. Due to this, it is tempting to use a box-shadow with a small blur radius because box-shadow clips to the shape, honouring border-radius, but this style will not show in Windows High Contrast Mode. This is because Windows High Contrast Mode doesn't apply shadows, and mostly ignores background images to favor the user's preferred settings.

{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/MqMoKpLJ2rF5RRkn5jEO.mp4" %}

In summary

Creating a focus state that has contrast with an element's default state is incredibly important. The default browser styles do this already for you, but if you want to change this behaviour, remember the following:

• Avoid using outline: none on an element that can receive keyboard focus.
• Avoid replacing outline styles with box-shadow. as they don't show up in Windows High Contrast Mode.
• Only set a positive value for tabindex on an HTML element if you absolutely have to.
• Make sure the focus state is very clear vs the default state.

{% Assessment 'focus' %}

Functions

So far in this course, you've been exposed to several CSS functions. In the grid module, you were introduced to minmax() and fit-content(), which help you size elements. In the color module, you were introduced to rgb(), and hsl(), which help you define colors.

Like many other programming languages, CSS has a lot of built-in functions that you can access whenever you need them.

Every CSS function has a specific purpose, in this lesson, you'll get a high-level overview, giving you a much better understanding of where and how to use them.

What is a function?

A function is a named, self-contained piece of code that completes a specific task. A function is named so you can call it within your code and you can pass data into the function. This is known as passing arguments.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/OCUXCuKLxHwZYFIIErUd.svg", alt="A diagram of a function as described above", width="800", height="311" %}

A lot CSS functions are pure functions, which means that if you pass the same arguments into them, they will always give you the same result back, regardless of what is happening in the rest of your code. These functions will often re-compute as values change in your CSS, similar to other elements in the language, such as computed cascaded values like currentColor.

In CSS, you can only use the provided functions, rather than write your own, but functions can be nested within each other in some contexts, giving them more flexibility. We'll cover that in more detail, later in this module.

Functional selectors

.post :is(h1, h2, h3) {
	line-height: 1.2;
}

You learned about functional selectors in the pseudo-classes module which detailed functions like :is() and :not(). The arguments passed into these functions are CSS selectors, which are then evaluated. If there is a match with elements, the rest of the CSS rule will be applied to them.

Custom properties and var()

:root {
	--base-color: #ff00ff;
}

.my-element {
	background: var(--base-color);
}

A custom property is a variable which allows you to tokenize values in your CSS code. Custom properties are also affected by the cascade which means they can be contextually manipulated or redefined. A custom property must be prefixed with two dashes (--) and are case sensitive.

The var() function takes one required argument: the custom property that you are trying to return as a value. In the above snippet, the var() function has --base-color passed as an argument. If --base-color is defined, then var() will return the value.

.my-element {
	background: var(--base-color, hotpink);
}

You can also pass a fallback declaration value into the var() function. This means that if --base-color can't be found, the passed declaration will be used instead, which in this sample's case is the hotpink color.

Functions that return a value

The var() function is just one of the CSS functions that return a value. Functions like attr() and url() follow a similar structure to var()— you pass one or more arguments and use them on the right side of your CSS declaration.

a::after {
  content: attr(href);
}

The attr() function here is taking the content of the <a> element's href attribute and setting it as the content of the ::after pseudo-element. If the value of the <a> element's href attribute was to change, this would automatically be reflected in this content attribute.

.my-element {
	background-image: url('/path/to/image.jpg');
}

The url() function takes a string URL and is used to load images, fonts and content. If a valid URL isn't passed in or the resource that the URL points to can't be found, nothing will be returned by the url() function.

Color functions

You learned all about color functions in the color module. If you haven't read that one yet, it is strongly recommended that you do.

Some available color functions in CSS are rgb(), rgba(), hsl(), hsla(), hwb(), lab() and lch(). All of these have a similar form where configuration arguments are passed in and a color is returned back.

Mathematical expressions

Like many other programming languages, CSS provides useful mathematical functions to assist with various types of calculation.

calc()

{% BrowserCompat 'css.types.calc' %}

The calc() function takes a single mathematical expression as its parameter. This mathematical expression can be a mix of types, such as length, number, angle and frequency. Units can be mixed too.

.my-element {
	width: calc(100% - 2rem);
}

In this example, the calc() function is being used to size an element's width as 100% of its containing parent element, then removing 2rem off that computed value.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

The calc() function can be nested inside another calc() function. You can also pass custom properties in a var() function as part of an expression.

min() and max()

{% BrowserCompat 'css.types.min' %}

The min() function returns the smallest computed value of the one or more passed arguments. The max() function does the opposite: get the largest value of the one or more passed arguments.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

In this example, the width should be the smallest value between 20vw —which is 20% of the viewport width—and 30rem. The height should be the largest value between 20vh —which is 20% of the viewport height—and 20rem.

{% Aside %} We cover units like vw and vh in the sizing units module. {% endAside %}

clamp()

{% BrowserCompat 'css.types.clamp' %}

The clamp() function takes three arguments: the minimum size, the ideal size and the maximum.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

In this example, the font-size will be fluid based on the width of the viewport. The vw unit is added to a rem unit to assist with screen zooming, because regardless of zoom level a vw unit will be the same size. Multiplying by a rem unit—based on the root font size— provides the clamp() function with a relative calculation point.

You can learn more about the min(), max(), and clamp() functions in this article.

Shapes

The clip-path, offset-path and shape-outside CSS properties use shapes to visually clip your box or provide a shape for content to flow around.

There are shape functions that can be used with both of these properties. Simple shapes such as circle(), ellipse() and inset() take configuration arguments to size them. More complex shapes, such as polygon() take comma separated pairs of X and Y axis values to create custom shapes.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Like polygon(), there is also a path() function which takes an SVG fill rule as an argument. This allows for highly complex shapes that can be drawn in a graphics tool such as Illustrator or Inkscape and then copied into your CSS.

Transforms

Lastly in this overview of CSS functions are the transform functions, which skew, resize and even change the depth of an element. All of the following functions are used with the transform property.

Rotation

{% BrowserCompat 'css.types.transform-function.rotate' %}

You can rotate an element using the rotate() function, which will rotate an element on its center axis. You can also use the rotateX(), rotateY() and rotateZ() functions to rotate an element on a specific axis instead. You can pass degree, turn and radian units to determine the level of rotation.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

The rotate3d() function takes four arguments.

{% BrowserCompat 'css.types.transform-function.rotate3d' %}

The first 3 arguments are numbers, which define the X, Y and Z coordinates. The fourth argument is the rotation which, like the other rotation functions, accepts degrees, angle and turns.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

Scale

{% BrowserCompat 'css.types.transform-function.scale' %}

You can change the scaling of an element with transform and the scale() function. The function accepts one or two numbers as a value which determine a positive or negative scaling. If you only define one number argument, both the X and Y axis will be scaled the same and defining both is a shorthand for X and Y. Just like rotate(), there are scaleX(), scaleY() and scaleZ() functions to scale an element on a specific axis instead.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

Also like the rotate function, there is a scale3d() function. This is similar to scale(), but it takes three arguments: the X, Y and Z scale factor.

Translate

{% BrowserCompat 'css.types.transform-function.translate' %}

The translate() functions move an element while it maintains its position in the document flow. They accept length and percentage values as arguments. The translate() function translates an element along the X axis if one argument is defined, and translates an element along the X and Y axis if both arguments are defined.

.my-element {
  transform: translatex(40px) translatey(25px);
}

You can—just like with other transform functions—use specific functions for a specific axis, using translateX, translateY and translateZ. You can also use translate3d which allows you to define the X, Y and Z translation in one function.

Skewing

{% BrowserCompat 'css.types.transform-function.skew' %}

You can skew an element, using the skew() functions which accept angles as arguments. The skew() function works in a very similar way to translate(). If you only define one argument, it will only affect the X axis and if you define both, it will affect the X and Y axis. You can also use skewX and skewY to affect each axis independently.

.my-element {
  transform: skew(10deg);
}

Perspective

{% BrowserCompat 'css.properties.perspective' %}

Lastly, you can use the perspective property —which is part of the transform family of properties—to alter the distance between the user and the Z plane. This gives the feeling of distance and can be used to create a depth of field in your designs.

This example by David Desandro, from their very useful article, shows how it can be used, along with perspective-origin-x and perspective-origin-y properties to create truly 3D experiences.

Animation functions, gradients and filters

CSS also provides functions that help you animate elements, apply gradients to them and use graphical filters to manipulate how they look. To keep this module as concise as possible, they are covered in the linked modules. They all follow a similar structure to the functions demonstrated in this module.

{% Assessment 'functions' %}

Gradients

Imagine you've got a site to build and at the top, there's an intro with a heading, summary and a button. The designer has handed over a design which has a purple background for this intro. The only problem is the background features two shades of purple as a gradient. How do you do this?

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/0T5kGhQWJTLUclxSWipH.svg", alt="A dark to light purple gradient background with heading, paragraph and link", width="800", height="411" %}

You might initially think that you're going to need to export an image from your design tool for this, but you can use a linear-gradient instead.

A gradient is an image and can be used anywhere images can be used, but it's created with CSS and is made up with colors, numbers and angles. CSS gradients allow you to create anything from a smooth gradient between two colors, right up to impressive artwork by mixing and repeating multiple gradients.

Linear gradient

{% BrowserCompat 'css.types.image.gradient.linear-gradient' %}

The linear-gradient() function generates an image of two or more colors, progressively. It takes multiple arguments, but in its simplest configuration, you can pass some colors like this and it will automatically split them evenly, while blending them.

.my-element {
	background: linear-gradient(black, white);
}

You can also pass an angle or keywords that represent an angle. If you choose to use keywords, specify a direction after the to keyword. This means if you want a gradient that is black and white, that runs from left (black) to right (white), you would specify the angle as to right as the first argument.

.my-element {
	background: linear-gradient(to right, black, white);
}

A color stop value defined where a color stops and mixes with its neighbors. For a gradient starting with a dark shade of red running at a 45deg angle, at 30% of the size of the gradient changing to a lighter red: it looks like this.

.my-element {
	background: linear-gradient(45deg, darkred 30%, crimson);
}

You can add as many colors and color stops as you like in a linear-gradient(), and you can layer gradients on top of each other by separating each gradient with a comma.

Radial gradient

{% BrowserCompat 'css.types.image.gradient.radial-gradient' %}

To create a gradient that radiates in a circular fashion, the radial-gradient() function steps in to help. It's similar to linear-gradient(), but instead of specifying an angle, you optionally specify a position and ending shape. If you just specify colors, the radial-gradient() will auto-select the position as center and select either a circle or ellipse, depending on the size of the box.

.my-element {
	background: radial-gradient(white, black);
}

The gradient's position is similar to background-position using keywords and/or number values. The size of the radial gradient determines the size of the gradient's ending shape (circle or ellipse) and by default will be farthest-corner, which means it exactly meets the farthest corner of the box from the center. You can also use the following keywords:

• closest-corner will meet the closest corner to the center of the gradient.
• closest-side will meet the side of the box closest to the center of the gradient.
• farthest-side will do the opposite to closest-side.

You can add as many color stops as you like, just like with the linear-gradient. Likewise, you can add as many radial-gradients as you like too.

Conic gradient

{% BrowserCompat 'css.types.image.gradient.conic-gradient' %}

A conic gradient has a center point in your box and starts from the top (by default), and goes around in a 360 degree circle.

.my-element {
	background: conic-gradient(white, black);
}

The conic-gradient() function accepts position and angle arguments.

By default, the angle is 0 degrees which starts at the top, in the center. If you were to set the angle to be 45deg, it would be the top right corner. The angle argument accepts any type of angle value, like the linear and radial gradients.

The position is center by default. As with radial and linear gradients, positioning can be keyword-based, or it can be defined with numeric values.

You can add as many color stops as you want, like with other gradient types. A good use case for this capability, with conic gradients is rendering pie charts with CSS.

Repeating and mixing

Each type of gradient has a repeating type, too. These are repeating-linear-gradient(), repeating-radial-gradient() and repeating-conic-gradient(). They are similar to the non-repeating functions and take the same arguments. The difference is that if the defined gradient can be repeated to fill the box, based on both of their sizes, it will.

If your gradient doesn't appear to be repeating, you probably haven't set a length for one of the color stops. For example, you can create a striped background with a repeating-linear-gradient by setting color stop lengths.

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

You can also mix gradient functions on background properties, as well as defining as many gradients as you like, just like you would with a background image. For example, you can mix multiple linear-gradients together, or two linear-gradients with a radial gradient.

Resources

• Conic.css - a useful collection of conic gradients
• MDN guide to gradients
• Gradient generator

{% Assessment 'gradients' %}

Grid

A really common layout in web design is a header, sidebar, body and footer layout.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/tj7KmP72RKkffGQRswpA.svg", alt="A header with logo and navigation with a sidebar and content area that features an article", width="800", height="531" %}

Over the years, there have been many methods to solve this layout, but with CSS grid, not only is it relatively straightforward, but you have lots of options. Grid is exceptionally useful at combining the control that extrinsic sizing provides with the flexibility of intrinsic sizing, which makes it ideal for this sort of layout. This is because grid is a layout method designed for two-dimensional content. That is, laying things out in rows and columns at the same time.

When creating a grid layout you define a grid with rows and columns. Then you place items onto that grid, or allow the browser to auto-place them into the cells you have created. There's a lot to grid, but with an overview of what is available you'll be making grid layouts in no time.

Overview

So what can you do with grid? Grid layouts have the following features. You'll learn about all of them in this guide.

1. A grid can be defined with rows and columns. You can choose how to size these row and column tracks or they can react to the size of the content.
2. Direct children of the grid container will be automatically placed onto this grid.
3. Or, you can place the items in the precise location that you want.
4. Lines and areas on the grid can be named to make placement easier.
5. Spare space in the grid container can be distributed between the tracks.
6. Grid items can be aligned within their area.

Grid terminology

Grid comes with a bunch of new terminology as it's the first time CSS has had a real layout system.

Grid lines

A grid is made up of lines, which run horizontally and vertically. If your grid has four columns, it will have five column lines including the one after the last column.

Lines are numbered starting from 1, with the numbering following the writing mode and script direction of the component. This means that column line 1 will be on the left in a left-to-right language such as English, and on the right in a right-to-left language such as Arabic.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/Sf8WXYmbhZkbhhPeqTrY.svg", alt="A diagram representation of grid lines", width="800", height="434" %}

Grid tracks

A track is the space between two grid lines. A row track is between two row lines and a column track between two column lines. When we create our grid we create these tracks by assigning a size to them.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/7YkhnpgOQLrcaxjlKmlU.svg", alt="A diagram representation of a grid track", width="800", height="434" %}

Grid cell

A grid cell is the smallest space on a grid defined by the intersection of row and column tracks. It's just like a table cell or a cell in a spreadsheet. If you define a grid and don't place any of the items they will automatically be laid out one item into each defined grid cell.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/lpiPCpW6fy4BjFOL6j77.svg", alt="A diagram representation of a grid cell", width="800", height="434" %}

Grid area

Several grid cells together. Grid areas are created by causing an item to span over multiple tracks.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/pGmMokRfoVbLNxf1VXrF.svg", alt="A diagram representation of a grid area", width="800", height="434" %}

Gaps

A gutter or alley between tracks. For sizing purposes these act like a regular track. You can't place content into a gap but you can span grid items across it.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/JNXSRH4j77loSB099E04.svg", alt="A diagram representation of a grid with gaps", width="800", height="434" %}

Grid container

The HTML element which has display: grid applied, and therefore creates a new grid formatting context for the direct children.

.container {
  display: grid;
}

Grid item

A grid item is an item which is a direct child of the grid container.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Rows and columns

To create a basic grid you can define a grid with three column tracks, two row tracks and a 10 pixel gap between the tracks as follows.

.container {
    display: grid;
    grid-template-columns: 5em 100px 30%;
    grid-template-rows: 200px auto;
    gap: 10px;
}

This grid demonstrates many of the things described in the terminology section. It has three column tracks. Each track uses a different length unit. It has two row tracks, one using a length unit and the other auto. When used as a track sizing auto can be thought of as being as big as the content. Tracks are auto sized by default.

If the element with a class of .container has child items, they will immediately lay out on this grid. You can see this in action in the demo below.

The grid overlay in Chrome DevTools can help you understand the various parts of the grid.

Open the demo in Chrome. Inspect the element with the grey background, which has an ID of container. Highlight the grid by selecting the grid badge in the DOM, next to the .container element. Inside the Layout tab, select Display Line Numbers in the dropdown to see the line numbers on your grid.

Intrinsic sizing keywords

In addition to the length and percentage dimensions as described in the section on sizing units, grid tracks can use intrinsic sizing keywords. These keywords are defined in the Box Sizing specification and add additional methods of sizing boxes in CSS, not just grid tracks.

• min-content
• max-content
• fit-content()

The min-content keyword will make a track as small as it can be without the track content overflowing. Changing the example grid layout to have three column tracks all at min-content size will mean they become as narrow as the longest word in the track.

The max-content keyword has the opposite effect. The track will become as wide enough for all of the content to display in one long unbroken string. This might cause overflows as the string will not wrap.

The fit-content() function acts like max-content at first. However, once the track reaches the size that you pass into the function, the content starts to wrap. So fit-content(10em) will create a track that is less than 10em, if the max-content size is less than 10em, but never larger than 10em.

In the next demo try out the different intrinsic sizing keywords by changing the sizing of the grid tracks.

{% Aside %} You might spot in this demo that when auto is used the grid columns stretch to fill the container. Auto sized tracks will stretch by default if there is additional space in the grid container. {% endAside %}

The fr unit

We have existing length dimensions, percentages, and also these new keywords. There is also a special sizing method which only works in grid layout. This is the fr unit, a flexible length which describes a share of the available space in the grid container.

The fr unit works in a similar way to using flex: auto in flexbox. It distributes space after the items have been laid out. Therefore to have three columns which all get the same share of available space:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

As the fr unit shares out available space, it can be combined with a fixed size gap or fixed size tracks. To have a component with a fixed size element and the second track taking up whatever space is left, you can use as a tracklisting of grid-template-columns: 200px 1fr.

Using different values for the fr unit will share the space in proportion. Larger values getting more of the spare space. In the demo below change the value of the third track.

The minmax() function

{% BrowserCompat 'css.properties.grid-template-columns.minmax' %}

This function means that you can set a minimum and a maximum size for a track. This can be quite useful. If we take the example of the fr unit above which distributes remaining space, it could be written out using minmax() as minmax(auto, 1fr). Grid looks at the intrinsic size of the content, then distributes available space after giving the content enough room. This means that you might not get tracks that each have an equal share of all space available in the grid container.

To force a track to take an equal share of the space in the grid container minus gaps use minmax. Replace 1fr as a track size with minmax(0, 1fr). This makes the minimum size of the track 0 and not the min-content size. Grid will then take all of the available size in the container, deduct the size needed for any gaps, and share the rest out according to your fr units.

repeat() notation

{% BrowserCompat 'css.properties.grid-template-columns.repeat' %}

If you want to create a 12 column track grid with equal columns, you could use the following CSS.

.container {
    display: grid;
    grid-template-columns:
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr);
}

Or, you could write it out using repeat():

.container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
}

The repeat() function can be used to repeat any section of your track listing. For example you can repeat a pattern of tracks. You can also have some regular tracks and a repeating section.

.container {
    display: grid;
    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fill and auto-fit

You can combine everything you have learned about track sizing, minmax(), and repeat, to create a useful pattern with grid layout. Perhaps you don't want to specify the number of column tracks, but instead want to create as many as will fit in your container.

You can achieve this with repeat() and the auto-fill or auto-fit keywords. In the demo below grid will create as many 200 pixel tracks as will fit in the container. Open the demo in a new window and see how the grid changes as you change the size of the viewport.

In the demo we get as many tracks as will fit. The tracks are not flexible however. You will get a gap on the end until there is enough space for another 200 pixel track. If you add the minmax() function, you can request as many tracks as will fit with a minimum size of 200 pixels and a maximum of 1fr. Grid then lays out the 200 pixel tracks and whatever space is leftover is distributed equally to them.

This creates a two-dimensional responsive layout with no need for any media queries.

There is a subtle difference between auto-fill and auto-fit. In the next demo play with a grid layout using the syntax explained above, but with only two grid items in the grid container. Using the auto-fill keyword you can see that empty tracks have been created. Change the keyword to auto-fit and the tracks collapse down to 0 size. This means that the flexible tracks now grow to consume the space.

The auto-fill and auto-fit keywords otherwise act in exactly the same way. There is no difference between them once the first track is filled.

Auto-placement

You have already seen grid auto-placement at work in the demos so far. Items are placed on the grid one per cell in the order that they appear in the source. For many layouts this might be all you need. If you need more control then there are a couple of things you might like to do. The first is to tweak the auto-placement layout.

Placing items in columns

The default behavior of grid layout is to place items along the rows. You can instead cause the items to place into columns using grid-auto-flow: column. You need to define row tracks otherwise the items will create intrinsic column tracks, and layout out all in one long row.

These values relate to the writing mode of the document. A row always runs in the direction a sentence runs in the writing mode of the document or component. In the next demo you can change mode the value of grid-auto-flow and the writing-mode property.

Spanning tracks

You can cause some or all of the items in an auto-placed layout to span more than one track. Use the span keyword plus the number of lines to span as a value for grid-column-end or grid-row-end.

.item {
    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}

As you have not specified a grid-column-start, this uses the initial value of auto and is placed according to the auto-placement rules. You can also specify the same thing using the shorthand grid-column:

.item {
    grid-column: auto / span 2;
}

Filling gaps

An auto-placed layout with some items spanning multiple tracks may result in a grid with some unfilled cells. The default behavior of grid layout with a fully auto-placed layout is to always progress forward. The items will be placed according to the order they are in the source, or any modification with the order property. If there is not enough space to fit an item, grid will leave a gap and move to the next track.

The next demo shows this behavior. The checkbox will apply the dense packing mode. This is enabled by giving grid-auto-flow a value of dense. With this value in place, grid will take items later in the layout and use them to fill gaps. This may mean that the display becomes disconnected from the logical order.

Placing items

You have a lot of functionality from CSS Grid already. Let's now take a look at how we position items on the grid we have created.

The first thing to remember is that CSS Grid Layout is based on a grid of numbered lines. The simplest way to place things onto the grid is to place them from one line to another. You'll discover other ways of placing items in this guide, but you always have access to those numbered lines.

The properties that you can use to place items by line number are:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

They have shorthands which allow you to set both start and end lines at once:

• grid-column
• grid-row

To place your item set the start and end lines of the grid area that it should be placed into.

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px 100px);
}

.item {
    grid-column-start: 1; /* start at column line 1 */
    grid-column-end: 4; /* end at column line 4 */
    grid-row-start: 2; /*start at row line 2 */
    grid-row-end: 4; /* end at row line 4 */
}

Chrome DevTools can give you a visual guide to the lines in order to check where your item is placed.

The line numbering follows the writing mode and direction of the component. In the next demo change the writing mode or direction to see how the placement of the items stays consistent to the way that text flows.

Stacking items

Using line-based positioning you can place items into the same cell of the grid. This means that you can stack items, or cause one item to partly overlap another. Items which come later in the source will be displayed on top of items that come earlier. You can change this stacking order using z-index just as with positioned items.

Negative line numbers

When you create a grid using grid-template-rows and grid-template-columns you create what is known as the explicit grid. This is a grid that you have defined and given size to the tracks.

Sometimes you will have items which display outside this explicit grid. For example, you might define column tracks and then add several rows of grid items without ever defining row tracks. The tracks would be auto sized by default. You also might place an item using grid-column-end that is outside of the explicit grid defined. In both of these cases grid will create tracks to make the layout work, and these tracks are referred to as the implicit grid.

Most of the time it will make no difference if you are working with an implicit or explicit grid. However, with line-based placement you may run into the main difference between the two.

Using negative line numbers you can place items from the end line of the explicit grid. This can be useful if you want an item to span from the first to the last column line. In that case you can use grid-column: 1 / -1. The item will stretch right across the explicit grid.

This only works for the explicit grid however. Take a layout of three rows of auto-placed items where you would like the very first item to span to the end line of the grid.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/Dt8yG376MqSyWJJ8KqPr.svg", alt="A sidebar with 8 sibling grid items", width="800", height="359" %}

You might think that you can give that item grid-row: 1 / -1. In the demo below you can see that this doesn't work. The tracks are created in the implicit grid, there is no way to reach the end of the grid using -1.

Sizing implicit tracks

The tracks created in the implicit grid will be auto-sized by default. However if you want to control the sizing of the rows, use the grid-auto-rows property, and for columns grid-auto-columns.

To create all implicit rows at a minimum size of 10em and a maximum size of auto:

.container {
    display: grid;
    grid-auto-rows: minmax(10em, auto);
}

To create implicit columns with a pattern of 100px and 200px wide tracks. In this case the first implicit column will be 100px, the second 200px, the third 100px, and so on.

.container {
    display: grid;
    grid-auto-columns: 100px 200px;
}

Named grid lines

It can make it easier to place items into a layout if the lines have a name rather than a number. You can name any line on your grid by adding a name of your choosing between square brackets. Multiple names can be added, separated by a space inside the same brackets. Once you have named lines they can be used instead of the numbers.

.container {
    display: grid;
    grid-template-columns:
      [main-start aside-start] 1fr
      [aside-end content-start] 2fr
      [content-end main-end]; /* a two column layout */
}

.sidebar {
    grid-column: aside-start / aside-end;
    /* placed between line 1 and 2*/
}

footer {
    grid-column: main-start / main-end;
    /* right across the layout from line 1 to line 3*/
}

Grid Template Areas

You can also name areas of the grid and place items onto those named areas. This is a lovely technique as it allows you to see what your component looks like right there in the CSS.

To start, give the direct children of your grid container a name using the grid-area property:

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

The name can be anything you like other than the keywords auto and span. Once all of your items are named, use the grid-template-areas property to define which grid cells each item will span. Each row is defined within quotes.

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "header header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

There are a few rules when using grid-template-areas.

• The value must be a complete grid with no empty cells.
• To span tracks repeat the name.
• The areas created by repeating the name must be rectangular and cannot be disconnected.

If you break any of the above rules the value is treated as invalid and thrown away.

To leave white space on the grid use a . or multiples with no white space between them. For example to leave the very first cell on the grid empty I could add a series of . characters:

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "....... header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

As your entire layout is defined in one place, it makes it straightforward to redefine the layout using media queries. In the next example I have created a two column layout which moves to three columns by redefining the value of grid-template-columns and grid-template-areas. Open the example in a new window to play with the viewport size and see the layout change.

You can also see how the grid-template-areas property relates to writing-mode and direction, as with other grid methods.

Shorthand properties

There are two shorthand properties which allow you to set many of the grid properties in one go. These can look a little confusing until you break down exactly how they go together. Whether you want to use them or prefer to use longhands is up to you.

grid-template

{% BrowserCompat 'css.properties.grid-template' %}

The grid-template property is a shorthand for grid-template-rows, grid-template-columns and grid-template-areas. The rows are defined first, along with the value of grid-template-areas. Column sizing is added after a /.

.container {
    display: grid;
    grid-template:
      "head head head" minmax(150px, auto)
      "sidebar content content" auto
      "sidebar footer footer" auto / 1fr 1fr 1fr;
}

grid property

{% BrowserCompat 'css.properties.grid' %}

The grid shorthand can be used in exactly the same way as the grid-template shorthand. When used in this way it will reset the other grid properties that it accepts to their initial values. The full set being:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

You can alternately use this shorthand to define how the implicit grid behaves, for example:

.container {
    display: grid;
    grid: repeat(2, 80px) / auto-flow  120px;
}

Alignment

Grid layout uses the same alignment properties that you learned about in the guide to flexbox. In grid the properties which begin with justify- are always used on the inline axis, the direction in which sentences run in your writing mode.

The properties which begin with align- are used on the block axis, the direction in which blocks are laid out in your writing mode.

• justify-content and align-content: distribute additional space in the grid container around or between tracks.
• justify-self and align-self: are applied to a grid item to move it around inside the grid area it is placed in.
• justify-items and align-items: are applied to the grid container to set all of the justify-self properties on the items.

Distributing extra space

In this demo the grid is larger than the space needed to lay out the fixed width tracks. This means we have space in both the inline and block dimensions of the grid. Try different values of align-content and justify-content to see how the tracks behave.

Note how the gaps become larger when using values such as space-between, and any grid item spanning two tracks also grows to absorb the additional space added to the gap.

{% Aside %} As with flexbox, these properties will only work if there is additional space to distribute. If your grid tracks neatly fill the container then there will be no space to share out. {% endAside %}

Moving content around

Items with a background color appear to completely fill the grid area they are placed in, because the initial value for justify-self and align-self is stretch.

{% Aside %} If your item is an image, or something else with an intrinsic aspect ratio, the initial value will be start rather than stretch to avoid stretching things out of shape. {% endAside %}

In the demo change the values of justify-items and align-items to see how this changes the layout. The grid area is not changing size, instead the items are being moved around inside the defined area.

{% Assessment 'grid' %}

Resources

This guide has given you an overview of the different parts of the grid layout specification. To find out more, take a look at the following resources.

• MDN CSS Grid Layout
• A Complete Guide to Grid
• Creating a Grid Container
• Inspect CSS grid in Chrome DevTools
• A comprehensive collection of grid learning material

Inheritance

Say you just wrote some CSS to make elements look like a button.

<a href="http://example.com" class="my-button">I am a button link</a>

.my-button {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  background: pink;
  font: inherit;
  text-align: center;
}

You then add a link element to an article of content, with a class value of .my-button. However there's an issue, the text is not the color that you expected it to be. How did this happen?

Some CSS properties inherit if you don't specify a value for them. In the case of this button, it inherited the color from this CSS:

article a {
  color: maroon;
}

In this lesson you'll learn why that happens and how inheritance is a powerful feature to help you write less CSS.

Inheritance flow

Let's take a look at how inheritance works, using this snippet of HTML:

<html>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </body>
</html>

The root element (<html>) won't inherit anything because it is the first element in the document. Add some CSS on the HTML element, and it starts to cascade down the document.

html {
  color: lightslategray;
}

The color property is inheritable by other elements. The html element has color: lightslategray, therefore all elements that can inherit color will now have a color of lightslategray.

body {
  font-size: 1.2em;
}

{% Aside %} Because this demo sets the font size on the body element, the html element will still have the initial font size set by the browser (user agent stylesheet), but the article and p will inherit the font size declared by the body. This is because inheritance only cascades downwards. {% endAside %}

p {
  font-style: italic;
}

Only the <p> will have italic text because it's the deepest nested element. Inheritance only flows downwards, not back up to parent elements.

Which properties are inheritable?

Not all CSS properties are inheritable, but there are a lot that are. For reference, here is the entire list of inheritable properties, taken from the W3 reference of all CSS properties:

• azimuth
• border-collapse
• border-spacing
• caption-side
• color
• cursor
• direction
• empty-cells
• font-family
• font-size
• font-style
• font-variant
• font-weight
• font
• letter-spacing
• line-height
• list-style-image
• list-style-position
• list-style-type
• list-style
• orphans
• quotes
• text-align
• text-indent
• text-transform
• visibility
• white-space
• widows
• word-spacing

How inheritance works

Every HTML element has every CSS property defined by default with an initial value. An initial value is a property that's not inherited and shows up as a default if the cascade fails to calculate a value for that element.

Properties that can be inherited cascade downwards, and child elements will get a computed value which represents its parent's value. This means that if a parent has font-weight set to bold all child elements will be bold, unless their font-weight is set to a different value, or the user agent stylesheet has a value for font-weight for that element.

How to explicitly inherit and control inheritance

Inheritance can affect elements in unexpected ways so CSS has tools to help with that.

The inherit keyword

You can make any property inherit its parent's computed value with the inherit keyword. A useful way to use this keyword is to create exceptions.

strong {
  font-weight: 900;
}

This CSS snippet sets all <strong> elements to have a font-weight of 900, instead of the default bold value, which would be the equivalent of font-weight: 700.

.my-component {
  font-weight: 500;
}

The .my-component class sets font-weight to 500 instead. To make the <strong> elements inside .my-component also font-weight: 500 add:

.my-component strong {
  font-weight: inherit;
}

Now, the <strong> elements inside .my-component will have a font-weight of 500.

You could explicitly set this value, but if you use inherit and the CSS of .my-component changes in the future, you can guarantee that your <strong> will automatically stay up to date with it.

The initial keyword

Inheritance can cause problems with your elements and initial provides you with a powerful reset option.

You learned earlier that every property has a default value in CSS. The initial keyword sets a property back to that initial, default value.

aside strong {
  font-weight: initial;
}

This snippet will remove the bold weight from all <strong> elements inside an <aside> element and instead, make them normal weight, which is the initial value.

The unset keyword

The unset property behaves differently if a property is inheritable or not. If a property is inheritable, the unset keyword will be the same as inherit. If the property is not inheritable, the unset keyword is equal to initial.

Remembering which CSS properties are inheritable can be hard, unset can be helpful in that context. For example, color is inheritable, but margin isn't, so you can write this:

/* Global color styles for paragraph in authored CSS */
p {
  margin-top: 2em;
  color: goldenrod;
}

/* The p needs to be reset in asides, so you can use unset */
aside p {
  margin: unset;
  color: unset;
}

Now, the margin is removed and color reverts back to being the inherited computed value.

You can use the unset value with the all property, too. Going back to the above example, what happens if the global p styles get an additional few properties? Only the rule that was set for margin and color will apply.

/* Global color styles for paragraph in authored CSS */
p {
	margin-top: 2em;
	color: goldenrod;
	padding: 2em;
	border: 1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
	margin: unset;
	color: unset;
}

If you change the aside p rule to all: unset instead, it doesn't matter what global styles are applied to p in the future, they will always be unset.

aside p {
	margin: unset;
	color: unset;
	all: unset;
}

{% Assessment 'conclusion' %}

Resources

• MDN reference on computed values
• An article on how inheritance can be useful in modular front-ends

Layout

Imagine you're working as a developer, and a designer colleague hands you a design for a brand new website. The design has all sorts of interesting layouts and compositions: two-dimensional layouts that are considerate of viewport width and height, as well as layouts that need to be fluid and flexible. How do you decide the best way to style these with CSS?

CSS provides us with various ways to solve layout problems, on a horizontal axis, vertical axis, or even both. Choosing the right layout method for a context can be hard, and often you may need more than one layout method to solve your problem. To help with this, in the following modules, you'll learn about the unique features of each CSS layout mechanism to inform those decisions.

Layout: a brief history

In the early days of the web, designs more complex than a simple document were laid out with <table> elements. Separating HTML from visual styles was made easier when CSS was widely adopted by browsers in the late '90s. CSS opened the door to developers being able to completely change the look and feel of a website without ever touching HTML. This new capability inspired projects such as The CSS Zen Garden, which was created to demonstrate the power of CSS to encourage more developers to learn it.

CSS has evolved as our needs for web design and browser technology have evolved. You can read how CSS layout and our approach to layout has evolved over time in this article by Rachel Andrew.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/vDDoFFoPVgJEuEaqcP4H.svg", alt="A timeline showing how CSS has evolved over the years, starting in 1996 up to 2021", width="760", height="270" %}

Layout: the present and future

Modern CSS has exceptionally powerful layout tooling. We have dedicated systems for layout and we're going to have a high-level look at what we have at our disposal, before digging into more detail of Flexbox and Grid in the next modules.

Understanding the display property

The display property does two things. The first thing it does is determine if the box it is applied to acts as inline or block.

.my-element {
  display: inline;
}

Inline elements behave like words in a sentence. They sit next to each other in the inline direction. Elements such as <span> and <strong>, which are typically used to style pieces of text within containing elements like a <p> (paragraph), are inline by default. They also preserve surrounding whitespace.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/GezxDZXkJgkMevkKg39M.png", alt="A diagram showing all the different sizes of a box and where each sizing section starts and ends", width="800", height="559" %}

You can't set an explicit width and height on inline elements. Any block level margin and padding will be ignored by the surrounding elements.

.my-element {
	display: block;
}

Block elements don't sit alongside each other. They create a new line for themselves. Unless changed by other CSS code, a block element will expand to the size of the inline dimension, therefore spanning the full width in a horizontal writing mode. The margin on all sides of a block element will be respected.

.my-element {
	display: flex;
}

The display property also determines how an element's children should behave. For example, setting the display property to display: flex makes the box a block-level box, and also converts its children to flex items. This enables the flex properties that control alignment, ordering and flow.

Flexbox and Grid

There are two main layout mechanisms that create layout rules for multiple elements, flexbox and grid. They share similarities, but are designed to solve different layout problems.

{% Aside %} We will be going into much more detail for both of these in future modules, but here is a high-level overview of what both are and what they are useful for. {% endAside %}

Flexbox

.my-element {
	display: flex;
}

Flexbox is a layout mechanism for one-dimensional layouts. Layout across a single axis, either horizontally or vertically. By default, flexbox will align the element's children next to each other, in the inline direction, and stretch them in the block direction, so they're all the same height.

Items will stay on the same axis and not wrap when they run out of space. Instead they will try to squash onto the same line as each other. This behaviour can be changed using the align-items, justify-content and flex-wrap properties.

Flexbox also converts the child elements to be flex items, which means you can write rules on how they behave inside a flex container. You can change alignment, order and justification on an individual item. You can also change how it shrinks or grows using the flex property.

.my-element div {
 	flex: 1 0 auto;
}

The flex property is a shorthand for flex-grow, flex-shrink and flex-basis. You can expand the above example like this:

.my-element div {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

Developers provide these low-level rules to hint a browser how the layout should behave when it is challenged by content and viewport dimensions. This makes it a very useful mechanism for responsive web design.

Grid

.my-element {
	display: grid;
}

Grid is similar in a lot of ways to flexbox, but it is designed to control multi-axis layouts instead of single-axis layouts (vertical or horizontal space).

Grid enables you to write layout rules on an element that has display: grid, and introduces a few new primitives for layout styling, such as the repeat() and minmax() functions. One useful grid unit is the fr unit—which is a fraction of remaining space—you can build traditional 12 column grids, with a gap between each item, with 3 CSS properties:

.my-element {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

This example above shows a single axis layout. Where flexbox mostly treats items as a group, grid gives you precise control over their placement in two dimensions. We could define that the first item in this grid takes up 2 rows and 3 columns:

.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

The grid-row and grid-column properties instruct the first element in the grid to span to the start of the fourth column, from the first column, then span to the third row, from the first row.

Flow layout

If not using grid or flexbox, your elements display in normal flow. There are a number of layout methods that you can use to adjust the behavior and position of items when in normal flow.

Inline block

Remember how surrounding elements don't respect block margin and padding on an inline element? With inline-block you can cause that to happen.

p span {
	display: inline-block;
}

Using inline-block gives you a box that has some of the characteristics of a block-level element, but still flows inline with the text.

p span {
	margin-top: 0.5rem;
}

Floats

If you have an image that sits within a paragraph of text, wouldn't it be handy for that text to wrap around that image like you might see in a newspaper? You can do this with floats.

img {
	float: left;
	margin-right: 1em;
}

The float property instructs an element to "float" to the direction specified. The image in this example is instructed to float left, which then allows sibling elements to "wrap" around it. You can instruct an element to float left, right or inherit.

{% Aside 'warning' %} When you use float, keep in mind that any elements following the floated element may have their layout adjusted. To prevent this, you can clear the float, either by using clear: both on an element that follows your floated element or with display: flow-root on the parent of your floated elements.

Find out more in the article The end of the clearfix hack. {% endAside %}

Multicolumn layout

If you have a really long list of elements, such as a list of all of the countries of the world, it can result in a lot of scrolling and time wasted for a user. It can also create excess whitespace on the page. With CSS multicolumn, you can split this into multiple columns to help with both of these issues.

<h1>All countries</h1>
<ul class="countries">
  <li>Argentina</li>
  <li>Aland Islands</li>
  <li>Albania</li>
  <li>Algeria</li>
  <li>American Samoa</li>
  <li>Andorra</li>
  …
</ul>

.countries {
	column-count: 2;
	column-gap: 1em;
}

This automatically splits that long list into two columns and adds a gap between the two columns.

.countries {
	width: 100%;
	column-width: 260px;
	column-gap: 1em;
}

Instead of setting the number of columns that the content is split into, you can also define a minimum desired width, using column-width. As more space is made available in the viewport, more columns will automatically be created and as space is reduced, columns will also reduce. This is very useful in responsive web design contexts.

Positioning

Last on this overview of layout mechanisms is positioning. The position property changes how an element behaves in the normal flow of the document, and how it relates to other elements. The available options are relative, absolute, fixed and sticky with the default value being static.

.my-element {
  position: relative;
  top: 10px;
}

This element is nudged 10px down based on its current position in the document, as it is positioned relative to itself. Adding position: relative to an element also makes it the containing block of any child elements with position: absolute. This means that its child will now be repositioned to this particular element, instead of the topmost relative parent, when it has an absolute position applied to it.

.my-element {
  position: relative;
  width: 100px;
  height: 100px;
}

.another-element {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50px;
	height: 50px;
}

When you set position to absolute, it breaks the element out of the current document flow. This means two things:

1. You can position this element wherever you like, using top, right, bottom and left in its nearest relative parent.
2. All of the content surrounding an absolute element reflows to fill the remaining space left by that element.

An element with a position value of fixed behaves in a similar way to absolute, with its parent being the root <html> element. Fixed position elements stay anchored from the top left based on the top, right, bottom and left values that you set.

You can achieve the anchored, fixed aspects of fixed and the more predictable document flow-honoring aspects of relative by using sticky. With this value, as the viewport scrolls past the element, it stays anchored to the top, right, bottom and left values that you set.

Wrap-up

There's a lot of choice and flexibility with CSS layout. To dive further into the power of CSS Flexbox and Grid, continue into the next few modules.

{% Assessment 'layout' %}

Lists

Imagine you have a bunch of items you plan to buy during your next grocery trip. One common way to represent this visually is a list—but how can you add styling to your grocery list?

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

Creating a List

The preceding list started with a semantic element, or <ul>, with grocery list items (<li> elements) as children. If you inspect each <li> element you can see that they all have display: list-item, which is why the browser renders a ::marker by default.

li {
  display: list-item;
}

There are two other types of lists.

Ordered lists can be created with <ol>, in which case the list-item will display a number as the ::marker.

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

And description lists are created with <dl>, however this list type does not use the <li> list item element.

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

List styles

{% BrowserCompat 'css.properties.list-style-position' %}

Now that you know how to make a list, you can style them. The first CSS properties to discover are those that are applied to the entire list.

There are three list-style properties you can use to style your example: list-style-position, list-style-image, and list-style-type.

list-style-position

list-style-position allows you to move your bullet point to either inside or outside the list-item's contents. The default outside means the bullet point is not included in the list items contents while inside moves the first element among the list item's contents.

{% Img src="image/dQwiPAoChjTYzXYCNg6U6Tsnr3x1/qVlpVCrwKwbGjEJdmqh0.jpg", alt="A list with both outside and inside ::marker which shows that outside (default value) is not in the list-item and is inside the list-item content box.", width="800", height="270" %}

list-style-image

list-style-image allows you to replace your list's bullet points with images. This enables you to set an image such as an url or none to make your bullets an image, svg or gif even. You can also use any media type or even a data URI.

Let's look at how we can add an image of each of our grocery items as the list-style-image:

{% Aside %} This property is a bit limited in controlling the position, size, etc. of the bullets, so we recommend using the ::marker property for a more customizable approach. {% endAside %}

list-style-type

The final option is to style the list-style-type which changes the bullet points to known style keywords, custom strings, emojis and more. You can view all of the possible list style types here.

list-style shorthand

Now that we have all of these individual properties, we can use the list-style shorthand to set all of our list styles in one line:

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

list-style allows you to declare combinations of one, two, or three of the list-style properties in any order. If list-style-type and list-style-image are both set, then list-style-type is used as a fallback if the image is unavailable.

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

This is the most commonly used property of the list styles covered in this section. One common application is list-style: none to hide default styles. Default styles come from the browser, and you often see reset stylesheets removing list styles like padding and margins. You can also use this shorthand to set styles, like list-style: square inside;

So far, the examples have focused on styling an entire list and list items, but what about a more granular approach?

::marker pseudo-element

The list-item marker element is the bullet, hyphen, or roman numeral that helps indicate each item in your list.

{% Img src="image/dQwiPAoChjTYzXYCNg6U6Tsnr3x1/pOWTl4BYyJI7qgbMVeYu.jpg", alt="A list with three items which shows that each of the bullets are ::marker pseudo-elements.", width="800", height="395" %}

If you inspect the list in DevTools, you can see a ::marker element for each of the list items, despite not declaring any in HTML. If you inspect the ::marker further, you'll see the browser default styling for it.

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

When you declare a list, each item is given a marker, despite there being no bullet point or roman numeral in your HTML. This is a pseudo-element because the browser generates it for you, and provides a limited styling API to target it. Learn more about the anatomy of the CSS bullet. ::marker currently has limited support in Safari.

Marker box

In the CSS layout model, list item markers are represented by a marker box associated with each list item. The marker box is the container which typically contains the bullet or number.

To style the marker box, you can use the ::marker selector. This allows you to select just the marker instead of styling based on the entire list.

{% Aside %} Note: ::marker elements precede any pseudo-elements that you may have inserted using CSS ::before. {% endAside %}

Marker styles

Now that you have selected the marker, let's look at the styling properties available to this selector. You can learn more about Custom bullets with CSS ::marker on web.dev.

There are quite a few allowed CSS ::marker Properties:

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

{% Aside %} In ordered lists, the bullets default to numbers. The ::marker content value is a use case for counters to create custom numbering. {% endAside %}

Display type

All of our list-style and ::marker properties know to style <li> elements because they have a default display value of list-item. You can also make things that aren't an <li> into a list item.

You do this by adding the property display: list-item. One example of using display: list-item is if you want a hanging bullet on a heading, so that you can change it to something else with ::marker. The following example shows a heading using display: list-item for styling purposes, with a list using correct list markup below.

While you can turn anything into a list-item view with display, you should not use this instead of using correct list markup, if the content you are styling really is a list. Changing the visual appearance of an item to a list item does not change how accessibility services read and recognize the item, so it will not be read as a list item to screen readers or switch devices. You should always use semantic markup and create lists with <li> whenever possible.

{% Assessment 'lists' %}

Resources

• MDN Guide on Styling Lists
• Custom bullets with CSS ::marker
• Smashing Magazine: CSS Lists, Markers and Counters
• MDN Using CSS Counters
• CSS Lists and Counters Module Level 3
• CSS-Tricks: Counting With CSS Counters and CSS Grid

Logical Properties

A really common user interface pattern is a text label with a supporting inline icon.

The icon sits to the left of the text with a small gap between the two, provided by margin-right on the icon. There's a problem though, because this will only work when the text direction is left to right. If the text direction changed to right-to-left—which is how languages like Arabic read—the icon will sit up against the text.

How do you account for this in CSS? Logical properties allow you to resolve these situations. Among many other benefits, they provide free, automatic support for internationalization. They help you build a more resilient, inclusive front-end.

Terminology

The physical properties of top, right, bottom, and left refer to the physical dimensions of the viewport. You can think of these like a compass rose on a map. Logical properties, on the other hand, refer to the edges of a box as they relate to the flow of content. Therefore, they can change if the text direction or writing mode changes. This is a big shift from directional styles, and it gives us a lot more flexibility when styling our interfaces.

Block flow

Block flow is the direction in which content blocks are placed. For example, if there are two paragraphs, the block flow is where the second paragraph will go. In an English document, the block flow is top-to-bottom. Think of this in the context of paragraphs of text following each other, top-to-bottom.

Inline flow

The inline flow is how text flows in a sentence. In an English document the inline flow is left to right. If you were to change the document language of your webpage to Arabic (<html lang="ar">), then the inline flow would be right-to-left.

Text flows in the direction determined by the document's writing mode. You can change the direction that text is laid out with the writing-mode property. This can be applied to the entire document, or to individual elements.

Flow relative

Historically in CSS, we have only been able to apply properties like margin relative to the direction of their sides. For example, margin-top is applied to the physical top of the element. With logical properties, margin-top becomes margin-block-start. This means that regardless of language and text direction, the block flow has appropriate margin rules.

Sizing

To prevent an element exceeding a certain width or height, write a rule like this:

.my-element {
  max-width: 150px;
  max-height: 100px;
}

The flow-relative equivalents are max-inline-size and max-block-size. You can also use min-block-size and min-inline-size instead of min-height and min-width.

With logical properties, that max width and height rule would look like this:

.my-element {
  max-inline-size: 150px;
  max-block-size: 100px;
}

Start and end

Instead of using directions such as top, right, bottom and left, use start and end. This gives you block-start, inline-end, block-end, and inline-start. These allow you to apply CSS properties that respond to writing mode changes.

For example, to align text to the right, you could use this CSS:

p {
  text-align: right;
}

If your aim is not to align to the physical right, but rather to the start of the reading direction, this isn't helpful. With logical values, there are more helpful start and end values which map to the text direction. The text alignment rule now looks like this:

p {
  text-align: end;
}

Spacing and positioning

Logical properties for margin, padding and inset make positioning elements, and determining how these elements interact with each other across writing modes easier and more efficient. The margin and padding related properties are still direct mappings to directions, but the key difference is that when a writing mode changes, they change with it.

.my-element {
  padding-top: 2em;
  padding-bottom: 2em;
  margin-left: 2em;
  position: relative;
  top: 0.2em;
}

This adds some vertical inside space with padding and pushes it out from the left with margin. The top property also shifts it downwards. With logical property equivalents, it would instead look like this:

.my-element {
  padding-block-start: 2em;
  padding-block-end: 2em;
  margin-inline-start: 2em;
  position: relative;
  inset-block-start: 0.2em;
}

This adds some inline inside space with padding and pushes it out from the inline-start with margin. The inset-block property moves it inwards from the block-start.

The inset-block property isn't the only shorthand option with logical properties. This rule can be further condensed, using shorthand versions of the margin and padding properties.

.my-element {
  padding-block: 2em;
  margin-inline: 2em 0;
  position: relative;
  inset-block: 0.2em 0;
}

Borders

Adding border and border-radius can also be done with logical properties. To add a border on the bottom and right, with a right-hand radius, you might write a rule like this:

.my-element {
  border-bottom: 1px solid red;
  border-right: 1px solid red;
  border-bottom-right-radius: 1em;
}

Or, you could use logical properties like this:

.my-element {
  border-block-end: 1px solid red;
  border-inline-end: 1px solid red;
  border-end-end-radius: 1em;
}

The end-end in border-end-end-radius is the block end and inline end.

Units

Logical properties bring two new units: vi and vb. A vi unit is 1% of the viewport size in the inline direction. The non-logical property equivalent is vw. The vb unit is 1% of the viewport in the block direction. The non-logical property equivalent is vh.

These units will always map to the reading direction. For example, if you want an element to take up 80% of the available inline space of a viewport, using the vi unit will automatically switch that size to be top to bottom if the writing mode is vertical.

Using logical properties pragmatically

Logical properties and writing modes are not just for internationalization. You can use them to produce a more versatile user interface.

If you have a chart that has labels on the X axis and Y axis, you might want the text on the Y label to read vertically.

Because the Y axis label in the demo has a writing-mode of vertical-rl, you can use the same margin values on both labels. The margin-block-start value applies to both labels because the block start is on the right for the Y axis and on the top for the X axis. The block-start sides have a red border so you can see them.

Solving the icon issue

Now that we've covered logical properties, this knowledge can be applied to the design problem we started with.

p {
  display: inline-flex;
  align-items: center;
}

p svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
  flex: none;
}

The margin has been applied to the right of the icon element. In order for the spacing between the icon and the text to support all reading direction, the margin-inline-end property needs to be used instead.

p {
  display: inline-flex;
  align-items: center;
}

p svg {
  width: 1.2em;
  height: 1.2em;
  margin-inline-end: 0.5em;
  flex: none;
}

Now, regardless of reading direction, the icon will position itself and space itself appropriately.

{% Assessment 'logical-props' %}

Overflow

When content extends beyond its parent, there are many options for how you can handle it. You can scroll to add additional space, clip the overflowing edges, indicate the cut-off with an ellipsis, and so much more. Overflow is especially important to consider when developing for phone applications and multiple screen sizes.

There are two different clipping options in CSS; text-overflow will help with individual lines of text, and the overflow properties will help control overflow in the box model.

Single line overflow with text-overflow

Use the text-overflow property on any element that contains text node(s), for example a paragraph, <p>. It specifies how the text appears when it doesn’t fit in the available space of the element. All viewable HTML text on a page is in text nodes. To use text-overflow you need a single unwrapped line of text, so you must also set overflow to hidden and have a white-space value that prevents wrapping.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Using overflow properties

Overflow properties are set on an element to control what happens when its children need more space than it has available. This can be intentional, like in an interactive map like Google Maps, where a user pans around a large image clipped to a specific size. It can also be unintentional like in a chat application where the user types a lengthy message that doesn’t fit in the text bubble.

You can think of the overflow in two parts. The parent element has a firmly constrained space that will not change. You can think of this as a window. The child elements are content that want more space from the parent. You can think of this as what you are looking through the window at. Managing overflow will help guide how the window frames this content.

Scrolling on the vertical and horizontal axis

The overflow-y property controls physical overflow along the vertical axis of the device viewport, therefore scrolling up and down.

The overflow-x property controls overflow along the horizontal axis of the device viewport, therefore scrolling left and right.

Logical properties for scroll direction

{% BrowserCompat 'css.properties.overflow-inline' %}

The overflow-inline and overflow-block properties set the overflow based on the document direction and writing mode.

The overflow shorthand

The overflow shorthand sets both overflow-x and overflow-y styles in one line:

overflow: hidden scroll;

If two keywords are specified, the first applies to overflow-x and the second to overflow-y. Otherwise, both overflow-x and overflow-y use the same value.

Values

Let's take a closer look at the values and keywords available for the overflow properties.

overflow: visible (default) : Without setting the property, overflow: visible is the default value for the web. This ensures that content is never unintentionally hidden and follows the core tenets of "never hide content" or "safe layouts of precise layouts".

overflow: hidden : With overflow: hidden content is clipped in the specified direction, and no scrollbars are provided to show it.

overflow: scroll : overflow: scroll enables scrollbars to allow users to scroll through content. Even if content isn't currently overflowing, scrollbars will be present. This is a great way to reduce future layout shift if a container may be scrollable in the future based, for example, on resize, and visually prepare the user for scrollable areas.

overflow: clip : Like overflow: hidden, the content with overflow: clip is clipped to the element's padding box. The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.

overflow: auto : Finally, the value most commonly used, overflow: auto. This respects the user's preferences and shows scrollbars if needed, but hides them by default, and gives responsibility for scrolling to the user and browser.

{% Aside %} Using the overflow property with a value other than visible creates a block formatting context. {% endAside %}

Scrolling and overflow

Many of these overflow behaviors introduce a scrollbar, but there’s a few specific scroll behaviors and properties that can help you control scrolling on your overflow container.

Scrolling and accessibility

It's important to make sure that the scrollable area can accept focus so that a keyboard user can tab to the box, then use the arrow keys to scroll.

To allow a scrolling box to accept focus add tabindex="0", a name with the aria-labelledby attribute, and an appropriate role attribute. For example:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

CSS can then be used to indicate that the box has focus, using the outline property to give a visual clue that it will now be scrollable.

In Using CSS to Enforce Accessibility Adrian Roselli demonstrates how CSS can help prevent accessibility regressions. For example, to only turn on scrolling and add the focus indicator if the correct attributes are used. The following rules will only make the box scrollable if it has a tabindex, aria-labelledby, and role attribute.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

Scrollbar positioning within the box model

Scroll bars take up space within the padding box and can compete for space if inline and not overlayed. The box model module expands more on this potential source of layout shift.

root-scroller vs implicit-scroller

You may notice that some scrollers have a pull-to-refresh behavior and other special behaviors, especially when developing for mobile and hybrid applications. This scroll behavior happens on the root scroller. There is only ever one root scroller on a page. By default, the documentElement is the page's root scroller, however, by changing which element is the root scroller, the special behaviors can be applied to scrollers other than the documentElement, we call this new scroller the implicit root scroller.

To create a root scroller, you can use something called scroller promotion by positioning a container as fixed, ensuring it covers the entire viewport and is z-index on top with a scroller. Experience a root scroller vs a nested implicit scroller here.

scroll-behavior

{% BrowserCompat 'css.properties.scroll-behavior' %}

scroll-behavior allows you to opt into browser-controlled scrolling to elements. This allows you to specify how in-page navigation like .scrollTo() or links are handled.

This is especially useful when used with prefers-reduced-motion to specify scroll behavior based on user preference.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

{% BrowserCompat 'css.properties.overscroll-behavior' %}

If you’ve ever reached the end of a modal overlay, then continued scrolling and had the page behind the overlay move, this is the scroll chaining, or bubbling up to the parent scroll container. The overscroll-behavior property allows you to prevent overflow scrolling leaking into a parent container (called scroll chaining).

{% Assessment 'overflow' %}

Resources

Overflow And Data Loss In CSS from Smashing Magazine

Pseudo-classes

Say you've got an email sign up form, and you want the email form field to have a red border if it contains an invalid email address. How do you do that? You can use an :invalid CSS pseudo-class, which is one of many browser-provided pseudo-classes.

A pseudo-class lets you apply styles based on state changes and external factors. This means that your design can react to user input such as an invalid email address. These are covered in the selectors module, and this module will take you through them in more detail.

Unlike pseudo-elements, which you can learn more about in the previous module, pseudo-classes hook onto specific states that an element might be in, rather than generally style parts of that element.

Interactive states

The following pseudo-classes apply due to an interaction a user has with your page.

:hover

{% BrowserCompat 'css.selectors.hover' %}

If a user has a pointing device like a mouse or trackpad, and they place it over an element, you can hook on to that state with :hover to apply styles. This is a useful way to hint that an element can be interacted with.

:active

{% BrowserCompat 'css.selectors.active' %}

This state is triggered when an element is actively being interacted with— such as a click—before click is released. If a pointing device like a mouse is used, this state is when the click starts and hasn't yet been released.

:focus, :focus-within, and :focus-visible

{% BrowserCompat 'css.selectors.focus' %}

If an element can receive focus—like a <button>— you can react to that state with the :focus pseudo-class.

You can also react if a child element of your element receives focus with :focus-within.

Focusable elements, like buttons, will show a focus ring when they are in focus—even when clicked. In this sort of situation, a developer will apply the following CSS:

button:focus {
	outline: none;
}

This CSS removes the default browser focus ring when an element receives focus, which presents an accessibility issue for users who navigate a web page with a keyboard. If there is no focus style, they won't be able to keep track of where focus currently is when using the tab key. With :focus-visible you can present a focus style when an element receives focus via the keyboard, while also using the outline: none rule to prevent it when a pointer device interacts with it.

button:focus {
	outline: none;
}

button:focus-visible {
	outline: 1px solid black;
}

:target

{% BrowserCompat 'css.selectors.target' %}

The :target pseudo-class selects an element that has an id matching a URL fragment. Say you have the following HTML:

<article id="content">
	…
</article>

You can attach styles to that element when the url contains #content.

#content:target {
	background: yellow;
}

This is useful for highlighting areas that might have been specifically linked to, such as the main content on a website, via a skip link.

Historic states

:link

{% BrowserCompat 'css.selectors.link' %}

The :link pseudo-class can be applied to any <a> element that has a href value that hasn't been visited yet.

:visited

You can style a link that's already been visited by the user using the :visited pseudo-class. This is the opposite state to :link but you have fewer CSS properties to use for security reasons. You can only style color, background-color, border-color, outline-color and the color of SVG fill and stroke.

Order matters

If you define a :visited style, it can be overridden by a link pseudo-class with at least equal specificity. Because of this, it's recommended that you use the LVHA rule for styling links with pseudo-classes in a particular order: :link, :visited, :hover, :active.

a:link {}
a:visited {}
a:hover {}
a:active {}

{% Aside %} For security reasons, you can only change styles defined by a :link or unvisited state with the :visited pseudo-class, so making sure you define changeable styles first is important. Sticking to the LVHA rule will help with that. {% endAside %}

Form states

The following pseudo-classes can select form elements, in the various states that these elements might be in during interaction with them.

:disabled and :enabled

{% BrowserCompat 'css.selectors.disabled' %}

If a form element, such as a <button> is disabled by the browser, you can hook on to that state with the :disabled pseudo-class. The :enabled pseudo-class is available for the opposite state, though form elements are also :enabled by default, therefore you might not find yourself reaching for this pseudo-class.

:checked and :indeterminate

{% BrowserCompat 'css.selectors.checked' %}

The :checked pseudo-class is available when a supporting form element, such as a checkbox or radio button is in a checked state.

The :checked state is a binary(true or false) state, but checkboxes do have an in-between state when they are neither checked or unchecked. This is known as the :indeterminate state.

An example of this state is when you have a "select all" control that checks all checkboxes in a group. If the user was to then uncheck one of these checkboxes, the root checkbox would no longer represent "all" being checked, so should be put into an indeterminate state.

The <progress> element also has an indeterminate state that can be styled. A common use case is to give it a striped appearance to indicate it's unknown how much more is needed.

:placeholder-shown

{% BrowserCompat 'css.selectors.placeholder-shown' %}

If a form field has a placeholder attribute and no value, the :placeholder-shown pseudo-class can be used to attach styles to that state. As soon as there is content in the field, whether it has a placeholder or not, this state will no longer apply.

Validation states

{% BrowserCompat 'css.selectors.valid' %}

You can respond to HTML form validation with pseudo-classes such as :valid, :invalid and :in-range. The :valid and :invalid pseudo-classes are useful for contexts such as an email field that has a pattern that needs to be matched, for it to be a valid field. This valid value state can be shown to the user, helping them understand they can safely move to the next field.

The :in-range pseudo-class is available if an input has a min and max, such as a numeric input and the value is within those bounds.

With HTML forms, you can determine that a field is required with the required attribute. The :required pseudo-class will be available for required fields. Fields that are not required can be selected with the :optional pseudo-class.

{% Aside %} It's not a good idea to rely solely on color to signify state changes— especially red and green—because colorblind and low-vision users can struggle to see a state change, or even miss it completely. A good idea is to use color to support state changes, along with text changes and icon changes to visually signify change {% endAside %}

Selecting elements by their index, order and occurrence

There is a group of pseudo-classes that select items based on where they are in the document.

:first-child and :last-child

{% BrowserCompat 'css.selectors.first-child' %}

If you want to find the first or last item, you can use :first-child and :last-child. These pseudo-classes will return either the first or last element in a group of sibling elements.

:only-child

{% BrowserCompat 'css.selectors.only-child' %}

You can also select elements that have no siblings, with the :only-child pseudo-class.

:first-of-type and :last-of-type

{% BrowserCompat 'css.selectors.first-of-type' %}

You can select the :first-of-type and :last-of-type which at first, look like they do the same thing as :first-child and :last-child, but consider this HTML:

<div class="my-parent">
	<p>A paragraph</p>
	<div>A div</div>
	<div>Another div</div>
</div>

And this CSS:

.my-parent div:first-child {
	color: red;
}

No elements would be colored red because the first child is a paragraph and not a div. The :first-of-type pseudo-class is useful in this context.

.my-parent div:first-of-type {
	color: red;
}

Even though the first <div> is the second child, it is still the first of type inside the .my-parent element, so with this rule, it will be colored red.

:nth-child and :nth-of-type

{% BrowserCompat 'css.selectors.nth-child' %}

You're not limited to first and last children and types either. The :nth-child and :nth-of-type pseudo-classes allow you to specify an element that is at a certain index. The indexing in CSS selectors starts at 1.

You can pass more than an index into these pseudo-classes too. If you wanted to select all even elements, you can use :nth-child(even).

You can also create more complex selectors that find items at regularly spaced intervals, using the An+B microsyntax.

li:nth-child(3n+3) {
	background: yellow;
}

This selector selects every third item, starting at item 3. The n in this expression is the index, which starts at zero the 3 (3n) is how much you multiply that index by.

Let's say you have 7 <li> items. The first item that is selected is 3 because 3n+3 translates to (3 * 0) + 3. The next iteration would pick item 6 because n has now incremented to 1, so (3 * 1) + 3). This expression works for both :nth-child and :nth-of-type.

You can play around with this sort of selector on this nth-child tester or this quantity selector tool.

:only-of-type

{% BrowserCompat 'css.selectors.only-of-type' %}

Lastly, you can find the only element of a certain type in a group of siblings with :only-of-type. This is useful if you want to select lists with only one item, or if you want to find the only bold element in a paragraph.

Finding empty elements

It can sometimes be useful to identify completely empty elements, and there is a pseudo-class for that too.

:empty

{% BrowserCompat 'css.selectors.empty' %}

If an element has no children, the :empty pseudo-class applies to them. Children aren't just HTML elements or text nodes though: they can also be whitespace, which can be confusing when you're debugging the following HTML and wondering why it isn't working with :empty:

<div>
</div>

The reason is that there's some whitespace between the opening and closing <div>, so empty won't work.

The :empty pseudo-class can be useful if you have little control over the HTML and want to hide empty elements, such as a WYSIWYG content editor. Here, an editor has added a stray, empty paragraph.

<article class="post">
 <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
 <p></p>
 <p>Curabitur blandit tempus porttitor.</p>
</article>

With :empty, you can find that and hide it.

.post :empty {
	display: none;
}

Finding and excluding multiple elements

Some pseudo-classes help you to write more compact CSS.

:is()

{% BrowserCompat 'css.selectors.is' %}

If you want to find all of the h2, li and img child elements in a .post element, you might think to write a selector list like this:

.post h2,
.post li,
.post img {
	…
}

With the :is() pseudo-class, you can write a more compact version:

.post :is(h2, li, img) {
	…
}

The :is pseudo-class is not only more compact than a selector list but it is also more forgiving. In most cases, if there's an error or unsupported selector in a selector list, the entire selector list will no longer work. If there's an error in the passed selectors in an :is pseudo-class, it will ignore the invalid selector, but use those which are valid.

:not()

{% BrowserCompat 'css.selectors.not' %}

You can also exclude items with the :not() pseudo-class. For example, you can use it to style all links that don't have a class attribute.

a:not([class]) {
	color: blue;
}

A :not pseudo-class can also help you to improve accessibility. For example, an <img> must have an alt, even if its an empty value, so you could write a CSS rule that adds a thick red outline to invalid images:

img:not([alt]) {
	outline: 10px red;
}

{% Assessment 'pseudo-classes' %}

Pseudo-elements

If you've got an article of content and you want the first letter to be a much bigger drop cap— how do you achieve that?

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/Qpo2f3eRInt5iM6qW2p2.svg", alt="A couple of paragraphs of text with a blue drop cap", width="800", height="318" %}

In CSS, you can use the ::first-letter pseudo-element to achieve this sort of design detail.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

A pseudo-element is like adding or targeting an extra element without having to add more HTML. This example solution, using ::first-letter, is one of many pseudo-elements. They have a range of roles, and in this lesson you're going to learn which pseudo-elements are available and how you can use them.

::before and ::after

Both the ::before and ::after pseudo-elements create a child element inside an element only if you define a content property.

.my-element::before {
	content: "";
}

.my-element::after {
	content: "";
}

The content can be any string —even an empty one— but be mindful that anything other than an empty string will likely be announced by a screen reader. You can add an image url, which will insert an image at its original dimensions, so you won't be able to resize it. You can also insert a counter.

{% Aside 'key-term' %} You can create a named counter and then increment it, based on its position in the document flow. There's all sorts of contexts where they can be really useful, such as automatically numbering an outline. {% endAside %}

Once a ::before or ::after element has been created, you can style it however you want with no limits. You can only insert a ::before or ::after element to an element that will accept child elements (elements with a document tree), so elements such as <img />, <video> and <input> won't work.

{% Aside 'gotchas' %} input[type="checkbox"] is an exception. It is allowed to have pseudo-element children. {% endAside %}

::first-letter

We met this pseudo-element at the start of the lesson. It is worth being aware that not all CSS properties can be used when targeting ::first-letter. The available properties are:

• color
• background properties (such as background-image)
• border properties (such as border-color)
• float
• font properties (such as font-size and font-weight)
• text properties (such as text-decoration and word-spacing)

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

{% Aside %} You can only use :first-letter on block containers. Therefore, it won't work if you try to add it to an element that has display: inline. {% endAside %}

::first-line

The ::first-line pseudo-element will let you style the first line of text only if the element with ::first-line applied has a display value of block, inline-block, list-item, table-caption or table-cell.

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

Like the ::first-letter pseudo-element, there's only a subset of CSS properties you can use:

• color
• background properties
• font properties
• text properties

::backdrop

If you have an element that is presented in full screen mode, such as a <dialog> or a <video>, you can style the backdrop—the space between the element and the rest of the page—with the ::backdrop pseudo-element:

video::backdrop {
  background-color: goldenrod;
}

The ::backdrop pseudo-element is supported in all major browsers apart from Safari.

::marker

The ::marker pseudo-element lets you style the bullet or number for a list item or the arrow of a <summary> element.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

Only a small subset of CSS properties are supported for ::marker:

• color
• content
• white-space
• font properties
• animation and transition properties

You can change the marker symbol, using the content property. You can use this to set a plus and minus symbol for the closed and empty states of a <summary> element, for example.

::selection

The ::selection pseudo-element allows you to style how selected text looks.

::selection {
  background: green;
  color: white;
}

This pseudo-element can be used to style all selected text as in the above demo. It can also be used in combination with other selectors for a more specific selection style.

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

As with other pseudo-elements, only a subset of CSS properties are allowed:

• color
• background-color but not background-image
• text properties

::placeholder

{% BrowserCompat 'css.selectors.placeholder' %}

You can add a helper hint to form elements, such as <input> with a placeholder attribute. The ::placeholder pseudo-element allows you to style that text.

input::placeholder {
  color: darkcyan;
}

The ::placeholder only supports a subset of CSS rules:

• color
• background properties
• font properties
• text properties

{% Aside %} A placeholder is not <label> and should not be used in place of a <label>. Form elements must be labelled or they will be inaccessible. {% endAside %}

::cue

{% BrowserCompat 'css.selectors.cue' %}

Last in this tour of pseudo-elements is the ::cue pseudo-element. This allows you to style the WebVTT cues, which are the captions of a <video> element.

You can also pass a selector into a ::cue, which allows you to style specific elements inside a caption.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

{% Assessment 'pseudo-elements' %}

Selectors

If you've got some text that you only want to be larger and red if it's the first paragraph of an article, how do you do that?

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

You use a CSS selector to find that specific element and apply a CSS rule, like this.

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

CSS provides you with a lot of options to select elements and apply rules to them, ranging from very simple to very complex, to help solve situations like this.

The parts of a CSS rule

To understand how selectors work and their role in CSS, it's important to know the parts of a CSS rule. A CSS rule is a block of code, containing one or more selectors and one or more declarations.

In this CSS rule, the selector is .my-css-rule which finds all elements with a class of my-css-rule on the page. There are three declarations within the curly brackets. A declaration is a property and value pair which applies styles to the elements matched by the selectors. A CSS rule can have as many declarations and selectors as you like.

Simple selectors

The most straightforward group of selectors target HTML elements plus classes, IDs, and other attributes which may be added to an HTML tag.

Universal selector

{% BrowserCompat 'css.selectors.universal' %}

A universal selector—also known as a wildcard—matches any element.

* {
  color: hotpink;
}

This rule causes every HTML element on the page to have hotpink text.

Type selector

{% BrowserCompat 'css.selectors.type' %}

A type selector matches a HTML element directly.

section {
  padding: 2em;
}

This rule causes every <section> element to have 2em of padding on all sides.

Class selector

{% BrowserCompat 'css.selectors.class' %}

A HTML element can have one or more items defined in their class attribute. The class selector matches any element that has that class applied to it.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

Any element that has the class applied to it will get colored red:

.my-class {
  color: red;
}

Notice how the . is only present in CSS and not the HTML. This is because the . character instructs the CSS language to match class attribute members. This is a common pattern in CSS, where a special character, or set of characters, is used to define selector types.

A HTML element that has a class of .my-class will still be matched to the above CSS rule, even if they have several other classes, like this:

<div class="my-class another-class some-other-class"></div>

This is because CSS looks for a class attribute that contains the defined class, rather than matching that class exactly.

{% Aside %} The value of a class attribute can be almost anything you want it to be. One thing that could trip you up, is that you can't start a class (or an ID) with a number, such as .1element. You can read more in the specification. {% endAside %}

ID selector

{% BrowserCompat 'css.selectors.id' %}

An HTML element with an id attribute should be the only element on a page with that ID value. You select elements with an ID selector like this:

#rad {
  border: 1px solid blue;
}

This CSS would apply a blue border to the HTML element that has an id of rad, like this:

<div id="rad"></div>

Similarly to the class selector ., use a # character to instruct CSS to look for an element that matches the id that follows it.

{% Aside %} If the browser encounters more than one instance of an id it will still apply any CSS rules that match its selector. However, any element that has an id attribute is supposed to have a unique value for it, so unless you're writing very specific CSS for a single element, avoid applying styles with the id selector as it means you can't re-use those styles elsewhere. {% endAside %}

Attribute selector

{% BrowserCompat 'css.selectors.attribute' %}

You can look for elements that have a certain HTML attribute, or have a certain value for an HTML attribute, using the attribute selector. Instruct CSS to look for attributes by wrapping the selector with square brackets ([ ]).

[data-type='primary'] {
  color: red;
}

This CSS looks for all elements that have an attribute of data-type with a value of primary, like this:

<div data-type="primary"></div>

Instead of looking for a specific value of data-type, you can also look for elements with the attribute present, regardless of its value.

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

Both of these <div> elements will have red text.

You can use case-sensitive attribute selectors by adding an s operator to your attribute selector.

[data-type='primary' s] {
  color: red;
}

This means that if a HTML element had a data-type of Primary, instead of primary, it would not get red text. You can do the opposite—case insensitivity—by using an i operator.

Along with case operators, you have access to operators that match portions of strings inside attribute values.

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}

Grouping selectors

A selector doesn't have to match only a single element. You can group multiple selectors by separating them with commas:

strong,
em,
.my-class,
[lang] {
  color: red;
}

This example extends the color change to both <strong> elements and <em> elements. It's also extended to a class named .my-class, and an element that has a lang attribute.

{% Assessment 'simple-selectors' %}

Pseudo-classes and pseudo-elements

CSS provides useful selector types that focus on specific platform state, like when an element is hovered, structures inside an element, or parts of an element.

Pseudo-classes

HTML elements find themselves in various states, either because they are interacted with, or one of their child elements is in a certain state.

For example, an HTML element could be hovered with the mouse pointer by a user or a child element could also be hovered by the user. For those situations, use the :hover pseudo-class.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

Find out more in the pseudo-classes module.

Pseudo-element

Pseudo-elements differ from pseudo-classes because instead of responding to the platform state, they act as if they are inserting a new element with CSS. Pseudo-elements are also syntactically different from pseudo-classes, because instead of using a single colon (:), we use a double colon (::).

{% Aside %} A double colon (::) is what distinguishes a pseudo-element from a pseudo-class, but because this distinction wasn't present in older versions of CSS specs, browsers support a single colon for the original pseudo-elements, such as :before and :after to help with backwards compatibility with older browsers, like IE8. {% endAside %}

.my-element::before {
  content: 'Prefix - ';
}

As in the above demo where you prefixed a link's label with the type of file it was, you can use the ::before pseudo-element to insert content at the start of an element, or the ::after pseudo-element to insert content at the end of an element.

Pseudo-elements aren't limited to inserting content, though. You can also use them to target specific parts of an element. For example, suppose you have a list. Use ::marker to style each bullet point (or number) in the list

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

You can also use ::selection to style the content that has been highlighted by a user.

::selection {
  background: black;
  color: white;
}

Learn more in the module on pseudo-elements.

{% Assessment 'pseudo-selectors' %}

Complex selectors

You have already seen a vast array of selectors, but sometimes, you will need more fine-grained control with your CSS. This is where complex selectors step in to help.

It's worth remembering at this point that although the following selectors give us more power, we can only cascade downwards, selecting child elements. We are not able to target upwards and select a parent element. We cover what the cascade is and how it works in a later lesson.

Combinators

A combinator is what sits between two selectors. For example, if the selector was p > strong, the combinator is the > character. The selectors which use these combinators help you select items based on their position in the document.

Descendant combinator

To understand descendant combinators, you need to first understand parent and child elements.

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

The parent element is the <p> which contains text. Inside that <p> element is a <strong> element, making its content bold. Because it is inside the <p>, it is a child element.

A descendant combinator allows us to target a child element. This uses a space ( ) to instruct the browser to look for child elements:

p strong {
  color: blue;
}

This snippet selects all <strong> elements that are child elements of <p> elements only, making them blue recursively.

This effect is better visualised in the above example, using the combinator selector, .top div. That CSS rule adds left padding to those <div> elements. Because the combinator is recursive, all <div> elements that are in .top will have that same padding applied to them.

Take a look at the HTML panel in this demo to see how the .top element has several <div> child elements which themselves, have <div> child elements.

Next sibling combinator

You can look for an element that immediately follows another element by using a + character in your selector.

To add space between stacked elements, use the next sibling combinator to add space only if an element is a next sibling of a child element of .top.

You could add margin to all child elements of .top, using the following selector:

.top * {
  margin-top: 1em;
}

The problem with this is that because you're selecting every child element of .top, this rule potentially creates extra, unnecessary space. The next sibling combinator, mixed with a universal selector enables you to not only control what elements get space, but also apply space to any element. This provides you with some long-term flexibility, regardless of what HTML elements appear in .top.

Subsequent- sibling combinator

A subsequent combinator is very similar to a next sibling selector. Instead of a + character however, use a ~ character. How this differs is that an element just has to follow another element with the same parent, rather than being the next element with the same parent.

This subsequent combinator provides a little less rigidity, which is useful in contexts like the above sample, where we change the color of a custom switch when its associated checkbox has the :checked state.

Child combinator

A child combinator (also known as direct descendant) allows you more control over the recursion that comes with combinator selectors. By using the > character, you limit the combinator selector to apply only to direct children.

Consider the previous, next sibling selector example. The space is added to each next sibling, but if one of those elements also has next sibling elements as children, it can result in undesirable, extra spacing.

To alleviate this problem, change the next sibling selector to incorporate a child combinator: > * + *. The rule will now only apply to direct children of .top.

Compound selectors

You can combine selectors to increase specificity and readability. For example, to target <a> elements, that also have a class of .my-class, write the following:

a.my-class {
  color: red;
}

This wouldn't apply a red color to all links and it would also only apply the red color to .my-class if it was on an <a> element. For more on this, see the specificity module.

{% Assessment 'complex-selectors' %}

Resources

• CSS selectors reference
• Interactive selectors game
• Pseudo-class and pseudo-elements reference
• A tool that translates CSS selectors into plain-english explainers

Shadows

Say you've been sent a design to build and in that design there's a picture of a t-shirt, cut out, with a drop shadow. The designer tells you that the product image is dynamic and can be updated via the content management system, so the drop shadow needs to be dynamic too. Instead of a t-shirt, the image could be a visor or shorts, or any other item. How do you do that with CSS?

CSS has the box-shadow and text-shadow properties, but the picture isn't text, so you can't use text-shadow. If you use box-shadow, the shadow is on the surrounding box, not around the t-shirt.

Luckily, there is another option: the drop-shadow() filter. This enables you to do exactly what the designer asked for. There are plenty of options when it comes to shadows in CSS, each designed for a different use case.

Box shadow

{% BrowserCompat 'css.properties.box-shadow' %}

The box-shadow property is for adding shadows to the box of an HTML element. It works on block elements and inline elements.

.my-element {
	box-shadow: 5px 5px 20px 5px #000;
}

The order of values for box-shadow are as follows:

1. Horizontal offset: a positive number pushes it out from the left and a negative number will push it out from the right.
2. Vertical offset: a positive number pushes it down from the top, and a negative number will push it up from the bottom.
3. Blur radius: a larger number produces a more blurred shadow, whereas a small number produces a sharper shadow.
4. Spread radius (optional): a larger number increases the size of the shadow and a smaller number decreases it, making it the same size as the blur radius if it's set to 0.
5. Color: Any valid color value. If this isn't defined, the computed text color will be used.

To make a box shadow an inner shadow, rather than the default outer shadow, add an inset keyword before the other properties.

/* Outer shadow */
.my-element {
	box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
	box-shadow: inset 5px 5px 20px 5px #000;
}

Multiple shadows

You can add as many shadows as you like with box-shadow. Add a comma separated collection of value sets to achieve this:

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

Properties affecting box-shadow

Adding a border-radius to your box will also affect the shape of the box shadow. This is because CSS is creating a shadow based on the shape of the box as if light is pointing at it.

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

If your box with box-shadow is in a container that has overflow: hidden, the shadow won't break out of that overflow either.

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

Text shadow

{% BrowserCompat 'css.properties.text-shadow' %}

The text-shadow property is very similar to the box-shadow property. It only works on text nodes.

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

The values for text-shadow are the same as box-shadow and in the same order. The only difference is that text-shadow has no spread value and no inset keyword.

When you add a box-shadow it is clipped to the shape of your box, but text-shadow has no clipping. This means that if your text is fully or semi transparent, the shadow is visible through it.

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

Multiple shadows

You can add as many shadows as you like with text-shadow, just as with box-shadow. Add a comma separated collection of value sets, and you can create some really cool text effects, such as 3D text.

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

Drop shadow

{% BrowserCompat 'css.properties.drop-shadow' %}

To achieve a drop shadow that follows any potential curves of an image, use the CSS drop-shadow filter. This shadow is applied to an alpha mask which makes it very useful for adding a shadow to a cutout image, as in the case in the intro of this module.

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

{% Aside 'key-term' %} We cover CSS filters in another module, but in short, filters allow you to apply multiple graphical effects to the pixels of an element. {% endAside %}

The drop-shadow filter has the same values as box-shadow but the inset keyword and spread value are not allowed. You can add as many shadows as you like, by adding multiple instances of drop-shadow values to the filter property. Each shadow will use the last shadow as a positioning reference point.

{% Assessment 'shadows' %}

Sizing Units

The web is a responsive medium, but sometimes you want to control its dimensions to improve the overall interface quality. A good example of this is limiting line lengths to improve readability. How would you do that in a flexible medium like the web?

For this case, you can use a ch unit, which is equal to the width of a "0" character in the rendered font at its computed size. This unit allows you to limit the width of text with a unit that's designed to size text, which in turn, allows predictable control regardless of the size of that text. The ch unit is one of a handful of units that are helpful for specific contexts like this example.

Numbers

Numbers are used to define opacity, line-height and even for color channel values in rgb. Numbers are unitless integers (1, 2, 3, 100) and decimals (.1, .2, .3).

Numbers have meaning depending on their context. For example, when defining line-height, a number is representative of a ratio if you define it without a supporting unit:

p {
  font-size: 24px;
  line-height: 1.5;
}

In this example, 1.5 is equal to 150% of the p element's computed pixel font size. This means that if the p has a font-size of 24px, the line height will be computed as 36px.

{% Aside %} It's a good idea to use a unitless value for line-height, rather than specifying a unit. As you learned in the inheritance module, font-size can be inherited. Defining a unitless line-height keeps the line-height relative to the font size. This provides a better experience than, say, line-height: 15px, which will not change and might look strange with certain font sizes. {% endAside %}

Numbers can also be used in the following places:

• When setting values for filters: filter: sepia(0.5) applies a 50% sepia filter to the element.
• When setting opacity: opacity: 0.5 applies a 50% opacity.
• In color channels: rgb(50, 50, 50), where the values 0-255 are acceptable to set a color value. See color lesson.
• To transform an element: transform: scale(1.2) scales the element by 120% of its initial size.

Percentages

When using a percentage in CSS you need to know how the percentage is calculated. For example,width is calculated as a percentage of the available width in the parent element.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

In the above example, the width of div p is 150px, assuming that the layout uses the default box-sizing: content-box.

If you set margin or padding as a percentage, they will be a portion of the parent element's width, regardless of direction.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

In the above snippet, both the margin-top and padding-left will compute to 150px.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

If you set a transform value as a percentage, it is based on the element with the transform set. In this example, the p has a translateX value of 10% and a width of 50%. First, calculate what the width will be: 150px because it is 50% of its parent's width. Then, take 10% of 150px, which is 15px.

{% Aside 'key-term' %} The transform property allows you alter an element's appearance and position by rotating, skewing, scaling and translating it. This can be done in a 2D and 3D space. {% endAside %}

Dimensions and lengths

If you attach a unit to a number, it becomes a dimension. For example, 1rem is a dimension. In this context, the unit that is attached to a number is referred to in specifications as a dimension token. Lengths are dimensions that refer to distance and they can either be absolute or relative.

Absolute lengths

All absolute lengths resolve against the same base, making them predictable wherever they're used in your CSS. For example, if you use cm to size your element and then print, it should be accurate if you compared it to a ruler.

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

If you printed this page, the div would print as a 10x5cm black rectangle. Keep in mind, CSS is used not only for digital content, but also to style print content. Absolute lengths can really come in handy when designing for print.

Relative lengths

A relative length is calculated against a base value, much like a percentage. The difference between these and percentages is that you can contextually size elements. This means that CSS has units such as ch that use the text size as a basis, and vw which is based on the width of the viewport (your browser window). Relative lengths are particularly useful on the web due to its responsive nature.

Font-size-relative units

CSS provides helpful units that are relative to the size of elements of rendered typography, such as the size of the text itself (em units) or width of the typefaces characters (ch units).

Viewport-relative units

You can use the dimensions of the viewport (browser window) as a relative basis. These units portion up the available viewport space.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

In this example, the div will be 10% of the viewport's width because 1vw is 1% of the viewport width. The p element has a max-width of 60ch which means it can't exceed the width of 60 "0" characters in the calculated font and size.

{% Aside 'objective' %}

By sizing text with relative units like em or rem, rather than an absolute unit, like px, the size of your text can respond to user preferences. This can include the system font size or parent element's font size, such as the <body>. The base size of the em is the element's parent and the base size of the rem is the base font size of the document.

If you don't define a font-size on your html element, this user-preferred system font size will be honoured if you use relative lengths, such as em and rem. If you use px units for sizing text, this preference will be ignored.

{% Video src="video/VbAJIREinuYvovrBzzvEyZOpw5w1/cUEl77VN4ZtAdElV4fd6.mp4", autoplay=true, controls=true, muted=true %}

{% endAside %}

Miscellaneous units

There are some other units which have been specified to deal with particular types of values.

Angle units

In the color module, we looked at angle units, which are helpful for defining degree values, such as the hue in hsl. They are also useful for rotating elements within transform functions.

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

Using the deg angle unit, you can rotate a div 90° on its center axis.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

{% Aside %} Other angle units include rad (radians), grad (gradians), and turn units, which represent a part of an angle, where 1turn = 360deg, and 0.5turn = 180deg. {% endAside %}

Resolution units

In the previous example the value of min-resolution is 192dpi. The dpi unit stands for dots per inch. A useful context for this is detecting very high resolution screens, such as Retina displays in a media query and serving up a higher resolution image.

{% Assessment 'sizing' %}

Resources

• CSS Spec Values and Units Level 4
• Sizing and Units on MDN
• All About Ems
• A percentages explainer

Spacing

Say you've got a collection of three boxes, stacked on top of each other and you want space between them. How many ways can you think of to do that in CSS?

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/jGjBqBRk3uCvXT7Tdjre.svg", alt="Three stacked boxes with a downward arrow", width="800", height="498" %}

The margin property might give you what you need, but it also might add additional spacing that you don't want. For example, how do you target just the space in between each of those elements? Something like gap might be more appropriate in this case. There are many ways to adjust spacing within a UI, each with its own strengths and caveats.

HTML spacing

HTML itself provides some methods to space elements. The <br> and <hr> elements allow you to space elements in the block direction, which if you are in a latin-based language, is top-to-bottom.

If you use a <br> element, it will create a line-break, just like if you were to press your enter key in a word processor.

The <hr> creates a horizontal line with space either-side, known as margin.

Along with using HTML elements, HTML entities can create space. An HTML entity is a reserved string of characters that are replaced with character entities by the browser. For example, if you were to type © in your HTML file, it would be converted into a © character. The   entity is converted into a non-breaking space character, which provides an inline space. Be careful though, because the non-breaking aspect of this character stitches the two elements together, which can result in odd behaviour.

{% Aside %} Use HTML elements to add space only when the element helps with the understanding of the document. For example, an <hr> doesn't just add space, it creates a logical separation of two chunks of content. If you just want a line with space around it, adding a border with CSS might be more appropriate. {% endAside %}

Margin

If you want to add space to the outside of an element, you use the margin property. Margin is like adding a cushion around your element. The margin property is shorthand for margin-top, margin-right, margin-bottom and margin-left.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/ECuEOJEGnudhXW5JEFih.svg", alt="A diagram of the four main areas of the box model.", width="800", height="547" %}

The margin shorthand applies properties in a particular order: top, right, bottom and left. You can remember these with trouble: TRouBLe.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/F8jtvl15CsAcs8Oaid2l.svg", alt="The word 'Trouble' running downwards with T, R, B and L extending to Top, Right, Bottom and Left. A box with arrows showing the directions too.", width="800", height="320" %}

The margin shorthand can also be used with one, two, or three values. Adding a fourth value lets you set each individual side. These are applied as follows:

• One value will be applied to all sides. (margin: 20px).
• Two values: the first value will be applied to the top and bottom sides, and the second value will be applied to the left and right sides. (margin: 20px 40px)
• Three values: the first value is top, the second value is left and right, and the third value is bottom. (margin: 20px 40px 30px).

Margin can be defined with a length, percentage or auto value, such as 1em or 20%. If you use a percentage, the value will be calculated based on the width of your element's containing block.

This means that if your element's containing block has a width of 250px and your element has a margin value of 20%: each side of your element will have a computed margin of 50px.

You can also use a value of auto for margin. For block level elements with a restricted size, an auto margin will take up available space in the direction that it is applied to. A good example is this one, from the flexbox module, where the items push away from each other.

Another good example of auto margin is a horizontally centered wrapper which has a max width. This sort of wrapper is often used to create a consistent center column on a website.

.wrapper {
	max-width: 400px;
	margin: 0 auto;
}

Here, margin is removed from the top and bottom (block) sides, and auto shares the space between the left and right (inline) sides.

{% Aside %} In the previous module on logical properties, you learned that instead of specifying margin-top, margin-right, margin-bottom and margin-left, you can use margin-block-start, margin-inline-end, margin-block-end and margin-inline-start. {% endAside %}

Negative margin

Negative values can also be used for margin. Instead of adding space between adjacent sibling elements, it will reduce space between them. This can result in overlapping elements, if you declare a negative value that's more than the available space.

Margin collapse

Margin collapse is a tricky concept, but it's something you'll run into very commonly when building interfaces. Say you have two elements: a heading and a paragraph that both have vertical margin on them:

<article>
  <h1>My heading with teal margin</h1>
  <p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>

h1 {
	margin-bottom: 2rem;
}

p {
	margin-top: 3rem;
}

At first glance, you would be forgiven for thinking that the paragraph will be spaced 5em from the heading, because 2rem and 3rem combined calculate to 5rem. Because vertical margin collapses, though, the space is actually 3rem.

Margin collapse works by selecting the largest value of two adjoining elements with vertical margin set on the adjoining sides. The bottom of the h1 meets the top of the p, so the largest value of the h1's bottom margin and the p's top margin is selected. If the h1 were to have 3.5rem of bottom margin, the space between them both would then be 3.5rem because that is larger than 3rem. Only block margins collapse, not inline (horizontal) margins.

{% Aside %} This behavior is rooted back to when the web was mostly just documents. Collapsing margins help to set consistent spacing between elements without accidentally creating huge gaps between elements that also have margin defined. {% endAside %}

Margin collapse also helps with empty elements. If you have a paragraph that has a top and bottom margin of 20px, it will only create 20px of space: not 40px. If anything is added to the inside of this element though, including padding, its margin will no longer collapse in itself and will be treated as any box with content.

{% Assessment 'margin-collapsing' %}

Preventing margin collapse

If you make an element absolutely positioned, using position: absolute, the margin will no longer collapse. The margin also won't collapse if you use the float property, too.

If you have an element with no margin between two elements with block margin, the margin won't collapse either, because the two elements with block margin are no longer adjacent siblings: they are just siblings.

In the layout lesson, you learned that flexbox and grid containers are very similar to block containers, but handle their child elements very differently. This is the case with margin collapse, too.

If we take the original example from the lesson and apply flexbox with column direction, the margins are combined, instead of collapsed. This can provide predictability with layout work, which is what flexbox and grid containers are designed for.

Margin and margin collapse can be tricky to understand, but understanding how they work, in detail, is very useful, so this detailed explainer is strongly recommended.

Padding

Instead of creating space on the outside of your box, like margin does, the padding property creates space on the inside of your box instead: like insulation.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/kClqXks3zC6Dio1c6f6v.png", alt="A box with arrows pointing inwards to show that padding lives inside a box", width="800", height="336" %}

Depending on which box model you are using—which was covered back in the box model lesson —padding can also affect the overall dimensions of the element too.

The padding property is shorthand for padding-top, padding-right, padding-bottom and padding-left. Just like margin, padding has logical properties, too: padding-block-start, padding-inline-end, padding-block-end and padding-inline-start.

Positioning

Also covered in the layout module, if you set a value for position that is anything other than static, you can space elements with the top, right, bottom and left properties. There are some differences with how these directional values behave:

• An element with position: relative will maintain its place in the document flow, even when you set these values. They will be relative to your element's position too.
• An element with position: absolute will base the directional values from the relative parent's position.
• An element with position: fixed will base the directional values on the viewport.
• An element with position: sticky will only apply the directional values when it is in its docked/stuck state.

In the logical properties module, you learn about the inset-block and inset-inline properties, which allow you to set directional values that honor writing mode.

Both properties are shorthands combining the start and end values and as such accept either one value to be set for start and end or two individual values.

Grid and flexbox

Lastly, in both grid and flexbox you can use the gap property to create space between child elements. The gap property is shorthand for row-gap and column-gap, it accepts one or two values, which can be lengths or percentages. You can also use keywords such as unset, initial and inherit. If you define only one value, the same gap will be applied to both the rows and columns, but if you define both values, the first value is row-gap and the second value is column-gap.

With both flexbox and grid, you can also create space using their distribution and alignment capabilities, which we cover in the grid module and flexbox module.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/JNXSRH4j77loSB099E04.svg", alt="A diagram representation of a grid with gaps", width="800", height="434" %}

Creating consistent spacing

It is a really good idea to choose a strategy and stick with it to help you create a consistent user interface that has good flow and rhythm. A good way to achieve this is use consistent measures for your spacing.

For example, you could commit to using 20px as a consistent measure for all gaps between elements—known as gutters—so all layouts look and feel consistent. You could also decide to use 1em as the vertical spacing between flow content, which would achieve consistent spacing based on the element's font-size. Whatever you choose, you should save these values as variables (or CSS custom properties) to tokenize those values and make the consistency a bit easier.

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/8eun6aGNHPTr4kyOrYkc.svg", alt="Consistent spacing between elements, using either 20px for a layout or 1em for flow content.", width="800", height="602" %}

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

Using custom properties like this allows you to define them once, then use them throughout your CSS. When they are updated, either locally within an element or globally, the values will pass down through the cascade and the updated values will be reflected.

{% Assessment 'conclusion' %}

Specificity

Suppose that you're working with the following HTML and CSS:

<button class="branding">Hello, Specificity!</button>

button {
  color: red;
}

.branding {
  color: blue;
}

There's two competing rules here. One will color the button red and the other will color it blue. Which rule gets applied to the element? Understanding the CSS specification's algorithm about specificity is the key to understanding how CSS decides between competing rules.

Specificity is one of the four distinct stages of the cascade, which was covered in the last module, on the cascade.

Specificity scoring

Each selector rule gets a scoring. You can think of specificity as a total score and each selector type earns points towards that score. The selector with the highest score wins.

With specificity in a real project, the balancing act is making sure the CSS rules you expect to apply, actually do apply, while generally keeping scores low to prevent complexity. The score should only be as high as we need it to be, rather than aiming for the highest score possible. In the future, some genuinely more important CSS might need to be applied. If you go for the highest score, you'll make that job hard.

Scoring each selector type

Each selector type earns points. You add all of these points up to calculate a selector's overall specificity.

Universal selector

A universal selector (*) has no specificity and gets 0 points. This means that any rule with 1 or more points will override it

* {
  color: red;
}

Element or pseudo-element selector

An element (type) or pseudo-element selector gets 1 point of specificity .

Type selector

div {
  color: red;
}

Pseudo-element selector

::selection {
  color: red;
}

Class, pseudo-class, or attribute selector

A class, pseudo-class or attribute selector gets 10 points of specificity.

Class selector

.my-class {
  color: red;
}

Pseudo-class selector

:hover {
  color: red;
}

Attribute selector

[href='#'] {
  color: red;
}

The :not() pseudo-class itself adds nothing to the specificity calculation. However, the selectors passed in as arguments do get added to the specificity calculation.

div:not(.my-class) {
  color: red;
}

This sample would have 11 points of specificity because it has one type selector (div) and one class inside the :not().

ID selector

An ID selector gets 100 points of specificity, as long as you use an ID selector (#myID) and not an attribute selector ([id="myID"]).

#myID {
  color: red;
}

Inline style attribute

CSS applied directly to the style attribute of the HTML element, gets a specificity score of 1,000 points. This means that in order to override it in CSS, you have to write an extremely specific selector.

<div style="color: red"></div>

!important rule

Lastly, an !important at the end of a CSS value gets a specificity score of 10,000 points. This is the highest specificity that one individual item can get.

An !important rule is applied to a CSS property, so everything in the overall rule (selector and properties) does not get the same specificity score.

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

{% Assessment 'scoring-beginner' %}

Specificity in context

The specificity of each selector that matches an element is added together. Consider this example HTML:

<a class="my-class another-class" href="#">A link</a>

This link has two classes on it. Add the following CSS, and it gets 1 point of specificity:

a {
  color: red;
}

Reference one of the classes in this rule, it now has 11 points of specificity:

a.my-class {
  color: green;
}

Add the other class to the selector, it now has 21 points of specificity:

a.my-class.another-class {
  color: rebeccapurple;
}

Add the href attribute to the selector, it now has 31 points of specificity:

a.my-class.another-class[href] {
  color: goldenrod;
}

Finally,add a :hover pseudo-class to all of that, the selector ends up with 41 points of specificity:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

{% Assessment 'scoring-advanced' %}

Visualizing specificity

In diagrams and specificity calculators, the specificity is often visualized like this:

{% Img src="image/VbAJIREinuYvovrBzzvEyZOpw5w1/McrFhjqHXMznUzXbRuJ6.svg", alt="A diagram demonstrating most specific to least specific selectors", width="800", height="474" %}

The left group is id selectors. The second group is class, attribute, and pseudo-class selectors. The final group is element and pseudo-element selectors.

For reference, the following selector is 0-4-1:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

{% Assessment 'visualizing' %}

Pragmatically increasing specificity

Let's say we have some CSS that looks like this:

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

With HTML that looks like this:

<button class="my-button" onclick="alert('hello')">Click me</button>

The button has a grey background, because the second selector earns 11 points of specificity (0-1-1). This is because it has one type selector (button), which is 1 point and an attribute selector ([onclick]), which is 10 points.

The previous rule—.my-button—gets 10 points (0-1-0), because it has one class selector.

If you want to give this rule a boost, repeat the class selector like this:

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

Now, the button will have a blue background, because the new selector gets a specificity score of 20 points (0-2-0).

{% Aside 'caution' %} If you find that you are needing to boost specificity like this frequently, it may indicate that you are writing overly specific selectors. Consider whether you can refactor your CSS to reduce the specificity of other selectors to avoid this problem. {% endAside %}

A matching specificity score sees the newest instance win

Let's stay with the button example for now and switch the CSS around to this:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

The button has a grey background, because both selectors have an identical specificity score (0-1-0).

If you switch the rules in the source order, the button would then be blue.

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

This is the only instance where newer CSS wins. To do so it must match the specificity of another selector that targets the same element.

Resources

• CSS SpeciFISHity
• Specificity Calculator
• MDN Specificity
• Specifics on CSS Specificity
• Another Specificity Calculator

The cascade

CSS stands for Cascading Stylesheets. The cascade is the algorithm for solving conflicts where multiple CSS rules apply to an HTML element. It's the reason that the text of the button styled with the following CSS will be blue.

button {
  color: red;
}

button {
  color: blue;
}

Understanding the cascade algorithm helps you understand how the browser resolves conflicts like this. The cascade algorithm is split into 4 distinct stages.

1. Position and order of appearance: the order of which your CSS rules appear
2. Specificity: an algorithm which determines which CSS selector has the strongest match
3. Origin: the order of when CSS appears and where it comes from, whether that is a browser style, CSS from a browser extension, or your authored CSS
4. Importance: some CSS rules are weighted more heavily than others, especially with the !important rule type

Position and order of appearance

The order in which your CSS rules appear and how they appear is taken into consideration by the cascade while it calculates conflict resolution.

The demo right at the start of this lesson is the most straightforward example of position. There are two rules that have selectors of identical specificity, so the last one to be declared won.

Styles can come from various sources on an HTML page, such as a <link> tag, an embedded <style> tag, and inline CSS as defined in an element's style attribute.

If you have a <link> that includes CSS at the top of your HTML page, then another <link> that includes CSS at the bottom of your page: the bottom <link> will have the most specificity. The same thing happens with embedded <style> elements, too. They get more specific, the further down the page they are.

This ordering also applies to embedded <style> elements. If they are declared before a <link>, the linked stylesheet's CSS will have the most specificity.

An inline style attribute with CSS declared in it will override all other CSS, regardless of its position, unless a declaration has !important defined.

Position also applies in the order of your CSS rule. In this example, the element will have a purple background because background: purple was declared last. Because the green background was declared before the purple background, it is now ignored by the browser.

.my-element {
  background: green;
  background: purple;
}

Being able to specify two values for the same property can be a simple way to create fallbacks for browsers that do not support a particular value. In this next example, font-size is declared twice. If clamp() is supported in the browser, then the previous font-size declaration will be discarded. If clamp() isn't supported by the browser, the initial declaration will be honored, and the font-size will be 1.5rem

.my-element {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}

{% Aside %} This approach of declaring the same property twice works because browsers ignore values they don't understand. Unlike some other programming languages, CSS will not throw an error or break your program when it detects a line it cannot parse—the value it cannot parse is invalid and therefore ignored. The browser then continues to process the rest of the CSS without breaking stuff it already understands. {% endAside %}

{% Assessment 'position' %}

Specificity

Specificity is an algorithm which determines which CSS selector is the most specific, using a weighting or scoring system to make those calculations. By making a rule more specific, you can cause it to be applied even if some other CSS that matches the selector appears later in the CSS.

In the next lesson you can learn the details of how specificity is calculated, however keeping a few things in mind will help you avoid too many specificity issues.

CSS targeting a class on an element will make that rule more specific, and therefore seen as more important to be applied, than CSS targeting the element alone. This means that with the following CSS, the h1 will be colored red even though both rules match and the rule for the h1 selector comes later in the stylesheet.

<h1 class="my-element">Heading</h1>

.my-element {
  color: red;
}

h1 {
  color: blue;
}

An id makes the CSS even more specific, so styles applied to an ID will override those applied many other ways. This is one reason why it is generally not a good idea to attach styles to an id. It can make it difficult to overwrite that style with something else.

Specificity is cumulative

As you can find out in the next lesson, each type of selector is awarded points which indicate how specific it is, the points for all of the selectors you have used to target an element are added together. This means that if you target an element with a selector list such as a.my-class.another-class[href]:hover you get something quite hard to overwrite with other CSS. For this reason, and to help make your CSS more reusable, it's a good idea to keep your selectors as simple as possible. Use specificity as a tool to get at elements when you need to, but always consider refactoring long, specific selector lists, if you can.

Origin

The CSS that you write isn't the only CSS applied to a page. The cascade takes into account the origin of the CSS. This origin includes the browser's internal stylesheet, styles added by browser extensions or the operating system, and your authored CSS. The order of specificity of these origins, from least specific, to most specific is as follows:

1. User agent base styles. These are the styles that your browser applies to HTML elements by default.
2. Local user styles. These can come from the operating system level, such as a base font size, or a preference of reduced motion. They can also come from browser extensions, such as a browser extension that allows a user to write their own custom CSS for a webpage.
3. Authored CSS. The CSS that you author.
4. Authored !important. Any !important that you add to your authored declarations.
5. Local user styles !important. Any !important that come from the operating system level, or browser extension level CSS.
6. User agent !important. Any !important that are defined in the default CSS, provided by the browser.

If you have an !important rule type in the CSS you have authored and the user has an !important rule type in their custom CSS, whose CSS wins?

{% Assessment 'origin' %}

Importance

Not all CSS rules are calculated the same as each other, or given the same specificity as each other.

The order of importance, from least important, to most important is as follows:

1. normal rule type, such as font-size, background or color
2. animation rule type
3. !important rule type (following the same order as origin)
4. transition rule type

Active animation and transition rule types have higher importance than normal rules. In the case of transitions higher importance than !important rule types. This is because when an animation or transition becomes active, its expected behaviour is to change visual state.

Using DevTools to find out why some CSS is not applying

Browser DevTools will typically show all CSS that could match an element, with those which are not being used crossed out.

If the CSS you expected to apply doesn't appear at all, then it didn't match the element. In that case you need to look elsewhere, perhaps for a typo in a class or element name or some invalid CSS.

{% Assessment 'conclusion' %}

Resources

• A highly interactive explainer of the cascade
• MDN cascade reference

Transitions

When interacting with a website, you might notice that many elements have state. For example, dropdowns can be in opened or closed states. Buttons might change color when focused or hovered. Modals appear and disappear.

By default, CSS switches the style of these states instantly.

Using CSS transitions, we can interpolate between the initial state and the target state of the element. The transition between the two enhances the user experience by providing visual direction, support, and hints about the cause and effect of the interaction.

{% Aside 'key-term' %} Interpolation is the process of creating "in-between" steps that smoothly transition from one state to another. {% endAside %}

Transition properties

{% BrowserCompat 'css.properties.transition-property' %}

To use transitions in CSS, you can use the various transition properties or the transition shorthand property.

transition-property

The transition-property property specifies which style(s) to transition.

.my-element {
  transition-property: background-color;
}

The transition-property accepts one or more CSS property names in a comma-separated list.

Optionally, you may use transition-property: all to indicate that every property should transition.

transition-duration

The transition-duration property is used to define the length of time that a transition will take to complete.

transition-duration accepts time units, either in seconds (s) or milliseconds (ms) and defaults to 0s.

transition-timing-function

Use the transition-timing-function property to vary the speed of a CSS transition over the course of the transition-duration.

By default, CSS will transition your elements at a constant speed (transition-timing-function: linear). Linear transitions can end up looking somewhat artificial, though: in real life, objects have weight and can't stop and start instantly. Easing into or out of a transition can make your transitions more lively and natural.

Our module on CSS Animation has a good overview of timing functions.

You can use DevTools to experiment with different timing functions in real-time.