Skip to content

Commit 1f5929b

Browse files
Update o2p03-page-structure.html
Refer the document "Content usable V2 edits" Proposal 9 - Updates to 4.3.3 Use a Clear and Understandable Page Structure (Pattern) (Pattern) Link: https://docs.google.com/document/d/1xnoNFwfjJZbfadFiU-qOW49n4-gODbd_4ff5UDyYFTM/edit?tab=t.0 Changed Sections- What to do, How It Helps, More details, Example (Avoid)
1 parent cd704ec commit 1f5929b

File tree

1 file changed

+29
-3
lines changed

1 file changed

+29
-3
lines changed

design-guide/o2p03-page-structure.html

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,13 @@
What to Do
3636
p>
3737
<p>This can be achieved by:p>
3838
<ul>
39+
<li>
40+
having a single purpose on the page and limit the number of topics per page,
41+
li>
3942
<li>organizing the page content into logical sections,li>
43+
<li>
44+
limiting the number of navigation areas that group links related to a specific topic (such as related resources),
45+
li>
4046
<li>
4147
clearly differentiating regions using dividing lines, whitespace, and
4248
background colors,
@@ -60,9 +66,9 @@
What to Do
6066
<h5 class="coga-5">How it Helpsh5>
6167

6268
<p>
63-
People with <a>cognitive and learning disabilitiesa> may not be able to
64-
use content and applications when the page structure and relationships are
65-
unclear. The user may not complete tasks and miss key information. The user
69+
People with <a>cognitive and learning disabilitiesa> and/or SMI (Severe Mental Illness)
70+
may not be able to use content and applications when the page structure and relationships are
71+
unclear or overwhelming. The user may not complete tasks and miss key information. The user
6672
may not return to pages that are complicated to use and understand.
6773
p>
6874

@@ -103,6 +109,11 @@
How it Helps
103109
easier to process. Examples of common graphical indicators and visual cues
104110
include:
105111
p>
112+
<p><strong>Navigation areas:strong>Ensure each page has navigation areas that are easy to find.
113+
Ensure that users know what to expect in each area. It is also important that users know what to ignore.
114+
Using fewer navigational areas can improve simplicity.
115+
If you have many navigation regions, ensure they are clear and accessible, so that users are not overwhelmed.
116+
p>
106117
<ul>
107118
<li>grouping summaries of content,li>
108119
<li>using a card design using colors or white space,li>
@@ -130,6 +141,14 @@
More Details
130141
The heading structure should create an outline of the document that could
131142
serve as an abstract of the whole document.
132143
li>
144+
<li>
145+
If you have five or more landmarks, check if they are all needed.
146+
Ensure the landmark names are clear and describe their purpose.
147+
It helps all users, including screen reader users, know what to expect in each section.
148+
Make sure the accessible labels for landmarks are easy to understand.
149+
They can be non-visible, but they still need to be clear
150+
(for example, names like "primary," "secondary," and "tertiary" may not make sense).
151+
<li>
133152
ul>
134153
<p>
135154
Icons should be used consistently. It is also important the graphical
@@ -158,6 +177,8 @@
Examples
158177
<ol>
159178
<li>Dense text, with little white space.li>
160179
<li>Unclear page structure and hierarchy.li>
180+
<li>Too many navigational areas that feel confusing and overwhelming.li>
181+
<li>Unclear relationship between links in navigational areas.li>
161182
<li>Lack of visually differentiated sections.li>
162183
<li>
163184
Sections without headings or icons that define sections. For example: A
@@ -169,3 +190,8 @@
Examples
169190
<li>Groups and page sections that are not logical.li>
170191
ol>
171192
section>
193+
p>
194+
<strong>Editorial Note:strong>Need review from John Kp>
195+
<section>
196+
197+
section>

0 commit comments

Comments
 (0)