Overview
The candidate site is now Accessible as per WCAG 2.1( Level AA). Thus it becomes imperative that the questions are also accessible so that accessibility is not impacted.
If you are a recruiter trying to create a question for your assessment, below are the steps that will help in creating accessible questions.
- After you have created an assessment, head over to the ‘Questions’ tab and open a question in view mode.
In case you are the owner of the question you would be able to open the question in edit mode and update the endpoint to view mode as shown below.
- Run this question through axe. You can install this extension and run it to fix the violations if any. This will catch most of the violations. The below steps highlight how to use this tool to identify the issues and fix them.
Steps to Run axe:
- Install the Axe extension.
- Once you install the extension, you will need to restart the browser.
- Open the dev tools by clicking on inspect in the context menu. You can open the context menu by right-click.
- Now you should be able to see axe dev tools in the developer menu.
- Click on ‘Scan’ in the left panel to run the axe Dev tools.
Note: By default, the axe will scan the whole page so you can ignore the other issues outside the problem description.
- Axe will report all the violations along with the suggested fix. Once the violations are fixed, rerun the scan and the question is accessible now.
Dealing with Images
Why is alt text (alternative text) needed?
Sometimes you might want to add images to problem descriptions and these images might not be perceived by every user. In such cases, it becomes very important to have an option to make these images accessible to every user. Thus the need to have an alternative text (alt-text) to describe the image in question.
Below cases are where an alt text (alternative text) needs to be added.
- For screen reader users, images will not convey the information.
- For users with cognitive disabilities who do not understand images.
- Sometimes users might turn off images to prevent distraction.
Hence an alt text is recommended so that there is no loss of information for the aforementioned users.
How to add an alt text?
In the problem creation flow, you can add an image in the problem description by clicking on the ‘Image’ icon (screenshot below). This opens the ‘Image Properties’ pop-up with a Text Display field. Set an appropriate value in the Text Display field and this will be used as an alternative text (alt text) to the image.
Does every image need an alt text (alternative text)?
Not every image needs to have alt text. Most of the time, the images used will be solely for decorative purposes or some text in the problem description might already convey the purpose of the image. In such cases, adding an empty alt text is completely fine as the description contains information about the image, as shown below.
When is alt text (alternative text) mandatory?
A descriptive alt text will be needed in the below scenarios
- Images act as navigation elements for example links.
- Images contain text
Note: It is recommended to use images (if used) solely for decorative purposes in the problem description so that it is easily perceivable by all.