그 당시 나는 CSS없이 웹을 탐색하려고 시도했다

CSS는 모든 웹 사이트에 디자인을 제공하는 것입니다. 웹 사이트는 확실히 재미 있고 친절하지 않습니다! 나는 JavaScript없이 일주일을 보내는 누군가와 경험이 어떻게 더 빠른 웹 사이트를 초래했는지에 대해 읽었지만, 특정 측면은 예상대로 작동하지 않을 것입니다.

그러나 CSS. 웹을 탐색하는 동안 CSS를 끄면 웹을 정확하게 덜 사용할 수 없게 만들지는 않습니다. 아니면 JavaScript와 마찬가지로 일부 기능이 예상대로 작동하지 않습니까? 호기심으로, 나는 소용돌이를주고 CSS 살을 HTML 골격에서 찢어 몇 개 사이트를 탐색하기로 결정했습니다.

왜, 당신은 물어볼 수 있습니까? CSS를 끄는 비 마조 학적 이유가 있습니까? Heydon Pickering은 CSS를 비활성화하는 것이 일부 접근성 표준을 확인하는 좋은 방법이라고 트윗했습니다.

1. 제목, 목록 및 양식 컨트롤과 같은 일반적인 요소는 의미 론적이며 여전히 좋아 보입니다.
2. 시각적 계층 구조는 여전히 기본 스타일로 설정되어 있습니다.
3. 내용은 여전히 ​​논리적 순서로 읽을 수 있습니다.
4. 이미지는 여전히 CSS 배경으로 손실되지 않고 태그로 존재합니다.

2018 년의 WebAim 조사에 따르면 모든 종류의 지원 기술에 의존하는 사용자의 12.5%가 사이트 전체의 모든 CSS 선언을 수행하는 것을 포함하여 사용자 지정 스타일 시트로 웹을 탐색합니다. 그리고 우리가 느린 인터넷 연결에 대해 이야기하고 있다면, CS를 버리는 것은 콘텐츠를 더 빨리 소비하는 한 가지 방법 일 수 있습니다. 서버에 자산을로드하지 않는 경우와 같이 즉각적인 제어를 벗어난 이유로 CSS가 비활성화 될 가능성도 있습니다.

실험으로 CSS없이 5 개의 웹 사이트와 웹 앱을 사용 했으며이 게시물은 내 경험을 다룰 것입니다. 그것은 개인적으로 나에게 다소 눈을 뜨는 모험이되었지만, 또한 당신이 볼 수 있기를 바랍니다.

그러나 먼저 CSS를 비활성화하는 방법은 다음과 같습니다

이 게시물의 형태로 저를 통해 대리 생활을 할 수 있습니다. 그러나 작업에 부응하고 스타일이없는 웹을 경험하고자하는 분들을 위해 다양한 브라우저에서 CSS를 비활성화하는 방법은 다음과 같습니다.

• Chrome : Chrome에는 CSS를 비활성화하기 위해 실제로 설정이 없으므로 Disable-HTML과 같은 확장에 의지해야합니다.
• Firefox : 보기 > 페이지 스타일 > 스타일 없음
• Safari : Safari > 선호도 ... > 메뉴 바에서 메뉴 개발 그런 다음 드롭 다운 개발 로 이동하여 "스타일 비활성화"옵션을 선택하십시오.
• 오페라 : Chrome과 마찬가지로 확장이 필요하며 웹 개발자는 청구서에 적합합니다.
• 인터넷 익스플로러 11 : 보기 > 스타일 > 스타일 없음

Edge에서 CSS를 비활성화하는 문서화 된 방법을 찾을 수는 없지만 DevTools 콘솔의 CSS 객체 모델 API를 통해 CSS 및 다른 브라우저에서 프로그래밍 방식으로 CSS를 제거 할 수 있습니다.

 var d = 문서;

for (s = d.stylesheets의 var s)
    s [s] .disabled = true;

for (i = d.QuerySelectorall ( "[스타일]"))
    i [i] .style = "";

첫 번째 루프는 모든 외부 및 내부 스타일 ( 및 )을 비활성화하고 두 번째는 인라인 스타일을 제거합니다. 그러나 여기서주의 사항은 요소에 여전히 새로운 인라인 스타일이 동적으로 제공 될 수 있다는 것입니다. 그들을 즉시 지우려면 최고의 해결 방법은 타이머를 추가하는 것입니다. 이와 같은 것 :

 (f = function () {
    // CSS를 제거합니다
    ...

    settimeout (f, 20);
}) ();

또는 고대 Lynx와 같은 텍스트 전용 브라우저가 있지만 비디오, 이미지 (SVG 포함) 및 JavaScript 없이는 살기를 기대합니다.

스타일이없는 유리를 통해…

Amazon, Duckduckgo, Github, Stack Overflow, Wikipedia 및 Hex Naw라는 CSS없이 서핑 한 각 사이트에 대해 첫인상을 공유하고 경험에 도움이 될 수있는 몇 가지 제안을 할 것입니다.

상황이 조금 나올 수 있기 때문에 준비하십시오… ?

웹 사이트 1 : Amazon.com

여기에는 소개가 필요하지 않습니다. 아마존은 우리 중 많은 사람들을위한 가정의 필수품 일뿐 만 아니라 유비쿼터스 Amazon Web Services 플랫폼 덕분에 웹의 엄청난 덩어리를 제공합니다.

여기에는 많은 일이 일어나고 있기 때문에 제품을 찾고 구매하는 척하면서 내 길에 들어가는 스타일이없는 것들을 탐색 할 것입니다.

