웹 접근성 WAI-ARIA

웹 접근성

웹 페이지의 html에서는 시각장애인들을 위해 
Tab의 조작으로 태그를 이동한 뒤
음성 안내 매세지를 들을 수 있는 기능을 제공한다.



이와 같은 기능들을 웹 접근성이라고 함.


WAI-ARIA

HTML 태그에 추가적으로 
W3C에서는 WAI-ARIA라는 기술로 웹 접근성을 지원한다.


https://www.w3.org/WAI/ARIA/apg/patterns/

디자인 패턴 가이드라인이 있다.


1. html 태그 속성으로 role을 정의하여 html 요소의 역할을 표현한다.
2. aria- 접두사가 붙은 속성으로 스크린리더가 어떤 작용을 할지 표현할 수 있음.

aria-live 속성으로
페이지를 새로고침하지 않고 바뀌는 
동적 변경 사항에 대해서 알려줄 수 있다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

실무진 면접 경험으로 정리하는 백엔드 (1) : 에듀 테크 기업 면접

에듀 테크 기술 면접 시간 내어 이력서를 꼼꼼하게 봐주시고 서류상으로는 회사에서 원하는 background라고 생각해주셔서 느낌이 좋았다. 최근 본 면접들 중 가장 깊이있는 질문을 해주셨고 오답과 대안에 대한 설명도 해주셔서 배워갈 수 있었다. 아쉽게도 합격하지 못했지만 좋은 면접 경험이었기 때문에 다음 면접에서 더 견고한 답변을 위해 정리해보았다. 질문&답변&더 나은 답변 일반 질문 이직 사유? 경영상의 이유로 인한 권고사직, 프로덕트 개발과 프로덕트 피벗 과정의 공백기 회사의 이 직군에 지원하면서 뭘 기대하는지? 거의 혼자서 개발을 해왔는데 다른 관점의 의견을 들을 기회가 없었다. 여러 개발자의 의견을 듣고 내 의견에 태클을 걸며 같이 발전하면 좋겠다. 공백기에 뭐하고 있는지 ?  1. django template과 admin, 그리고 오픈소스 wysiwyg를 사용하여 블로깅 서비스 사이드 프로젝트하면서 풀스택 공부중이다. 2. 현업에서 줄곧 이미 구축된 ci/cd를 사용해오고있었는데 직접 구현을 학습하기 위해 github action workflow를 공부하고 있음.  기술&개발 관련 관리형 서비스를 쓰지 않고 aws ec2를 쓴 이유 ? - 비용문제 vpc 어떻게 설정했나? - production region은 모든 ip에 대해서 열고   development region은 사무실 개발 pc와 사무실 기기들의 ip만 접근가능하도록 함 nginx ssl 적용했다고 하는데, 인증서 뭐 사용했나? - 'let's encrypt'사용했는데 생각이 안나서 대답못함. socketio에는 wsgi or asgi? - wsgi vs asgi 차이점에 대해서 답변함. django vs fast api ? - 동기, 비동기 서버 기반과 기타 feature에 대해서 답변함. - django에서 기본 제공되는 템플릿, admin,ORM과 미들웨어들 - fastapi는 기타 기능들을 따로 붙여서 써야한다고 답변, django도 ...
Read more »

Blogger 커스터마이징 : CSS 수정 (sticky-header)

이미지
sticky-header, centered-top-container sticky animating 삽질1 google blogger의 템플릿 테마중 하나인 Contempo에서는  스크롤을 어느 정도 내린 상태에서 다시 올리면 상단의 검색창이 내려와서 스크롤을 다시 내릴 때까지 유지된다. (이 "어느 정도"에 해당하는 값은  기본 테마의 javascript에 코딩 되어있을 것으로 추측한다.) css 수정 후 이 부분에 문제가 생겨서 내릴때에도 올릴 때에도 계속 검색창이 내려오고 사라졌다를 반복한다. < 페이지 최하단 모습 > 데이터를 색인하여 찾을 때는 유용한 기능이라고 생각하지만 검색 기능은 이미 블로그 최상단에 존재한다. 따라서 해당 기능을 제거하기로 했다. scroll event를 감지하고 그에 따라 html이나 css문서를 수정하는 작업은  javascript가하는 일이다. html 편집기를 통해 코드를 살펴본 결과 이 javascript 코드는 외부 cdn 서버에서 가져오는 것 같다.  javascript 코드를 직접 건드려야되나 싶어서 구글링 해 본 결과 간단하게 css 코드를 수정해서 없앨 수 있었다. sol) sticky-header 제거 https://joshua-dev-story.blogspot.com/2020/04/blogger-remove-sticky-header.html FE, Publishing 에서는 '고정 헤더'라고 부르고 있는 이 태그의 css를 수정하면 된다. display 옵션을 none으로 바꿔서 기존 요소의 block을 전부 없애고 기능까지 해제해버리는 것. 이 sticky header를 보이지 않게하는 방법은 opacity를 0으로 만들거나 visibility를 hidden으로 할 수도 있지만 display : none 옵션이 가장 확실해보인다. 수정 후 여전히 scroll 이벤트에 따라 DOM의 변경이 일어나는 것 같지만 sticky header는 더이상 보이지 않는다. 삽질2...
Read more »

Intel 14th gen CPU의 칩 충돌 사태와 해결 방법

이미지
https://internalize-stride.blogspot.com/2024/10/14th-gen.html 글을 참고. 나도 14세대 인텔 CPU의 구매자고 현재까지 피해를 보고있다. 원인 24년 7월 22일에 인텔이 충돌 문제의 근본 원인을 찾았다고 발표함. 원인은 최소 작동 전압(Vmin)의 이상(불안정성)이며 이로 인해 CPU 품질 저하현상이 나타난다. address incorrect voltage requests to the processor that are causing elevated operating voltage. 잘못된 전압 요청을 프로세서에게 요청하고 이 요청은 높아진 작동 전압을 유발한다. 최소작동 전압 증가. 현상 높은 전압 이벤트는 시간이 지남에 따라 누적될 수 있으며 결국 프로세서를 손상시키고 시스템이 중단되거나 충돌하게 된다. 영향 프로세서 목록   (사진 from 인텔) 대책 바이오스 업데이트에 맞춰 마이크로코드 수정 패치하였다. 최신 마이크로코드 업데이트 0x129에서는 voltage request Vmin를 1.55V 이상으로 높여서 비정상 현상을 겪고있는 프로세서를 방어적으로 완화한다. 패치 후 성능 영향 여부 아스테크니카의 인텔 인용에 따르면 대부분의 경우 패치의 영향을 받지 않을 것이라 했으나 소수의 벤치마크 하위 점수와 개별 게임에서 '보통' 정도의 속도저하가 나타남. 패치 방법 및 제품 보증 소프트웨어 업데이트로 배포되지 않음. 윈도 업데이트 / 제조사 독점 소프트웨어 / 수동 설치를 통해 패치한다. 수동 설치의 경우 제조업체 웹사이트로 가서 패치 파일을 수동으로 다운로드해서 설치. 전압과 관련된 CPU 손상은 돌이킬 수 없기 때문에 빠른 조치가 필요하다. Intel은 대상 품목의 품질보증기간을 2년에서 5년으로 늘렸다. GIGABYTE 마더보드의 경우 패치 방법 내가 쓰고 있는 GIGABYTE 마더보드 기준으로 패치 방법은 다음과 같다. 1. GIGABYTE 홈페이지에서 본인의 마더보드 모델에 맞는 ...
Read more »