멜라니 섬너는 디지털 접근성을 전문으로 하는 소프트웨어 엔지니어입니다. 엔지니어링, 접근성 디자인, Ember.js, 이러한 노력에 대한 자금 지원의 중요성에 대해 이야기했습니다.
이 게시물은 접근성 학습의 일환으로 커뮤니티 전문가를 소개합니다.
알렉산드라 클레퍼: 함께해 주셔서 감사합니다. 내 소개와 내가 하는 일
멜라니 섬너: 제 이름은 멜라니 섬너이고 디지털 접근성을 전문으로 하는 소프트웨어 엔지니어입니다. 저는 25년 동안 웹용 코드를 작성해 왔습니다. 제 첫 직업은… 일종의 스파이였습니다. 저는 미 해군에서 정보 분석가로 일했고 코딩은 취미였습니다.
스파이가 되는 건 별로 좋아하지 않았어요. 죽음은 좋아하지 않았어요. 대부분의 사람은 그렇지 않습니다. 다음 단계로 무엇을 할지 결정해야 했고, 취미를 직업으로 삼을 때가 왔습니다. 지난 10년간 저는 접근성 분야의 소프트웨어 엔지니어링에 집중해 왔습니다.
Alexandra: '처음에는 스파이였어요'라는 말을 자주 듣지는 않죠. 문제없습니다 접근성 업무를 시작하게 된 계기는 무엇인가요?
멜라니: 당시 저는 노스캐롤라이나대학교 채플힐캠퍼스[UNC] 개발부에서 일하고 있었습니다. 웹 개발과 같은 개발이 아니라 모금과 같은 개발을 의미합니다.
직속 상사는 시각장애가 있었고 모든 것을 400% 로 확대해야 볼 수 있었습니다. 그는 훌륭한 소프트웨어 엔지니어였습니다. 사실 제가 겪은 최고의 관리자일 거예요. 하지만 내 작품을 보기 위해 확대하다가 항상 내 물건을 부쉈어요. 반응형으로 빌드하는 것을 고려하지 않았다면 깨졌을 것입니다.
내 관리자의 상사는 파란색 색맹이었습니다. UNC 파란색이 어떤 색인지 아실지 모르겠지만 밝은 하늘색입니다. 흰색 배경에서 사용했을 때 마음에 들었습니다.
Alexandra: (웃음) 안 돼요.
멜라니: 상사는 내 작업을 볼 수 없다고 항상 불평했어요. 사이트에 사용할 보색과 색 구성표를 개발해야 했습니다. 이때 색상 대비에 대해 생각하게 되었고 색맹 (또는 기타 시각 장애)이 있는 사용자가 웹을 사용하는 방식에 대해 생각하게 되었습니다.
UNC는 주립 대학이므로 WCAG 접근성 레벨 AA를 준수해야 하는 미국 연방 요구사항이 있습니다. 교육 기관이므로 AAA 등급을 목표로 했습니다.
주 및 연방 요구사항에 대해 자세히 알아보고 W3C 접근성 사양을 읽기 시작하면서 '이 모든 것이 이해가 된다'고 생각했습니다. 제가 보기에는 대부분의 웹이 규정을 준수하지 않았습니다. 물론 웹이 존재하는 한 웹 접근성 개선을 위해 노력해 온 사람들도 있습니다. 특히 JavaScript 엔지니어는 디지털 접근성에 관해 이해하는 데 시간이 걸리는 경우가 있습니다.
저는 접근성을 웹의 마지막 개척지라고 부릅니다. 접근성 자동화를 위해 많은 훌륭한 사람들이 노력하고 있으며, 성능 및 보안과 같은 다른 어려운 문제에 접근했던 방식과 동일한 방식으로 솔루션을 개발해야 합니다.
Alexandra: 해군과 UNC에서 길고 복잡한 문서를 많이 읽었을 텐데요. 사양을 이해하기 어려웠나요?
멜라니: 이해하려면 다섯 번 정도 읽어야 했어요. 다른 사양은 전에 읽어 봤는데도요. 사양을 다섯 번이나 읽어야 했으니 이해하지 못해도 괜찮다고 항상 말합니다. 농담이 아닙니다.
사양 언어에 익숙해지는 데 시간이 많이 걸립니다. 이를 올바르게 해석하지 않으면 잘못된 작업을 수행할 수 있습니다. 또한 사양 언어의 상당 부분이 브라우저 개발자를 위한 것이라는 점을 이해하는 것이 중요합니다. '작성자는 다음을 해야 합니다'를 찾아보세요. 이는 웹 개발자를 참조하는 내용입니다.
Alexandra: 더 많은 개발자가 사양을 해독하는 방법을 안다면 웹이 훨씬 더 나아질 수 있습니다.
멜라니: 해석을 대신해 주는 사이트도 많습니다. a11y-automation.dev를 만들었는데 이 사이트는 제 아기이자 부업 프로젝트와 같습니다. 모든 접근성 위반사항을 항목별로 나열하고 해당 WCAG 성공 기준에 연결하려고 합니다. 오류를 방지하는 자동화가 있는 경우 해당 솔루션을 제공합니다.
잠재적인 위반 목록을 숙지할 수도 있지만, 수정 방법을 배우는 것이 더 중요합니다. 존재하지 않는 자동 수정의 경우 린터나 템플릿을 작성할 수도 있고, 테스트를 작성할 수도 있습니다.
오픈소스에서 작업하는 것을 선호합니다. 서로의 아이디어를 발전시키고 개선사항을 제안할 수 있기 때문입니다 (개선사항이 아닐 수도 있지만 모두 최선을 다합니다). 서로의 작업을 기반으로 구축하면 웹에서 정말 멋진 결과를 얻을 수 있습니다.
접근성 지원 방법
Alexandra: pleasefunda11y.com이 정말 마음에 들었어요. 개발자가 접근성 있는 사이트를 빌드하는 방법을 배우는 것은 정말 중요하지만, 경영진의 자금 지원과 승인이 없으면 리소스가 부족할 수 있습니다. 이 사이트를 만들기로 결정한 이유는 무엇인가요?
멜라니: 접근성이 너무 부족해서 답답했어요. 모든 오픈소스 자금이 CSS로 계속 이동하는 것 같습니다. CSS를 좋아합니다. CSS로 할 수 있는 일이 정말 많습니다.
Chrome 소프트웨어 엔지니어링 관리자인 애디 오스매니가 연락해 제가 접근성 지원금을 요청하는 것을 보았지만 어떤 구체적인 작업에 지원금을 받을 수 있는지에 대한 조언을 구하고 싶다고 말했기 때문에 이 사이트를 만들었습니다. 이는 큰 문제입니다. 오픈소스 후원자는 결과가 정해지지 않은 일반적인 아이디어가 아닌 특정 프로젝트에 돈을 기부하고 싶어 합니다. 사이트를 접근 가능하게 만드는 데 필요한 사항과 그 방법이 구체적인 이니셔티브를 통해 어떻게 도움이 되는지 적어 보았습니다.
회사가 저 없이도 이러한 노력을 기울인다면 웹의 접근성을 매우 중요한 방식으로 발전시킬 수 있습니다. 다른 웹 노력에 비해 매우 적은 비용으로 사람들의 삶에 큰 영향을 미칠 수 있습니다.
현재의 사고방식은 '장애인이 얼마나 되나요?'인 경우가 많습니다. '사람과 기술의 관계는 무엇인가?'
일부 사람들은 저에게 '색맹은 장애가 아니라고 생각해요'라고 말합니다. 색맹이 있는 경우 장애가 있다고 생각하지 않을 수 있지만 기술과의 관계에 영향을 미칩니다.
Alexandra: 기술과의 관계를 이해하는 데 대해 자세히 알려줘. 이것이 접근성과는 어떤 관련이 있나요?
멜라니: 예를 들어 신경다양성이 있는 경우 매우 간단한 언어와 명확한 안내가 필요할 수 있습니다. 흐름에서 3~4개의 화면을 탐색하고 끝에 도달할 때까지 한 번에 몇 가지 선택을 하는 것이 더 나을 수 있습니다. 최신 기술 애플리케이션에 대한 적절한 안내가 없습니다.
DevOps를 수행하는 회사 전체가 있습니다. 이러한 웹사이트를 사용하려고 하면 '세상에'라는 말이 절로 나옵니다. 요즘은 모든 인터페이스에 다양한 기능을 담으려고 합니다.
Alexandra: 예를 들어 주실 수 있나요?
멜라니: 예를 들어 GitHub에는 중첩된 탭이 있는 드롭다운이 있습니다. 그리고 [짜증스러운 한숨]. 화가 나도 화를 낼 수 없습니다. 최신 웹은 새로운 요구사항을 충족하기 위해 성장해야 합니다. 하지만 Google은 누구도 소외되지 않는 방식으로 AI를 구축해야 할 책임도 있습니다.
그게 저를 움직이는 동기이자 열정입니다. 직장에서 사용해야 하는 도구에 액세스할 수 없어서 취업하지 못하는 사람이 없기를 바랍니다.
Alexandra: 100%입니다. 또한 사람들은 외부 사용자를 위한 접근성 제품을 구축하는 것에 대해 생각하지만 직원에 대해서는 생각하지 않는 경우가 많습니다.
멜라니: 이 자금 조언이 모두에게 도움이 될 것 같았어요.
엔지니어들은 접근성을 구현하고 싶지만 '회사에서 신경 쓰지 않는다'고 말합니다. 분명히 신경 쓸 거예요. 비즈니스 로직 격차만 해소하면 됩니다. 비즈니스에 유익한 결과를 보여주세요. 물론 사이트는 오픈소스이며 기여와 수정은 언제나 환영입니다.
Alexandra: 접근성은 '나중에 접근성을 지원하면 돼'와 같이 프로세스 끝에 남겨지는 경우가 많습니다. 하지만 나중에 추가하는 데는 프로젝트 전반에 걸쳐 접근성 관행을 통합하는 것보다 훨씬 더 많은 시간이 걸립니다.
멜라니: 저는 종종 '한 번 빌드하는 데 비용을 지불하시겠어요 아니면 두 번 빌드하는 데 비용을 지불하시겠어요?'라고 말합니다.
Ember.js 및 핵심 접근성팀
Alexandra: Ember.js 프레임워크 핵심팀에도 참여하고 계신 것으로 알고 있습니다. 어떻게 참여하게 되었나요?
멜라니: JPMorgan Chase의 기업 투자 은행 플랫폼에서 일하도록 채용되었습니다. Ember는 매우 안정적인 (약간 지루할 수도 있음) 기반이 필요할 때 사용되는 강력한 JavaScript 프레임워크로, 많은 비용을 낭비하는 코드를 작성하지 않도록 도와줍니다. Ember는 이전 버전과의 호환성을 보장합니다. 주요 버전에 도달하더라도 매번 업그레이드할 수 있습니다. Google은 앱이 중단되지 않도록 점진적으로 변경하려고 노력합니다.
어쨌든 Ember 컨퍼런스에 참석해서 커뮤니티의 많은 사람들을 만났습니다. Ember 직원들은 정말 친절했습니다. 다른 곳에서는 아직 보지 못한 매우 강력한 행동 강령이 있습니다.
군대에서 제대한 후 보안 분야로 진출하고 싶었습니다. 정보 보안 모임에 갔는데 다른 여성은 한 명도 없었어요. 나이가 좀 있는 남자가 나를 보더니 '여기 맞는 방 맞아요, 아가씨?'라고 말했습니다.
Alexandra: [신음] 아파. 이러한 결과는 전혀 놀랍지 않습니다. 저도 비슷한 경험이 있습니다.
멜라니: 2011년이나 2012년이었던 것 같아요. 상황이 많이 바뀌었습니다. 그날 밤, 그 모임을 통해 내 주장을 증명하기 위해 머물렀습니다. 그 댓글 때문에 활동을 중단할 수는 없었어요. 농담을 하고, 메모를 잘하고, 대화에 참여해서 사람들이 내가 있다는 것을 알게 했습니다. 내 경력의 많은 부분이 남성들이 틀렸다는 것을 증명하는 데 쓰인 것 같아요.
하지만 남성에게 틀렸다는 것을 증명하기 위해 여성이 소프트웨어 엔지니어가 되기를 바라지는 않습니다. 소프트웨어 엔지니어가 되어 멋진 것을 만들고 싶었습니다. 재미있기 때문입니다. 여성도 이러한 직업을 선택할 수 있어야 합니다.
Alexandra: 물론입니다.
멜라니: 은행 플랫폼이므로 미국 연방 요구사항을 준수해야 하므로 접근성에 대해 알고 있는 내용을 Ember 커뮤니티와 공유했습니다. 예후다 카츠와 톰 데일은 '팀에 공백이 있습니다. JavaScript 전문가, 성능 전문가, 뛰어난 인재가 많지만 접근성 지식을 갖춘 사람이 필요합니다.' 그리고 핵심 팀에 합류하도록 초대했습니다.
저는 Ember를 기본적으로 액세스할 수 있도록 지원하는 이니셔티브를 진행하고 있습니다. 즉, ember new <my-app-name>라고 말하면 즉시 WCAG 성공 기준을 통과해야 합니다.
Alexandra: GitHub에서 Ember용 접근성 도구 목록을 길게 봤어. Ember 커뮤니티의 사람들이 이러한 도구에 기여하는 데 열정적인가요?
멜라니: 이 작업에서 정말 흥미로운 부분이었습니다. LinkedIn에서 근무하는 동안 Ember의 접근성 린팅 규칙을 작성했습니다. 그런 다음 LinkedIn을 떠나 Hashicorp에서 일하게 되었고, 다른 사람들은 린터가 유용하기 때문에 계속해서 기여하고 있습니다. 이 일에서 가장 소름 돋고 흥분되는 부분입니다.
Google은 접근성이 기본적으로 시민권이라고 생각합니다. 이 문제는 논의 대상이 아닙니다.
논의되는 내용은 다음과 같습니다. 무엇을 구현할 수 있나요? 시기 어떻게 만드나요? 이 기능을 어떻게 가르치고 이전 버전과 호환되게 만들 수 있을까요? 개발자가 빌드하거나 계획해야 하는 대규모 추가 기능 없이 접근성 지원을 제공하도록 어떻게 지원하나요?
Alexandra: 접근성은 시민권입니다. 소름이 돋네! 모두가 진실로 알고 있어야 합니다.
멜라니: '내가 시각장애인이면 인터넷을 사용하지 않을 거야'와 같은 무지한 말을 듣기도 합니다. 또는 '사용자의 5% 만 장애가 있는데 왜 장애를 고려해야 하나요? 90% 의 사용자는 잘 작동하는데요.' 이러한 논의는 업무에서 주의를 분산시키는 데 자주 사용되므로 논의하지 않겠습니다.
접근성 있는 코드를 작성하면 W3C 사양에 따라 사이트를 빌드하는 것을 고려하므로 성능이 향상됩니다. div 대신 시맨틱 HTML을 사용하고 제목을 사용합니다. <div>에 클릭 이벤트를 추가하는 대신 <button>를 선택하면 성능이 향상됩니다.
한 가지 작업: 접근성 자동화
Alexandra: 웹 개발자가 접근성 높은 웹사이트를 구축하기 위해 해야 할 일 한 가지는 무엇인가요?
멜라니: 자동화를 추가해 줘. 사용 중인 프레임워크와 코드 종류에 관계없이 기존 린터로 시작하세요. 어떤 것을 사용하든 상관없습니다. 이러한 규칙 중 하나라도 위반되면 빌드가 중단되어야 합니다.
AI가 아직 의도를 파악할 수 없기 때문에 자동화할 수 없는 작업도 있습니다. 예를 들어 이미지의 대체 텍스트 값은 의미가 있어야 하지만 실제로 무슨 뜻일까요? 현재는 자동화가 아닌 사람이 이를 식별해야 합니다.
하지만 자동화된 도구는 '색상 대비를 통과하지 못했습니다'라고 알려줄 수 있습니다. 문제를 수정해 줘. 거부하지 말고 '이렇게 하고 싶지 않아요. 이렇게 하는 게 더 좋아요'라고 말하지 마세요. 이 문제는 귀하와 관련이 없습니다. Google의 목표는 전 세계 모든 사람이 매일 Google의 서비스를 이용할 수 있도록 하는 것입니다.
접근성은 여정이며 항상 배우게 됩니다. 10년 넘게 접근성을 전문으로 해 왔지만 아직도 항상 새로운 것을 배우고 있습니다. 방어적인 태도를 취하지 말고 그냥 하세요.
멜라니의 작업은 웹사이트(melanie.codes)와 트위터(@a11yMel)에서 확인할 수 있습니다. pleasefunda11y.com, a11y-info.com, a11y-automation.dev에서 그녀의 접근성 리소스를 확인하세요.