웹 접근성에 왜 관심을 가져야 합니까?

사이트를 시작하기 전에 준비해야 할 프로젝트 목록이 매일 증가하고 있습니다.접근성이 무서워 보입니다. 만약 당신이 그것을 접촉했다면, 목록에 추가될 것이며, 발표하기 전에 반드시 해야 할 100개의 다른 작은 검사와 복구로 확장될 것입니다.
사이트 개발에 있어 접근성은 귀하의 사이트가 시각, 청각 또는 기타 제한을 가진 사람이 사용할 수 있도록 하는 것을 의미합니다.인터넷은 이런 가용성을 고려해 만들어진 것이고 대부분 무료다.가장 큰 문제는 파괴되기 쉽다는 것이다. 흔히 볼 수 있는 많은 웹 개발 실천이 그것을 파괴할 수 있고 확실히 파괴할 수 있다는 것이다.
사이트를 방문할 수 있게 하는 어려움을 소홀히 해서는 안 된다.그것은 여전히 네가 해서는 안 될 것이 무엇인지, 네가 해야 할 일이 무엇인지를 의식하는 것을 포함한다.너는 어쩔 수 없이 너의 업무 방식을 바꾸거나 사이트에서 어떤 미학이나 기능을 실현하는 방식을 바꿀 수도 있다.
응용 프로그램 환경에서의 기능이나 시각적 효과의 중요성을 재평가할 수도 있다.이 모든 것은 당신의 응용 프로그램을 더욱 사용할 수 있도록 하기 위해서입니다.대부분의 경우, 당신은 추가 도전이 있는 사용자와 도전이 없는 사용자에게 더욱 적합하게 할 것입니다.
그리고 만약 이것이 당신을 격려하기에 부족하다면, 만약 당신의 사이트를 방문할 수 없다면, 당신은 기소될 수도 있습니다!맞아요!설령 네가 네 사이트가 모든 사람에게 더욱 유용하게 쓰인다 하더라도, 너는 아마 너의 은행 계좌가 비워지기를 원하지 않을 것이다.당신의 이타주의 근육이 약간 변형되었을 수도 있지만, 당신은 여전히 접근성에 주목할 만한 이유가 있다.
나는 학술 용어로 말하는 것이 아니다.These lawsuits are actually happening, 원고가 승소하고 회사는 사이트에 대한 보완을 명령받아 《미국장애인법안》에 부합하도록 했다.
만약 당신이 사이트를 개발할 때 접근성을 고려하지 않았다면, 이로 인해 발생하는 소송은 직접적으로 당신을 겨냥할 수 없지만, 당신의 명예에 대한 손해는 큰 문제일 수 있습니다.지난번 회사가 만든 사이트 때문에 고소당한 것을 알고 개발자를 고용하는 회사는 많지 않다.한 회사의 직원이라도 소송의 여파 속에서 예산 제한으로 해고될 수 있다.만약 당신이 상술한 소송을 일으키는 사이트를 구축한다면, 당신은 처음으로 집을 나서는 사람이 될 것이다.

개성화

이 모든 것은 학술적이다. 내 생활에서 한 가지 일이 발생할 때까지 나는 방문 가능성과 밀접하게 연결되어 있다.내 딸은 12살 때 앓고 있다는 진단을 받았다Stargardt disease.이것은 그녀로 하여금 중심시력을 잃게 했다.그녀가 안경을 쓴 시력은 20/100이다.
만약 당신이 "E"로 시작하는 시력 테스트표 the Snellen chart 에 익숙하다면, 그녀는 아래의 두 번째 줄 (즉 "E"아래의 그 줄) 을 읽을 수 있을 것이다.
지금부터 그녀가 세계에 참여하는 풍부함이 다른 사람들의 손에 달려 있다는 뜻이다.시력이 20/100보다 높을 수 있는 사람.여전히 중심시력이 있는 사람들너와 나 같은 사람은
어떤 학부모들처럼 나는 그녀가 충실하고 풍부한 생활을 할 수 있기를 바란다. 방문할 수 있는 사이트를 가지고 있으면 그녀가 이 점을 할 수 있도록 확보하는 데 큰 도움이 될 것이다.
지금까지 영감과 두려움을 섞은 완벽한 칵테일로 무장애성이 중요하다고 믿었으면 좋겠습니다.그렇다면 오늘 당신이 얻을 수 있는 빠른 승리를 보고 접근성에 주목하자.

