Web Talk

October 16, 2019
By stan

How to Make Web Interface Accessible

Table of Contents

Share

[et_pb_section fb_built=”1″ fullwidth=”on” module_class=”single-post-hero” _builder_version=”3.24″ background_position=”bottom_center” bottom_divider_style=”slant2″ bottom_divider_color=”#ffffff” bottom_divider_height=”50px” bottom_divider_flip=”vertical|horizontal”][et_pb_fullwidth_post_title meta=”off” featured_placement=”background” text_color=”light” _builder_version=”4.0.3″ title_font=”|700|||||||” title_text_align=”center” title_text_color=”#ffffff” title_font_size=”50px” title_line_height=”1.1em” use_background_color_gradient=”on” background_color_gradient_start=”rgba(0,0,0,0.58)” background_color_gradient_end=”rgba(0,0,0,0.78)” background_color_gradient_start_position=”84%” background_color_gradient_overlays_image=”on” background_image=”https://graphem.com/wp-content/uploads/2019/04/hero-google-fonts-for-headings.jpg” background_repeat=”repeat” title_font_size_tablet=”40px” title_font_size_phone=”30px” title_font_size_last_edited=”on|phone” title_line_height_tablet=”” title_line_height_phone=”” title_line_height_last_edited=”on|phone” custom_css_main_element=”height: 70vh;” custom_css_post_title=”margin-bottom: 70px;”][/et_pb_fullwidth_post_title][/et_pb_section][et_pb_section fb_built=”1″ custom_padding_last_edited=”on|phone” admin_label=”section” _builder_version=”3.22.3″ custom_padding=”50px||0|” custom_padding_tablet=”50px|||” custom_padding_phone=”50px|||”][et_pb_row custom_padding_last_edited=”on|phone” admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_margin=”||20px|” custom_padding=”0|0px|0|0px” custom_padding_tablet=”” custom_padding_phone=”0px||0px|”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_post_title author=”off” featured_image=”off” _builder_version=”3.24″ title_font=”|700|||||||” title_line_height=”1.2em” max_width=”70%” max_width_tablet=”” max_width_phone=”100%” max_width_last_edited=”on|phone” module_alignment=”center” custom_margin=”||30px|” custom_padding=”|||” border_width_bottom=”1px” border_color_bottom=”#f3f3f3″][/et_pb_post_title][et_pb_text _builder_version=”3.29.2″ header_font=”||||||||” header_2_font=”|||||on|||” header_2_text_align=”center” header_3_font=”||||||||” header_3_text_align=”center” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”70%” max_width_tablet=”” max_width_phone=”100%” max_width_last_edited=”on|phone” module_alignment=”center” custom_padding=”|||” custom_padding_tablet=”|0px||0px” custom_padding_phone=”” custom_padding_last_edited=”on|phone”]Web accessibility is the practice of a digital environment, ensuring that people with disabilities can understand, interact with, access and control it without barriers.

You don’t have to build a brand new interface to make it accessible to anyone, you need to change the existing one.[/et_pb_text][et_pb_text module_id=”four-principles” _builder_version=”3.29.2″ header_font=”||||||||” header_2_font=”|||||on|||” header_2_text_align=”center” header_3_font=”|700|||||||” header_3_text_align=”left” header_3_font_size=”30px” header_3_line_height=”1.4em” background_color=”#f9f9f9″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”70%” max_width_tablet=”” max_width_phone=”100%” max_width_last_edited=”on|phone” module_alignment=”center” custom_padding=”40px|40px|40px|40px|true|true” custom_padding_tablet=”|0px||0px” custom_padding_phone=”” custom_padding_last_edited=”on|phone”]

The four main guiding principles of accessibility according to WCAG 2.0 are:

Perceivable

People should be able to perceive content in a way, which is accessible to them.

Operable

People should be able to interact with the interface and operate the content.

Understandable

Content and interface should be understandable to anyone.

Robust

Interface and content should remain accessible as technologies advance.

[/et_pb_text][et_pb_text ul_item_indent=”40px” _builder_version=”3.29.2″ ul_line_height=”1.5em” header_font=”||||||||” header_2_font=”|300|||||||” header_2_text_color=”#555555″ header_2_font_size=”50px” header_3_font=”|700||||on|||” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”70%” max_width_tablet=”” max_width_phone=”100%” max_width_last_edited=”on|tablet” module_alignment=”center” custom_margin=”|||” custom_padding=”|||” custom_padding_tablet=”|0px||0px” custom_padding_phone=”” custom_padding_last_edited=”on|phone” header_2_font_size_tablet=”” header_2_font_size_phone=”40px” header_2_font_size_last_edited=”on|phone”]

//01

Design

Accessibility is one of the main aspects of usability, so the task for a designer is not to think of it as a simple requirements checklist, but as one of the facets of user experience.

It is important to realize, that every person faces limitations. When you cover the needs of a person with a disability, you cover the needs of elderly people and those, who experience specific needs permanently, temporarily or situationally.

For instance: to miss one arm is a permanent state, to break an arm and to wear a cast is a temporary state, to comfort a baby – situational.[/et_pb_text][et_pb_image src=”https://graphem.com/wp-content/uploads/2019/10/graphem-how-to-make-web-interface-accessible-02.jpg” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” _builder_version=”3.29.2″ max_width=”70%” max_width_tablet=”” max_width_phone=”100%” max_width_last_edited=”on|desktop” custom_margin=”||10px||false|false” box_shadow_style=”preset1″ box_shadow_vertical=”10px” box_shadow_blur=”40px” box_shadow_spread=”2px” box_shadow_color=”rgba(0,0,0,0.15)”][/et_pb_image][et_pb_button button_url=”https://www.cnbc.com/2019/10/07/dominos-supreme-court.html” url_new_window=”on” button_text=”Supreme Court hands victory to blind man who sued Domino’s over site accessibility” button_alignment=”center” _builder_version=”3.29.2″ custom_button=”on” button_text_size=”14px” button_text_color=”#999999″ button_border_width=”0px” button_border_radius=”0px” button_font=”|300|on|||||#999999|dotted” button_use_icon=”off” custom_padding=”0px|0px|0px|0px” custom_css_main_element=”text-decoration: underline;” button_text_color_hover=”#555555″ button_bg_color_hover=”rgba(0,0,0,0)” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”on” button_text_color__hover=”#555555″ button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”on” button_bg_color__hover=”rgba(0,0,0,0)” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][/et_pb_button][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.25″][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text ul_item_indent=”40px” _builder_version=”3.29.2″ ul_line_height=”1.5em” header_font=”||||||||” header_2_font=”|300|||||||” header_2_text_color=”#555555″ header_2_font_size=”50px” header_3_font=”|700||||on|||” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”70%” max_width_tablet=”” max_width_phone=”100%” max_width_last_edited=”on|desktop” module_alignment=”center” custom_padding=”|||” custom_padding_tablet=”|0px||0px” custom_padding_phone=”” custom_padding_last_edited=”on|phone” header_2_font_size_tablet=”30px” header_2_font_size_phone=”40px” header_2_font_size_last_edited=”on|phone”]

//02

Accessibility first

Everyone will benefit from the design, that is easy to perceive and to work with. People with different abilities will see your design and will interact with it differently – a variety of human abilities generates various designs. The neat and clean design helps everyone to understand the functionality and information it contains.

There are web sites and apps that can simulate various types of color blindness, bad eyesight, and other disabilities.[/et_pb_text][et_pb_image src=”https://graphem.com/wp-content/uploads/2019/10/graphem-how-to-make-web-interface-accessible-01.jpg” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” _builder_version=”3.29.2″ max_width=”70%” max_width_tablet=”” max_width_phone=”100%” max_width_last_edited=”on|desktop” custom_margin=”||10px||false|false” box_shadow_style=”preset1″ box_shadow_vertical=”10px” box_shadow_blur=”40px” box_shadow_spread=”2px” box_shadow_color=”rgba(0,0,0,0.15)”][/et_pb_image][et_pb_button button_url=”https://www.color-blindness.com/” url_new_window=”on” button_text=”www.color-blindness.com” button_alignment=”center” _builder_version=”3.29.2″ custom_button=”on” button_text_size=”14px” button_text_color=”#999999″ button_border_width=”0px” button_border_radius=”0px” button_font=”|300|on|||||#999999|dotted” button_use_icon=”off” custom_padding=”0px|0px|0px|0px” custom_css_main_element=”text-decoration: underline;” button_text_color_hover=”#555555″ button_bg_color_hover=”rgba(0,0,0,0)” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”on” button_text_color__hover=”#555555″ button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”on” button_bg_color__hover=”rgba(0,0,0,0)” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][/et_pb_button][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.25″][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text ul_item_indent=”40px” _builder_version=”3.29.2″ ul_line_height=”1.5em” header_font=”||||||||” header_2_font=”|300|||||||” header_2_text_color=”#555555″ header_2_font_size=”50px” header_3_font=”|700||||on|||” header_4_font=”|600|||||||” header_4_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”70%” max_width_tablet=”” max_width_phone=”100%” max_width_last_edited=”on|desktop” module_alignment=”center” custom_padding=”|||” custom_padding_tablet=”|0px||0px” custom_padding_phone=”” custom_padding_last_edited=”on|phone” header_2_font_size_tablet=”30px” header_2_font_size_phone=”40px” header_2_font_size_last_edited=”on|phone” header_4_line_height_last_edited=”off|desktop”]

//03

Users

The following requirements of accessibility will help you build a product that is easy to use for everyone.

Don’t expect your users to have no special needs. Even if your product is built for a small group of people, it is important to realize, that everyone faces limitations: one broke an arm and has to wear a cast, other works in a very loud environment, while someone doesn’t sleep well for weeks because of a newborn. Include these special needs in your users’ archetypes and users’ stories.

There are various special needs that have to be taken into consideration:


  • Visual impairment.

    Blindness, myopia, hyperopia, color blindness.


  • Hearing impairment.

    Deafness, hearing loss, tinnitus.


  • Motor disability.

    Hand tremors, deformation, limn absence.


  • Problems of perception.

    Dyslexia, dementia, sleep deprivation.

Elaborate scenario in which your product is being used by people with disabilities. Make sure participants use the product in every possible aspect and let them use their own devices and settings. Make this test regular.[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.25″][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text ul_item_indent=”40px” _builder_version=”3.29.2″ ul_line_height=”1.5em” header_font=”||||||||” header_2_font=”|300|||||||” header_2_text_color=”#555555″ header_2_font_size=”50px” header_3_font=”|700||||on|||” header_4_font=”|600|||||||” header_4_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”70%” max_width_tablet=”” max_width_phone=”100%” max_width_last_edited=”on|desktop” module_alignment=”center” custom_padding=”|||” custom_padding_tablet=”|0px||0px” custom_padding_phone=”” custom_padding_last_edited=”on|phone” header_2_font_size_tablet=”30px” header_2_font_size_phone=”40px” header_2_font_size_last_edited=”on|phone” header_4_line_height_last_edited=”off|desktop”]

//04

Assistive technologies

The generic term for various range of devices and techniques used to simplify and ease the day-to-day life of people with disabilities.

Screen readers are software programs that allow blind or visually impaired users to read the text on computer screens or smartphones. Screen reader voices text, elements of the interface, as well as provides sound and vibrating response.[/et_pb_text][et_pb_code _builder_version=”3.29.2″ max_width=”70%” max_width_tablet=”” max_width_phone=”100%” max_width_last_edited=”on|desktop” module_alignment=”center”]graphem how to make web interface accessible appleVoiceOvergraphem how to make web interface accessible windowsNarrator graphem how to make web interface accessible androidTalkBack[/et_pb_code][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”3.22.3″ custom_padding=”0px|0px|20px|0px”][et_pb_row _builder_version=”3.25″ border_color_top=”rgba(0,0,0,0.3)”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_divider color=”rgba(0,0,0,0.3)” _builder_version=”3.23.4″ max_width=”70%” max_width_tablet=”” max_width_phone=”100%” max_width_last_edited=”on|phone” module_alignment=”center” height=”0px” custom_margin=”||0px|” custom_padding=”||0px|”][/et_pb_divider][et_pb_post_nav prev_text=”%title” next_text=”%title” _builder_version=”3.22.1″ title_font=”|700|||||||” title_text_color=”#0C71C3″ title_font_size=”18px” max_width=”70%” max_width_tablet=”” max_width_phone=”100%” max_width_last_edited=”on|phone” module_alignment=”center”][/et_pb_post_nav][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ disabled_on=”on|on|on” _builder_version=”3.22.3″ background_color=”#fafafa” custom_padding=”25px|0px|0|0px” disabled=”on”][et_pb_row _builder_version=”3.25″ custom_padding=”27px|0px|0|0px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_comments _builder_version=”3.23″ form_field_background_color=”#ffffff” body_font=”||||||||” form_field_font=”||||||||” custom_button=”on” button_text_size=”15px” button_text_color=”#888888″ button_bg_color=”#ffbf41″ button_border_color=”#ffbf41″ button_border_radius=”83px” button_font=”||||||||” button_use_icon=”off” max_width=”70%” module_alignment=”center” custom_css_main_header=”font-size: 16px;||font-weight: 700;||border-bottom: 1px solid #e7e7e7;||margin-bottom: 20px;” custom_css_comment_body=”padding-bottom: 0;||border-bottom: 1px solid #e7e7e7;” custom_css_reply_button=”border: none;||border-radius: 0 !important;||padding: 2px 0 2px 10px !important;||font-weight: 400 !important;||background: #fafafa !important;” custom_css_submit_button=”padding: 5px 30px !important;||color: black !important;” button_text_color_hover=”#000000″ button_border_color_hover=”#e8ab3a” button_bg_color_hover=”#e8ab3a” form_background_color=”#ffffff” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”on” button_text_color__hover=”#000000″ button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”on” button_border_color__hover=”#e8ab3a” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”on” button_bg_color__hover=”#e8ab3a” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][/et_pb_comments][/et_pb_column][/et_pb_row][/et_pb_section]

Related Articles