Join Eve Porcello for an in-depth discussion in this video Accessibility, part of React.js Essential Training.
- [Instructor] In the previous video…we fetched some data from a remote endpoint.…But you may have noticed that this pop up warning…appeared in your terminal,…letting you know that image elements…must have an alt prop,…either with meaningful text or with an empty string…for decorative images.…Now this is coming from Create React App…which has been configured with a linting tool…call jsx-a11y.…So if you're ever working in a project…that's using Create React App…there are several accessibility features baked in.…
So web accessibility is a hugely important task…of any developer.…We want to make our websites as accessible as possible.…And if we use something like Create React App,…it's going to help us and warn us…if we're doing anything that could be improved.…So if we go back to our code…here on line 71 is where we could add that alt text.…So I'm just going to add it here.…And I'm going to set the alt text to product.name.…And this means that if a screen reader…is reading through our images…and through our content,…
- Refactoring elements with JSX
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Conditional rendering
Skill Level Intermediate
1. What Is React?
2. Introduction to React Elements
3. React Components
4. Props and State
5. Additional Library Features
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.