Over the past few weeks, we implemented updates for a client in the medical industry who needs to adhere to ADA Compliance Standards. This is by no means an exhaustive list, but some of the fixes we made are fairly common across many sites out there, so without giving away any identifying information, I thought I’d post a summary here, in the event it helps someone else.Issue: Images must have alternative text
Fix: Added Alternative text in pages where the missing alt text for images by editing the image and adding the image name.
Issue: Select element must have accessible names
Fix: Added aria-label name where the select field missing the accessible names.
Issue: Elements must have sufficient contrast color
Fix: Applied/Generated standard contrast color code based on this online tool https://dequeuniversity.com/rules/axe/4.1/color-contrast?application=AxeChrome
Issue: Link must have discernible text
Fix: Added aria-label for Anchor tags where they are missed.
Issue: <ul> and <ol> must only directly contain <li>, <script> or <template> elements
Fix: Corrected the order of it <li> should be there inside <ul> no other tags should be added other than <li>
Issue: ID attribute must be unique
Fix: Removed ID attribute as WordPress generated ID with small changes like post-123, post-124 it will read as same id.
Issue: Heading levels should increase by one
Fix: Always have to follow sequential order like h1, h2, h3, h4, h5, h6 in all pages and post if the order is missed fix the order by adding the header tags, or else adding title header tag with font size 0px. For example, <h2 style=”font-size:0px”>title</h2>
Issue: ARIA Commands must have accessible names
Fix: There only few ARIA commands which we have to use like aria-role=header, etc using other role it will show an error.
Issue: ARIA hidden elements must not contain focusable elements
Fix: If page have aria-hidden=false attribute then it reads the above issue for that either remove the aria-hidden or else adding aria-hidden=true. Those are dynamically generated so we will fix these by adding them using scripts.
Issue: Page must contain a level-one heading
Fix: All pages must have h1 element
Issue: Use aria-roledescription on elements with semantic role
Fix: Aria roledescription always be in order, please find the link for reference https://dequeuniversity.com/rules/axe/4.1/aria-roledescription
Issue: Input must have accessible names
Fix: Input fields must have names sometimes have names will not fix the issue for that we will fix them by adding aria-label=”name of input or anything relevant”Heavily regulated consumer industries (medical and finance, for example) often have mandates around ADA Compliance. Is your industry among those who should comply? Or is yours among those who MUST comply? Start a conversation to learn more.
