Gemini Tutorials Blog

Web Content Accessibility Guidelines: In Simple Words


We are waiting for the release of the new Web Content Accessibility Guidelines from W3C in September 2022.

What a WCAG:

this is a problem-solving technique that is written by (World Wide Web Consortium) to help people with different disabilities to use your web content.

History of WCAG:

– Web Content Accessibility Guidelines version 2.0 was published on 11 December 2008 replacing Web Content Accessibility Guidelines version 1.0.

– Web Content Accessibility Guidelines version 2.1 was published on 5 June 2018 which is an extension of version 2.0.

– Web Content Accessibility Guidelines version 2.2 Draft is scheduled to be finalized by September 2022.

the WCAG has 4 principles with sub-guidelines for each:

1- perceivable:يمكن إدراكه

which means disabled people can reach this content.

For example, captions on videos for people with hearing disabilities.

1.1: text alternatives:

like using slang that is more perceivable than formal language.

1.2: provide an alternative for time-based media:

like videos and audio content, you can provide a PowerPoint presentation that is not time-based to let users go through it slide by slide for different types of disabilities users might have.

1.3: Adaptable:

for example simple layout for different users without using information structure. like the use of semantic HTML5 tags which can be adapted with any screen reader.

1.4: Distinguishable:

make the content easy to reach and distinguish by separating the foreground content from the background content like separating text and UI elements from background colors or images.

2- Operable: قابل للإستخدام

For example, some people use the mouse to point and use the interface, and some people use screen readers, we need to provide both ways in case of people with movement disabilities.

2.1: Keyboard Accessible:

make all content accessible via the keyboard as many disabled users use keyboard shortcuts to navigate the web content. or even using joysticks.

2.2: Enough Time:

avoid showing one-take animation for your website, you can make it loopable or controllable for users to navigate through it on their demand. in some cases for security reasons you might need to do things once, you can inform the users in advance of this action to prepare him/her selves.

2.3: Seizures and Physical Reactions:

do not design content that causes seizures and physical reactions like flashing content and fast-motion animation or events.

2.4: Navigable:

to help users navigate and know where are they in terms of the content flow for example using breadcrumb on your pages headers, proper page titles, back-to-top buttons, or easy and clear search functionality.

2.5: Input modalities:

give an alternative for input values that needs a keyboard, like dropdown lists, multiple given choices, and suggested answers. for example, viewing content by pinch and zoom functionality you need to provide an alternative to it for users with movement disabilities.

3- Understandable: قابل للفهم

this means we need to make the content understandable by your users for example covering all spoken languages that we are targeting.

3.1: Readable:

for example, provide in parentheses an alternative for each term of a formal word

3.2: predictable:

make sure that the users can predict the actions on your web page for example a link in a menu will open a new page or sub-menu item, nothing more. and do not surprise the users with unknown behavior. also, common elements should look the same.

3.3: Input assistance:

help the users to have alternatives for entering data on the website like avoiding mistakes (for example entering the code area of a phone on a separate input or mentioning that the user needs to include it in his/her phone number) and providing ways to correct mistakes automatically or manually. this guideline includes form validation also.

4- Robust: قوي وفعال

this is the most technical principle it covers the tools that we deliver the web content on for example hardware and different screen sizes. also, bug-free content. we should QA our code over different media tools.

4.1: Compatible:

maximize compatibility with all user agents and media so that the users view your content via it.

all these are advisory guidelines but not required guidelines, it is depending on your targeted users, and if they might need some of these guidelines or all of them.

That is why there are “conformance levels” that describe your WCAG needs:

– Level A:

basic accessibility (Not excluding most diable people)

– Level AA:

meet most people’s types of disabilities. to reach it you need to confirm Level A and Double-A criteria

– Level AAA:

You need to confirm Level A, Double-A, and Triple-A criteria, this is the maximum level of accessibility features you can provide.

Stay tuned for the Web Content Accessibility Guidelines version 2.2 updates in Sep 2022!


Leave a Reply

Your email address will not be published. Required fields are marked *