웹 페이지의 접근성 높은 디자인을 만드는 방법

노트북 화면

온라인 상점, 뱅킹 응용 프로그램, 호텔 예약 또는 프리랜서 일자리가 점점 더 많이 있습니다. 인터넷을 통해 처리되는 작업 어떤 경우에는 기존 미디어를 대체했습니다.

디지털 운영의 급속한 성장으로 우리는 여러 측면에서 생명. 거래가 더 빠르고 물리적 시설에 갈 필요가 없기 때문에 시간을 절약 할 수 있습니다. 이전에 존재하지 않았던 새 미디어가 생성되었습니다. 이제 대부분의 사람들이 소셜 네트워크, Netflix와 같은 플랫폼에서 영화 및 시리즈 스트리밍, 또는 Paypal과 같은 온라인 결제 시스템을 사용합니다.

이러한 디지털 세계의 부상과 함께 접근 가능하고 잘 설계된 인터페이스 개발에 투자 사용자를 위해. 그러나 우리는 그것을 잊을 수 없습니다 장애로 고통받는 사용자가 있습니다 컴퓨터 및 모바일 사용 경험과 능력을 상당히 제한하는 신체적 또는 심리적.

휠체어를 사용하는 사람들과 같이 인터넷 사용을 방해하지 않는 일부 장애가 있지만 시력 문제 또는 실명, 운동 조정 문제, 청각 장애 또는 자폐증과 같은 다른 장애가 있습니다. 웹 탐색 ​​능력을 심각하게 저해 할 수 있습니다. 이러한 경우 일부는 이미 생성되었습니다. dispositivos 스크린 리더처럼 사용자를 돕고 지원하는 사람 장애가있는 지역에서.

그러나 이것은 문제 해결의 첫 번째 부분 일뿐입니다. 이러한 사용자를 생각하면 웹 페이지 인터페이스 디자인 귀하의 경험을 촉진하고 당신의 필요에 맞게. 디자인 할 때 우리가 적용 할 수있는 몇 가지 원칙이 있습니다.

콘텐츠 및 소스

가장 기본적인 것부터 시작하여 콘텐츠 디자인의 우선 순위를 정합니다. 머리글과 메뉴 모음은 시각적으로 쉽게 찾을 수 있어야하며 사용자에게 가장 먼저 표시되어야합니다. 홈 페이지의 요소, 이미지 및 관련 정보는 두 번째로 찾습니다.

여러 페이지에 광고 또는 광고 배너가 나타납니다. 그 자체가 모든 사용자에게 성가 시다면, 시각 장애가있는 사용자에게는 많은 혼란을 야기하고 웹 다이어그램 읽기를 방해하기 때문에 문제가됩니다. 그렇기 때문에 일반 편집 디자인 페이지의 논리적으로 구성 이해하기 쉽고 요소의 크기가 적절하게 조정되어 다른 산만 함이 있어도 사용자가 중요한 콘텐츠에 집중할 수 있습니다.

사용하는 글꼴 가급적 그들은 크고 읽기 쉽습니다. 유형 산세 리프와 대담 난독증으로 고통받는 사람들이 읽기를 훨씬 쉽게 해줍니다. 기타 권장 글꼴은 Arial, Times New Roman, Helvetica, Tahoma, Calibri 및 Verdana입니다.

그리고 물론, 당신은 항상 명확한 차이가 있다는 것을주의해야합니다. 텍스트와 배경. 비슷한 색상을 사용하지 말고 오히려 선택하십시오 대조되는 색상.

Sans Serif 볼드체

Sans Serif Bold 글꼴을 사용하면 텍스트를 더 잘 시각화 할 수 있습니다.

대체 텍스트

El 대체 텍스트 또는 대체 태그는 이미지에 배치되는 설명입니다. 웹 페이지에서. 이 텍스트는 사용자가 읽을 수 없지만 잘 쓰여진 설명 더 나은 SEO 포지셔닝을 달성하는 데 도움이되는 도구입니다.

그러나 Alt Tag의 유용성은 여기에만 국한되지 않습니다. 그들을 위해 스크린 리더를 사용하는 사용자 시각 장애의 경우 이미지 설명은 다음과 같습니다. 외모가 무엇인지 알아야하는 유일한 참조 페이지에 노출되는 것의. 예를 들어 즙이 많은 사진을 놓으려면 좋은 대체 텍스트는 다음과 같습니다. 분홍색 냄비에 XNUMX 개의 즙이 많은 식물. 다음과 같은 매우 짧은 텍스트 : 화분에 심은 식물, 관련 세부 정보를 제공하는 설명이 아니므로 작동하지 않습니다.

분홍색 냄비에 다육 식물

분홍색 냄비에 XNUMX 개의 즙이 많은 식물. 대체 텍스트 예.

적응성

디자인 할 때 우리는 또한 모든 것을 고려해야합니다. 인터페이스가 표시 될 프레젠테이션, 웹 또는 모바일 버전. 우리가보고있는 매체에 따라 경험은 항상 다를 것입니다.

모바일을 사용할 때 우리는 다른 환경에 노출 될 수 있습니다 읽기를 어렵게 만드는 내용 화면의. 예를 들어 실외에있는 경우 태양의 밝기로 인해 화면이 매우 어둡게 보이고 소음으로 인해 오디오를 잘들을 수 없습니다. 그렇기 때문에 모바일 버전은 큰 글자와 짙은 색이 있고, 듣기 어려운 경우 자막이 있어야합니다.

모바일 화면

휴대폰과 컴퓨터 모두에서 읽을 수 있도록 인터페이스 디자인을 조정하십시오.

디자인의 일관성

편집 디자인 웹 사이트에서하는 일 섹션에 관계없이 동일해야합니다. 당신이있는 곳. 연락처 섹션과 동일한 메뉴 표시 줄 아이콘이 홈 섹션에 나타나야합니다. 스타일을 바꾸면 안됩니다 웹의 키 버튼 위치도 마찬가지입니다.

자동으로 재생되는 비디오를 배치하는 것도 편리하지 않습니다. 페이지를 열 때. 화면 판독기를 사용하는 사용자의 경우 일시 중지하는 방법을 알기가 어렵습니다.

스타 벅스 웹 사이트

Starbucks 페이지의 메뉴 모음은 모든 섹션에서 동일합니다.

키보드 탐색

마지막으로, 운동 조정 문제가있는 일부 사용자는 컴퓨터 마우스를 잡거나 노트북의 터치 패드를 사용하는 데 어려움을 겪고 키보드에만 의존합니다. 반드시 귀하의 웹 사이트가 어떤 방식으로 설계되었는지 그것은 완전히 될 수 있습니다 키보드 버튼으로 만 작동합니다.


코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드가 표시되어 있습니다 *

*

*

  1. 데이터 책임자 : Miguel Ángel Gatón
  2. 데이터의 목적 : 스팸 제어, 댓글 관리.
  3. 합법성 : 귀하의 동의
  4. 데이터 전달 : 법적 의무에 의한 경우를 제외하고 데이터는 제 XNUMX 자에게 전달되지 않습니다.
  5. 데이터 저장소 : Occentus Networks (EU)에서 호스팅하는 데이터베이스
  6. 권리 : 귀하는 언제든지 귀하의 정보를 제한, 복구 및 삭제할 수 있습니다.