Appearance

• Ensure coding has appropriate structure and relationships

  Tabular data is presented using proper HTML markup (<'table'>, <'tr'>, <'th'>, and <'td'> elements) Lists of items are presented using proper HTML markup (<'ul'>, <'ol'>, and <'li'> elements) Headings are presented using proper HTML markup (<'h1'> through <'h6'> elements) Form fields have properly associated <'label'> elements; Sets of radio buttons or checkboxes have a <'fieldset'> element to group them together, and a <'legend'> element to provide 
a label for the group

• Write clearly and use more indicators

  Use a combination of characteristics, particularly the actual names of sections and elements. 
For example, instead of “Click the circle icon,” write “Select the Flag for Later button.”

• Allow zoom without forcing horizontal scrolling

  People with low vision use zoom to scale content, sometimes up to 400%. 
As they zoom, content should reflow vertically (as a column) and remain fully legible and logical without a need for horizontal scrolling.

• Check the contrast for all borders icons & texts

  Level AA compliance requires a contrast ratio of: 3:1 for large text (>18pt normal, >14pt bold) 4.5:1 for body text (<18pt normal, <14pt bold)

• Optimize text styling for legibility

  Designing text for readability and legibility are essential to a successful user experience. Appropriate text sizing and spacing ensure that visually-impaired people can read important text, and help those with cognitive 
disabilities to better focus on text blocks.

• The hierarchy of the website should be clearly shown to the user 
(e.g., Home/About Us/Contact Us).

  The hierarchy of the website should be clearly shown to the user 
(e.g., Home/About Us/Contact Us).

• Layout is simple, straightforward, and consistent

  Your page layout should make it easy for visitors to find what they’re looking for and do what they need to do. Use clear hierarchy — put important information at the top of the page Use a logical order to help break up sections of content Use plain and descriptive language

• Make sure your content is legible any orientation

  Some users mount devices in a fixed orientation (e.g., on the arm of a wheelchair). Make sure your content doesn’t restrict its view and operation to a single display orientation, such as portrait or landscape, 
unless a specific display orientation is essential.

• Check buttons or inputs and controls have a ratio of 3:1 or higher.

  Make sure parts of any graphics required to understand the content (like a warning icon) have good color contrast.

• Text and images of text (esp. for small text size) have a contrast ratio of at least 7:1.

  It must be possible for people to increase the size of text by up to 200%. 
This ensures that partially sighted people can comfortably read content

• Avoid centered, justified, or right-aligned text

  Keeping justification to the left with a ragged right edge makes content easier to read for everyone. Use left-aligned text for left-to-right (LTR) languages Use right-aligned text for right-to-left (RTL) languages Don’t justify text Avoid centered text for more than one sentence on a page

• Ensure target sizes are at least 44px

  Make sure touch controls like hamburger menus, social icons, gallery viewers, etc. are usable by a wide range of hand and stylus sizes. 
This doesn’t include footnotes or icons in or at the end of a sentence.

• Add descriptions to sensory-based instructions

  Instructions for understanding content and accomplishing tasks shouldn’t rely solely 
on characteristics like shape, color, size, visual location, orientation, or sound.

• Make sure color isn’t the only way information is conveyed

  We shouldn’t rely solely on color to convey information, indicate an action, or distinguish a visual element. 
This makes it impossible for people who are blind, visually impaired, or who don’t easily distinguish colors to access this information.

• No loss of content or functionality occurs when the user adapts

  Paragraph spacing to 2x the font size Text line height/spacing to 1.5x the font size Word spacing to 0.16x the font size Letter spacing to 0.12x the font size

• Ensure text can be resized without loss of content or functionality

  Ensure text can be resized without loss of content or functionality

• Use clear, descriptive, sequential, logical heading order for Content

  Ensure that heading levels are chosen so they convey their correct hierarchical order in the content, not for the visual styling. Use 1 <'h1'> per page Don’t skip heading levels Headings should follow a logical, numerical order that reflects the structure of your content and clearly describes the contents of the section

• If any status message is presented and focus is not set to that message, the message must be announced to screen reader users, via an ARIA alert or live region.

  If any status message is presented and focus is not set to that message, the message must be announced to screen reader users, via an ARIA alert or live region.

Content