웹사이트를 대화하기 쉽게 만들기

화면이 없는 웹사이트는 제대로 들리지 않습니다. 페이지가 없는 책이나 핸들이 없는 자동차처럼. 그러나 오디오북, 핸즈프리 차량이 있습니다. 그리고 점점 더 많은 웹사이트가 최소한 사람이 보지도 않고 사용하고 있습니다.

전화 비서 및 가정용 스피커는 인터넷 생태계의 성장 부분입니다. 이 기사에서 나는 이것이 웹사이트에 앞으로 무엇을 의미하는지, 디자이너가 이에 대해 무엇을 할 수 있는지, 그리고 이것이 마침내 접근성을 향한 도약이 될 수 있는 이유를 분석하려고 노력할 것입니다. 웹의 3분의 2 이상이 시각 장애가 있는 사용자가 액세스할 수 없습니다. 이제는 웹사이트를 대화하기 쉽게 만들어야 할 때입니다.

홈 스피커의 침략

2019년 전 세계 스마트 스피커 판매량은 1억 4,700만 대를 돌파했으며 팬데믹 또는 팬데믹이 없는 추세입니다. 결국, 말하는 것이 타이핑보다 빠릅니다. Google Home에서 Alexa, 스마트폰 도우미, 자동차, 심지어 냉장고에 이르기까지 점점 더 많은 사람들이 프로그램을 사용하여 대신 웹을 검색하고 있습니다.

다소 불길한 Big Brother Inc가 이러한 추세를 암시한다는 점을 제외하고 수억 명의 사람들이 실제로 웹을 보지 않고 이미 매일 웹을 탐색하고 있다고 말하는 것이 안전합니다. 화면은 더 이상 웹 브라우징에 필수적이지 않으며 사이트는 이 새로운 현실에 적응해야 합니다. 그렇지 않은 사람들은 수억 명의 사람들과 단절되고 있습니다.

개발자, 디자이너 및 작가 모두 자신의 작업이 전혀 보이지 않거나 클릭되지 않을 가능성에 대비해야 합니다.

"

투명함을 디자인하다

웹사이트 대화 주제에는 기술과 언어라는 두 가지 주요 갈래가 있습니다. 기본 콘텐츠 구조에서 의미론적 마크업 및 그 이상에 이르기까지 문제를 해결하는 기술부터 시작하겠습니다. 나는 누구처럼 좋은 글을 쓰고 싶지만, 시작하는 곳이 아닙니다. Daniel Day-Lewis 공연에 합당한 웹사이트 카피를 가질 수 있지만, 적절하게 배열되고 표시되지 않으면 누구에게도 그다지 가치가 없을 것입니다.

오래된 기초

웹사이트가 보이지 않고 이해된다는 아이디어는 새로운 것이 아닙니다. 스크린 리더는 수십 년 동안 사용되어 왔으며 사용자의 3분의 2가 음성을 출력으로 선택하고 마지막 3분의 1은 점자를 선택합니다.

이 기사의 초점은 이것보다 더 많지만 웹사이트를 화면 판독기 친화적으로 만드는 것은 아래의 더 멋진 것들을 위한 견고한 기반을 제공합니다. 다른 사람들이 이 주제(아래 링크)에 대해 광범위하게 썼기 때문에 이에 대해 너무 오래 머뭇거리지 않겠지만 다음은 항상 생각해야 할 사항입니다.

• 페이지 내 및 사이트 전반에 걸친 명확한 탐색.
• DOM 구조를 시각적 디자인에 맞춥니다.
• 이미지에 대체 텍스트가 필요하지 않은 경우(예: 배경인 경우) 16단어 이하의 대체 텍스트 에는 대체 텍스트가 아닌 비어 있는 대체 텍스트가 있습니다.
• 설명 하이퍼링크.
• '콘텐츠 링크로 건너뛰기'.

시각적 사고는 실제로 많은 디자인 실패에 대해 우리를 눈멀게 합니다. 사용자는 스스로 조각들을 조립할 수 있고 종종 그렇게 하지만 기계가 읽을 수 있는 웹사이트에는 그다지 도움이 되지 않습니다. 웹사이트를 대화하기 쉽게 만드는 것은 먼저 텍스트 음성 변환(TTS) 친화적으로 만드는 것부터 시작됩니다. 이는 좋은 습관이며 접근성을 크게 향상시킵니다. 승리 승리.

TTS 디자인 및 접근성에 대한 추가 정보

• W3C의 텍스트 음성 변환
• Front End North Pt 2: Leonie Watson이 내 마음을 사로 잡았습니다.
• AWS를 통한 TTS(1부)
• TTS(Text-To-Speech) 및 AWS로 다시 돌아가기(2부)
• 클라이언트 렌더링 접근성에 대한 참고 사항
• W3C의 라벨링 컨트롤
• Mozilla의 aria-label 속성 사용
• 나는 스크린 리더를 사용하여 하루 동안 웹을 사용했습니다
• 전문가로부터: COVID-19 동안의 글로벌 디지털 접근성 개발

