Content

Accessibility AA

Components need to meet WCAG AA level. Level A success criteria are essential for every website. If your website doesn’t conform with WCAG Level A, it may have serious accessibility issues that prevent users with disabilities from using it.

At this level, within the current guidelines (WCAG 2.1) there are 30 criteria that organisations must meet. An example of the criteria includes:

Non-text content (images and videos) must have a text equivalent.
Users must be able to access content using a keyboard only.
Forms must include labels or instructions, so users know what’s expected of them.
Assistive technologies, such as screen readers, must be able to access content.
Information or instructions must not be conveyed through shape, size or colour alone.

LEVEL AA

WCAG Level AA goes further toward making web content accessible for users in a wider variety of contexts. It is for this reason that most accessibility experts recommend this conformance level. As a reminder, at this conformance level, the web page and content would satisfy all Level A and Level AA success criteria.

At Level AA, criteria includes all that is outlined at Level A plus an extra 20 requirements. Examples include:

Text and background must use good colour contrast. For example, have a minimum level of contrast of at least 4.5 to 1.
Content should be organised under clear headings, using a logical order. For example a H1, followed by H2, H3 etc.
Elements that affect navigation should be consistent across the site.

RTL

All Toyota/Lexus websites are also supporting Hebrew. Therefor, please take the following rules into consideration

Use Proper Meta Tags: For RTL languages, set the dir attribute to “rtl” in the <html> tag: <html dir="rtl" lang="ar">.
CSS Reset and Styles: Create specific styles for RTL layout by using CSS rules such as direction: rtl
Start with :before and :after Pseudo-elements: Use these pseudo-elements to add additional padding or margins on the left or right side of elements as needed for proper RTL alignment.
Avoid Using Hard-coded Text Alignment: Do not use text-align: left; or fixed values for margins or padding that depend on LTR orientation. Instead, use start and end values, or rely on the natural flow of the RTL language.
Flexbox and Grid Considerations: For layouts, use Flexbox or CSS Grid as they are better at handling RTL languages than traditional float-based layouts.
Consider Images and Icons: If you have images or icons with directional orientation (e.g., arrows), make sure to use their RTL equivalents for RTL pages.
Be Mindful of Script Order: Be cautious about the order of your scripts, especially if you are using scripts that manipulate the DOM or handle text. Some scripts might not handle RTL content correctly by default.
Accessibility: Ensure that your website remains accessible to all users, including those who use assistive technologies, when implementing RTL support.
Use Relative Units: Prefer relative units like %, em, or rem instead of fixed units (px) to ensure proper scaling and responsiveness.
Translation Considerations: Take into account that RTL languages might have different text lengths and line-break patterns, which may impact the design. Test with long and short text strings.

Responsive images

Responsive Images: srcset/picture enables responsive images, ensuring that the appropriate image version is served based on the user’s viewport size. This results in a better layout and faster loading times on different devices.
Retina and High-DPI Displays: High-DPI displays (e.g., Retina displays) have higher pixel densities, and they require higher-resolution images to maintain image quality. With srcset, you can serve these devices the appropriate higher-resolution images.
Bandwidth Optimization: By serving smaller images to devices with lower resolutions or screen sizes, you reduce unnecessary bandwidth usage for users with limited data plans or slower internet connections.
Improved Page Load Speed: Selecting the correct image size based on the device helps reduce the overall page load time, as it prevents loading larger images than necessary.
Better User Experience: Optimized images contribute to a smoother and more enjoyable user experience, leading to higher user engagement and satisfaction.
SEO Benefits: Faster-loading pages and responsive images can positively impact SEO rankings and search engine visibility.

Source Sets

→ use this for resolution switching (different file-sizes of the same image)

The srcset attribute in HTML is used to provide multiple image sources with different resolutions or sizes. It allows web developers to specify a set of images to be displayed based on the user’s device capabilities, such as screen size and pixel density. Using srcset offers several advantages for optimizing image delivery and improving the user experience:

