Website Landmarks and HTML Tags Masterclass

Learn to implement proper website landmarks and HTML tags for improved accessibility and page structure in this 25-minute masterclass. Discover the fundamentals of landmark structure and challenge common assumptions about page builders and WordPress accessibility practices. Explore practical examples demonstrating header and footer landmarks, automatic main element addition, and WordPress block editor implementation. Master the use of the free LandMarker tool to visualize and validate your website's landmark structure, helping users with screen readers and keyboard navigation. Examine real-world scenarios including manual main element addition and single post/product template configurations. Gain insights into creating accessible websites that provide clear navigation paths for assistive technologies while maintaining clean, semantic HTML structure.

Syllabus

00:00 Intro
00:50 Basic landmark structure
05:55 You don’t have to follow what others say
10:13 Example 1 - introduction and header/footer landmarks
12:32 The LANDMARKER Tool !!
15:19 The code snippet for the LandMarker is free
15:48 Example 2 - main is automatically added
16:33 Example 3 - with the standard WordPress block editor
17:21 Example 4 - what if you manually added main to a page?
18:40 Example 5 - Single Post/Product Templates and main
23:12 The LandMarker gives you advice prompts
23:36 Conclusion