더 멋진 물건

강력한 기반을 마련하는 것 외에도 스크린 리더 및 접근성을 위한 디자인은 그 자체로도 좋습니다. 먼저 언급할 이유가 충분합니다. 그러나 이 글의 시작 부분에서 언급한 '핸즈프리' 브라우징의 증가를 제공하지는 않습니다. 음성 사용자 인터페이스 또는 VUI. 이를 위해 시맨틱 마크업을 파헤쳐야 합니다.

웹사이트를 대화하기 쉽게 만든다는 것은 훨씬 더 세분화된 수준에서 콘텐츠에 레이블을 지정하는 것을 의미합니다. 사람들이 홈 어시스턴트에게 최신 뉴스나 요리법, 또는 그 식당이 화요일 밤에 열리는지 물어볼 때 음성으로 웹사이트를 탐색하고 싶지 않습니다. 그들은 정보를 원합니다. 지금. 그렇게 하려면 웹사이트의 정보에 명확하게 레이블을 지정해야 합니다.

나는 올해 Semantic Web 토끼 구멍에 빠졌고 여기에서 반복할 생각이 없습니다. 웹은 기계가 읽을 수 있는 것을 열망할 수 있고 열망해야 하며 여기에는 대화가 포함됩니다.

이를 위한 시맨틱 마크업이 이미 존재합니다. 하나는 '텍스트 음성 변환에 특히 적합한' 웹 페이지 부분을 강조 표시하는 현재 베타 버전인 Schema.org 속성인 'speakable'이라고 합니다.

예를 들어, 나와 두 친구는 취미로 일주일에 한 번 앨범을 검토합니다. 우리는 최근 시맨틱 마크업이 통합된 웹사이트를 재설계했습니다. 다음은 페이지의 구조화된 데이터 중 스피어블이 작동하는 모습을 보여주는 부분입니다.

 { "@context": "https://schema.org", "@type": "Review", "reviewBody": "It's breathless, explosive music, the kind of stuff that compels listeners to pick up an instrument or start a band. Origin of Symmetry listens like a spectacular jam — with all the unpolished, patchy, brazen energy that entails — and all in all it's pretty rad, man.", "datePublished": "2015-05-23", "author": [ { "@type": "Person", "name": "Andre Dack" }, { "@type": "Person", "name": "Frederick O'Brien" }, { "@type": "Person", "name": "Andrew Bridge" } ], "itemReviewed": { "@type": "MusicAlbum", "name": "Origin of Symmetry", "@id": "https://musicbrainz.org/release-group/ef03fe86-b54c-3667-8768-029833e7e1cd", "image": "https://alpha.audioxide.com/api/images/album-artwork/origin-of-symmetry-muse-medium-square.jpg", "albumReleaseType": "https://schema.org/AlbumRelease", "byArtist": { "@type": "MusicGroup", "name": "Muse", "@id": "https://musicbrainz.org/artist/9c9f1380-2516-4fc9-a3e6-f9f61941d090" } }, "reviewRating": { "@type": "Rating", "ratingValue": 26, "worstRating": 0, "bestRating": 30 }, "speakable": { "@type": "SpeakableSpecification", "cssSelector": [ ".review-header__album", ".review-header__artist", ".review-sidebar__summary" ] } }

따라서 누군가가 홈 스피커 어시스턴트에게 Audioxide 가 Muse의 Origin of Symmetry 에 대해 어떻게 생각했는지 묻는다면 speakable은 앨범 이름, 아티스트 및 리뷰의 한입 크기 요약으로 안내해야 합니다. 편리하고 요점에. (그리고 사람들이 우리의 전체 요약을 듣는 수고를 덜어줍니다.) 이전에 없었던 것은 없습니다. 제대로 표기되어 있을 뿐입니다. CSS 클래스를 선택하는 것으로 충분하다는 것도 알게 될 것입니다. 쉬운.

이러한 종류의 기능은 다른 사이트보다 특정 유형의 사이트에 더 적합하지만 가능성은 무궁무진합니다. 요리법, 뉴스 기사, 티켓 구매 가능 여부, 연락처 정보, 식료품 쇼핑 등 우리가 웹사이트를 대화하기 쉽게 만드는 습관을 들이기만 하면 모든 페이지에 명확하게 구조화되고 레이블이 지정된 정보가 준비되어 있고 대기 중입니다. 질문에 답하기 위해.

그 외에도 Google 및 Mozilla와 같은 곳의 큰 두뇌는 전용 웹 음성 API에서 열심히 일하고 있어 양식 및 컨트롤과 같은 항목과의 보다 정교한 사용자 상호 작용을 허용합니다. 이와 같은 기술의 초기 단계이지만 절대적으로 주시해야 할 사항입니다.