홈페이지에서 나는 즉시 사이트에서 사용하는 스프라이트 시트가 보입니다. 그것은 로고가 어디에 있을지 대신하기 때문에 해당 이미지가 있는지 여부를 알기가 어렵습니다. 각 스프라이트에는 여러 버전의 로고가 포함되어 있으며, "Amazon"단어 표시를 볼 수 있더라도 놀랍게도 글로벌 홈 링크가 아닙니다. 홈 링크가 실제로 어디에 있는지 궁금하다면, 그것은 로고가 배경 이미지로 제공되는이 범위의 구조입니다… CSS :

 <a href="/ref%20=%20nav_logo" aria-label="Amazon" tabindex="6">
  <span> </span>
  <span> </span>
  <span> </span>
</a>

다음 문제는 "기본 콘텐츠로 건너 뛰기"링크가 일반적인 건너 뛰기 링크처럼 보이지는 않지만 하나처럼 작동한다는 것입니다. HREF가없는 요소로 밝혀졌으며 JavaScript (예, 활성화 된 상태로 남겨 두었습니다)는 앵커 기능을 모방하는 데 사용됩니다.

검색을 시작하면 제안을보기 위해 "시작"링크 아래를 더 살펴 봐야합니다. "귀하의 목록"및 "귀하의 계정"항목에서 링크를 구별하기가 어려워집니다. 그들은 마치 하나의 슈퍼 긴 메가 링크 인 것처럼 모두 함께 묶인 것처럼 보입니다. 이 시나리오에서 의미 론적이지 않은 목록을 사용하여 계층 구조를 유지하는 것이 더 효과적 일 것이라고 생각합니다.

그러나 이러한 모든 검색 제안에서 계정 및 내비게이션 링크는 일부 공간으로 분리되어있어 쉽게 읽을 수 있습니다.

흥미롭게도, 캐 러셀이 페이지 아래로 낮추는 것은 여전히 ​​다소 기능적입니다. "이전 페이지"또는 "다음 페이지"옵션을 클릭하면 이미지 순서가 변경됩니다. 그러나 그 옵션들 사이에서 호핑하려면 스크롤해야했습니다.

조금 더 건너 뛰면 광고 요소가 있습니다. 여기에는 "메인 컨텐츠로의 건너 뛰기"링크에서 본 것과 같이 정적으로 보이는 "광고 피드백"문자열이 포함되어 있습니다. 어쨌든 나는 그것을 클릭했고 광고 관련성에 대한 피드백을 공유하기위한 양식을 공개했습니다.

놓쳤을 수도 있지만 두 그룹의 형태 레이블 그룹 위에 빈 버튼이 있으며 라디오 버튼이 제자리에 없습니다. 어떤 라벨이 어떤 라디오 버튼에 속한 지 모르기 때문에 구조가 혼란 스럽습니다. 내 말은, 첫 번째 레이블이 첫 번째 라디오 입력과 함께한다고 가정 할 수 있다고 생각합니다. 그러나 그것이 바로 그것이 바로 다음과 같습니다.

혼란스러운 것은 양식 하단에 "닫기 창", "취소"및 "피드백 보내기"옵션 사이에 제출 버튼이 있다는 것입니다. 이 중 하나를 누르면 광고로 돌아 왔습니다. 이제 CSS의 존재에도 불구하고 눈이 멀고 스크린 리더를 사용하여 같은 부분을 탐색한다고 가정 해 봅시다. 나는 두 개의 버튼에 대해“제출, 버튼”을 들었으므로 추측하지 않고 어떻게 해야하는지 전혀 알 수 있습니다. 마크 업 (이 경우 버튼 레이블)을 처리 할 때 의미론의 중요성에 대한 또 다른 좋은 알림과 웹 기본값을 무시하기 위해 JavaScript에 얼마나 많은 의존이 배치되는지를 염두에두고 있습니다.

"Mac Minis"에 대해 검색을 수행합니다. 제품 등급은 별 (다른 툴팁 대신)으로 표시되기 때문에 제품 등급에 액세스하고 이해할 수 있습니다. 이것은 이미지가 시각적 컨텐츠로 사용될 때 견고한 텍스트 폴백을 사용하는 좋은 예이지만 CSS의 배경 이미지로 사용됩니다.

Intel Core i3을 사용하여 Mac Mini를 선택한 후, 나는 내가 선택한 제품의 다른 Mac 제품으로 인사하고 구매하려는 수량을 선택하려면 그 이상으로 탐색해야합니다.

아래로 스크롤하면 동일한 콘텐츠가있는 레이블 옆에 "카트에 추가"버튼이 표시됩니다. 요소가 자체 레이블을 담을 수 있기 때문에 중복되고 불필요합니다.

  카트에 추가 

다음으로 Amazon Prime 멤버십에 대한 제안이 있습니다. 그것은 모두 훌륭하고 멍청하지만 구매중인 제품과 "지금 구매"버튼 사이에 삽입됩니다. "지금 구매"를 클릭하는 것이 결제에 Mac Mini를 추가 할 것인지 또는 대신 Amazon Prime을 구매하는지 여부를 알기가 어려워요.

나는 또한 약간의 놀이를하고 싶었 기 때문에 그것을 추가하는 방법을 알아 내면 장바구니에서 Mac Mini를 제거하려고 시도했습니다. 카트를 찾는 데 10 초가 걸렸으므로 편집 할 수있었습니다. "체크 아웃 (1 항목)"링크 바로 옆에있는 것으로 밝혀졌지만 그 옆에 램을 따라 단일 링크처럼 보입니다.

