diff --git a/src/pages/auth/index.tsx b/src/pages/auth/index.tsx
index eb1e5c0..89e40c0 100644
--- a/src/pages/auth/index.tsx
+++ b/src/pages/auth/index.tsx
@@ -19,6 +19,8 @@ export default function LoginPage() {
       {/* 그라데이션 영역 */}
       <div className='relative w-full h-[22vw] min-h-[14rem] max-h-[28rem]'>
         <svg
+          aria-hidden="true" 
+          focusable="false" 
           xmlns='http://www.w3.org/2000/svg'
           viewBox='0 0 402 194'
           className='absolute inset-0 w-full h-full'
diff --git a/src/pages/chatbot/components/ChattingBubble.tsx b/src/pages/chatbot/components/ChattingBubble.tsx
index 6a2f9b7..35b99f4 100644
--- a/src/pages/chatbot/components/ChattingBubble.tsx
+++ b/src/pages/chatbot/components/ChattingBubble.tsx
@@ -32,7 +32,12 @@ interface ChattingProps extends VariantProps<typeof chatBubbleStyle> {
 export default function Chatting({ message, variant }: ChattingProps) {
   return (
     <div className='w-full flex flex-col'>
-      <div className={cn(chatBubbleStyle({ variant }))}>{message}</div>
+      <div 
+        className={cn(chatBubbleStyle({ variant }))}
+        aria-label={variant === 'sent' ? '내 메시지' : '상대방 메시지'}
+      >
+        {message}
+      </div>
     </div>
   );
 }
diff --git a/src/pages/chatbot/components/ChattingInput.tsx b/src/pages/chatbot/components/ChattingInput.tsx
index 6252525..81239eb 100644
--- a/src/pages/chatbot/components/ChattingInput.tsx
+++ b/src/pages/chatbot/components/ChattingInput.tsx
@@ -41,6 +41,7 @@ export default function ChattingInput({ onSend }: ChattingInputProps) {
           onKeyDown={handleKeyDown}
           type='text'
           placeholder='무엇이든 물어보세요'
+          aria-label="채팅 메시지 입력"
           className='w-full bg-transparent outline-none text-label-lg placeholder:text-gray-300 text-gray-900'
         />
       </div>
@@ -48,6 +49,7 @@ export default function ChattingInput({ onSend }: ChattingInputProps) {
       <button
         type='button'
         onClick={handleSubmit}
+        aria-label="메시지 전송"
         className={cn(
           'w-[4rem] h-[4rem] flex justify-center items-center rounded-[2rem] bg-mint-500 flex-shrink-0',
         )}
diff --git a/src/pages/chatbot/index.tsx b/src/pages/chatbot/index.tsx
index f25a3e4..e1a9be0 100644
--- a/src/pages/chatbot/index.tsx
+++ b/src/pages/chatbot/index.tsx
@@ -50,14 +50,23 @@ export default function ChatPage() {
       </div>
 
       {/* 메인 콘텐츠 */}
-      <main className={cn(mainStyle())}>
+      <main 
+        role="log"
+        aria-label="채팅 내용"
+        aria-live="polite"
+        className={cn(mainStyle())}
+      >
         {/* 로고 + 기본 멘트 */}
         <div className={cn(introStyle())}>
           {/* 로고 자리 (임시) */}
-          <div className='w-[6rem] h-[6rem] rounded-full bg-gray-200 flex-shrink-0' />
+          <div 
+            className='w-[6rem] h-[6rem] rounded-full bg-gray-200 flex-shrink-0'
+            aria-hidden="true"
+          />
           <Chatting
             message='안녕하세요, 글다에요! 부천시 여행에 대한 정보를 쉽게 알려드릴게요.'
             variant='received'
+            aria-label="글다의 메시지: 안녕하세요, 글다에요! 부천시 여행에 대한 정보를 쉽게 알려드릴게요."
           />
           <Chatting
             message='원하시는 정보를 물어봐주세요!'
@@ -73,7 +82,7 @@ export default function ChatPage() {
           ))}
 
         {/* 스크롤 */}
-        <div ref={bottomRef} />
+        <div ref={bottomRef} aria-hidden="true" />
       </main>
 
       {/* 입력창 */}
diff --git a/src/pages/events/[id].tsx b/src/pages/events/[id].tsx
index 5d5a95f..467a9b4 100644
--- a/src/pages/events/[id].tsx
+++ b/src/pages/events/[id].tsx
@@ -33,12 +33,13 @@ const EventDetailPage = () => {
         )}
       >
         {/* 행사 기간 */}
-        <div className={cn('flex justify-center w-[18.4rem] mt-[1.3rem]')}>
+        <div aria-label="행사 기간" className={cn('flex justify-center w-[18.4rem] mt-[1.3rem]')}>
           <DateTag startDate={startDate} endDate={endDate} />
         </div>
 
         {/* 대표 이미지 */}
         <section
+          aria-label="행사 대표 이미지"
           className={cn(
             'relative w-full flex justify-center max-w-[35.4rem]',
             'mt-[1rem]'
@@ -55,12 +56,15 @@ const EventDetailPage = () => {
           ) : (
             <div
               className={cn('w-full h-[43.6rem] bg-gray-200 rounded-[2rem]')}
+              role="img"
+              aria-label={`${name} 이미지가 제공되지 않습니다.`}
             />
           )}
         </section>
 
         {/* 행사 카드 */}
         <div
+          aria-label="행사 정보"
           className={cn(
             'flex flex-col items-center w-full gap-[0.8rem]',
             'mt-[0.8rem]'
@@ -76,6 +80,7 @@ const EventDetailPage = () => {
 
           {/* 관련 행사 */}
           <div
+            aria-label="관련 행사 목록"
             className={cn(
               'grid grid-cols-2 gap-[1.2rem] justify-items-center w-full max-w-[35.4rem]'
             )}
diff --git a/src/pages/events/components/DateTag.tsx b/src/pages/events/components/DateTag.tsx
index d0e02a6..dbea90b 100644
--- a/src/pages/events/components/DateTag.tsx
+++ b/src/pages/events/components/DateTag.tsx
@@ -34,8 +34,11 @@ export default function DateTag({
   if (!startDate && !endDate) return null;
 
   return (
-    <div className={cn(dateTagStyle(), className)}>
-       {formatDate(startDate)} ~ {formatDate(endDate)}
+    <div 
+      className={cn(dateTagStyle(), className)}
+      aria-label={`${formatDate(startDate)}부터 ${formatDate(endDate)}까지`}
+    >
+      {formatDate(startDate)} ~ {formatDate(endDate)}
     </div>
   );
 }
diff --git a/src/pages/events/index.tsx b/src/pages/events/index.tsx
index 1511b67..a64f97f 100644
--- a/src/pages/events/index.tsx
+++ b/src/pages/events/index.tsx
@@ -45,12 +45,17 @@ export default function EventPage() {
       <main className='w-full pt-[6.3rem] flex flex-col items-center'>
         {/* 날짜 선택 */}
         <div className='w-full mt-[3.7rem] flex justify-start'>
-          <DatePicker value={date} onChange={setDate} />
+          {/* 스크린리더가 “날짜 선택”으로 읽히도록 추가 */}
+          <label htmlFor="event-date" className="sr-only">
+            행사 날짜 선택
+          </label>
+          <DatePicker ariaLabel="행사 날짜 선택" value={date} onChange={setDate} />
         </div>
 
         {/* 행사카드 & 빈화면 */}
         {filteredEvents.length > 0 ? (
           <section
+            aria-label="이벤트 목록"
             className={cn(
               'grid w-full mt-[1.4rem]',
               'grid-cols-2 gap-x-[1.4rem] gap-y-[1.4rem]',
@@ -74,7 +79,11 @@ export default function EventPage() {
             ))}
           </section>
         ) : (
-          <div className='flex flex-col items-center justify-center text-center mt-[15rem]'>
+          <div 
+            className='flex flex-col items-center justify-center text-center mt-[15rem]'
+            role='status'
+            aria-live='polite'
+          >
             <Icon name='Stamp' size={120} color='gray-200' />
             <h2 className='text-headline-lg-serif text-gray-700 mt-[5rem]'>
               Ooops!
diff --git a/src/pages/loading/index.tsx b/src/pages/loading/index.tsx
index a0ff3b7..959fd07 100644
--- a/src/pages/loading/index.tsx
+++ b/src/pages/loading/index.tsx
@@ -4,8 +4,16 @@ import loading_revised from '../../../public/lottie/loading_revised.json';
 
 export default function Loading() {
   return (
-    <div className='flex flex-col items-center justify-between h-[100vh] bg-white'>
-      <div className='relative w-full h-[22vw] min-h-[14rem] max-h-[28rem]'>
+    <div 
+      className='flex flex-col items-center justify-between h-[100vh] bg-white'
+      role='status'
+      aria-live='polite'
+      aria-label='페이지 로딩 중입니다'  
+    >
+      <div 
+        className='relative w-full h-[22vw] min-h-[14rem] max-h-[28rem]'
+        aria-hidden="true"
+      >
         <svg
           xmlns='http://www.w3.org/2000/svg'
           viewBox='0 0 402 194'
@@ -25,6 +33,7 @@ export default function Loading() {
           loop
           autoplay
           className='w-[18rem] h-[18rem]'
+          aria-hidden="true"
         />
       </div>
 
diff --git a/src/pages/main/Board.tsx b/src/pages/main/Board.tsx
index 2bc8ea7..9df2dc4 100644
--- a/src/pages/main/Board.tsx
+++ b/src/pages/main/Board.tsx
@@ -8,7 +8,11 @@ const Board = () => {
     <div className='relative w-full h-[100vh] bg-[#46d1cd] overflow-auto'>
       <Header title='지도' onClick={() => router.back()} />
 
-      <main className='relative pt-[11.8rem]'>
+      <main 
+        className='relative pt-[11.8rem]'
+        role="main" 
+        aria-label="보드 지도 페이지"
+      >
         <Boardgame />
       </main>
     </div>
diff --git a/src/pages/main/HiddenReward.tsx b/src/pages/main/HiddenReward.tsx
index 0b33b0e..dca203d 100644
--- a/src/pages/main/HiddenReward.tsx
+++ b/src/pages/main/HiddenReward.tsx
@@ -15,6 +15,8 @@ const HiddenReward = () => {
         overflow-hidden
         cursor-pointer
       '
+      role="main"
+      aria-label="히든 리워드 획득 페이지"
       onClick={() =>
         router.push({
           pathname: '/main/PostCard',
diff --git a/src/pages/main/Node.tsx b/src/pages/main/Node.tsx
index e33b54f..c8ab4d4 100644
--- a/src/pages/main/Node.tsx
+++ b/src/pages/main/Node.tsx
@@ -17,7 +17,11 @@ const Board = () => {
         onClick={() => router.back()}
       />
 
-      <main className='relative pt-[14.3rem] gap-[1.2rem] flex flex-col '>
+      <main 
+        className='relative pt-[14.3rem] gap-[1.2rem] flex flex-col '
+        role="main"
+        aria-label={`${label ? label : '노드'} 상세 페이지`}
+      >
         <section className='relative w-full'>
           <Image
             src='/assets/board.svg'
@@ -31,6 +35,7 @@ const Board = () => {
           />
 
           <button
+            aria-label={isStamp ? '스탬프 획득 완료' : '스탬프 찍기'}
             className={cn('absolute bottom-0 right-0', isStamp && 'p-[2.5rem]')}
             onClick={
               !isStamp
@@ -50,6 +55,7 @@ const Board = () => {
               name={isStamp ? 'Stamp' : 'PressStamp'}
               color={isStamp ? 'pink-400' : 'gray-50'}
               size={isStamp ? 100 : 160}
+              aria-hidden="true"
             />
           </button>
         </section>
diff --git a/src/pages/main/PostCard.tsx b/src/pages/main/PostCard.tsx
index 81f9044..d85c811 100644
--- a/src/pages/main/PostCard.tsx
+++ b/src/pages/main/PostCard.tsx
@@ -7,6 +7,8 @@ const PostCard = () => {
 
   return (
     <div
+      role="main"
+      aria-label="엽서 획득 페이지"
       className='
         relative w-full h-[100vh] px-[2.4rem]
         bg-gradient-to-b from-pink-100 to-white
@@ -30,14 +32,16 @@ const PostCard = () => {
         <button
           className='flex items-center justify-center w-[4.8rem] h-[4.8rem]'
           onClick={handleSave}
+          aria-label="엽서 이미지 저장"
         >
-          <Icon name='Save' color='gray-400' size={28} />
+          <Icon name='Save' color='gray-400' size={28} aria-hidden="true" />
         </button>
         <button
           className='flex items-center justify-center w-[4.8rem] h-[4.8rem]'
           onClick={handleShare}
+          aria-label="엽서 공유하기"
         >
-          <Icon name='Export' color='gray-400' size={28} />
+          <Icon name='Export' color='gray-400' size={28} aria-hidden="true" />
         </button>
       </div>
 
diff --git a/src/pages/main/components/board/Boardgame.tsx b/src/pages/main/components/board/Boardgame.tsx
index 3459a06..882473a 100644
--- a/src/pages/main/components/board/Boardgame.tsx
+++ b/src/pages/main/components/board/Boardgame.tsx
@@ -5,44 +5,70 @@ import { useRouter } from 'next/router';
 
 const Boardgame = () => {
   const router = useRouter();
+
+  const handleCellClick = (label: string) => {
+    // TODO : 로그인 여부 체크
+    router.push({
+      pathname: '/main/Node',
+      query: { label },
+    });
+  };
+
   return (
-    <div className='relative w-full  h-full bg-[#46d1cd] overflow-hidden'>
+    <div
+      className="relative w-full h-full bg-[#46d1cd] overflow-hidden"
+      role="region" 
+      aria-label="보드게임 화면"
+    >
       <Image
-        src='/assets/background_.svg'
-        alt='board background'
+        src="/assets/background_.svg"
+        alt=""                       
         width={402}
         height={755}
-        className='w-full h-full object-cover'
+        className="w-full h-full object-cover"
         priority
+        aria-hidden="true"   
       />
 
       <div
-        className='
+        className="
           absolute top-0 left-0
           w-full h-full
           grid grid-cols-4 grid-rows-8 gap-0
           px-[2rem] pb-[1.7rem]
-        '
+        "
+        role="group"
+        aria-label="명소 탐험 보드"
       >
         {boardData.map((row, r) =>
           row.map((cell, c) => {
             const key = `cell-${r}-${c}`;
 
             if (!cell.active) {
-              return <div key={key} className='bg-transparent' />;
+              return (
+                <div
+                  key={key}
+                  className="bg-transparent"
+                  aria-hidden="true"   // 비활성 셀은 낭독 제외
+                />
+              );
             }
 
             return (
               <div
                 key={key}
+                role="button"         
+                tabIndex={0}      
+                aria-label={cell.label ? `${cell.label} 명소로 이동` : '명소로 이동'}
                 onClick={() => {
-                  // TODO : 로그인 여부 체크
-                  router.push({
-                    pathname: '/main/Node',
-                    query: { label: cell.label },
-                  });
+                  if (cell.label) handleCellClick(cell.label);
+                }}
+                onKeyDown={(e) => {
+                  if ((e.key === 'Enter' || e.key === ' ') && cell.label) {
+                    handleCellClick(cell.label);
+                  }
                 }}
-              ></div>
+              />
             );
           }),
         )}
diff --git a/src/pages/main/components/stampBoard/Progress.tsx b/src/pages/main/components/stampBoard/Progress.tsx
index a5e9860..bd7ac86 100644
--- a/src/pages/main/components/stampBoard/Progress.tsx
+++ b/src/pages/main/components/stampBoard/Progress.tsx
@@ -24,6 +24,8 @@ const Progress = ({ className, value, ...props }: ProgressProps) => {
       )}
       value={progressPercent}
       max={100}
+      aria-label="진행률"
+      aria-valuetext={`${Math.round(progressPercent)}% 완료됨`}
       {...props}
     >
       <ProgressPrimitive.Indicator
diff --git a/src/pages/main/components/stampBoard/Stamp.tsx b/src/pages/main/components/stampBoard/Stamp.tsx
index 269ef2f..05cfd85 100644
--- a/src/pages/main/components/stampBoard/Stamp.tsx
+++ b/src/pages/main/components/stampBoard/Stamp.tsx
@@ -11,11 +11,12 @@ const Stamp = ({ index, acquired, className }: StampProps) => {
   if (acquired) {
     return (
       <div
+        role="img"
+        aria-label={`${index + 1}번째 스탬프 ${acquired ? '획득' : '미획득'}`}
         className={cn(
           'flex items-center justify-center w-[2.8rem] h-[2.8rem]',
           className,
         )}
-        aria-label={`${index + 1}번째 스탬프 획득`}
       >
         <Icon name='Stamp' size={28} color='pink-400' aria-hidden />
       </div>
@@ -28,7 +29,7 @@ const Stamp = ({ index, acquired, className }: StampProps) => {
         'rounded-full bg-pink-100 w-[2.8rem] h-[2.8rem]',
         className,
       )}
-      aria-label={`${index + 1}번째 스탬프 미획득`}
+      aria-label={`${index + 1}번째 스탬프 획득`}
     />
   );
 };
diff --git a/src/pages/main/components/video/VideoPlayer.tsx b/src/pages/main/components/video/VideoPlayer.tsx
index fdb13d5..ee96f44 100644
--- a/src/pages/main/components/video/VideoPlayer.tsx
+++ b/src/pages/main/components/video/VideoPlayer.tsx
@@ -10,7 +10,6 @@ export default function VideoPlayer({ src, label, onEnd }: VideoPlayerProps) {
   return (
     <div
       className="relative w-full h-full overflow-hidden"
-      role="region"
       aria-label={label ? `${label} 영상 플레이어` : '비디오 대기 화면'}
     >
       {src ? (
@@ -24,7 +23,6 @@ export default function VideoPlayer({ src, label, onEnd }: VideoPlayerProps) {
           onEnded={onEnd}
           className="w-full h-full rounded-[2rem] object-cover"
           aria-label={`${label} 영상`}
-          aria-describedby="video-description"
         />
       ) : (
         <>
diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx
index 1112c8b..31b0bd9 100644
--- a/src/pages/main/index.tsx
+++ b/src/pages/main/index.tsx
@@ -11,7 +11,7 @@ export default function MainPage() {
       className={cn(
         'px-[2.4rem] bg-white flex flex-col gap-[1rem] h-full pt-[1.3rem] pb-[12rem]',
       )}
-    >
+    > 
       <ControlBar
         isLoggedIn={false}
         onLogin={() => {}}
@@ -23,7 +23,8 @@ export default function MainPage() {
         <section>
           <Image
             src='/assets/bannerMain.svg'
-            alt='...'
+            alt=""
+            aria-hidden="true"
             width={354}
             height={79}
             className='w-full h-auto object-cover block'
@@ -31,6 +32,9 @@ export default function MainPage() {
         </section>
 
         <section
+          role="button"
+          tabIndex={0}
+          aria-label="보드판으로 이동"
           onClick={() => {
             router.push('/main/Board');
           }}
diff --git a/src/pages/map/components/CourseSelectSection.tsx b/src/pages/map/components/CourseSelectSection.tsx
index bff822a..44d847d 100644
--- a/src/pages/map/components/CourseSelectSection.tsx
+++ b/src/pages/map/components/CourseSelectSection.tsx
@@ -41,14 +41,14 @@ export default function CourseSelectSection({
         >
           {Array.isArray(options) &&
             options.map(({ id, label }) => (
-              <CommonButton
-                key={id}
-                label={label}
-                aria-pressed={selected === id}
-                aria-label={`${label} 선택`}
-                variant={selected === id ? 'active' : 'default'}
-                onClick={() => onSelect(selected === id ? null : id)}
-              />
+              <div role="listitem" key={id}>
+                <CommonButton
+                  label={label}
+                  aria-pressed={selected === id}
+                  variant={selected === id ? 'active' : 'default'}
+                  onClick={() => onSelect(selected === id ? null : id)}
+                />
+              </div>
           ))}
         </div>
 
diff --git a/src/pages/map/result/Map.tsx b/src/pages/map/result/Map.tsx
index 1cf2de7..d4078ea 100644
--- a/src/pages/map/result/Map.tsx
+++ b/src/pages/map/result/Map.tsx
@@ -6,13 +6,17 @@ const MapPage = () => {
   const router = useRouter();
 
   return (
-    <div className="w-full h-[100vh] bg-mint-300 overflow-hidden">
+    <main
+      className="w-full h-[100vh] bg-mint-300 overflow-hidden"
+      role="main"
+      aria-label="코스 추천 지도 페이지"
+    >
       <Header
         title="코스 추천"
         onClick={() => router.push('/map/result?from=map')}
       />
       <FullMap />
-    </div>
+    </main>
   );
 };
 
diff --git a/src/pages/map/result/components/ResultMap.tsx b/src/pages/map/result/components/ResultMap.tsx
index ce9123a..a715752 100644
--- a/src/pages/map/result/components/ResultMap.tsx
+++ b/src/pages/map/result/components/ResultMap.tsx
@@ -13,7 +13,6 @@ export default function ResultMap() {
     <section
       className="relative w-full h-[43.6rem] rounded-[2rem] overflow-hidden bg-gray-200"
       role="region"
-      aria-labelledby="map-title"
     >
       <div
         ref={mapRef}
diff --git a/src/pages/map/result/components/TagGroup.tsx b/src/pages/map/result/components/TagGroup.tsx
index 2579b90..5c72a3d 100644
--- a/src/pages/map/result/components/TagGroup.tsx
+++ b/src/pages/map/result/components/TagGroup.tsx
@@ -28,6 +28,12 @@ export default function TagGroup({ viewMode, onToggleView }: TagGroupProps) {
         icon={viewMode === 'list' ? 'MapPin_' : 'ListButton'}
         variant="toggle"
         onClick={onToggleView}
+        aria-pressed={viewMode === 'list'}
+        aria-label={
+          viewMode === 'list'
+            ? '현재 리스트 보기입니다. 지도로 전환하려면 클릭하세요.'
+            : '현재 지도 보기입니다. 리스트로 전환하려면 클릭하세요.'
+        }
       />
     </div>
   );
diff --git a/src/pages/mypage/components/ProfilePhoto.tsx b/src/pages/mypage/components/ProfilePhoto.tsx
index 7a41a2a..55f6fa0 100644
--- a/src/pages/mypage/components/ProfilePhoto.tsx
+++ b/src/pages/mypage/components/ProfilePhoto.tsx
@@ -24,7 +24,7 @@ export default function ProfilePhoto({
   return (
     <div className={cn(baseStyle, className)}>
       {src ? (
-        <img src={src} className='w-full h-full object-cover' />
+        <img src={src} alt="사용자 프로필 사진" className='w-full h-full object-cover' />
       ) : (
         <div className='p-[6.1rem] flex items-center justify-center'>
           <Icon name='User' size={24} color='gray-500' />
diff --git a/src/pages/mypage/events/[id].tsx b/src/pages/mypage/events/[id].tsx
index a148cda..73808fa 100644
--- a/src/pages/mypage/events/[id].tsx
+++ b/src/pages/mypage/events/[id].tsx
@@ -23,6 +23,8 @@ const EventSavePage = () => {
       />
 
       <main
+        role="main"
+        aria-label="저장한 행사 상세 페이지"
         className={cn(
           'flex flex-col items-center justify-start',
           'px-[2.4rem] pt-[calc(10rem+1.4rem)]',
diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx
index 688b3c3..19674e9 100644
--- a/src/pages/mypage/index.tsx
+++ b/src/pages/mypage/index.tsx
@@ -12,16 +12,20 @@ export default function MyPage() {
   };
 
   return (
-    <main className='w-full min-h-screen bg-white flex flex-col items-center'>
+    <main 
+      className='w-full min-h-screen bg-white flex flex-col items-center'
+      role="main"
+      aria-label="마이 페이지"
+    >
       <div className='w-full flex flex-col items-center px-[2.3rem] pb-[2rem]'>
         {/* 프로필 */}
-        <section className='w-full flex flex-col items-center mt-[2.4rem] gap-[1.0rem]'>
+        <section aria-label="프로필 영역" className='w-full flex flex-col items-center mt-[2.4rem] gap-[1.0rem]'>
           <ProfilePhoto/>
           <p className='text-title-md'>이름</p>
         </section>
 
         {/* 저장한 행사 */}
-        <section className='w-full mt-[1.6rem]'>
+        <section aria-label="저장한 행사" className='w-full mt-[1.6rem]'>
           <p className='text-label-lg mb-[1rem] pl-[1rem]'>저장한 행사</p>
           <div className='max-h-[18rem] overflow-y-auto no-scrollbar space-y-[1rem]'>
             <EventCard
@@ -44,7 +48,7 @@ export default function MyPage() {
         </section>
 
         {/* 저장한 엽서 */}
-        <section className='w-full mt-[1.8rem]'>
+        <section aria-label="저장한 엽서" className='w-full mt-[1.8rem]'>
           <p className='text-label-lg mb-[0.6rem] pl-[1rem]'>저장한 엽서</p>
           <PostcardContainer postcards={[]} />
         </section>
diff --git a/src/pages/mypage/postcard/[id].tsx b/src/pages/mypage/postcard/[id].tsx
index 2164a27..a53e796 100644
--- a/src/pages/mypage/postcard/[id].tsx
+++ b/src/pages/mypage/postcard/[id].tsx
@@ -22,6 +22,8 @@ const PostCardSavePage = () => {
       />
 
       <main
+        role="main"
+        aria-label="저장한 엽서 상세 페이지"
         className={cn(
           'flex flex-col items-center justify-start',
           'px-[2.4rem] pt-[25.8rem]',
diff --git a/src/shared/components/container/EventCard.tsx b/src/shared/components/container/EventCard.tsx
index abf0c9a..585610a 100644
--- a/src/shared/components/container/EventCard.tsx
+++ b/src/shared/components/container/EventCard.tsx
@@ -92,6 +92,7 @@ const EventCard = ({
             >
               {name}
             </span>
+
             <Icon
               name='HeartStraight'
               size={20}
@@ -137,8 +138,11 @@ const EventCard = ({
                     ? 'mint-400'
                     : 'gray-300'
                 }
-                fillColor={liked ? 'red-300' : undefined}
+                fillColor={liked ? 'red-300' : undefined}       
                 onClick={handleLikeClick}
+                isInteractive
+                pressed={liked}
+                aria-label={liked ? '좋아요 취소' : '좋아요'}
                 className='cursor-pointer'
               />
             </div>
diff --git a/src/shared/components/datePicker/DatePicker.tsx b/src/shared/components/datePicker/DatePicker.tsx
index 2e95425..348d249 100644
--- a/src/shared/components/datePicker/DatePicker.tsx
+++ b/src/shared/components/datePicker/DatePicker.tsx
@@ -11,6 +11,7 @@ interface DatePickerProps {
   onChange?: (date: Date) => void;
   defaultValue?: Date;
   className?: string;
+  ariaLabel?: string; 
 }
 const toFirstOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1);
 export function DatePicker({
@@ -18,6 +19,7 @@ export function DatePicker({
   onChange,
   defaultValue,
   className,
+  ariaLabel,
   ...calendarProps
 }: DatePickerProps) {
   const [open, setOpen] = useState(false);
@@ -45,7 +47,11 @@ export function DatePicker({
 
   const handleSelect = (d?: Date) => {
     if (!d) return;
-    onChange ? onChange(d) : setInnerDate(d);
+    if (onChange) {
+      onChange(d);
+    } else {
+      setInnerDate(d);
+    }
     setDisplayMonth(toFirstOfMonth(d));
     setOpen(false);
   };
@@ -61,7 +67,9 @@ export function DatePicker({
     <div className={cn('flex flex-col gap-3', className)}>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
-          <Button className='w-[16rem] h-[4rem] justify-between rounded-[500px] text-label-lg text-pink-300 bg-pink-50 border border-pink-100'>
+          <Button 
+            aria-label={ariaLabel}
+            className='w-[16rem] h-[4rem] justify-between rounded-[500px] text-label-lg text-pink-300 bg-pink-50 border border-pink-100'>
             {selected ? selected.toLocaleDateString() : 'Select date'}
             <Icon name='CalendarBlank' color='pink-400' size={14} />
           </Button>
diff --git a/src/shared/components/flipCard/FlipCard.tsx b/src/shared/components/flipCard/FlipCard.tsx
index 010ff51..0108bcf 100644
--- a/src/shared/components/flipCard/FlipCard.tsx
+++ b/src/shared/components/flipCard/FlipCard.tsx
@@ -19,9 +19,19 @@ const FlipCard = ({
 
   return (
     <div
+      role="button"
+      tabIndex={0}
+      aria-label={isFlipped ? '엽서 뒷면 보기' : '엽서 앞면 보기'}
+      aria-pressed={isFlipped}
       className='relative flex justify-center items-center cursor-pointer'
       style={{ width, height }}
       onClick={() => setIsFlipped((prev) => !prev)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          setIsFlipped((prev) => !prev);
+        }
+      }}
     >
       <div className={`flip-card ${isFlipped ? 'flipped' : ''}`}>
         <div className='flip-card-inner'>
diff --git a/src/shared/components/tab/BottomNav.tsx b/src/shared/components/tab/BottomNav.tsx
index b998b91..baaf72d 100644
--- a/src/shared/components/tab/BottomNav.tsx
+++ b/src/shared/components/tab/BottomNav.tsx
@@ -31,7 +31,7 @@ export const BottomNav = () => {
         rounded-[37.07px]
         bg-mint-50 border border-mint-300
       '
-      aria-label='Bottom navigation'
+      aria-label='하단 내비게이션'
     >
       {NAV_ITEMS.map((item) => {
         const isActive =
diff --git a/src/shared/icons/components/icon.tsx b/src/shared/icons/components/icon.tsx
index fe2a3eb..fcd2c72 100644
--- a/src/shared/icons/components/icon.tsx
+++ b/src/shared/icons/components/icon.tsx
@@ -41,6 +41,8 @@ type IconColor =
 
 interface IconProps extends React.SVGProps<SVGSVGElement> {
   name: IconName;
+  isInteractive?: boolean;
+  pressed?: boolean;
   size?: number | string;
   width?: number | string;
   height?: number | string;
@@ -54,6 +56,8 @@ interface IconProps extends React.SVGProps<SVGSVGElement> {
 
 export const Icon = ({
   name,
+  isInteractive = false,
+  pressed,
   size,
   width,
   height,
@@ -64,11 +68,21 @@ export const Icon = ({
   hasRotateAnimation = false,
   ariaHidden = true,
   style,
+  onClick,
+  onKeyDown,
   ...rest
 }: IconProps) => {
   const w = width ?? size ?? 20;
   const h = height ?? size ?? 20;
 
+  const handleKeyDown = (e: React.KeyboardEvent<SVGSVGElement>) => {
+    if (isInteractive && (e.key === 'Enter' || e.key === ' ')) {
+      e.preventDefault();
+      onClick?.(e as unknown as React.MouseEvent<SVGSVGElement, MouseEvent>);
+    }
+    onKeyDown?.(e);
+  };
+
   const rotateClass =
     rotate === 90
       ? 'rotate-90'
@@ -101,7 +115,12 @@ export const Icon = ({
       viewBox="0 0 24 24"
       className={combined}
       style={iconStyle}
+      role={isInteractive ? 'button' : undefined}
+      tabIndex={isInteractive ? 0 : undefined}
+      aria-pressed={isInteractive ? pressed : undefined}
       aria-hidden={ariaHidden}
+      onClick={isInteractive ? onClick : undefined}
+      onKeyDown={isInteractive ? handleKeyDown : undefined}
       {...rest}
     >
       <use href={`#icon-${name}`} />