Accessibility(접근성)을 향상시키는 5가지 시각적 처리

본 아티클은 아래의 글을 한국어로 번역한 글이다.

https://www.nngroup.com/articles/visual-treatments-accessibility/

5 Visual Treatments that Improve Accessibility

 

 

According to the CDC, 61 million adults in the United States live with a disability. Given the number of people who have a disability and the rise of Americans with Disabilities (ADA) website-related lawsuits over the past years, it is imperative that we design for these individuals. After all, accessible design drives better usability. Accessibility standards such as the Web Content Accessibility Guidelines (WCAG) are a good starting point for those aiming to improve the accessibility of their design. Additionally, platform-specific UI recommendations such as Apple’s Human-Interface Guidelines and Google’s Material Design also include accessibility guidelines for designers working within those ecosystems. This article presents 5 general guidelines that can be used to improve the accessibility of your visuals:

1. Design for color contrast
2. Provide visual cues in addition to color
3. Make interactive elements easy to identify
4. Use robust alternative text for images or graphics
5. Test with real users

CDC에 따르면 미국 성인 6,100만 명이 장애를 안고 살고 있다. 장애가 있는 사람들의 수와 지난 몇 년간 ADA(Americans with Disabilities) 웹 사이트 관련 소송이 증가한 것을 감안할 때 이러한 개인을 위해 디자인하는 것이 필수적이다. 결국 접근 가능한 디자인은 더 나은 사용성을 제공한다. WCAG(Web Content Accessibility Guidelines) 와 같은 접근성 표준은 디자인의 접근성을 개선하려는 사람들에게 좋은 출발점이다. 또한 Apple의 Human-Interface Guidelines 및 Google의 Material Design과 같은 플랫폼별 UI 권장 사항또한 해당 에코시스템 내에서 작업하는 디자이너를 위한 접근성 가이드라인도 포함이다. 이 글에서는 시각적 개체의 접근성을 개선하는 데 사용할 수 있는 5가지 일반 가이드라인을 제시한다.

1. 색상 대비를 위한 디자인
2. 색상 외에 시각적 신호 제공
3. 대화형 요소를 쉽게 식별할 수 있도록 만들기
4. 이미지 또는 그래픽에 강력한 대체 텍스트 사용
5. 실제 사용자와 테스트

 

 

1. Design for Color Contrast

People with vision impairments can have trouble reading text on low-contrast backgrounds. A higher contrast ratio between text and its background helps users with a low vision to read without contrast-enhancing assistive technology. This color contrast can also help users with normal vision to have a comfortable reading experience. According to the WCAG, the color-contrast ratio between text and its background should be at least 4.5:1. For text that is at least 18pt or 14pt bold, the ratio is a bit more generous at 3:1.

There are several tools to check color contrast. I like using accessible-colors.com because it provides decent alternative color suggestions if your contrast ratio is not compliant. To check for the color-contrast ratio, you will need to input the text size, the text weight, and the hexadecimal codes for text color and background color.

 

1. 색상 대비를 위한 디자인

시각 장애가 있는 사람은 대비가 낮은 배경에서 텍스트를 읽는 데 어려움을 겪을 수 있다. 텍스트와 배경 간의 대비율이 높으면 저시력 사용자가 대비를 강화하는 보조 기술 없이 읽을 수 있다. 이 색상 대비는 정상적인 시력을 가진 사용자가 편안하게 읽을 수 있도록 돕는다. WCAG 에 따르면 텍스트와 배경 사이의 색 대비 비율은 최소 4.5:1이어야 한다. 최소 18pt 또는 14pt 굵게 표시된 텍스트의 경우 비율은 3:1로 좀 더 관대하다.

색상 대비를 확인하는 몇 가지 도구가 있다. 명암비가 호환되지 않는 경우 적절한 대체 색상 제안을 제공하기 때문에 access-colors.com을 사용하는 것을 좋다. 색상 대비 비율을 확인하려면 텍스트 크기, 텍스트 두께, 텍스트 색상 및 배경 색상에 대한 16진수 코드를 입력해야 한다.

 

 

2. Provide Visual Cues in Addition to Color

Individuals who have color blindness or low visual acuity may not be able to distinguish between elements differentiated by color alone. It is thus important to use additional cues (such as strokes, patterns) to communicate important information.

 

2. 색상 외에 시각적 단서 제공

색맹이거나 시력이 낮은 사람은 색만으로 구분되는 요소를 구별하지 못할 수 있다. 따라서 중요한 정보를 전달하기 위해 추가적인 단서(획, 패턴 등) 를 사용하는 것이 중요하다.

 

If you’re not sure if you need an additional design element in addition to color to get a point across, try the grayscale trick. Turn your design into grayscale and see if you can correctly understand the design.

 

포인트를 전달하기 위해 색상 외에 추가 디자인 요소가 필요한지 확실하지 않은 경우 그레이스케일 기법을 사용해보라. 디자인을 회색조로 변환하고 디자인을 올바르게 이해할 수 있는지 확인하십시오.

 

 

 

3. Identify Focus State

Not only is it good usability practice to make interactive elements easily identifiable, but it is also beneficial for individuals who use the keyboard to navigate the web. A focus indicator, which is, by default, a blue outline around an element, helps people know which active element has the keyboard focus.

Focus states are easily customizable to fit your visual-design needs or brand standards. Links, form fields, widgets, buttons, and menu items should be focusable and their focus state should be clearly indicated.  

I recommend using a visually obvious stroke (e.g., a thick-weight line around the in-focus element) to clearly identify a focus state for two reasons:

