From c28084c4ac9f6c22f7f9da818744e85e03fd18ef Mon Sep 17 00:00:00 2001 From: iyu88 Date: Sun, 31 Dec 2023 23:54:07 +0900 Subject: [PATCH] docs: 1231/web-accessibility-2 --- _posts/2023-12-31-web-accessibility-2.md | 1174 +++++++++++ .../a11y/2023/12/24/web-accessibility-1.html | 4 + .../a11y/2023/12/31/web-accessibility-2.html | 1820 +++++++++++++++++ _site/category/a11y/index.html | 6 + _site/category/conference/index.html | 4 + _site/category/css/index.html | 4 + _site/category/cypress/index.html | 4 + _site/category/deployment/index.html | 4 + _site/category/electron/index.html | 4 + _site/category/javascript/index.html | 4 + _site/category/lighthouse/index.html | 4 + _site/category/lookingback/index.html | 4 + _site/category/opensource/index.html | 4 + _site/category/react/index.html | 4 + _site/category/review/index.html | 4 + _site/category/storybook/index.html | 4 + _site/category/web/index.html | 4 + .../2022/10/21/boost-conference.html | 4 + _site/css/2023/07/16/css-fallback-style.html | 4 + .../06/04/component-interaction-test.html | 4 + .../2023/02/09/aws-ec2-deployment.html | 4 + _site/electron/2023/02/24/electron.html | 4 + _site/feed.xml | 38 +- _site/index.html | 34 +- .../2022/10/16/tagged-templates.html | 4 + .../2023/01/31/javascript-prototype.html | 4 + .../2023/03/11/garbage-collection.html | 4 + .../2023/04/23/ecma-script-2023.html | 4 + .../2023/05/21/tail-call-optimization.html | 4 + .../lighthouse/2022/11/20/lighthouse-ci.html | 4 + .../2022/12/31/looking-back-the-year.html | 4 + .../06/18/looking-back-the-first-half.html | 4 + .../2023/05/07/open-source-contribution.html | 4 + _site/page/2/index.html | 34 +- _site/page/3/index.html | 34 +- _site/page/4/index.html | 46 +- _site/page/5/index.html | 1203 +++++++++++ _site/posts/index.html | 11 + .../2022/11/01/react-concurrent-mode.html | 4 + .../25/react-compound-component-pattern.html | 4 + _site/review/2022/12/29/boostcamp-review.html | 4 + _site/sitemap.xml | 16 + .../storybook/2023/04/07/storybook-docs.html | 4 + _site/tag/2022/index.html | 4 + _site/tag/2023/index.html | 4 + _site/tag/a11y/index.html | 6 + _site/tag/accessibility/index.html | 6 + _site/tag/aws/index.html | 4 + _site/tag/boostcamp/index.html | 4 + _site/tag/boostcampwebmobile/index.html | 4 + _site/tag/boostconference/index.html | 4 + _site/tag/browser/index.html | 4 + _site/tag/challenge/index.html | 4 + _site/tag/ci/index.html | 4 + _site/tag/component-test/index.html | 4 + _site/tag/compoundcomponent/index.html | 4 + _site/tag/concurrentmode/index.html | 4 + _site/tag/conference/index.html | 4 + _site/tag/css/index.html | 4 + _site/tag/cypress/index.html | 4 + _site/tag/datafetching/index.html | 4 + _site/tag/deployment/index.html | 4 + _site/tag/designsystem/index.html | 4 + _site/tag/devtools/index.html | 4 + _site/tag/docs/index.html | 4 + _site/tag/e2e-test/index.html | 4 + _site/tag/ec2/index.html | 4 + _site/tag/ecmascript/index.html | 4 + _site/tag/electron/index.html | 4 + _site/tag/error/index.html | 4 + _site/tag/garbagecollection/index.html | 4 + _site/tag/github-actions/index.html | 4 + _site/tag/interaction-test/index.html | 4 + _site/tag/javascript/index.html | 4 + _site/tag/lighthouse/index.html | 4 + _site/tag/looking-back-the-half/index.html | 4 + _site/tag/looking-back-the-year/index.html | 4 + _site/tag/membership/index.html | 4 + _site/tag/opensource/index.html | 4 + _site/tag/playfunction/index.html | 4 + _site/tag/prototype/index.html | 4 + _site/tag/react/index.html | 4 + _site/tag/reflow/index.html | 4 + _site/tag/render/index.html | 4 + _site/tag/repaint/index.html | 4 + _site/tag/review/index.html | 4 + _site/tag/storybook/index.html | 4 + _site/tag/string/index.html | 4 + _site/tag/supports/index.html | 4 + _site/tag/suspense/index.html | 4 + _site/tag/taggedtemplates/index.html | 4 + _site/tag/tailcalloptimization/index.html | 4 + _site/tag/tailrecursion/index.html | 4 + _site/tag/usedeferredvalue/index.html | 4 + _site/tag/usetransition/index.html | 4 + _site/tag/v8/index.html | 4 + _site/tag/web/index.html | 4 + _site/web/2022/10/23/browser-render.html | 4 + 98 files changed, 4739 insertions(+), 29 deletions(-) create mode 100644 _posts/2023-12-31-web-accessibility-2.md create mode 100644 _site/a11y/2023/12/31/web-accessibility-2.html create mode 100644 _site/page/5/index.html diff --git a/_posts/2023-12-31-web-accessibility-2.md b/_posts/2023-12-31-web-accessibility-2.md new file mode 100644 index 0000000..c78650a --- /dev/null +++ b/_posts/2023-12-31-web-accessibility-2.md @@ -0,0 +1,1174 @@ +--- +layout: post +title: "[A11y] WAI 문서로 접근성 이해하기 (2/2)" +date: 2023-12-31 00:00:00 +author: Hyunbin Lee +categories: A11y +tags: Accessibility A11y +cover: "/assets/instacode.png" +--- + +# WAI 문서로 접근성 이해하기 (2/2) + +> ### 💡 W3C에서 출판한 기술 사양을 읽어보며 접근성을 높일 수 있는 개발 요소들을 알아봅니다. + +## 1. 들어가며 + +지난 번에 작성한 [WAI 문서로 접근성 이해하기 (1/2)](https://iyu88.github.io/a11y/2023/12/24/web-accessibility-1.html)에서는 웹 접근성이 무엇인지에 대해서 간략히 알아보고 시맨틱 태그를 사용할 때 접근성을 높이는 방법과 접근성을 고려하며 메뉴, 이미지 등의 요소를 개발하는 방법에 대해 알아보았습니다. + +이번에는 이어서 [Tutorials](https://www.w3.org/WAI/tutorials/)에 남은 부분인 Tables, Forms, Carousels 파트에 있는 내용과 예시를 살펴보겠습니다. + +## 2. 표 (Tables) + +`table 태그`는 그리드 형식으로 데이터를 표현하는 데에 사용합니다. 따라서 콘텐츠의 레이아웃을 표현하기 위해 사용하는 것은 적절하지 않습니다. 표를 구성할 때 머리글은 `th 태그`, 데이터는 `td 태그`를 사용합니다. 또한 복잡도가 높은 표에서는 scope, id, headers 속성을 함께 사용하기도 합니다. 이는 스크린 리더가 table 태그를 탐색할 때, 맥락을 잃지 않도록 데이터 ➡️ 머리글 (td ➡️ th) 순서로 읽기 때문입니다. 따라서 보조 기술의 지원을 받으려면 적절한 마크업을 통해 데이터를 올바른 머리글과 연관 지어야 합니다. 종종 표가 PDF 등의 다른 파일 포맷에서 표현될 때 시맨틱 태그들이 사라지기도 하는데, 접근성을 위해 이를 유지시키는 것이 좋습니다. + +### 2-1. 머리글이 한 개인 경우 + +행 또는 열에 머리글이 하나만 있고 각 데이터가 분명하게 구분되는 경우 머리글에 th 태그를 사용합니다. + +- 첫번째 행 또는 열이 머리글인 경우 + +{% highlight html%} + + + + + + + + + + + + + […] +
DateEventVenue
12 FebruaryWaltz with StraussMain Hall
+{% endhighlight %} + +{% highlight html%} + + + + + + + + + + + + + + + + + + + + +
Date12 February24 March14 April
EventWaltz with StraussThe ObelisksThe What
VenueMain HallWest WingMain Hall
+{% endhighlight %} + +- 모호한 데이터가 있는 경우 + +데이터가 모호하여 머리글 정보 없이 임의의 칸에 있는 데이터를 다른 칸에 있는 데이터와 구분할 수 없는 경우 scope 속성으로 머리글 방향을 명시합니다. + +{% highlight html%} + + + + + + + + + + + + + + + + + + + + + + +
Teddy bear collectors:
Last NameFirst NameCity
PhoenixImariHenry
ZekiRomeMin
ApirkaKellyBrynn
+{% endhighlight %} + +위의 예시에서는 `scope='col'`을 명시하여 스크린 리더에 의해 'Phoenix'가 'Last Name'임을 알 수 있습니다. + +### 2-2. 머리글이 두 개인 경우 + +머리글이 행과 열에 동시에 존재하면 데이터의 의미가 모호해지기 쉽습니다. 따라서 앞서 진행한 것처럼 th 태그와 scope 속성 처리를 모든 머리글에 적용해야 합니다. + + +아래 예시에서 td 태그에 있는 'Closed', 'Open'이라는 정보는 행과 열에 있는 머리글과 연관되어야 의미가 있습니다. 따라서 th 태그 사용과 동시에 첫번째 열 머리글에는 `scope='col'`, 첫번째 행 머리글에는 `scope='row'`를 적용합니다. + +{% highlight html%} + + + + + + + + + + + + + + + + + + + + + + + + + + + […] +
Delivery slots:
MondayTuesdayWednesdayThursdayFriday
09:00 – 11:00ClosedOpenOpenClosedClosed
11:00 – 13:00OpenOpenClosedClosedClosed
+{% endhighlight %} + +### 2-3. 머리글이 불규칙할 경우 + +머리글이 여러 칸을 확장할 수도 있고, 계층을 형성하는 경우도 있습니다. 이러한 상황에서 사용할 수 있는 table 마크업은 다음과 같습니다. + +1. `` : 열 그룹을 정의할 때 사용합니다. 해당 태그 내에서 명시한 span 속성값 만큼 ``을 사용한 것과 동일한 역할을 합니다. +2. ``, ``, `` : 행 그룹을 정의할 때 사용합니다. thead, tfoot은 table 태그 내에서 한번만 사용할 수 있고 tbody는 여러 번 사용할 수 있습니다. + +- 머리글에 계층이 있는 경우 + +아래 예시 코드 주석에 있는 각 숫자에 대응하는 부연설명은 다음과 같습니다. +1. 기본적으로 col 태그를 사용하고 여러 열을 차지할 경우 colgroup 태그를 사용합니다. +2. `scope='colgroup'`로 설정하면 모든 열 그룹과 연관됩니다. 즉, Mars는 Produced 값인 50,000과 Sold 값인 30,000과 연관되어 해당 데이터를 스크린 리더가 읽을 때 함께 읽힙니다. +3. `scope='col'`로 설정하면 오직 대응되는 열만 연관됩니다. 즉, Produced는 50,000과 연관되어 해당 데이터를 스크린 리더가 읽을 때 함께 읽힙니다. + +{% highlight html%} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mars Venus
Produced SoldProducedSold
Teddy Bears50,00030,000100,00080,000
Board Games10,0005,00012,0009,000
+{% endhighlight %} + +- 머리글이 여러 개의 행과 열을 확장한 경우 + +아래 예시처럼 머리글이 행을 확장한 경우 데이터 칸의 개수와 합쳐진 행의 수가 동일해야 합니다. 행을 확장하는 머리글에는 `scope='rowgroup'`을 명시하고 그룹으로 묶인 행은 tbody 태그로 감쌉니다. (머리글이 표의 상단에 있을 경우 thead 태그, 하단에 있을 경우 tfoot 태그를 사용합니다) + +{% highlight html%} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Poster availability +
Poster nameColorSizes available
ZodiacFull colorA2A3A4
Black and whiteA1A2A3
SepiaA3A4A5
AngelsBlack and whiteA1A3A4
SepiaA2A3A5
+{% endhighlight %} + +### 2-4. 머리글 다중 계층으로 이루어진 경우 + +이미 위에서 머리글이 많고 복잡해질 경우 데이터와의 연관성을 분명하게 하기 위해 scope 속성을 사용했습니다. 여기서는 표의 구조가 한층 더 복잡해졌을 때 머리글의 id 값을 사용하는 방법을 다룹니다. 하지만 가능하면 구조를 단순하게 만들기 위해 정보 구조를 재설계하는 것이 더 낫습니다. + +- 각 열마다 여러 개의 열 머리글이 있는 표 + +
+각 열마다 여러 개의 열 머리글이 있는 표 +*출처: https://www.w3.org/WAI/tutorials/tables/multi-level/* +
+ +위의 사진을 보면 표를 반으로 나눴을 때 위쪽과 아랫쪽이 제공하고 있는 정보가 다릅니다. +각 데이터를 올바른 머리글과 연관짓기 위해 머리글(th 태그)는 고유한 id 값을 가지고, 데이터(td 태그)는 headers 속성에 관련된 머리글의 id 값을 공백으로 구분하여 나열합니다. +이 때, 비어있는 머리글은 `id='blank'`로 설정하여 스크린 리더가 해당 칸을 읽지 않도록 합니다. + +{% highlight html%} +  +Example 1 Ltd +Example 2 Co +[…] +Contact +[…] + +James Phillips +Marie Beauchamp +[…] +{% endhighlight %} + +- 각 데이터 칸에 관련된 세 개의 머리글이 있는 표 + +
+각 데이터 칸에 관련된 세 개의 머리글이 있는 표 +*출처: https://www.w3.org/WAI/tutorials/tables/multi-level/* +
+ +머리글을 부제목으로 사용하는 경우 데이터를 명확하게 전달하기 위해 해당 머리글의 id 값도 headers 속성에 명시해야 합니다. + +{% highlight html%} +[…] + Paris + + + 1 bedroom +[…] +{% endhighlight %} + +{% highlight html%} +[…] +11 + 20 +[…] +{% endhighlight %} + +### 2-5. Caption & Summary + +- caption 태그로 표 구분하기 + +``을 사용하여 표에 짧은 제목을 지을 수 있습니다. 대부분의 스크린 리더가 caption의 내용을 읽어주기 때문에 이를 table 태그의 첫번째 자식 요소로 사용하면 사용자가 표 내용을 계속해서 탐색할지 결정하는 데에 도움을 줍니다. 만약 'Tables Mode'를 사용하고 있다면, caption은 표를 찾는 데에 가장 중요한 요소가 됩니다. + +{% highlight html%} + + + + + + + + + + + + + […] +
Concerts
DateEventVenue
12 FebWaltz with StraussMain Hall
+{% endhighlight %} + +- caption 태그 내부에 요약을 포함하기 + +caption 태그에서 표가 다루고 있는 정보를 적고 자세한 설명은 요약하여 caption의 자식 요소로 배치합니다. 이 때, 요약 설명에는 caption에서 제공한 정보를 되풀이하면 안됩니다. + +{% highlight html%} +Availability of holiday accommodation
+ Column one has the location and size of accommodation, other columns show the type and number of properties available + +{% endhighlight %} + +- 요약을 제공하기 위해 aria-describedby 사용하기 + +table 태그에 aria-describedby 속성을 사용하고 표에 대한 요약 설명이 있는 요소의 id 값을 명시하여 둘을 연관지을 수 있습니다. 해당 요소가 table 태그 주변에 있을 경우 스크린 리더를 사용하지 않는 사람들이 빠르게 발견할 수 있습니다. + +{% highlight html%} +

