Accessibility
Designing for accessibility means your digital products can be used and enjoyed by the majority.
As we continue to build and develop products for Judiciary, we want to ensure that no one is left behind. Whether it means including video captions to help people with hearing difficulties, ensuring legibility of content through high-contrast text, or even presenting information in an understandable manner. Designing for accessibility means your digital products can be used and enjoyed by the majority.
User can test the accessibility of a page at https://wave.webaim.org/
Implementing accessible design
There are many ways to achieve accessibility, without impacting the overall look and feel of your digital services.
Provide sufficient contrast between foreground and background
Foreground text needs to have sufficient contrast with background colors. This includes text on images, background gradients, buttons, and other elements.
This does not apply for logos, or incidental text, such as text that happens to be in a photograph. Minimum contrast ratio (level AA) should be 4.5:1 and enhanced contrast ratio (level AAA) should be at least 7:1.
Do not use color alone to convey information
While color can be useful to convey information, color should not be the only way information is conveyed.
You should consider using other additional identification to differentiate your design elements, e.g. use an asterisk(*) to indicate required form fields, use labels to distinguish areas on your graphs.
Ensure that interactive elements are easy to identify
Create distinctive styles for your design elements, e.g. links and buttons, so they are more identifiable.
Ensure that styles and naming for interactive elements are consistent throughout the website.
Provide clear and consistent navigation options
Ensure that navigation across pages in your website has a consistent design - naming, styling and positioning.
Provide more than 1 method of website navigation, e.g. site search or site map.
Helps users to understand their positions in a website by providing orientation cues, e.g. breadcrumbs and clear headings.
Ensure that form elements include clearly associated labels
Ensure that all fields have a descriptive label adjacent to the field. For left-to-right languages, labels are usually positioned to the left or above the field, except for checkboxes and radio buttons where they are usually to the right.
Avoid having too much space between labels and fields.
Provide easily identifiable feedback
Provide feedback for interactions, such as confirming form submission, alerting the user when something goes wrong, or notifying the user of changes on the page.
Instructions should be easy to identify. Important feedback that requires user action should be presented in a prominent style.
Use headings and spacing to group related content
Use whitespace and proximity to make relationships between content more apparent.
Style headings to group content, reduce clutter, and make it easier to scan and understand.
Create designs for different viewport sizes
Presentation of page information varies based on display viewports, e.g. mobile phones or zoomed browser windows.
Position and presentation of main elements, e.g. headers and navigation, should be modified to make the best use of the space.
Text size and line width should be set to maximize readability and legibility.
A display in a wide window, with small text, should use multiple columns for primary content, visible navigation options, and visible secondary information.
A display in a narrow window, such as a mobile phone, or with large text should use a single column for primary content. Navigation options and secondary information should be revealed using an icon.
Include image and media alternatives in your design
Provide a place in your design for media alternatives. For example, you might need:
Visible links to transcripts of audio
Visible links to audio described versions of videos
Text along with icons and graphical buttons
Captions and descriptions for tables or complex graphs
Provide controls for content that starts automatically
Provide visible controls to allow users to stop any animations or auto-playing sound. This applies to carousels, image sliders, background sound, and videos.
Last updated