전반적으로 제품을 찾는 것은 어렵지 않았습니다. 반면에, 체크 아웃의 길은 내가 진행하면서 두통이되었습니다. 혼란을 일으킨 시맨틱 및 접근성 관련 관행이 열악했으며 중요한 버튼과 링크를 찾기가 더 어려워졌습니다.

? 사이트가 잘하는 일	? 사이트가 개선 할 수있는 것
회전 목마는 스타일이 없어도 기능적입니다.	로고는 배경 이미지에 의존하여 집으로 돌아가는 길을 가려줍니다.
콘텐츠 계층 구조는 일반적으로 페이지의 위치를 ​​아는 데 여전히 도움이됩니다.	많은 링크와 앵커는 JavaScript에 의존하며 대화식으로 보이지 않습니다.
요소의 순서는 대략적으로 전술에 남아 있습니다.	링크는 종종 서로 부딪 치거나 관련이있는 곳에 배치됩니다.
배경 이미지에 의존하는 제품 등급에 대한 폴백을 잘 사용합니다.	버튼 레이블은 오도하거나 반복적입니다.
	양식 요소는 제대로 정렬되지 않습니다.
	체크 아웃하기위한 거친 여행이 있습니다.

웹 사이트 2 : Duckduckgo

전에 Duckduckgo를 사용해 보셨습니까? CSS- 트릭을 읽는 많은 사람들이 처음으로 듣는 사람들에게는 사용자 개인 정보 보호에 중점을 둔 Google 검색의 대안입니다.

따라서 Duckduckgo 홈페이지가 매우 간단하기 때문에 이것으로 시작하는 것은 약간 오해의 소지가 있습니다. 그곳에는별로 잘못 될 수 없습니다. 검색 쿼리를 시작하면 검색 결과, 컨텐츠 계층 및 관련성을 다루고 있기 때문에 그보다 조금 더 관여합니다.

박쥐에서 바로 인사하는 것은 간단한 착륙선에 대해 기대했던 것보다 훨씬 더 많은 내용입니다. 그것은 웹 사이트를 스캔하여 어떤 웹 사이트인지 완전히 명확하지 않습니다. 제품 이름에 대한 첫 번째 언급은 첫 번째 변호사 목록의 네 번째 항목이며 "Duckduckgo를 확산시키기위한 행동 유도"입니다. 로고는 완전히 누락되어 CSS에서 배경으로 사용된다는 것을 의미합니다.

그 목록이없는 목록에 대해 말하면, 내가보고있는 것이 헤더에 속한다고 가정하고 스킵 탐색이 없습니다. 트리플 화살표 아이콘 (가장 중요한 항목을 숨기는 모바일 메뉴 또는 다른 것을 숨기는 메뉴입니까?)과 개인 정보 관련 컨텐츠, 소셜 미디어 링크 등 하나 링크처럼 보이지만 실제로 "Duckduckgo 정보"와 "자세한 내용"에 대한 두 개의 링크입니다.

마지막으로, 바닥을 향해 사이트의 기본 사용 사례가 실제로 나타나는 곳입니다 : 검색 바가 있습니다. "S"레이블은 "검색"을 의미하고 "X"레이블은 검색 필드를 지우는 속기라고 가정합니다.

좋아, 검색을 수행하기 위해. 여전히 자동 검사를 볼 수 있고 상 및 아래쪽 화살표 키를 사용하여 각각을 강조 표시 할 수 있다는 것은 매우 멋지다. 그래도 필드를 지우면 페이지를 새로 고침 한 후에는 제안이 사라지지 않습니다.

설정 메뉴의 모든 것은 제목, "설정", "개인 정보 보호 필수품", "개인 정보 보호", "우리가 누구인지"및 "연락을 유지"하는 등 목록의 항목입니다. CSS가 활성화 된 경우 이들은 모바일 남성의 일부일 가능성이 높습니다. 그 메뉴에서는“설정”과“더 많은 테마”사이에 4 개의 빈 총알이 있습니다.

새로운 사용자로 여기에 오면, 나는 빈 목록 항목이 무엇인지 전혀 모르지만 위의 스크린 샷에서 강조한 총알은 실제로 테마 버튼입니다. 의도를 명확히하기 위해 일부 폴백 텍스트가 도움이 될 것이며, 이는 목록 항목 대신 라디오 또는 일반 버튼이어야합니다 (기능을 고려).

"설정"을 포함하여 "X"가있는 모든 내용 블록은 해산 될 수 없습니다. 그러나 등산객 이미지의 이미지 위의 "x"를 클릭하면 javaScript가 여전히 활성화 된 덕분에 많은 컨텐츠가 화면을 지울 수 있습니다. 내가 정말 어색한 것은“Duckduckgo로 전환…

 1. 1 우리는 귀하의 개인 정보를 저장하지 않습니다
2. 2 우리는 광고로 당신을 따르지 않습니다
3. 3 우리는 당신을 추적하지 않습니다. 항상.

목록 항목 번호를 표시하는 다른 방법으로 시맨틱 마크 업의 혼합 사용 사례처럼 보입니다.

첫 번째

요소까지 등산객 이미지 아래에 거대한 양의 공백이 있습니다. 링크 나 버튼이 있다고 가정하면 "[브라우저]에 Duckduckgo 추가"의 모든 인스턴스를 클릭하면 아무것도 수행하지 않습니다. 각 섹션의 그림은 불필요한 수평 스크롤을 유발합니다. 이는 우리가 보는 다른 사이트에서 볼 수있는 일반적인 문제입니다.

그 섹션 후에는 빈 상자가 있고 그것이 무엇인지 전혀 모릅니다.