To use srcset, you specify multiple image sources separated by commas, along with the corresponding descriptors indicating the image’s width, pixel density, or media conditions. The browser then selects the most appropriate image to load based on the device’s characteristics and the available options in the srcset.

srcset sample

<img
  src="default-image.jpg"
  srcset="small-image.jpg 480w, medium-image.jpg 768w, large-image.jpg 1024w"
  alt="Description of the image"
/>

In this example, the browser will choose the most suitable image based on the viewport width (480, 768, or 1024 pixels) for the best user experience. If the browser doesn’t support srcset, it will fallback to the default image specified in the src attribute.

Picture Element

→ use this for art direction (e.g. more focus on subject)

The <picture> element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.

The browser will consider each child <source> element and choose the best match among them. If no matches are found—or the browser doesn’t support the <picture> element—the URL of the <img> element’s src attribute is selected. The selected image is then presented in the space occupied by the <img> element.

Example

<picture>
  <source
    alt="Description of the image"
    media="screen and (min-inline-size: 20rem)"
    srcset="image.webp 1x, retina-image.webp 2x"
    type="image/webp"
  />
  <source
    alt="Description of the image"
    media="screen and (min-inline-size: 20rem)"
    srcset="image.png 1x, retina-image.png 2x"
  />
  <img
    alt="Description of the image"
    src="fallback-image.png"
    srcset="fallback-image.png 1x, fallback-retina-image.png 2x"
  />
</picture>

Lazy Loading

Using the “lazy” loading attribute on images provides several benefits, particularly for web performance and user experience. The “lazy” loading attribute is designed to delay the loading of non-visible images until the user is about to view them. Here are some reasons why using lazy loading for images is advantageous:

Faster Page Load Speed: By deferring the loading of images that are not initially visible, the page load speed is improved. This is especially beneficial for pages with numerous images, as it reduces the initial load time.
Reduced Bandwidth Usage: Lazy loading helps reduce bandwidth consumption, as images below the fold or not visible initially are not loaded until the user scrolls to view them. This is particularly useful for users on limited data plans or with slower internet connections.
Improved User Experience: Pages with lazy loading tend to feel faster and more responsive to users since they can start interacting with the page before all images are fully loaded.
Better Performance on Mobile Devices: Mobile devices often have limited resources and slower connections. Lazy loading allows them to load only the images that are currently in the user’s view, which enhances the overall performance and responsiveness of the page.
SEO Benefits: Faster page load times can positively impact search engine rankings and user engagement, indirectly benefiting SEO efforts.

<img src="image.jpg" loading="lazy" alt="Description of the image" />

AEM

Data

TBD

Pending: Foundation Serverless POC.

DAM Assets

DAM - Scene7 (AEM)

Digital Asset Management (DAM) and Scene7 (now known as Adobe Dynamic Media) were two separate but interconnected solutions offered by Adobe.

Some advantages using AEM DAM + Scene7

Advanced Digital Asset Management: AEM DAM is a platform designed for efficient and organized management of digital assets, including images, videos, documents, and other media files. It allows users to store, organize, search, and retrieve assets easily. Integrating Scene7 with AEM DAM enhances the capabilities by providing additional tools for dynamic media management, such as handling interactive images, 360-degree views, and videos with various player options.
Seamless Integration: As both AEM DAM and Scene7 are products of Adobe, they are designed to integrate seamlessly. The integration allows users to access Scene7’s dynamic media capabilities directly from within AEM DAM’s interface. This streamlines the workflow and simplifies the process of incorporating dynamic media elements into web pages, emails, or other digital experiences.
Automated optimization: By combining AEM DAM with Scene7, you can create engaging experiences for your audience. Scene7 offers features like automated image resizing, smart crop, and automatic video transcoding, which can adapt content based on the user’s device, screen size, and other factors. This ensures that users receive the best possible media experience tailored to their specific context.
Efficient Content Delivery: Scene7 has a content delivery network (CDN) that helps in delivering media assets quickly and efficiently to end-users across the globe. By leveraging Scene7’s CDN, you can improve the performance of your website or application, ensuring that media content loads faster and reducing the risk of latency issues.
Rich Media Experiences: Scene7 enables the creation of interactive and immersive media experiences, such as 360-degree product views, zoomable images, and product configurators. When combined with AEM DAM, these rich media capabilities can significantly enhance product presentations and user engagement, leading to increased conversion rates.

