Website Accessibility Checklist

When auditing your website for search engine optimization and quality, accessibility stands out as a challenge that many websites fail. Due to disabilities or preferences toward different browsing methods, users are frequently unable to access all content on a website, causing a bad impression to your audience. Tuning up website accessibility is essential to reaching the widest audience possible, and it can be done by following a few basic steps. Here are the ‘Do’s and ‘Don’ts’ of website accessibility. 

Follow all WCAG 2.1 standards

The Web Content Accessibility Guidelines from the World Wide Web Consortium (W3C) are the leading international standards for accessibility, focused on principles of Perceivable, Operable, Understandable, and Robust. Your website should follow these principles and guidelines to support people with visual, auditory, motor function, cognitive, and other disabilities. WCAG standards call for a variety of actions taken to support accessibility, such as:

• Do: use semantic markup. Semantic markup tags give clear meanings to differently formatted text. <header>, <h1> to <h6>, <table>, <form>, and other labels on objects make it clear to users what purpose these features serve. Semantic markup maintains the relationships and positions of different objects, and users with screen readers or other assistive technologies can recognize the context of these HTML tags even if they are invisible to the average reader.
• Don’t: use interfaces with no keyboard-friendly support. While links, buttons, and other elements are most commonly used with a mouse or touchscreen, it should always be possible to navigate to all parts of a page using the keyboard alone, such as by using the Tab key to select clickable links. Having a visual indicator of the selected link is also important. Not having a keyboard interface can be inconvenient, especially for users of assistive technologies that interact with the page through the keyboard interface. 
• Do: Implement ARIA to support assistive technologies. Accessible Rich Internet Applications (ARIA) can be used to create accessible materials on websites as an alternative or enhancement to fulfilling WCAG standards through HTML. ARIA can offer another layer of semantics for assistive technologies to use or override existing ones so only those users who depend on extra assistance can get it. ARIA should be used to organize sections of pages as landmarks, provide accessible names and descriptions, improve the keyboard navigation, and describe grid and table layouts.
• Do: use effective alternative text for all non-text content. Whether for media such as images, video, audio, or for on-page controls and inputs, text alternatives are necessary for accessibility purposes unless the default presentation is critical to the purpose of the content or is for background purposes only. 

Videos should have closed captioning that can be activated by a keyboard interface, audio should have a text transcript in HTML, and images should use the alt-text attribute. Controls and inputs should have a label that explains their purpose. 

• Do: use only high-contrast text and backgrounds. Text that’s not distinguishable from the background is hard to read. WCAG requires a contrast ratio of at least 4.5:1 so light text is contrasted with a dark background or vice versa and can be read in all lighting conditions by people with visual issues. 
• Don’t: use color alone to convey information; this can’t be recognized by colourblind people or those using screen readers. 
• Do: use a meaningful sequence & focus order. Any time when a page’s content is intended to be viewed in a specific order, that order should be maintained even if the user views the content in a different way. Use HTML and CSS to set a default order, unless there is no need to view different content in sequence. 
• Don’t: use pop-ups windows to convey information. Pop-ups cause a sudden, unpredictable shift of focus from the page and take additional effort to return to the page. The same information can be better relayed through dropdown menus. Any automatic pop-up will fail accessibility tests.  
• Don’t: use interstitial content that covers part of the viewport. Interstitial screens that roll over and cover existing content have the same issue as pop-up windows. They are especially bad for mobile accessibility because they can cover most of the screen and are hard to get dismissed, and not only WCAG standards, but also Google opposes their use. 

Ensuring mobile accessibility

Mobile websites and applications should also offer full accessibility, and several of the WCAG standards are particularly important on mobile platforms. 

Don’t: disable pinch-to-zoom. Using two fingers on a touchscreen to increase or reduce zoom is sometimes disabled by setting user-scalable=n in the meta viewport property. This stops users with visual impairments from viewing at the size they want, so make sure this option is always available. 

Don’t: repeat page titles in web apps. Using different titles on each page of a site is a general WCAG requirement to distinguish between pages, but dynamic pages created by scripts and web apps may just use the same generic title, so make sure to update the page title as users load a new page within a single-page application. 

Do: support Dynamic Type in mobile apps. Dynamic type lets users specify the font size they prefer, and when used in mobile applications it can go along with operating system-based Large Text settings. This is important to helping visually-impaired users. 

Do: support mobile keyboard input types. Mobile users may not want the default mobile keyboard if a specific input type is needed. Using the <input type> tag to set whether a phone number, email address, time, date, etc. is being entered can bring up a simplified keyboard with only the characters needed for that input. 

Read Also:-Why AMP Compliance Improves SEO

Do’s and Don’ts of Document Accessibility

Microsoft Word, Excel, PowerPoint and PDF provided online should pass all accessibility requirements to be readable by assistive technologies like screen readers. 

Do: 

• Use a standard font size: Arial or Verdana 12 for all documents. 
• Make alternative text that’s identifiable with a clear description
• Use styled headers to structure documents so assistive technologies can recognize them.
• Use hyperlinks with anchor text that is meaningful and indicates where the link goes.

Don’t: 

• Use color alone to convey information without other indicators
• Have text that is unreadable on its background due to insufficient contrast between the text and background color.
• Have alternative text that is over 180 characters. 
• Use text boxes, which won’t be read in the right order
• Have a confusing reading order with images that aren’t in line with the text they appear next to. 
• Use overly complex tables with more than one header row, merged or split cells, or empty cells. 

Following these steps for accessibility on webpages, documents, and web apps will ensure that your site is accessible to disabled users and causes less frustration for your general audience. It’s hard for web designers to anticipate every way that users experience their websites, so following accessibility principles ensures that you don’t make oversights and neglect the user experience perspective. Better accessibility leads to more traffic and satisfied visitors.