Ajax는 스크린리더기에 어떻게 읽기나요..?

[hiphapis]

유효성검사는, 제대로 테스트가 안되네요..
http://validator.w3.org/check?uri=http% ... lendar.php
결국에, Process 파일 하나씩 때서 검사를 받아야 할 것 같은데..

Ajax 이놈이 스크린리더기에서는 어떻게 될지 궁금하네요..
스크린리더기에 않읽히면, 구지 Ajax로 만들 이유가 없을것같네요..
스크린리더기기 제대로 읽이게 할려고, 표준화 지키면서 Coding 했는데 ㅠ,.ㅠ


아직, 완성된건 아니고, 이제 DB연동만 시키면 되는데..,
스크린리더기의 반응이 없다면..
중도하차할것 같네요, ㅎㅎ;


http://210.118.153.182/Ajax/Calendar.php

[eouia]

현재까지는 힘들거라 봅니다.
"브라우저의 출력결과"를 읽는 것이 아닌, "HTML코드"를 읽어주는 TTS라면 당연히 안될테구요.
몇몇 TTS 소프트웨어는 화면상의 이벤트메시지를 받아 포커싱을 합니다만, 브라우저 안에서 소리소문없이 움직이는 javascript로 변경된 컨텐츠에 대해서는 접근할 방도가 없을 것 같네요.

[hiphapis]

그렇군요, 아버지가 장애인이시라서..
사명감같은걸 같고 했는데, 그럴 이유가 사라져버렸네요..

[hiphapis]

원래 Ajax는 특성상,
페이지뒤로가기, 및 앞으로 가기는 생기지 않지만,
강제적으로, History를 남기게 할 수 있는데..

그렇게 한다면 어떻게 될까요..?

[eouia]

그보다 근본적인 것을 생각해보죠.
제가 코딩을 할 때의 원칙은 이렇습니다.

1. JavaScript와 CSS가 아예 없이 순수하게 동작할 수 있는 HTML코드를 만듭니다. onclick같은 이벤트트리거도 아예 사용하지 않고 순수 HTML과 서버사이드스크립트만으로 동작하도록 만듭니다.
대개의 AJAX경우 페이지 리로딩하지 않는 것이 목적이기 때문에, 반대로 페이지리로딩을 해서라도 AJAX없이 동등한 기능을 구현할 수 있습니다. 물론 WYSIWYG에디터라든가 드래그앤드롭 등은 아예 안되겠지만, WYSIWYG에디터대신 textarea를 쓰고, drag&drop대신 버튼이나 체크박스 등을 몇개 추가해서 수동으로 동등한(동일한이 아닌..) 기능을 제공합니다.

2. CSS를 써서 디자인을 입힙니다.

3. 외부 JavaScript를 만들고 <script src="">로 연결합니다.

4. 외부 JavaScript에서는

Code: Select all

window.onload=init;
var DD = new DragDropObject();

function init() {
changeTextarea2WYSIWYGEditor();
document.getElementById("btn_some_button").onclick = doSomething;
DD.init();
...
}
...

이런 식으로 문서가 로딩된 후 동적으로 바꿔치기를 해줍니다.

5. JavaScript를 통해서 동적으로 페이지가 변경되면 그에 맞춰 CSS를 손봐줍니다.



대개의 경우 접근성의 확보는 JavaScript와 CSS가 없어도 무리없이 동작하고 사용할 수 있으면 됩니다. 만약 JavaScript를 제대로 해석하지 못하는 장치(TTS같은)라면 1번단계에서 Script가 먹지 않은 상태이므로 사용하는데 지장이 없을 것입니다.
입출력디바이스가 특별한 경우라서 onclick같은 이벤트가 제대로 작동하지 않거나 CSS가 제대로 지원되지 않는 경우에도 HTML만 제대로 보일 수 있다면 역시 1번단계만 적용된 상태로 불편없이 이용이 가능합니다.

물론 JavaScript와 CSS가 제대로 먹는 환경이라면, 추가된 JavaScript로 인해 페이지가 바뀌게 되므로 문제없이 마음껏 JavaScript를 써서 다이내믹한 구현을 해도 됩니다.

