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