At HackerRank, we are continually innovating, creating, and designing to give the candidates of our platform the ability to accomplish more. One way we fulfill this objective is by committing to a diverse and inclusive culture in the hiring space. We comply with the WCAG 2.1 AA Standards to make our content accessible to a broader range of candidates with disabilities, including but not limited to blindness, deafness, cognitive limitations, and others.
Here are some of the key features that we provide to ensure that our web content is accessible to all candidates, including those with disabilities.
Make it easier for candidates to see and hear content, including separating foreground from background.
Distinguish color easily
- Colour contrast: When the contrast ratio between text and its background is adequate, people who have low vision or are colorblind are more likely to read the text. E.g., The color of the code and the error messages are in contrast with respect to their backgrounds, as shown in the two images below.
- Non-text contrast: People who have low vision or are colorblind may have difficulty perceiving the state of an element. e.g., whether it has keyboard focus, is selected/checked/pressed, etc., if the contrast between the element boundaries and/or state indicators and its background or adjacent colors is insufficient. When an interactive element’s visual boundaries and state indicators have adequate contrast, people who have low vision or are colorblind are more likely to perceive which elements on the screen are interactive and what their current state is. E.g., The checkbox has a border that is in contrast with the background.
Operability guarantees that candidates can interact with and make full use of the site while taking the test.
Navigation flow improvements
- Keyboard accessibility & shortcuts: The website is entirely accessible via keyboard. This change makes navigation for candidates who are using a keyboard to access the site. Also, contextual keyboard shortcuts throughout the website help candidates accomplish their tasks faster. E.g., Keyboard shortcuts related to code execution make it easier for candidates to run/submit their code easily.
- Skip links: Skip links are added throughout the website to help candidates reach the page’s main content directly. E.g., The candidate can now skip to the 1st question instead of going through the other options (All questions, instructions, etc.)
Seizures and physical reactions
- Blinking of Timer: Web pages should not contain anything that flashes more than three times per second. E.g., As the candidate approaches the end of the test, the timer blinks once every 1.5 seconds to notify the candidate.
Make the interface components easily discoverable to the candidates.
Discover code execution options: 'Run Code.'
- We are making the options for ‘Run Code’ and ‘Run tests’ more discoverable. The two key CTAs for program execution are clearly highlighted in the editor window.
Responsiveness (on Desktop)
Make the website responsive.
- Responsive UI: People with low vision often read content on a desktop computer by scaling content using the browser zoom functionality. If zooming causes content to overlap with other content, candidates with low vision may not be able to see or use that content. We have ensured that content is presented without the loss of information or functionality even when zoomed to 400%.
- The entire website is compatible with a screen reader. All the alerts and notifications are also accessible to the screen reader. This makes it easier for candidates using screen readers to take the test with no difficulty.