이상은 TTS의 경우 기존브라우저 대신 일종의 음성브라우저역할을 하는 TTS의 경우에 대처하는 방법입니다. 여기까지는 웹 개발자의 책임이고...
브라우저와는 별개로 OS 차원에서 이용되는 TTS라면, 동적으로 변화하는 브라우저창안의 내용을 제대로 읽어줄 수 있도록 하는 것은 더이상 웹 개발자가 책임질 문제가 아니라 OS벤더와 TTS제작자쪽에서 책임져야 할 문제이니 신경쓰지 않으셔도 될 것입니다.



개인적으로 AJAX를 포함한 JavaScript는 "보너스"라고 생각합니다. 물론 웹문서가 아닌 웹서비스로서의 RIA는 계속 발전해야합니다. 만약 누군가가 청각장애인은 쓸 수 없으므로 웹에서 작동하는 음악작곡서비스는 접근성이 나쁘다고 말한다면 잘못된 지적입니다.(한때는 정말 이런 문제 때문에 접근성/표준화에 대해 심각한 회의를 가졌었습니다.)
그러나 이렇게 목적과 타겟이 명확한 웹서비스만이 웹의 전부는 아니지요. 따라서 웹은 1차적으로 누구나 어떠한 환경에서도 이용할 수 있도록 HTML만으로 의미가 통해야하며, 그 조건이 충족된 전제하에, 더 나은 서비스를 위해 JavaScript는 부가적으로 덧붙어야 한다고 봅니다.

[eouia]

덧붙여서 올려주신 페이지의 경우, 사실 굳이 AJAX를 쓰지 않아도 구현될 수 있습니다. Calendar.php?day=060208 식의 고전적인 방식을 써도 되는 페이지지요.
따라서 가장 좋은 것은, 위와 같은 url에 따른 페이지별 방식을 기본으로 하면서도, javascript가 동작하는 환경에서는 javascript를 이용해서 AJAX서비스를 제공할 수 있도록 하나의 HTML로 출력하는 것입니다. javascript가 안되는 환경이라면 옛날처럼 링크와 url로 네비게이션해도 서비스를 이용할 수 있고, javascript가 되는 환경이라면 AJAX로 멋진 UX를 제공하는 서비스를 주면 좋겠지요?

[eouia]

방금 말씀드린 것과 유사하게 만든 샘플들입니다.
브라우저에서 javascript 사용옵션을 켰을 때와 껐을 때로 각각 확인해보시기 바랍니다.

게시판 페이징 http://css.macple.com/forum/showthread.php?t=333 ( http://eouia0.cafe24.com/temp/ajax_or_d ... ation.html )

멀티탭폼 http://css.macple.com/forum/showthread.php?t=319 'http://eouia0.cafe24.com/temp/css_multitab/index.html )

[hiphapis]

eouia님, 정말 감사합니다 (__)
염치 불구하고, 힌트 하나 더 부탁드릴께요

말씀하신것 처럼, 자바스크립트의 작동여부에 상관없이, 모두 안정적으로 표현을 한다고 할 경우..

지금 저 페이지처럼..
Ajax로, 별도의 페이지를 통채로 로딩하는 경우에는.
결국에는 2개의 페이지를 만들어야 하는건가요..?
흠..제가 봐도, 무슨말인지 잘 이해가 안되네요..


지금, 저 링크의 구조는

• Calendar.html
  • - 기본적인 레이아웃
    - Ajax를 호출하는 스크립트
  Process.php
  • - 달력을 그리는 부분.
    - 모든 링크가 Ajax를 이용하는 링크
  Content.php
  • - 일정, 메모, 다이어리 등등 컨덴츠를 그리는 부분.
    - 모든 링크가 Ajax를 이용하는 링크
  Calendar.js
  • - Ajax 스크립트
  css.css
  • - css

이런형식인데..

Calendar.html 안에 Process.php 와, Content.php를 Require하는 형식으로 만든다음, onLoad 를 이용해서 Ajax를 불러오는 형식으로 한다면..
말씀하신대로 구현은 되겠지요..

