마크다운의 접근성 향상
게시 됨: 2022-03-10마크다운은 작은 텍스트를 HTML로 변환하는 언어입니다. 2004년 John Gruber가 일반 텍스트 편집기에서 서식 있는 텍스트를 더 쉽게 작성할 수 있도록 만들었습니다. Markdown은 인터넷의 여러 곳, 특히 개발자가 있는 곳에서 찾을 수 있습니다. 두 가지 주목할만한 예는 GitHub의 주석과 Smashing Magazine의 게시물에 대한 소스 코드입니다!
마크다운 작동 방식
Markdown은 특수 문자 배열을 사용하여 콘텐츠 형식을 지정합니다. 예를 들어, 문자, 단어 또는 구를 대괄호로 묶어 링크를 생성할 수 있습니다. 닫는 대괄호 뒤에 URL을 괄호 안에 포함하여 링크 대상을 만듭니다.
따라서 다음을 입력합니다.
[I am a link](https://www.smashingmagazine.com/)다음 HTML 마크업을 생성합니다.
<a href="https://www.smashingmagazine.com/">I am a link</a>HTML과 Markdown을 혼합할 수도 있으며 컴파일하면 모두 HTML로 요약됩니다. 다음 예:
I am a sentence that includes <span class="class-name">HTML</span> and __Markdown__ formatting.이것을 HTML 마크업으로 생성합니다.
<p>I am a sentence that includes <span class="class-name">HTML</span> and <strong>Markdown</strong> formatting.</p>마크다운 및 접근성
접근성은 디지털 경험을 만들고 유지 관리하는 모든 측면에 영향을 미치는 총체적인 관심사입니다. Markdown은 디지털 도구이므로 접근성 고려 사항도 염두에 두어야 합니다.
- 좋은 소식 :
Markdown은 간단한 HTML 마크업을 생성하고 간단한 HTML 마크업은 보조 기술로 쉽게 읽을 수 있습니다. - 덜 좋은 소식 :
마크다운은 모든 것을 포괄하거나 규범적이지 않습니다. 또한 접근성에는 보조 기술 이상의 것이 있습니다.
Markdown 콘텐츠에 액세스할 수 있는지 확인하는 데에는 두 가지 큰 그림 문제가 있습니다.
- Markdown이 지원하지 않는 특정 유형의 콘텐츠가 있으며,
- 글을 쓰는 동안 함께할 Clippy 같은 경험은 없습니다. 즉, 액세스할 수 없는 콘텐츠를 만드는 작업을 수행해도 경고를 받지 않습니다.
이 두 가지 고려 사항으로 인해 Markdown 콘텐츠에 최대한 액세스할 수 있도록 하기 위해 할 수 있는 일이 있습니다.
당신이 할 수 있는 가장 중요한 세 가지
콘텐츠에 액세스할 수 있도록 하려면 어디서부터 시작해야 하는지 알기 어려울 수 있습니다. 크고 중요한 영향을 미치기 위해 지금 할 수 있는 세 가지가 있습니다.
1. 제목을 사용하여 콘텐츠 개요
제목으로 탐색하는 것은 많은 보조 기술 사용자가 보고 있는 페이지 또는 보기의 내용을 이해하는 데 사용하는 가장 인기 있는 방법입니다.
이 때문에 Markdown의 제목 형식 지정 옵션( # , ## , ### , #### , ##### 및 ###### )을 사용하여 논리적 제목 구조를 생성하려고 합니다.
# The title, a first-level heading Content ## A second-level heading Content ### A third-level heading Content ## Another second-level heading Content이렇게 하면 스캔하기 쉬운 계층적 개요가 생성됩니다.
1. The title, a first-level heading a. A second-level heading i. A Third-level heading b. Another second-level heading 효과적인 제목 수준을 작성하는 것은 페이지의 전체 범위를 전달하기에 충분한 정보를 원하지만 지나치게 설명하여 누군가를 압도하지 않는다는 점에서 약간의 예술입니다. 예를 들어 레시피에는 재료, 지침 및 배경 스토리를 구분하는 데 몇 가지 h2 요소만 필요할 수 있지만 학술 논문에서는 뉘앙스를 완전히 전달하기 위해 6가지 제목 수준이 모두 필요할 수 있습니다.
페이지 또는 보기의 모든 제목을 빠르게 스캔하고 특정 항목으로 이동할 수 있는 것은 스크린 리더에만 국한되지 않는 기술입니다. 나는 당신이 이 기능을 이용할 수 있게 하는 헤딩맵과 같은 확장 기능을 즐기고 혜택을 받습니다.
2. 이미지에 대한 의미 있는 대체 설명 작성
대체 설명은 시력이 좋지 않거나 이미지를 끈 상태에서 탐색하는 사람들이 사용 중인 이미지의 내용을 이해하는 데 도움이 됩니다.
Markdown에서 이미지 서식 지정 코드의 여는 괄호와 닫는 괄호 사이에 대체 설명이 배치됩니다.
대체 설명은 이미지의 내용과 이미지가 포함된 이유에 대한 맥락을 명확하고 간결하게 설명해야 합니다. 또한 구두점을 추가하는 것을 잊지 마십시오!
Markdown 입력을 사용하는 특정 웹사이트 및 웹 앱도 대체 설명 텍스트를 추가하려고 시도합니다. 예를 들어 GitHub는 alt 속성에 대해 업로드한 파일의 이름을 사용합니다.
불행히도 이것은 이미지를 볼 수 없는 사람에게 충분한 컨텍스트를 제공하지 않습니다. 이 시나리오에서는 이미지가 포함될 만큼 중요한 이유를 전달하려고 합니다.
GitHub에서 일반적으로 볼 수 있는 예는 다음과 같습니다.
- 무언가가 예상대로 보이지 않는 시각적 버그,
- 제안되고 있는 새로운 기능,
- 피드백을 제공하는 주석이 달린 스크린샷,
- 프로세스를 설명하는 그래프 및 순서도,
- 감정을 전달하기 위한 반응 GIF.
이 이미지는 장식용이 아닙니다. GitHub는 기본적으로 공개되어 있으므로 누가 귀하의 저장소에 액세스하는지 또는 그들의 상황을 알 수 없습니다. 적극적으로 포함시키는 것이 좋습니다.
대체 설명을 작성하는 데 도움이 필요하면 W3C의 alt Decision Tree와 Axess Lab의 Ultimate Guide to Alt Text를 적극 추천합니다.
3. 일반 언어 사용
간단하고 직접적인 언어는 모든 사람이 귀하의 콘텐츠를 이해하는 데 도움이 됩니다. 여기에는 다음이 포함됩니다.
- 인지적 고려사항으로,
- 영어를 모국어로 사용하지 않는 사람,
- 전달하려는 개념에 익숙하지 않은 경우
- 스트레스를 받거나 멀티태스킹을 하고 주의 집중 시간이 제한된 사람,
- 등등.
당신이 쓴 글을 다른 사람이 더 쉽게 읽을 수 있을수록 이해하고 내면화하기가 더 쉽습니다. 이는 블로그 게시물, Jira 티켓, Notion 노트, GitHub 댓글, Trello 카드 등 모든 형태의 작성된 Markdown 콘텐츠에 도움이 됩니다.
문장과 단어 길이를 고려하십시오. 또한 의도한 청중이 누구인지 고려하고 사용하는 전문 용어 및 관용구와 같은 항목에 대해 생각하십시오.
언어를 단순화하는 데 도움이 필요하면 Hemingway, Datayze의 가독성 분석기 및 xkcd Simple Writer를 사용하고 싶은 세 가지 도구가 있습니다. 체크아웃할 가치가 있는 또 다른 사이트는 plainlanguage.gov입니다.
기타 고려 사항
더 멀리 가고 싶습니까? 엄청난! 다음은 수행할 수 있는 몇 가지 작업입니다.
이미지
대체 설명을 제공하는 것 외에도 Markdown이 삽입된 이미지에 액세스할 수 있도록 하기 위해 할 수 있는 몇 가지 다른 작업이 있습니다.
SVG 이미지를 올바르게 마크업
SVG는 그래프, 아이콘, 단순한 일러스트레이션 및 단순한 모양과 선명한 선을 사용하는 기타 이미지 유형에 적합한 형식입니다.
Markdown에서 SVG를 렌더링하는 방법에는 두 가지가 있습니다. 두 접근 방식 모두 주의해야 할 특정 사항이 있습니다.
1. .svg 파일 확장자를 가진 이미지에 링크하기
참고 : 제가 설명하려고 하는 버그는 수정되었지만, 저는 앞으로 몇 년 동안 여전히 다음과 같은 조언을 권장하고 있습니다. 이는 브라우저 업데이트를 시스템 업데이트에 연결하는 Safari의 의심스러운 전술과 보조 기술을 사용하는 일부 사람들을 위한 소프트웨어 업데이트에 대한 주저함 때문입니다.
SVG에 이미지로 연결하는 경우 Markdown의 이미지 형식 지정 코드( ![]() )가 아닌 HTML의 img 요소를 사용하는 것이 좋습니다.
그 이유는 특정 화면 판독기가 SVG 파일에 연결되는 img 요소를 구문 분석하려고 할 때 버그가 있기 때문입니다. 예상대로 이미지로 발표하지 않고 단체로 발표하거나 아예 이미지 발표를 건너뛰게 됩니다. 이 문제를 해결하려면 이미지 요소에서 role="img" 를 선언하세요.
<img role="img" alt="A sylized sunflower." src="flower.svg" />2. 인라인 SVG 코드 사용
img 요소를 사용하는 대신 이미지를 인라인 SVG 코드로 선언하는 데에는 몇 가지 이유가 있습니다. 제가 가장 자주 접하는 이유는 다크 모드를 지원하기 위해서입니다.
img 요소를 사용할 때와 마찬가지로 보조 기술이 이를 코드가 아닌 이미지로 해석하도록 하려면 몇 가지 속성을 포함해야 합니다. 두 가지 속성 선언은 role="img" 및 aria-labelledby 입니다.
<svg aria-labelledby="svg-title" fill="none" height="54" role="img" viewBox="0 0 90 54" width="90" xmlns="https://www.w3.org/2000/svg"> <title>A pelican.</title> <path class="icon-fill" d="M88.563 2.193H56.911a7.84 7.84 0 00-12.674 8.508h-.001l.01.023c.096.251.204.495.324.733l4.532 10.241-1.089 1.09-6.361-6.554a10.18 10.18 0 00-7.305-3.09H0l5.229 4.95h7.738l2.226 2.107H7.454l4.451 4.214h7.741l1.197 1.134c.355.334.713.66 1.081.973h-7.739a30.103 30.103 0 0023.019 7.076L16.891 53.91l22.724-5.263v2.454H37.08v2.81h13.518v-.076a2.734 2.734 0 00-2.734-2.734h-5.441v-3.104l2.642-.612a21.64 21.64 0 0014.91-30.555l-1.954-4.05 1.229-1.22 3.165 3.284a9.891 9.891 0 0013.036 1.066L90 5.061v-1.43c0-.794-.643-1.438-1.437-1.438zM53.859 6.591a1.147 1.147 0 110-2.294 1.147 1.147 0 010 2.294z"/></svg> 또한 img 요소의 alt 속성과 유사하게 이미지를 설명하기 위해 title 요소( title 속성과 혼동하지 말 것)를 사용해야 합니다. alt 속성과 달리 aria-labelledby 를 사용하여 title 요소의 id 를 상위 svg 요소와 연결해야 합니다.
SVG를 액세스 가능하게 마크업하는 방법에 대해 더 자세히 알아보려면 Heather Migliorisi의 Accessible SVGs와 Carie Fisher의 Accessible SVGs: Perfect Patterns For Screen Reader Users를 추천합니다.
일시 중지된 애니메이션 이미지 로드
애니메이션 GIF는 Markdown 콘텐츠에서 흔히 볼 수 있는 또 다른 기능입니다. 개발자가 기술 주제를 논의할 때 기쁨과 좌절을 표현하는 데 사용하지 않는 것보다 더 자주 찾습니다.
문제는 이러한 애니메이션이 주의를 산만하게 하고 콘텐츠를 읽으려는 사람에게 부정적인 영향을 줄 수 있다는 것입니다. 여기서 특히 주의력결핍 과잉행동장애(ADHD)와 같은 인지적 고려사항이 영향을 받습니다.
좋은 소식은 애니메이션 콘텐츠를 계속 포함할 수 있다는 것입니다! 몇 가지 옵션이 있습니다.
- 일시 중지 상태에서 로드할 수 있는
.mp4및.webm과 같은 파일 형식을 사용하여picture요소를 사용하거나 - Steve Faulkner의
details/summaryhack 또는 freezeframe.js 라이브러리와 같이.gif에 재생/일시 중지 기능을 제공하는 솔루션을 사용하세요.
이 작은 세부 사항은 자신을 표현하는 방법을 포기하지 않고도 사람들을 돕는 데 큰 도움이 될 수 있습니다.
연결
온라인으로 콘텐츠를 작성하는 경우 조만간 링크를 사용해야 합니다. 다음은 알아야 할 사항입니다.
고유하고 설명적인 링크 이름 사용
일부 형태의 보조 기술은 페이지의 링크 목록을 탐색하거나 제목을 탐색하는 것과 동일한 방식으로 볼 수 있습니다. 이 때문에 다른 사람이 방문할 때 무엇을 찾을 수 있는지에 대한 힌트를 링크에 표시하려고 합니다.
Learn more about [how to easily poach an egg](https://lifehacker.com/this-is-the-chillest-easiest-way-to-poach-an-egg-1825889759).또한 특히 반복되는 경우 모호한 문구를 피하고 싶을 것입니다. "여기를 클릭하십시오" 및 "자세히 알아보기"와 같은 용어는 일반적인 원인입니다. 이러한 용어는 링크가 아닌 주변 콘텐츠의 컨텍스트와 분리될 때 의미가 없습니다. 또한 용어를 두 번 이상 사용하면 다음과 같은 경험을 할 수 있습니다.
새 탭이나 창에서 링크를 열지 마십시오.
Kramdown과 같은 Markdown의 특정 변형을 사용하면 새 탭이나 창에서 링크를 열 수 있는 코드를 작성할 수 있습니다.
[link name](url){:target="_blank"}이렇게 하면 보안 위험이 발생합니다. 또한 이 경험은 WCAG(웹 콘텐츠 접근성 지침) 성공 기준이 될 정도로 혼란스럽고 바람직하지 않습니다. 웹사이트나 웹 앱을 사용하는 모든 사람이 새 탭에서 링크를 열지 여부를 스스로 선택하게 하는 것이 훨씬 좋습니다.
재량에 따라 건너뛰기 링크 사용
건너뛰기 링크 또는 "skipnav"는 콘텐츠의 큰 부분을 우회하는 방법입니다. 웹 페이지에서 로고와 기본 탐색을 우회하여 다른 사람이 기본 콘텐츠로 빠르게 이동할 수 있도록 하는 방법으로 일반적으로 접하게 됩니다.
건너뛰기 링크는 이 사용 사례에만 국한되지 않습니다! 다른 두 가지 예는 전자 상거래 사이트의 목차 및 정렬/필터링 컨트롤일 수 있습니다.
건너뛰기 링크의 또 다른 훌륭한 용도는 여러 대화형 요소가 포함된 포함된 콘텐츠를 우회할 수 있도록 하는 것입니다.
이것은 또한 누군가가 임베디드 콘텐츠에서 흔히 볼 수 있는 "키보드 트랩"을 우회할 수 있도록 하는 훌륭한 기술입니다.
키보드 트랩은 마우스나 터치패드를 사용하지 않는 사람이 인터랙티브 구성 요소의 구성 방식 때문에 빠져나갈 수 없는 곳입니다. 일반적으로 포함된 iframe 위젯에서 찾을 수 있습니다.
키보드 트랩을 테스트하는 좋은 방법은 무엇입니까? 탭 키를 사용하십시오!
건너뛰기 링크가 없으면 보조 기술을 사용하는 사람이 함정을 피하기 위해 페이지나 보기를 새로 고쳐야 할 수도 있습니다. 이것은 좋지 않으며 모터 제어 문제가 혼합에 던져지면 특히 문제가 됩니다. 저는 대부분의 사람들이 이 시나리오에 직면하면 작동하게 하려고 씨름하기보다는 탭을 닫을 것이라고 생각하는 학교입니다.
Tab 키를 사용한 테스트에 대한 훌륭한 게시물 외에도 Manuel Matuzovic은 건너뛰기 링크 사용 및 Embedded CodePens의 키보드 접근성 개선의 기타 개선 사항에 대해 알려줍니다.
자동으로 생성된 표제 앵커 링크에 주의
일부 Markdown 생성기는 작성하는 각 제목과 함께 앵커 링크를 자동으로 추가합니다. 이는 콘텐츠를 공유할 때 페이지 또는 보기의 관련 섹션에 다른 사람의 관심을 집중할 수 있도록 하기 위한 것입니다.
문제는 이 앵커 링크가 구성되는 방식에 따라 이에 대한 몇 가지 보조 기술 문제가 있을 수 있다는 것입니다. 앵커 링크가 #, , 또는 §와 같은 글리프 주위에만 래핑된 경우 두 가지 문제가 발생합니다.
- 링크의 이름은 주변 컨텍스트에서 제거될 때 의미가 없으며,
- 링크 이름이 반복됩니다.
이 문제는 Amber Wilson이 자신의 게시물 Are your Anchor Links Accessible?에서 자세히 설명합니다. 그녀의 게시물은 또한 다양한 솔루션과 잠재적인 단점에 대해 자세히 설명합니다.
다운로드의 존재 표시
대부분의 경우 링크는 다른 페이지나 보기로 이동합니다. 그러나 때로는 대상이 다운로드입니다. 이 경우 브라우저는 다음 중 하나를 수행합니다.
- 요청 파일 형식과 연결된 앱을 열어 표시하거나
- 운영 체제의 파일 시스템에 저장하라는 메시지를 표시합니다.
이 두 가지 경험은 특히 화면을 볼 수 없는 경우 불편할 수 있습니다. 이러한 이상적이지 않은 경험을 방지하는 좋은 방법은 링크 이름에 다운로드가 있음을 암시하는 것입니다. 예를 들어 다음은 PDF에 연결할 때 Markdown에서 수행하는 방법입니다.
Download our [2020 Annual Report (PDF)](https://mycorp.biz/downloads/2020/annual-report.pdf).색깔
색상은 마크다운 자체와 관련이 없지만 많은 마크다운 생성 콘텐츠에 영향을 미칩니다. 색상과 관련된 가장 큰 고민은 워드프레스, 일레븐티, 고스트, 지킬, 개츠비 등과 같은 블로깅 서비스를 사용하는 경우 일반적으로 수정할 수 있는 사항입니다.
다크 모드 테마 사용
어두운 모드에 대한 토글을 제공하면 누군가가 읽기에 도움이 되는 경험을 선택할 수 있습니다. 누군가에게는 미적 취향이 될 수 있고, 다른 누군가에게는 편두통, 눈의 피로, 피로와 같은 것을 피하는 방법이 될 수 있습니다.
여기서 중요한 것은 선택입니다. 어두운 모드를 켠 사람이 웹사이트에 밝은 모드를 사용하도록 하고 그 반대의 경우도 마찬가지입니다.
문제는 사용자가 웹사이트나 웹 앱을 방문할 때 그 사람의 필요, 욕구 또는 상황이 무엇인지 알 수 없지만 그에 대해 무언가를 할 수 있는 능력은 제공할 수 있다는 것입니다.
Markdown은 간단하고 간단한 HTML을 내보내고 CSS 내에서 작업하기 쉽습니다. 이것은 다크 모드 테마를 개발하기 쉽게 만드는 데 큰 도움이 됩니다.
우수한 색상 대비 지원으로 구문 강조 표시 사용
마크다운은 콘텐츠를 삼중 백틱( ``` )으로 래핑하여 코드 블록을 생성할 수 있습니다. 또한 단일 백틱으로 문자, 단어 또는 구를 래핑하여 code 요소에 래핑된 인라인 콘텐츠를 생성할 수도 있습니다.
두 예제 모두에서 많은 사람들이 PrismJS와 같은 구문 강조 라이브러리를 추가하여 사람들이 제공하는 코드 예제를 이해하는 데 도움을 줍니다.
특정 테마는 미적 선택으로 light-on-light 또는 dark-on-dark 값을 사용합니다. 불행히도 이것은 코드가 일부 개인에게는 보기 어렵거나 불가능할 수 있음을 의미합니다. 여기서 트릭은 사람들이 실제로 코드의 모든 글리프를 볼 수 있을 만큼 충분히 높은 색상 값을 사용하는 구문 강조 테마를 선택하는 것입니다.
대비가 충분히 높은지 확인하는 방법은 WebAIM과 같은 도구를 사용하고 테마에서 제공하는 색상 값을 수동으로 확인하는 것입니다. 더 빠른 제안을 찾고 있고 약간의 자기 홍보에도 신경 쓰지 않는다면 색상 대비 친화적인 구문 강조 테마를 유지합니다.
Markdown에서 지원하지 않는 콘텐츠
Markdown에서 HTML을 사용할 수 있으므로 Markdown에서 다른 콘텐츠보다 더 자주 보게 되는 특정 종류의 콘텐츠가 있습니다. 다음은 그 중 몇 가지에 대한 몇 가지 고려 사항입니다.
title 속성을 사용하여 iframe 콘텐츠 설명
HTML의 title 속성은 일반적으로 툴팁 효과를 만드는 데 잘못 사용됩니다. 불행히도 이것은 보조 기술 사용자에게 많은 골칫거리를 야기하며 이러한 방식의 사용은 반패턴으로 간주됩니다.
title 속성의 한 가지 좋은 사용은 iframe 에 포함된 내용에 대한 간결하고 의미 있는 설명을 제공하는 것입니다. 이 설명은 보조 기술 사용자가 컨텐츠를 확인하기 위해 iframe 을 탐색할 때 예상할 수 있는 것에 대한 단서를 제공합니다.
Markdown의 경우 가장 일반적인 형태의 iframe 콘텐츠는 YouTube 동영상과 같은 포함입니다.
<iframe width="560" height="315" src="https://www.youtube.com/embed/SDdsD5AmKYA" title="YouTube: Accessibility is a Hydra | EJ Mason | CascadiaJS 2019." frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 링크 텍스트와 마찬가지로 일반적이고 반복적인 title 콘텐츠도 피하고 싶을 것입니다. YouTube의 내장 코드는 기본적으로 YouTube video player 로 설정되어 있습니다. 이는 그다지 좋지 않습니다. 조금 더 개선하여 YouTube: Video title 로 업데이트할 수 있습니다. 이는 페이지 또는 보기에 포함된 YouTube 동영상이 두 개 이상인 경우 특히 도움이 됩니다.
YouTube가 동영상 제목 정보를 이미 알고 있는데도 왜 이런 식으로 하느냐는 완전히 또 다른 문제입니다.
비디오 및 녹음된 오디오에 대한 캡션 및 스크립트 제공
YouTube에 대해 말하자면, 비디오와 오디오에 캡션과 스크립트가 있는지 확인하고 싶을 것입니다.
캡션
자막은 말하는 동안 실시간으로 비디오 콘텐츠의 텍스트 버전을 표시하므로 생물학적으로나 상황적으로 오디오를 들을 수 없는 사람이 비디오의 콘텐츠를 이해할 수 있도록 합니다. 캡션에는 의미를 전달하는 데 중요한 음향 효과, 음악 및 기타 단서가 포함될 수도 있습니다.
대부분의 인기 있는 비디오 호스팅 제공업체에는 포함된 컨텍스트에서 표시하는 것을 포함하여 캡션을 지원하는 기능이 있습니다. 여기서 중요한 부분은 크립션을 피하는 것입니다. 자동으로 생성된 캡션을 수동으로 검토하여 인간이 이해할 수 있는지 확인합니다.
성적 증명서
스크립트는 캡션의 형제입니다. 그들은 모든 음성 대화, 관련 음향 효과 및 음악, 기타 중요한 세부 정보를 가져와 포함된 비디오 또는 오디오 외부에 나열합니다. 누군가에게 다음을 허용하는 것을 포함하여 이렇게 하면 많은 이점이 있습니다.
- 자신의 속도로 비디오 및 오디오 콘텐츠를 읽으십시오.
- 콘텐츠의 크기와 표현을 수정합니다.
- 내용을 인쇄하거나 소화하기 쉬운 형식으로 변환하십시오.
- 검색 엔진을 통해 콘텐츠를 더 쉽게 찾을 수 있습니다.
- 콘텐츠를 더 쉽게 번역하세요.
리더 모드
다른 Markdown 관련 문제와 마찬가지로 리더 모드는 접근성 관점에서 많은 이점을 제공할 수 있습니다.
익숙하지 않은 경우 리더 모드는 주요 콘텐츠 이외의 모든 것을 제거하는 많은 브라우저에서 제공하는 기능입니다. 대부분의 리더 모드는 텍스트 크기, 글꼴, 줄 높이, 전경색 및 배경색, 열 너비를 조정하고 장치에서 콘텐츠를 소리내어 읽도록 하는 컨트롤도 제공합니다!
Markdown을 사용하여 리더 모드를 직접 실행할 수 없습니다. 그러나 Longform Markdown 콘텐츠는 종종 리더 모드에 적합하도록 설정할 수 있는 템플릿으로 렌더링됩니다.
Mandy Michael은 자신의 게시물, Safari Reader Mode 및 기타 읽기 앱용 웹 사이트 구축에서 이 작업을 수행하는 방법을 알려줍니다. 시맨틱 HTML, 섹션 요소 및 구조화된 마이크로데이터의 조합만 있으면 이 훌륭한 기능을 잠금 해제할 수 있습니다.
한 번에 모든 것을 할 필요는 없습니다
이것은 Markdown의 다양한 측면과 이것이 다른 기술과 상호 작용하는 방식을 다루는 긴 게시물입니다. 몇 가지 다른 주제 영역에서 다룰 내용이 많다는 점에서 벅차게 보일 수 있습니다.
접근성 작업의 중요한 점은 모든 것이 도움이 된다는 것입니다. 이 게시물에서 내가 고려한 모든 사항을 하나의 대대적인 변경으로 해결할 필요는 없습니다. 대신 집중할 한 가지를 선택하고 거기에서 구축하십시오.
각 조정 및 업데이트는 웹을 사용할 때 누군가의 삶의 질에 직접적인 영향을 미치며 이는 엄청난 영향을 미칩니다.
Smashing Magazine에서 계속 읽기
- CommonMark: Markdown의 공식 사양
- 마크다운을 HTML로 변환하는 Node.js Express API 빌드
- Markdown에서 Shadow DOM으로 패턴 라이브러리 구축하기