웹 표준: 심층 참조 가이드

WEB-27

WEB-27: 모든 기관은 커먼웰스 배너를 변경하지 않고 COV 디자인 시스템에서 정의한 대로 표시해야 합니다. 

WEB-27이해  

커먼웰스 브랜딩 바는 시민들이 버지니아 주에 있는 정부 기관의 공식 웹사이트를 식별할 수 있도록 도와줍니다. 또한 방문자가 현재 방문 중인 사이트가 공식적이고 안전하다는 것을 이해하는 데 도움이 됩니다. 새로운 브랜딩 바는 웹사이트 방문자가 버지니아주 정부 기관을 쉽게 탐색하고 버지니아주 전체에 대한 정보를 검색할 수 있는 탐색 포털의 역할도 합니다. 

브랜딩 바는 쉽게 설치할 수 있으며, 대행사가 웹사이트에 게시할 수 있는 지침과 코드는 '커먼웰스 브랜딩 바 받기'에서 확인할 수 있습니다. 이 페이지에는 에이전시 웹사이트의 헤드 태그에 넣을 코드를 생성하는 단계별 지침이 나와 있습니다. 또한 에이전시에서는 웹사이트의 색상 테마에 맞게 회색과 흰색 브랜딩 바 중에서 선택할 수 있습니다. 

생성된 각 브랜딩 바에는 다음이 포함됩니다: 

• 버지니아 주 로고 
• 기관 또는 버지니아 정부 기관 이름(이 중 생성자는 이름 전체를 철자로 표기해야 함) 
• "버지니아 주의 공식 웹사이트"라는 바이라인과 "이렇게 알 수 있습니다"라는 드롭다운이 표시됩니다. 

• 드롭다운에는 버지니아 주 로고 및 HTTPS 인증서에 대한 정보가 포함되어 있습니다. 

• '연방정부 리소스 찾기'라는 하위 메뉴를 클릭하면 버지니아주 기관 또는 정부 기관 전체에서 검색할 수 있으며, 일반적으로 사용되는 연방정부 서비스 및 기관 서비스 영역별로 정렬된 리소스도 검색할 수 있습니다. 

생성된 코드는 있는 그대로 사용해야 하며 어떤 방식으로든 수정해서는 안 됩니다. 설치에 문제가 있는 경우 VITA의 엔터프라이즈 웹 서비스 팀에 이메일을 보내야 합니다 . 생성된 코드는 있는 그대로 사용해야 하며 어떤 방식으로도 수정해서는 안 됩니다 . 설치에 문제가 있는 경우 VITA의 엔터프라이즈 웹 서비스 팀에 이메일( developer@vita.virginia.gov )로 문의하시기 바랍니다. 

WEB-28

WEB-28: COV 웹 시스템은 모든 페이지에 표시되는 대행사 사이트 검색 상자를 제공해야 하며 COV 디자인 시스템의 지침에 따라 표시되어야 합니다. 

WEB-28이해

각 에이전시 웹사이트와 페이지에 에이전시 전체 사이트 검색창이 있으면 사용자가 관련 키워드와 검색어를 입력하면 관련 링크 목록으로 이동하여 보다 빠르게 정보에 액세스할 수 있습니다.  대행사는 기본 또는 보조 탐색에만 의존하여 사용자를 관련 정보로 안내할 수 없습니다.  

특히 정책, 절차, 시민 서비스 등 많은 양의 콘텐츠와 정보를 담고 있는 웹사이트에서는 검색창이 점점 더 중심이 되고 있으므로 검색창은 모든 페이지에 눈에 잘 띄게 표시되어야 하며 사용자가 쉽게 알아볼 수 있어야 합니다. 

또한 검색창은 다음 모범 사례를 준수해야 합니다: 

• 검색은 가능한 경우 '검색'이라고 표시된 플레이스홀더 텍스트가 있는 열린 텍스트 쿼리 필드를 유지하거나 사용자가 쿼리를 입력할 수 있는 몇 개의 단어로 제한된 추가 컨텍스트 지침을 제공해야 합니다. 