그런데, 위와 같은 형식에서 JavaScript가 동작을 안하는 상황이라면, Process.php와, Content.php의 링크들이 제대로 작동을 안하겠죠..(Ajax를 호출하는 링크이므로)
결국, 말짱황이 되는건데...

그렇다면, 결국 링크를 수정한 Process`.php, Content`.php 같은 파일을 만들고
Calendar.html 에서는 기본적으로 Process`.php, Content`.php 를 Require(Include)하고, onLoad에서 Ajax를 호출하는 형식으로 해야 하는거 같은데..

이 방법밖에 없는건가요..


PS> 홈페이지에 유익한 정보 많네요, 북마크추가~! ㅎㅎ

[eouia]

처음에는 별도의 페이지를 만든다고 생각하고 접근해보세요. (new_Calendar.php)


AJAX를 쓰지 않고 어떻게 구현되겠습니까?
Process.php와 Content.php의 경우, AJAX Server이므로 php에서도 규칙에 맞게 호출하면 값을 돌려줄 것입니다.
fsockopen 이라든가, url_fopen이 걸려있다면, file_get_contents()같은 함수로도 new_Calendar.php에서 Process.php와 Content.php의 실행결과 받아올 수 있겠죠.

소스를 보지 않아 어떻게 작성되어있는지는 모르겠습니다만,
"정상적"인 AJAX 서버라면 "XML" 혹은 "Text"로 값을 돌려받은 후, Calendar.html의 AJAX 리스너에서 받은 데이터를 파싱해 화면에 렌더링시켜주겠죠.
(지금 약간 걱정되는 것이, Process.php와 Content.php에서 돌려주는 값이 "렌더링된 결과"를 바로 돌려주도록 만드신게 아닌가 합니다. 이런 경우 범용성이 떨어지기에 권장되는 방법이 아닙니다. Process.php와 Content.php는 렌더링결과가 아닌 렌더링을 위한 기본데이터를 돌려주는 쪽이 좋을 것입니다.)

Calendar.html이 Process.php와 Content.php를 호출(XMLHTTPREQUEST)하고 그 결과를 받아 화면을 렌더링(obj.innerHTML='...' or createElement(something) or 기타 다양한 방법들로...)한다면,
new_Calendar.php는 Process.php와 Content.php를 호출(file_get_contents(), fsockopen(), fopen() ...)하고 그 결과를 받아 화면을 렌더링(echo "")하면 되겠죠.

이때 new_Calendar.php의 렌더링 결과에 javascript를 추가해서 Calendar.html의 소스코드와 동일해지도록 작성해주면 될 것 같습니다.

[hiphapis]

1. JavaScript와 CSS가 아예 없이 순수하게 동작할 수 있는 HTML코드를 만듭니다. onclick같은 이벤트트리거도 아예 사용하지 않고 순수 HTML과 서버사이드스크립트만으로 동작하도록 만듭니다.

그러시다면, javascript를 써야하는경우..예를 들면, 글쓰기시 폼검사같은것들은..
어떻게 링크를 정의하시죠..?

이때 new_Calendar.php의 렌더링 결과에 javascript를 추가해서 Calendar.html의 소스코드와 동일해지도록 작성해주면 될 것 같습니다.

으, 무슨말씀이신지 모르겠어요.


일단, javascript를 disable 시켜도 나오도록 수정을 했습니다.


우측 Content 영역, Ajax에서의 구현은 벌써부터 버벅대네요..
제 컴터에, 지금 메모리리소스가 부족해서 그럴 수 도 있겠지만요.
지금 Memo쪽만 DB연동시켯는데, Memo만 반응이..;;
->알고 보니, 문제는 다른부분이었네요;;

Ajax, 표준화 공부하는 샘 치고 만든거지만..
역시, 이런걸 Ajax로 만든다는건 낭비네요..

[hyeonseok]

그러시다면, javascript를 써야하는경우..예를 들면, 글쓰기시 폼검사같은것들은..
어떻게 링크를 정의하시죠..?

javascript 폼검사는 옵션입니다. 데이터 무결성을 위해서 서버사이드에서 하는게 필수 사항이죠. 그러니까 "javascript를 써야하는 경우"라는 것은 없습니다.

