|Click Here to Download the PDF Version|
What is ADA?
- The Americans with Disabilities Act of 1990 is a civil rights law that prevents discrimination based on disabilities
- Disabilities include mental and physical medical conditions that do not need to to be severe or permanent to quality
- More information on ADA information page: http://www.ada.gov/index.html
What is WCAG?
- The Web Content Accessibility Guidelines are a series of principles and guidelines provided by the World Wide Web Consortium (W3C), the main international standards organization for the internet
- Provides levels (A, AA, AAA; from lightest to heaviest involvement) of compliance
- Note: The goal is not necessarily to meet AAA-level compliance, but to use the levels to determine your individual level of compliance
- The general recommendation for web content is to attempt an AA-level compliance
ADA is the law that necessitates WCAG. WCAG are the guidelines to be followed based off requirements outlined in ADA. The MoxiWebsites platform enables many forms of WCAG compliance in order to make real estate websites accessible for all, and recommends users to consider accessibility best practices when managing website content.
But first, how can I check my website for WCAG Compliance?
Google offers a developer tool, "Lighthouse," that allows users to run Accessibility checks against webpages.
- Testing and reporting is free and can be run as many times as the user likes
- Allows for both mobile and desktop testing
- Generates a report of recommended changes based on WCAG requirements
Website Content ADA Compliance Best Practices
1. Provide text-alternative transcripts and captions whenever posting video content
- YouTube offers automatic captioning of content. It is not a replacement for handwritten captions, but can be a good placeholder
- YouTube also offers the ability to upload your own caption files
- Some may prefer to provide text transcripts via a link placed by the video content
2. Provide proper text alternatives for images
- Alternative text is what screen reader technology uses to describes images on the page
- You can add alternative text to an image whenever an image is uploaded in MoxiWebsites
- Provide the best description possible! Think, "If I had to describe this to someone who cannot see, what would I say?"
3. Use descriptive text for your links
- When adding text-based links on your page, ensure the hyperlinked text has keywords that describe where the link is going
- Linked text should make sense out of context
- Example: If your link text is "Copper Country," then the screen reader will say "link Copper Country." The user will know that the webpage being linked to is likely about the Copper Country. If Instead, your link text is "click here," the screen reader will say "Link Click Here," the user will have no idea what the linked webpage may be about.
4. Follow a logical order with your content
- Your webpage's content should follow a logical order from most general to most specific as the user goes down the page
- Heading tags (ex: H1, H2, H3, etc) can be used to structure and stylize your page
- Heading tags should flow in sequential order -- it is OK to reuse tags as necessary
- It is best to not skip levels (ex: Going from H1 to H3)
5. When selecting font and background colors, double-check the Color Contract Ratio
- Color Contrast Ratio (CCR): The ratio of the luminance of the brightest color to the darkest color
- WCAG guidelines recommend a 4.5:1 or greater CCR
- You can use a Contract Checker to confirm the ration between two colors. You will have to input the HEX color value for your text and background colors for it to generate the contrast ratio
Did you know? MoxiWebsites enables keyboard navigation
Keyboard controls follows WCAG requirements for keyboard navigation summarized:
- tab: move forward through filter nav buttons or input selections
- shift + tab: move back through filter nav buttons or input selections
- space: expand or collapse dropdown elements, check and uncheck input checkbox items
- up: move through radio groups (note: when a radio group has been tabbed to, pressing tab again will move to the next group and skip the radio options, you will have to use the up and down arrow keys to move to radio options and click tab after you have made your selection) and dropdown options
- down: move through radio groups and dropdown options
- enter: select an option from a dropdown menu and selecting buttons in forms