There are currently some convoluted ways of doing this, using CSS filters to change brightness or contrast, or using CSS variables to separate each of the color’s values and use the calc function to manipulate them.

With the CSS Color Module Level 5, there are some great new features that will make this manipulation much easier to achieve.

Keep in mind, these features are not yet widely supported by browsers, being either experimental or hidden behind flags. Hopefully, these will start to roll out during this year.

Color spaces

Before getting into color manipulation, one other feature that will improve the results of dynamic color palettes are color spaces.

Color spaces essentially determine how colors are defined and how they can be represented. The CSS Color 4 introduces a bunch of ways to define colors, one of them being Lightness Chroma Hue (LCH). LCH introduces many improvements over RGB, such as more colors and more uniformity. For more detail on this, I recommend Lea Verou’s blog post “LCH colors in CSS: what, why, and how?”.

Color mix

The color-mix function lets us mix two colors with a given weight to each. You can mix the theme color with white or black to make it lighter or darker, or mix it with the secondary color to get interpolated values between them.

color: color-mix(in srgb, var(--primary-color) 70%, white);
color: color-mix(in srgb, var(--primary-color) 70%, black);
color: color-mix(in lch, var(--primary-color), var(--secondary-color));

Resources:

• CSS Color 5 – color-mix
• Can I Use – color-mix
• MDN – color-mix

Relative colors

With relative colors, you can define color values based on a given color, and change the individual values that make up that given color. Remember the approach I mentioned above that separates each of the color’s components into a CSS variable? This blog post by Jim Nielsen compares the two approaches.

// Reduce the primary color transparency
color: rgb(from var(--primary-color) r g b / 80%);

// Reduce the lightness using the LCH color space
color: lch(from var(--primary-color) calc(l / 2) c h);

Resources:

• CSS Color 5 – relative colors

Color contrast

With the color-contrast function, we can let the browser automatically determine a color that contrasts with a given color and matches accessibility requirements.

At its simplest, the function receives a color value (typically the background color) and returns either white or black, depending on which has better contrast.

If you want custom contrast colors instead of black or white, you can provide a list of colors to pick from (using the vs keyword), and the color with the highest contrast will be chosen. As a backup, you can define a contrast target (using the to keyword) and if no color matches that contrast, white or black will be picked. The contrast target can be given as a number or as a level from WCAG (AA, AA-large, AAA, and AAA-large).

// Chooses black or white based on which has better contrast
color: color-contrast(var(--bg-color));

// Chooses a contrasting color from a given list (after the "vs"), that result in  a contrast level of at least AA. If none match, picks white or black
color: color-contrast(
	var(--bg-color)
	vs
	var(--text-color),
	var(--text-color--light),
	var(--text-color--lightest),
	to AA
);

Resources:

• CSS Color 5 – color-contrast
• Can I Use – color-contrast
• MDN – color-contrast

Conclusion

The future is looking bright for dynamic color themes in CSS. We will soon be able to move away from convoluted hacks and start using native functions.

Do you find these color features useful? How do you get around this currently? Do you know of any other features that you think help with this topic? Leave a comment or reach out to me on Twitter @pedronavelopes.

The post The future of dynamic color palettes in CSS appeared first on Blog IT.

There are two types of 404 routes that we want to handle.

• Static 404 – the URL the user navigates to doesn’t match any route
• Dynamic 404 – the URL matches a route, but the data associated with that route does not exist. For example, you navigate to a detail page with an ID, but no item exists with that ID.

For this post, I assume that there is a component named NotFoundComponent that is the not found page to show the user. Replace this with whatever component

Static 404 routes

To set up a static 404 page, you need to add two routes to your RoutingModule configuration.

const routes: Routes = [
    // Other routes
    { path: '404', component: NotFoundComponent },
    { path: '**', component: NotFoundComponent }
]

We used a catchall route '**' that matches whatever route didn’t match above, and shows our not found page.

Make sure to keep the catchall route at the end of your routes, otherwise the routes below it will not be accessible.

Another option here would’ve been to redirect the user to the '404' route, but that way you lose the context of the URL. If the user navigates back, he would go to the non-existing route and be redirected to the '404' path again. If this is the behavior you want, switch the last route with { path: '**', redirectTo: '404' }.

Dynamic 404 routes

Now that we have the static 404 route configured, we can use the router to navigate to it whenever we want to show the not found page to the user.

this.router.navigate(['/404'], { skipLocationChange: true });

By using the option skipLocationChange: true, we have the same behavior as mentioned above. Even though the router navigates to the route, the browser URL stays the same, allowing the user to easily go back.

Personalizing the 404 message

