Fix accessibility issues

marshallku · Feb 6, 2024 · 87b1195 · 87b1195
1 parent 530d5e8
commit 87b1195
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/apps/blog/src/components/Footer/index.tsx b/apps/blog/src/components/Footer/index.tsx
@@ -29,12 +29,23 @@ function Footer() {
                 <div className={cx("__contact")}>
                     <a href="https://github.com/marshallku" target="_blank" rel="noopener noreferrer nofollow">
                         <Icon name="github" />
+                        <span className="sr-only">GitHub</span>
+                    </a>
+                    <a
+                        href="https://www.linkedin.com/in/marshallku/"
+                        target="_blank"
+                        rel="noopener noreferrer nofollow"
+                    >
+                        <Icon name="linkedin" />
+                        <span className="sr-only">GitHub</span>
                     </a>
                     <a href="tel:01066531143">
                         <Icon name="call" />
+                        <span className="sr-only">010-6653-1143</span>
                     </a>
                     <a href="mailto:marshall@kakao.com">
                         <Icon name="mail" />
+                        <span className="sr-only">marshall@kakao.com</span>
                     </a>
                 </div>
                 <Typography marginBottom={8}>

diff --git a/apps/blog/src/components/GlobalNavigation/index.tsx b/apps/blog/src/components/GlobalNavigation/index.tsx
@@ -18,6 +18,7 @@ function GlobalNavigation() {
                     <Drawer />
                     <Link href="/" className={cx("__logo")}>
                         <Logo animationOnHover forceWhiteColor />
+                        <span className="sr-only">홈으로 이동</span>
                     </Link>
                 </div>
                 <div className={cx("__center")}>

diff --git a/apps/blog/src/components/Hamburger/index.tsx b/apps/blog/src/components/Hamburger/index.tsx
@@ -21,6 +21,7 @@ function Hamburger({ className, opened, animationOnHover, direction = "right", o
             <div className={cx("__line", "__line--top")} />
             <div className={cx("__line", "__line--middle")} />
             <div className={cx("__line", "__line--bottom")} />
+            <span className="sr-only">{opened ? "메뉴 닫기" : "메뉴 열기"}</span>
         </button>
     );
 }