[hiphapis]

현석님 :: 답변 감사합니다 (__)

하지만, 제가 다른예를 들어볼께요..

bugs 같은곳에서는
음악을 듣기위해서는, Javascript를 실행할 수 밖에 없습니다.
이런경우는 어떻게 생각해야 할까요..?

제가 궁금한건,
다른분들은, Javascript를 어떻게 호출하는지 궁금한거에요..
단순히, 폼검사같은건 옵션으로 갈 수 있지만..
Javascript로 뭔가를 실행해야 하는 경우는..
어떻게 처리를 해야 될까요..?

[hyeonseok]

현석님 :: 답변 감사합니다 (__)

하지만, 제가 다른예를 들어볼께요..

bugs 같은곳에서는
음악을 듣기위해서는, Javascript를 실행할 수 밖에 없습니다.
이런경우는 어떻게 생각해야 할까요..?

제가 궁금한건,
다른분들은, Javascript를 어떻게 호출하는지 궁금한거에요..
단순히, 폼검사같은건 옵션으로 갈 수 있지만..
Javascript로 뭔가를 실행해야 하는 경우는..
어떻게 처리를 해야 될까요..?

음악을 듣기 위해서는 object태그를 사용하고 type과 data속성을 정확히 명시해 주면 됩니다. URL기반으로 페이지 리로드 하면서 <a>태그 써서 기능을 구현할 수 있습니다. 물론 javascript를 사용할 수 없는 경우에는 아마 음악도 들을 수도 없는 환경이겠지만 아무튼 구현은 javascript없이 가능합니다. 대부분의 경우 javascript가 필수인 경우는 없습니다.

javascript가 반드시 필요한 경우는 이미 웹이 아니고 그러한 상황에서는 어느정도까지 접근성을 보장해 줄지를 판단하는 과정이 필요하겠지요. 하지만 중요한 것은 javascript를 사용하지 않고도 작동 될 수 있는 기능을 javascript 오용으로인해서 접근성을 해치지말아야 한다는 것입니다.

페이지 리로드와 URL기반으로 접근성 높게 설계를 하고 UI를 위해서 이러한 페이지 리로드를 막고 서버와 직접 통신하는 것이 Ajax입니다. 그냥 화려한 UI와 비동기 통신한다고 Ajax가 아닙니다. 외국의 Ajax들은 - 아닌 경우도 있지만 - 상당한 경우 접근성에 신경을 써서 javascript가 작동하지 않는 경우에도 쓸 수 있게 만드는 것이 많습니다. 자연스럽게 박수를 보내게 되지요. 걱정하시는 스크린 리더의 경우도, 일단 스크린리더들은 html 파싱을 기반으로 하고 있기 때문에 javascript없이 html만드로 페이지를 이용할 수 있게 하는 것이 중요합니다. 그리고 이렇게 페이지를 만들면 그 다음은 스크린리더가 할일입니다.

딴얘기지만 그래서 태터 1.0의 Ajax는 전혀 감동이 없습니다. 일단 화면이 안이쁘고, javascript끄면 아무것도 할 수 없습니다. 웹이기를 거부한 것이지요.

[hiphapis]

현석님 :: 좋은글 감사합니다

단순이 음악듣는것이 나이라..DRM이 걸려있는지 특수한 파일을 재생해야 되는 경우죠..
이런 DRM때문에, ActiveX를 써야 한다면, 결국엔 어쩔 수 없이 Javascript를 써야 하지 않을까요..?
(비슷한 경우가, 공인인증서 같은것이 될 수 있겠네요..)

애시당초, 개발을 시작할때, 이러한 접근성에 대한 문제를 했다면 상관이 없겠지만..
이미, 개발이 완료되어있는 상태고, 재개발하기에 무리가 있다면,,
어쩔 수 없는 상황이겠죠..?

점점 얘기가 삼천포로 빠지는것 같네요..



제가 위에 링크건것은, javascript가 없을때도 되도록, 몇시간전에 손을 봐 놨습니다.
한번, 검증해보시고..따끔한질책과 함께, 저도 칭찬해주세요
(웃자고 한소리에요 )