빠른 접근성 승리

대체 텍스트

만약 당신의 사이트에 비텍스트 요소가 있다면, 방문할 수 있도록 어떤 텍스트 대체품을 제공해야 합니다.네가 이렇게 하는 것은 저시력 사용자가 화면 판독기 소프트웨어를 사용할 수 있기 때문이다. 그것은 한 글자씩 네 웹 페이지의 텍스트를 읽을 수 있기 때문이다.텍스트가 아닌 요소에 도달했을 때, 사용자가 그것이 무엇인지 알 수 있도록 텍스트가 필요합니다.
가장 흔히 볼 수 있는 형식은 이미지 요소의alt 속성이다.그림을 설명하는 문자로 채우십시오.이것은 그림을 배경 이미지로 만들지 않고 달콤한 배경 크기 속성, 예를 들어 포함과 덮어쓰기를 얻기 위한 것이다.(실제로는 이렇게 할 수 있지만, 화면 판독기에는 img 요소가 필요합니다.)
폼 컨트롤러는 추가 텍스트가 필요한 또 다른 요소의 예입니다.양식 컨트롤에 연관된 태그가 있는지 확인합니다.레이블에 for 속성과 연관 컨트롤 ID와 일치하는 값이 있는지 확인하여 레이블을 연관시킬 수 있습니다. 다음은 예입니다.

<label for="email">Email:</label>
<input type="email" name="email" id="email">

요소가 순전히 장식일 때만 대체 텍스트를 생략할 수 있습니다.이것은 당신의 모든 그림이 순수한 장식성이고 다른 문자가 없다는 것이 아니다.그림이 전달하는 정보가 텍스트의 다른 곳에 없으면 장식적인 것으로 간주하고 다음과 같이 alt 속성을 비워 둘 수 있습니다.

<img src="decorative-cat-icon.svg" alt="">

웹 사이트가 대체 텍스트를 제공할 수 있는지 판단하는 가장 좋은 방법은 웹 사이트를 볼 필요가 없이 화면 판독기를 사용하는 것입니다.만약 네가 맥 컴퓨터에 있다면, 너는 쉽게 보조 기능 첫 번째 선택 창에서 외음을 그릴 수 있다.Windows에서는 download NVDA for free 를 사용할 수 있지만 테스트를 제대로 수행하려면 JAWS 라이센스를 획득해야 합니다.

현저한 차이

명암비는 두 색상 사이의 밝기 차이입니다.우리가 인터넷에서 대비도를 이야기할 때, 우리는 통상적으로 어떤 배경에서 텍스트를 보는 것이 얼마나 쉬운지 이야기한다.

위의 예에서 높은 대비도의 예는 분명히 더 쉽게 볼 수 있지만, 나는 그것들을 동시에 볼 수 있다.그럼 내가 왜 신경 써야 되지?
시력이 낮은 사람은 이런 별도의 대비가 있어야만 형상을 식별하고 문자를 읽을 수 있다.우리는 같은 예로 저시력 사용자가 겪을 수 있는 추가 어려움을 모의하여 텍스트를 작게 할 수 있다.아래의 예에서 설령 당신이 좋은 시각적 효과를 가지고 있다 하더라도 대비도가 낮은 텍스트를 보기 어렵다. 설령 그 색깔이 이전과 같다 하더라도.

이것은 매우 좋지만, 논리적으로 말하자면, 이것은 모든 사이트가 흰색 배경의 검은색 텍스트가 될 수 있다.비록 이것은 대비적으로 매우 좋지만, 그것은 항상 당신의 브랜드나 창조에 대해 당신이 사용자에서 창조하고 싶은 감정에 대한 반응이 좋은 것은 아니다.
다행히도 W3C는 이미 충분한 대비도를 둘러싸고 표준을 제정했다.Chrome의 개발자 도구를 사용하면 이러한 기준에 부합하는지 쉽게 알 수 있습니다.이것은 영상으로 그의 작업 원리와 어떻게 대비도 문제를 쉽게 해결할 수 있는지를 보여 준다.
참고: Chrome의 최신 버전에서는 이 기능이 취약합니다.검사한 요소에 전경과 배경색 스타일이 동시에 있을 때만 유효한 것으로 알고 있습니다.Axe의 다음 절을 보고 내가 찾은 최선의 대안을 찾으십시오.Chrome의 내장 도구가 이전의 휘황찬란함을 빨리 회복할 수 있기를 바랍니다.

도끼

Axe는 접근 가능한 테스트 도구이다.가장 간단한 사용 방법은 설치their Chrome plugin이다.설치 후 테스트할 사이트를 열고 개발자 도구를 연 다음 "axe"옵션 카드를 누르십시오.axe 탭에서 Analyze 버튼을 클릭합니다.
Axe는 액세스 가능한 문제의 목록을 표시합니다.모든 질문을 누르면 이 문제에 대한 상세한 정보를 볼 수 있습니다.이것은 당신에게 문제의 소재를 알려주고 문제가 있는 요소를 검사할 수 있도록 합니다.그것은 또한 당신에게 이 문제를 어떻게 해결하는지에 대한 더 많은 정보를 제공할 것입니다.
만약 접근성을 알아차리지 못했다면, 이 목록이 매우 무섭다는 것을 발견할 수 있을 것이다.가장 심각한 문제를 먼저 해결하다.질문 중 하나를 클릭하면 세부 정보 섹션에서 영향을 찾습니다.

이상적인 경우, 당신은 axe에서 깨끗한 스캐닝을 하기를 원하지만, 적을수록 좋습니다.만약 네가 모든 문제를 해결할 수 없다면, 너는 어떤 문제도 해결해서는 안 된다고 생각하지 마라.설령axe가 발견한 몇 가지 가장 문제가 있는 문제를 해결한다 하더라도, 당신의 사이트나 응용 프로그램을 더욱 가용성을 가지게 할 것이다.

첫걸음을 내디디다

현재 항목을 즉시 시작하여 모든 이미지에 선택적 텍스트가 있는지 확인합니다.이것은 이렇게 간단한 시작 방식이다!그리고axe를 설치하고 스캔을 실행한 다음 응용 프로그램'완료'를 호출합니다모든 사용자가 볼 수 있도록 Chrome의 대비도 측정기를 사용하여 색을 조정합니다.
이 절차들은 매우 간단해서 실현하는 데 너무 많은 시간을 들일 필요가 없다.일단 그것들에 익숙해지면 자연스레 적극적이고 주동적으로 변하게 되고, 시작 전 검사는 더 적은 문제를 드러내기 시작할 것이다.너는 더 많은 사람들로 하여금 너의 사이트를 더욱 쉽게 사용할 수 있게 할 것이다.만약 이것이 당신을 격려할 수 없다면, 당신은 당신과 당신의 고객이 비싼 법률 소송에 직면할 위험을 줄일 것이다.
만약 네가 이렇게 많이 읽었다면, 나는 네가 개발자라는 것을 안다. 그는 학습이 코드의 가치만이 아니라는 것을 보았다.만약 당신이 이 일을 위해 보수를 받고 싶다면, 당신이 필요로 하는 것은 코드만이 아니다.나는 사람들이 아물도록 돕는다💻 화목하다💰. Rad Devon에 무료 지도 과정을 등록해서 내가 어떻게 당신을 도울 수 있는지 이야기합시다!