유니버설 웹 디자인에서 인기있는 실수

오늘날의 엄청나고 경쟁이 치열한 "웹 2.0"및 소셜 미디어 세계, Universal Design 여러 번 잊혀졌습니다. 보편적 인 설계 관행을 지원하는 많은 사회적, 기술적, 재정적, 법적 이유가 많기 때문에 왜 당황하고 있습니다. 오늘날 웹 사이트에서 더 널리 퍼져있는 문제와 주요 보편적 인 디자인 원칙과 관련된 방법에 대해 논의 해 봅시다. 키 테이크 아웃

Universal Web Design은 종종 사회적, 기술적, 재정적 및 법적 혜택에도 불구하고 간과됩니다. 일반적인 실수에는 읽기 어려운 텍스트, 불분명 한 텍스트 링크, 과도한 시각적 노이즈, 키보드 액세스 부족 및 이미지의 대체 텍스트 누락이 포함됩니다. 텍스트 가독성은 범용 디자인에 중요합니다. 소규모 텍스트와 낮은 색상 대비는 웹 타이포그래피를 읽기 어렵게 만들 수 있습니다. 고정 크기가 아닌 CSS에서 상대 크기를 사용하면 사용자가 필요에 따라 텍스트를 크기로 조정할 수 있습니다. 키보드 액세스는 범용 설계에 필수적입니다. 많은 웹 사이트가이를 제공하지 않아 사용자에게 장벽을 만듭니다. 좋은 관행에는 다음이 포함됩니다 : CSS의 초점 상태 : 호버 의사 클래스가 사용되고 마우스 이벤트가 설계되면 키보드에 대한 동일한 액세스가 제공되는지 확인합니다. 이미지에 대한 대체 텍스트를 제공하는 것은 Universal Design의 또 다른 주요 측면입니다. 이미지가 관련 컨텐츠를 제공하는 경우 시각 장애가 있거나 인터넷 연결이 느려지는 모든 사용자를 포함하여 모든 사용자의 접근성을 보장하기 위해 대체 텍스트와 함께 제공되어야합니다.

원리 먼저, 웹 관련 예제를 포함하여 7 가지 범용 디자인 원칙을 검토해 봅시다. 물론 이러한 원칙은 토목 공학 (건물, 산책로), 엔터테인먼트 (영화관, 테마 파크) 및 교통 (버스, 기차)과 같은 컴퓨터 및 웹 외부의 많은 산업에 적용됩니다.

<:> 공평한 사용 : 다양한 능력을 가진 사람들에게 유용하고 시장성.
1. 예 : 지방 정부 웹 사이트는 스크린 리더와 같은 보조 기술을 사용하는 사람들이 액세스 할 수 있도록 설계되었습니다. 사용 유연성 : 광범위한 개별 선호도와 능력을 수용합니다.
   예 : 항공사 웹 사이트의 디자인은 다양한 컴퓨터 디스플레이 크기의 시각적 미학을 유지합니다. 단순하고 직관적 : 사용자의 경험, 지식, 언어 기술 또는 현재 집중 수준에 관계없이 이해하기 쉽습니다.
예 : 웹 응용 프로그램의 기본 제어에는 텍스트와 기호가 모두 표시됩니다. 지각 가능한 정보 : 주변 조건이나 사용자의 감각 능력에 관계없이 필요한 정보를 사용자에게 효과적으로 전달합니다.
2. 예 : 캡션이있는 교육용 비디오는 듣기 외에도 대화를 읽는 옵션을 제공합니다. 오류에 대한 내성 : 우발적이거나 의도하지 않은 행동의 위험과 불리한 결과를 최소화합니다.
   예 : 양식을 제출할 때 기술적 오류는 계속하는 방법에 대한 명확한 설명과 옵션을 제공합니다. <:> 낮은 신체적 노력 : 효율적이고 편안하게 사용될 수 있으며 최소한의 피로로 사용할 수 있습니다.
