어도비 드림위버에서는 접근성이 향상된 웹 콘텐츠를 어떻게 만드는지 가이드 문서가 있을까 해서 찾아보았는데 "Dreamweaver의 액세스 가능성 기능"라는 문서만 있네요. 이건 만들어진 콘텐츠가 아니라 실제 장애인이 드림위버를 사용했을 때 접근성에 대한 이야기라서...
https://helpx.adobe.com/kr/dreamweaver/using/dreamweaver-accessibility.html
그래서 검색으로 찾은 것 중 비슷한 내용을 번역했습니다(물론 이것도 드림위버 사용자와 웹콘텐츠 사용자의 관점이 섞여 있긴 합니다. 가이드 라인이라고 하기에는 너무 내용이 간략하네요. 결론적으로는 너 혼자 하기 힘드니 서드파티 솔루션을 사용해 뭐 이런 내용이군요). 아마도 이 글을 보는 것보다 이 글을 작성한 시점보다 좀 더 나아진 기계번역의 힘을 빌리는 것이 좀 더 좋은 방법이라 생각됩니다.
Anthony Tait, Hina Ilyas
March 25, 2022
원본: https://www.accessibilitychecker.org/blog/dreamweaver-accessibility/
드림위버를 사용하면 다양한 환경에서 풍부한 기능을 가지고 눈길을 사로잡는 사이트를 만들 수 있습니다.
드림위버의 유연한 HTML, CSS, 자바스크립트 코딩 기능과 미리 만들어진 템플릿은 개발자들이 자주 사용하는 기능 중 일부에 불과합니다.
드림위버는 크리에이티브 스위트의 일부이므로 사이트를 더욱 풍성하게 만들기 위한 다양한 에셋을 사용할 수도 있습니다.
하지만 드림위버가 인상적인 만큼 개발자는 장애인을 포함한 모든 사용자가 콘텐츠에 접근할 수 있는지 여부를 고려해야 합니다. 그러기 위해서 이 가이드를 꼭 참고하세요.
드림위버의 접근성 기능
좋은 소식은 드림위버가 이런 유형의 접근성 기능을 지원하는 몇 안되는 도구 중 하나이며 다른 경쟁 제품과 차별화되는 점이기도 합니다.
다음 목록은 드림위버에서 지원하는 주요 접근성 기능 중 일부입니다.
스크린 리더 지원
일부 온라인 사용자는 이미지 설명, 비디오 대본, 폼 필드 라벨처럼 페이지의 텍스트와 기타 정보를 이해하기 위해 스크린 리더가 필요합니다. 드림위버 사용자는 화면 설계 프로세스에서 스크린 리더 기능을 사용할 수 있습니다. 윈도우 운영체제용 JAWS와 Window-Eyes 제품을 지원합니다.
키보드 탐색
마우스 대신 키보드를 사용해 웹사이트를 탐색하는 사용자를 위해 드림위버는 키보드 탐색도 지원합니다. 키보드만으로 모든 웹페이지를 조작할 수 있게 콘텐츠를 구성할 수 있습니다.
또한 눈에 보이는 키보드 포커스와 적절한 탭 순서를 통합해 키보드 함정을 방지합니다.
운영체제 접근성 지원
드림위버의 접근성 기능은 윈도우, 맥 운영체제 모두 적용됩니다. 드림위버 사용자는 그들의 필요에 따라 색상 설정을 조정하고 코드, 디자인 뷰에 접근해 페이지를 수정할 수 있습니다.
드림위버로 접근성 높은 웹사이트를 만들기 위한 유용한 팁
드림위버에서 만든 콘텐츠가 ADA를 준수하는 것은 다른 도구에 비해 간단합니다. 하지만 기본적인 접근성 기능을 제공하더라도 개발자는 WCAG 지침을 숙지하고 준수하는 것이 좋습니다.
다음은 도움이 될 만한 몇 가지 팁입니다.
대화 상자 활성화
드림위버의 대화 상자는 화면 디자인 프로세스에서 접근성 요구사항을 확인할 수 있게 지원합니다(* 특정 컴포넌트 배치 시 접근성 관련 속성값을 체크할 수 있게 대화 상자가 구현되어 있다는 의미인 듯합니다).
페이지 제목 추가
사용자와 스크린 리더가 이해할 수 있게 고유하고 간결한 페이지 제목이 필요합니다. 이는 SEO에도 도움이 됩니다.
올바르게 헤더 구성하기
사이트를 이해하기 쉽게 만들려면 적절한 헤더 태그를 올바른 순서로 사용하는 것이 중요합니다(H1, H2, H3, H4 등).
이미지에 대체 텍스트 설정하기
보조 기술은 텍스트가 아닌 요소에 대한 정보도 필요하므로 이미지에 대체 텍스트를 추가하는 것이 중요합니다. 특히 이미지가 콘텐츠 내에서 더 많은 맥락 정보를 가지고 있는 경우 더욱 중요합니다.
폼에 라벨 설정하기
폼은 모든 사용자가 작성 방법을 알 수 있도록 확인해야 하는 중요한 요소입니다.
링크에 대한 설명 추가하기
텍스트를 링크할 때 텍스트에 링크를 연결하는 대상을 명확하게 설명해야 합니다. "여기를 클릭하세요(Click Here)" 같은 텍스트는 모호한 설명의 대표적인 사례입니다.
HTML5 섹션 요소를 활용하세요
Header, Navigation, Main, Aside, Article, Section, Footer 같은 섹션 요소를 드림위버에서 추가할 수 있습니다. 이런 요소는 스크린 리더에서 페이지 영역을 식별하고 탐색하는 데 도움이 됩니다.
드림위버 접근성을 위한 서드파티 솔루션 사용하기
접근성을 위해 사이트를 변경하는 것이 힘들거나 이에 들어가는 시간과 비용을 절약하려는 목적으로 여러 서드파티 솔루션을 사용할 수 있습니다.
이런 솔루션은 접근성 프로세스를 자동화하며 일부 솔루션은 수동으로 세부적인 제어도 지원합니다.
이런 도구들은 코드 한 줄 추가하는 것만으로 접근성을 향상시킬 수 있습니다.
가장 인기 있는 옵션은 accessiBe이지만 UserWay, Essential Accessibility, EqualWeb 같은 도구도 추천합니다(* 이 글의 목적은 아마도 accessiBe를 홍보하기 위함이 아닌가 싶긴 합니다만).
* 흥미롭게도 accessiBe에서는 몇 년 사이 AI 기능을 활용해 접근성을 향상시키는 노력을 하고 있습니다. 아무리 개떡같이 만든 웹사이트라고 하더라도 알아서 사이트 구조를 파악하고 접근성을 향상시키는 기능을 탑재했다고 합니다.
https://accessibe.com/accesswidget/artificial-intelligence 참고.
마무리
드림위버에서 웹 사이트를 개발할 때 접근성은 필수적인 고려 사항입니다. 특히 모든 사용자에게 보다 포괄적인 경험을 제공하고 많은 비용이 들어가는 배상이나 소송을 피하려면 더욱 그렇습니다.
다행히도 드림위버의 접근성 기능과 서드파티 솔루션을 사용하면 프로세스를 간소화할 수 있습니다.
접근성 검사기에서 테스트를 수행하고 드림위버로 만든 웹사이트의 접근성 수준을 확인하세요.
