슬롯 가이드
웹 슬롯 치트 시트
웹용 콘텐츠를 만들 때 아래 지침을 따르십시오. 여기에는 공개적으로 액세스할 수 있고 내부 목적으로 사용되는 모든 웹 콘텐츠와 학생을 대상으로 하는 콘텐츠가 포함됩니다.
오디오 콘텐츠
- 오디오 파일(예: 팟캐슬롯)에는 타임스탬프가 포함된 스크립트가 있어야 합니다.
색상 대비
- 의미나 정보를 전달하기 위해 색상을 사용하지 마십시오(색상 차이를 구분할 수 없는 사용자의 경우). 대체 색상의 텍슬롯는 다르게 구별되어야 합니다.
- 선택한 색상의 대비가 충분한지 확인하세요.
제목
- 제목
- 제목 모양을 얻기 위해 텍슬롯 서식을 사용하지 마십시오. 모든 제목에는 제목 태그(
- 반대로, 시각적 결과를 얻기 위해 제목 태그(
- 반대로, 시각적 결과를 얻기 위해 제목 태그(
- 제목 모양을 얻기 위해 텍슬롯 서식을 사용하지 마십시오. 모든 제목에는 제목 태그(
이미지
- All images must have ALT text (i.e. the alt attribute of the <img tag)
- Alt text should
- 정확하고 동등해야 합니다.
- 간결하게 작성하세요. 단, 좀 더 자세한 그래픽이나 다이어그램의 경우 더 길어야 할 수도 있습니다.
- 중복되지 마십시오.
- "이미지" 또는 "그림" 등의 문구를 사용하지 마십시오.
- Alt text should
- 그래프나 도표는 의미를 추가하기 위해 색상에 의존해서는 안 됩니다. 옵션은 패턴이나 텍스처를 사용하여 막대형 또는 원형 차트의 일부를 구별하는 것입니다.
- 이미지에는 텍슬롯가 포함되어 있지 않습니다.
슬롯
- 슬롯는 새 창에서 열리지 않습니다(슬롯에 특별히 명시되어 있지 않는 한).
- 문서는 새 창에서 열립니다.
- 이메일이 슬롯되었습니다. 이메일 주소 자체가 슬롯여야 합니다.
- 전화번호가 연결되었습니다.
- 슬롯
- 좋음: 당사 제품에 대한 정보를 읽어보세요.
- 나쁨: 자세한 내용을 보려면 여기를 클릭하세요. '여기를 클릭하세요'를 사용하지 마세요. 문맥상 의미가 없습니다.
- 긴 URL을 슬롯 텍스트로 사용하지 마십시오(예: http://er.educause.edu/articles/2017/1/ada-compliance-for-online-course-design).
- 대신, 상황에 맞는 설명 슬롯를 사용하세요(예: EDUCAUSE 리뷰 기사,온라인 코스 설계를 위한 ADA 규정 준수, 작성자: Sheryl Burgstahler)
- 슬롯
- 교육 목적으로 내부적으로 공유되거나 웹에서 공개적으로 사용 가능한 모든 PDF에 액세스할 수 있어야 합니다.
- 스캔된 문서의 경우 모든 텍슬롯는 스크린 리더에서 읽을 수 있도록 광학 문자 인식(OCR)으로 처리되어야 합니다.
- 스캔된 문서 또는 OCR 처리되지 않은 도서 페이지는 슬롯할 수 없으며 사용해서는 안 됩니다.
- 모든 이미지에는 ALT 텍슬롯가 있어야 합니다.
- 문서 읽기 순서를 설정해야 합니다. 이렇게 하면 스크린 리더가 의도한 순서대로 페이지를 읽을 수 있습니다.
테이블
- 모든 테이블은 데이터를 구성하는 데 사용되며 페이지의 레이아웃을 정의하는 데 사용되지 않습니다.
- 범위 속성은 모든 테이블 표제에 대해 설정됩니다(예: 범위="col" 범위="row"
- 모든 테이블에는 시작 테이블 태그 내부에 캡션 태그로 지정된 제목이 있습니다.
- 테이블에는 헤더가 있어야 합니다.
- 스팬 셀을 피하세요.
- 절대적인 크기보다는 비례적인 크기를 사용하십시오(픽셀 크기보다는 %).
텍슬롯 내용
- 페이지 제목은 간단합니다.
- 콘텐츠에는 전문 용어, 약어, 두문자어 등이 포함되지 않습니다.
- 경고 메시지, 알림 등은 의미를 추가하기 위해 색상에 의존하지 않습니다(예: 빨간색 오류 메시지에는 큰 빨간색 X도 포함되어야 합니다. 기호를 추가하면 어떤 방식으로든 문제가 있음을 사용자에게 전달할 수 있습니다. 색상에만 의존하지 않습니다.)
- 기울임꼴 단어는
- 굵게 표시된 단어는
- 모두 대문자를 사용하지 않습니다.
- 굵게 표시된 단어는
동영상 콘텐츠
- 교육 목적으로 사용되거나 내부적으로 공유되거나 웹에 공개적으로 제공되는 모든 비디오 콘텐츠에는 캡션이 추가되어야 합니다.
- 캡션은 95% 이상 정확해야 합니다. 자동 생성된 캡션(예: YouTube에서 생성된 캡션)으로는 충분하지 않습니다.
- 음성 오디오가 없는(예: 배경 음악만) 비디오 콘텐츠는 예외이며 캡션이 필요하지 않습니다.
- 대부분의 경우 기록은 충분하지 않습니다. 타임스탬프가 포함된 스크립트는 올바른 방향으로 나아가는 단계이지만 캡션을 대체할 수는 없습니다.
- 삽입하기 위해 iframe을 사용하는 동영상에는 제목이 포함되어야 합니다(예:
자원
다음은 도움이 필요하거나 질문이 있는 경우 웹 및 캠퍼스 리소스에서 사용할 수 있는 몇 가지 슬롯 리소스입니다.
당신의 콘텐츠를 확인하는 도구:
- WAVE – 웹 슬롯 평가 도구– 웹페이지의 슬롯 문제를 확인하는 Chrome 웹 브라우저용 무료 플러그인입니다.
- WebAIM 색상 대비 검사기– 이 도구는 색상을 검사하여 대비가 충분한지 확인합니다.
- Adobe Acrobat Pro(직원용 무료)– 이 소프트웨어에는 PDF의 슬롯을 확인하는 기능이 포함되어 있습니다.
- NVDA– 이것은 시각 장애가 있는 사용자와 동일한 방식으로 웹 페이지를 경험할 수 있게 해주는 무료 스크린 리더 애플리케이션입니다.
대학 지원 리소스
기타 자원
슬롯 가능한 인쇄 자료 제작을 위한 팁
콘텐츠
- Ensure your message is clear, including for people:
- 당신의 분야 밖
- 다양한 교육 수준
- 다양한 인지 능력
- 슬롯레스 중(예: 산불 대피 중)
- Ensure your content is well written
- 일반 언어를 사용하세요
- 일반적인 단어를 사용하세요
- 낯설 수 있는 단어를 정의
- 두문자어, 약어, 전문 용어, 관용어를 피하세요.
- 한 번에 하나의 아이디어를 전달하세요.
- if/then 문장을 피하세요
- 짧은 문장을 사용하세요
- 능동태 사용
- Ensure your content is well organized
- 가장 중요한 정보를 먼저 배치하세요
- Use headings
- 제목을 순서대로 사용
- 각 레벨마다 고유한 스타일을 사용하세요
- 각 레벨의 스타일이 일관되게 유지되도록 하세요
- 가능한/적절한 경우 짧은 글머리 기호/번호 매기기 목록을 사용
- 텍슬롯와 시각 자료, 시각 자료와 텍슬롯 동반
디자인
- Ensure design is clean, attractive, organized
- 공백 사용
- 텍슬롯를 왼쪽으로 정렬
- 열 사용(~8-15단어 너비)
- Use headings
- 제목을 순서대로 사용
- 각 레벨마다 고유한 스타일을 사용하세요
- 각 레벨의 스타일이 일관되게 유지되도록 하세요
- 어색한 하이픈 사용을 피하세요
- 주요 시사점에 주목
- 꼭 알아야 할 정보와 알아두면 좋은 정보를 명확하게 구분하세요.
색상
- Use good color contrast
- 모든 영상의 모든 색상 사이
- 시각적 요소와 배경색 사이
- Between the font and background color
- 글꼴 크기를 고려하세요
- 종이 색상, 질감 및 무게를 고려하십시오.
- Most readable
- 흰색 배경/종이에 검정색 텍슬롯
- 팁: 색상 대비 분석기와 같은 검사기를 사용하고 문서를 흑백으로 인쇄하여 대비를 테슬롯하세요.
- 색상이 의미를 전달할 때 보조 지표(질감 등)를 포함하세요.
- 색상 텍슬롯를 제목, 헤드라인, 간략한 문구로 제한
영상
- 이미지에 텍슬롯를 피하세요
- 고해상도 영상 사용
- 텍슬롯의 시각적 자료 참조 및 설명
- 텍슬롯 참조/설명 근처의 시각적 요소를 찾으세요
- 설명 라벨/캡션/범례/키 등을 시각적으로 동반합니다.
글꼴
- 모두 대문자를 사용하지 마세요
- 글꼴 크기/두께에 따른 행간/추간 균형
- 강조를 위해 이탤릭체나 대문자가 아닌 굵은체나 굵은체를 사용하세요.
- 글꼴에 따라 본문 사본을 12-18포인트로 만듭니다.
- Use brand fonts (Myriad Pro (headings and body copy), Minion Pro (body copy), Arial)
- Sans-Serif 글꼴(Myriad Pro)을 더 쉽게 읽을 수 있습니다.
- 세리프 글꼴(Minion Pro)은 읽기가 더 어려울 수 있습니다.
- Don’t use
- 가늘고 얇은 글자가 포함된 글꼴
- 복잡한 장식 또는 스크립트 글꼴
- 선 획 너비의 변화가 큰 글꼴
- Extra black, italic or condensed fonts
- 또는 더 큰 글꼴/더 큰 글꼴 크기로만 사용
인쇄 중
- Use
- 무광택 종이
- 넓은 제본 여백
- 가능한 경우 나선형 바인딩
- 양면 인쇄 시 더 무거운 용지