텍스트 뒤에 그림 추가

이미지 링크 버튼이 있습니다. 고 대비 모드에서는 이미지 (ok.gif)가 보이지 않으므로 다른 사진이 필요합니다. 내 "그림"은 유니 코드 문자 인 유니 코드 \270E입니다. 이것은 고 대비 모드에서 작동하지만 일반 모드에서는 유니 코드가 이미지보다 큽니다. 정상적인 (고 대비가 아닌) 모드에서 볼 수 없도록 실제 사진 뒤에 내 "그림"이 있어야합니다. 도움 주셔서 감사합니다. 내가 high contrast mode accessibility.텍스트 뒤에 그림 추가

HCM와 이미지 스프라이트를 실행하는 방법을 묻는 귀하의 질문을 읽고 선택하고있어

a.img-button-edit, 
a.img-button-edit:visited, 
a.img-button-edit:link { 
    width: 28px; 
    height: 20px; 
    display: block; 
    background: transparent url("../Images/buttons/ok.gif") no-repeat top left; 
    background-position: -56px 0px; 
} 

    a.img-button-edit:before { 
     text-align: center; 
     font-size: 1.3em; 
     margin: 0 0 0 0; 
     padding: 0 .2em; 
     content: "\270E"; 
    }

출처

2014-12-22 Raskolnikov

오류 ... z-indext? z-index가 작동하도록'position'을 선언해야합니다. – aahhaa

그럼 실제 질문은 ...? – jbutler483

가상 요소의 내용이 부모 요소 내부의 스택에 삽입됩니다. Z- 색인이 작동하지 않습니다. http : // stackoverflow.com/questions/7822078/z-index-before-pseudo-element – fontophilic

모든 배경 이미지를 제거하고 검은 색 배경에 흰색으로 모든 요소의 색상을 설정합니다. 이는 시력이 약한 사람들에게 유용한 적응 형 기술이며 Chrome 및 기타 접근성 제품군이 약간 다르긴하지만 잘 설정된 운영 체제 수준 설정입니다. 모든 접근성 디자인에서 테스트가 중요합니다.

그래서 어떻게 HCM에서 이미지 스프라이트를 사용합니까?

background-position 값이 서로 다른 단일 이미지가 background-image으로 사용되는 기존 이미지 스프라이트를 사용하는 경우 이미지는 HCM에서 페이지에서 제거됩니다. 이것은 페이지의 가독성을 높이기 위해 설계되었지만 (yore의 타일 된 GIF 배경으로 돌아가서 생각해보십시오.) 이미지가 유일한 인터페이스 인 툴바 나 아이콘 막대에서는 분명히 큰 문제를 만듭니다.

휴대 전화가 노인에게 전화를 걸겠습니까? 2000 년 태어난 사람에게 플로피 디스크가 "저장"되어 있습니까? 다른 문화권은 어떻습니까? ?)하지만 그걸 제외하고 어떻게하면 HCM에 대해 기술적으로 이것을 실행할 수 있습니까?

유니 코드 문자로 이미지를 바꿀 수는 있지만 선택한 방식대로 실행하기가 어렵습니다. 가짜 요소는 z-index과 관련하여 자식 요소로 처리됩니다. Plus, the unicode character is still read aloud to screen readers. 염두에 두어야 할 한 가지 생각은 color: transparent;으로 설정하고 HCM에서이를 검은 색으로 변환하면서 background-image을 제거 할 수 있습니다. 스크린 리더를위한 텍스트를 포함하는 요소와 aria-role="hidden"이라는 이미지를 포함하는 요소가 여전히 필요합니다. 그렇지 않으면 "편집 오른쪽 하단 연필"로 읽습니다.

<a aria-label="edit" class="img-button-edit"><span aria-hidden="true">&#9998;</span></a> 

a.img-button-edit{ 
    color:transparent; 
    width: 28px; 
    height: 20px; 
    display: block; 
    background: transparent url("../Images/buttons/ok.gif") no-repeat top left; 
    background-position: -56px 0px; 
    z-index: 0; 
} 
span[aria-hidden="true"]{ 
    z-index: -1; 
}

지금은 물론, IE8과 서투른 솜씨 것 오래된 '색상 : 투명'또는 '색상 : RGBA (0,0,0,0)'그래서 추가 보험 등 Z- 인덱스를 사용합니다. <img>는 HCM에 의해 그대로 유지되기 때문에

그러나, 당신은 또한이 당신의 전통적인 빈의 자리를 차지할 overflow: hidden;와 <img> 요소를 사용

<a aria-label="edit" class="img-button-edit"><img src="../Images/buttons/ok.gif" aria-hidden="true"></img></a> 

a.img-button-edit{ 
    width: 28px; 
    height: 20px; 
    display: block; 
    overflow:hidden; 
    position:relative; 
    top: -56px; 
}

the <img> sprite as described by Artz Studio. 또는 Yahoo Accessibility Blog의 길을가는 고려할 수 <div> 또는 <span>에서 배경 이미지 스프라이트. 이것은보다 의미 상으로 부팅이 정확합니다. 어쨌든 마크 업에 추가 요소를 추가하지 않는 방법은 없습니다.

출처

2014-12-22 22:18:26 fontophilic

답변

관련 문제