diff --git a/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md b/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md index 562e010a29b..852817322a4 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md @@ -8,7 +8,36 @@ dashedName: what-are-some-tools-to-check-for-good-color-contrast-on-sites # --description-- -Watch the video lecture and answer the questions below. +Watch the video or read the transcript and answer the questions below. + +# --transcript-- + +What are some tools to check for good color contrast on sites? + +When designing websites, ensuring good color contrast is crucial for accessibility and readability. Several tools are available to help developers and designers check and maintain appropriate color contrast ratios on their sites. One popular tool is WebAIM's Color Contrast Checker. + +This online tool allows you to input the foreground and background colors of your design and instantly see if they meet the Web Content Accessibility Guidelines (WCAG) standards. It's user-friendly and provides immediate feedback on whether your color choices pass or fail the contrast requirements. + +To use WebAIM's Color Contrast Checker, simply visit their website and enter the hexadecimal codes for your foreground and background colors. The tool will then calculate the contrast ratio and indicate whether it meets the WCAG 2.0 level AA or AAA standards. Here's an example of how you might use color values in your CSS: + +```css +body { + background-color: #FFFFFF; + color: #333333; +} +``` + +In this example, we've set a white background (`#FFFFFF`) and dark gray text (`#333333`). You can input these color codes into the WebAIM tool to check their contrast ratio. + +Another valuable tool is the TPGi Colour Contrast Analyzer. This desktop application offers more advanced features compared to online tools. It allows you to analyze entire web pages, not just individual color pairs. You can use its color picker to select colors directly from your screen, making it easier to check contrast ratios for existing designs. + +The TPGi Colour Contrast Analyzer also provides simulations for different types of color vision deficiencies, helping you ensure your design is accessible to users with various forms of color blindness. + +To use the TPGi Colour Contrast Analyzer, download and install the application on your computer. Once installed, you can use its eyedropper tool to select colors from your screen and instantly see the contrast ratio. This is particularly useful when working with complex designs or checking contrast on live websites. + +Both these tools are invaluable for creating accessible and readable websites. They help ensure that your text is legible against its background, which is essential for all users but particularly important for those with visual impairments. Remember, while these tools are extremely helpful, they should be used in conjunction with manual testing and user feedback. Different contexts and user needs may require adjustments beyond what automated tools can suggest. + +By regularly using tools like WebAIM's Color Contrast Checker and the TPGi Colour Contrast Analyzer, you can create designs that are not only visually appealing but also inclusive and accessible to a wider audience. This attention to detail in color contrast can significantly improve the user experience of your website for all visitors. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md b/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md index e4b8bc87be0..030a145a1af 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md @@ -1,6 +1,6 @@ --- id: 672c35a79fa53e00de9f2a49 -title: "What Are Best Practices for Hiding Content So It Doesn't Become Inaccessible?" +title: What Are Best Practices for Hiding Content So It Doesn't Become Inaccessible? challengeType: 11 videoId: ycYVairxSdQ dashedName: what-are-best-practices-for-hiding-content-so-it-doesnt-become-inaccessible @@ -8,7 +8,59 @@ dashedName: what-are-best-practices-for-hiding-content-so-it-doesnt-become-inacc # --description-- -Watch the lecture video and answer the questions below. +Watch the video or read the transcript and answer the questions below. + +# --transcript-- + +What are best practices for hiding content so it doesn't become inaccessible? + +Hiding content on a webpage is a common practice in web development, but it's crucial to do it in a way that doesn't compromise accessibility. Different hiding techniques can have varying impacts on how assistive technologies interpret and present the content to users. Let's explore some best practices for hiding content while maintaining accessibility. One common method to hide content is using `display: none`. Here's an example: + +```css +.hidden { + display: none; +} +``` + +While this effectively hides the content visually, it also removes it from the accessibility tree. The accessibility tree is a structure used by assistive technologies, such as screen readers, to interpret and interact with the content on a web page. It represents the content and its semantic meaning in a way that assistive technology can understand and present to the user. + +Using `display: none` means that screen readers and other assistive technologies won’t be able to access this content, as it is not included in the accessibility tree. Therefore, it is important to use this method only when you want to completely remove content from both visual presentation and accessibility. + +Another approach to hiding content is using `visibility: hidden`: + +```css +.hidden { + visibility: hidden; +} +``` + +`visibility: hidden` hides the content visually but keeps it in the document flow, meaning it still occupies space on the page. Like `display: none`, `visibility: hidden` also removes content from the accessibility tree. This means that assistive technologies, like screen readers, will not be able to access the hidden content. Only use `visibility: hidden` when you want to hide content from everyone, including people who use assistive technology. + +For content that should be hidden visually but remain accessible to screen readers, you can use a technique often referred to as "visually hidden" or "screen reader only". Here is an example using the `.sr-only` CSS class which is a common technique used to visually hide content while keeping it accessible to screen readers: + +```css +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} +``` + +In this example, we are using properties like `position`, `clip`, and `white-space`, which you will learn about in future lecture videos. For now, just know that this CSS rule effectively hides the content visually while keeping it accessible to screen readers. It's useful for providing additional context to screen reader users without affecting the visual layout. + +For toggling content visibility, consider using the `hidden` attribute: + +```html + +``` + +The `hidden` attribute is supported by most modern browsers and hides content both visually and from the accessibility tree. It can be easily toggled with JavaScript. Lastly, be cautious about hiding important content. If information is crucial for understanding or using the website, it should be visible and accessible to all users. Only hide content when doing so genuinely enhances the user experience. By following these best practices, you can ensure that your content remains accessible to all users, regardless of how they interact with your website. # --questions--