diff --git a/frontend/src/components/Button/Button.tsx b/frontend/src/components/Button/Button.tsx
index 00135be0b..156a4d1a0 100644
--- a/frontend/src/components/Button/Button.tsx
+++ b/frontend/src/components/Button/Button.tsx
@@ -1,3 +1,4 @@
+import { HTMLAttributes, ReactNode } from 'react';
 import {
   Interpolation,
   SerializedStyles,
@@ -5,10 +6,9 @@ import {
   useTheme,
 } from '@emotion/react';
 
-import { ReactNode } from 'react';
 import { shapes } from '@_components/Button/Button.style';
 
-export interface ButtonProps {
+export interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
   shape: 'circle' | 'bar';
   onClick?: () => void;
   disabled?: boolean;
@@ -22,13 +22,14 @@ export interface ButtonProps {
 }
 
 export default function Button(props: ButtonProps) {
-  const { onClick, disabled, children, font } = props;
+  const { onClick, disabled, children, font, ...restProps } = props;
   const theme = useTheme();
   return (
     <button
       css={[shapes({ ...props, theme }), font]}
       onClick={onClick}
       disabled={disabled}
+      {...restProps}
     >
       {children}
     </button>
diff --git a/frontend/src/components/Input/MessagInput/MessageInput.tsx b/frontend/src/components/Input/MessagInput/MessageInput.tsx
index 2aa20539a..67e926e12 100644
--- a/frontend/src/components/Input/MessagInput/MessageInput.tsx
+++ b/frontend/src/components/Input/MessagInput/MessageInput.tsx
@@ -1,8 +1,8 @@
 import * as S from '@_components/Input/MessagInput/MessageInput.style';
-import { useTheme } from '@emotion/react';
 
-import { useState } from 'react';
 import SubmitButton from '@_common/assets/submit_message_button.svg';
+import { useState } from 'react';
+import { useTheme } from '@emotion/react';
 
 export interface MessageInputProps {
   placeHolder: string;
@@ -36,6 +36,7 @@ export default function MessageInput(props: MessageInputProps) {
         css={S.button({ theme })}
         type="submit"
         disabled={!message.trim() || disabled}
+        aria-label={`댓글쓰기 버튼 ${!message.trim() || disabled ? '댓글을 작성하여 버튼을 활성화하세요' : ''}`}
       >
         <SubmitButton />
       </button>
diff --git a/frontend/src/components/KebabMenu/KebabMenu.tsx b/frontend/src/components/KebabMenu/KebabMenu.tsx
index 701a69f51..2df2bfbeb 100644
--- a/frontend/src/components/KebabMenu/KebabMenu.tsx
+++ b/frontend/src/components/KebabMenu/KebabMenu.tsx
@@ -1,5 +1,7 @@
 import * as S from '@_components/KebabMenu/KebabMenu.style';
-import { useRef, useState, FocusEvent } from 'react';
+
+import { FocusEvent, useRef, useState } from 'react';
+
 import KebabButton from '@_common/assets/kebab_menu.svg';
 import { useTheme } from '@emotion/react';
 
@@ -35,7 +37,12 @@ export default function KebabMenu(props: KebabMenuProps) {
 
   return (
     <div css={S.kebabContainer({ theme })}>
-      <button onClick={handleKebabToggle} onBlur={handleKebabClose}>
+      <button
+        onClick={handleKebabToggle}
+        onBlur={handleKebabClose}
+        aria-label="케밥 메뉴 활성화 버튼"
+        aria-checked={isKebabOpen}
+      >
         <KebabButton />
       </button>
       {isKebabOpen && (
@@ -43,6 +50,7 @@ export default function KebabMenu(props: KebabMenuProps) {
           {options.map((option) => {
             return (
               <button
+                aria-label={option.name}
                 key={option.name}
                 onClick={() => handleOptionClick(option.onClick)}
                 disabled={option.disabled}
diff --git a/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.style.ts b/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.style.ts
new file mode 100644
index 000000000..83906f9a0
--- /dev/null
+++ b/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.style.ts
@@ -0,0 +1,6 @@
+import { Theme, css } from '@emotion/react';
+
+export const explanationSection = ({ theme }: { theme: Theme }) => css`
+  margin: 0 5rem;
+  ${theme.typography.s1}
+`;
diff --git a/frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx b/frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx
index 063640170..724e3fd4b 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx
+++ b/frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx
@@ -1,4 +1,7 @@
+import { MoimInfo, Role } from '@_types/index';
 import { useNavigate, useParams } from 'react-router-dom';
+
+import BackLogo from '@_common/assets/back.svg';
 import Button from '@_components/Button/Button';
 import CommentList from './components/CommentList/CommentList';
 import CommentListSkeleton from './components/CommentList/CommentListSkeleton';
@@ -28,7 +31,48 @@ import useOpenChat from '@_hooks/mutaions/useOpenChat';
 import useReopenMoim from '@_hooks/mutaions/useReopenMoim';
 import { useTheme } from '@emotion/react';
 import useZzimMine from '@_hooks/queries/useZzimMine';
-import BackArrowButton from '@_components/Button/BackArrowButton/BackArrowButton';
+
+const getButtonMessage = (moim: MoimInfo, role: Role) => {
+  if (moim.status === 'CANCELED') return '취소된 모임이에요';
+
+  if (role === 'MOIMER') {
+    if (moim.status === 'MOIMING') return '모집 완료하기';
+    if (moim.status === 'COMPLETED') return '채팅방 열기(이동하기)';
+    return '';
+  }
+  if (role === 'NON_MOIMEE') {
+    if (moim.status === 'MOIMING') return '참여하기';
+    if (moim.status === 'COMPLETED') return '모집이 완료되었어요';
+    return '';
+  }
+  if (role === 'MOIMEE') {
+    if (moim.status === 'MOIMING') return '방장이 채팅방을 만들지 않았습니다';
+    if (moim.status === 'COMPLETED') return '채팅방으로 가기';
+    return '';
+  }
+  return '';
+};
+
+const getButtonDisabled = (moim: MoimInfo, role: Role) => {
+  if (moim.status === 'CANCELED') return true;
+
+  if (role === 'MOIMER') {
+    if (moim.status === 'MOIMING') return false;
+    if (moim.status === 'COMPLETED') return false;
+    return true;
+  }
+  if (role === 'NON_MOIMEE') {
+    if (moim.status === 'MOIMING') return false;
+    if (moim.status === 'COMPLETED') return true;
+    return true;
+  }
+  if (role === 'MOIMEE') {
+    if (moim.status === 'MOIMING') return true;
+    if (moim.status === 'COMPLETED') return false;
+    return true;
+  }
+  return true;
+};
 
 export default function MoimDetailPage() {
   const navigate = useNavigate();
@@ -38,11 +82,11 @@ export default function MoimDetailPage() {
   const moimId = Number(params.moimId);
 
   const { moim, isLoading: isMoimLoading } = useMoim(moimId);
-  const { role, isChamyoMineLoading } = useChamyoMine(moimId);
+  const { role } = useChamyoMine(moimId);
   const { isZzimed, isZzimMineLoading } = useZzimMine(moimId);
   const { participants, chamyoAllIsLoading } = useChamyoAll(moimId);
   const { mutate: changZzim } = useChangeZzim();
-  const { mutate, isPending: isPendingJoinMoim } = useJoinMoim(() => {
+  const { mutate: joinMoim } = useJoinMoim(() => {
     navigate(GET_ROUTES.nowDarakbang.moimParticipateComplete());
   });
 
@@ -51,49 +95,64 @@ export default function MoimDetailPage() {
 
   const { mutate: ReopenMoim, isPending: isPendingReopenMoim } =
     useReopenMoim();
-  const { mutate: completeMoim, isPending: isPendingCompleteMoim } =
-    useCompleteMoin();
+  const { mutate: completeMoim } = useCompleteMoin();
   const { mutate: cancelChamyo, isPending: isPendingCancelChamyo } =
     useCancelChamyo();
-  const { mutate: openChat, isPending: isPendingOpenChat } = useOpenChat(
-    (chatRoomId: number) =>
-      navigate(GET_ROUTES.nowDarakbang.chattingRoom(chatRoomId)),
+  const { mutate: openChat } = useOpenChat((chatRoomId: number) =>
+    navigate(GET_ROUTES.nowDarakbang.chattingRoom(chatRoomId)),
   );
 
   const kebabMenu = useMemo(() => {
-    return role === 'MOIMER' ? (
-      <KebabMenu
-        options={[
-          {
-            name: '모임 수정하기',
-            disabled: false,
-            onClick: () =>
-              navigate(GET_ROUTES.nowDarakbang.modify(moimId), {
-                state: {
-                  ...moim,
-                  moimId,
-                },
-              }),
-          },
-          {
-            name: '모임 취소하기',
-            disabled: isPendingCancelMoim,
-            onClick: () => cancelMoim(moimId),
-          },
-          {
-            name: '모임 다시 열기',
-            disabled: isPendingReopenMoim,
-            onClick: () => ReopenMoim(moimId),
-          },
-        ]}
-      />
-    ) : (
+    if (role === 'MOIMER') {
+      return (
+        <KebabMenu
+          options={[
+            {
+              name: '모임 수정하기',
+              disabled: false,
+              onClick: () =>
+                navigate(GET_ROUTES.nowDarakbang.modify(moimId), {
+                  state: {
+                    ...moim,
+                    moimId,
+                  },
+                }),
+            },
+            {
+              name: '모임 취소하기',
+              disabled: isPendingCancelMoim,
+              onClick: () => cancelMoim(moimId),
+            },
+            {
+              name: '모임 다시 열기',
+              disabled: isPendingReopenMoim,
+              onClick: () => ReopenMoim(moimId),
+            },
+          ]}
+        />
+      );
+    }
+    if (role === 'MOIMEE') {
+      return (
+        <KebabMenu
+          options={[
+            {
+              name: '참여 취소하기',
+              disabled: isPendingCancelChamyo,
+              onClick: () => cancelChamyo(moimId),
+            },
+          ]}
+        />
+      );
+    }
+
+    return (
       <KebabMenu
         options={[
           {
-            name: '참여 취소하기',
+            name: '사용할 수 있는 메뉴가 없습니다',
             disabled: isPendingCancelChamyo,
-            onClick: () => cancelChamyo(moimId),
+            onClick: () => {},
           },
         ]}
       />
@@ -111,82 +170,39 @@ export default function MoimDetailPage() {
     role,
   ]);
 
-  const button = useMemo(() => {
-    return isChamyoMineLoading ? (
-      ''
-    ) : role === 'MOIMER' ? (
-      moim?.status === 'MOIMING' ? (
-        <Button
-          shape="bar"
-          disabled={false || isPendingCompleteMoim}
-          onClick={() => completeMoim(moimId)}
-        >
-          모집 완료하기
-        </Button>
-      ) : moim?.status === 'CANCELED' ? (
-        <Button shape="bar" disabled={true}>
-          취소된 모임이예요
-        </Button>
-      ) : (
-        <Button
-          shape="bar"
-          disabled={false || isPendingOpenChat}
-          onClick={() => openChat(moimId)}
-        >
-          채팅방 열기(이동하기)
-        </Button>
-      )
-    ) : role === 'NON_MOIMEE' ? (
-      moim?.status === 'MOIMING' ? (
-        <Button
-          shape="bar"
-          disabled={false || isPendingJoinMoim}
-          onClick={() => mutate(moimId)}
-        >
-          참여하기
-        </Button>
-      ) : moim?.status === 'COMPLETED' ? (
-        <Button shape="bar" disabled={true}>
-          모집이 완료되었어요
-        </Button>
-      ) : (
-        <Button shape="bar" disabled={true}>
-          취소된 모임이예요
-        </Button>
-      )
-    ) : moim?.status === 'MOIMING' ? (
-      <Button shape="bar" disabled={true}>
-        방장이 채팅방을 만들지 않았습니다
-      </Button>
-    ) : (
-      <Button
-        shape="bar"
-        disabled={false}
-        onClick={() => navigate(GET_ROUTES.nowDarakbang.chattingRoom(moimId))}
-      >
-        채팅방으로 가기
-      </Button>
-    );
-  }, [
-    completeMoim,
-    isPendingCompleteMoim,
-    isPendingJoinMoim,
-    isPendingOpenChat,
-    moim?.status,
-    moimId,
-    navigate,
-    mutate,
-    openChat,
-    role,
-    isChamyoMineLoading,
-  ]);
+  const buttonClickHandler = (moim: MoimInfo, role: Role) => {
+    if (moim.status === 'CANCELED') return;
+
+    if (role === 'MOIMER') {
+      if (moim.status === 'MOIMING') return completeMoim(moimId);
+      if (moim.status === 'COMPLETED') return openChat(moimId);
+      return;
+    }
+    if (role === 'NON_MOIMEE') {
+      if (moim.status === 'MOIMING') return joinMoim(moimId);
+      if (moim.status === 'COMPLETED') return;
+      return;
+    }
+    if (role === 'MOIMEE') {
+      if (moim.status === 'MOIMING') return;
+      if (moim.status === 'COMPLETED')
+        return navigate(GET_ROUTES.nowDarakbang.chattingRoom(moimId));
+      return;
+    }
+    return;
+  };
+
   return (
     <InformationLayout>
       <InformationLayout.Header>
         <InformationLayout.Header.Left>
-          <BackArrowButton
+          <div
+            role="button"
+            aria-label="뒤로가기"
             onClick={() => navigate(GET_ROUTES.nowDarakbang.main())}
-          />
+          >
+            <BackLogo />
+          </div>
         </InformationLayout.Header.Left>
         <InformationLayout.Header.Right>
           {isZzimMineLoading && (
@@ -194,6 +210,8 @@ export default function MoimDetailPage() {
           )}
           {!isZzimMineLoading && (
             <ZzimButton
+              aria-label={`찜 토글 버튼`}
+              aria-pressed={!!isZzimed}
               isZzimed={!!isZzimed}
               onClick={() => changZzim(moimId)}
             />
@@ -241,7 +259,16 @@ export default function MoimDetailPage() {
         )}
       </InformationLayout.ContentContainer>
       <InformationLayout.BottomButtonWrapper>
-        {button}
+        {moim && role && (
+          <Button
+            shape="bar"
+            disabled={getButtonDisabled(moim, role)}
+            onClick={() => buttonClickHandler(moim, role)}
+            aria-label={getButtonMessage(moim, role)}
+          >
+            {getButtonMessage(moim, role)}
+          </Button>
+        )}
       </InformationLayout.BottomButtonWrapper>
     </InformationLayout>
   );
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.style.ts b/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.style.ts
index d464b8e48..731bd566f 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.style.ts
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.style.ts
@@ -1,4 +1,4 @@
-import { css, Theme } from '@emotion/react';
+import { Theme, css } from '@emotion/react';
 
 export const commentContainer = () => css`
   display: flex;
@@ -26,20 +26,22 @@ export const profileImage = () => css`
 
 export const commnetBox = () => css`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+
   width: 100%;
   margin-left: 1rem;
 `;
-export const commnetHeader = () => css`
+export const commentLeft = () => css`
   display: flex;
+  flex-direction: column;
   gap: 5px;
   align-items: flex-start;
   justify-content: space-between;
-
-  width: 100%;
 `;
 
-export const commentHeaderLeft = () => css`
+export const commentLeftHeader = () => css`
   display: flex;
   gap: 0.7rem;
   align-items: flex-start;
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.tsx
index 09d2b1509..64f86ccf1 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.tsx
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.tsx
@@ -1,10 +1,12 @@
 import * as S from './CommentCard.style';
 
+import { formatHhmmToKorean, formatYyyymmddToKorean } from '@_utils/formatters';
+
 import { Comment } from '@_types/index';
 import { HTMLProps } from 'react';
-import { useTheme } from '@emotion/react';
 import ProfileFrame from '@_components/ProfileFrame/ProfileFrame';
 import useNicknameWidthEffect from '@_hooks/useNicknameWidthEffect';
+import { useTheme } from '@emotion/react';
 
 export interface CommentCardProps extends HTMLProps<HTMLDivElement> {
   comment: Comment;
@@ -12,6 +14,13 @@ export interface CommentCardProps extends HTMLProps<HTMLDivElement> {
   isChecked?: boolean;
   isChild?: boolean;
 }
+const getDateTimeAriaLabel = (string: string) => {
+  const [date, time] = string.split(' ');
+  const dateLabel = formatYyyymmddToKorean(date, '-', true);
+  const timeLabel = formatHhmmToKorean(time, ':');
+
+  return `${dateLabel} ${timeLabel}`;
+};
 
 export default function CommentCard(props: CommentCardProps) {
   const {
@@ -29,30 +38,46 @@ export default function CommentCard(props: CommentCardProps) {
   const theme = useTheme();
 
   return (
-    <div css={S.commentContainer()}>
-      <div css={S.commentWrapper({ theme, isChecked })}>
-        <ProfileFrame width={3} height={3} borderWidth={0} src={profile} />
+    <ul css={S.commentContainer()}>
+      <li css={S.commentWrapper({ theme, isChecked })}>
+        <ProfileFrame
+          width={3}
+          height={3}
+          borderWidth={0}
+          src={profile}
+          aria-hidden
+        />
 
         <div css={S.commnetBox()}>
-          <div css={S.commnetHeader}>
-            <div css={S.commentHeaderLeft}>
+          <div css={S.commentLeft}>
+            <div css={S.commentLeftHeader}>
               <div
                 ref={nicknameRef}
                 css={[S.commentNickname, theme.typography.small]}
+                aria-label={nickname}
               >
                 {formattedNickname}
               </div>
-              <div css={S.timestamp({ theme })}>{dateTime}</div>
-            </div>
-            {!isChild && (
-              <div css={S.commentHeaderRight({ theme })}>
-                <button onClick={onWriteClick}>답글쓰기</button>
+              <div
+                css={S.timestamp({ theme })}
+                aria-label={getDateTimeAriaLabel(dateTime)}
+              >
+                {dateTime}
               </div>
-            )}
+            </div>
+            <div css={S.contentBox({ theme })} aria-label={content}>
+              {content}
+            </div>
           </div>
-          <div css={S.contentBox({ theme })}>{content}</div>
+          {!isChild && (
+            <div css={S.commentHeaderRight({ theme })}>
+              <button onClick={onWriteClick} aria-label="답글쓰기">
+                답글쓰기
+              </button>
+            </div>
+          )}
         </div>
-      </div>
+      </li>
       {children && (
         <div css={S.commentChildBox()}>
           {children.map((childComment) => (
@@ -64,6 +89,6 @@ export default function CommentCard(props: CommentCardProps) {
           ))}
         </div>
       )}
-    </div>
+    </ul>
   );
 }
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCardSkeleton.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCardSkeleton.tsx
index 77f0128f4..558d5959a 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCardSkeleton.tsx
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCardSkeleton.tsx
@@ -11,8 +11,8 @@ export default function CommentCardSkeleton() {
       <div css={S.commentWrapper({ theme, isChecked: false })}>
         <SkeletonPiece width="3rem" height="3rem" />
         <div css={S.commnetBox()}>
-          <div css={S.commnetHeader}>
-            <div css={S.commentHeaderLeft}>
+          <div css={S.commentLeft}>
+            <div css={S.commentLeftHeader}>
               <SkeletonPiece width="4.1rem" height="1.6rem" />
               <SkeletonPiece width="8.3rem" height="1.4rem" />
             </div>
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/MoimDescription/MoimDescription.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/MoimDescription/MoimDescription.tsx
index 375af85cc..ca039de24 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/MoimDescription/MoimDescription.tsx
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/MoimDescription/MoimDescription.tsx
@@ -1,5 +1,6 @@
-import { ReactNode } from 'react';
 import * as S from './MoimDescription.style';
+
+import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
 
 interface MoimDescriptionProps {
@@ -18,8 +19,15 @@ export default function MoimDescription(props: MoimDescriptionProps) {
 
   return (
     <div css={S.containerStyle({ theme, color })}>
-      <h2 css={S.titleStyle({ theme })}>{title}</h2>
-      <div css={S.descriptionStyle({ theme })}>{children}</div>
+      <h2 css={S.titleStyle({ theme })} aria-label={title}>
+        {title}
+      </h2>
+      <div
+        css={S.descriptionStyle({ theme })}
+        aria-label={typeof children === 'string' ? children : ''}
+      >
+        {children}
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/MoimInformation/MoimInformation.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/MoimInformation/MoimInformation.tsx
index 52c927bf7..0ee015198 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/MoimInformation/MoimInformation.tsx
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/MoimInformation/MoimInformation.tsx
@@ -17,39 +17,45 @@ export default function MoimInformation(props: MoimInformationProps) {
   const theme = useTheme();
 
   return (
-    <div css={S.containerStyle()}>
-      <h2 css={S.titleStyle({ theme })}>모임 정보</h2>
+    <section css={S.containerStyle()}>
+      <h2 css={S.titleStyle({ theme })} aria-label="모임 정보">
+        모임 정보
+      </h2>
       <div css={S.cardStyle({ theme })}>
         {date && (
           <div css={S.rowStyle({ theme })}>
-            <span>날짜</span>
-            <span>{formatYyyymmddToKorean(date)}</span>
+            <span aria-label="날짜">날짜</span>
+            <span aria-label={formatYyyymmddToKorean(date)}>
+              {formatYyyymmddToKorean(date)}
+            </span>
           </div>
         )}
 
         {time && (
           <div css={S.rowStyle({ theme })}>
-            <span>시간</span>
-            <span>{formatHhmmToKorean(time)}</span>
+            <span aria-label="시간">시간</span>
+            <span aria-label={formatHhmmToKorean(time)}>
+              {formatHhmmToKorean(time)}
+            </span>
           </div>
         )}
 
         {place && (
           <div css={S.rowStyle({ theme })}>
-            <span>장소</span>
-            <span>{place}</span>
+            <span aria-label="장소">장소</span>
+            <span aria-label={place}>{place}</span>
           </div>
         )}
 
         <div css={S.rowStyle({ theme })}>
-          <span>최대 인원</span>
-          <span>{maxPeople}명</span>
+          <span aria-label="최대 인원">최대 인원</span>
+          <span aria-label={`${maxPeople}명`}>{maxPeople}명</span>
         </div>
         <div css={S.rowStyle({ theme })}>
-          <span>현재 참여 인원</span>
-          <span>{currentPeople}명</span>
+          <span aria-label="현재 참여 인원">현재 참여 인원</span>
+          <span aria-label={`${currentPeople}명`}>{currentPeople}명</span>
         </div>
       </div>
-    </div>
+    </section>
   );
 }
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/MoimSummary/MoimSummary.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/MoimSummary/MoimSummary.tsx
index 8e4617797..42731e6f8 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/MoimSummary/MoimSummary.tsx
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/MoimSummary/MoimSummary.tsx
@@ -1,12 +1,21 @@
-import { MoimInfo } from '@_types/index';
 import * as S from './MoimSummary.style';
-import { useTheme } from '@emotion/react';
+
+import { MoimInfo, MoimStatus } from '@_types/index';
+
 import Tag from '@_pages/Moim/MoimDetailPage/components/Tag/Tag';
+import { useTheme } from '@emotion/react';
 
 interface MoimSummaryProps {
   moimInfo: Pick<MoimInfo, 'title' | 'status'>;
 }
 
+const getStatusKoKR = (status: MoimStatus) => {
+  if (status === 'CANCELED') return '모임 취소';
+  if (status === 'COMPLETED') return '모집 완료';
+  if (status === 'MOIMING') return '모임 중';
+  return '';
+};
+
 export default function MoimSummary(props: MoimSummaryProps) {
   const theme = useTheme();
   const {
@@ -16,8 +25,13 @@ export default function MoimSummary(props: MoimSummaryProps) {
   return (
     <div css={S.containerStyle}>
       <div css={S.titleBox()}>
-        <h1 css={S.title({ theme })}>{title}</h1>
-        <Tag status={status}></Tag>
+        <h1 css={S.title({ theme })} aria-label={'모임 제목' + title}>
+          {title}
+        </h1>
+        <Tag
+          status={status}
+          aria-label={'모임 상태 ' + getStatusKoKR(status)}
+        ></Tag>
       </div>
     </div>
   );
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx
index cd2344dec..6af542f51 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx
@@ -1,8 +1,9 @@
 import * as S from './ProfileCard.style';
-import { useTheme } from '@emotion/react';
+
 import { Participation } from '@_types/index';
 import ProfileFrame from '../../../../../../components/ProfileFrame/ProfileFrame';
 import useNicknameWidthEffect from '@_hooks/useNicknameWidthEffect';
+import { useTheme } from '@emotion/react';
 
 interface ProfileCardProps {
   info: Participation;
@@ -18,11 +19,17 @@ export default function ProfileCard(props: ProfileCardProps) {
   const theme = useTheme();
 
   return (
-    <div css={S.profileCard}>
-      <ProfileFrame width={7} height={7} src={info.profile} role={info.role} />
-      <div ref={nicknameRef} css={S.profileName({ theme })}>
+    <li css={S.profileCard} tabIndex={0} aria-label={info.nickname}>
+      <ProfileFrame
+        width={7}
+        height={7}
+        src={info.profile}
+        role={info.role}
+        aria-hidden
+      />
+      <div ref={nicknameRef} css={S.profileName({ theme })} aria-hidden>
         {formattedNickname}
       </div>
-    </div>
+    </li>
   );
 }
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileList.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileList.tsx
index 0e95eb118..40d011d74 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileList.tsx
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileList.tsx
@@ -1,8 +1,9 @@
 import * as S from './ProfileList.style';
-import { Participation } from '@_types/index';
-import { useTheme } from '@emotion/react';
+
 import { Fragment } from 'react';
+import { Participation } from '@_types/index';
 import ProfileCard from './ProfileCard/ProfileCard';
+import { useTheme } from '@emotion/react';
 
 interface ProfileListProps {
   participants: Participation[];
@@ -13,12 +14,14 @@ export default function ProfileList(props: ProfileListProps) {
   const { participants } = props;
   return (
     <Fragment>
-      <div css={theme.typography.s1}>참여자</div>
-      <div css={S.ProfileContanier}>
+      <h2 css={theme.typography.s1} aria-label="참여자">
+        참여자
+      </h2>
+      <ul css={S.ProfileContanier}>
         {participants.map((participant) => {
           return <ProfileCard key={participant.nickname} info={participant} />;
         })}
-      </div>
+      </ul>
     </Fragment>
   );
 }
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/Tag/Tag.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/Tag/Tag.tsx
index e5eb7a1c0..bfbe01b23 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/Tag/Tag.tsx
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/Tag/Tag.tsx
@@ -1,8 +1,8 @@
 import * as S from '@_pages/Moim/MoimDetailPage/components/Tag/Tag.style';
 
 import { HTMLProps } from 'react';
-import { useTheme } from '@emotion/react';
 import { MoimStatus } from '@_types/index';
+import { useTheme } from '@emotion/react';
 
 interface TagProps extends HTMLProps<HTMLDivElement> {
   status: MoimStatus;
@@ -10,9 +10,9 @@ interface TagProps extends HTMLProps<HTMLDivElement> {
 
 export default function Tag(props: TagProps) {
   const theme = useTheme();
-  const { status } = props;
+  const { status, ...restProps } = props;
   return (
-    <div css={S.tagBox({ theme, status })}>
+    <div css={S.tagBox({ theme, status })} {...restProps}>
       {status === 'CANCELED'
         ? '모임 취소'
         : status === 'MOIMING'
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/Zzim/ZzimButton.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/Zzim/ZzimButton.tsx
index 57cd23946..ec375b441 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/Zzim/ZzimButton.tsx
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/Zzim/ZzimButton.tsx
@@ -1,16 +1,18 @@
-import { useTheme } from '@emotion/react';
 import * as S from '@_pages/Moim/MoimDetailPage/components/Zzim/ZzimButton.style';
+
+import { HTMLAttributes } from 'react';
 import HeartIcon from '@_components/Icons/HeartIcon';
+import { useTheme } from '@emotion/react';
 
-interface ZzimButtonProps {
+interface ZzimButtonProps extends HTMLAttributes<HTMLButtonElement> {
   isZzimed: boolean;
   onClick: () => void;
 }
 export default function ZzimButton(props: ZzimButtonProps) {
   const theme = useTheme();
-  const { isZzimed, onClick } = props;
+  const { isZzimed, onClick, ...restProps } = props;
   return (
-    <button css={S.Zzimbutton({ theme })} onClick={onClick}>
+    <button css={S.Zzimbutton({ theme })} onClick={onClick} {...restProps}>
       <HeartIcon isFilled={isZzimed} />
     </button>
   );