[クイックキャンパスNekaraku杯第2期]-25日勉強

HTML&CSSコース

Webアクセスガイドライン

Web Content Accessibility Guidelines (WCAG) 2.1

韓国Webコンテンツアクセスガイド2.1

最近はネットレッスンが増えてズームがたくさん使われています.競合他社のwebexがあり、zoomはユーザーのアクセス性に基づいて設計されています.
Accessibility - Zoom
クローン符号化では、アクセス性の観点からどのような点を考慮しますか?プロジェクトに反映される項目の各方面には、違いがある場合があります.

SkyscannerのUIはカスタムUIで、アクセス性の観点からマウスの問題かもしれませんが、キーボードやタッチ部分で問題が発生します.
これらのUIを表示する際、アクセス性の観点から視野角を広げることができる

화면 UI만들기 실습 (term css)

.term {
    background: #ccc linear-gradient(#ccc, #eee);
    border: 1px solid #aaa;
    margin-top: 20px;
    padding: 10px 15px;
    border-radius: 5px;
}

.term-heading {
    margin: 0;
    font-size: 1rem;
}

.term-list {
    display: flow-root;
    margin: 10px 0 0 0;
}

.term-list dd {
    margin-left: 0;
}

/* 구형 브라우저에서는 콜롬 하나만 붙여야 됨 */
.term-list:after {
    content: "";
    display: block;
    clear: both;
}

.term-list > div {
    margin: 10px 0;
}

.term-list-subject, .term-list-brief{
    float: right;
    width: 145px;
}

.term-list-subject {
    line-height: 1;
    /* margin-top: -3px; */
    color: #277684;
    margin-bottom: 5px;
}

.term-list-thumbnail {
    float: left;
}

.term-list-thumbnail img {
    vertical-align: top;
}

.term-list-brief {
    line-height: 1.2;
    font-size: 0.8725em;
}

term-list-サムネイルimgとddラベルのterm-list-サムネイルの違いの原因:垂直位置合わせが異なるため!(垂直位置合わせ:上部または中央に切り替え)
構造セレクタ(:nth-child)を使用してdivを必要とせずに複数のレイアウトを作成できます.

화면에 나오는 키보드 접근 마크업

a要素は非表示ですが、アクセス可能でなければなりません.
次に、a要素をフォーカスを取得するときに表示させるとよい.

<div class="skip-navigation">
  <a href="#userEmail">본문 바로가기</a>
</div>

.skip-navigation {
    position: fixed;
    background: black;
    text-align:center;
    width: 100%;
    z-index: 10;
}

.skip-navigation a {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    overflow: hidden;
    padding: 15px;
    color: white;
    font-size: 0.875rem;
}

.skip-navigation a:focus {
    position: static;
    width: auto;
    height: auto;
    clip: initial;
    clip-path: initial;
    margin: initial;
    display: inline-block;
    outline-offset: -10px;
}

Z-indexが指定されていない場合、その下のタイトルはposition:relativeであるため、寸法順序で最後に作成されたレイヤーが重なり、解析のために下-->z-index値のように見えます.
隠し方は隠し内容を勉強してからclipを使います!

第2グループのデータ検索フォーム

flexコンテナがform関連要素とともに動作すると、多くのエラーが発生することに注意してください.ariaを使用すると、タイトルが指定できない場合にアクセスできます.
おすすめはinputtype=「search」aria-label = "Search"

<h2 class="a11y-hidden">검색</h2>
<form method="POST" action="https://formspree.io/[email protected]" class="search-form">
  <fieldset>
    <legend>검색 폼</legend>
    <label for="search"><span class="icon-search" aria-hidden="true"></span>자료검색</label><input type="search" id="search" name="search" required placeholder="검색어를 입력하세요">
    <button class="button-search" type="submit">검색</button>
  </fieldset>
</form>

/* 검색 폼 */
.search-form {
    background: #ccc linear-gradient(#ccc, #eee);
    padding: 15px 25px 10px 15px;
    border: 1px solid #aaa;
    border-bottom-color: white;
    border-radius: 15px 15px 0 0;
    font-size: 0.875rem;
}

.search-form fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.search-form label {
    line-height: 1;
}

.search-form * {
    vertical-align: middle;
}

.search-form input {
    appearance: none;
    border: 1px solid #aaa;
    height: 22px;
    border-radius: 2px;
    padding: 1px 1px 1px 5px;
    margin: 0 10px;
    width: 202px;
}

.button-search {
    border: 0;
    padding: 0 10px;
    background: #000;
    color: white;
    height: 22px;
    font-size: 0.75rem;
    border-radius: 2px;
}

それ以外は

コメントに条件付きコメントを追加できます
html5shiv polyfill
polyfill-->間隔の縮小