diff --git a/Libraries/LibWeb/ARIA/ARIAMixin.cpp b/Libraries/LibWeb/ARIA/ARIAMixin.cpp
index 8d03486d394..73c64b2897e 100644
--- a/Libraries/LibWeb/ARIA/ARIAMixin.cpp
+++ b/Libraries/LibWeb/ARIA/ARIAMixin.cpp
@@ -28,6 +28,20 @@ Optional<Role> ARIAMixin::role_from_role_attribute_value() const
         auto role = role_from_string(role_name);
         if (!role.has_value())
             continue;
+        // NOTE: Per https://w3c.github.io/aria/#directory, "Authors are advised to treat directory as deprecated and to
+        // use 'list'." Further, the "directory role == computedrole list" and "div w/directory role == computedrole
+        // list" tests in https://wpt.fyi/results/wai-aria/role/synonym-roles.html expect "list", not "directory".
+        if (role == Role::directory)
+            return Role::list;
+        // NOTE: The "image" role value is a synonym for the older "img" role value; however, the "synonym img role ==
+        // computedrole image" test in https://wpt.fyi/results/wai-aria/role/synonym-roles.html expects "image", not "img".
+        if (role == Role::img)
+            return Role::image;
+        // NOTE: Per https://w3c.github.io/aria/#presentation, "the working group introduced none as the preferred
+        // synonym to the presentation role"; further, https://wpt.fyi/results/wai-aria/role/synonym-roles.html has a
+        // "synonym presentation role == computedrole none" test that expects "none", not "presentation".
+        if (role == Role::presentation)
+            return Role::none;
         if (!is_abstract_role(*role))
             return *role;
     }
diff --git a/Tests/LibWeb/Text/expected/wpt-import/wai-aria/role/synonym-roles.txt b/Tests/LibWeb/Text/expected/wpt-import/wai-aria/role/synonym-roles.txt
new file mode 100644
index 00000000000..636d204d2a5
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/wai-aria/role/synonym-roles.txt
@@ -0,0 +1,12 @@
+Harness status: OK
+
+Found 7 tests
+
+7 Pass
+Pass	image role == computedrole image
+Pass	synonym img role == computedrole image
+Pass	list role == computedrole list
+Pass	directory role == computedrole list
+Pass	div w/directory role == computedrole list
+Pass	none role == computedrole none
+Pass	synonym presentation role == computedrole none
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/wai-aria/role/synonym-roles.html b/Tests/LibWeb/Text/input/wpt-import/wai-aria/role/synonym-roles.html
new file mode 100644
index 00000000000..44eaaa9a7c4
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/wai-aria/role/synonym-roles.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+<head>
+  <title>Region Role Verification Tests</title>
+  <script src="../../resources/testharness.js"></script>
+  <script src="../../resources/testharnessreport.js"></script>
+  <script src="../../resources/testdriver.js"></script>
+  <script src="../../resources/testdriver-vendor.js"></script>
+  <script src="../../resources/testdriver-actions.js"></script>
+  <script src="../../wai-aria/scripts/aria-utils.js"></script>
+</head>
+<body>
+
+<p>Tests synonym roles image/img and none/presentation via <a href="https://w3c.github.io/core-aam/#roleMappingComputedRole">Core-AAM Computed Role</a>.</p>
+
+<!-- spec resolution https://github.com/w3c/core-aam/issues/166 -->
+
+<div role="none" id="none" data-testname="none role == computedrole none" class="ex-generic">x</div><!-- preferred -->
+<div role="presentation" id="presentation" data-testname="synonym presentation role == computedrole none" class="ex-generic">x</div><!-- synonym -->
+
+<div role="image" id="image" data-expectedrole="image" data-testname="image role == computedrole image" class="ex">x</div><!-- preferred -->
+<div role="img" id="img" data-expectedrole="image" data-testname="synonym img role == computedrole image" class="ex">x</div><!-- synonym -->
+
+<!-- `directory` synonym deprecated in ARIA 1.2; these examples should all return computedrole `list` -->
+<ul role="list" id="list2" data-expectedrole="list" data-testname="list role == computedrole list" class="ex"><li>x</li></ul>
+<ul role="directory" id="directory" data-expectedrole="list" data-testname="directory role == computedrole list" class="ex"><li>x</li></ul>
+<div role="directory" id="div" data-expectedrole="list" data-testname="div w/directory role == computedrole list" class="ex"><div role="listitem">x</div></div>
+
+<script>
+AriaUtils.verifyRolesBySelector(".ex");
+AriaUtils.verifyGenericRolesBySelector(".ex-generic");
+</script>
+</body>
+</html>
\ No newline at end of file