나는 열린 DevTools를 깨뜨렸고

그 후,“기본 검색 엔진으로 세트”의 두 개의 반복 된 인스턴스가“홈페이지로 세트”섹션을 감싸는 것을 볼 수 있습니다.

이것들은 "Duckduckgo add… add add add duckduckgo… 콘텐츠를 반복하는 대신 해당 링크 또는 버튼이 하나의 인스턴스를 가리켜야합니다. 여기서 중복성이 줄어 듭니다.

좋아, 마침내 검색 할 시간입니다. 검색 결과에서 가장 먼저 보는 것은 상자를 무시하는 지침이있는 빈 상자입니다. 그때 오키-도키.

계속해서 Duckduckgo 링크를 보셨습니까? 그것은 로고 여야합니다. 왜 이것이 왜 홈페이지에 있지 않은지 궁금합니다. 개선을위한 과일처럼 보입니다.

검색 창은 여전히 ​​홈페이지의 위치에서 장소를 교환 한 "S"및 "X"버튼을 제외하고 일반적으로 기능합니다.

검색 결과에. 나는 하나의 결과를 다른 결과와 쉽게 구별 할 수있었습니다. 내가 불필요하면서도 재미있는 것은 각 페이지 제목의 끝에있는“브라우저 가이 링크를 방문했는지 여부를 나타냅니다”라는 것입니다. 그것은 화면 읽기 관점에서 매우 성가 시게 될 것입니다. 모든 페이지 제목의 끝에서 반복 된 소식을 상상해보십시오. 그 메시징은 해당 메시징을 보유하는 툴팁이 포함 된 체크 마크와 함께 표시됩니다. 그러나 CSS가 비활성화되면 체크 마크와 툴팁이 없습니다. 결과적으로, 내가 얻는 것은 긴 제목입니다.

일반적으로 다른 유형의 결과 (예 : 이미지)에 의해 필터로 필터링하기위한 탭으로 표시되는 탐색 표시 줄은 스타일이없는 필터라고 말하기 어렵 기 때문에 아무것도하지 않는 것 같습니다. 그러나 이미지 필터를 클릭하면 이미지 결과가 실제로 페이지에 아래로로드되고 웹 결과 위에 쌓여 있으며 결과적으로 페이지가 길어집니다. 아, 그리고 당신은 다시 스크롤하는 것을 다시 스크롤하면 (그리고 그것은 먼 길입니다) 다른 필터를 클릭하고, 비디오를 말하고, 이미지를 대체 할 것이지만, 이미지 아래에 비디오 썸네일 이미지를 삽입하면 이미 메가 긴 페이지를 슈퍼 메가 긴 페이지로 만듭니다. 모든 자산의 페이지 가중치를 상상해보십시오!

글쎄, 당신은 필요하지 않습니다. DevTools에 따르면 이미지만으로는 831 개의 요청과 총 중량이 23.7MB입니다. 무거운!

마지막 몇 가지 항목은 주목할 가치가 있습니다. "피드백 보내기"링크를 클릭하면 아무것도하지 않습니다. 어쩌면 그것은 CSS와의 모달을 유발했을까요? 그리고“모든 지역”링크가 링크와 비슷하지 않으며 쉽게 무시할 수 있었지만, 클릭 할만 큼 궁금해서 국가 목록의 앵커 포인트로 가져갔습니다. 마지막 두 링크는 ​​방금 해당 내용을 목록 국가 옵션에 표시했습니다.

여기에 많은 일이 일어나고 있으며 개선의 기회가 분명히 있습니다. 예를 들어, 대신 링크 나 버튼이어야하는 일반 텍스트로 표시되는 동작 통화가 있습니다. 또한 CSS 비활성화로 사이트의 성능이 향상 될 것이라고 생각하지만 검색 결과에로드 된 자산은 모두 엄청나게 적용됩니다. 즉, 검색 경험은 전혀 고통스럽지 않습니다…

? 사이트가 잘하는 일	? 사이트가 개선 할 수있는 것
검색은 일관되며 CSS의 유무에 관계없이 작동합니다.	"건너 뛰기"링크는 키보드 탐색에 도움이됩니다.
컨텐츠 계층 구조를 통해 콘텐츠를 쉽게 읽을 수 있으며 검색 결과를 쉽게 검색 할 수 있습니다.	"설정"메뉴의 비 링크 항목은 별도의 순서 대표 목록에 대한 제목이어야하므로 옵션 그룹화 방법에 대한 명확한 계층이 있습니다.
검색 결과 페이지 상단에 홈페이지 링크를 잘 사용합니다.	사이트가 컨텐츠를 조건부로 표시하고 숨기는 데 의존하기 때문에 일부 컨텐츠는 복제되거나 반복됩니다.
	모든 통화가 평범한 텍스트 대신 링크로 렌더링해야합니다.
	폴백 솔루션을 사용하여 검색 결과 유형을 필터링하여 항목 쌓이는 것을 방지하고 무거운 페이지 무게를 제어하는 ​​데 도움이됩니다.

웹 사이트 3 : Github

이봐, 여기 우리 중 많은 사람들이 잘 알고있는 사이트가 있습니다! 글쎄, 우리 중 많은 사람들이 항상 로그인하는 데 익숙하지만 로그 아웃하는 동안 서핑을 할 것입니다.

이미 Skip Link (Yay)가 있습니다. 또한 모바일 탐색 아이콘이있어서 아무것도하지 않을 것이며, 시도 할 때 바로 입증되었습니다.

내비게이션 항목 중 일부 사이에는 불필요하게 거대한 차이가 있습니다. 이것들을 클릭하면 여전히 드롭 다운 메뉴로 작동합니다. 그것들은 및

