이미지 교체 기술에 대해 정직해야 할 때입니다

키 테이크 아웃

접근성을 유지하면서 예술적 형태로 텍스트 콘텐츠를 전달하는 데 인기있는 이미지 교체 기술은 이제 사용자 정의 글꼴 및 강력한 CSS 도구와 같은 최신 도구의 가용성으로 인해 종종 비판을받습니다. 텍스트 이미지 대신 텍스트를 사용하면 몇 가지 이점이 있습니다. 사용자는 텍스트를 쉽게 조정하고 색상을 변경할 수 있으며 스크린 리더 및 검색 엔진 봇이 액세스 할 수 있으며 우려 사항의 분리를 존중합니다.

. 웹에서 로고 서체를 사용할 수 없거나 CSS로 그래픽 아트 워크를 다시 만들 수없는 경우와 같이 웹 글꼴과 CSS가 원하는 결과를 얻기에 충분하지 않은 경우가 있습니다. 이 경우 그래픽 요소를 사용하는 것이 필요할 수 있습니다.

인라인 SVG는 웹 글꼴과 CSS를 활용할 수 없을 때 웹 페이지에 로고를 포함시키는 좋은 방법입니다. 검색 엔진과 보조 기술, 확장 가능 및 해상도 독립적 인 보조 기술에 액세스 할 수 있으며 추가 HTTP 요청을 표시 할 필요가 없습니다. > 이미지 교체는 최신 CSS, 웹 글꼴 및 벡터 그래픽의 기능으로 인해 더 이상 사용되지 않습니다. 그러나 이미지 교체 기술이 여전히 제한된 응용 프로그램을 찾을 수있는 접근성 고려 사항과 관련된 에지 사례가 여전히 있습니다.