가정용 스피커의 부상은 이전 세계와 새로운 세계가 충돌하고 있음을 의미합니다. 하나를 제공하는 것은 다른 하나를 제공합니다. 웹사이트는 수십 년 동안 스크린 리더용으로 설계되어 왔다는 사실을 잊지 마십시오.

추가 읽기

• 말하는 웹 앱 — Speech Synthesis API 소개
• Mozilla의 웹 스피치 개념 및 사용법
• 음성 사용자 인터페이스란 무엇입니까? 인터랙션 디자인 재단에서

말하기 쓰기

귀하는 화면 판독기, 검색 엔진 및 기타 모든 유용한 기능이 귀하의 웹사이트를 더 잘 이해할 수 있도록 조치를 취했습니다. 축하합니다. 이제 우리는 어조와 성격의 모호한 주제에 도달합니다.

웹사이트를 말하는 것과 읽을 수 있도록 디자인하는 것은 다릅니다. 사용자 상호 작용의 특성은 다릅니다. 명심해야 할 주요 사항은 음성 쿼리와 관련하여 웹 사이트는 거의 항상 반응적이라는 점입니다. 질문에 답하고, 레시피를 제공하고, 주문을 확인합니다.

Open NYT 연구에 따르면 가정용 사용자의 경우 '스마트 스피커와 상호 작용하는 것이 때때로 실망스럽거나 심지어 웃기는 대화로 이어지지만 알림을 푸시하는 전화에 묶여 있는 것보다 더 나은 경험처럼 느껴집니다.'

즉, 문제를 강제할 수 없고 강제해서는 안 됩니다. 팝업과 광고, 끝없는 참여라는 시선을 사로잡는 정신은 여기에서 설 자리가 없습니다. 당신의 임무는 명령에 대한 정보를 가능한 한 명확하고 간결하게 제공하는 좋은 사이트를 갖는 것입니다. 원한다면 가상 집사.

이것이 언어학적으로 의미하는 바는 다음과 같습니다.

• 간결한 문장,
• 평범하고 단순한 언어,
• 프론트 로드 정보(역피라미드 생각),
• 완전한 문장으로 답변을 구합니다.

작성한 내용을 소리내어 말하고 TTSReacher와 같은 무료 TTS(텍스트 음성 변환) 시스템을 통해 다시 말해 보세요. 단어는 글로 적힌 것과 크게 다르게 들릴 수 있으며 그 반대의 경우도 마찬가지입니다. 나는 가독성 알고리즘에 대해 유보적이지만 명확성을 측정하는 데 유용한 도구입니다.

추가 읽기

• A List Apart의 '음성 콘텐츠 가독성 테스트'
• 스타일의 요소 William Strunk Jr.

HAL, 불량 비트 제외

웹사이트와 대화하는 것은 채널에 구애받지 않는 웹 경험을 향한 광범위한 전환의 일부입니다. 웹사이트의 성격이 변하고 있습니다. 데스크탑에서 모바일로, 모바일에서 스마트 홈 시스템으로 점점 더 유동적으로 변하고 있습니다. 우리는 모두 '모바일 우선' 색인 생성에 대해 알고 있습니다. '음성우선'이 되기까지 얼마나 걸립니까?

엄격한 제약에서 벗어나는 것은 벅찬 일이지만 해방되기도 합니다. 우리는 웹사이트를 보고, 듣고, 이야기합니다. 각각은 약간의 개성 및/또는 살인 의도가 있는 작은 HAL과 같습니다.

처음부터 구축하든 오래된 프로젝트를 업데이트하든 웹사이트를 보다 쉽게 ​​대화할 수 있도록 할 수 있는 단계는 다음과 같습니다.

• 스크린 리더를 사용하여 사이트를 탐색합니다.
• 전화/홈 어시스턴트를 통해 음성 쿼리를 시도합니다.
• 시맨틱 마크업을 사용합니다.
• 발언 가능한 마크업을 구현합니다.

화면이 없는 상황에 맞게 웹 사이트를 디자인하면 접근성이 향상되지만 성격, 목적 및 유용성도 향상됩니다. Preston So는 A List Apart 에 대해 '당신의 콘텐츠가 채널에 구애받지 않는지를 분석하고 스트레스 테스트하는 효과적인 방법입니다.'

웹사이트를 대화하기 쉽게 만들면 빠르게 현실이 되고 있는 채널에 구애받지 않는 웹에 대비할 수 있습니다. 사이트는 화면에 표시되는 텍스트와 시각 자료가 아니라 추상적이고 유연해야 하며 점점 더 다양한 장치와 상호 작용할 수 있어야 합니다.