요소이지만… 메뉴 항목은 실제로 정렬되지 않은 목록 항목이며 내용을 확장하기 위해 의미 론적 방법을 사용하여 기본 브라우저 기능이 여전히 이루어질 수 있습니다. 그러나 그 SVG 아이콘은 저를 엉망으로 만듭니다.

필드에 무엇이든 입력하기 전에“모든 Github”및“Jump To”링크의 세 가지 인스턴스가 나타납니다. 어느 클릭 해야할지 모르겠지만 검색을 수행하면 키워드가 세 번째 그룹에 나타납니다.

홈페이지의 다른 모든 것은 창을 수평으로 넘치는 지나치게 큰 이미지를 제외하고는 괜찮아 보입니다.

검색 창으로 돌아가서 찾을 수있는 리포로 이동합시다. 검색 버튼 바로 아래에는 저장소 카운트, 코드, 커밋 및 기타 메타를 반환하는 거의 동일한 2 차 내비게이션 막대가 있습니다. 소스를 보지 않고, 나는 이것들 중 두 가지를 갖는 목적이 무엇인지 전혀 알 수 없습니다.

저장소 페이지에는 여전히 팔로우하기 쉬운 구조와 논리적 계층이 대부분 있습니다. 로그 아웃하고 내 캐시가 오기 전에 캐시를 지우는 동안“Github Today”블록의“해고”버튼은 여전히 ​​예상대로 수행됩니다. 우리가 아마존에서 이전에 본 것처럼, 태그 링크는 단일 줄로 함께 실행되기 때문에 구별하기가 어렵습니다.

다음 두 버튼 인 "JavaScript"및 "New Pull Request"는 클릭 할 때 아무것도하지 않는 것 같습니다. 사용자를 먼저 로그인 화면으로 데려 가려고하지 않는 한, 손님으로 보는 동안 풀 요청 버튼을 비활성화해야한다고 생각합니다. 그러나 CSS가 활성화 될 때 버튼이 실제로 비활성화되어 있음이 밝혀졌습니다. 그런 다음 페이지의 나머지 부분은 이해하기 쉽습니다.

주로 리포지토리를 관리, 기여 또는 체크 아웃하기 위해 여기에 있다면 계층 구조가 잘 진행되기 때문에 많은 마찰에 직면하지 않을 것입니다. 풀 요청, 문제 또는 개별 파일을보고 있더라도 다른 곳에서 거의 동일하게 경험할 수 있습니다. 대부분의 장애물은 사이트의 덜 두드러진 페이지에 살고 있습니다.

? 사이트가 잘하는 일	? 사이트가 개선 할 수있는 것
많은 페이지의 계층 구조와 구조는 정말 쉽게 따르고 논리적으로 의미가 있습니다.	요소 및 SVG의 높이 및 너비 속성을 사용하여 폭발하지 않도록하십시오.
페이지에 내장 된 대부분의 SVG 아이콘의 크기는 적절합니다.	빈 목록 항목을 조심하십시오.
헤더에 스킵 링크를 잘 사용합니다.	버튼 레이블이 전체 단어를 사용하는지 확인하십시오.
	런 온을 방지하기 위해 링크에 whitespace 또는 line break가 있는지 확인하십시오.

웹 사이트 4 : 16 진수

이 다음 사이트는 접근성을 위해 색상 대비를 확인하는 데 자주 사용하는 온라인 도구입니다. 그리고 색상이 너무 큰 사이트의 경우 CSS와 함께 많은 일이 발생할 수 있으므로 흥미로울 것입니다.

내비게이션 위에 많은 공간이 있으며 건너 뛰기 링크가 없습니다. 모바일 레이아웃의 햄버거 및 닫기 버튼은 각 색상 옆에있는 "X"버튼이 크기가 커집니다.

아, 그리고 "테스트 색상"버튼과 다음 컨텐츠 섹션 사이 의이 거대한 간격을 확인하십시오.

이 사이트의 많은 멋진 기능 중 하나는 테스트 된 모든 색상을 보지 않고 테스트를 통과 한 색상 만 볼 수있는 확인란입니다. 불행히도, 그 버튼은 CSS 비활성화로 아무것도하지 않습니다. 그러나 여전히 어떤 색상이 작동하는지 확인하고 결과 테이블에서 직접 대비 비율, 큰 텍스트 및 작은 텍스트에 대한 정의를 얻을 수 있습니다.

용어를 숨기고 표시하는 것은 아마도 버튼이 CSS와 함께하는 일입니다. Bummer는 테이블 헤더 후 단일 문자 (예 : S 및 R)의 목적을 알지 못한다는 것입니다. 또한이 목록에 색상이 전달되기 때문에 테이블 다음에 실패한 색상에 대한 메시지를 보는 것도 아이러니하고 혼란 스럽습니다. 수행 할 수있는 것은 기본적으로 숨기지 만 단일 테스트의 모든 색상이 실패하면 나중에 조건부로 주입합니다.

DevTools를 꺼내면 상단의 일부 공백이 SVG 파일로서 HEX NAW 로고입니다. 위의 공간은 페이지에 사용되는 다른 SVG 기호와 관련이 있습니다. 로고에 검은 색의 기본 색상을 사용하면 공간의 일부를 줄이는 데 도움이됩니다. 나는 DevTools를 빠르게 변화 시켰고 눈에 띄는 차이를 만듭니다.