eouia님 :: 그렇다면, FLEX도 마찬가지로, 스크린리더에서 무용지물이겠군요..

[hyeonseok]

javascript로 뭔가를 실행해야 할 때라...그런 경우가 있죠.

우선 생각해 볼일은 javascript없이 구현이 가능한가 입니다. 대부분의 경우 <a>태그와 변수 몇개, 서버측 스크립트로 구현이 가능합니다.

javascript가 단순 UI용이라면 크게 신경을 안써도 됩니다. 브라우져 테스트로 javascript에러가 없는지만 체크하면 되겠죠. 어짜피 핵심 컨텐츠는 코드에 다 있기 때문에 브라우져 호환성만 지켜주면 javascript가 접근성을 해치지 않는 경우 입니다.

javascript로 active-x를 구동하는 경우, 이경우도 javascript가 접근성을 해치지는 않습니다. 어짜피 미니멈 사용자 환경이 MS Windows와 IE 이니까요. 이건 javascript가 문제가 아니라 Active-x없이 대체 컨텐츠를 제공 할 수 있는가를 고민해야 할 것입니다.

어렵게 생각할 경우 없이, html페이지만 가지고 http로 서버와 통신할 때 페이지를 사용할 수 있으면 좋은 거고 없으면 접근성이 떨어지는 것입니다.

[hiphapis]

아, 제가 사소한 오해를 하고 있었네요..
Javascript없이, 구현해야 한다는 생각을 하다보니..
Javascript === Evil 이라고, 순간 착각을 했네요..


그래서, "Javascript로 뭔가를 실행을 해야할때가 있는데, 이럴땐 어떻해 해야 하지.?" 라고 생각을 하게 된거죠.


이제 오해가 싹 사라지고, 뭔가 개안이 된듯한 느낌이 드네요..

하지만 중요한 것은 javascript를 사용하지 않고도 작동 될 수 있는 기능을 javascript 오용으로인해서 접근성을 해치지말아야 한다는 것입니다.

말씀 무척 공감이 갑니다.



좋은 말씀 정말 감사합니다

[advck1123]

[quote="hiphapis"]유효성검사는, 제대로 테스트가 안되네요..
http://validator.w3.org/check?uri=http% ... lendar.php
결국에, Process 파일 하나씩 때서 검사를 받아야 할 것 같은데..

Ajax 이놈이 스크린리더기에서는 어떻게 될지 궁금하네요..
스크린리더기에 않읽히면, 구지 Ajax로 만들 이유가 없을것같네요..
스크린리더기기 제대로 읽이게 할려고, 표준화 지키면서 Coding 했는데 ㅠ,.ㅠ


아직, 완성된건 아니고, 이제 DB연동만 시키면 되는데..,
스크린리더기의 반응이 없다면..
중도하차할것 같네요, ㅎㅎ;


[url]http://210.118.153.182/Ajax/Calendar.php[/url][/quote]
두 스크린리더로 테스트 해 보았는데요..
어제의 경우엔 일정관리나 메모 등의 검색이 아예 되질 않았으나,
방금전의 경우 검색이 원활히 잘 되네요..
새로운 기술인가요? 여튼, 신기하네요..~~
그런데, 그리 접근하기가 쉬운 것 같지는 않은듯 하네요..

[hiphapis]

두 스크린리더로 테스트 해 보았는데요..
어제의 경우엔 일정관리나 메모 등의 검색이 아예 되질 않았으나,
방금전의 경우 검색이 원활히 잘 되네요..
새로운 기술인가요? 여튼, 신기하네요..~~
그런데, 그리 접근하기가 쉬운 것 같지는 않은듯 하네요..

허걱, 정말 감사합니다
잘 된다니 다행이네요, 오늘 eouia님과 이 글로 대화나누면서,
Javascript가 Disable 되었을때도, 구동되도록 수정을 해주었거든요..
아마, 그것으로 되는것 같네요

그리고, 아무래도, UI적인 구조상, 접근하기에 쉽지는 않겠죠..?
이걸, 서비스할려고 만든게 아니라, 스터디 할려고 만든것이라..ㅎㅎ

테스트 해주셔서 정말 감사합니다!!