Accessibility

When websites and web tools are designed and coded thoughtfully, they become accessible to people of determination. A significant number of websites have barriers that limit their full use by these individuals.

Web accessibility is not just a matter of inclusivity—it offers benefits to individuals, businesses, and society as a whole. Adhering to international web standards is pivotal in ensuring that the digital space is accessible to everyone, especially people of determination.

The United Arab Emirates design system 2.0 is built on the principles of accessibility first and follows the guidelines of the Web Accessibility Initiative (WAI) and uses references from the Web Content Accessibility Guidelines (WCAG) 2.1, which was published on 5th June 2018, instructing federal government entities in the United Arab Emirates to comply with a AA level rating.

Furthermore, future versions of the design system will aim to stay updated with new guidelines from WAI. The latest version was released in 2023.

UAE National Digital Accessibility Policy

The National Digital Accessibility Policy supports digital transformation and service efficiency in the UAE, ensuring digital inclusivity for all segments of society, including people of determination and the elderly.

The policy strives to ensure easy access to all digital products for people of determination and the elderly. It aims to empower them with efficient access to digital services while supporting government transitions to integrated digital platforms.

Download the National Digital Accessibility Policy

Accessibility in guidelines

Every guideline describes accessibility within the structure. The purpose of the guidelines in the design system is to explain what should and should not be done. Hence, there is a strong emphasis on accessibility within each guideline.

Typography guidelines highlight basic principles of typography, pointing towards readability. They further highlight the use of text spacing and how WCAG requires spacing between paragraphs and words.
The colour system highlights the section called accessibility in colour and further indicates details about contrast ratio testing carried out on the primary colours used in the design system.
The imagery guideline is a collection of instructions that are relevant from a brand and accessibility view point. The entire guideline is built on the principles of accessibility.
The iconography guidelines has a specific section that refers to the size of icons to be used. It explains why the size of icons must be at least 24px and provides further instructions on use of icons with supporting text for screen readers.
The content guideline provides insights on the use of accessible content for websites. The tone and voice described in the content guideline is adapted with the brand and the guide and accessibility as the principle.

The purpose of guidelines is to allow federal government entities (FGE's) to build consistent looking, accessible, and structured websites. If a website is built thoughtfully using the guidelines as a basis, it will include principles of being inclusive at its core.

A simple summary

Concentrate on font size, line height and paragraph spacing.
Ensure that you are using colours with accurate colour contrast ratio tested.
While building your website, use the default zoom in your browser to 175% and ensure your website has no sections overlapping each other.
After building your website, you have to be able to navigate the entire website with only your keyboard. When you use the ` Tab ` key, there must be a visible focus state on anything that is clickable or requires an action by the user.

Accessibility in components

Every component added to the design system is built with compliance to accessibility. Using the component with the code provided ensures that you are maintaining the accessibility functions added to them. It is not recommended to replicate the components with your own style and remove any part of the recommended HTML structure.

Refer to components, and ensure you are aware of the accessibility feature documented on each component page.

Summary of common accessibility features

Each component listed in the design system has a section that describes accessibility. You must ensure you are well aware about the features of accessibility on them.
The use of ` aria ` attributes when required is mandatory. Some components do not need specefic aria labels, while some need them based on their visual changes. Each component has a detailed description on which aria attributes should be used.
When styling a ` <div> ` that acts as a reference to a clickable action element, make sure to add the ` aria-labelledby ` attribute and reference the ID of the element.

The use of voice over

You must also be aware that true accessibility is not offering a tool to a user, but adapting to the tools used by the user.

The true need for voice over

People of determination have various physical hardware as well as assistive technology that can be used by them on a daily basis.

A person of determination, will most likely, use a device for various tasks, and browse multiple websites. Rather than offering tools on your website that need further action, discovery and learning, it would be prudent to allow the user to use what they may already have.

This is the reason why being compliant with ARIA ensures that physical hardware such as Braille keyboards, or assistive voice over software installed on a device will work accurately with your website.

Voice over - as a feature - is also built into operating systems. Apple's range of Mac devices and iPhones come pre-installed with VoiceOver. Similarly, Microsoft Windows comes pre-installed with Narrator. Google's Android operating system includes TalkBack which can also be used while surfing the website on a mobile device.

Every website must include an accessibility policy page that can help explain details such as native features in operating systems that can help users navigate the website with voice over. All of the above mentioned pre-installed assistive technologies are compliant with websites that are built with ` aria ` attributes.

Accessibility in media

Consuming content on websites can be in the form of text, images, video, and more.

When content needs to be consumed via text by screen readers, having it read out loud can help people of determination with visual impairment. Similarly, using content that is present in the ` alt="" ` attributes of images can help screen readers describe the image to users with visual impairment.

A person is said to have hearing loss if they are not able to hear as well as someone with normal hearing, meaning hearing thresholds of 20 dB or better in both ears. To ensure accessibility to people of determination with hearing impairment, you must always consider the use of subtitles or captions to your video. The guidelines on WAI for Making Audio and Video Media Accessible: Content/Subtitles has a clear set of instructions on how to make video content accessible.

Always keep in mind:

The most common format for captions on the web is WebVTT, which is used to include captions and subtitles along with video content.
Do not embed the subtitle or caption within the production of your video. A user must always have the choice to turn off subtitles/captions and further, choose the language of choice.

Accessibility upgrades

The design system reviews and evaluates the need for accessibility and determines the best use case from the research conducted from the target audience.

From time to time, there will be improvements in how the internet and the world wide web adds inclusive accessibility features. Such features are further adopted by browsers and it is expected that websites would engage in upgrades to maintain this level of accessibility.

Hence, over time, the design system will add upgrades that may include changes to help accommodate accessibility features. When there is a need for a feature to be added to websites of FGE's, and target audience research determines that visual layout gains more precedence over accessibility, it will be listed as a component that is not in compliance with accessibility and should be used only when necessary.