• 검색 상자에는 최소한의 세부 정보가 표시된 돋보기 아이콘이 함께 표시되어야 합니다.S 가능(간단한 선화)합니다. 사용자들은 일반적으로 돋보기를 검색 기능의 상징으로 인식하고 있습니다. 

• 이 아이콘은 상호 작용 비용(클릭 수 증가)을 증가시키고 검색 기능을 덜 뚜렷하게 만들 수 있으므로 가능하면 검색 기능을 숨기지 않는 것이 좋습니다. 
• 의심스러우면 Google처럼 하세요. 

• 검색 쿼리는 Enter 키를 눌러 확인해야 합니다. 원하는 경우 확인 버튼을 눌러 검색 쿼리를 확인할 수도 있지만, 검색창에서 엔터 키를 누르는 상호 작용은 유지해야 합니다. 

• 확인 버튼을 추가하는 경우 적절한 크기와 위치(일반적으로 검색창 자체의 높이, 열린 텍스트 쿼리 필드 오른쪽에 위치)를 지정해야 합니다. 이 검색 버튼은 접근성 모범 사례를 충족하려면 최소 45 x 45 픽셀 크기여야 합니다. 

• 입력 텍스트 상자의 크기는 최소 27 자 길이를 처리할 수 있는 너비여야 합니다(ems를 사용하여 설정). 

• 가능한 경우 검색창은 에이전시 웹사이트의 오른쪽 상단, 커먼웰스 브랜딩 바 아래에 배치해야 합니다. 
• 10 개 미만의 항목으로 구성된 자동 제안 드롭다운 필드를 사용하면 사용자가 원하는 항목을 더 빨리 찾을 수 있지만, 이를 사용하는 대행사는 필드에서 자동 생성되는 제안이 입력 필드에 입력한 검색어와 관련성이 있어야 합니다. 
• 사용자가 엔터를 누르면 사용자가 지우지 않는 한 원래 검색어가 필드에 남아 있어야 하며 검색어를 기반으로 한 결과가 표시되는 결과 페이지가 사용자에게 표시되어야 합니다. 

• 검색 쿼리에 결과가 없는 경우 사용자에게 일치하는 결과가 없음을 명확하게 알리는 정보를 제공해야 합니다. 

WEB-29

WEB-29: COV 웹 시스템에는 검색 엔진이 웹사이트를 보다 효율적으로 크롤링할 수 있도록 사이트맵이 포함되어야 합니다. 예제는 COV 디자인 시스템에서 제공됩니다.

WEB-29이해

사이트맵은 검색 엔진이 콘텐츠를 크롤링하여 사이트의 대부분을 검색할 수 있도록 하는 파일입니다. 

사이트맵은 검색 엔진이 HTML 파일뿐만 아니라 이미지, 동영상, 뉴스 콘텐츠, 현지화된 에이전시 웹페이지 버전에 대한 데이터도 색인할 수 있도록 XML 형식으로 만들어야 합니다. 

XML 형식으로 사이트맵을 만드는 방법에 대해 자세히 알아보려면 다음을 참조하세요. sitemaps.org의 사이트맵 XML 형식 문서. 

VITA는 developers.google.com에 명시된 다음 사이트맵 모범 사례를 따를 것을 권장합니다: 

