이모지로 시작하는 제목의 접근성과 레이아웃 개선

기여 UX
,
1

제목 앞에 이모지를 포함하여 시각적 구분과 생동감을 더하는 것은 일반적인 패턴입니다.

예를 들어…

## :white_check_mark: Rock the Vote, this Tuesday!

…이는 다음과 같이 렌더링됩니다:

:white_check_mark: Rock the Vote, this Tuesday!

해당 제목을 생성하는 코드는 다음과 같습니다:

<h2 dir="auto">
  <a name="p-9969-white_check_mark-rock-the-vote-this-tuesday-1" class="anchor" href="#p-9969-white_check_mark-rock-the-vote-this-tuesday-1"></a>
  <img src="https://emoji.discourse-cdn.com/twitter/white_check_mark.png?v=15" 
       title=":white_check_mark:" 
       class="emoji" 
       alt=":white_check_mark:" 
       loading="lazy" 
       width="20" 
       height="20" 
       style="aspect-ratio: 20 / 20;">
  Rock the Vote, this Tuesday!
</h2>

img 요소에 변경 사항을 적용하여 제목의 접근성과 시각적 일관성을 높일 수 있을까요? 예를 들어:

  • 스크린 리더가 이모지나 alt 텍스트를 렌더링하지 않도록 aria-hidden="true"를 추가
  • 일관된 정렬을 위해 vertical-align: middle; margin-right: 8px; 적용
<h2 dir="auto">
  <a name="p-9969-white_check_mark-rock-the-vote-this-tuesday-1" class="anchor" href="#p-9969-white_check_mark-rock-the-vote-this-tuesday-1"></a>
  <img src="https://emoji.discourse-cdn.com/twitter/white_check_mark.png?v=15" 
       title=":white_check_mark:" 
       class="emoji" 
       alt=":white_check_mark:" 
       aria-hidden="true" 
       loading="lazy" 
       width="20" 
       height="20" 
       style="aspect-ratio: 20 / 20; vertical-align: middle; margin-right: 8px;">
  Rock the Vote, this Tuesday!
</h2>
1개의 좋아요