공간의 두 번째 간격은 색상 대비를 계산하면서 나타나는 SVG 로더로 인해 발생합니다. 이것은 모바일 메뉴 및 "X"아이콘과 같이 훨씬 작지만 비례, 너비 및 높이를 지정하면 도움이 될 수 있습니다.

각 SVG에 초기 너비와 높이를 추가하면 스크롤이 필요합니다. 이것은 또한 Github의 내비게이션에서 본 격차를 해결하기 위해 우리가 할 수있는 일입니다.

궁극적으로 Hex NAW는 CSS 없이도 여전히 유용합니다. 여전히 색상을 테스트하고 통과하고 색상 결과가 실패하며 페이지 주위를 탐색 할 수 있습니다. 실제 색상으로 작업 할 수 없었고 여분의 큰 SVG 아이콘을 중심으로 작업해야했습니다.

? 사이트가 잘하는 일	? 사이트가 개선 할 수있는 것
이 사이트는 사이트 전체에서 우수한 콘텐츠 계층 구조를 유지합니다.	SVG는 폴백 채우기 색상을 사용하고 높이와 너비 속성을 사용해야합니다.
모든 요소는 의미 적으로 작성됩니다.	실패한 모든 색상에 대한 피드백은 어색한 메시지를 방지하기 위해 동적으로 추가 및 제거 될 수 있습니다.
테스트 자체는 정보를 보여 주거나 숨길 수있는 것을 제외하고는 제대로 작동합니다.	배경색 속성이있는 테이블 셀과 같이 테스트중인 값에 대해 색상을 표시하는 대체 방법을 고려하십시오.

웹 사이트 5 : 스택 오버플로

Github와 마찬가지로 Stack Overflow는 우리 중 많은 사람들 (대부분이 아닌 경우)이 뒷주머니에 보관하는 리소스 중 하나입니다. 누군가가 이미 개발 질문과 답변을 요청했는지 여부를 찾는 데 도움이되기 때문입니다.

질문을하기 위해 페이지에서 메인 요소 위에있는 빈 총알 포인트가 많이 보입니다. 빈 목록 항목이 왜 있는지 모르겠습니다. 서식 버튼도 보이지 않지만 약간 엉망이 된 후 빈 목록 항목에 지나지 않는다는 것을 알았습니다. 아마도 각 항목에 대한 폴백 텍스트 또는 SVG 아이콘은 이것이 무엇인지, 수행하는지 식별하는 데 도움이 될 것입니다. 실제 버튼으로 바꿔야합니다.

제목 필드에 텍스트를 입력하는 동안 유사한 질문 목록을 얻는 것도 여전히 가능합니다. 여기에서 모든 것이 예상대로 작동합니다. 그러나, 각 제안 된 각 질문에 대한 투표 계산은 링크로서 제목 위의 한 번은 링크되지 않고 제목 옆에 두 번 나타나는 것이 이상합니다.

스택 오버 플로우 질문 페이지에 착륙 할 때 우리 모두가 찾는 주요 요소 중 하나는 제출 된 모든 답변에서 정답을 나타내는 큰 녹색 확인 마크입니다. 그러나 CSS가 꺼지면 목록의 각 답변에는 검은 색 확인 표시가 있기 때문에 어떤 답변이 수락되었는지 알기가 어렵습니다. 허용 된 답변이 항상 맨 위에 있더라도 페이지와 상호 작용하지 않고도 대안 또는 폴백 표시가 여전히 없습니다. 또한, 이미 투표하거나 다운을했을 때 질문이나 답변에 투표 한 경우에는 아무런 표시가 없습니다.

스택 오버 플로우에 대한 경험을 요약하기 위해, 나는 일반적으로 사이트에 오는 것을 다음과 같은 것을 달성 할 수있었습니다 : 프로그래밍 문제에 대한 답변. 즉, 실제로 개선을위한 몇 가지 기회가 있었으며이 사이트는이 실험의 질문 페이지에서 심하게 누락 된 페이지의 계층 또는 가치를 나타내는 디자인이 종종 색상에 의존하는 방법의 대표적인 예입니다.

? 사이트가 잘하는 일	? 사이트가 개선 할 수있는 것
거의 모든 요소는 의미 적으로 작성됩니다.	명확한 컨트롤을 사용하여 질문을하거나 질문을하면서 편집 도구를 식별하십시오.
SVG 아이콘은 너비와 높이 속성을 사용합니다.	허용 된 답변을 질문에 대한 다른 답변과 구별하기 위해 시각적 아이콘을 고려하십시오.
답변 목록은 명확하고 스캔하기 쉽습니다.	다른 방법을 고려하여 컬러만으로도 업 투표 또는 다운 투표를 나타냅니다.

웹 사이트 6 : 위키 백과

웹의 주요 참조 지점 인 Wikipedia! 온라인 필수품이며 매력적인 특성 중 하나는 일종의 디자인 부족 입니다. 이것은 흥미로운 테스트를 만들어야합니다.

몇 가지 링크 다운하면 실제 탐색 및 검색을위한 Skip Navigation 옵션이 있습니다. Globe Image가 포함 된 홈페이지 헤더는 두 개의 열 레이아웃을 유지하며 이유를 밝혔습니다. 테이블 레이아웃입니다. 유용성 문제는 아니지만 레이아웃을 만들기 위해 테이블에 의존하는 것이 의미 론적이 아니라는 것을 알고 있습니다. 플로트, 플렉스 박스, 그리드 또는 컨텐츠 배치를 처리 할 수있는 다른 방법이 없었을 때 과거의 유물이었습니다. 즉, 페이지에는 눈에 띄는 유용성 문제 나 혼란스러운 요소가 없습니다.

