접근성을 위해 사이트를 디자인하는 10가지 방법

게시 됨: 2022-02-16

나는 현대적인 웹 디자인에 실망했습니다. 그리고 저는 글로벌 접근성을 확인하지 않고 자신의 작품을 판매하는 대부분의 테마 및 템플릿 디자이너에 대해 확실히 실망했습니다.

많은 디자이너들은 실제로 접근성이 좋은 좋은 CMS를 사용하여 접근성 문제가 큰 디자인을 만듭니다.

저는 호주에서 변호사, 웹사이트 디자이너 및 접근성/다양성 컨설턴트입니다. 기업, 정부 및 교육 부문에 자문을 제공한 결과 많은 사이트에 액세스할 수 없으며 많은 사용자에게 좋지 않은 경험을 제공합니다.

접근성이 왜 중요한가요?

2010년에는 선진국 인구의 10%가 인쇄 장애가 있었습니다. 그 수치는 비개발 국가의 15%였습니다.

호주에서는 귀하의 사이트에 액세스할 수 없는 경우 귀하를 법원으로 데려갈 수 있을 만큼 접근성이 중요하다고 간주됩니다. 충격?

아니요, 저는 클라이언트가 "시각 장애인을 위한 사이트"가 아니라 모두가 액세스할 수 있는 사이트에 중점을 두는 것을 권장하지 않습니다. 여기에는 인쇄 장애, 신체 장애, 청각 장애를 가진 사람들이 포함됩니다. 요컨대, 전체 청중의 많은 비율이 귀하가 하는 방식으로 귀하의 사이트에 액세스할 수 없습니다.

값 비싼? 아니요, 사실 디자인 표준으로 돌아갑니다. 왜냐하면 이것이 진짜 기본이기 때문입니다.

다음은 사이트에 액세스할 수 있도록 하기 위해 수행할 수 있는 10단계입니다.

#1. 사이트를 사용하기 쉽게 만드세요

디자인 방법을 알려줄 필요가 없습니다. 그러나 다음 세 가지 주요 원칙은 장애가 있는 사용자에게 도움이 됩니다.

사이트를 읽고 이해하기 쉽게 만드십시오.
탐색하기 쉬운 사이트 만들기
모바일 장치에서 사이트를 쉽게 사용할 수 있도록 합니다.

이렇게 하면 접근성에 가까워지고 검색 엔진이 귀하의 사이트를 좋아하는 데도 도움이 됩니다!

내 사이트를 테스트하는 스크린 리더는 Google 로봇과 같습니다(블라인드 기술이 처음 사용되었다는 점 제외).

#2. 접근성 소프트웨어로 테스트

PC에 화면 탐색 및 읽기를 지원하는 접근성 소프트웨어가 있다는 것을 알고 계셨습니까? 아마 알고 있었겠지만, 모바일 장치에는 접근성 소프트웨어가 코어에 내장되어 있다는 사실도 알고 계셨습니까? 이 소프트웨어는 시각 장애가 있는 사람을 포함한 사람들이 읽을 수 있습니다.

Apple(iOS)은 VoiceOver를 사용합니다.
Android는 Talkback을 사용합니다.
Windows는 내레이터를 사용합니다.

거의 모든 웹 사이트 디자이너가 템플릿에 메뉴를 포함하지만 95%는 위의 기술로 읽을 수 없습니다! 이러한 접근성 서비스의 대부분은 잘못 코딩되어 있기 때문에 메뉴의 존재를 인식하지 못합니다. 대부분의 경우 문제는 메뉴가 제대로 코딩되지 않았거나 태그가 명확하지 않다는 것입니다.

일부 사이트를 휴대전화에 로드하고 접근성 기능을 켜는 것이 좋습니다. 사이트 메뉴가 작동하는지 확인하십시오.

#삼. 모두 대문자로 쓰지 마세요

이것은 아마도 누구나 자신의 사이트에서 할 수 있는 가장 기본적인 변경일 것입니다. 모두 대문자로 작성하지 마십시오.

모든 대문자는 누구나 읽기 어렵기 때문에 과학적으로 테스트되고 입증되었습니다!

가장 많이 사용되는 대문자는 메뉴 항목과 버튼에서 찾을 수 있습니다. 브랜드나 로고와 같은 특정 디자인 목적이 없는 한 일반적인 대문자로 작성하면 메시지를 전달하는 데 도움이 됩니다.

#4. 링크를 명확하게 설명

"자세히 알아보기" 또는 "여기를 클릭하세요" 버튼은 Google(또는 스크린 리더를 사용하는 사용자)에게 링크 뒤에 무엇이 있는지 알려주지 않습니다. 의미가 있는지 확인하기 위해 컨텍스트에서 링크를 가져오기만 하면 됩니다. 페이지 중간에 있는 '더 읽기'가 의미가 있습니까? 더 읽기 무엇을?

#5. 대조되는 스타일을 잘 사용하십시오.

그렇다고 콘텐츠를 죽이는 것이 아니라 시각 장애인이 쉽게 사용할 수 있도록 하는 것입니다. 여기 팁이 있습니다 ... 모바일 화면을 절반 전원으로 켜고 사이트를 읽어보십시오. 빛과 어둠 속에서 어떻게 보입니까?

#6. '콘텐츠로 건너뛰기' 링크 사용

본문을 읽기 전에 30번 고개를 끄덕인다고 상상해보세요! 인쇄 장애가 있는 사람은 메뉴 건너뛰기를 허용하지 않는 경우 이 작업을 수행해야 합니다. 사실, 그것은 제목 태그를 사용하는 것과 동일합니다. H1에서 H4는 검색 엔진과 인쇄 장애가 있는 사람들이 귀하의 사이트를 탐색하는 데 도움이 됩니다.

아, 그리고 화면 밖으로 링크를 숨기지 마세요! 시각 장애인은 종종 돋보기를 사용하고 키보드가 아닌 수동으로 해당 링크를 찾습니다.

#7. 팝업 사용 중지

최소한 'esc'를 눌러 제거할 수 없는 것은 사용을 중지하십시오. 우리 소프트웨어는 기본적으로 팝업 상자에 들어갈 수 없다는 것을 알고 계셨습니까? 그리고 보통 우리는 상자 뒤에 있는 것을 읽게 됩니다. 당신에게는 회색으로 보이지만 우리에게는 그렇지 않습니다.

팝업을 사용하려는 경우:

'esc' 버튼으로 닫을 수 있도록 만드십시오.
우리 소프트웨어가 뒤에 있는 텍스트가 아닌 상자를 읽을 수 있도록 만드십시오.
콘텐츠를 찾거나 양식을 작성하는 다른 방법에 대한 세부 정보를 제공하거나 '자세한 내용을 보려면 xxxx 페이지로 이동'하십시오.

#8. 일부 상황에서는 텍스트 크기 조정이 유용할 수 있습니다.

개인적으로 텍스트 크기 조정은 콘텐츠 링크로 건너뛰는 것보다 훨씬 덜 중요합니다. 이는 인쇄 장애가 있는 사람(기존 세대 포함)이 Windows 돋보기 또는 확대/축소 텍스트, 매직 아이 또는 기타 무료 소프트웨어와 같은 일부 전문 제품을 사용하기 때문입니다. 내 경험에 따르면 크기 조정기는 일반적으로 모바일 콘텐츠를 파괴하며 핵심 모바일 접근성 기능을 사용하거나 꼬집거나 사용하는 것보다 반응이 훨씬 떨어집니다.

또한 적응형 기술로 텍스트 크기를 조정하여 사용자가 화면에서 자신을 찾을 수 있도록 껐다가 켤 수 있습니다(일부 확대하여 한 번에 화면의 1/8만 볼 수 있음). 그렇긴 하지만 텍스트 크기 조정은 여전히 관련성이 있고 정부 사이트에 넣을 가치가 있을 수 있습니다. 저에게는 상위 10가지 우선 순위가 아닙니다.

#9. 이미지 아이콘 대신 글꼴 아이콘 사용

확대를 사용하는 사람들은 한 번에 사이트의 약 1/8만 볼 수 있으며 휴대전화를 사용하는 사람들은 일반적으로 '리더' 버튼을 눌러 이미지 무료 버전을 로드합니다. 나는 대부분의 '이미지 아이콘'이 최대 확대/축소에서 극단적으로 픽셀화된다는 사실에 대한 게시물을 작성할 수 있지만 글꼴 아이콘은 그렇지 않습니다(어쨌든 그렇게 많지는 않음).

#10. 비디오 스크립트 추가

웹사이트가 완전히 무음이라면 YouTube 동영상을 웹사이트에 올려도 소용이 없고, 청각 장애인이 따라할 수 있는 스크립트나 방법이 없는 동영상을 올려도 소용이 없습니다. 이는 글로벌 청중 또는 고객 기반을 보유하고 있지만 일본어로만 정보를 제공하는 것과 같습니다.

간단하게 말 없이 기술적인 YouTube 동영상을 보고 눈을 감으세요. 참고 - 눈을 감는 것은 다시 눈을 뜰 수 있기 때문에 실명을 재현하지 않지만 재미있는 운동입니다.

접근성 리소스

다음 사이트는 사이트를 확인하기 위한 지침과 도구를 제공합니다.

Web Aim 접근성 검사기
호주 정부 웹 콘텐츠 접근성 지침
W3C 유효성 검사기. W3C 유효성 검사기는 불필요한 오류를 많이 반환합니다. 각 오류가 문제를 해결할 가치가 있는지 여부를 판단해야 합니다.

다음 사이트는 데스크톱 사이트를 테스트하는 데 사용할 수 있는 화면 판독기를 제공합니다.

음성으로 작업 액세스(JAWS)
Ai 제곱은 무료 평가판을 제공합니다.
Window Eyes - 스크린 리더
NV Access는 완전 무료 NVDA(Non Visual Desktop Aid) 스크린 리더를 제공합니다.

참고: 저는 Sitecues를 권장하지 않습니다. 인쇄 장애가 있는 사람들에게 설치하기 쉽고 효과적이지 않습니다.

결론

모든 것과 마찬가지로 기능적 규칙과 엄격한 규칙 준수 사이에는 균형이 있습니다. 내 클라이언트 사이트 중 어느 것도 100% 액세스 가능하지 않거나 W3C를 준수하지 않습니다. 그들은 접근 가능하고 검색 엔진 친화적입니다. 그것들은 논리적이고 대조가 잘 되지만 임팩트를 위한 스타일과 기능도 있습니다.

전 세계적으로 인쇄 장애가 있는 사람이 몇 백만 명입니까? 잠재 고객은 몇 명입니까?

Joomla, Drupal, WordPress, 순수 HTML 또는 기타 플랫폼으로 사이트를 구축하든, 이 문제가 귀하의 비즈니스와 고객을 위해 진지하게 받아들일 가치가 있다는 것을 확신했기를 바랍니다.