예 : 웹 사이트 디자인은 눈의 긴장을 최소화하기에 충분한 색상 대비 및 텍스트 크기를 가지고 있습니다. 접근 및 사용을위한 크기 및 공간 : 사용자의 신체 크기, 자세 또는 이동성에 관계없이 접근, 도달, 조작 및 사용에 적합한 크기와 공간이 제공됩니다.
3. 예 : 웹 사이트는 마우스를 사용할 수없는 물리적으로 손상된 사용자가 키보드 (또는 화면 키보드)로 모든 컨텐츠에 액세스 할 수 있도록 설계되었습니다.

우리는 원칙에 익숙해 져서 몇 가지 관련 웹 디자인 문제를 살펴 보겠습니다. 읽기가 어렵습니다 Universal Design의 첫 번째 인기있는 실수는 텍스트 컨텐츠입니다. 디자인으로 인해 많은 사람들이 읽기가 어렵습니다. 이것은 원칙 1, 공평한 사용과 관련이 있습니다. 그리고 6, 낮은 신체적 노력, 특히 눈의 긴장. > 판독 난이도는이 기사의 범위 내에 있지 않은 별도의 문제입니다. 좋은 가독성은 웹 사이트를보다 유용하고 미적으로 즐겁게 만듭니다. 그건 그렇고, 매우 쉽게 읽을 수 있도록 readability.com 웹 응용 프로그램을 확인하십시오. 그렇다면 문제는 무엇입니까? 작은 크기의 텍스트와 낮은 색상 대비는 웹 타이포그래피를 읽기 어렵게 만드는 두 가지 주요 문제입니다. 아래의 예에서, 주요 텍스트 내용은 검은 배경에서 회색이며 밝기 및 테스트의 차이가 실패합니다. 텍스트 크기는 나 자신을 포함하여 많은 사용자에게 상당히 작은 12 픽셀로 설정됩니다. CSS 에서 텍스트 크기를 제거 할 때 브라우저에는 기본 크기가 약간 크고 훨씬 더 읽기 쉬운 기본 크기를 표시합니다! 따라서 기본 텍스트를 12px 또는 .75EM으로 설정하는 대신 16px 또는 .95EM과 같이 약간 더 높습니다. 텍스트와 관련된 또 다른 모범 사례는 CSS에서 상대 크기를 사용하는 것입니다. (EMS 또는 백분율) 고정 크기 (픽셀 또는 포인트) 대신 사용자가 필요에 따라 브라우저에서 텍스트를 크기로 조정하고 텍스트와 함께 레이아웃 스케일을 가질 수 있도록하는 데 도움이됩니다. 사용자 친화적 인 제목을 제공하고 충분한 라인 스페이스를 제공하는 다른 좋은 지침. 텍스트 링크를 결정하기 어렵습니다 기본적으로 하이퍼 링크 텍스트는 밑줄로 렌더링됩니다. 이것은 웹 브라우징에서 오랜 규모의 컨벤션입니다. 이 컨벤션을 제거하면 사용자의 기대를 중단 할뿐만 아니라 색맹이나 시력이 낮은 링크가 접근 할 수 없게 될 수 있습니다. 이 문제를 복합적으로 여러 번 링크가 검은 색 텍스트 중에서 어두운 색으로 정의 될 때입니다. 위의 문제와 마찬가지로 이것은 원칙 1 및 6과 관련이 있습니다. 내 검안사는 40 세경부터 남성의 시력이 색상을 구별하는 능력을 잃기 시작한다고 말합니다. 그리고 소년은 그녀가 옳습니다! 많은 웹 사이트에는 밑줄이없는 진한 파란색 링크가 있으며 텍스트 링크를 결정하기 위해 눈을 긴장시켜야합니다. 아래의 예는 뉴스 기사에서 나온 것입니다. 텍스트 링크를 볼 수 있습니까? 나에게는 매우 어렵습니다. 뉴스 웹 사이트는 저명한 영국 사이트 The Telegraph에서도 제거 된 밑줄과 함께 파란색 링크를 사용하는 것으로 악명 높은 것 같습니다. 해결하려면 밑줄을 반환하여 장벽을 제거하십시오. Nomensa 블로그가 좋은 예입니다. 선택적으로, 굵은 텍스트 또는 컬러 배경과 같은 텍스트 링크에 ​​대한 다른 시각적 표시를 사용하십시오. 시각적 소음 흩어져있는 레이아웃과 콘텐츠 과부하는 시각적으로 호소력이 없을뿐만 아니라 매우 유용하거나 액세스 할 수있는 것은 아닙니다. 이것은 단순하고 직관적 인 원리 3과 직접 관련이 있습니다. 아래에 표시된 캘리포니아 지방 정부 웹 페이지에는 수많은 내비게이션 영역, 2 개의 큰 하위 하위 배너 이미지 및 조직화되지 않은 흩어져있는 외관이 있습니다. 결과적으로 기본 내용은 페이지의 "접는"까지 시작되지 않으며, 이는 분명히 이상적이지 않습니다. 또한 초점이없고 시각적 계층 구조가 없으므로 사용자가 사용자에게 필요한 것에 대해 페이지를 열렬히 검색 할 가능성이 높아집니다.