우리 중 많은 사람들이 Wikipedia에서 가장 많은 시간을 보내는 것, 기사 항목으로 넘어 갑시다. 이것은 종종 Wikipedia의 진입 점, 특히 검색 엔진에 무언가를 입력하여 시작하는 사람들의 경우 Wikipedia 검색 결과를 클릭하십시오.

결론은이 페이지가 여전히 CSS 비활성화 된 상태에서 여전히 매우 유용하고 계층 적이라는 것입니다. 레이아웃은 단일 열로 내려 지지만 콘텐츠는 여전히 논리적 순서로 흐르고 테이블과 인라인 테이블 속성에 대한 의존 덕분에 다시 스타일링을 유지합니다.

내가 부딪친 한 가지 문제는 내비게이션입니다. 헤더에는 "Navigation to Navigation"링크가있어 클릭하면 내비게이션으로 내려갑니다. 궁금한 점이 있으면 내비게이션이 바닥 글에 포함되어있어 점프 해야하는 이유입니다.

CSS가 활성화 될 때 "More"위의 확인란이 특정 뷰포트 너비에서 디스플레이가되지만 목적이없는 것으로 보이지만 목적을 달성하지 못하는 것으로 보이지만 목적이없는 것으로 보입니다.

실제로 내비게이션에는 이상한 것이 있으며, "다른 프로젝트"와 "언어"제목 사이의 레이블이없는 버튼입니다.

해당 버튼을 클릭하면 여전히 언어 설정에 액세스 할 수 있으며 대부분 예상대로 작동합니다. 예를 들어, 레이아웃은 매우 기능적인 탭 레이아웃을 유지합니다.

그러나 디스플레이 탭에서 "언어"및 "글꼴"버튼은 아무것도하지 않습니다. 그들은 아마도 탭이지만 적어도 그들이 제공하는 것을 볼 수 있습니다. 이 버튼 옆에는 절대 아무것도하지 않는 두 개의 빈 선택 메뉴가 있습니다 (첫 번째는 Comicneue, OpendySlexic 및 System Font 옵션으로 채워집니다). "입력"탭을 살펴보면 쓰기 언어 버튼은 여전히 ​​탭으로 작동합니다. 영어, 스페인어 및 중국어 이외의 옵션을 선택할 수 있습니다.

이 기사는 CSS 없이는 전혀 읽기가 어렵지 않으며 거의 ​​모든 요소가 의미 적으로 정확하고 일관된 문서 계층을 따르기 때문입니다. 내가 궁금한 한 가지는 일반적으로 목차에있는 "쇼/숨기기"버튼이 어디로 갔는지였습니다. 고독한 확인란으로 밝혀졌으며 레이블은 가짜입니다. CSS의 의사 요소의 컨텐츠 속성을 사용하여 레이블을 표시합니다.

기사의 또 다른 문제는 이미지를 미리 볼 때 이미지를 사냥하는 데 시간을 보내야한다는 것입니다. 일반적으로 기사 사이드 바에서 이미지를 클릭하면 이미지 회전 목마가 포함 된 전체 화면 모달이 트리거됩니다. CSS가 없으면 그 회전 목마가 사라지고 그 자리에 그 위에 표지되지 않은 버튼이있는 이미지가 있습니다. 그것은 까다로운 일이지만, 회전 목마가 페이지 아래로 내려 가지 않으면 완벽하게 괜찮을 것입니다.

Wikipedia 로고가 기사에서 찾을 수 없다고 언급하지 않았다면 부주의 할 것입니다! 흰색의 흰색 SVG도 아닙니다. 링크에는 실제로 아무것도 포함되지 않습니다.

 <a href="/wiki/main_page" title="메인 페이지 방문"> </a>

고맙게도, "Navigation"의 "메인 페이지"링크는 브라우저 뒤로 버튼을 누르지 않고 집으로 돌아가는 또 다른 방법입니다. 그러나 여전히 홈페이지에서 훌륭한 일을 할 때 페이지에 브랜딩이없는 것이 여전히 이상하다고 느낍니다.

Wikipedia의 HTML 문제는 주로 기사보다는 덜 자주 사용될 것으로 예상되는 기능에 존재합니다. 그들은 장기적으로 내 독서 경험을 방해하지 않았습니다.

? 사이트가 잘하는 일	? 사이트가 개선 할 수있는 것
이 사이트는 깨끗한 구조와 계층 구조를 유지합니다.	로고 배치는 CSS 배경 이미지없이 페이지 상단으로 이동 (또는 경우에 따라 추가) 할 수 있습니다.
스킵 링크는 검색 및 탐색에 효과적으로 사용됩니다.	버튼에는 레이블이 포함되어야합니다.
기사 내용은 의미 론적이며 읽기 쉽습니다.	페이지의 이미지 회전 목마는 트리거가 발생하는 위치를로드하고 컨트롤에 적절한 버튼 레이블을 사용 할 수 있습니다.

CSS가 더 나은 경험으로 만드는 방법

CSS는 최신 웹의 핵심 구성 요소입니다. 우리 가이 시점까지 보았 듯이, 그것 없이는 미확인 할 수없는 많은 사이트가 있습니다. 그리고 우리는 그 믹스에서 가장 인식 할 수 있고 중고 사이트를 세고 있습니다. 우리가 본 것은 기껏해야 사이트의 주요 목적은 여전히 ​​달성 될 수 있지만 그 길을 따라 장애물이 있다는 것입니다. 와 같은 것 :

• 누락되거나 의미 적으로 잘못된 건너 뛰기 링크
• 함께 실행되는 링크
• 추가 스크롤링이 필요한 대형 이미지
• 목록 항목 및 버튼 레이블과 같은 빈 요소

