jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-01-08 12:04:29 -05:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): adding content to css and accessibility review page (#57102)

Browse Source 
Co-authored-by: Bruce Blaser <bbsmooth@gmail.com>
This commit is contained in:
Jessica Wilkins
2024-11-13 12:06:44 -08:00
committed by GitHub
parent 71e0927e13
commit 03484d95d4
2 changed files with 29 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/i18n/locales/english/intro.json
View File

@@ -2244,7 +2244,8 @@
"review-css-accessibility": {
"title": "CSS Accessibility Review",
"intro": [
"Review the CSS Accessibility concepts to prepare for the upcoming quiz."
"Before you are quizzed on CSS and accessibility, you first need to review.",
"Open up this page to review concepts like color contrast tools and accessibility best practices."
]
},
"quiz-css-accessibility": {

27
curriculum/challenges/english/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md
View File

@@ -9,6 +9,33 @@ dashedName: review-css-accessibility
Review the concepts below to prepare for the upcoming quiz.
## Color Contrast Tools
- **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.
- **TPGi Colour Contrast Analyzer**: This is a free color contrast checker that allows you to check if your websites and apps meet the Web Content Accessibility Guidelines (WCAG) standards. This tools also comes with a Color Blindness Simulator feature which allows you to see what your website or app looks like for people with color vision issues.
## Best Practices With CSS and Accessibility
- **`display: none;`**: 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.
- **`visibility: hidden;`**: This property and value hides the content visually but keeps it in the document flow, meaning it still occupies space on the page. These elements will also no longer be read by screen readers because they will have been removed from the accessibility tree.
- **`.sr-only` CSS class**: This 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;
}
```
- **`aria-hidden` attribute**: Used to hide an element from people using assistive technology such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content.
- **`hidden` Attribute**: This attribute is supported by most modern browsers and hides content both visually and from the accessibility tree. It can be easily toggled with JavaScript.
# --assignment--