WordPress
Web accessibility guidelines to create inclusive websites
Lesson: Web accessibility guidelines to create inclusive websites.
- Color contrast
- Typography and readability: font size, line height, and line length.
- Scale of items/elements: size of different elements on a webpage, such as buttons, text, images, and other interactive components
- Media optimization: optimizing images and multimedia elements
//lesson
Lesson Development Checklist
- [x] Gather any relevant links to Support, Docs, or related material
- [x] Description and Objectives finalized
- [x] Lesson created and announced to the team for review
- [x] Lesson reviewed
- [x] Lesson video submitted and published to WPTV
- [x] Lesson created on Learn.WordPress.org
- [x] Lesson video published to YouTube
- [x] Lesson on Learn.WordPress.org updated with YouTube video
- [x] Lesson published to Learn.WordPress.org
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
https://github.com/user-attachments/assets/97b52c77-9a35-47ac-846f-3a35005b57c7
This piece of content is ready to be reviewed. Copy and paste the following check list into a new comment and tick the items as you review them. This checklist can also be found on Guidelines for Reviewing Content.
Content Review Checklist
- [ ] Learning outcomes/objectives are clear.
- [ ] Technical concepts introduced in the content are accurate.
- [ ] The speed of demonstrations are easy to follow.
- [ ] The narration audio matches what is shown visually.
- [ ] Spelling and grammar are correct.
- [ ] Sound quality is consistent throughout the video.
- [ ] Brand Usage Guidelines and Promotional Guidelines are being followed.
- [ ] Media assets are all in the public domain (CC0).
Remember to also add a comment in your own words. This can be about something to improve in the content, or something you thought was really good about it.
Tutorial/Lessons Review Checklist
Please tick all items you've confirmed:
- [x] Learning outcomes/objectives are clear.
- [x] Technical concepts introduced in the content are accurate.
- [x] The speed of demonstrations are easy to follow.
- [x] The narration audio matches what is shown visually.
- [x] Spelling and grammar are correct.
- [x] Sound quality is consistent throughout the video.
- [x] Brand Usage Guidelines and Promotional Guidelines are being followed.
- [ ] Media assets are all in the public domain (CC0).
Leave an additional comment below with feedback. You can also share what you liked about this Tutorial.
@westnz good pace and intro to this topic. The outline was simple and easy to follow.
Just one minor suggestion. 🙂
- 1:38 where 'fully justified text' is mentioned, perhaps demonstrate what that looks like.
It's not covered in this video, and maybe it can be its own lesson, but I'm curious about overlaps and conflicts that might exist when designing for both mobile and accessibility. Is that an issue?
Tutorial/Lessons Review Checklist
- [x] Learning outcomes/objectives are clear.
- [x] Technical concepts introduced in the content are accurate.
- [x] The speed of demonstrations are easy to follow.
- [x] The narration audio matches what is shown visually.
- [ ] Spelling and grammar are correct.
- [x] Sound quality is consistent throughout the video.
- [x] Brand Usage Guidelines and Promotional Guidelines are being followed.
- [ ] Media assets are all in the public domain (CC0).
The video provides an outstanding introduction to accessibility, impressively organized and visually engaging. Its layout is user-friendly, guiding viewers through the subject matter at a comfortable pace without overwhelming them.
One of its key strengths is the use of graphics over extensive text, which simplifies translation and enhances accessibility for viewers with reading impairments.
Many clear cuts make it easier to translate the video into other languages, as individual segments can be adapted and synchronized seamlessly.
The instructional design, featuring a comprehensive introduction, segmented chapters, a teaser, and a thorough conclusion, is unconventional but integrates seamlessly into the overall structure, reinforcing the video’s educational impact.
Here are some recommendations for further optimization:
Background Color
To support viewers with light sensitivity, consider using a slightly muted background color. This would maintain adequate contrast while reducing brightness, resulting in a more comfortable viewing experience.
Enlargement of Screenshots
A slight increase in screenshot size would improve readability on mobile devices, thereby extending accessibility to a broader audience.
Slide Layout Optimization
00:12;23 - 00:21;25
On this slide, aligning icons consistently and organizing them in horizontal rows or an arc could enhance visual cohesion, making content easier to process quickly.
Chapter Slides
Using hard cuts for chapter slides is effective and simplifies translation. Consider incorporating icons instead of text to enhance accessibility and further reduce translation needs.
00:59;26
Including a brief chapter overview here would enhance the didactic structure, offering viewers a roadmap of upcoming topics and setting expectations.
01:13;15 – Excellent
01:40;19 – Excellent
01:57;20 – Excellent
02:26;15 – Excellent
Typography and Hard Cuts
01:15;18 & 01:40;19
The sharp cuts in these sections work well to support language adaptation without interrupting the visual flow.
Justified Text on Websites
The reference to justified text is a valuable detail. Consider elaborating briefly on why justified text can hinder readability on websites:
"Justified text disrupts the natural flow from line to line, making it challenging for readers to follow." Additional details about word spacing issues could be introduced in a separate lesson.
Cursor Consistency
1:43;15 - 01:50;00
Using a consistent cursor here would help maintain viewer focus on key points.
Keyboard Navigation
02:00;22 - 02:06;27
The visible cursor here might be distracting, which could dilute the message on keyboard navigation. Adding a zoom on the navigation would better emphasize the importance of this feature.
Form Button Contrast
02:21;28
The contrast on the “Submit” button is currently too low, which is particularly concerning for a video centered on accessibility. Enhancing the contrast would be especially beneficial.
WAVE Tool Transition
3:28;06
A hard cut or interchangeable transition at this point would facilitate seamless integration of additional tools as needed, allowing for easy future adaptations.
Teaser
03:36;01
The hard cut here is well-executed and perfectly meets the requirements for adapting the learning path in future versions.