• 단일 사이트맵은 압축되지 않은 50MB로 제한해야 합니다. 대행사의 사이트맵 파일이 큰 경우 사이트맵을 여러 개의 사이트맵으로 분할하세요. 
• 사이트맵 파일은 UTF-8 로 인코딩되어야 합니다. 
• 사이트맵은 사이트 루트에서 호스팅하는 것이 좋습니다. 
• 사이트맵에 정규화된 절대 URL을 사용하세요(예: /agencypage.html 대신 https://www.myvaagency.gov/agencypage.html 사용). 

WEB-30

WEB-30: COV 웹 시스템에서는 각 페이지에 최소한 다음 정보가 포함된 바닥글이 있어야 합니다: 

• 대행사 이름 
• 저작권 정보 
• 웹 접근성 이니셔티브(WAI) 준수를 명시하는 텍스트 또는 승인된 아이콘 링크입니다.
• 해당 기관의 인터넷 개인정보 처리방침으로 연결되는 링크입니다.
• FOIA 정보 링크
• 번역 면책 조항
• 문의 페이지
• COV 설계 시스템에서 정의한 기타 항목 

WEB-30이해

웹사이트 바닥글은 모든 에이전시 사이트 페이지의 맨 아래에 표시되는 정적 UI 패턴입니다. WEB-30 은 모든 페이지의 바닥글에 다음을 표시하도록 규정하고 있습니다: 

• 대행사 이름: 전체 대행사 이름이 표시되어야 합니다. 
• 저작권 정보: 저작권 © 대행사명 전체 [현재 연도]로 표시됨 

• 웹 접근성 이니셔티브(WAI)를 명시하는 텍스트 또는 승인된 아이콘 링크입니다: 웹 접근성 이니셔티브로 작성되었으며 다음에 링크되어 있습니다. WCAG 2.0 AA 적합성 페이지. 또는 대행사는 WAI 로고를 사용하여 WAI에 연결할 수 있습니다. 로고 사용에 대한 가이드라인과 코드는 다음에서 확인할 수 있습니다. W3C의 WCAG 준수 로고 추가 페이지. 

• 이 링크를 사용할 때는 기관이 WCAG 2.0에 명시된 AA 준수를 충족하도록 노력하는 것이 중요합니다. 

• 해당 기관의 인터넷 개인정보 처리방침으로 연결되는 링크입니다: 개인정보처리방침은 대행사별로 다르지만 최소한 대행사에서는 사이트에 액세스할 때 사용자의 정보를 어떻게 사용하고 수집하는지, 어떤 정보가 수집되는지, 버지니아주 법률과 어떻게 관련되는지, 사용자가 자세한 정보를 얻을 수 있는 곳, 쿠키 정책 및 기타 사용자 데이터 사용과 관련된 정보를 설명해야 합니다. 예제는 다음에서 찾을 수 있습니다. virginia.gov. 
• FOIA 정보로 연결되는 링크입니다: FOIA 정보는 기관별로 다르며 버지니아 정보 자유법, 사용자의 FOIA 권리, 사용자가 기록을 요청하는 방법, 요청을 보낼 곳, 요청을 받을 때 기관의 책임에 대한 일반 언어로 된 정보를 포함해야 합니다. FOIA에 대한 자세한 정보는 다음에서 확인할 수 있습니다. 버지니아주 법령, 37장. 
• 번역 고지 사항: 번역 고지 사항에는 타사(일반적으로 Google 번역)를 통해 페이지를 현지화할 수 있음을 명시합니다. 이 고지 사항에는 제3자의 이름과 함께 이 옵션은 사용자가 영어 이외의 언어로 웹사이트를 제공하는 데 도움을 주기 위해 제공되지만 자동 번역이 완벽하지 않으며 제3자 서비스가 "있는 그대로" 제공된다는 문구가 포함되어야 합니다. 예제는 다음에서 찾을 수 있습니다. VITA의 번역 면책 조항 페이지. 

• 문의 페이지: 문의처 페이지: 바닥글에 문의처 페이지가 포함되어야 합니다. 자세한 내용은 WEB-31 을 참조하세요. 

또한 COV 디자인 시스템에서는 모든 바닥글에 다음과 같은 내용을 포함하도록 권장합니다. 

• 모바일에서 작업 
• 바닥글의 추가 링크는 목적에 맞게 선택해야 합니다(자주 사용하는 링크, 미니 사이트맵 등). 
• 소셜 미디어 링크/아이콘을 포함하되 전체 소셜 피드는 포함하지 않습니다. 

• 최소한의 이미지로 선명하고 가독성 높음 
• 클릭 유도 문안을 사용할 경우 명확한 방향과 목적을 가지고 간결하게 유지하세요. 

WEB-31

WEB-31: COV 웹 시스템은 최소한 대행사의 연락처를 포함하는 문의처 페이지를 제공해야 합니다: 

• 우편 주소
• 팩스 번호(가능한 경우)
• 전화번호(수신자 부담 번호 및/또는 TTY 번호 포함, 가능한 경우)
• 대행사 담당자에게 보내는 이메일 링크 또는 문의 양식입니다. 
• 문의하기 페이지는 페이지 바닥글에서 액세스할 수 있습니다.  

WEB-31이해

참고 대행사는 일반 이메일 주소를 사용해야 하며 대행사의 연락처 링크를 특정 개인과 연결하지 않아야 합니다. 

문의 페이지에서는 다양한 사용자를 수용하기 위해 다양한 방법을 통해 궁금한 점이나 우려 사항이 있는 경우 대행사에 문의할 수 있습니다. 

• 우편 주소는 사서함이 아닌 대행사의 실제 주소여야 하며, 형식은 다음과 같아야 합니다: 
   전체 대행사 이름 
  123 도로명 주소 도로명, 스위트 번호 456 
  버지니아주 시티 우편 번호 
   
• 팩스 번호(사용 가능한 경우), 형식은 이렇게 지정합니다: 
  123-555-5555 (팩스)
  

• 전화번호(무료 전화 번호 및/또는 사용 가능한 경우 TTY 번호 포함), 형식은 다음과 같습니다: 
  1-123-555-5555(전화) 
  1-800-555-5555(수신자 부담) 
  1-123-555-5555(티티) 

• 필요한 경우 TTY 또는 중계 서비스 사용 방법에 대한 추가 지침이 제공될 수 있습니다(가능한 경우). 
  

• 일반 이메일 링크는 대행사 연락처가 특정 개인과 연결되는 것을 피하기 위해 사용해야 하며, 형식은 다음과 같이 지정해야 합니다: 
   
  contact@agency.virginia.gov 
   
  대행사 연락처에 대한 문의 양식은 이메일 주소 대신 사용할 수 있습니다. 양식을 사용하는 경우 양식에는 최소한 응답에 필요한 다음 필드가 있어야 합니다., 적절한 라벨을 붙입니다:
• 이름
• 성 (? 성이 정말 필요한가요? 최소의 원칙에 따라)
• 이메일 또는 전화번호
• 메시지 또는 댓글 입력 필드 

WEB-36

WEB-36: 상용 기성품(COTS) 시스템을 포함한 COV 플랫폼 웹 시스템은 COV 디자인 시스템에 정의된 대로 커먼웰스 브랜딩의 원활한 사용을 위해 화이트 라벨링을 지원해야 합니다.

WEB-36이해

플랫폼 웹 시스템은 EA에 의해 다음과 같이 정의됩니다: 

인적 자원 관리 시스템(HRMS), 재무 관리 솔루션(FMS), 공급망 관리(SCM), 고객 관계 관리(CRM), 기업 성과 관리(EPM), 콘텐츠 관리 시스템(CMS) 등 대규모 또는 멀티테넌트 구현을 위한 엔터프라이즈급 기능을 제공하는 모든 웹 시스템입니다. 

이러한 시스템을 통해 COVA 대행사는 외부에 발표하거나 대중에게 공개할 때 EA 외관 및 디자인 시스템 표준(화이트 라벨링이라고도 함)에 맞게 외관을 리브랜딩할 수 있어야 합니다. 최소한 일반 사용자가 액세스할 수 있는 플랫폼 웹 시스템에서는 페이지 상단에 커먼웰스 브랜딩 바가 표시되어야 합니다.