Web Page Setup
In this chapter, you’ll learn how the structure, layout, and foundational code of a webpage can either open the doors or create barriers for your users. Explore practical ways to organize content, set up headings, and structure navigation so your site is usable, predictable, and inclusive from the start.
)
Want to learn more about AudioEye?
Share Course
How Does the Web Page Setup Impact Accessibility?
The way a webpage is set up lays the foundation for accessibility. A well-structured page ensures users can easily navigate, understand, and interact with content. On the other hand, a poorly structured setup can create unnecessary barriers, forcing users to hunt for information or miss it entirely.
A few key factors directly affect accessibility, each shaping how users experience, understand, and trust your site:
Semantic HTML5: These elements provide clear instructions and structure that browsers and screen readers can easily parse and present.
Predictability: Consistent page identification and configuration improve predictability and consistency across web pages, fostering trust and loyalty.
Comprehension: Declaring the page's language and indicating language changes help AI translators, screen readers, and users with disabilities understand the content.
Orientation: Enable users to consume the page's structure in portrait and landscape mode. Some people have their mobile devices mounted and cannot change the orientation.
The bottom line: Good setup isn’t just about design. It’s about making sure everyone can access and benefit from your site.
How Do I Maximize Accessibility When I Code Web Page Setup Elements, Metadata, and Attributes?
Doctype
Specifying the HTML doctype at the beginning of a web page helps browsers render the page correctly and consistently. Without it, browsers may fall back into quirks mode, which can cause unpredictable layouts and interfere with how assistive technologies interpret the content. Declaring a doctype also signals that your code follows modern web standards, improving compatibility across devices.
Coding Best Practice
For most projects, the best practice is to use the simple HTML5 declaration: <!DOCTYPE html>.
WCAG Relevance
Using doctype helps you meet the following WCAG criteria:
1.3.1 Info and relationships: Using the correct doctype helps convey the structure of the content.
4.1.1 Parsing: ensures user agents parse the page correctly, aiding accessibility. This SC was deprecated in WCAG version 2.2 but still applies in WCAG 2.0, referenced in section 508 of the Rehabilitation Act of 1973.
Which of the following impacts the accessibility of a web page?
Hint: Think about the elements that influence how users navigate your content, not just how it looks.
What is a doctype?
Hint: It's something that clearly tells browsers how to render a document or page.
Document Language
The lang attribute in the HTML tag specifies the main document’s language. Using the Lang attribute in other elements allows screen readers, AI translators, and other assistive technologies to interpret and convey the content accurately. Sub-sections using a language different from the main document must have the lang attribute applied to their element, for example, a block quote tag with a lang of "fr."
Coding Best Practice
The HTML tag specifies the document’s language.
<html lang="en">
<blockquote lang="fr">WCAG Relevance
Using the lang attribute helps you meet the following WCAG requirements:
3.1.1 Language of page: Identify the primary language of the page to help screen readers provide correct pronunciation and other linguistic cues.
3.1.2 Language of parts: Indicate when words within the document are in a different language so that assistive technologies can identify the language used; proper nouns, vernacular, and technical terms are exceptions to this criterion.
Page Title
A descriptive and unique page title helps users understand the content and purpose of the page. It appears in the browser tab and helps users navigate between multiple open tabs. It is also the first thing read by assistive technology on page load. The page title and the first-level heading should ideally match, providing a consistent understanding of the page’s content.
Coding Best Practice
The page <title> element is nested in the HTML <head>.
<title>Webpage Main idea - Website name for context</title> WCAG Relevance
2.4.2 Page titled: pages should have titles that describe their topic or purpose, assisting users in orienting themselves within the content.
What’s the difference between document language and page title?
Hint: Remember, one identifies how content is read and understood, the other describes what the page is about.
According to WCAG Relevance, what is the primary benefit of having a descriptive and unique page title?
Hint: Think about how userss, especially those using screen readers or switching between browser tabs, figure out what a page is about before reading the full content.
Which HTML element attribute is crucial for helping AI translators, screen readers, and users with disabilities understand the content by declaring the page's language?
Hint: Remember it's an attribute you add to the <html> tag that tells browsers what language the page is written in.
Allow Zoom and Use Relative Units
Ensuring the web page allows for zoom and uses relative units such as em, rem, and percentages for layout and font sizes will enable users to scale content according to their needs, improving readability.
Coding Best Practice
<meta name="viewport" content="width=device-width, initial-scale=1.0">The viewport meta tag ensures the page will scale appropriately on mobile devices and allows users to zoom in and out as needed.
Here's a simple CSS declaration for plain sans-serif text using relative units that will scale up and down according to user needs:
body {
font-family: sans-serif;
font-size: 1rem;
}Alternative relative units:
em - Relative to the parent element's font size
% - Percentage of the parent's font size (e.g., 100%)
vw/vh - Viewport-relative units (though less common for body text)
The 1rem approach is perfect for accessibility since it respects user font size preferences set in their browser.
WCAG Relevance
1.4.4 Resize text: text should be resizable up to 200% without losing content or functionality.
1.4.10 Reflow: content should reflow to fit different screen sizes and zoom levels without requiring horizontal scrolling.
Allow for Changes in Orientation
Web content should be accessible regardless of the device's orientation (portrait or landscape). Ensuring that the design supports both orientations helps users who might be unable to change their device orientation.
Coding Best Practice
<meta name="viewport" content="width=device-width, initial-scale=1.0">The viewport meta tag ensures the page will adapt to orientation changes automatically when there is no fixed sizing that would prevent this behavior. Use responsive layouts that adapt gracefully to both orientations using CSS Grid, Flexbox, and orientation-agnostic media queries based on screen dimensions rather than orientation restrictions.
WCAG Relevance
1.3.4 Orientation: content should not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific orientation is essential.
Why is better to use relative units like ‘rem’ or ‘em’ for font sizes?
Hint: Think about what happens when someone zooms in to make text easier to read.
Why is page orientation important?
Hint: Think about how users hold or mount their devices.
What is the WCAG criterion that states content should reflow to fit different screen sizes and zoom levels without requiring horizontal scrolling?
Hint: Consider the WCAG success criterion focused on making layouts responsive so users don’t have to scroll side-to-side, even when zooming up to 400% on a small screen.
How Do I Test the Accessibility of a Web Page Setup?
There are a few ways to determine how accessible the setup of your web page is:
Automated tools
Use an HTML validation tool or dev tools inspection to check for:
Doctype declaration
Viewport orientation and zoom are not locked
Page title is present and descriptive
Lang attribute is set
Screen Readers
Manually test your webpage using screen readers such as VoiceOver (Mac), NVDA (Windows), or JAWS (Windows). Be sure the page:
Loads correctly
Announces the page title first
Speaks the language accurately
Mobile Devices
Manually test on multiple devices, with and without the screen reader.
When the device rotates, the content is presented without restriction
Users can zoom the page or application via pinch gesture and a single-point gesture, like a button or slider
How Can I Learn More About Accessible Web Page Setup?
One of the best ways to deepen your understanding is through direct testing. Try using a mobile device to switch between portrait and landscape orientation and zoom in and out. Pay attention to how the layout adapts, whether text remains readable, and if buttons, forms, or navigation still work as expected. These simple checks give you firsthand insight into how accessible (or inaccessible) a webpage setup really is.
Keep Learning
Move to the next chapter: Landmarks and Regions.
)
)