• This indicator is the default signal and many users expect it.
• Color change alone is not enough to distinguish between different states (see guideline #3 above), as it may not be perceived by some people with vision impairments.

 

3. 포커스 상태 식별

대화형 요소를 쉽게 식별할 수 있도록 하는 것은 좋은 사용성 관행일 뿐만 아니라 키보드를 사용하여 웹을 탐색하는 개인에게도 유익하다. 기본적으로 요소 주변의 파란색 윤곽선인 포커스 표시기는 어떤 활성 요소에 키보드 포커스가 있는지 사람들이 알 수 있도록 도와준다.

포커스 상태는 시각적 디자인 요구 사항이나 브랜드 표준에 맞게 쉽게 사용자 정의할 수 있다. 링크, 양식 필드, 위젯, 버튼 및 메뉴 항목은 포커스를 맞출 수 있어야 하며 해당 포커스 상태가 명확하게 표시되어야 한다.  

다음 두 가지 이유로 포커스 상태를 명확하게 식별하기 위해 시각적으로 명확한 획(예: 초점 요소 주변의 두꺼운 두께 선) 을 사용하는 것이 좋다 .

• 이 표시기는 기본 신호이며 많은 사용자가 이를 기대한다.
• 색 변화만으로는 여러 상태를 구별하기에 충분하지 않습니다(위의 가이드라인 #1 참조). 일부 시각 장애가 있는 사람들은 색 변화를 인식하지 못할 수 있다.

 

 

4. Use Robust Alternative Text for Images

Some users may use screen readers to interact and use a website. Alterative text (or ALT text) should be used to describe images and other graphic elements so that people who cannot see them can still get an idea of what is represented. A few guidelines to keep in mind when writing ALT text:

• Keep ALT text succinct.
• The ALT text should not replicate the caption of the image (since both will be read by the screen reader).
• ALT text should not be used for purely decorative images. If an image has no ALT text, the screen reader will jump over it, thus lessening the working-memory load for users.

If you’re having trouble coming up with something valuable to include in your ALT text, reach out to a content designer.

 

4. 이미지에 강력한 대체 텍스트 사용

일부 사용자는 스크린 리더를 사용하여 웹 사이트와 상호 작용하고 사용할 수 있다. 대체 텍스트 (또는 ALT 텍스트 )는 이미지 및 기타 그래픽 요소를 설명하는 데 사용되어야 이미지를 볼 수 없는 사람도 무엇을 나타내는지 알 수 있다. ALT 텍스트를 작성할 때 염두에 두어야 할 몇 가지 지침:

• ALT 텍스트를 간결하게 유지하라.
• ALT 텍스트는 이미지의 캡션을 복제하면 안 된다. (두 가지 모두 스크린 리더에서 읽히기 때문).
• ALT 텍스트는 순전히 장식용 이미지에 사용하면 안 된다. 이미지에 ALT 텍스트가 없으면 스크린 리더가 해당 이미지를 건너뛰므로 사용자의 작업 메모리 부하가 줄어든다.

ALT 텍스트에 포함할 가치 있는 내용을 찾는 데 문제가 있는 경우 콘텐츠 디자이너에게 문의하자.

 

 

 

 

5. Test with Real Users

Make accessibility part of your research. Here are some tips to test your designs:

• Get familiar with common assistive tools. Understand how tools like screen readers, screen magnifiers, or Braille devices work and how to support them with your design.
• Try it yourself. Use the keyboard to navigate through your designs or turn on a screen reader. What did you miss or not account for? Is there anything confusing about the experience? Address these issues before testing your design with real users.
• Test your design with real users. You need only 5 users  to get valuable feedback. Fix the issues and test again as needed.
• Consider recruiting users with a mix of accessibility needs — for example, people with low vision and people with motor difficulty.

 

5. 실제 사용자와 테스트

접근성을 연구의 일부로 만드십시오. 다음은 디자인을 테스트하기 위한 몇 가지 팁입니다.

• 일반적인 보조 도구에 익숙해져라. 화면 판독기, 화면 돋보기 또는 점자 장치와 같은 도구가 작동하는 방식과 디자인에서 이러한 도구를 지원하는 방법을 이해한다.
• 직접 해봐라. 키보드를 사용하여 디자인을 탐색하거나 스크린 리더를 켠다. 무엇을 놓치거나 설명하지 않았을까? 경험에 대해 혼란스러운 점이 있을까? 실제 사용자와 디자인을 테스트하기 전에 이러한 문제를 해결하라.
• 실제 사용자와 함께 디자인을 테스트하라.  귀중한 피드백을 받으려면 5명의 사용자만 있으면 된다. 문제를 수정하고 필요에 따라 다시 테스트하라.
• 예를 들어 시력이 약한 사람과 운동 장애가 있는 사람과 같이 접근성 요구 사항이 혼합된 사용자를 모집하는 것을 고려하라 .

 

Conclusion

How do your visuals hold up against these guidelines? If you haven’t designed with accessibility in mind, add it as a theme in your UX roadmap. Review your designs for accessibility and test them with real users with accessibility needs. It’s easier to design with accessibility in mind as you go, so there is less rework. Don’t sacrifice usability for aesthetics.

 

결론

당신의 시각 자료는 이러한 가이드라인에 어떻게 부합하는가? 접근성을 염두에 두고 디자인하지 않았다면 UX 로드맵에 테마로 추가하라. 접근성에 대한 디자인을 검토하고 접근성이 필요한 실제 사용자와 함께 테스트하라. 진행하면서 접근성을 염두에 두고 설계하기가 더 쉽기 때문에 재작업이 줄어든다. 미학을 위해 유용성을 희생하지 마라.