Site Building Tips & Tricks
For better SEO & Accessibility
Create Headings for Easy Scanning
To facilitate quick scanning and comprehension of information for visual users, it is recommended to use section headings with large or bold text. These headings enable efficient navigation. To ensure optimal navigation for all users, maintain a logical order and consistent hierarchy in the heading elements. Avoid mixing heading levels or using large headings excessively.
Ensure Readability and Responsive Layouts
For standard text, ensure a minimum contrast ratio of 4.5:1 with the background. Large text (above 18.5 pixels Bold or 24 pixels Regular) should have a contrast ratio of at least 3:1. Interactive and non-textual components, such as icons, should have a contrast ratio of at least 3:1 compared to adjacent colors. Design responsive layouts that cater to diverse user preferences and requirements, including portrait or landscape orientation and zoom levels. The content should adapt seamlessly without sacrificing information, allowing optimal viewing without horizontal scrolling at zoom levels up to 400%. Designing with a 320 pixel breakpoint ensures compatibility. Additionally, consider text zoom up to 200% to prevent content clipping.
Enhance Content Comprehension with Rich Media and Alternatives
Incorporate images, graphics, and videos into your content to enhance comprehension, particularly for individuals with cognitive and learning disabilities. These media elements also serve as orientation cues for individuals with visual impairments. To ensure inclusivity, provide alternatives to rich media, allowing those who cannot perceive visual or audio information to access the content. It is crucial to provide descriptive alt text for visual media, ensuring compatibility with screen readers. Use customizable closed captions in video media to allow users to adjust contrast preferences. If customization is not possible, ensure sufficient color contrast.
Meaningful and Simplified Text
When designing your interface, use clear and straightforward language to create a focused user experience. Strive for concise, consistent, and descriptive sentences that effectively convey new and meaningful information. Consult content design guidance and component-specific usage guidance for comprehensive instructions. Avoid using overly complex or specialized language, facilitating easy skimming of information and accommodating users whose first language may not be English.
Effectively Use Semantic Colors
Semantic colors, such as red for danger, yellow for caution, and green for positive feedback, provide at-a-glance information. Use these colors to convey important messages rather than for decorative purposes. Consistent use of semantic colors, combined with appropriate pairing with other indicators, reinforces context and reduces cognitive load.
Optimize Front-End Components for SEO
To ensure front-end components are highly optimized for search engine optimization (SEO) and crawlability, avoid relying solely on JavaScript interactions for content rendering. Give preference to CSS. Also, consider the functionality of components when JavaScript is turned off to maintain accessibility and crawlability.
Considerations for Content Crawlability
While Google can crawl JavaScript, there may be instances where client-side rendered content is not accessible or interpreted as desired. Keep in mind that these concepts also apply to other search engines like Bing and Bingbot.
User Events
Googlebot does not track user actions like clicks, hovers, or scrolls. Consequently, if content or elements rely on user events, they may not be visible to search engine crawlers, including content fetched via XHR.
Viewport
To address the limitation of Googlebot's scrolling capability, a tall viewport is employed.
Although the exact height has not been officially disclosed by Google, experiments have observed a height of 12,140px. Furthermore, Googlebot now supports the Intersection Observer API, which is recommended for activating images and content assets.
Indexing Time
Googlebot primarily relies on SSR HTML for crawling and indexing. However, when Googlebot detects the presence of a JS Framework or potential JS content, it queues the URL for recrawling using a headless browser. This queue can lead to delays of several days, which may have a negative impact on the discoverability of time-sensitive content in search engines, such as new services, regulatory information, or policy changes.
WAI-ARIA
WAI-ARIA, maintained by the W3C, provides semantic specifications for common UI patterns found in Wanda's components. Its purpose is to assign meaning to controls that are not built using native browser elements. For example, when using a
Accessible Labels
Native HTML label elements are designed to provide semantic meaning and context for corresponding input elements, especially in the case of built-in form controls. However, for non-form control elements or custom controls like those provided by Wanda, WAI-ARIA offers specifications on how to provide accessible names and descriptions for such controls. Whenever possible, Wanda's components include abstractions that simplify the process of labeling controls. The label primitive is designed to work effectively with many of these controls. Ultimately, it is the responsibility of the developer to provide appropriate labels to ensure users have the necessary context when navigating the application.
Keyboard Navigation
Complex components like Tabs and Dialog should support keyboard interaction and other input modalities that do not rely on a mouse. Wanda's components follow the basic keyboard support guidelines outlined in the WAI-ARIA authoring practices.
Focus Management
Proper keyboard navigation and effective labeling are closely connected to managing focus. When a user interacts with an element, resulting in changes, it is beneficial to move the focus accordingly. This ensures that the next tab stop aligns logically with the new context of the application. Additionally, for users of screen readers, moving focus often triggers announcements that convey the updated context, relying on appropriate labeling. In many Wanda components, focus is moved based on typical user interactions within a given component. For example, in a Modal, when it is opened, focus is programmatically shifted to a Cancel button element in anticipation of a response to the prompt.
Read more about Accessibility on the official website: