WEB ACCESSIBILITY SPECIALIST (WAS) CERTIFICATION - SEMANTIC
STRUCTURE AND NAVIGATION EXAM WITH VERIFIED ANSWERS
First thing screen readers hear: -- Answer ✔✔ Page <title> (also this is good for SEO)
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
Page <title> rules: -- Answer ✔✔ Page <title> must be present and must contain text. Must
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
be updated when the web address changes. Must be accurate and informative. If a page is the
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
result of a user action or scripted change of context, the text of the <title> SHOULD
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
describe the result or change of context to the user. Should be concise. Should be unique if
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
possible. Unique information should come first. The page <title> SHOULD match (or be
l. l. l. l. l. l. l. l. l. l. l. l. l.
very similar to) the top heading in the main content.
l. l. l. l. l. l. l. l. l. l.
The primary language of the page MUST be identified accurately on the <html> element. --
l. l. l. l. l. l. l. l. l. l. l. l. l. l.
Answer ✔✔ If the language is not specified, or if it the language designation is inaccurate, a
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
screen reader will read the document in the user's default language, which may result in a
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
very bad accent if the page language doesn't match the user's default. Or not
l. l. l. l. l. l. l. l. l. l. l. l. l. l.
understandable.
l.
The primary language of the page MUST be identified with a valid value on the <html>
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
element. -- Answer ✔✔ Using 2 letter language code or LCID string.
l. l. l. l. l. l. l. l. l. l. l. l.
Inline language changes MUST be identified with a valid lang attribute. -- Answer ✔✔ Identify
l. l. l. l. l. l. l. l. l. l. l. l. l. l.
any changes of language within the document. The lang attribute can be applied to block
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
level elements (<div>, <h1>, <p>, <table>, etc.) as well as inline elements (<span>, <a>,
l. l. l. l. l. l. l. l. l. l. l. l. l. l.
<strong>, etc.).
l. l.
Example:
<p>While in Spain, my friend tried to speak Spanish, l. l. l. l. l. l. l. l. l.
but she wasn't very good. Everyone kept saying
l. l. l. l. l. l. l. l.
"<span lang="es">No comprendo nada de lo que dices.</span>"</p> l. l. l. l. l. l. l.
Landmarks SHOULD be used to designate pre-defined parts of the layout (<header>,
l. l. l. l. l. l. l. l. l. l. l.
<nav>, <main>, <footer>, etc.). -- Answer ✔✔ Use either HTML 5 landmarks or their
l. l. l. l. l. l. l. l. l. l. l. l. l. l.
, l. ARIA equivalents to mark sections of the layout in the design, so that screen reader users
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
l. can easily find their way around the layout.
l. l. l. l. l. l. l.
Landmarks are used to designate sections of the overall page design and layout. Headings l. l. l. l. l. l. l. l. l. l. l. l. l.
are used to designate sections within the content.
l. l. l. l. l. l. l. l.
All text SHOULD be contained within a landmark region. -- Answer ✔✔ Labels for headers,
l. l. l. l. l. l. l. l. l. l. l. l. l. l.
mains, sections, articles, asides, footers, etc. Using just <div> isn't enough.
l. l. l. l. l. l. l. l. l. l. l.
Multiple instances of the same type of landmark SHOULD be distinguishable by different
l. l. l. l. l. l. l. l. l. l. l. l.
discernible labels (aria-label or aria-labelledby). -- Answer ✔✔ Example: <nav aria-
l. l. l. l. l. l. l. l. l. l. l.
label="Corporate and legal info"> l. l. l.
A page SHOULD NOT contain more than one instance of each of the following landmarks:
l. l. l. l. l. l. l. l. l. l. l. l. l. l.
banner, main, and contentinfo. -- Answer ✔✔ The ARIA specification states that the
l. l. l. l. l. l. l. l. l. l. l. l. l.
landmarks role="banner", role="main", and role="contentinfo" are meant to be used only
l. l. l. l. l. l. l. l. l. l. l.
once per page. Other ARIA landmarks can be used multiple times. Interestingly, the HMTL
l. l. l. l. l. l. l. l. l. l. l. l. l. l.
5 specification allows multiple instances of the equivalent landmarks: <header>, <main>,
l. l. l. l. l. l. l. l. l. l. l.
and <footer>. The official restriction is only on ARIA landmarks. Even so, it is appropriate in
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
most web designs to have only one each of these landmarks, whether they are specified
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
using ARIA or HTML 5.
l. l. l. l. l.
The total number of landmarks SHOULD be minimized to the extent appropriate for the
l. l. l. l. l. l. l. l. l. l. l. l. l.
content. -- Answer ✔✔ One of the main purposes of landmarks is to allow blind users to
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
quickly find and navigate to the appropriate landmark, so you should keep the total number
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
of landmarks relatively low. If you don't, screen reader users will have to sort through too
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
much extra information to find what they're looking for.
l. l. l. l. l. l. l. l. l.
Landmarks SHOULD be made backward compatible. -- Answer ✔✔ l. l. l. l. l. l. l. l. l.
Text that acts as a heading visually or structurally SHOULD be designated as a true heading
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
in the markup. -- Answer ✔✔ Headings are about logical structure, not visual effects. Big
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
bold text may look like a heading to visual users, but screen readers ignore the size and font-
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
weight of the text, so blind users cannot know a phrase is a heading unless it is marked up in
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
the HTML code as such, using <h1>, <h2>, <h3>, <h4>, <h5>, or <h6>.
l. l. l. l. l. l. l. l. l. l. l. l. l.
STRUCTURE AND NAVIGATION EXAM WITH VERIFIED ANSWERS
First thing screen readers hear: -- Answer ✔✔ Page <title> (also this is good for SEO)
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
Page <title> rules: -- Answer ✔✔ Page <title> must be present and must contain text. Must
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
be updated when the web address changes. Must be accurate and informative. If a page is the
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
result of a user action or scripted change of context, the text of the <title> SHOULD
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
describe the result or change of context to the user. Should be concise. Should be unique if
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
possible. Unique information should come first. The page <title> SHOULD match (or be
l. l. l. l. l. l. l. l. l. l. l. l. l.
very similar to) the top heading in the main content.
l. l. l. l. l. l. l. l. l. l.
The primary language of the page MUST be identified accurately on the <html> element. --
l. l. l. l. l. l. l. l. l. l. l. l. l. l.
Answer ✔✔ If the language is not specified, or if it the language designation is inaccurate, a
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
screen reader will read the document in the user's default language, which may result in a
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
very bad accent if the page language doesn't match the user's default. Or not
l. l. l. l. l. l. l. l. l. l. l. l. l. l.
understandable.
l.
The primary language of the page MUST be identified with a valid value on the <html>
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
element. -- Answer ✔✔ Using 2 letter language code or LCID string.
l. l. l. l. l. l. l. l. l. l. l. l.
Inline language changes MUST be identified with a valid lang attribute. -- Answer ✔✔ Identify
l. l. l. l. l. l. l. l. l. l. l. l. l. l.
any changes of language within the document. The lang attribute can be applied to block
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
level elements (<div>, <h1>, <p>, <table>, etc.) as well as inline elements (<span>, <a>,
l. l. l. l. l. l. l. l. l. l. l. l. l. l.
<strong>, etc.).
l. l.
Example:
<p>While in Spain, my friend tried to speak Spanish, l. l. l. l. l. l. l. l. l.
but she wasn't very good. Everyone kept saying
l. l. l. l. l. l. l. l.
"<span lang="es">No comprendo nada de lo que dices.</span>"</p> l. l. l. l. l. l. l.
Landmarks SHOULD be used to designate pre-defined parts of the layout (<header>,
l. l. l. l. l. l. l. l. l. l. l.
<nav>, <main>, <footer>, etc.). -- Answer ✔✔ Use either HTML 5 landmarks or their
l. l. l. l. l. l. l. l. l. l. l. l. l. l.
, l. ARIA equivalents to mark sections of the layout in the design, so that screen reader users
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
l. can easily find their way around the layout.
l. l. l. l. l. l. l.
Landmarks are used to designate sections of the overall page design and layout. Headings l. l. l. l. l. l. l. l. l. l. l. l. l.
are used to designate sections within the content.
l. l. l. l. l. l. l. l.
All text SHOULD be contained within a landmark region. -- Answer ✔✔ Labels for headers,
l. l. l. l. l. l. l. l. l. l. l. l. l. l.
mains, sections, articles, asides, footers, etc. Using just <div> isn't enough.
l. l. l. l. l. l. l. l. l. l. l.
Multiple instances of the same type of landmark SHOULD be distinguishable by different
l. l. l. l. l. l. l. l. l. l. l. l.
discernible labels (aria-label or aria-labelledby). -- Answer ✔✔ Example: <nav aria-
l. l. l. l. l. l. l. l. l. l. l.
label="Corporate and legal info"> l. l. l.
A page SHOULD NOT contain more than one instance of each of the following landmarks:
l. l. l. l. l. l. l. l. l. l. l. l. l. l.
banner, main, and contentinfo. -- Answer ✔✔ The ARIA specification states that the
l. l. l. l. l. l. l. l. l. l. l. l. l.
landmarks role="banner", role="main", and role="contentinfo" are meant to be used only
l. l. l. l. l. l. l. l. l. l. l.
once per page. Other ARIA landmarks can be used multiple times. Interestingly, the HMTL
l. l. l. l. l. l. l. l. l. l. l. l. l. l.
5 specification allows multiple instances of the equivalent landmarks: <header>, <main>,
l. l. l. l. l. l. l. l. l. l. l.
and <footer>. The official restriction is only on ARIA landmarks. Even so, it is appropriate in
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
most web designs to have only one each of these landmarks, whether they are specified
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
using ARIA or HTML 5.
l. l. l. l. l.
The total number of landmarks SHOULD be minimized to the extent appropriate for the
l. l. l. l. l. l. l. l. l. l. l. l. l.
content. -- Answer ✔✔ One of the main purposes of landmarks is to allow blind users to
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
quickly find and navigate to the appropriate landmark, so you should keep the total number
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
of landmarks relatively low. If you don't, screen reader users will have to sort through too
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
much extra information to find what they're looking for.
l. l. l. l. l. l. l. l. l.
Landmarks SHOULD be made backward compatible. -- Answer ✔✔ l. l. l. l. l. l. l. l. l.
Text that acts as a heading visually or structurally SHOULD be designated as a true heading
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
in the markup. -- Answer ✔✔ Headings are about logical structure, not visual effects. Big
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
bold text may look like a heading to visual users, but screen readers ignore the size and font-
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
weight of the text, so blind users cannot know a phrase is a heading unless it is marked up in
l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l. l.
the HTML code as such, using <h1>, <h2>, <h3>, <h4>, <h5>, or <h6>.
l. l. l. l. l. l. l. l. l. l. l. l. l.