대조적으로, 호주 정부와 USA.gov 웹 사이트를 확인하십시오. 훨씬 더 넓고 조직화되어보다 유용한 경험을 만듭니다. "시각적 노이즈"를 만드는 더 많은 예는 다음과 같습니다.

내비게이션 : 페이지의 너무 많은 내비게이션 섹션 (위의 예에서와 같이)과 너무 많은 수준의 탐색은 디자인 악몽뿐만 아니라 혼란 스러울 수 있습니다.
• 중복 툴팁 : 링크 자체와 동일한 컨텐츠를 가진 텍스트 링크의 제목 속성은 눈에 띄고 불필요한 툴팁을 만듭니다. 무의미한 이미지 : 값이있는 경우 컨텐츠에서 이미지 만 사용하십시오. 텍스트 내용에 중요한 의미를 전달해야합니다
키보드 액세스 금지 키보드 액세스, 화면을 탐색하고 키보드 만 사용하여 집중 가능한 객체와 상호 작용하는 기능이 필수적입니다. 불행히도 많은 웹 사이트가이를 제공하지 않습니다. 보다 정확하게 언급하면, 많은 웹 사이트는 HTML
• 가 본질적으로 키보드 액세스 가능하기 때문에 키보드 사용자에게 장벽을 만듭니다. 마우스 이벤트를 위해 디자인하는 경우 키보드에 동일한 액세스를 제공하십시오. 이것은 장치 독립성을 만듭니다. 좋은 일입니다! 이 문제는 원칙 1, 공평한 사용과 관련이 있습니다. 2, 사용의 유연성. 웹 사이트를 코딩 할 때 고려해야 할 몇 가지 모범 사례가 있습니다. CSS 에서 : 호버 의사 클래스가 사용되는 경우 A : 포커스 상태가 제공되는지 확인하십시오. 또한 앵커 요소의 개요를 제거해서는 안됩니다. 즉 {개요 : 0}. (조심하십시오 : 대부분의 CSS
리셋 스타일 시트 앵커 윤곽선을 제거하십시오 - 나중에 자신의 CSS 에 다시 추가하십시오!). 절대적으로 필요한 경우 어떤 종류의 시각적 효과가 대체되어야합니다. JavaScript에서는 키보드 가이 동작을 실행할 수 없으므로 Double Click Handler (OndblClick)를 사용하지 마십시오. OnMouseOver 및 OnMouseOut JavaScript 핸들러를 사용하는 경우 키보드 액세스를 위해 OnFocus 및 OnBlur 이벤트도 구현해야합니다.
이미지에 대한 대체 텍스트 누락 이미지가 관련 컨텐츠를 제공하는 경우 대체 텍스트와 함께해야합니다. 맹인 사용자, 저 대역 사용자 및 깨진 이미지 링크의 경우와 같이 이미지를 볼 수없는 경우 이미지의 "내용"에 여전히 액세스해야합니다. 위 의이 문제는 원칙 1 및 2와 관련이 있습니다. 대체 텍스트를 제공하는 가장 인기있는 방법은 이미지 요소의 Alt 속성에 텍스트를 입력하는 것입니다. 웹의 그래픽 차트, 만화 및 인포 그래픽과 같은 많은 이미지는 Alt 텍스트에서 "긴 설명"을 제공하지 않으므로 많은 컨텐츠의 사용자를 차단합니다. Web Ax 블로그는 시리즈 "Fixing Alt"에서 이것의 몇 가지 예를 수정합니다. 긴 설명에 대한 자세한 내용은 두 부분으로 구성된 기사 Longdesc 및 기타 긴 이미지 설명 솔루션을 확인하십시오.
대체 텍스트에 대한 몇 가지 지침은 다음과 같습니다.
텍스트가 이미지에 포함되면 Alt 속성에 추가하십시오. 이미지가 장식적인 경우 빈 alt 속성이 포함되어야합니다. (예 : ) 차트 및 아트 워크와 같은 일부 이미지의 경우 더 긴 설명이 필요합니다. 링크가있는 이미지에 내용이 포함 된 경우 대체 텍스트는 이미지 자체가 아닌 링크의 기능을 설명해야합니다.
• 테이크 아웃 7 가지 범용 설계 원칙은 웹 사이트와 다른 제품을 설계 할 때 훌륭한 리소스입니다. 사람들은 컴퓨터를 다르게 사용하고 웹에 다르게 액세스합니다. 이 마음을 유지함으로써 웹 디자이너는 매력적이고 사용자 친화적이며 모든 사람이 액세스 할 수있는 웹 사이트를 만드는 데 더 성공할 것입니다.
추가 읽기
• Wendy Chisholm, Matt May. 보편적 유용성, Sarah Horton의 온라인 책 워싱턴 대학교 DO-IT 프로그램의 보편적 인 교육 설계 노스 캐롤라이나 주립 대학교 디자인 대학의 유니버설 디자인 원칙. The Universal Design 파일 : Molly Story, James Mueller, Ron Mace의 모든 연령과 능력의 사람들을위한 설계.
Universal Web Design에서 자주 묻는 질문
• Universal Web Design이란 무엇이며 왜 중요한가? UWD (Universal Web Design)는 능력이나 사용하는 장치에 관계없이 가능한 많은 사람들이 액세스하고 사용할 수있는 웹 사이트 및 웹 컨텐츠를 만드는 것을 목표로하는 디자인 접근법입니다. 장애인을 포함한 모든 사람이 웹 컨텐츠에 효과적으로 액세스하고 사용할 수 있도록하는 것이 중요합니다. 또한 전체 사용자 경험을 향상시켜 웹 사이트를보다 사용자 친화적이고 탐색하기 쉽게 만듭니다.
범용 웹 디자인은 기존 웹 디자인과 어떻게 다른가요?
전통적인 웹 디자인은 종종 일반 청중의 미학 및 기능에 중점을 둡니다. 반면, Universal Web Design은 장애인을 포함한 모든 사용자의 다양한 요구를 고려합니다. 그것은 접근성, 유용성 및 포괄 성을 강조하여, 그들의 능력이나 그들이 사용하는 장치에 관계없이 모든 사람이 웹 컨텐츠에 액세스 할 수 있고 사용할 수 있도록 보장합니다.
Universal Web Design에서 일반적인 실수는 무엇입니까?
universal 웹 디자인의 일반적인 실수는 모든 사용자의 요구를 고려하지 않고, 웹 사이트를 사용하지 않는 것이 아니라, 웹 사이트를 테스트하고, 테스트하는 것이 아니라, 웹 사이트를 사용하지 않는 것이 포함됩니다. 웹 접근성 가이드 라인 및 표준에 따라. 이러한 실수는 사용자 경험이 좋지 않고 웹 사이트의 접근성과 유용성을 제한 할 수 있습니다. 내 웹 사이트를보다 액세스 할 수 있고 사용자 친화적으로 만드는 방법은 무엇입니까?
웹 사이트에보다 액세스 할 수 있고 사용자 친화적으로 만드는 방법에는 여러 가지가 있습니다. 여기에는 명확하고 간단한 언어 사용, 이미지에 대한 대체 텍스트 제공, 키보드로 웹 사이트를 탐색하고 논리적이고 일관된 레이아웃을 사용하고 비디오 용 캡션을 제공하는 것이 포함됩니다. 또한 모든 사용자에게 잘 작동하는지 확인하기 위해 다양한 장치 및 브라우저에서 웹 사이트를 테스트하는 것이 중요합니다.

