-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathquickref.html
2248 lines (2246 loc) · 137 KB
/
quickref.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Quick Reference for Web Sustainability Guidelines (WSG)</title>
<script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove" defer></script>
<script class="remove">
/* Chairs Listing */
function addChairs() {
document.querySelectorAll("div.head dt").forEach(function (node) {
if (node.textContent.trim() == "Authors:")
node.textContent = "Chairs:";
});
}
function fixContributors() {
document.querySelectorAll("#gh-contributors li a").forEach(function (node) {
if (node.textContent.indexOf("[bot]") > 0)
node.parentElement.parentElement.removeChild(node.parentElement);
});
}
</script>
<script class="remove">
var respecConfig = {
editors: [
{
name: "Alexander Dawson",
url: "https://alexanderdawson.com/",
w3cid: 49702,
},
],
authors: [
{
name: "Ines Akrap",
url: "https://inesakrap.com/",
company: "Storyblok",
},
{
name: "Mike Gifford",
url: "https://civicactions.com/",
company: "CivicActions",
},
{
name: "Tim Frick",
url: "https://www.mightybytes.com/",
company: "Mightybytes",
w3cid: 62394,
},
],
edDraftURI: "https://w3c.github.io/sustainableweb-wsg/quickref.html",
github: "https://github.com/w3c/sustainableweb-wsg/",
group: "sustainableweb",
latestVersion: "https://w3c.github.io/sustainableweb-wsg/quickref.html",
specStatus: "ED",
postProcess: [addChairs],
}
</script>
<style>
/* Fix for ReSpec table layout and overflow issue. */
table { border-collapse: collapse; border-spacing: 0; }
table tr { border: black solid 1px; padding: 0.5em 0.25em; }
.highlight { background-color: #fffe65; }
</style>
</head>
<body>
<section id="abstract"> <!-- Abstract -->
<p>This document provides a quick reference to the <a href="https://w3c.github.io/sustainableweb-wsg/">Web Sustainability Guidelines</a> (<abbr title="Web Sustainability Guidelines">WSG</abbr>) specification. The content is laid out in a table, with Success Criteria, Impact, Effort, and <abbr title="Global Reporting Initiative">GRI</abbr> ratings noted for each guideline. Checkboxes are provided for those individuals or groups wishing to work through the list (note your progress will not be saved), and a <a href="https://w3c.github.io/sustainableweb-wsg/checklist.pdf">print-friendly</a> (<abbr title="Portable Document Format">PDF</abbr>) version is also available to audit your work as part of an exercise.</p>
<p>Help improve this page by sharing your ideas, suggestions, or comments via <a href="https://github.com/w3c/sustainableweb-wsg/issues/">GitHub issues</a>.</p>
</section>
<section id="sotd" class="override"></section> <!-- Ignore -->
<section> <!-- User Experience Design -->
<h2>User Experience Design</h2>
<table>
<tbody>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#display-any-variables-that-have-a-negative-impact-on-your-project">2.1</a></td>
<td colspan="5">Display any variables that have a negative impact on your project</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.1a"></td><td colspan="5"><label for="2.1a">Any negative external variables affecting a product or service are displayed in a publicly available resource, identifying where your product's sustainable impact can be diminished (systemic design).</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#understand-visitor-requirements-or-constraints-resolving-barriers-to-access">2.2</a></td>
<td colspan="5">Understand visitor requirements or constraints, resolving barriers to access</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.2a"></td><td colspan="5"><label for="2.2a">Primary and secondary target visitors are identified, and their needs are defined through quantitative or qualitative research, testing, or analytics, ensuring your visitors and affected communities remain a close part of the research and testing process.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.2b"></td><td colspan="5"><label for="2.2b">Potential visitor constraints like the device age, operating system version, browser, and connection speeds are accounted for when designing user experiences.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.2c"></td><td colspan="5"><label for="2.2c">The team has researched and identified whether a technical, material, or human constraint might require an adapted version of the product or service that reduces barriers or improves access to content.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.2d"></td><td colspan="5"><label for="2.2d">Barriers to access (pain points or dark / deceptive design patterns) have been identified in the user-research with visitors for removal.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.2e"></td><td colspan="5"><label for="2.2e">All stakeholders including your visitors have been assigned an equitable role in the decision-making process when undertaking research, identifying needs, or conducting iterative design work.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>High</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#understand-the-impact-of-non-visitors">2.3</a></td>
<td colspan="5">Understand the impact of non-visitors</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.3a"></td><td colspan="5"><label for="2.3a">A plan of action has been established for non-users and other stakeholders who might be passively impacted by a digital product or service, such as neighbors accepting parcels, traffic jams due to deliveries, etc. Research their needs and understand how they might be affected.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#consider-sustainability-throughout-the-ideation-process">2.4</a></td>
<td colspan="5">Consider sustainability throughout the ideation process</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.4a"></td><td colspan="5"><label for="2.4a">Branding materials and assets approved during the ideation process must be created and optimized in line with sustainability best practices before internal or external deployment. This also applies to brand refreshes, rebranding, and later enhancements. Branding guidelines detailing the sustainability impact and best-practice deployment of materials and assets should be made publicly available.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.4b"></td><td colspan="5"><label for="2.4b">Wireframes, and rapid prototyping are utilized to quickly build consensus, reduce risk, and lower the number of resources needed to build features.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.4c"></td><td colspan="5"><label for="2.4c">Users are involved within the iteration and design process using participatory design, and when conducting user-testing reach out to your community to help improve your product by allowing them to apply their knowledge and experience to your product or service.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Low</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Low</td><td>Low</td><td>Low</td><td>Low</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#brainstorm-ways-to-resolve-any-stakeholder-issues">2.5</a></td>
<td colspan="5">Brainstorm ways to resolve any stakeholder issues</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.5a"></td><td colspan="5"><label for="2.5a">All stakeholders have been considered using a human-centered approach during the brainstorming process.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.5b"></td><td colspan="5"><label for="2.5b">The planetary needs and ecological boundaries of a project have been taken into account during the brainstorming process. This can include creating non-users, non-human (animal, planet) personas, or climate-specific user stories and sprints.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#minimize-non-essential-content-interactivity-or-journeys">2.6</a></td>
<td colspan="5">Minimize non-essential content, interactivity, or journeys</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.6a"></td><td colspan="5"><label for="2.6a">The path taken to access the service (the initial contact with the website or service) should be as efficient and as simple as possible (time required to complete an action displayed, reducing too much choice, ensuring visitors know what's required at the start of a complex set of steps, etc).</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.6b"></td><td colspan="5"><label for="2.6b">The users journey (when browsing an accessed website or service) should be as smooth as possible. User-research is key, as is building on established design patterns that people already understand.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.6c"></td><td colspan="5"><label for="2.6c">Visitors can complete tasks without distractions or non-essential features getting in the way.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.6d"></td><td colspan="5"><label for="2.6d">Visitors see only information that is relevant to their experience, without non-essential information being displayed on the screen.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.6e"></td><td colspan="5"><label for="2.6e">Ensure that actionable information such as pop-up or modal windows can only be initiated by the visitor.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#use-decorative-design-with-care">2.7</a></td>
<td colspan="5">Use decorative design with care</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.7a"></td><td colspan="5"><label for="2.7a">Decorative design is used only when it improves the user experience, and unnecessary assets or ones that fail to benefit the visitor or sustainability are removed (or rendered optional and disabled by default).</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>High</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>High</td><td>High</td><td>High</td><td>High</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#ensure-that-navigation-and-way-finding-are-well-structured">2.8</a></td>
<td colspan="5">Ensure that navigation and way-finding are well-structured</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.8a"></td><td colspan="5"><label for="2.8a">Provide an accessible, easy-to-use navigation menu with search features that help visitors easily find what they need.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.8b"></td><td colspan="5"><label for="2.8b">Implement an efficient (human-readable) sitemap that is organized and is regularly updated. This helps search engines better index website content, which helps visitors more quickly find what they are looking for.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.8c"></td><td colspan="5"><label for="2.8c">Implement a way for visitors to find out about new content and services.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Low</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Low</td><td>Medium</td><td>Low</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#be-attentive-rather-than-distracting">2.9</a></td>
<td colspan="5">Be attentive rather than distracting</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.9a"></td><td colspan="5"><label for="2.9a">The visitor can easily control how (and when) they receive information to both improve attention and respect with the visitor.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.9b"></td><td colspan="5"><label for="2.9b">Features that don't distract people or unnecessarily lengthen the time they spend using the product or service have a higher priority than others.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.9c"></td><td colspan="5"><label for="2.9c">Avoid using infinite scroll or related attention-keeping tactics.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#use-established-design-patterns-and-appropriate-components">2.10</a></td>
<td colspan="5">Use established design patterns and appropriate components</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.10a"></td><td colspan="5"><label for="2.10a">Provide only essential components visible at the time they are needed. Where appropriate, interfaces should deploy visual styles (patterns) that are easily recognized and used.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Low</td><td>Medium</td><td>Low</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#avoid-being-manipulative-or-deceptive">2.11</a></td>
<td colspan="5">Avoid being manipulative or deceptive</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.11a"></td><td colspan="5"><label for="2.11a">Avoid what are commonly known as dark patterns, deceptive design, or unethical coding techniques, which manipulate visitors into taking actions not necessarily in their best interest (anti-right click, no-copy, requiring an account to purchase, etc).</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.11b"></td><td colspan="5"><label for="2.11b">Advertisements and sponsorships are both ethical and clearly identified with the product or service, only presenting them when they provide real economic and ethical value and don't diminish a visitor's experience.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.11c"></td><td colspan="5"><label for="2.11c">Remove unused and unconsented page tracking.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.11d"></td><td colspan="5"><label for="2.11d">Optimization for search engines, social networks, and third-party services are organically led with good coding practices with user experience the focus, not manipulating the services to gain greater priority through obfuscating content, pages, websites, or applications with redundancy or non-useful and optimized (to the visitor) material.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>High</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Low</td><td>Low</td><td>Low</td><td>Low</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#enable-others-to-understand-and-reuse-your-deliverables">2.12</a></td>
<td colspan="5">Enable others to understand and reuse your deliverables</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.12a"></td><td colspan="5"><label for="2.12a">The deliverables output, including documentation, are used upstream of the project and produced in ways that will allow it to be reused in subsequent projects.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.12b"></td><td colspan="5"><label for="2.12b">Design functionality and technical specifications are documented so that deliverables are comprehensible by the project team and transferable to the development team.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.12c"></td><td colspan="5"><label for="2.12c">Developers have access to code comments and other View Source affordances which can reduce the burden to access, understand, maintain, and utilize production-ready code as this will reduce redundancy and foster an open source culture.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>High</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#use-a-design-system-to-prioritize-interface-consistency">2.13</a></td>
<td colspan="5">Use a design system to prioritize interface consistency</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.13a"></td><td colspan="5"><label for="2.13a">A design system is employed based on web standards and recognizable patterns to mutualize interface components and provide a consistent experience for visitors.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Low</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Low</td><td>Medium</td><td>Low</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#write-with-purpose-in-an-accessible-easy-to-understand-format">2.14</a></td>
<td colspan="5">Write with purpose, in an accessible, easy-to-understand format</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.14a"></td><td colspan="5"><label for="2.14a">Content is written clearly, using plain, inclusive language delivered at an easy-to-understand reading level considering accessibility and internationalization inclusions as required (for example, dyslexia).</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.14b"></td><td colspan="5"><label for="2.14b">Content is formatted to support how people read online, including a clear document structure, visual hierarchy, headings, bulleted lists, line spacing, and so on.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.14c"></td><td colspan="5"><label for="2.14c"><abbr title="Search Engine Optimization">SEO</abbr> has been prioritized from the early design stages and throughout a product or service's lifecycle to improve content findability.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Low</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Low</td><td>Medium</td><td>Low</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#all-images-must-be-optimized-for-sustainability">2.15</a></td>
<td colspan="5">All images must be optimized for sustainability</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.15a"></td><td colspan="5"><label for="2.15a">The need for images has been determined considering the quantity, format, and size necessary for implementation.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.15b"></td><td colspan="5"><label for="2.15b">Resize, optimize, and compress each image (outside the browser), offering different sizes (for each image) for different screen resolutions.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.15c"></td><td colspan="5"><label for="2.15c">Provide Lazy Loading to ensure image assets only load when they are required.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.15d"></td><td colspan="5"><label for="2.15d">Let the visitor select the display size, and provide the option to deactivate images.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.15e"></td><td colspan="5"><label for="2.15e">Set up a media management and use policy to reduce the overall impact of images, with criteria for media compression and file formats.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>High</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>High</td><td>High</td><td>High</td><td>High</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#all-audio-or-video-must-be-optimized-for-sustainability">2.16</a></td>
<td colspan="5">All audio or video must be optimized for sustainability</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.16a"></td><td colspan="5"><label for="2.16a">The need for video or sound (when it adds visitor value, for example, to enhance accessibility) has been determined, and non-informative media (background media), including autoplaying functionality, has been banned or removed.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.16b"></td><td colspan="5"><label for="2.16b">Compress the media according to the visitor's requirements, select the appropriate format, ensure it works across browsers, and avoid embedded player plugins.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.16c"></td><td colspan="5"><label for="2.16c">Any media requiring a lot of data to be downloaded on the client side (including the media itself) has been loaded behind a facade (a non-functional, static, representational element).</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.16d"></td><td colspan="5"><label for="2.16d">Let the visitor control media deactivation, giving a choice of resolutions; all while providing alternative resolutions and formats. Also increase visitor awareness by informing them of the length, format, and weight of the media.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.16e"></td><td colspan="5"><label for="2.16e">Set up a media management and use policy to reduce the overall impact of audio and video, with criteria for media compression and file formats.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>High</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>High</td><td>High</td><td>High</td><td>High</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#animation-must-be-proportionate-and-easy-to-control">2.17</a></td>
<td colspan="5">Animation must be proportionate and easy to control</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.17a"></td><td colspan="5"><label for="2.17a">Use animation only when it adds value to a visitor's experience, and not for decorative elements.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.17b"></td><td colspan="5"><label for="2.17b">Progressively display an appropriate number of animations to avoid overburden the visitor or diminish expected device behavior. This includes setting a maximum number of replays (iterations).</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.17c"></td><td colspan="5"><label for="2.17c">Allow visitors to start, stop, pause, or otherwise control animated content.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>High</td><td>High</td><td>High</td><td>High</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#web-typography-must-be-highly-optimized-and-appropriate">2.18</a></td>
<td colspan="5">Web typography must be highly optimized and appropriate</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.18a"></td><td colspan="5"><label for="2.18a">Use standard system-level (web-safe / pre-installed) fonts as much as possible.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.18b"></td><td colspan="5"><label for="2.18b">The number of fonts, and the variants within typefaces (such as weight and characters) are limited within a project, using the most performant file format available.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#suitable-alternatives-to-any-provided-format-must-be-offered">2.19</a></td>
<td colspan="5">Suitable alternatives to any provided format must be offered</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.19a"></td><td colspan="5"><label for="2.19a">All proprietary file formats (such as PDF) are offered in <abbr title="Hypertext Markup Language">HTML</abbr> for accessibility and to ensure future availability</label>.</td>
</tr>
<tr>
<td><input type="checkbox" id="2.19b"></td><td colspan="5"><label for="2.19b">All custom typefaces (using font-display) are subsetted and offered as part of a font stack with a system font as a backup.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.19c"></td><td colspan="5"><label for="2.19c">All images provide meaningful alternative text for screen reader users (or when images fail to load) accessibility.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.19d"></td><td colspan="5"><label for="2.19d">Audio provides text transcripts of conversations as an alternative to playing the media.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.19e"></td><td colspan="5"><label for="2.19e">Video provides text transcripts (at minimum), subtitles (using WebVTT), and for accessibility best practice, offer closed captions and sign language options.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#provide-accessible-usable-minimal-web-forms">2.20</a></td>
<td colspan="5">Provide accessible, usable, minimal web forms</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.20a"></td><td colspan="5"><label for="2.20a">Remove unnecessary forms and reduce form content to the bare minimum necessary to meet the visitor's needs and the organization's business goals. Clearly communicate why a form is necessary, what its value proposition is, how many steps it will take to complete, and what an organization will do with collected data (informed consent).</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.20b"></td><td colspan="5"><label for="2.20b">Avoid auto-completion / auto-suggest if it would prove unhelpful (to conserve bandwidth) whilst allowing autofill for ease of repeat entry (including the use of helpful tooling such as password managers).</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Low</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Low</td><td>Medium</td><td>Low</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#consider-the-impact-of-visitors-using-non-visual-browsers">2.21</a></td>
<td colspan="5">Consider the impact of visitors using non-visual browsers</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.21a"></td><td colspan="5"><label for="2.21a">Support speech browsing and other non-graphical ways to interact with content that provide alternatives to a visual interface.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Low</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Low</td><td>Medium</td><td>Low</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#provide-useful-notifications-to-improve-the-visitor-s-journey">2.22</a></td>
<td colspan="5">Provide useful notifications to improve the visitor's journey</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.22a"></td><td colspan="5"><label for="2.22a">Remove non-essential notifications while justifying and reducing the practice of e-mailing or text messaging to what is strictly necessary. Useful notifications (such as alerts for new content) should be used with care and restraint.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.22b"></td><td colspan="5"><label for="2.22b">Let the visitor control notifications (for example through the browser, <abbr title="Short Messaging Service">SMS</abbr>, or by email) and adjust messaging preferences, and the option to unsubscribe, logout, and close an account should be available and visible.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.22c"></td><td colspan="5"><label for="2.22c">Clearly explain the result of a potential input through helpful prompts and messages that explain errors, next steps, and so on. This will help manage their expectations.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Low</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Low</td><td>Medium</td><td>Low</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#reduce-the-impact-of-downloadable-or-physical-documents">2.23</a></td>
<td colspan="5">Reduce the impact of downloadable or physical documents</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.23a"></td><td colspan="5"><label for="2.23a">If the production of paper documents is essential, it should be designed to limit its impact to the lowest possible. Create a <abbr title="Cascading StyleSheets">CSS</abbr> Print stylesheet and test it with different types of content. Ensure PDF printing is encouraged over paper-based storage.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.23b"></td><td colspan="5"><label for="2.23b">Provide all downloadable documents in a state of being optimized, compressed, and in a variety of accessible file formats.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.23c"></td><td colspan="5"><label for="2.23c">If a document is likely to be re-used, generate the document once on the server-side (preferably on a cookie-free domain) rather than forcing the effort to be duplicated.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.23d"></td><td colspan="5"><label for="2.23d">Clearly display the document name, a summary, the file size, and the format, allowing the visitor a choice if possible of both the format, and the language (if not the same as the web page). Furthermore, be sure to avoid embedding the document within Web pages (provide a direct link to download or view within the browser instead).</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Low</td><td>Medium</td><td>Low</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#policies-and-processes-must-exist-to-get-stakeholders-invested">2.24</a></td>
<td colspan="5">Policies and processes must exist to get stakeholders invested</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.24a"></td><td colspan="5"><label for="2.24a">The organization has outlined processes it uses to prototype and test new features, product ideas, and user-interface components when applicable with real users who represent various stakeholder perspectives, including people with slow connection, with disabilities, with difficulties using digital services, and so on.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.24b"></td><td colspan="5"><label for="2.24b">The organization has appropriately resourced these processes to support its long-term product viability.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.24c"></td><td colspan="5"><label for="2.24c">The organization has training materials to onboard new product team members to these practices.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.24d"></td><td colspan="5"><label for="2.24d">The organization regularly conducts extensive testing and user interviews to validate whether the released features are meeting both business goals and visitor needs.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>High</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>High</td><td>High</td><td>High</td><td>High</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#audit-and-test-for-bugs-or-issues-that-require-resolving">2.25</a></td>
<td colspan="5">Audit and test for bugs or issues that require resolving</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.25a"></td><td colspan="5"><label for="2.25a">The codebase has been checked for bugs, performance issues have been identified, and accessibility or security problems have been accounted for at either monthly or quarterly timeframes (depending on your scheduling allowance).</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.25b"></td><td colspan="5"><label for="2.25b">Non-regression tests are implemented for all important functionality.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.25c"></td><td colspan="5"><label for="2.25c">Regression testing has been incorporated into each release cycle to ensure that new features don't introduce bugs or otherwise conflict with existing software functionality.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#measure-and-test-for-performance">2.26</a></td>
<td colspan="5">Measure and test for performance</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.26a"></td><td colspan="5"><label for="2.26a">The performance of a website or application, to identify and resolve bottlenecks or issues in the underlying code or infrastructure which could ultimately impact the sustainability of a website or application, are regularly measured with each release-cycle (using tooling or through research and auditing).</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.26b"></td><td colspan="5"><label for="2.26b">Only data required to provide a streamlined and effective user-journey, put policies in place to ensure strict adherence, and comply with relevant accessibility policies and privacy laws, such as the General Data Protection Regulation (<abbr title="General Data Protection Regulation">GDPR</abbr>) are collected.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#ensure-features-provide-maximum-value-for-their-impact">2.27</a></td>
<td colspan="5">Ensure features provide maximum value for their impact</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.27a"></td><td colspan="5"><label for="2.27a">Visitor feedback, adoption, and churn rates are monitored of product or service features and their insights incorporated into future releases.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#verify-that-real-world-users-can-successfully-use-your-work">2.28</a></td>
<td colspan="5">Verify that real-world users can successfully use your work</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.28a"></td><td colspan="5"><label for="2.28a">Usability testing has been incorporated into product cycles and the impact of these tests is routinely measured for future releases.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#check-for-compatibility-or-platform-specific-issues">2.29</a></td>
<td colspan="5">Check for compatibility or platform-specific issues</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="2.29a"></td><td colspan="5"><label for="2.29a">A compatibility policy with obsolete devices and software versions, listing the supported devices brands, operating systems, and browsers (including versions) has been established.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.29b"></td><td colspan="5"><label for="2.29b">Planned obsolescence in software updates is routinely avoided, striving to maintain compatibility for as long as possible and clearly communicating whether an update is evolutionary (large updates that can significantly reduce performance) or corrective (smaller updates that fix bugs or improve security).</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.29c"></td><td colspan="5"><label for="2.29c">The product or service regularly tests with weak, unstable, restricted, and slow connections, old browsers, and devices older than five years to ensure compatibility, reduce digital inequalities, and minimize barriers for users.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.29d"></td><td colspan="5"><label for="2.29d">Device-adaptable methods (such as responsive design) are utilized and interfaces are prototyped to ensure progressive enhancement, content prioritization, and improved accessibility.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="2.29e"></td><td colspan="5"><label for="2.29e">A <abbr title="Progressive Web Application">PWA</abbr> has been either chosen or rejected based on whether it be more sustainable and compatible over a native mobile application.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>High</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>High</td><td>High</td><td>High</td><td>High</td>
</tr>
</tbody>
</table>
</section>
<section> <!-- Web Development -->
<h2>Web Development</h2>
<table>
<tbody>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#set-goals-based-on-potential-impact-considerations">3.1</a></td>
<td colspan="5">Set goals based on potential impact considerations</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="3.1a"></td><td colspan="5"><label for="3.1a">Explicit goals that impact the environment and performance of the service, for example, <abbr title="Hypertext Transfer Protocol">HTTP</abbr> requests, or the amount of <abbr title="General Data Protection Regulation">DOM</abbr> elements that need to be rendered are both set and met.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3.1b"></td><td colspan="5"><label for="3.1b">Because the payload being delivered may not always be equal in terms of energy intensity, operators of websites and applications must ensure that consideration is given for the energy intensity (or unit being evaluated) of each component. For example, non-rendering text is less computational than CSS, which in turn is less process-heavy than JavaScript, which is less resource-heavy than WebGL.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#remove-unnecessary-or-redundant-information">3.2</a></td>
<td colspan="5">Remove unnecessary or redundant information</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="3.2a"></td><td colspan="5"><label for="3.2a">Remove unnecessary whitespace, comments, and other non-essential characters from code and data files to reduce file sizes and improve loading times. This applies to HTML, CSS, JavaScript, JSON, SVG, and other relevant file types.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Low</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Low</td><td>Low</td><td>Low</td><td>Low</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#modularize-bandwidth-heavy-components-within-projects">3.3</a></td>
<td colspan="5">Modularize bandwidth-heavy components within projects</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="3.3a"></td><td colspan="5"><label for="3.3a">Break down bandwidth-heavy components, front-end and back-end into smaller, modular segments that can be loaded only when required.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#tree-shaking-should-be-used-to-remove-unnecessary-code">3.4</a></td>
<td colspan="5">Tree shaking should be used to remove unnecessary code</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="3.4a"></td><td colspan="5"><label for="3.4a">Identify and eliminate unused and dead code within CSS and JavaScript.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#redundancy-and-duplication-in-code-should-be-avoided">3.5</a></td>
<td colspan="5">Redundancy and duplication in code should be avoided</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="3.5a"></td><td colspan="5"><label for="3.5a">Remove or simplify (through rewriting for performance) your code to focus on essential features and have a cleaner, less redundant product (and codebase).</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3.5b"></td><td colspan="5"><label for="3.5b">Improve (iterate) an existing creation rather than constantly redeveloping and redesigning products from scratch (duplication of coding effort) if possible to reduce visitor learning burden and developer impact.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3.5c"></td><td colspan="5"><label for="3.5c">Within CSS and JavaScript, use methodologies (like <abbr title="Block, Element, Modifier">BEM</abbr>) and systems like <abbr title="Don't Repeat Yourself">DRY</abbr> and <abbr title="Write Everything Twice">WET</abbr> to optimize the arrangement and output of your source code.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#third-party-services-should-be-assessed-as-first-parties">3.6</a></td>
<td colspan="5">Third-party services should be assessed as first parties</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="3.6a"></td><td colspan="5"><label for="3.6a">Third-party services (including plugins, widgets, feeds, maps, carousels, etc) have been assessed as early in the ideation or creation process as possible and as few of them are used as possible to reduce the product or service's overall ecological impact, including Scope 3 emissions.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3.6b"></td><td colspan="5"><label for="3.6b">Third-party content (including plugins, widgets, feeds, maps, carousels, chat widgets, etc) that loads or requests resources or functionality from a location outside of the primary location, should be placed behind a click-to-load delay screen (using the "import on interaction" pattern), while alternatives are offered, for instance a link to a contact form as an alternative for a chat widget.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3.6c"></td><td colspan="5"><label for="3.6c">Large CSS libraries and JavaScript frameworks are only be used if a more performant alternative that achieves the same goal cannot be used instead.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3.6d"></td><td colspan="5"><label for="3.6d">Self-hosted content has been prioritized over embedded content from third-party services.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3.6e"></td><td colspan="5"><label for="3.6e">Your own clickable icons and widgets have been created, rather than relying on third-party services to host or allow embedding within your product or service.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3.6f"></td><td colspan="5"><label for="3.6f">Third-party products, services, libraries, and frameworks are often a source of sustainability issues that cannot be controlled or managed by the first-party provider of a service. While many do provide benefits to a website, the need to justify their inclusion must be made not only by those creating the product or service but also be able to be controlled by the consumer. As showcased with cookies, websites or applications can provide a similar mechanism of disabling or refusing non-first-party features (with explanations of their purpose) - unless such features can be proven as critical for functionality.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>High</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>High</td><td>High</td><td>High</td><td>High</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#code-must-follow-good-semantic-practices">3.7</a></td>
<td colspan="5">Code must follow good semantic practices</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="3.7a"></td><td colspan="5"><label for="3.7a">Content must be accurately marked up according to the relevant standard(s).</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3.7b"></td><td colspan="5"><label for="3.7b">Remove optional HTML tags, attribute quotes, and default attributes only when they do not negatively impact functionality, accessibility, or readability. Retain them when they enhance accessibility, maintain clarity (without compromising on performance), or ensure consistent browser rendering.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3.7c"></td><td colspan="5"><label for="3.7c">Avoid using non-standard elements or attributes.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3.7d"></td><td colspan="5"><label for="3.7d">Prefer using standard HTML elements and attributes. Only use custom elements or Web Components if you cannot utilize native HTML elements or if you need tightly regulated control over the implementation of design system components..</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Medium</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#render-blocking-should-be-resolved">3.8</a></td>
<td colspan="5">Render blocking should be resolved</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="3.8a"></td><td colspan="5"><label for="3.8a">All external assets have been deferred or set to async (unless required) to avoid Flash Of Unstyled Content (<abbr title="Flash Of Unstyled Content">FOUC</abbr>).</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3.8b"></td><td colspan="5"><label for="3.8b">If external resources are required on load, their priorities (delivery route) are set correctly.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#information-to-help-understand-the-usefulness-of-a-page-should-exist">3.9</a></td>
<td colspan="5">Information to help understand the usefulness of a page should exist</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="3.9a"></td><td colspan="5"><label for="3.9a">Metadata and microdata for search engines and social media have been optimized.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3.9b"></td><td colspan="5"><label for="3.9b">Search engines are not obstructed, while ill-intentioned robots and scripts are blocked.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3.9c"></td><td colspan="5"><label for="3.9c">Accessibility and usability aids are provided to find content, such as skip links and signposts.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Low</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Low</td><td>Low</td><td>Low</td><td>Low</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#forms-must-validate-for-errors-accounting-for-tooling-requirements">3.10</a></td>
<td colspan="5">Forms must validate for errors, accounting for tooling requirements</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="3.10a"></td><td colspan="5"><label for="3.10a">Errors are identified through live validation as well as upon submission.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3.10b"></td><td colspan="5"><label for="3.10b">Required elements are clearly identified and labeled (for the benefit of voice tools such as screen readers and virtual assistants), and optional elements (if unnecessary) removed.</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3.10c"></td><td colspan="5"><label for="3.10c">Always allow the pasting of content (including passwords) from external sources.</label></td>
</tr>
<tr>
<td></td><td><strong>Impact & Effort</strong></td>
<td>Medium</td><td>Low</td><td></td><td></td>
</tr>
<tr>
<td></td><td><strong>GRI</strong></td>
<td>Medium</td><td>Medium</td><td>Medium</td><td>Medium</td>
</tr>
<tr class="highlight">
<td><a href="https://w3c.github.io/sustainableweb-wsg/#metadata-is-structured-for-machine-readability">3.11</a></td>
<td colspan="5">Metadata is structured for machine readability</td>
</tr>
<tr>
<td></td><td colspan="5"><strong>Success Criterion</strong></td>
</tr>
<tr>
<td><input type="checkbox" id="3.11a"></td><td colspan="5"><label for="3.11a">Include the required title element, plus any optional HTML head elements (such as link).</label></td>