CSS가 비활성화되거나 사용할 수없는 상황에 대해 고려해야 할 모범 사례 목록으로이를 컴파일 할 수 있는지 살펴 보겠습니다.

문서 상단에 스킵 탐색 링크 포함

Having a hidden link to skip the navigation is a must. Notice how most of the sites we looked at contained navigation links directly in the header. With CSS turned off, those navigations became long lists of links that would be so hard to tab or scroll through for any user. Having a link to skip that would make that experience much better.

The most basic HTML example I've seen is an anchor link that targets an ID where the main content begins.

 <a href="#main">Skip to main content</a>
<!-- etc. -->
<main></main>

And, of course, we can throw a class name on that link to hide it visually so it is not displayed in the UI but still available for both keyboard users and when CSS happens to be off.

 .skip-navigation {
  국경 : 0;
  clip: rect(1px, 1px, 1px, 1px);
  오버플로 : 숨겨진;
  padding: 0;
  위치 : 절대;
  height: 1px;
  width: 1px;
}

/* Bonus points for adding :focus styles */

Leave whitespaces where they make sense

Another pain point we saw in a few cases were text links running together. Whether it was in the navigation, tags, or other linked up meta, we often saw links that were “glued together” in such a way that several individual links appeared to be one giant link. That's either the result of hand-coding the links like that or an automated build task that compresses HTML and removes whitespaces in the process. Either way, the HTML winds up like this:

 <a href="#">CSS</a><a href="#">JavaScript</a><a href="#">Python</a><a href="#">Swift</a>

We can keep the freedom to use spaces or line breaks though, even with CSS disabled. One idea is to lean on flexbox for positioning list elements when CSS is enabled. When CSS is disabled, the list items should stack vertically and display as list items by default.

If the items are tags and should still be separated, then traditional spacing methods like margins and padding are still great and we can rely on natural line breaks in the HTML to help with the style-less formatting. For example, here are line breaks in the HTML used to separate items, flexbox to remove spaces, then styled up in CSS to re-separated the items:

Use width and height attributes liberally

The biggest nuisance in this experiment may have been images exploding on the screen to the point that they dominate the content, take up an inordinate amount of space, and result in a hefty amount of scrolling for all users.

The fix here is rather straightforward because we have HTML attributes waiting for us to define them. Both images and SVG have methods for explicitly defining their width and height.

 <img  src="/static/imghw/default1.png" data-src="/path/to-image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="그 당시 나는 CSS없이 웹을 탐색하려고 시도했다" >

<svg width="40px" height="40px" viewbox="0 0 200 200">
  <polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80"></polygon>
</svg>

Prepare SVGs for a white background

Many of the large gaps on the sites we looked at looked like empty space, but they were really white SVGs that blew up to full size and blended into the white background.

So, yes, using the proper width and height attributes is a good idea to prevent monstrous icons, but we can also do something about that white-on-white situation. Using properties like fill and fill-rule as attributes will work here.

 <!-- Icon will be red by default -->
<svg viewbox="-241 243 16 16" width="100px" fill="#ff0000">
  <path d="M-229.2,244c-1.7,0-3.1,1.4-3.8,2.8c-0.7-1.4-2.1-2.8-3.8-2.8c-2.3,0-4.2,1.9-4.2,4.2c0,4.7,4.8,6,8,10.6 c3.1-4.6,8-6.1,8-10.6C-225,245.9-226.9,244-229.2,244L-229.2,244z"></path>
</svg>

 /* ...and it's still red when CSS is enabled */
svg {
  fill: #ff0000;
} 

Label those buttons!

Lastly, if buttons are initially empty, they need to have visible fallback content. If they use a background image and a title for what the do, use a span containing the title text then add aria-hidden="true" so it doesn't sound like the screen reader is reading the button label twice (eg VoiceOver says, “Add button Add” instead).

 <button title="Add">
  <span aria-hidden="true">Add</span>
버튼></button>

Then the CSS can be something like this:

 .btn-icon {
  background: url(path/to/icon.svg) 0 0 / 100% 100%;
  height: 40px;
  width: 40px;
}

.btn-label {
  디스플레이 : 블록;
  오버플로 : 숨겨진;
  높이 : 0;
}

If there are

elements acting as buttons, they can remain, but they should be static, and the contents should be placed in a button.

Now, if the icon is an SVG, we can ensure the title tooltip can still be seen by using aria-labelledby and assigning the id to the title.

 <button>
  <svg width="40px" height="40px" viewbox="0 0 200 200" aria-labelledby="btn-title">
    <title>Add</title>
    <polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80"></polygon>
  </svg>
버튼></button>

결론

It can be easy to either forget or be afraid to check how a site appears when CSS isn't available to make the UI look as good as intended. After a brief tour of the Non-CSS Web™, we saw just how important CSS is to the overall design and experience of sites, both small and large.

And, like any tool we have in our set, leaning too heavily on CSS to handle the functionality and behavior of elements can lead to poor experiences when it's not around to do its magic. We've seen the same be true of sites that lean too heavily on JavaScript. This isn't to say that we should not use them and rely on them, but to remember that they are not bulletproof on their own and need proper fallbacks to ensure an optimal experience is still available with or without our tooling.

Seen in that light, CSS is really a layer of progressive enhancement. The hierarchy, form controls, and other elements should also remain intact under their user agent styles. The look and feel, while important, is second when it comes to making sure elements are functional at their core.

위 내용은 그 당시 나는 CSS없이 웹을 탐색하려고 시도했다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!