웹 브라우저는 무엇이며 Universal Web Design에 어떤 영향을 미치는가?

웹 브라우저는 사람들이 인터넷에 액세스하고 웹 페이지를 볼 때 사용하는 소프트웨어 응용 프로그램입니다. 다른 브라우저가 웹 컨텐츠를 다르게 해석하고 표시 할 수 있으므로 범용 웹 디자인에 영향을 미칩니다. 따라서 다른 브라우저에서 웹 사이트를 테스트하여 모든 브라우저에서 잘 작동하고 모두가 잘 보이도록하는 것이 중요합니다.

범용 웹 디자인의 일부 예는 무엇입니까?

범용 웹 디자인의 예에는 키보드 및 간단한 언어를 사용하는 웹 사이트, 이미지에 대체 텍스트를 제공하는 웹 사이트 및 웹 사이트를 제공하는 웹 사이트 및 비디오를위한 웹 사이트를 탐색 할 수있는 웹 사이트가 포함되어 있습니다. 이러한 기능은 장애인을 포함한 모든 사용자가 웹 사이트에보다 액세스 할 수 있고 사용할 수있게 해줍니다.

Universal Web Design은 사용자 경험을 향상시키고 고객 만족도를 높이며 잠재 고객 기반을 확대함으로써 비즈니스에 어떤 혜택을 주는가? 웹 사이트에보다 액세스 가능하고 사용자 친화적으로 만들어서 비즈니스는 장애인을 포함하여 더 많은 청중에게 다가 갈 수 있습니다. 이로 인해 트래픽이 증가하고 전환율이 높아지고 고객 충성도 향상이 발생할 수 있습니다.