You may want to personalize the message shown on the 404 page. One way to do this is using the navigation state.

When navigating to the 404 page, you can include a state in the navigation options.

this.router.navigate(['/404'], { 
    skipLocationChange: true,
    state: {
        // Whatever data you need on the 404 page
    	source: 'article',
        id: 123456
    }
});

On your NotFoundComponent, you can access this object in the constructor using the router’s getCurrentNavigation method.

export class NotFoundComponent {
  constructor(private router: Router) {
    console.log(this.router.getCurrentNavigation().extras.state.source);
  }
}

You must access the state in the constructor, as it is only available while the router is navigating.

Conclusion

In this post, we saw how to implement a 404 route in Angular. We looked at how we can redirect to it dynamically and even how to personalize the 404 page with route dependent data!

Have questions, corrections, or an alternative way of handling this? Leave a comment or reach out to me on Twitter @pedronavelopes and let me know! Thanks for reading!

The post Handling not found routes in Angular appeared first on Blog IT.

In this post, we’ll look at a way to make scrollable components more intuitive on mobile devices using CSS scroll shadows.

Let’s think of a table. It’s a collection of rows with columned data. One way to make a table responsive is by collapsing each row into a card. This will, however, remove the link between rows for any given column.

An alternative is to make the table scroll horizontally. This gives your data space to breathe and maintains the link given by columns. All done and pretty easy, right? Well, you might run into this problem:

If your column width happens to match the width of the table element, your users will have no idea that there is extra content to the side.

Adding Shadows

One way to fix this is by using scroll shadows. A scroll shadow is a shadow applied at the border of the element when there is the possibility of scrolling. That same example with a scroll shadow might look like this:

As you can see, the shadow is only visible when there is space to scroll. There are many ways to do this, I’m going to show you a way that only uses CSS.

First, we start by adding the shadows with two radial gradients.

.scroll-shadows-h {
  background:
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.4), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.4), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 14px 100%, 14px 100%;
}

Hiding the shadows

This results in the shadows being visible even when there isn’t space to scroll. To fix this, we add shadow covers that hide the shadows at the beginning and end of the element, instead of its viewport.

We can implement this using the background-attachment property. To quote the MDN, “The background-attachment CSS property sets whether a background image’s position is fixed within the viewport, or scrolls with its containing block”.

Setting the background-attachment of the shadow covers to local, means that they are fixed relative to the content of the element. When we scroll inside the element, the background scrolls as well.

.scroll-shadows-h {
  background:
    /* Shadow covers */
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
   
    /* Shadows */
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.4), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.4), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

This class is the class used in the example in the image above. The cool thing about this implementation is that it’s very versatile. We can apply it vertically or use any background we want to. You could replace the shadows with an image (e.g. an arrow) and this effect would still work, as the covers will continue to overlap it. Check the CodePen below for some examples!

Thanks for reading! Do you find this useful? Do you think there are better ways to achieve this effect? Let me know in the comments below, or reach out to me on Twitter @pedronavelopes!

This blog post was inspired by Lea Verou’s post “Pure CSS scrolling shadows with background-attachment: local“. Go check it out!

The post CSS Scroll Shadows appeared first on Blog IT.

I would like you to keep in mind that this will not make your website fully accessible, it’s just an easy way to vastly improve accessibility.

1 – Follow WCAG and WebAIM checklist

The WCAG (Web Content Accessibility Guidelines) is a set of guidelines on how the web can be made more accessible. It takes 4 principles into consideration:

1. Perceivable – Just because something is perceivable with one sense (usually sight), not all users can perceive it
2. Operable – Can users use UI components and navigate the content. For example, hover interactions can’t be operated by someone without a mouse
3. Understandable – Can all users understand the content
4. Robust – Is it robust enough for the content to be consumed by a wide variety of user agents, and does it work with accessibility tools.

The WebAIM Checklist was created from these guidelines and simplified the implementation of these principles. This checklist should be seen as a companion to start implementing accessible interfaces, not as the final resource on what make a website accessible.

2 – Provide alternatives to non-text content

Non-sighted users may have a hard time taking in non-text content, as such, it’s important to provide alternatives to these.

• Provide alt text for images The alt text should be an alternative to the image content
  • If an image is not relevant for the context, you can hide it from screen readers by providing an empty alt text.
• Use aria-label for other elements
  • The aria-label lets you label elements for screen readers

// 👎 No descriptive alt text
<img src="puppy.jpg">

// 👍 Descriptive alt text
<img src="puppy.jpg" alt="Labrador puppy running in the grass">

// 👍 Empty alt text excludes the image that isn't relevant
<button>
	<img src="home-icon.jpg" alt="">
	Home
