홍보하지 마라: 전단 엔지니어와 접근성

기본적인 접근성은 결코 어렵지 않을 뿐만 아니라, 통상적으로 심지어는 하나의 선택도 아니다.어려운 건 그 빌어먹을 고집이야.

다음 코드가 기분 나쁠 거예요.

당신은 전방 개발자입니다.새로운 회사에서 일을 시작하면 다음과 같은 코드를 발견할 수 있다.

const data = await fetchData();
const a = [];

data.map( item => a.push({ t: item.subject, i: item._id })

아마도 너의 첫 번째 생각은 WTF가 그랬을 것이다💣.
우리는 그것을 잘 할 것이다.

const listOfTasks = await fetchTasks();
const idAndTitleList = listOfTasks
     .map(( { subject, _id } ) => ({ title: subject, id: _id }));

당신은 첫 번째 견본에서 분노를 느꼈습니까?

느꼈어!뚜렷하고 읽기 쉬워지도록 하는 것이 매우 쉽다는 것을 느꼈기 때문이다.따라서'그것이 왜 나타났는가'는 중요하지 않다.중요한 것은 이 코드가 통합되는 것을 막는 사람이 없다는 것이다. (지도 원칙이나 다른 것이 부족하다.) 그리고 개발자의 경험을 보면 당신도 영향을 받을 것이다.
개발자의 체험은 당신에게 그것에 의존하는 사람의 접근 가능한 기능과 같다.
이것은 여전히 매우 무해한 예이다. 만약 당신이 접근성 기능에 의존한다면, 당신은 어떤 느낌을 갖게 될지 비교해 보자. 왜냐하면 원자를 바탕으로 사이트의 접근성을 높이는 데 너무 많은 시간을 들이지 않기 때문이다. 그러나 당신은 이렇게 하지 않기로 결정했다.응용 프로그램/사이트가 완성된 후에 그것에 적응하는 것은 큰일이 될 것이기 때문에, 너는 영원히 이렇게 하지 않을 것이다.

액세스 용이성

또한 다음과 같은 이유로

If you do recommend to NOT implement proper accessibility in your application you are actually consulting for something that has legal impact in a lot of countries now. So that's, first and foremost, a very very good reason to inform yourself and your colleagues about accessibility even more.
Source: https://www.w3.org/WAI/policies/

따라서 외딴 섬에서 개발하지 않았다면 법적 규정이 있을 가능성이 높다.
나는 이런 불확실한 견해를 자주 듣는다."프런트엔드 엔지니어, 디자이너, 특히""시간 절약""엔지니어를 유치하려는 제품 소유자 및 관리자:

"우리 나중에 해요".

기술적으로 말하자면, 나는'나중에 다시 하자'는 것은 문제가 없다고 생각한다.하지만 당신의 책상 위에 포크가 놓여 있다는 비유를 들어보겠습니다.너는 지금 그것을 선반 위에 놓을 수 있다. 너의 방은 매우 깨끗해 보인다.당신의 몸이 편안하고 깔끔할 때, 대량의 엔도르핀이 당신의 몸에 충격을 줄 것이다.상냥했어지금 상상해 봐, 너는 모든 물건을 1년 동안 방에 두어라.지금부터 방을 청소하고, 심지어는 어떤 것도 찾기 시작한다.알았어...

"장애인은 어쨌든 목표군이 아니에요".

이 말은 영원히 성립되지 않는다.여태껏모든 단일 상황에서는 1명 이상이 사용하는 모든 응용 프로그램에 적용되지 않는다.
나는 한 자동차 업계에서 자주 이런 말을 듣는다. "맹인은 운전을 할 수 없다. 그러면 나는 어떻게 그들을 도와야 합니까?"
응, 맹인은 여전히 자동차 업계의 디지털 판매 부분을 통제할 수 있어.아주 아주 명확한 예를 들다.만약 네가 원한다면, 나는 수천 위안을 더 추가할 수 있다.
그 밖에 나쁜 접근성은 항상 전문 사용자에게 영향을 줄 수 있다. 왜냐하면 나쁜 키보드 사용과 함께 있기 때문이다.

"네, 아리아 라벨과 알트 속성을 추가하겠습니다."

Fk no.no.no. 영향을 모르면 무작위aria-* 속성이나alt/title 탭만 추가하지 마세요.이해의 기초부터.이해는 조금도 힘들이지 않고 그것을 사용하고 인코딩할 때 그것을 실현하는 관건이다.나는 나 자신을 추천할 것이다. 그러나 문제는 나 자신이 아무런 공공 자원이 없기 때문에, 나는 나의 뇌를 너에게 빌려줄 필요가 있다.

구글에 아주 좋은 무료 udacity 과정이 있어요. (저는 정말, 정말 이것을 추천할 수 있어요): https://www.udacity.com/course/web-accessibility--ud891

이거 읽기: https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree

너도 할 수 있어.그녀는 트위터 계정에서 링크를 찾을 수 있는 새로운 강좌를 발표했다.

좋은 도서는 항상 좋은 것이다

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role 접근성을 높이는 것이 얼마나 쉬운지 증명해 보겠습니다.

CSS를 이해하면 a11y에 영향을 줄 수 있습니다. 만약에 당신display: none이 원소에 영향을 미치면 시각적, 접근 가능한 트리에 숨겨져 있기 때문에 당신<div style="display: none" aria-label="additional info only for screen readers">...은 쓸모가 없습니다.

당신의 디자인이 좋은 비율을 가지고 있는지 확인하십시오 (chrome inspector에 내장되어 있고 디자이너가 사용할 스케치 플러그인도 많습니다. 예를 들어).

적절한 HTML 구조를 사용하는 것은 좋은 시작이다.정의에 따라 올바른 HTML(CSS 등을 추가할 필요가 없음)은 완전히 액세스할 수 있습니다.https://webaim.org/resources/contrastchecker/

주변에 화려한 원소가 있으면 실제로는 효과가 없지만 멋있어 보인다aria-hidden="true"

로 의미적으로 숨긴다

alt 라벨의 img 속성은 반드시 내용이 필요하지 않습니다.표시된 이미지가 컨텐트에 연결된 경우 컨텐트가 필요합니다.예를 들어, "점점 더 많은 사람들이 새로운 쇼핑센터를 참관하고 있다"는 뉴스 보도가 있다.지금 상상해 보세요. img 라벨이 있는데 그 위에 사진이 있는데 쇼핑센터에 사람이 많다는 거예요.그럼 좋은alt 라벨은 alt="A lot of people standing in the new Shopping Center the city"일 거예요.그러나 만약에 이미지가 무작위 재고 이미지일 뿐이라면 추가 정보를 제공하지 않을 것이다. alt="" (이런 상황에서 내용 자체는 존재하고 이미지는 시각적 보충일 뿐이다.)

정태동사를 사용하면'잠금'을 확보하세요.만약 마우스로 모드 아래의 요소를 클릭할 수 없다면, 키보드로 모드 아래에서 표를 만들 수 없습니다.그러나 많은 모드들이 이렇게 한다. 이것은 화면 리더를 사용하는 사람들에게 무서운 것이다. 왜냐하면 그들은 모드를 떠난 후에 종종 모드로 돌아갈 수 없기 때문이다.나는 또한 이 점을 실현하는 데 도움을 줄 React 라이브러리를 세웠다. https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML

https://github.com/activenode/react-use-focus-trap 이제 더 이상 나쁜 놈 취급하지 말고 적어도 자신에게 좀 말해라.

좋은 의미의 HTML 구조를 제공하고 어떻게, 그리고 언제 정확하게 설정alt속성(대다수 FE 개발자들은 이 점을 알고 있지만 사실상 그들은 모른다고 생각하지만), 그리고 사용aria-*속성의 영향은 기본적인 a11y에 매우 좋은 시작이다.이것은 듣기에 매우 큰 노력이 아닌 것 같다. 그렇지?