Images

When preparing images for web usage, it’s essential to strike a balance between image quality and file size. Optimizing images ensures that web pages load quickly, reducing page load times and improving user experience. Here are some recommended image settings for web usage:

File Format: The most common image formats for the web are JPEG, PNG, and GIF. Choose the appropriate format based on the type of image and its characteristics:
- JPEG: lossy - Ideal for photographs and images with many colors and gradients. It offers good compression while retaining acceptable image quality. Use JPEG for photographs and images where a certain level of quality is required.
- WEBP: lossless - Suitable for images with transparency or sharp edges, such as logos, icons, and graphics. Best compression, but still no support on older safari-browsers.
- PNG: lossless - Suitable for images with transparency or sharp edges, such as logos, icons, and graphics. PNG-8 is better for simple graphics with a limited color palette, while PNG-24 is suitable for images with a wide range of colors and transparency.
- GIF: Best for simple animations or images with limited colors. It uses lossless compression for animated images.
PPI: For web usage, images typically have a resolution of 72 pixels per inch (PPI)
Image widths: In a 5 breakpoint setup the recommended images widths are: xs - 768px / sm - 992px / md - 1200px / lg/xl - 1600px
Compression and Quality: JPEG images can be compressed to reduce file size. Balancing compression with image quality is crucial. In most cases, a quality setting of 60 to 80 (out of 100) offers a good compromise between file size and image clarity. Experiment with different quality settings to find the best balance.
PNG Optimization: Use PNG optimization tools or websites to compress PNG images without losing quality. This can significantly reduce file sizes.
Lazy Loading: Implement lazy loading for images below the fold or outside the viewport. This defers the loading of images until the user scrolls to them, reducing initial page load times.
Content Delivery Network (CDN): Utilize a CDN to serve images from servers located closer to the user’s location, reducing latency and improving loading times.
Image Attributes: Always include the “alt” attribute for images, providing a descriptive text alternative for accessibility and SEO purposes.

Video

When it comes to web recommendations for video files, the goal is to strike a balance between video quality, file size, and browser compatibility. Here are some best practices and recommendations for using video files on the web:

File Formats: The most common video formats for the web are MP4 (H.264 video codec) and WebM (VP9 video codec). MP4 is supported by most modern browsers, including Chrome, Firefox, Safari, and Edge, while WebM is primarily supported by Chrome and Firefox. Providing both formats will ensure broader compatibility.
H.264 Video Codec: When encoding videos in the MP4 format, use the H.264 video codec. It provides good video quality and compression efficiency, making it a widely accepted standard for web videos.
VP9 Video Codec: For the WebM format, use the VP9 video codec. VP9 offers high-quality video with better compression, resulting in smaller file sizes compared to H.264. While not all browsers support VP9, it is essential for providing efficient video delivery to users on compatible browsers.
Video Bitrate: The video bitrate determines the quality and file size of the video. Higher bitrates result in better quality but larger file sizes. Adjust the bitrate according to the desired trade-off between quality and file size, keeping in mind the internet connection speeds of your users.
Audio Codec: Use AAC (Advanced Audio Codec) for the audio portion of your videos. It is widely supported by modern browsers and provides good audio quality at lower bitrates.
Video Preloading and Lazy Loading: Consider using video preloading for important videos to ensure smoother playback. For videos that are not immediately visible on the page, use lazy loading techniques to defer their loading until they are about to be viewed, reducing initial page load times.
Subtitles and Closed Captions: If your videos contain spoken content, consider adding subtitles or closed captions to make them more accessible to a broader audience.
Content Delivery Network (CDN): Host your videos on a reliable and fast content delivery network (CDN) to ensure efficient delivery to users worldwide.