As our customers become more and more dependent on our digital services it is of increasing importance to also consider people with disabilities in the design process. If we don’t take into account people with certain needs we risk excluding a large part of our customers.

About 20 per cent of our population has some form of disability, which makes it more than just a marginalized group, but rather a substantial part of our customers.

At SEB we are continually striving for having applications and services available for anyone in need of them, regardless of their individual need and capability; everybody benefits from design that is made with good accessibility in mind.

When designing digital services we shall follow well-established guidelines for accessibility, such as W3C’s Web Content Accessibility Guidelines, version 2.0 (WCAG 2.0).

WCAG 2.0 consists of four basic principles:

• Information must be perceivable by everyone;
• The application controls must be operable by everyone;
• The content, including instructions and error messaging, must be understandable; and
• The web page must be robust, which is defined as compatible with a wide variety of browsers and assistive technologies.

Rules of thumb for digital accessibility (in Swedish):

https://webbriktlinjer.se/lappar/

Accessibility is a complex world! Follow these ten steps to make a big difference to many of our users, both internally and externally.

1. Provide text alternatives for any non-text content
2. Provide alternatives for time-based media
3. Present content in a meaningful sequence
4. Instructions should not rely on sensory characteristics
5. The user should be able to pause, turn off or lower the audio
6. Use sufficient contrast for text
7. Make all functionality available from a keyboard
8. Make focus clearly visible
9. Critical operations should be reversible
10. Use valid markup

 

1. Provide text alternatives for any non-text content

Users with screen readers and braille display need descriptions for all meaningful images and everything else that is not text.

How?

• Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Read more: https://www.w3.org/TR/WCAG21/#text-alternatives

Example

<img src="/imagevault/publishedmedia/2b236ftbwsxu7app41xa/_E9A0972-Edit_4.jpg" alt="Woman has access to our services through Mobile bank-id" title="Woman has access to our services through Mobile bank-id" class=" doublehighlight" />

 

2. Provide alternatives for time-based media

Many users need subtitles since they can not perceive or understand sounds, for example due to hearing impairment, distractions or technical issues.

• Add subtitles to media

Read more: https://www.w3.org/TR/WCAG21/#time-based-media

 

3. Present content in a meaningful sequence

Those who take part in the content, such as screen readers or a small screen, can sometimes get it presented in a reverse order. 

How?

• Check the content with a screen reader, to make sure the meaning does not change.

Read more: https://www.w3.org/TR/WCAG21/#meaningful-sequence

 

4. Instructions should not rely on sensory characteristics

Instructions provided for understanding and operating content, do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound.

• asd

Read more: https://www.w3.org/TR/WCAG21/#sensory-characteristics

 

5. The user should be able to pause, turn off or lower the audio

If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.

How?

• sdf

Read more: https://www.w3.org/TR/WCAG21/#audio-control

 

6. Use sufficient contrast for text

For those who have impaired vision or, for example, sitting with the screen in direct sunlight, need a good contrast between foreground and background in order to distinguish text. Keep in mind that the text's position against the background may vary.

How?

• The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

Read more: https://www.w3.org/TR/WCAG21/#contrast-minimum

 

7. Make all functionality available from a keyboard

All functionality of the content should be operable through a keyboard interface, and the user should not have to use a mouse or a touchscreen.

How?

• sdf

https://www.w3.org/TR/WCAG21/#keyboard-accessible

 

8. Make focus clearly visible

If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

How?

• Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

https://www.w3.org/TR/WCAG21/#focus-order

https://www.w3.org/TR/WCAG21/#focus-visible

 

9. Critical operations should be reversible

Give the user the opportunity to undo, correct or confirm critical operations.

How?

• sdf

https://www.w3.org/TR/WCAG21/#error-prevention-legal-financial-data

 

10. Use valid markup

Users have a variety of different equipment (different versions of software, different physical aids, etc.). Correct code increases the chance that content is presented properly regardless of equipment.

Html and other code can be tested automatically.

https://validator.w3.org/