• CSS 이미지 교체의 역사에 대한 Sitepoint에서 이전 작품에서 Baljeet Rathi는 여러 이미지 교체 기술을 다루며, 각각은 다음보다 독창적입니다. 이러한 기술은 모두 웹에서 아름답게 예술적인 형태로 텍스트 콘텐츠를 전달하는 동시에 사람과 검색 엔진 모두에 액세스 할 수 있도록하는 방법을 해결하는 데 중점을 두었습니다. 쉽게 구할 수있는 커스텀 글꼴과 강력한 CSS 도구없이 웹 디자인의 세계에서 이러한 목표를 달성하는 것은 꽤 위업이었습니다.
> Rathi의 기사에서 큐를 가져 가면서 다음 질문을 해결하기 시작했습니다.
• 이미지 교체 기술은 매우 인기가있었습니다. 오늘날, 텍스트를 배경 이미지로 바꾸는 이러한 방법은 종종 웹 개발자들 사이에서 나쁜 랩을 얻습니다. 이 기사의 뒷부분의 이유 중 일부를 살펴볼 것입니다. 그러나 이것이 사실이므로 대신 어떤 도구와 모범 사례를 사용할 수 있습니까?
이미지 교체 기술은 과거의 웹 디자인의 유령이거나 이미지 대체 기술이 웹을 추악하게 만드는 것에 대한 두려움없이 오늘날에도 여전히 의미있게 사용될 수 있습니까? 작업에 가장 적합한 도구를 살펴 보는 것으로 시작하겠습니다.
• 작업에 가장 적합한 도구 : 웹 글꼴 및 CSS
콘텐츠가 텍스트 인 경우 텍스트를 사용하고 텍스트 이미지를 사용하지 마십시오.
• 오늘날 도구를 사용하면 아름다운 형태로 텍스트 컨텐츠를 전달하기 위해서는 이미지가 거의 필요하지 않습니다. 엄청난 커스텀 웹 글꼴, CSS @font-face 속성에 대한 훌륭한 브라우저 지원 및 Typekit 및 Google 글꼴과 같은 글꼴 스트리밍 서비스에 대한 훌륭한 브라우저 지원에 쉽게 액세스 할 수 있습니다. 모두 브랜드를 전달하고 감정을 전달하며 웹에서 멋진 타이포그래피에 영향을 미칩니다 최신 CSS의 기능은 투명도 수준을 제어하고, 텍스트 그림자, 블렌드 모드 및 텍스트에 애니메이션을 추가하는 것을 산들 바람으로 만듭니다. 아래는 웹 글꼴 및 CSS로 할 수있는 일의 예일뿐입니다. Smart Designs 웹 사이트는 이미지없이 훌륭한 타이포그래피를 표시하고 웹 글꼴 및 CSS 만 표시합니다. 텍스트 이미지 대신 텍스트를 사용하는 주요 이점은 다음과 같습니다.
  사용자는 텍스트를 쉽게 조정하고 색상을 변경하여 요구 사항을 충족시킬 수 있습니다.

  스크린 리더는 텍스트에 액세스 할 수 있으며 검색 엔진 봇은 크롤링하고 색인 할 수 있습니다. 그것은 의미 적으로 올바른 접근 방식이며 우려의 분리를 존중하며, 관련성은 웹 컨텐츠 접근성 가이드 라인 (WCAG) 성공 기준을 충족하기위한 W3C 권장 사항에 의해 옹호됩니다.

  . 사용자 정의 글꼴을 사용하는 경우 CSS 글꼴 스택에서 웹 안전 글꼴을 쉽게 제공 할 수 있습니다.

  그러나 많은 사람들이 알고 있듯이이 접근법은 모든 상황에서 효과가 없습니다. 그래서… <.> 웹 글꼴과 CSS가 항상 작업에 달려 있지 않으면 어떻게됩니까? 웹 글꼴과 CSS가 결과를 달성하기에 충분하지 않은 상황이 있습니다. 웹 사이트의 로고가 요점에 있습니다.

  로고는 브랜드에 필수적이므로 브랜드 아이덴티티를 타협하지 않고 로고를 약간 수정할 수 없음을 의미합니다. 웹 글꼴과 CSS를 사용하여 로고를 정확하게 재현 할 수없는 경우가있을 수 있습니다. 아마도 로고의 서체는 웹에서 쉽게 사용할 수 없거나 그래픽 아트 워크를 CSS로 충실하게 재현 할 수 없습니다. 그래픽 요소를 사용하는 것은 갈 수있는 것 같습니다. 그러나 사용자가 웹 사이트에 그래픽 요소가 표시되기를 원하지만 화면 리더와 봇도 로고가 나타내는 브랜드 이름에 액세스 할 수 있기를 원합니다.

  . 또한 텍스트를 지원하지 않고 아이콘을 사용하는 것을 고려하십시오. 여기서 실제 문제는 스크린 리더와 검색 엔진 크롤러가 아이콘의 의미를 이해하는 데 어려움을 겪고 있다는 것입니다. 아이콘은 텍스트가 아니라 텍스트를 나타냅니다. 예를 들어, 지금 친숙한 햄버거 아이콘은“메뉴”라는 단어를 나타내지 만 그 자체가“메뉴”라는 단어는 아닙니다. 따라서 웹에서 텍스트를 지원하지 않고 아이콘 만 표시하면 심각한 접근성 문제가 발생할 수 있습니다. 위의 두 경우 모두, 목표는 스크린 리더와 검색 엔진 크롤러의 액세스를 텍스트 콘텐츠로 손상시키지 않고 이미지를 통해 일부 정보를 전달하는 것입니다. 이미지 교체 기술은 과거에 이것을 다소 가능하게 만들었으므로 오늘날에 더 나은 일이 그 일을하기 위해 더 나은 일이 있는지 여부를 조사 할 가치가 있습니다. 여기 몇 가지 옵션이 있습니다. 인라인 svg 오늘, 웹 페이지에 웹 페이지에 로고를 포함시키는 좋은 방법은 웹 글꼴의 힘을 활용할 수 없으며 CSS는 인라인 SVG입니다. SVG는 XML 기반 그래픽 형식 인 확장 가능한 벡터 그래픽을 나타냅니다. 내가 관심있는 기술은 로고의 SVG 그래픽을 작성하고 코드를 HTML 문서에 바로 덤프하는 것입니다. Illustrator 또는 Inkscape와 같은 편집기에서 SVG를 내보내면 중복 마크 업을 제거하여 한 걸음 더 나아가 출력을 최적화 할 수 있습니다. itepoint 웹 사이트 로고를 검사하면이 기술의 예를 보게 될 것입니다.

  itepoint 웹 사이트에서 로고를 만드는 데 사용되는 인라인 svg. 그게 전부는 아닙니다. 인라인 SVG는 또한 웹 페이지에 선명한 아이콘을 추가하는 방법으로 사용될 때 놀라운 일을합니다. 자세한 내용을 간절히 원한다면 CSS- 트릭에서 Chris Coyer의 SVG 코스를 확인하십시오. 인라인 SVG 아이콘에 대한 몇 가지 비디오 자습서가 포함되어 있습니다. 인라인 svg를 사용하는 이유는 다음과 같습니다.

  SVG 코드는 단지 마크 업이며, 의미있는 컨텍스트를 추가 할 수있는 제목과 DESC 요소를 사용하면 검색 엔진과 보조 기술 모두에 액세스 할 수 있습니다. Sitepoint에서 Léonie Watson의 다음 팁을 따르고 CSS- 트릭의 Heather Migliorisi를 통해 인라인 SVG 그래픽의 접근성을 강화할 수 있습니다. SVG 그래픽은 정의와 해상도 독립적으로 확장 가능합니다. 즉, 사용자가 얼마나 많은 사용자를 확대하는지 상관없이 멋지게 보입니다. 인라인 SVG 그래픽은 추가 HTTP 요청을 표시 할 필요가 없으므로 웹 사이트 성능에 적합합니다. 당신은 아트 워크의 단일 부분을 애니메이션하고도 모양을 동적으로 변형시키는 것을 포함하여 CSS 및 JavaScript를 사용하여 인라인 SVG 그래픽의 외관과 동작을 미세 조정할 수 있습니다. SVG 애니메이션 기술에 대한 자세한 내용은 Jordan Wade의 Inline SVG로 애니메이션을 읽으십시오. 아이콘 글꼴과 달리, SVG 코드가 이미 HTML 문서에 있기 때문에 웹 사이트를 인라인 SVG 아이콘로드하지 않을 것입니다.

  좋은 소식 중 하나 더 좋은 소식은 인라인 SVG가 훌륭한 브라우저 지원을 가지고 있다는 것입니다. IE8만이 인라인 SVG에 대한 지원이 부족합니다 아이콘 글꼴 로고를 표시하는 데 적합하지는 않지만 아이콘 글꼴은 웹 사이트에 아이콘을 표시하는 좋은 방법으로 인기를 누 렸습니다. Glyphicons 및 Font Awesome과 같은 온라인 아이콘 라이브러리에서 사용할 수있는 용이성은 웹에서 아이콘 글꼴의 대규모 존재에 크게 기여했습니다. 아이콘 글꼴은 단지 텍스트이므로 CSS와 함께 모양을 제어 할 수 있으며 사용자는 원하는대로 크기를 조정할 수 있습니다.

  텍스트가 동반되지 않은 의미있는 아이콘의 경우 와이어 아리아 기술을 사용하여 액세스 가능한 정보를 추가 할 수 있습니다. 예를 들어 의 경우, Font Awesome을 사용하여 링크 된 햄버거 아이콘을 표시하여 숨겨진 메뉴를 표시한다고 가정 해 봅시다. 아이콘의 마크 업 만 추가하면 스크린 리더에게는 완전히 보이지 않거나 의미가 없습니다.

위 내용은 이미지 교체 기술에 대해 정직해야 할 때입니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!