</button>

3 – Use native and semantic elements

When implementing an HTML page, try to use native and semantic elements.

If you need a button, you should use a <button> element, not a div with an onclick event or an anchor link.

This is the case because different elements mean different things, and have different behaviors. By using the native HTML elements, we know it will have the expected behavior. And by using a semantic element, we ensure that the user understands what the element will do, as in, a button will trigger an action, and a link will trigger a navigation to somewhere else.

// 👎 Non-semantic element
<div class="button" click="onclick">
	Click me!
</div>

// 👍 Semantic element
<button click="onclick">
	Click me!
</button>

4 – Use ARIA attributes in elements

When there is no native element which matches your need, you may have to implement it yourself.

To make sure the element you are implementing is accessible, you should use ARIA (Accessible Rich Internet Applications) attributes.

These will allow you to add semantics to elements which have no meaning, modify existing semantics, add extra labels and descriptions, express relationships between elements, etc.

The ARIA practices document specifies the patterns that each element should have. When implementing an element, you give it a role and commit to following all the patterns and interactions defined in the ARIA practices.

5 – Understand focus and tab order

Tab order refers to the order in which the items on a page will be focused using the keyboard.

Some elements are implicitly focusable (such as inputs, buttons and links), and are added to the tab order automatically.

The tab order is determined by the DOM order, but this can be different from the visual order which can be changed by CSS. Therefore, you should make sure that the reading and navigation order are logical and intuitive.

To change the tab order, you can use the tab index attribute:

• -1
  • Removes the element from the natural tab order, but it is focusable through code.
  • Useful when we have hidden elements (such as modals) which should not be focusable when hidden
• 0
  • Adds the element to the natural tab order.
  • Allows elements to be focused and receive keyboard input.
• 0
  • Jumps element to the front of the tab order
  • If there are multiple elements, order goes from lowest to highest
  • This is discouraged because it can make it confusing for screen readers, as they navigate the page linearly

Make sure you have a focus ring. A focus ring lets users know which element is focused. This is essential for keyboard users.

6 – Bypass Blocks

If your page has a lot of navigation links, a keyboard user will have to tab through all these links before being able to reach the main content. To make your website more convenient to use, you can provide users with a skip link.

The skip link will be the first focusable element on the page and links the user to the main content, skipping the focus to it directly.

<body>
  <a href="#maincontent">Skip to main content</a>
  <!-- Navigation links --->
  <main id="maincontent">
    <h1>Heading</h1>
    <p>This is the first paragraph</p>
  </main>
</body>

To make sure the skip link doesn’t affect your page, you can hide it until it is focused, meaning only keyboard users will see it.

Alternatively to skip links, if you provide a proper heading structure, screen readers will also be able to skip around the page and navigate to each section much more easily. This will, however, not provide a skip mechanism for users who just use the keyboard to navigate.

7 – Use ARIA attributes in CSS selectors

You can use ARIA attributes in your CSS selectors. This makes sure that ARIA is being used correctly, and removes the need for additional selectors.

// 👎 Aditional selector
.toggle.pressed

// 👍 ARIA attributes
.toggle[aria-pressed="true"]

8 – Responsive design

Even if you don’t need to implement mobile designs, a responsive design ensures that the user can zoom in the page and the content adjusts properly. Your page should be zoomable up to 200% without losing content or functionality.

• Use relative font-size, allowing the browser to rescale the text
• Use appropriate touch targets (>48px) so users have enough space to touch a single button
• Space touch targets about 32px from each other

9 – Color and Contrast

There are tools which allow you to easily check for contrast. Some browsers even let you check this directly in the dev tools.

You also have to keep in mind that some users will not be able to distinguish some colors. As such, information should not be conveyed by color alone. Make sure you add other elements (such as captions or icons) to indicate the state of the elements.

10 – How to apply these tips

Good accessibility ensures good UX. As such, accessibility should be focused from the beginning of development.

When this doesn’t happen, we inevitably have to fix accessibility issues later. You can identify some issues using the following techniques:

• Use the accessibility inspector included in the browser
• Navigate through your website using only a keyboard
• Simulate impaired vision through browser extensions (e.g. NoCoffee)

After identifying some issues, how should we tackle them? As with bugs, we should focus on high impact, low effort issues.

• How frequently is this piece of UI used?
• How badly does this affect our users?
• How expensive is it to fix?

Conclusion

Accessibility is starting to make it to the front of developer concerns. With more popularity come more resources to help us develop better interfaces and experiences for all users.

Hopefully, this article provided you with an initial idea on how to approach web accessibility.

The post 10 easy ways to improve web accessibility appeared first on Blog IT.