-
Notifications
You must be signed in to change notification settings - Fork 1
Developer guidelines
For some features to work, some guidelines should be followed in the application:
The links in the web application must use semantic elements like instead of . This not only helps the components feature work properly but also helps screen readers. Even without hover effects, links should stand out from the surrounding text. This includes sufficient color contrast, suitable font size and weight, and adequate space.
Ensure that all hidden images have appropriate alternative text (alt) properties. This helps screen readers and assistive devices communicate the image’s information to viewers who are unable to view it. Since this feature will also remove any background images if any, make sure if any texts were part of the element, the text blends well with the background when the background image is not in place.
Increased letter spacing may affect page rendering performance. Optimize your implementation to reduce performance overhead. The application should be responsive enough to be able to not break the UI when the spaces between every letter are increased. Before going to production, it is encouraged to try the feature and see if the style breaks anywhere in the application. A cap for the highest value should be set if necessary.
Increasing line height may affect rendering speed, particularly for huge volumes of text. Optimize your implementation to reduce the performance effect. Adjust the line height control and its effects to suit different screen sizes and devices, including mobile devices. Ensure that the content remains legible and that the arrangement is intact. Set a default line height that is suitable for most users, with the option to modify it for specific tastes.
Changing contrast may result in elements border disappearance. Before applying, it is important to make sure that the edges of the elements do not blend with the contrast changes. If an element has no defined border, it cannot be distinguished from the dark background in dark contrast. the package includes a style class that developers can add to the elements that they want to be visible on the page. Adding this class keeps the elements’ borders visible after a contrast change.
No guidelines are required, but developers should know what it does. Consider a red pixel with RGB values (255, 0, 0). Inverting it with 100% yields (0, 255, 255), a vivid blue color. Higher percentages produce a larger inversion effect.
- Create a flexible layout utilizing CSS frameworks like as Bootstrap or Grid, which can adjust to varied font sizes and text zoom levels. Avoid set widths and heights
- that may cause the material to overflow at magnification.
- Ensure that the application’s design is responsive and scales effectively across all screen sizes and resolutions, especially if enlarged text may affect available space.
- Ensure that text elements have adequate line wrapping to avoid horizontal overflow when enlarged. Adjust the line height and paragraph margins as appropriate.
- Consider how the pictures will scale when enlarged. You may need to build dynamic scaling techniques or supply alternate copies of photos for different zoom settings.
- Ensure that interactive components such as buttons and links remain clickable and effective even when the text is enlarged. Adjust padding and spacing as needed.
- Use web fonts that are optimized for different resolutions and magnifications. Avoid pixelated typefaces that seem unclear when enlarged.