Universal Web Design에 대해 더 많이 배우기위한 리소스는 무엇입니까?

Universal Web Design에 대해 더 많이 배울 수있는 많은 리소스가 있습니다. 여기에는 온라인 자습서, 웹 세미나, 서적 및 코스가 포함됩니다. Universal Web Design에 대한 리소스를 제공하는 일부 평판이 좋은 조직에는 월드 와이드 웹 컨소시엄 (W3C), WAI (Web Accessibility Initiative) 및 NCDAE (National Center on Education on Education) (NCDAE)가 포함됩니다.

기존 웹 사이트에서 유니버설 웹 디자인을 구현할 수 있습니까? 여기에는 이미지에 대한 대체 텍스트 추가, 키보드로 웹 사이트를 탐색 할 수 있고 논리적이고 일관된 레이아웃을 사용하고 비디오 용 캡션을 제공하는 것이 포함될 수 있습니다. 또한 다른 장치와 브라우저에서 웹 사이트를 테스트하여 변경 사항이 사용자 경험을 향상 시켰는지 확인하는 것도 중요합니다.

Universal Web Design의 미래는 무엇입니까?
Universal Web Design의 미래는 더 많은 비즈니스가 모든 사용자가 웹 사이트에 액세스 할 수 있도록하는 것의 중요성을 인식함에 따라 접근성과 포괄성에 더 강조 할 가능성이 높습니다. 인공 지능 및 기계 학습과 같은 기술의 발전은 웹 사이트에보다 액세스 가능하고 사용자 친화적 인 웹 사이트를 만드는 데 중요한 역할을 할 수 있습니다. 또한 모든 사람이 웹 사이트에 액세스 할 수 있고 사용할 수 있도록 더 많은 규정과 표준이있을 수 있습니다.

위 내용은 유니버설 웹 디자인에서 인기있는 실수의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!