Column one has the location and size of accommodation, other columns show the type and number of properties available.

+ +[…] +{% endhighlight %} + +- 요약을 제공하기 위해 figure 태그 사용하기 + +아래의 예시처럼 `
`로 표를 감싸고 `
`의 자식 요소로 표의 제목과 요약 설명을 위치시키는 방법입니다. table 태그에 aria-labelledby와 aria-describedby를 사용하여 각각 figcaption 태그, 요약 설명이 있는 요소와 연관 짓습니다. + +단, 이 방식은 스크린 리더를 사용할 때 다음과 같은 두 가지 단점이 있습니다. +1. caption 태그를 사용하지 않아 스크린 리더가 'Tables Mode'에서 표를 찾을 수 없습니다. +2. 표의 제목과 요약 설명이 스크린 리더에 의해 여러 번 읽힐 수 있습니다. + +{% highlight html%} +
+
+ Paris: Availability of holiday accommodation
+ Column one has the location and size of accommodation, other columns show the type and number of properties available. +
+
+[…] +
+ +{% endhighlight %} + + +
+ +## 3. 양식 (Forms) + +양식은 로그인, 결제 등 웹 페이지에서 사용자에게 상호작용을 제공합니다. 사용자는 간단하고 짧은 양식을 선호하기 때문에 되도록 꼭 필요한 것만 입력하도록 구성해야 합니다. 만약 불필요한 데이터를 요청한다면 사용자는 도중에 입력을 포기할 수 있습니다. 또한 각자의 속도로 양식을 입력할 수 있도록 시간 제한을 두지 않는 것이 좋습니다. + +### 3-1. 라벨 제어하기 + +텍스트 필드, 체크박스, 라디오 버튼 등 양식을 제어하는 모든 요소를 식별하기 위해 `